feat(search): support expandable variant

COMPONENT_INDEX.md

@@ -3011,12 +3011,14 @@ None.
 | :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
 | ref                  | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element            |
 | value                | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>                                  | Specify the value of the search input                   |
+| expanded             | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true to expand the search input                 |
 | small                | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | --                                                      |
 | size                 | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code>                                | Specify the size of the search input                    |
 | searchClass          | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the class name passed to the outer div element  |
 | skeleton             | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state             |
 | light                | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant               |
 | disabled             | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the search input               |
+| expandable           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the expandable variant          |
 | type                 | <code>let</code> | No       | <code>string</code>                       | <code>"text"</code>                              | Specify the `type` attribute of the search input        |
 | placeholder          | <code>let</code> | No       | <code>string</code>                       | <code>"Search..."</code>                         | Specify the `placeholder` attribute of the search input |
 | autocomplete         | <code>let</code> | No       | <code>"on" &#124; "off"</code>            | <code>"off"</code>                               | Specify the `autocomplete` attribute                    |
@@ -3031,18 +3033,20 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
+| Event name | Type       | Detail           |
-| :--------- | :--------- | :----- |
+| :--------- | :--------- | :--------------- |
-| click      | forwarded  | --     |
+| expand     | dispatched | <code>any</code> |
-| mouseover  | forwarded  | --     |
+| collapse   | dispatched | <code>any</code> |
-| mouseenter | forwarded  | --     |
+| click      | forwarded  | --               |
-| mouseleave | forwarded  | --     |
+| mouseover  | forwarded  | --               |
-| change     | forwarded  | --     |
+| mouseenter | forwarded  | --               |
-| input      | forwarded  | --     |
+| mouseleave | forwarded  | --               |
-| focus      | forwarded  | --     |
+| change     | forwarded  | --               |
-| blur       | forwarded  | --     |
+| input      | forwarded  | --               |
-| keydown    | forwarded  | --     |
+| focus      | forwarded  | --               |
-| clear      | dispatched | --     |
+| blur       | forwarded  | --               |
+| keydown    | forwarded  | --               |
+| clear      | dispatched | --               |
 
 ## `SearchSkeleton`
 

docs/src/COMPONENT_API.json

@@ -7801,6 +7801,26 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "expandable",
+          "kind": "let",
+          "description": "Set to `true` to enable the expandable variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "expanded",
+          "kind": "let",
+          "description": "Set to `true to expand the search input",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "value",
           "kind": "let",
@@ -7894,6 +7914,8 @@
       ],
       "slots": [],
       "events": [
+        { "type": "dispatched", "name": "expand", "detail": "any" },
+        { "type": "dispatched", "name": "collapse", "detail": "any" },
         { "type": "forwarded", "name": "click", "element": "SearchSkeleton" },
         {
           "type": "forwarded",

docs/src/pages/components/Search.svx

@@ -23,6 +23,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
 
 <Search value="Cloud functions" on:clear={() => console.log('clear')}/>
 
+### Expandable variant
+
+<Search expandable on:expand on:collapse />
+
 ### Light variant
 
 <Search light />
@@ -35,7 +39,7 @@ The "clear" event is dispatched when clicking the "X" button in the search input
 
 <Search size="sm" />
 
-### Disabled
+### Disabled state
 
 <Search disabled />
 

src/Search/Search.svelte

@@ -1,8 +1,12 @@
 <script>
+  /**
+   * @event {any} expand
+   * @event {any} collapse
+   */
+
   /**
    * @deprecated this prop will be removed in the next major release
    * Use size="sm" instead
-   * @type {boolean} [small=false]
    */
   export let small = false;
 
@@ -15,40 +19,28 @@
   /** Specify the class name passed to the outer div element */
   export let searchClass = "";
 
-  /**
+  /** Set to `true` to display the skeleton state  */
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` to disable the search input */
-   * Set to `true` to disable the search input
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to enable the expandable variant */
-   * Specify the value of the search input
+  export let expandable = false;
-   * @type {string} [value=""]
+
-   */
+  /** Set to `true to expand the search input */
+  export let expanded = false;
+
+  /** Specify the value of the search input */
   export let value = "";
 
-  /**
+  /** Specify the `type` attribute of the search input */
-   * Specify the `type` attribute of the search input
-   * @type {string} [type="text"]
-   */
   export let type = "text";
 
-  /**
+  /** Specify the `placeholder` attribute of the search input */
-   * Specify the `placeholder` attribute of the search input
-   * @type {string} [placeholder="Search..."]
-   */
   export let placeholder = "Search...";
 
   /**
@@ -79,6 +71,11 @@
   import SearchSkeleton from "./SearchSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
+
+  let searchRef = null;
+
+  $: if (expanded && ref) ref.focus();
+  $: dispatch(expanded ? "expand" : "collapse");
 </script>
 
 {#if skeleton}
@@ -101,9 +98,17 @@
     class:bx--search--sm="{size === 'sm' || small}"
     class:bx--search--lg="{size === 'lg'}"
     class:bx--search--xl="{size === 'xl'}"
+    class:bx--search--expandable="{expandable}"
+    class:bx--search--expanded="{expanded}"
     class="{searchClass}"
   >
-    <div class:bx--search-magnifier="{true}">
+    <div
+      bind:this="{searchRef}"
+      class:bx--search-magnifier="{true}"
+      on:click="{() => {
+        if (expandable) expanded = true;
+      }}"
+    >
       <Search16 class="bx--search-magnifier-icon" />
     </div>
     <label id="{id}-search" for="{id}" class:bx--label="{true}"
@@ -128,7 +133,15 @@
         value = target.value;
       }}"
       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') {

types/Search/Search.d.ts

@@ -37,6 +37,18 @@ export interface SearchProps {
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to enable the expandable variant
+   * @default false
+   */
+  expandable?: boolean;
+
+  /**
+   * Set to `true to expand the search input
+   * @default false
+   */
+  expanded?: boolean;
+
   /**
    * Specify the value of the search input
    * @default ""
@@ -95,6 +107,8 @@ export interface SearchProps {
 export default class Search extends SvelteComponentTyped<
   SearchProps,
   {
+    expand: CustomEvent<any>;
+    collapse: CustomEvent<any>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];