feat(search)!: integrate Search with v11 (#1970)

COMPONENT_INDEX.md

@@ -3140,7 +3140,6 @@ None.
 | value                | No       | <code>let</code> | Yes      | <code>any</code>                                          | <code>""</code>                                  | Specify the value of the search input                           |
 | size                 | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg"</code>                 | <code>"md"</code>                                | Specify the size of the search input                            |
 | searchClass          | No       | <code>let</code> | No       | <code>string</code>                                       | <code>""</code>                                  | Specify the class name passed to the outer div element          |
-| skeleton             | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>                               | Set to `true` to display the skeleton state                     |
 | light                | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>                               | Set to `true` to enable the light variant                       |
 | disabled             | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>                               | Set to `true` to disable the search input                       |
 | expandable           | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>                               | Set to `true` to enable the expandable variant                  |
@@ -3164,10 +3163,6 @@ None.
 | :--------- | :--------- | :---------------- |
 | expand     | dispatched | <code>null</code> |
 | collapse   | dispatched | <code>null</code> |
-| click      | forwarded  | --                |
-| mouseover  | forwarded  | --                |
-| mouseenter | forwarded  | --                |
-| mouseleave | forwarded  | --                |
 | change     | forwarded  | --                |
 | input      | forwarded  | --                |
 | focus      | forwarded  | --                |
@@ -3175,6 +3170,7 @@ None.
 | keydown    | forwarded  | --                |
 | keyup      | forwarded  | --                |
 | paste      | forwarded  | --                |
+| click      | forwarded  | --                |
 | clear      | dispatched | <code>null</code> |
 
 ## `SearchSkeleton`
@@ -3191,12 +3187,7 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
+None.
 
 ## `Section`
 

docs/src/COMPONENT_API.json

@@ -9966,18 +9966,6 @@
           "constant": false,
           "reactive": false
         },
-        {
-          "name": "skeleton",
-          "kind": "let",
-          "description": "Set to `true` to display the skeleton state",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "light",
           "kind": "let",
@@ -10134,22 +10122,6 @@
       "events": [
         { "type": "dispatched", "name": "expand", "detail": "null" },
         { "type": "dispatched", "name": "collapse", "detail": "null" },
-        { "type": "forwarded", "name": "click", "element": "SearchSkeleton" },
-        {
-          "type": "forwarded",
-          "name": "mouseover",
-          "element": "SearchSkeleton"
-        },
-        {
-          "type": "forwarded",
-          "name": "mouseenter",
-          "element": "SearchSkeleton"
-        },
-        {
-          "type": "forwarded",
-          "name": "mouseleave",
-          "element": "SearchSkeleton"
-        },
         { "type": "forwarded", "name": "change", "element": "input" },
         { "type": "forwarded", "name": "input", "element": "input" },
         { "type": "forwarded", "name": "focus", "element": "input" },
@@ -10157,6 +10129,7 @@
         { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "keyup", "element": "input" },
         { "type": "forwarded", "name": "paste", "element": "input" },
+        { "type": "forwarded", "name": "click", "element": "button" },
         { "type": "dispatched", "name": "clear", "detail": "null" }
       ],
       "typedefs": [],
@@ -10181,14 +10154,8 @@
       ],
       "moduleExports": [],
       "slots": [],
-      "events": [
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" }
-      ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "events": [],
+      "typedefs": []
     },
     {
       "moduleName": "Section",

src/Search/Search.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /**
    * @event {null} expand
    * @event {null} collapse
@@ -20,9 +22,6 @@
   /** Specify the class name passed to the outer div element */
   export let searchClass = "";
 
-  /** Set to `true` to display the skeleton state  */
-  export let skeleton = false;
-
   /** Set to `true` to enable the light variant */
   export let light = false;
 
@@ -69,104 +68,88 @@
   import { createEventDispatcher } from "svelte";
   import Close from "../icons/Close.svelte";
   import IconSearch from "../icons/IconSearch.svelte";
-  import SearchSkeleton from "./SearchSkeleton.svelte";
 
+  /** @type {import("svelte").EventDispatcher<{ clear: null; expand: null; collapse: null; }>} */
   const dispatch = createEventDispatcher();
 
-  let searchRef = null;
-
+  $: expandSearch = expandable
+    ? () => {
+        expanded = true;
+      }
+    : undefined;
   $: if (expanded && ref) ref.focus();
   $: dispatch(expanded ? "expand" : "collapse");
 </script>
 
-{#if skeleton}
-  <SearchSkeleton
-    size="{size}"
-    {...$$restProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-  />
-{:else}
-  <div
-    role="search"
-    aria-labelledby="{id}-search"
-    class:bx--search="{true}"
-    class:bx--search--light="{light}"
-    class:bx--search--disabled="{disabled}"
-    class:bx--search--sm="{size === 'sm'}"
-    class:bx--search--md="{size === 'md'}"
-    class:bx--search--lg="{size === 'lg'}"
-    class:bx--search--expandable="{expandable}"
-    class:bx--search--expanded="{expanded}"
-    class="{searchClass}"
-  >
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      bind:this="{searchRef}"
-      class:bx--search-magnifier="{true}"
-      on:click="{() => {
-        if (expandable) expanded = true;
-      }}"
-    >
-      <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
-    </div>
-    <label id="{id}-search" for="{id}" class:bx--label="{true}">
-      <slot name="labelText">
-        {labelText}
-      </slot>
-    </label>
-    <!-- svelte-ignore a11y-autofocus -->
-    <input
-      bind:this="{ref}"
-      bind:value
-      type="text"
-      role="searchbox"
-      class:bx--search-input="{true}"
-      autofocus="{autofocus === true ? true : undefined}"
-      autocomplete="{autocomplete}"
-      disabled="{disabled}"
-      id="{id}"
-      placeholder="{placeholder}"
-      {...$$restProps}
-      on:change
-      on:input
-      on:focus
-      on:focus="{() => {
-        if (expandable) expanded = true;
-      }}"
-      on:blur
-      on:blur="{() => {
-        if (expanded && value.trim().length === 0) {
-          expanded = false;
-        }
-      }}"
-      on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'Escape') {
-          value = '';
-          dispatch('clear');
-        }
-      }}"
-      on:keyup
-      on:paste
-    />
-    <button
-      type="button"
-      aria-label="{closeButtonLabelText}"
-      disabled="{disabled}"
-      class:bx--search-close="{true}"
-      class:bx--search-close--hidden="{value === ''}"
-      on:click
-      on:click="{() => {
-        value = '';
-        ref.focus();
-        dispatch('clear');
-      }}"
-    >
-      <Close />
-    </button>
+<div
+  role="search"
+  aria-labelledby="{id}-search"
+  class:bx--search="{true}"
+  class:bx--search--light="{light}"
+  class:bx--search--disabled="{disabled}"
+  class:bx--search--sm="{size === 'sm'}"
+  class:bx--search--md="{size === 'md'}"
+  class:bx--search--lg="{size === 'lg'}"
+  class:bx--search--expandable="{expandable}"
+  class:bx--search--expanded="{expanded}"
+  class="{searchClass}"
+>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class:bx--search-magnifier="{true}" on:click="{expandSearch}">
+    <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
   </div>
