@stubber/form-fields 1.0.11 → 1.1.1

package/dist/fields/components/Select.svelte

@@ -1,29 +1,20 @@
 <script>
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { deepEqual } from "fast-equals";
-  import _ from "lodash-es";
-  import { onMount, onDestroy } from "svelte";
-  import { writable } from "svelte/store";
-  import * as utils from "../../utils/index.js";
+  import { onMount, tick } from "svelte";
 
   import { Label } from "@stubber/ui/label";
-  import { scale } from "svelte/transition";
+  import * as Command from "@stubber/ui/command";
+  import * as Popover from "@stubber/ui/popover";
+  import { Button } from "@stubber/ui/button";
+  import { isArray, isEqual } from "lodash-es";
 
   export let field;
 
-  const internal = writable();
-  const { clickOutside } = utils;
-
-  let is_focused = false;
-  let filter_text = "";
-  let input;
-
   $: state_key = $field.state?.state_key;
   $: label = $field.spec?.title;
   $: hide_label = $field.spec?.hide_label;
   $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
   $: validationMessage = $field.state?.validation?.message;
-  $: items = _.isArray($field.spec?.params?.options)
+  $: items = isArray($field.spec?.params?.options)
     ? $field.spec?.params?.options?.map((o, index) => {
         let { label, value } = o || {};
         let _value = value !== undefined ? value : label;
@@ -32,222 +23,87 @@
         return { _key, _label, _value };
       })
     : [];
-  $: filteritems = items.filter((i) => {
-    let _filter_text = filter_text?.toLowerCase();
-    if (!_filter_text) return true;
-    let _label = i?._label?.toLowerCase();
-    return _label?.includes(_filter_text);
-  });
 
   onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_item = items?.find((i) => deepEqual($field.data.base, i._value));
-    let initial_data = {
-      ...f?.data,
-      base: initial_item?._value ?? null,
-    };
-    if (!f?.spec?.without_value_details) initial_data.base_label = initial_item?._label;
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      focused_index: -1,
-      selected_item_key: initial_item?._key,
-    };
-    _.set(f, "data", initial_data);
-    _.set(f, "state.internal", initial_state_internal);
-    if (!deepEqual(f, $field)) $field = f;
-
-    syncStoreToStore(
-      field,
-      internal,
-      (a, b) => {
-        let _clone = _.cloneDeep(a.state?.internal) || {};
-
-        // get parts from data
-        let item = items.find((i) => i._value === a?.data?.base);
-        if (item) {
-          filter_text = item?._label;
-          _clone.selected_item_key = item?._key;
-
-          // set field_label if changed
-          if (!deepEqual(a?.data?.base_label, item?._label) && !a?.spec?.without_value_details) {
-            $field.data.base_label = item?._label;
-          }
-
-          // set field state if changed
-          if (!deepEqual(a?.state?.internal, _clone)) {
-            $field.state.internal = _clone;
-          }
-        }
-
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        let item = items.find((i) => i._key === b?.selected_item_key);
-        _.set(_clone, "data.base", item?._value);
-        if (!a?.spec?.without_value_details) _.set(_clone, "data.base_label", item?._label);
-        return _clone;
+    if ($field.data.base && !$field.spec?.without_value_details) {
+      // If the field has a base value, we need to find the corresponding label
+      const item = items.find((i) => isEqual(i._value, $field.data.base));
+      if (item) {
+        $field.data.base_label = item._label;
       }
-    );
-  });
-
-  let teleportedNode = null;
-  onDestroy(() => {
-    if (teleportedNode) {
-      teleportedNode.remove();
-      teleportedNode = null;
     }
   });
 
