refactor(types): shorten ref, id JSDocs, use CarbonIcon type, export component props

types/DataTable/DataTable.d.ts

@@ -11,106 +11,107 @@ interface Header {
 
 type Headers = Header[];
 
+export interface DataTableProps {
+  /**
+   * Specify the data table headers
+   * @default []
+   */
+  headers?: Headers;
+
+  /**
+   * Specify the rows the data table should render
+   * keys defined in `headers` are used for the row ids
+   * @default []
+   */
+  rows?: Object[];
+
+  /**
+   * Set the size of the data table
+   */
+  size?: "compact" | "short" | "tall";
+
+  /**
+   * Specify the title of the data table
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the description of the data table
+   * @default ""
+   */
+  description?: string;
+
+  /**
+   * Set to `true` to use zebra styles
+   * @default false
+   */
+  zebra?: boolean;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Set to `true` for the expandable variant
+   * Automatically set to `true` if `batchExpansion` is `true`
+   * @default false
+   */
+  expandable?: boolean;
+
+  /**
+   * Set to `true` to enable batch expansion
+   * @default false
+   */
+  batchExpansion?: boolean;
+
+  /**
+   * Specify the row ids to be expanded
+   * @default []
+   */
+  expandedRowIds?: string[];
+
+  /**
+   * Set to `true` for the radio selection variant
+   * @default false
+   */
+  radio?: boolean;
+
+  /**
+   * Set to `true` for the selectable variant
+   * Automatically set to `true` if `radio` or `batchSelection` are `true`
+   * @default false
+   */
+  selectable?: boolean;
+
+  /**
+   * Set to `true` to enable batch selection
+   * @default false
+   */
+  batchSelection?: boolean;
+
+  /**
+   * Specify the row ids to be selected
+   * @default []
+   */
+  selectedRowIds?: string[];
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+}
+
 export default class DataTable {
-  $$prop_def: {
-    /**
-     * Specify the data table headers
-     * @default []
-     */
-    headers?: Headers;
-
-    /**
-     * Specify the rows the data table should render
-     * keys defined in `headers` are used for the row ids
-     * @default []
-     */
-    rows?: Object[];
-
-    /**
-     * Set the size of the data table
-     */
-    size?: "compact" | "short" | "tall";
-
-    /**
-     * Specify the title of the data table
-     * @default ""
-     */
-    title?: string;
-
-    /**
-     * Specify the description of the data table
-     * @default ""
-     */
-    description?: string;
-
-    /**
-     * Set to `true` to use zebra styles
-     * @default false
-     */
-    zebra?: boolean;
-
-    /**
-     * Set to `true` for the sortable variant
-     * @default false
-     */
-    sortable?: boolean;
-
-    /**
-     * Set to `true` for the expandable variant
-     * Automatically set to `true` if `batchExpansion` is `true`
-     * @default false
-     */
-    expandable?: boolean;
-
-    /**
-     * Set to `true` to enable batch expansion
-     * @default false
-     */
-    batchExpansion?: boolean;
-
-    /**
-     * Specify the row ids to be expanded
-     * @default []
-     */
-    expandedRowIds?: string[];
-
-    /**
-     * Set to `true` for the radio selection variant
-     * @default false
-     */
-    radio?: boolean;
-
-    /**
-     * Set to `true` for the selectable variant
-     * Automatically set to `true` if `radio` or `batchSelection` are `true`
-     * @default false
-     */
-    selectable?: boolean;
-
-    /**
-     * Set to `true` to enable batch selection
-     * @default false
-     */
-    batchSelection?: boolean;
-
-    /**
-     * Specify the row ids to be selected
-     * @default []
-     */
-    selectedRowIds?: string[];
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
+  $$prop_def: DataTableProps;
   $$slot_def: {
     default: {};
-    ["expanded-row"]: { row: Object };
-    ["cell-header"]: { header: Header };
     cell: { row: Object; cell: Object };
+    ["cell-header"]: { header: Header };
+    ["expanded-row"]: { row: Object };
   };
 
   $on(

types/DataTable/Table.d.ts

@@ -1,43 +1,44 @@
 /// <reference types="svelte" />
 
+export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+  /**
+   * Set the size of the table
+   */
+  size?: "compact" | "short" | "tall";
+
+  /**
+   * Set to `true` to use zebra styles
+   * @default false
+   */
+  zebra?: boolean;
+
+  /**
+   * Set to `true` to use static width
+   * @default false
+   */
+  useStaticWidth?: boolean;
+
+  /**
+   * Set to `true` for the bordered variant
+   * @default false
+   */
+  shouldShowBorder?: boolean;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+}
+
 export default class Table {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> & {
-    /**
-     * Set the size of the table
-     */
-    size?: "compact" | "short" | "tall";
-
-    /**
-     * Set to `true` to use zebra styles
-     * @default false
-     */
-    zebra?: boolean;
-
-    /**
-     * Set to `true` to use static width
-     * @default false
-     */
-    useStaticWidth?: boolean;
-
-    /**
-     * Set to `true` for the bordered variant
-     * @default false
-     */
-    shouldShowBorder?: boolean;
-
-    /**
-     * Set to `true` for the sortable variant
-     * @default false
-     */
-    sortable?: boolean;
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
+  $$prop_def: TableProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableBody.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableBody {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> & {};
+export interface TableBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
 
+export default class TableBody {
+  $$prop_def: TableBodyProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableCell.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableCell {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> & {};
+export interface TableCellProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
 
+export default class TableCell {
+  $$prop_def: TableCellProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableContainer.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="svelte" />
 
+export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the title of the data table
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the description of the data table
+   * @default ""
+   */
+  description?: string;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+}
+
 export default class TableContainer {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the title of the data table
-     * @default ""
-     */
-    title?: string;
-
-    /**
-     * Specify the description of the data table
-     * @default ""
-     */
-    description?: string;
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
+  $$prop_def: TableContainerProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableHead.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableHead {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> & {};
+export interface TableHeadProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
 
+export default class TableHead {
+  $$prop_def: TableHeadProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableHeader.d.ts

@@ -1,25 +1,27 @@
 /// <reference types="svelte" />
 
+export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
+  /**
+   * Specify the `scope` attribute
+   * @default "col"
+   */
+  scope?: string;
+
+  /**
+   * Override the default id translations
+   * @default () => ""
+   */
+  translateWithId?: () => string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
 export default class TableHeader {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> & {
-    /**
-     * Specify the `scope` attribute
-     * @default "col"
-     */
-    scope?: string;
-
-    /**
-     * Override the default id translations
-     * @default () => ""
-     */
-    translateWithId?: () => string;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-  };
-
+  $$prop_def: TableHeaderProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableRow.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableRow {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> & {};
+export interface TableRowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
 
+export default class TableRow {
+  $$prop_def: TableRowProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/Toolbar.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class Toolbar {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> & {
-    /**
-     * Specify the toolbar size
-     * @default "default"
-     */
-    size?: "sm" | "default";
-  };
+export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+  /**
+   * Specify the toolbar size
+   * @default "default"
+   */
+  size?: "sm" | "default";
+}
 
+export default class Toolbar {
+  $$prop_def: ToolbarProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarBatchActions.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class ToolbarBatchActions {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Override the total items selected text
-     * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
-     */
-    formatTotalSelected?: (totalSelected: number) => string;
-  };
+export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Override the total items selected text
+   * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
+   */
+  formatTotalSelected?: (totalSelected: number) => string;
+}
 
+export default class ToolbarBatchActions {
+  $$prop_def: ToolbarBatchActionsProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarContent.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarContent {
-  $$prop_def: {};
+export interface ToolbarContentProps {}
 
+export default class ToolbarContent {
+  $$prop_def: ToolbarContentProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarMenu.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarMenu {
-  $$prop_def: {};
+export interface ToolbarMenuProps {}
 
+export default class ToolbarMenu {
+  $$prop_def: ToolbarMenuProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarMenuItem.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarMenuItem {
-  $$prop_def: {};
+export interface ToolbarMenuItemProps {}
 
+export default class ToolbarMenuItem {
+  $$prop_def: ToolbarMenuItemProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarSearch.d.ts

@@ -1,38 +1,39 @@
 /// <reference types="svelte" />
 
+export interface ToolbarSearchProps {
+  /**
+   * Specify the value of the search input
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Set to `true` to expand the search bar
+   * @default false
+   */
+  expanded?: boolean;
+
+  /**
+   * Set to `true` to keep the search bar expanded
+   * @default false
+   */
+  persistent?: boolean;
+
+  /**
+   * Specify the tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class ToolbarSearch {
-  $$prop_def: {
-    /**
-     * Specify the value of the search input
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Set to `true` to expand the search bar
-     * @default false
-     */
-    expanded?: boolean;
-
-    /**
-     * Set to `true` to keep the search bar expanded
-     * @default false
-     */
-    persistent?: boolean;
-
-    /**
-     * Specify the tabindex
-     * @default "0"
-     */
-    tabindex?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: ToolbarSearchProps;
   $$slot_def: {};
 
   $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;