@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/Dialog.svelte

@@ -1,65 +1,109 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { onMount, setContext, tick } from 'svelte';
-import Button from './Button.svelte';
-import { STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
-import { writable } from 'svelte/store';
-const dialogFadeDuration = 250;
-let { backdropCloses = false, open = $bindable(false), body, class: _class, content, footer, header, returnValue = $bindable(''), headerTitle, ...rest } = $props();
-let dialogRef;
-let contentRef;
-let formRef;
-// svelte-ignore non_reactive_update
-let closing = false;
-const portalHostStore = writable(undefined);
-// ----- Context ----- //
-setContext(STERLING_PORTAL_CONTEXT_ID, { portalHost: portalHostStore });
-// ----- Event Handlers ----- //
-const onDocumentClick = (event) => {
+<script lang="ts">
+  import { onMount, setContext, tick, type Snippet } from 'svelte';
+  import type { FormEventHandler, HTMLDialogAttributes } from 'svelte/elements';
+  import { writable } from 'svelte/store';
+  import Button from './Button.svelte';
+  import { STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
+  import type { PortalContext } from './Portal.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),
+    body,
+    class: _class,
+    content,
+    footer,
+    header,
+    returnValue = $bindable(''),
+    headerTitle,
+    ...rest
+  }: Props = $props();
+
+  let dialogRef: HTMLDialogElement;
+  let contentRef: HTMLDivElement;
+  let formRef: HTMLFormElement;
+
+  // svelte-ignore non_reactive_update
+  let closing = false;
+
+  let portalHost: HTMLElement | undefined = $state(undefined);
+
+  let portalContext: PortalContext = {
+    get portalHost() {
+      return portalHost;
+    },
+    set portalHost(host: HTMLElement | undefined) {
+      portalHost = host;
+    }
+  };
+
+  // ----- Context ----- //
+  setContext<PortalContext>(STERLING_PORTAL_CONTEXT_ID, portalContext);
+
+  // ----- Event Handlers ----- //
+
+  const onDocumentClick = (event: MouseEvent) => {
     // as tracking clicks outside the dialog is only active while the dialog is open
     // the clickOutside action is not used and reimplemented here.
-    const targetNode = event?.target;
+    const targetNode = event?.target as Node;
     // the content must be used as the container because dialog::backdrop is considered
     // part of the HTMLDialogElement
     if (targetNode && !contentRef?.contains(targetNode) && backdropCloses) {
-        open = false;
+      open = false;
     }
-};
-const showDialog = () => {
+  };
+
+  const showDialog = () => {
     if (dialogRef?.open === false) {
-        // when open, track clicks outside the dialog (use capture = true)
-        document.addEventListener('click', onDocumentClick, true);
-        returnValue = '';
-        dialogRef.showModal();
+      // when open, track clicks outside the dialog (use capture = true)
+      document.addEventListener('click', onDocumentClick, true);
+      returnValue = '';
+      dialogRef.showModal();
     }
     open = true;
-};
-const closeDialog = async () => {
+  };
+
+  const closeDialog = async () => {
     if (dialogRef?.open === true) {
-        // when closed, stop tracking clicks outside the dialog
-        document.removeEventListener('click', onDocumentClick);
-        // to allow time for the CSS transition animation, closing the dialog is delayed
-        closing = true;
-        await tick();
-        setTimeout(() => {
-            dialogRef.close(returnValue);
-            open = false;
-            closing = false;
-        }, dialogFadeDuration);
-    }
-    else {
+      // when closed, stop tracking clicks outside the dialog
+      document.removeEventListener('click', onDocumentClick);
+
+      // to allow time for the CSS transition animation, closing the dialog is delayed
+      closing = true;
+      await tick();
+      setTimeout(() => {
+        dialogRef.close(returnValue);
         open = false;
+        closing = false;
+      }, dialogFadeDuration);
+    } else {
+      open = false;
     }
-};
-const updateDialog = (open) => {
+  };
+
+  const updateDialog = (open: boolean | null | undefined) => {
     if (open) {
-        showDialog();
-    }
-    else {
-        closeDialog();
+      showDialog();
+    } else {
+      closeDialog();
     }
-};
-const onCancel = (event) => {
+  };
+
+  const onCancel = (event: Event) => {
     // Cancelling a dialog instantly hides the dialog.
     // To allow animation with closeDialog, this event is canceled.
     event.preventDefault();
@@ -67,48 +111,54 @@ const onCancel = (event) => {
     returnValue = '';
     closeDialog();
     return false;
-};
-const onSubmit = (event) => {
+  };
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     // Submitting a form instantly hides the dialog.
     // The dialog.close event is not cancellable, but form.submit is.
     // To allow animation with closeDialog, this event is canceled.
     // The form is resubmitted after the dialog closes to ensure the form is in the correct state.
-    const anyEvent = event;
+    const anyEvent = event as unknown as any;
     if (anyEvent?.submitter.type === 'submit') {
-        if (dialogRef.open) {
-            const eventSubmitter = anyEvent?.submitter;
-            returnValue = eventSubmitter?.value ?? '';
-            closeDialog();
-            setTimeout(() => {
-                formRef.requestSubmit(eventSubmitter);
-            }, dialogFadeDuration);
-            event.preventDefault();
-            return false;
-        }
-    }
-    else {
+      if (dialogRef.open) {
+        const eventSubmitter = anyEvent?.submitter;
+        returnValue = eventSubmitter?.value ?? '';
+        closeDialog();
+        setTimeout(() => {
+          formRef.requestSubmit(eventSubmitter);
+        }, dialogFadeDuration);
         event.preventDefault();
         return false;
+      }
+    } else {
+      event.preventDefault();
+      return false;
     }
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     updateDialog(open);
-});
-onMount(() => {
+  });
+
+  onMount(() => {
     updateDialog(open);
+
     // Use the dialog for any element portals
-    portalHostStore.set(dialogRef);
+    portalContext.portalHost = dialogRef;
+
     dialogRef.addEventListener('cancel', onCancel);
+
     return () => {
-        dialogRef?.removeEventListener('cancel', onCancel);
-        portalHostStore.set(undefined);
+      dialogRef?.removeEventListener('cancel', onCancel);
+
+      portalContext.portalHost = undefined;
     };
-});
+  });
 </script>
 
 <dialog
   bind:this={dialogRef}
