chore: lift components folder

src/ComboBox/ComboBox.svelte

@@ -0,0 +1,196 @@
+<script>
+  export let disabled = false;
+  export let helperText = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let invalid = false;
+  export let invalidText = "";
+  export let items = [];
+  export let itemToString = item => item.text || item.id;
+  export let light = false;
+  export let open = false;
+  export let placeholder = "";
+  export let selectedIndex = -1;
+  export let shouldFilterItem = () => true;
+  export let size = undefined;
+  export let titleText = "";
+  export let translateWithId = undefined;
+  export let value = "";
+  export let name = undefined;
+  export let ref = null;
+
+  import { afterUpdate } from "svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import {
+    ListBox,
+    ListBoxField,
+    ListBoxMenu,
+    ListBoxMenuIcon,
+    ListBoxMenuItem,
+    ListBoxSelection
+  } from "../ListBox";
+
+  let selectedId = undefined;
+  let inputValue = "";
+  let highlightedIndex = -1;
+
+  function change(direction) {
+    let index = highlightedIndex + direction;
+
+    if (index < 0) {
+      index = items.length - 1;
+    } else if (index >= items.length) {
+      index = 0;
+    }
+
+    highlightedIndex = index;
+  }
+
+  afterUpdate(() => {
+    if (open) {
+      ref.focus();
+      filteredItems = items.filter(item => shouldFilterItem(item, value));
+    } else {
+      highlightedIndex = -1;
+      inputValue = selectedItem ? selectedItem.text : "";
+    }
+  });
+
+  $: ariaLabel = $$props["aria-label"] || "Choose an item";
+  $: menuId = `menu-${id}`;
+  $: comboId = `combo-${id}`;
+  $: highlightedId = items[highlightedIndex]
+    ? items[highlightedIndex].id
+    : undefined;
+  $: filteredItems = items.filter(item => shouldFilterItem(item, value));
+  $: selectedItem = items[selectedIndex];
+  $: inputValue = selectedItem ? selectedItem.text : undefined;
+  $: value = inputValue;
+</script>
+
+<svelte:body
+  on:click={({ target }) => {
+    if (open && ref && !ref.contains(target)) {
+      open = false;
+    }
+  }} />
+
+<div class:bx--list-box__wrapper={true} {...$$restProps}>
+  {#if titleText}
+    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+      {titleText}
+    </label>
+  {/if}
+  {#if helperText}
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}>
+      {helperText}
+    </div>
+  {/if}
+  <ListBox
+    class="bx--combo-box"
+    id={comboId}
+    aria-label={ariaLabel}
+    {disabled}
+    {invalid}
+    {invalidText}
+    {open}
+    {light}
+    {size}>
+    <ListBoxField
+      role="button"
+      aria-expanded={open}
+      on:click={() => {
+        open = true;
+      }}
+      {id}
+      {name}
+      {disabled}
+      {translateWithId}>
+      <input
+        bind:this={ref}
+        tabindex="0"
+        autocomplete="off"
+        aria-autocomplete="list"
+        aria-expanded={open}
+        aria-activedescendant={highlightedId}
+        aria-labelledby={comboId}
+        aria-disabled={disabled}
+        aria-controls={open ? menuId : undefined}
+        aria-owns={open ? menuId : undefined}
+        class:bx--text-input={true}
+        class:bx--text-input--empty={inputValue === ''}
+        on:input={({ target }) => {
+          inputValue = target.value;
+        }}
+        on:keydown
+        on:keydown|stopPropagation={({ key }) => {
+          if (key === 'Enter') {
+            open = !open;
+            if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
+              selectedIndex = highlightedIndex;
+              open = false;
+            }
+          } else if (key === 'Tab') {
+            open = false;
+          } else if (key === 'ArrowDown') {
+            change(1);
+          } else if (key === 'ArrowUp') {
+            change(-1);
+          }
+        }}
+        on:focus
+        on:blur
+        on:blur={({ relatedTarget }) => {
+          if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
+            ref.focus();
+          }
+        }}
+        {disabled}
+        {placeholder}
+        {id}
+        value={inputValue} />
+      {#if invalid}
+        <WarningFilled16 class="bx--list-box__invalid-icon" />
+      {/if}
+      {#if inputValue}
+        <ListBoxSelection
+          on:clear={() => {
+            selectedIndex = -1;
+            open = false;
+          }}
+          {translateWithId}
+          {disabled}
+          {open} />
+      {/if}
+      <ListBoxMenuIcon
+        on:click={() => {
+          open = !open;
+        }}
+        {translateWithId}
+        {open} />
+    </ListBoxField>
+    {#if open}
+      <ListBoxMenu aria-label={ariaLabel} {id}>
+        {#each filteredItems as item, i (item.id || i)}
+          <ListBoxMenuItem
+            id={item.id}
+            active={selectedIndex === i || selectedId === item.id}
+            highlighted={highlightedIndex === i || selectedIndex === i}
+            on:click={() => {
+              selectedId = item.id;
+              selectedIndex = items
+                .map(({ id }) => id)
+                .indexOf(filteredItems[i].id);
+              open = false;
+            }}
+            on:mouseenter={() => {
+              highlightedIndex = i;
+            }}>
+            {itemToString(item)}
+          </ListBoxMenuItem>
+        {/each}
+      </ListBoxMenu>
+    {/if}
+  </ListBox>
+</div>