@geoffcox/sterling-svelte 2.0.4 → 2.0.6

package/dist/Autocomplete.svelte

@@ -0,0 +1,154 @@
+<script module lang="ts">
+  const defaultFilter = (values: string[], text?: string): string[] => {
+    const filtered = values.filter((v) => !text || v.toLowerCase().includes(text.toLowerCase()));
+
+    if (filtered.length === 0) {
+      return values;
+    }
+
+    return filtered;
+  };
+</script>
+
+<script lang="ts">
+  import type {
+    ChangeEventHandler,
+    FocusEventHandler,
+    KeyboardEventHandler
+  } from 'svelte/elements';
+  import type { AutocompleteProps } from './Autocomplete.types';
+  import { List, Input, Popover, ListItem } from './';
+
+  const uuid = $props.id();
+  const popoverId = `Autocomplete-Popover-${uuid}`;
+
+  let {
+    filter = defaultFilter,
+    item,
+    value: inputValue = $bindable(),
+    values = [],
+    ...rest
+  }: AutocompleteProps = $props();
+
+  let autocompleteDiv: HTMLDivElement | undefined = $state();
+  let contentDiv: HTMLDivElement | undefined = $state();
+  let list: List | undefined = $state();
+
+  let open = $state(false);
+  let filteredValues = $state(values);
+  let selectedListValue: string | undefined = $state();
+
+  // if the filters items do not include the selectedValue, clear it
+  $effect(() => {
+    if (selectedListValue && !filteredValues.includes(selectedListValue)) {
+      selectedListValue = undefined;
+    }
+  });
+
+  // if the filter, value, or inputValue changes, update the filteredValues
+  $effect(() => {
+    filteredValues = filter(values, inputValue);
+  });
+
+  const onFocus: FocusEventHandler<HTMLInputElement> = (event) => {
+    open = true;
+    event.stopPropagation();
+    rest.onfocus?.(event);
+  };
+
+  const onBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    const relatedNode = event.relatedTarget as Node;
+    if (!relatedNode || (contentDiv && !contentDiv.contains(relatedNode))) {
+      open = false;
+    }
+    rest.onblur?.(event);
+  };
+
+  const onInput: ChangeEventHandler<HTMLInputElement> = (event) => {
+    open = true;
+    filteredValues = filter(values, event.currentTarget.value);
+    rest.oninput?.(event);
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+      switch (event.key) {
+        case ' ':
+          event.stopPropagation();
+          break;
+        case 'Escape':
+          open = false;
+          event.stopPropagation();
+          break;
+        case 'Enter':
+          if (selectedListValue) {
+            inputValue = selectedListValue;
+            open = false;
+          }
+          event.stopPropagation();
+          break;
+        case 'ArrowUp': {
+          if (!open) {
+            open = true;
+            filteredValues = values;
+          }
+          if (selectedListValue) {
+            list?.selectPreviousItem();
+          } else {
+            list?.selectLastItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        }
+        case 'ArrowDown': {
+          if (!open) {
+            open = true;
+            filteredValues = values;
+          }
+          if (selectedListValue) {
+            list?.selectNextItem();
+          } else {
+            selectedListValue = undefined;
+            list?.selectFirstItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        }
+      }
+    }
+    rest.onkeydown?.(event);
+  };
+
+  const onListItemClick = (event: MouseEvent, value: string) => {
+    inputValue = value;
+    open = false;
+  };
+</script>
+
+<div class="sterling-autocomplete" bind:this={autocompleteDiv}>
+  <Input
+    bind:value={inputValue}
+    {...rest}
+    onkeydown={onKeydown}
+    oninput={onInput}
+    onfocus={onFocus}
+    onblur={onBlur}
+  />
+  <Popover id={popoverId} {open} placement="bottom-start" reference={autocompleteDiv}>
+    <div bind:this={contentDiv} class="sterling-autocomplete-content">
+      <List bind:this={list} bind:selectedValue={selectedListValue} class="composed">
+        {#each filteredValues as itemValue}
+          <ListItem value={itemValue} onclick={(event) => onListItemClick(event, itemValue)}>
+            {#if item}
+              {@render item(itemValue)}
+            {:else}
+              {itemValue}
+            {/if}
+          </ListItem>
+        {/each}
+      </List>
+    </div>
+  </Popover>
+</div>

package/dist/Autocomplete.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AutocompleteProps } from './Autocomplete.types';
+declare const Autocomplete: import("svelte").Component<AutocompleteProps, {}, "value">;
+type Autocomplete = ReturnType<typeof Autocomplete>;
+export default Autocomplete;

package/dist/Autocomplete.types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { InputProps } from './Input.types';
+export type AutocompleteProps = InputProps & {
+    filter?: (values: string[], text: string) => string[];
+    item?: Snippet<[string]>;
+    values?: string[];
+};

package/dist/Autocomplete.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Button.svelte

@@ -1,11 +1,9 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { ButtonProps } from './Button.types';
 
-  type Props = HTMLButtonAttributes;
-
-  let { children, class: _class, ...rest }: Props = $props();
+  let { children, class: _class, ...rest }: ButtonProps = $props();
 
   let buttonRef: HTMLButtonElement;
 

package/dist/Button.svelte.d.ts

@@ -1,5 +1,4 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
-declare const Button: import("svelte").Component<HTMLButtonAttributes, {
+declare const Button: import("svelte").Component<import("svelte/elements").HTMLButtonAttributes, {
     click: () => void;
     blur: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Button.types.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type ButtonProps = HTMLButtonAttributes;

package/dist/Button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Callout.svelte

@@ -18,16 +18,7 @@
   import type { PopoverPlacement } from './Popover.types';
   import { STERLING_PORTAL_CONTEXT_ID, STERLING_PORTAL_HOST_ID } from './Portal.constants';
   import type { PortalContext } from './Portal.types';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean | null;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement | null;
-  };
+  import type { CalloutProps } from './Callout.types';
 
   let {
     children,
@@ -40,7 +31,7 @@
     reference,
     class: _class,
     ...rest
-  }: Props = $props();
+  }: CalloutProps = $props();
 
   let popupRef: HTMLDivElement | undefined = $state(undefined);
   let arrowRef: HTMLDivElement | undefined = $state(undefined);

package/dist/Callout.svelte.d.ts

@@ -1,14 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { PopoverPlacement } from './Popover.types';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean | null;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement | null;
-};
-declare const Callout: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
+import type { CalloutProps } from './Callout.types';
+declare const Callout: import("svelte").Component<CalloutProps, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
 type Callout = ReturnType<typeof Callout>;
 export default Callout;

package/dist/Checkbox.svelte

@@ -1,13 +1,11 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { CheckboxProps } from './Checkbox.types';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
 
   const uuid = $props.id();
 
-  type Props = HTMLInputAttributes;
-
   let {
     id,
     children,
@@ -15,7 +13,7 @@
     class: _class,
     disabled = $bindable(false),
     ...rest
-  }: Props = $props();
+  }: CheckboxProps = $props();
 
   let inputRef: HTMLInputElement;
 

