refactor: update/fix JSDoc props

src/DataTable/DataTable.svelte

@@ -1,95 +1,87 @@
 <script>
+  /**
+   * @typedef {{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }} Header
+   * @typedef {Header[]} Headers
+   * @slot {{ row: Object; }} expanded-row
+   * @slot {{ header: Header}} cell-header
+   * @slot {{ row: Object; cell: Object; }} cell
+   * @event {{ header?: Header; row?: Object; cell?: Object; }} click
+   * @event {{ expanded: boolean; }} click:header--expand
+   * @event {{ header: Header; sortDirection: "ascending" | "descending" | "none" }} click:header
+   * @event {Object} click:row
+   * @event {Object} mouseenter:row
+   * @event {Object} mouseleave:row
+   * @event {{ expanded: boolean; row: Object; }} click:row--expand
+   * @event {Object} click:cell
+   */
+
   /**
    * Specify the data table headers
-   * @type {{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]} [headers=[]]
+   * @type {Headers}
    */
   export let headers = [];
 
   /**
    * Specify the rows the data table should render
    * keys defined in `headers` are used for the row ids
-   * @type {Object[]} [rows=[]]
+   * @type {Object[]}
    */
   export let rows = [];
 
   /**
    * Set the size of the data table
-   * @type {"compact" | "short" | "tall"} [size]
+   * @type {"compact" | "short" | "tall"}
    */
   export let size = undefined;
 
-  /**
-   * Specify the title of the data table
-   * @type {string} [title=""]
-   */
+  /** Specify the title of the data table */
   export let title = "";
 
-  /**
-   * Specify the description of the data table
-   * @type {string} [description=""]
-   */
+  /** Specify the description of the data table */
   export let description = "";
 
-  /**
-   * Set to `true` to use zebra styles
-   * @type {boolean} [zebra=false]
-   */
+  /** Set to `true` to use zebra styles */
   export let zebra = false;
 
-  /**
-   * Set to `true` for the sortable variant
-   * @type {boolean} [sortable=false]
-   */
+  /** Set to `true` for the sortable variant */
   export let sortable = false;
 
   /**
    * Set to `true` for the expandable variant
    * Automatically set to `true` if `batchExpansion` is `true`
-   * @type {boolean} [expandable=false]
    */
   export let expandable = false;
 
   /**
    * Set to `true` to enable batch expansion
-   * @type {boolean} [batchExpansion=false]
    */
   export let batchExpansion = false;
 
   /**
    * Specify the row ids to be expanded
-   * @type {string[]} [expandedRowIds=[]]
+   * @type {string[]}
    */
   export let expandedRowIds = [];
 
-  /**
-   * Set to `true` for the radio selection variant
-   * @type {boolean} [radio=false]
-   */
+  /** Set to `true` for the radio selection variant */
   export let radio = false;
 
   /**
    * Set to `true` for the selectable variant
    * Automatically set to `true` if `radio` or `batchSelection` are `true`
-   * @type {boolean} [selectable=false]
    */
   export let selectable = false;
 
-  /**
-   * Set to `true` to enable batch selection
-   * @type {boolean} [batchSelection=false]
-   */
+  /** Set to `true` to enable batch selection */
   export let batchSelection = false;
 
   /**
    * Specify the row ids to be selected
-   * @type {string[]} [selectedRowIds=[]]
+   * @type {string[]}
    */
   export let selectedRowIds = [];
 
-  /**
-   * Set to `true` to enable a sticky header
-   * @type {boolean} [stickyHeader=false]
-   */
+  /** Set to `true` to enable a sticky header */
   export let stickyHeader = false;
 
   import { createEventDispatcher, setContext } from "svelte";

src/DataTable/Table.svelte

@@ -1,38 +1,23 @@
 <script>
   /**
    * Set the size of the table
-   * @type {"compact" | "short" | "tall"} [size]
+   * @type {"compact" | "short" | "tall"}
    */
   export let size = undefined;
 
-  /**
-   * Set to `true` to use zebra styles
-   * @type {boolean} [zebra=false]
-   */
+  /** Set to `true` to use zebra styles */
   export let zebra = false;
 
-  /**
-   * Set to `true` to use static width
-   * @type {boolean} [useStaticWidth=false]
-   */
+  /** Set to `true` to use static width */
   export let useStaticWidth = false;
 
-  /**
-   * Set to `true` for the bordered variant
-   * @type {boolean} [shouldShowBorder=false]
-   */
+  /**  Set to `true` for the bordered variant */
   export let shouldShowBorder = false;
 
-  /**
-   * Set to `true` for the sortable variant
-   * @type {boolean} [sortable=false]
-   */
+  /** Set to `true` for the sortable variant */
   export let sortable = false;
 
-  /**
-   * Set to `true` to enable a sticky header
-   * @type {boolean} [stickyHeader=false]
-   */
+  /** Set to `true` to enable a sticky header */
   export let stickyHeader = false;
 </script>
 

src/DataTable/TableContainer.svelte

@@ -1,20 +1,11 @@
 <script>
-  /**
-   * Specify the title of the data table
-   * @type {string} [title=""]
-   */
+  /** Specify the title of the data table */
   export let title = "";
 
-  /**
-   * Specify the description of the data table
-   * @type {string} [description=""]
-   */
+  /** Specify the description of the data table */
   export let description = "";
 
-  /**
-   * Set to `true` to enable a sticky header
-   * @type {boolean} [stickyHeader=false]
-   */
+  /** Set to `true` to enable a sticky header */
   export let stickyHeader = false;
 </script>
 

src/DataTable/TableHeader.svelte

@@ -1,19 +1,16 @@
 <script>
-  /**
-   * Specify the `scope` attribute
-   * @type {string} [scope="col"]
-   */
+  /** Specify the `scope` attribute */
   export let scope = "col";
 
   /**
    * Override the default id translations
-   * @type {() => string} [translateWithId = () => ""]
+   * @type {() => string}
    */
   export let translateWithId = () => "";
 
   /**
    * Set an id for the top-level element
-   * @type {string} [id]
+   * @type {string}
    */
   export let id = "ccs-" + Math.random().toString(36);
 

src/DataTable/Toolbar.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the toolbar size
-   * @type {"sm" | "default"} [size="default"]
+   * @type {"sm" | "default"}
    */
   export let size = "default";
 

src/DataTable/ToolbarBatchActions.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Override the total items selected text
-   * @type {(totalSelected: number) => string} [formatTotalSelected = (totalSelected: number) => string]
+   * @type {(totalSelected: number) => string}
    */
   export let formatTotalSelected = (totalSelected) =>
     `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;

src/DataTable/ToolbarSearch.svelte

@@ -1,31 +1,19 @@
 <script>
-  /**
-   * Specify the value of the search input
-   * @type {string} [value=""]
-   */
+  /** Specify the value of the search input */
   export let value = "";
 
-  /**
-   * Set to `true` to expand the search bar
-   * @type {boolean} [expanded=false]
-   */
+  /** Set to `true` to expand the search bar */
   export let expanded = false;
 
-  /**
-   * Set to `true` to keep the search bar expanded
-   * @type {boolean} [persistent=false]
-   */
+  /** Set to `true` to keep the search bar expanded */
   export let persistent = false;
 
-  /**
-   * Specify the tabindex
-   * @type {string} [tabindex="0"]
-   */
+  /** Specify the tabindex */
   export let tabindex = "0";
 
   /**
    * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
+   * @type {null | HTMLInputElement}
    */
   export let ref = null;