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 |
+None.
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
 
 ## `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": [
+      "events": [],
-        { "type": "forwarded", "name": "click", "element": "div" },
+      "typedefs": []
-        { "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" }
     },
     {
       "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,26 +68,19 @@
   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"
@@ -104,13 +96,7 @@
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
+  <div class:bx--search-magnifier="{true}" on:click="{expandSearch}">
-      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}">
@@ -121,7 +107,7 @@
   <!-- svelte-ignore a11y-autofocus -->
   <input
     bind:this="{ref}"
-      bind:value
+    bind:value="{value}"
     type="text"
     role="searchbox"
     class:bx--search-input="{true}"
@@ -134,9 +120,7 @@
     on:change
     on:input
     on:focus
-      on:focus="{() => {
+    on:focus="{expandSearch}"
-        if (expandable) expanded = true;
-      }}"
     on:blur
     on:blur="{() => {
       if (expanded && value.trim().length === 0) {
@@ -169,4 +153,3 @@
     <Close />
   </button>
 </div>
-{/if}

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" />
+<SearchSkeleton size="lg" />
-
-<Search light name="search" />
-
-<Search size="lg" />
-
-<Search size="sm" />
-
-<Search disabled />
-
-<Search skeleton />
-
-<Search size="lg" skeleton />
-
-<Search size="sm" skeleton />

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 {
-
-export interface SearchSkeletonProps extends RestProps {
   /**
    * Specify the size of the search input
    * @default "md"
    */
   size?: "sm" | "md" | "lg";
-
-  [key: `data-${string}`]: any;
 }
 
 export default class SearchSkeleton extends SvelteComponentTyped<
   SearchSkeletonProps,
-  {
+  Record<string, any>,
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
-  },
   {}
 > {}