package/dist/Checkbox.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 /** A styled HTML input type=checkbox element. */
-declare const Checkbox: import("svelte").Component<HTMLInputAttributes, {
+declare const Checkbox: import("svelte").Component<import("svelte/elements").HTMLInputAttributes, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Checkbox.types.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type CheckboxProps = HTMLInputAttributes;

package/dist/Checkbox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Dialog.svelte

@@ -1,25 +1,15 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { onMount, setContext, tick, type Snippet } from 'svelte';
-  import type { FormEventHandler, HTMLDialogAttributes } from 'svelte/elements';
-  import { writable } from 'svelte/store';
+  import { onMount, setContext, tick } from 'svelte';
+  import type { FormEventHandler } from 'svelte/elements';
   import Button from './Button.svelte';
   import { STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
   import type { PortalContext } from './Portal.types';
+  import type { DialogProps } from './Dialog.types';
 
   const dialogFadeDuration = 250;
 
-  type Props = HTMLDialogAttributes & {
-    backdropCloses?: boolean | null | undefined;
-    body?: Snippet;
-    content?: Snippet;
-    footer?: Snippet;
-    header?: Snippet;
-    returnValue?: string;
-    headerTitle?: string | Snippet;
-  };
-
   let {
     backdropCloses = false,
     open = $bindable(false),
@@ -31,7 +21,7 @@
     returnValue = $bindable(''),
     headerTitle,
     ...rest
-  }: Props = $props();
+  }: DialogProps = $props();
 
   let dialogRef: HTMLDialogElement;
   let contentRef: HTMLDivElement;

package/dist/Dialog.svelte.d.ts

@@ -1,14 +1,4 @@
-import { type Snippet } from 'svelte';
-import type { HTMLDialogAttributes } from 'svelte/elements';
-type Props = HTMLDialogAttributes & {
-    backdropCloses?: boolean | null | undefined;
-    body?: Snippet;
-    content?: Snippet;
-    footer?: Snippet;
-    header?: Snippet;
-    returnValue?: string;
-    headerTitle?: string | Snippet;
-};
-declare const Dialog: import("svelte").Component<Props, {}, "open" | "returnValue">;
+import type { DialogProps } from './Dialog.types';
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open" | "returnValue">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/Dialog.types.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+export type DialogProps = HTMLDialogAttributes & {
+    backdropCloses?: boolean | null | undefined;
+    body?: Snippet;
+    content?: Snippet;
+    footer?: Snippet;
+    header?: Snippet;
+    returnValue?: string;
+    headerTitle?: string | Snippet;
+};