-  class={`sterling-dialog ${_class}`}
+  class={['sterling-dialog', _class]}
   class:open
   class:closing
   {...rest}
@@ -132,7 +182,7 @@ onMount(() => {
               {/if}
             </div>
             <div class="close">
-              <Button class={`circular tool`} onclick={() => closeDialog()}>
+              <Button class="circular tool" onclick={() => closeDialog()}>
                 <div class="close-x"></div>
               </Button>
             </div>

package/dist/Dialog.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLDialogAttributes } from 'svelte/elements';
 import { type Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
 type Props = HTMLDialogAttributes & {
     backdropCloses?: boolean | null | undefined;
     body?: Snippet;

package/dist/Dropdown.svelte

@@ -1,73 +1,125 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import {} from 'svelte';
-import Popover from './Popover.svelte';
-import { clickOutside } from './actions/clickOutside';
-import { idGenerator } from './idGenerator';
-import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-import { slide } from 'svelte/transition';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-const popupId = idGenerator.nextId('Dropdown-popup');
-let { class: _class, children, disabled = false, open = $bindable(false), onOpen, stayOpenOnClickAway = false, button, buttonIcon, value, ...rest } = $props();
-// svelte-ignore non_reactive_update
-let dropdownRef = $state(undefined);
-// svelte-ignore non_reactive_update
-let popupContentRef = $state(undefined);
-// ----- Reactions ----- //
-$effect(() => {
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+  import type { HTMLAttributes, 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';
+
+  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,
+    class: _class,
+    children,
+    disabled = false,
+    icon,
+    open = $bindable(false),
+    onOpen,
+    stayOpenOnClickAway = false,
+    value,
+    ...rest
+  }: Props = $props();
+
+  icon = icon || buttonIcon || button;
+
+  // svelte-ignore non_reactive_update
+  let dropdownRef: HTMLDivElement | undefined = $state(undefined);
+
+  // svelte-ignore non_reactive_update
+  let popupContentRef: HTMLDivElement | undefined = $state(undefined);
+
+  // ----- Reactions ----- //
+
+  $effect(() => {
     onOpen?.(open);
-});
-// ----- Methods ----- //
-export const click = () => {
+  });
+
+  // ----- Methods ----- //
+
+  export const click = () => {
     dropdownRef?.click();
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     dropdownRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     dropdownRef?.focus(options);
-};
-const onClick = (event) => {
+  };
+
+  const onClick: MouseEventHandler<HTMLDivElement> = (event) => {
     if (!disabled) {
-        open = !open;
-        event.preventDefault();
-        event.stopPropagation();
+      open = !open;
+      event.preventDefault();
+      event.stopPropagation();
     }
+
     rest.onclick?.(event);
-};
-const onKeydown = (event) => {
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
-        switch (event.key) {
-            case ' ':
-                open = !open;
-                event.preventDefault();
-                event.stopPropagation();
-            case 'Escape':
-                open = false;
-                event.preventDefault();
-                event.stopPropagation();
-        }
+      switch (event.key) {
+        case ' ':
+          open = !open;
+          event.preventDefault();
+          event.stopPropagation();
+        case 'Escape':
+          open = false;
+          event.preventDefault();
+          event.stopPropagation();
+      }
     }
+
     rest.onkeydown?.(event);
-};
-const onClickOutside = (event) => {
+  };
+
+  const onClickOutside = (event: MouseEvent) => {
     if (!stayOpenOnClickAway) {
-        open = false;
+      open = false;
     }
-};
-// ----- Animation ----- //
-const slideNoOp = (node, params) => {
+  };
+
+  // ----- Animation ----- //
+
+  const slideNoOp = (node: Element, params?: SlideParams): TransitionConfig => {
     return { delay: 0, duration: 0 };
-};
-let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
+  };
+
+  let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
 </script>
 
 <div
   bind:this={dropdownRef}
-  aria-controls={popupId}
+  aria-controls={popoverId}
   aria-haspopup={true}
   aria-expanded={open}
-  class={`sterling-dropdown ${_class}`}
+  class={['sterling-dropdown', _class]}
   class:disabled
   class:open
   class:using-keyboard={$usingKeyboard}
@@ -87,19 +139,17 @@ let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
       {/if}
     {/if}
   </div>
-  <div class="button">
-    {#if button}
-      {@render button()}
-    {:else if buttonIcon}
-      {@render buttonIcon()}
+  <div class="button icon">
+    {#if icon}
+      {@render icon()}
     {:else}
       <div class="chevron"></div>
     {/if}
   </div>
 
-  <Popover reference={dropdownRef} open={!disabled && open} placement="bottom-start">
+  <Popover id={popoverId} reference={dropdownRef} open={!disabled && open} placement="bottom-start">
     <div
-      class={`sterling-dropdown-popup-content ${_class}`}
+      class={['sterling-dropdown-popup-content', 'sterling-dropdown-content', _class]}
       transition:slideMotion|global={{ duration: 200 }}
       bind:this={popupContentRef}
     >

package/dist/Dropdown.svelte.d.ts

@@ -1,12 +1,17 @@
 import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
+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;
-    button?: Snippet;
-    buttonIcon?: Snippet;
+    icon?: Snippet;
     value?: string | Snippet;
 };
 declare const Dropdown: import("svelte").Component<Props, {

package/dist/Input.svelte

@@ -1,49 +1,74 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { id, children, class: _class, disabled = false, value = $bindable(undefined), ...rest } = $props();
-let inputRef;
-$effect(() => {
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  const uuid = $props.id();
+
+  type Props = HTMLInputAttributes;
+
+  let {
+    id,
+    children,
+    class: _class,
+    disabled = false,
+    value = $bindable(undefined),
+    ...rest
+  }: Props = $props();
+
+  let inputRef: HTMLInputElement;
+
+  $effect(() => {
     if (children && id === undefined) {
-        id = idGenerator.nextId('Input');
+      id = `Input-${uuid}`;
     }
-});
-export const blur = () => {
+  });
+
+  export const blur = () => {
     inputRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     inputRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     inputRef?.focus();
-};
-export const select = () => {
+  };
+
+  export const select = () => {
     inputRef?.select();
-};
-export const setSelectionRange = (start, end, direction) => {
+  };
+
+  export const setSelectionRange = (
+    start: number | null,
+    end: number | null,
+    direction?: 'forward' | 'backward' | 'none'
+  ) => {
     inputRef?.setSelectionRange(start, end, direction);
-};
-export const setRangeText = (replacement, start, end, selectionMode) => {
+  };
+
+  export const setRangeText = (
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectionMode?: SelectionMode
+  ) => {
     if (start && end) {
-        inputRef?.setRangeText(replacement, start, end, selectionMode);
-    }
-    else {
-        inputRef?.setRangeText(replacement);
+      inputRef?.setRangeText(replacement, start, end, selectionMode);
+    } else {
+      inputRef?.setRangeText(replacement);
     }
-};
+  };
 </script>
 
 {#if children}
-  <label class={['sterling-input-label', _class].filter(Boolean).join(' ')} class:disabled for={id}>
+  <label class={['sterling-input-label', _class]} class:disabled for={id}>
     {@render children()}
   </label>
 {/if}
-<div
-  class={['sterling-input', _class].filter(Boolean).join(' ')}
-  class:disabled
-  class:using-keyboard={$usingKeyboard}
->
+<div class={['sterling-input', _class]} class:disabled class:using-keyboard={$usingKeyboard}>
   <input
     bind:this={inputRef}
     class:using-keyboard={$usingKeyboard}

package/dist/Input.svelte.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="svelte" />
 import type { HTMLInputAttributes } from 'svelte/elements';
 declare const Input: import("svelte").Component<HTMLInputAttributes, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;
     select: () => void;
-    setSelectionRange: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;
+    setSelectionRange: (start: number | null, end: number | null, direction?: "forward" | "backward" | "none") => void;
     setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
 }, "value">;
 type Input = ReturnType<typeof Input>;