-{/if}
+  <label id="{id}-search" for="{id}" class:bx--label="{true}">
+    <slot name="labelText">
+      {labelText}
+    </slot>
+  </label>
+  <!-- svelte-ignore a11y-autofocus -->
+  <input
+    bind:this="{ref}"
+    bind:value="{value}"
+    type="text"
+    role="searchbox"
+    class:bx--search-input="{true}"
+    autofocus="{autofocus === true ? true : undefined}"
+    autocomplete="{autocomplete}"
+    disabled="{disabled}"
+    id="{id}"
+    placeholder="{placeholder}"
+    {...$$restProps}
+    on:change
+    on:input
+    on:focus
+    on:focus="{expandSearch}"
+    on:blur
+    on:blur="{() => {
+      if (expanded && value.trim().length === 0) {
+        expanded = false;
+      }
+    }}"
+    on:keydown
+    on:keydown="{({ key }) => {
+      if (key === 'Escape') {
+        value = '';
+        dispatch('clear');
+      }
+    }}"
+    on:keyup
+    on:paste
+  />
+  <button
+    type="button"
+    aria-label="{closeButtonLabelText}"
+    disabled="{disabled}"
+    class:bx--search-close="{true}"
+    class:bx--search-close--hidden="{value === ''}"
+    on:click
+    on:click="{() => {
+      value = '';
+      ref.focus();
+      dispatch('clear');
+    }}"
+  >
+    <Close />
+  </button>
+</div>

src/Search/SearchSkeleton.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /**
    * Specify the size of the search input
    * @type {"sm" | "md" | "lg"}
@@ -6,18 +8,11 @@
   export let size = "md";
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class:bx--skeleton="{true}"
   class:bx--search--sm="{size === 'sm'}"
   class:bx--search--md="{size === 'md'}"
   class:bx--search--lg="{size === 'lg'}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
 >
   <span class:bx--label="{true}"></span>
   <div class:bx--search-input="{true}"></div>

tests/Search.test.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-  import { Search } from "../types";
+  import { Search, SearchSkeleton } from "../types";
 </script>
 
-<Search on:paste />
+<Search
+  spellcheck="false"
+  expandable
+  disabled
+  light
+  size="sm"
+  placeholder="Search catalog..."
+  value="Cloud functions"
+  on:input
+  on:paste
+  on:clear
+  on:expand
+  on:collapse
+/>
 
-<Search placeholder="Search catalog..." value="Cloud functions" />
-
-<Search light name="search" />
-
-<Search size="lg" />
-
-<Search size="sm" />
-
-<Search disabled />
-
-<Search skeleton />
-
-<Search size="lg" skeleton />
-
-<Search size="sm" skeleton />
+<SearchSkeleton size="lg" />

types/Search/Search.svelte.d.ts

@@ -22,12 +22,6 @@ export interface SearchProps extends RestProps {
    */
   searchClass?: string;
 
-  /**
-   * Set to `true` to display the skeleton state
-   * @default false
-   */
-  skeleton?: boolean;
-
   /**
    * Set to `true` to enable the light variant
    * @default false
@@ -109,10 +103,6 @@ export default class Search extends SvelteComponentTyped<
   {
     expand: CustomEvent<null>;
     collapse: CustomEvent<null>;
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
     change: WindowEventMap["change"];
     input: WindowEventMap["input"];
     focus: WindowEventMap["focus"];
@@ -120,6 +110,7 @@ export default class Search extends SvelteComponentTyped<
     keydown: WindowEventMap["keydown"];
     keyup: WindowEventMap["keyup"];
     paste: DocumentAndElementEventHandlersEventMap["paste"];
+    click: WindowEventMap["click"];
     clear: CustomEvent<null>;
   },
   { labelText: {} }

types/Search/SearchSkeleton.svelte.d.ts

@@ -1,25 +1,15 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["div"];
-
-export interface SearchSkeletonProps extends RestProps {
+export interface SearchSkeletonProps {
   /**
    * Specify the size of the search input
    * @default "md"
    */
   size?: "sm" | "md" | "lg";
-
-  [key: `data-${string}`]: any;
 }
 
 export default class SearchSkeleton extends SvelteComponentTyped<
   SearchSkeletonProps,
-  {
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
-  },
+  Record<string, any>,
   {}
 > {}