package/dist/Dialog.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Dropdown.svelte

@@ -1,35 +1,18 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { type Snippet } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
   import { slide, type SlideParams, type TransitionConfig } from 'svelte/transition';
   import { clickOutside } from './actions/clickOutside';
   import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
   import Popover from './Popover.svelte';
+  import type { DropdownProps } from './Dropdown.types';
 
   const uuid = $props.id();
 
   const popoverId = `Dropdown-Popover-${uuid}`;
 
-  type DeprecatedProps = {
-    /** @deprecated Use icon instead. */
-    button?: Snippet;
-    /** @deprecated Use icon instead. */
-    buttonIcon?: Snippet;
-  };
-
-  type Props = HTMLAttributes<HTMLDivElement> &
-    DeprecatedProps & {
-      disabled?: boolean | null | undefined;
-      open?: boolean | null | undefined;
-      stayOpenOnClickAway?: boolean | null | undefined;
-      onOpen?: (open: boolean | null | undefined) => void;
-      icon?: Snippet;
-      value?: string | Snippet;
-    };
-
   let {
     button,
     buttonIcon,
@@ -42,7 +25,7 @@
     stayOpenOnClickAway = false,
     value,
     ...rest
-  }: Props = $props();
+  }: DropdownProps = $props();
 
   icon = icon || buttonIcon || button;
 

package/dist/Dropdown.svelte.d.ts

@@ -1,20 +1,5 @@
-import { type Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type DeprecatedProps = {
-    /** @deprecated Use icon instead. */
-    button?: Snippet;
-    /** @deprecated Use icon instead. */
-    buttonIcon?: Snippet;
-};
-type Props = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
-    disabled?: boolean | null | undefined;
-    open?: boolean | null | undefined;
-    stayOpenOnClickAway?: boolean | null | undefined;
-    onOpen?: (open: boolean | null | undefined) => void;
-    icon?: Snippet;
-    value?: string | Snippet;
-};
-declare const Dropdown: import("svelte").Component<Props, {
+import type { DropdownProps } from './Dropdown.types';
+declare const Dropdown: import("svelte").Component<DropdownProps, {
     click: () => void;
     blur: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Dropdown.types.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type DeprecatedProps = {
+    /** @deprecated Use icon instead. */
+    button?: Snippet;
+    /** @deprecated Use icon instead. */
+    buttonIcon?: Snippet;
+};
+export type DropdownProps = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
+    disabled?: boolean | null | undefined;
+    open?: boolean | null | undefined;
+    stayOpenOnClickAway?: boolean | null | undefined;
+    onOpen?: (open: boolean | null | undefined) => void;
+    icon?: Snippet;
+    value?: string | Snippet;
+};
+export {};

package/dist/Dropdown.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Input.svelte

@@ -1,13 +1,11 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { InputProps } from './Input.types';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
 
   const uuid = $props.id();
 
-  type Props = HTMLInputAttributes;
-
   let {
     id,
     children,
@@ -15,7 +13,7 @@
     disabled = false,
     value = $bindable(undefined),
     ...rest
-  }: Props = $props();
+  }: InputProps = $props();
 
   let inputRef: HTMLInputElement;
 

package/dist/Input.svelte.d.ts

@@ -1,5 +1,4 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-declare const Input: import("svelte").Component<HTMLInputAttributes, {
+declare const Input: import("svelte").Component<import("svelte/elements").HTMLInputAttributes, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Input.types.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type InputProps = HTMLInputAttributes;

package/dist/Input.types.js

@@ -0,0 +1 @@
+export {};