feat: forward restProps to input element

docs/src/COMPONENT_API.json

@@ -1397,7 +1397,7 @@
           "ts": "interface ComboBoxItem { id: string; text: string; }"
         }
       ],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "ComposedModal",
@@ -2249,7 +2249,7 @@
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "DatePickerSkeleton",
@@ -5430,7 +5430,7 @@
           "ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; }"
         }
       ],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "NotificationActionButton",
@@ -5841,7 +5841,7 @@
           "ts": "type NumberInputTranslationId = \"increment\" | \"decrement\""
         }
       ],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "NumberInputSkeleton",
@@ -9797,7 +9797,7 @@
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "TimePickerSelect",

docs/src/pages/components/MultiSelect.svx

@@ -24,6 +24,16 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
     sortItem="{() => {}}"
   />
 
+### Filterable
+
+`$$restProps` are spread to the underlying input element.
+
+<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
 ### Initial selected items
 
 To select (or bind) items, pass an array of item ids to `selectedIds`.
@@ -93,13 +103,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Filterable
 
-<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."
-    items="{[{id: "0", text: "Slack"},
-    {id: "1", text: "Email"},
-    {id: "2", text: "Fax"}]}"
-  />
 
 ### Invalid state
 

src/ComboBox/ComboBox.svelte

@@ -160,7 +160,7 @@
     }
   }}" />
 
-<div class:bx--list-box__wrapper="{true}" {...$$restProps}>
+<div class:bx--list-box__wrapper="{true}">
   {#if titleText}
     <label
       for="{id}"
@@ -209,6 +209,11 @@
         aria-disabled="{disabled}"
         aria-controls="{open ? menuId : undefined}"
         aria-owns="{open ? menuId : undefined}"
+        disabled="{disabled}"
+        placeholder="{placeholder}"
+        id="{id}"
+        value="{inputValue}"
+        {...$$restProps}
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--empty="{inputValue === ''}"
@@ -246,10 +251,6 @@
             ref.focus();
           }
         }}"
-        disabled="{disabled}"
-        placeholder="{placeholder}"
-        id="{id}"
-        value="{inputValue}"
       />
       {#if invalid}
         <WarningFilled16 class="bx--list-box__invalid-icon" />

src/DatePicker/DatePickerInput.svelte

@@ -77,7 +77,6 @@
 <div
   class:bx--date-picker-container="{true}"
   class:bx--date-picker--nolabel="{!labelText}"
-  {...$$restProps}
 >
   {#if labelText}
     <label
@@ -97,13 +96,14 @@
     <input
       bind:this="{ref}"
       data-invalid="{invalid || undefined}"
-      value="{!$range ? $inputValue : undefined}"
       id="{id}"
       name="{name}"
       placeholder="{placeholder}"
       type="{type}"
       pattern="{pattern}"
       disabled="{disabled}"
+      {...$$restProps}
+      value="{!$range ? $inputValue : undefined}"
       class:bx--date-picker__input="{true}"
       class:bx--date-picker__input--invalid="{invalid}"
       class="{size && `bx--date-picker__input--${size}`}"

src/MultiSelect/MultiSelect.svelte

@@ -237,7 +237,6 @@
   class:bx--multi-select__wrapper--inline="{inline}"
   class:bx--list-box__wrapper--inline="{inline}"
   class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
-  {...$$restProps}
 >
   {#if titleText}
     <label
@@ -348,6 +347,7 @@
       {#if filterable}
         <input
           bind:this="{inputRef}"
+          {...$$restProps}
           role="combobox"
           tabindex="0"
           autocomplete="off"

src/NumberInput/NumberInput.svelte

@@ -144,7 +144,6 @@
 
 <div
   class:bx--form-item="{true}"
-  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
@@ -195,10 +194,6 @@
           type="number"
           pattern="[0-9]*"
           aria-label="{label ? undefined : ariaLabel}"
-          on:input
-          on:input="{({ target }) => {
-            inputValue = target.value;
-          }}"
           disabled="{disabled}"
           id="{id}"
           name="{name}"
@@ -207,6 +202,11 @@
           step="{step}"
           value="{value}"
           readonly="{readonly}"
+          {...$$restProps}
+          on:input
+          on:input="{({ target }) => {
+            inputValue = target.value;
+          }}"
         />
         <button
           type="button"
@@ -247,10 +247,6 @@
           data-invalid="{invalid || undefined}"
           aria-invalid="{invalid || undefined}"
           aria-label="{label ? undefined : ariaLabel}"
-          on:input
-          on:input="{({ target }) => {
-            inputValue = target.value;
-          }}"
           disabled="{disabled}"
           id="{id}"
           max="{max}"
@@ -258,6 +254,11 @@
           step="{step}"
           value="{value}"
           readonly="{readonly}"
+          {...$$restProps}
+          on:input
+          on:input="{({ target }) => {
+            inputValue = target.value;
+          }}"
         />
         {#if invalid}
           <WarningFilled16 class="bx--number__invalid" />

src/Search/Search.svelte

@@ -98,7 +98,6 @@
     class:bx--search--sm="{size === 'sm' || small}"
     class:bx--search--lg="{size === 'lg'}"
     class:bx--search--xl="{size === 'xl'}"
-    {...$$restProps}
   >
     <Search16 class="bx--search-magnifier" />
     <label id="{id}-search" for="{id}" class:bx--label="{true}"
@@ -116,7 +115,7 @@
       placeholder="{placeholder}"
       type="{type}"
       value="{value}"
-      aria-hidden="{$$props['aria-hidden']}"
+      {...$$restProps}
       on:change
       on:input
       on:input="{({ target }) => {

src/TimePicker/TimePicker.svelte

@@ -59,7 +59,6 @@
 
 <div
   class:bx--form-item="{true}"
-  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
@@ -94,6 +93,7 @@
         type="{type}"
         value="{value}"
         disabled="{disabled}"
+        {...$$restProps}
         class:bx--time-picker__input-field="{true}"
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"

tests/TimePicker.test.svelte

@@ -2,7 +2,7 @@
   import { TimePicker, TimePickerSelect, SelectItem } from "../types";
 </script>
 
-<TimePicker labelText="Cron job" placeholder="hh:mm">
+<TimePicker spellcheck="false" labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="PM">
     <SelectItem value="am" text="AM" />
     <SelectItem value="pm" text="PM" />

types/ComboBox/ComboBox.d.ts

@@ -7,7 +7,7 @@ export interface ComboBoxItem {
 }
 
 export interface ComboBoxProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the combobox items
    * @default []

types/DatePicker/DatePickerInput.d.ts

@@ -2,7 +2,7 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface DatePickerInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the size of the input
    */

types/MultiSelect/MultiSelect.d.ts

@@ -11,7 +11,7 @@ export interface MultiSelectItem {
 }
 
 export interface MultiSelectProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the multiselect items
    * @default []

types/NumberInput/NumberInput.d.ts

@@ -4,7 +4,7 @@ import { SvelteComponentTyped } from "svelte";
 export type NumberInputTranslationId = "increment" | "decrement";
 
 export interface NumberInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the size of the input
    */

types/TimePicker/TimePicker.d.ts

@@ -2,7 +2,7 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface TimePickerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Specify the size of the input
    */