refactor(ui-shell): use $$restProps, remove cx

src/components/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -1,48 +1,40 @@
 <script>
   export let searchIsActive = undefined;
 
-  import { createEventDispatcher } from 'svelte';
-  import { cx } from '../../../lib';
-  import Icon from '../../Icon/Icon.svelte';
-  import { closeIcon, searchIcon } from '../constants';
-  import searchStore from '../searchStore';
+  import { createEventDispatcher } from "svelte";
+  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Search20 from "carbon-icons-svelte/lib/Search20";
+  import { Icon } from "../../Icon";
+  import searchStore from "../searchStore";
 
-  let searchTabIndex = '0';
-  let closeTabIndex = '-1';
+  const dispatch = createEventDispatcher();
+
+  let searchTabIndex = "0";
+  let closeTabIndex = "-1";
   let elInput = undefined;
   let elTypeSearch = undefined;
   let isSearchFocus = false;
-  const dispatch = createEventDispatcher();
 
   function dispatchInputs(event) {
     const params = {
-      action: 'search',
+      action: "search",
       textInput: event.target.value
     };
-    dispatch('inputSearch', params);
-  }
-
-  function mouseUp({ target }) {
-    if (target && elTypeSearch) {
-      if (!elTypeSearch.contains(target)) {
-        searchIsActive = false;
-        isSearchFocus = false;
-      }
-    }
+    dispatch("inputSearch", params);
   }
 
   $: if (!searchIsActive) {
     if (elInput) {
-      elInput.value = '';
+      elInput.value = "";
     }
     searchStore.clear();
   }
   $: if (searchIsActive) {
-    searchTabIndex = '-1';
-    closeTabIndex = '0';
+    searchTabIndex = "-1";
+    closeTabIndex = "0";
   } else {
-    searchTabIndex = '0';
-    closeTabIndex = '-1';
+    searchTabIndex = "0";
+    closeTabIndex = "-1";
   }
   $: if (isSearchFocus) {
     elInput.focus();
@@ -63,19 +55,23 @@
     transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .search-wrapper-hidden {
     max-width: 3rem;
     background-color: #161616;
   }
+
   .search-focus {
     outline: 2px solid #fff;
     outline-offset: -2px;
   }
+
   .search-wrapper-2 {
     display: flex;
     flex-grow: 1;
     border-bottom: 1px solid #393939;
   }
+
   .btn-search {
     width: 3rem;
     height: 100%;
@@ -85,10 +81,12 @@
     transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .btn-search-disabled {
     border: none;
     pointer-events: none;
   }
+
   .input-search {
     font-size: 1rem;
     font-weight: 400;
@@ -104,10 +102,12 @@
     padding: 0;
     transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .input-hidden {
     opacity: 0;
     pointer-events: none;
   }
+
   .btn-clear {
     width: 3rem;
     height: 100%;
@@ -118,35 +118,33 @@
     transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .btn-clear:hover {
     background-color: #4c4c4c;
   }
+
   .btn-clear-hidden {
     opacity: 0;
     display: none;
   }
-  .search-list {
-    position: absolute;
-    z-index: 10000;
-    padding: 1rem 0;
-    left: 0;
-    right: 0;
-    top: 3rem;
-    background-color: #161616;
-    border: 1px solid #393939;
-    border-top: none;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
-  }
 </style>
 
-<svelte:window on:mouseup={mouseUp} />
+<svelte:window
+  on:mouseup={({ target }) => {
+    if (target && elTypeSearch) {
+      if (!elTypeSearch.contains(target)) {
+        searchIsActive = false;
+        isSearchFocus = false;
+      }
+    }
+  }} />
 
 <div
   bind:this={elTypeSearch}
+  role="search"
   class="search-wrapper"
   class:search-wrapper-hidden={!searchIsActive}
-  class:search-focus={isSearchFocus || searchIsActive}
-  role="search">
+  class:search-focus={isSearchFocus || searchIsActive}>
   <div
     id="right-panel-action-search"
     class="search-wrapper-2"
@@ -155,7 +153,7 @@
     <button
       tabindex={searchTabIndex}
       aria-label="Search"
-      class={cx('--header__action')}
+      class:bx--header__action={true}
       class:btn-search={true}
       class:btn-search-disabled={searchIsActive}
       on:click={() => {
@@ -169,7 +167,7 @@
           searchIsActive = !searchIsActive;
         }
       }}>
-      <Icon {...searchIcon} />
+      <Icon title="Search" tabindex="0" render={Search20} />
     </button>
     <input
       bind:this={elInput}
@@ -186,7 +184,7 @@
     <button
       id="right-panel-close-search"
       tabindex={closeTabIndex}
-      class={cx('--header__action')}
+      class:bx--header__action={true}
       class:btn-clear={true}
       class:btn-clear-hidden={!searchIsActive}
       type="button"
@@ -201,7 +199,7 @@
           searchIsActive = !searchIsActive;
         }
       }}>
-      <Icon {...closeIcon} />
+      <Icon title="Close" tabindex="0" render={Close20} />
     </button>
   </div>
 </div>