-  // used to show the dropdown panel in the body instead of inside the component
-  // fixes an issue where the dropdown panel would be cut off by the parent container
-  function teleport(node) {
-    // Get the original position and width
-    let rect = node.getBoundingClientRect();
-    let originalWidth = node.offsetWidth;
-    let originalHeight = node.offsetHeight;
+  function simpleSetSelected(item_key) {
+    const item = items.find((i) => i._key === item_key);
+    if (!item) return;
 
-    // Teleport to the body
-    let teleportContainer = document.body;
-    teleportContainer.appendChild(node);
-
-    teleportedNode = node;
-
-    // Apply the original width and position to the teleported element
-    node.style.width = originalWidth + "px";
-    node.style.height = originalHeight + "px";
-    node.style.position = "absolute";
-    node.style.top = rect.top + window.scrollY + "px";
-    node.style.left = rect.left + "px";
-
-    // set z-index to 1000
-    node.style.zIndex = 1000;
+    field.update((f) => {
+      f.data.base = item?._value;
+      if (!f.spec?.without_value_details) {
+        f.data.base_label = item?._label;
+      }
+      return f;
+    });
   }
 
-  function setSelected(item) {
-    filter_text = item._label;
-    let comparison = _.cloneDeep($internal);
-    comparison.focused_index = -1;
-    comparison.selected_item_key = item._key;
-
-    if (!deepEqual(comparison, $internal)) {
-      $internal = _.cloneDeep(comparison);
-    }
-
-    is_focused = false;
-    input.blur();
+  let open = false;
+
+  $: dropdownLabel = items.find((i) => isEqual(i._value, $field.data.base))?._label ?? "Select...";
+  // We want to refocus the trigger button when the user selects
+  // an item from the list so users can continue navigating the
+  // rest of the form with the keyboard.
+  function closeAndFocusTrigger(triggerId) {
+    open = false;
+    tick().then(() => {
+      document.getElementById(triggerId)?.focus();
+    });
   }
+
+  const collisionBoundary = document.querySelector("body");
 </script>
 
-{#if $internal}
-  <div
-    use:clickOutside={() => {
-      if (is_focused) {
-        is_focused = false;
-        filter_text = $field?.data?.base_label ?? "";
-      }
-    }}
-    class="relative flex flex-col w-full text-surface-900 my-2"
-  >
-    <Label for="input_{state_key}" class="block py-2{hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative flex rounded-md">
-      <input
-        on:keydown={(e) => {
-          switch (e.key) {
-            case "Enter":
-              if ($internal.focused_index >= 0 && $internal.focused_index < items.length) {
-                setSelected(filteritems[$internal.focused_index]);
-              }
-              e.preventDefault();
-              break;
-            case "ArrowDown":
-              $internal.focused_index = ($internal.focused_index + 1) % items.length;
-              e.preventDefault();
-              break;
-            case "ArrowUp":
-              $internal.focused_index = ($internal.focused_index - 1 + items.length) % items.length;
-              e.preventDefault();
-              break;
-          }
-        }}
-        on:focus={() => {
-          if (!is_focused) {
-            is_focused = true;
-            filter_text = "";
-          }
-        }}
-        bind:this={input}
-        type="select"
-        id="input_{state_key}"
-        placeholder={label}
-        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select
-               flex h-7 w-full items-center justify-between rounded px-3 py-2
-               text-sm focus:outline-none
-               [&>span]:line-clamp-1 aria-[invalid]:border-destructive
-               placeholder:text-muted-foreground
-               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
-        name={state_key}
-        bind:value={filter_text}
-        autocomplete="off"
-      />
-      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-        <i class="text-surface-300 fa-regular fa-arrows-up-down fa-fw" />
-      </div>
-    </div>
-    {#if is_focused}
-      <div use:teleport class="z-10 w-full inset-y-[70px] mt-1">
-        <div
-          transition:scale={{
-            start: 0.95,
-            opacity: 0,
-            duration: 50,
-          }}
-          class="bg-popover text-popover-foreground relative min-w-[8rem]
-             overflow-hidden rounded-md border shadow-md outline-none
-             max-h-[200px] overflow-y-auto w-full p-1"
-        >
-          {#if filteritems.length > 0}
-            <ul>
-              {#each filteritems as item, index (item._key)}
-                <li class="group {$internal.focused_index === index ? 'bg-primary-400' : ''} ">
-                  <button
-                    type="button"
-                    on:click|preventDefault={() => setSelected(item)}
-                    class="selectitem relative flex w-full cursor-default
-                       select-none items-center rounded-sm py-1 pl-8 pr-2
-                       text-sm outline-none hover:bg-accent
-                       hover:text-accent-foreground
-                       data-[highlighted]:bg-accent
-                       data-[highlighted]:text-accent-foreground
-                       data-[disabled]:pointer-events-none
-                       data-[disabled]:opacity-50"
-                  >
-                    {item._label}
-                    {#if item._key === $internal?.selected_item_key}
-                      <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
-                    {/if}
-                  </button>
-                </li>
-              {/each}
-            </ul>
-          {:else}
-            <div class="flex items-center justify-center py-4">
-              <span class="text-sm text-surface-400">
-                {filter_text ? "No results found" : "Start typing to search..."}
-              </span>
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/if}
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}
+<div class="flex flex-col w-full text-surface-900 my-2">
+  <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
+    {label}
+  </Label>
+  <Popover.Root bind:open let:ids>
+    <Popover.Trigger asChild let:builder>
+      <Button
+        builders={[builder]}
+        variant="outline"
+        role="combobox"
+        aria-expanded={open}
+        class="w-full border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 justify-between"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
+      >
+        {dropdownLabel}
+        <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </Popover.Trigger>
+    <Popover.Content sameWidth {collisionBoundary} class="p-0">
+      <Command.Root>
+        <Command.Input placeholder="Search..." />
+        <Command.Empty>No results found.</Command.Empty>
+        <Command.Group>
+          {#each items as item}
+            <Command.Item
+              value={item._key}
+              onSelect={(item_key) => {
+                simpleSetSelected(item_key);
+                closeAndFocusTrigger(ids.trigger);
+              }}
+              class={$field.data.base === item._value ? "bg-primary-100" : ""}
+            >
+              {item._label}
+            </Command.Item>
+          {/each}
+        </Command.Group>
+      </Command.Root>
+    </Popover.Content>
+  </Popover.Root>
+
+  {#if validationMessage}
+    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
+  {/if}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.0.11",
+  "version": "1.1.1",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -57,7 +57,7 @@
     "@codemirror/commands": "^6.7.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
-    "@stubber/ui": "^1.0.18",
+    "@stubber/ui": "^1.1.1",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "currency-symbol-map": "^5.1.0",