feat(select): support selected prop number type (#1355)

* feat(select): support number type

* Run "yarn build:docs"

* refactor(pagination): do not coerce `pageSize`, `page` to be numbers

* test(select): assert selected prop number type

COMPONENT_INDEX.md

@@ -3147,7 +3147,7 @@ None.
 | Prop name   | Required | Kind             | Reactive | Type                                       | Default value                                    | Description                                     |
 | :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
 | ref         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLSelectElement</code> | <code>null</code>                                | Obtain a reference to the select HTML element   |
-| selected    | No       | <code>let</code> | Yes      | <code>string</code>                        | <code>undefined</code>                           | Specify the selected item value                 |
+| selected    | No       | <code>let</code> | Yes      | <code>string &#124; number</code>          | <code>undefined</code>                           | Specify the selected item value                 |
 | size        | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>              | <code>undefined</code>                           | Set the size of the select input                |
 | inline      | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to use the inline variant         |
 | light       | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant       |
@@ -3185,8 +3185,8 @@ None.
 ### Props
 
 | Prop name | Required | Kind             | Reactive | Type                              | Default value      | Description                         |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------- |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- |
-| value     | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the option value            |
+| value     | No       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>    | Specify the option value            |
 | text      | No       | <code>let</code> | No       | <code>string</code>               | <code>""</code>    | Specify the option text             |
 | hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to hide the option    |
 | disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to disable the option |

docs/src/COMPONENT_API.json

@@ -10027,7 +10027,7 @@
           "name": "selected",
           "kind": "let",
           "description": "Specify the selected item value",
-          "type": "string",
+          "type": "string | number",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -10252,7 +10252,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the option value",
-          "type": "string",
+          "type": "string | number",
           "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,

src/Pagination/Pagination.svelte

@@ -85,17 +85,7 @@
     }
   });
 
-  $: {
+  $: dispatch("update", { pageSize, page });
-    if (typeof page !== "number") {
-      page = Number(page);
-    }
-
-    if (typeof pageSize !== "number") {
-      pageSize = Number(pageSize);
-    }
-
-    dispatch("update", { pageSize, page });
-  }
   $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
   $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
   $: backButtonDisabled = disabled || page === 1;

src/Select/Select.svelte

@@ -5,7 +5,7 @@
 
   /**
    * Specify the selected item value
-   * @type {string}
+   * @type {string | number}
    */
   export let selected = undefined;
 
@@ -73,6 +73,7 @@
   const selectedValue = writable(selected);
   const defaultSelectId = writable(null);
   const defaultValue = writable(null);
+  const itemTypesByValue = writable({});
 
   setContext("Select", {
     selectedValue,
@@ -89,9 +90,24 @@
           selectedValue.set(value);
         }
       }
+
+      itemTypesByValue.update((types) => ({
+        ...types,
+        [value]: typeof value,
+      }));
     },
   });
 
+  const handleChange = ({ target }) => {
+    let value = target.value;
+
+    if ($itemTypesByValue[value] === "number") {
+      value = Number(value);
+    }
+
+    selectedValue.set(value);
+  };
+
   afterUpdate(() => {
     selected = $selectedValue;
     dispatch("change", $selectedValue);
@@ -139,9 +155,7 @@
             class:bx--select-input="{true}"
             class:bx--select-input--sm="{size === 'sm'}"
             class:bx--select-input--xl="{size === 'xl'}"
-            on:change="{({ target }) => {
+            on:change="{handleChange}"
-              selectedValue.set(target.value);
-            }}"
             on:input
             on:focus
             on:blur
@@ -184,9 +198,7 @@
           class:bx--select-input="{true}"
           class:bx--select-input--sm="{size === 'sm'}"
           class:bx--select-input--xl="{size === 'xl'}"
-          on:change="{({ target }) => {
+          on:change="{handleChange}"
-            selectedValue.set(target.value);
-          }}"
           on:input
           on:focus
           on:blur

src/Select/SelectItem.svelte

@@ -1,5 +1,8 @@
 <script>
-  /** Specify the option value */
+  /**
+   * Specify the option value
+   * @type {string | number}
+   */
   export let value = "";
 
   /** Specify the option text */

tests/Select.test.svelte

@@ -14,8 +14,8 @@
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-<Select labelText="Carbon theme" selected="g10">
+<Select labelText="Carbon theme" selected="{0}">
-  <SelectItem value="0" text="Select a theme" disabled hidden />
+  <SelectItem value="{0}" text="Select a theme" disabled hidden />
   <SelectItemGroup label="Light theme">
     <SelectItem value="white" text="White" />
     <SelectItem value="g10" text="Gray 10" />

types/Select/Select.svelte.d.ts

@@ -7,7 +7,7 @@ export interface SelectProps
    * Specify the selected item value
    * @default undefined
    */
-  selected?: string;
+  selected?: string | number;
 
   /**
    * Set the size of the select input

types/Select/SelectItem.svelte.d.ts

@@ -6,7 +6,7 @@ export interface SelectItemProps {
    * Specify the option value
    * @default ""
    */
-  value?: string;
+  value?: string | number;
 
   /**
    * Specify the option text