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

src/Pagination/Pagination.svelte

@@ -85,17 +85,7 @@
     }
   });
 
-  $: {
-    if (typeof page !== "number") {
-      page = Number(page);
-    }
-
-    if (typeof pageSize !== "number") {
-      pageSize = Number(pageSize);
-    }
-
-    dispatch("update", { pageSize, page });
-  }
+  $: 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 }) => {
-              selectedValue.set(target.value);
-            }}"
+            on:change="{handleChange}"
             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 }) => {
-            selectedValue.set(target.value);
-          }}"
+          on:change="{handleChange}"
           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 */