@geoffcox/sterling-svelte 2.0.0 → 2.0.2

package/MenuItem.utils.js

@@ -1,36 +0,0 @@
-export const focusPreviousChild = (children, currentValue) => {
-    const index = children?.findIndex((menuItem) => menuItem.value === currentValue);
-    if (index !== -1) {
-        const focusIndex = index === 0 ? children.length - 1 : index - 1;
-        children[focusIndex].focus();
-    }
-};
-export const focusNextChild = (children, currentValue) => {
-    const index = children?.findIndex((menuItem) => menuItem.value === currentValue);
-    if (index !== -1) {
-        const focusIndex = (index + 1) % children.length;
-        children[focusIndex].focus();
-    }
-};
-export const focusFirstChild = (children) => {
-    children?.[0]?.focus();
-};
-export const focusLastChild = (children) => {
-    children?.[children.length - 1]?.focus();
-};
-export const isElementMenuItem = (candidate) => {
-    if (!candidate)
-        return false;
-    const dataValue = candidate?.getAttribute('data-value');
-    const role = candidate?.getAttribute('role');
-    return ((role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio') &&
-        dataValue !== null &&
-        dataValue !== undefined);
-};
-export const isElementEnabledMenuItem = (candidate) => {
-    if (!isElementMenuItem(candidate)) {
-        return false;
-    }
-    const disabled = candidate?.getAttribute('disabled');
-    return disabled === null || disabled === 'false';
-};

package/MenuSeparator.svelte

@@ -1,11 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">let { class: _class, ...rest } = $props();
-export {};
-</script>
-
-<div
-  class={['sterling-menu-separator', _class].filter(Boolean).join(' ')}
-  role="separator"
-  {...rest}
-></div>

package/MenuSeparator.svelte.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement>;
-declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
-type MenuSeparator = ReturnType<typeof MenuSeparator>;
-export default MenuSeparator;

package/Popover.constants.d.ts

@@ -1 +0,0 @@
-export declare const POPOVER_PLACEMENTS: string[];

package/Popover.constants.js

@@ -1,14 +0,0 @@
-export const POPOVER_PLACEMENTS = [
-    'top-start',
-    'top',
-    'top-end',
-    'right-start',
-    'right',
-    'right-end',
-    'bottom-end',
-    'bottom',
-    'bottom-start',
-    'left-end',
-    'left',
-    'left-start'
-];

package/Popover.svelte

@@ -1,121 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { getContext, onMount, tick } from 'svelte';
-import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
-import { portal } from './actions/portal';
-import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
-let { children, conditionalRender = $bindable(true), crossAxisOffset = $bindable(0), mainAxisOffset = $bindable(0), open = $bindable(false), placement = $bindable('top-start'), portalHost, reference, class: _class, ...rest } = $props();
-let popupRef = $state(undefined);
-let popupPosition = $state({ x: 0, y: 0 });
-let floatingUIPlacement = $derived(placement);
-let bodyHeight = $state(0);
-let resizeObserver = undefined;
-const { portalHost: contextPortalHost } = getContext(STERLING_PORTAL_CONTEXT_ID) || {
-    portalHost: undefined
-};
-// ----- Portal Host ----- //
-const ensurePortalHost = async () => {
-    await tick();
-    // use the host set from context, usually set from a Dialog
-    let host = $contextPortalHost;
-    // use or create the sterling portal host
-    if (!host && globalThis?.document) {
-        host = globalThis.document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
-        // fallback to creating the sterling portal host
-        if (!host) {
-            host = globalThis.document.createElement('div');
-            host.id = STERLING_PORTAL_HOST_ID;
-            host.style.overflow = 'visible';
-            globalThis.document.body.append(host);
-        }
-    }
-    portalHost = host;
-};
-// ----- Position ----- //
-let middleware = $derived([
-    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
-    flip()
-]);
-const computePopoverPosition = async () => {
-    if (reference && popupRef) {
-        popupPosition = await computePosition(reference, popupRef, {
-            placement: floatingUIPlacement,
-            middleware
-        });
-    }
-    else {
-        popupPosition = { x: 0, y: 0 };
-    }
-};
-// whenever a positioned element is portaled it needs resubscription to auto-update
-let cleanupAutoUpdate = () => { };
-const autoUpdatePopoverPosition = () => {
-    cleanupAutoUpdate();
-    if (reference && popupRef) {
-        cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
-    }
-};
-$effect(() => {
-    autoUpdatePopoverPosition();
-    return () => {
-        cleanupAutoUpdate();
-        cleanupAutoUpdate = () => { };
-    };
-});
-$effect(() => {
-    bodyHeight;
-    computePopoverPosition();
-});
-// ----- EventHandlers ----- //
-$effect(() => {
-    ensurePortalHost();
-    resizeObserver = new ResizeObserver((entries) => {
-        bodyHeight = entries[0].target.clientHeight;
-    });
-    // start observing a DOM node
-    resizeObserver.observe(document.body);
-    return () => {
-        resizeObserver?.unobserve(document.body);
-        resizeObserver?.disconnect();
-        resizeObserver = undefined;
-    };
-});
-const onKeydown = (event) => {
-    if (event.key === 'Escape') {
-        open = false;
-    }
-    rest.onkeydown?.(event);
-};
-//TODO: Is this necessary?
-ensurePortalHost();
-</script>
-
-{#if open || !conditionalRender}
-  <div use:portal={{ target: portalHost }} class="sterling-popover-portal">
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      bind:this={popupRef}
-      class={['sterling-popover', _class].filter(Boolean).join(' ')}
-      class:open
-      class:top={popupPosition.placement === 'top'}
-      class:top-start={popupPosition.placement === 'top-start'}
-      class:top-end={popupPosition.placement === 'top-end'}
-      class:right={popupPosition.placement === 'right'}
-      class:right-start={popupPosition.placement === 'right-start'}
-      class:right-end={popupPosition.placement === 'right-end'}
-      class:bottom={popupPosition.placement === 'bottom'}
-      class:bottom-start={popupPosition.placement === 'bottom-start'}
-      class:bottom-end={popupPosition.placement === 'bottom-end'}
-      class:left={popupPosition.placement === 'left'}
-      class:left-start={popupPosition.placement === 'left-start'}
-      class:left-end={popupPosition.placement === 'left-end'}
-      {...rest}
-      onkeydown={onKeydown}
-      style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-    >
-      {#if children}
-        {@render children()}
-      {/if}
-    </div>
-  </div>
-{/if}

package/Popover.svelte.d.ts

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

package/Popover.types.d.ts

@@ -1,4 +0,0 @@
-import type { POPOVER_PLACEMENTS } from './Popover.constants';
-type PopoverPlacementTuple = typeof POPOVER_PLACEMENTS;
-export type PopoverPlacement = PopoverPlacementTuple[number];
-export {};

package/Popover.types.js

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

package/Portal.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const STERLING_PORTAL_HOST_ID = "SterlingPortalHost";
-export declare const STERLING_PORTAL_CONTEXT_ID = "SterlingPortalContext";

package/Portal.constants.js

@@ -1,2 +0,0 @@
-export const STERLING_PORTAL_HOST_ID = 'SterlingPortalHost';
-export const STERLING_PORTAL_CONTEXT_ID = 'SterlingPortalContext';

package/Portal.types.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="svelte" />
-import type { Readable } from 'svelte/store';
-export type PortalContext = {
-    /** The portal host for usePortal */
-    portalHost: Readable<HTMLElement | undefined>;
-};

package/Portal.types.js

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

package/Progress.constants.d.ts

@@ -1 +0,0 @@
-export declare const PROGRESS_ORIENTATIONS: string[];

package/Progress.constants.js

@@ -1 +0,0 @@
-export const PROGRESS_ORIENTATIONS = ['horizontal', 'vertical'];

package/Progress.svelte

@@ -1,36 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">let { class: _class, disabled = false, max = 100, percent = $bindable(0), //readonly
-value = $bindable(0), vertical, ...rest } = $props();
-//----- State ----- //
-let clientHeight = $state(0);
-let clientWidth = $state(0);
-let clampMax = $derived(Math.max(1, max));
-let clampValue = $derived(Math.max(0, Math.min(value, clampMax)));
-let ratio = $derived(clampValue / clampMax);
-$effect(() => {
-    percent = Math.round(ratio * 100);
-});
-let percentHeight = $derived(clientHeight * ratio);
-let percentWidth = $derived(clientWidth * ratio);
-let indicatorStyle = $derived(vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`);
-export {};
-</script>
-
-<!-- svelte-ignore a11y_role_supports_aria_props -->
-<div
-  aria-orientation={vertical ? 'vertical' : 'horizontal'}
-  class={['sterling-progress', _class].filter(Boolean).join(' ')}
-  class:disabled
-  class:horizontal={!vertical}
-  class:vertical
-  data-progress-percent={percent}
-  data-progress-max={max}
-  data-progress-value={value}
-  role="progressbar"
-  {...rest}
->
-  <div class="container" bind:clientWidth bind:clientHeight>
-    <div class="indicator" style={indicatorStyle}></div>
-  </div>
-</div>

package/Progress.svelte.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    max?: number;
-    percent?: number;
-    value?: number;
-    vertical?: boolean | null;
-};
-declare const Progress: import("svelte").Component<Props, {}, "value" | "percent">;
-type Progress = ReturnType<typeof Progress>;
-export default Progress;

package/Progress.types.d.ts

@@ -1,4 +0,0 @@
-import type { PROGRESS_ORIENTATIONS } from './Progress.constants';
-type ProgressOrientationTuple = typeof PROGRESS_ORIENTATIONS;
-export type ProgressOrientation = ProgressOrientationTuple[number];
-export {};

package/Progress.types.js

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

package/Radio.svelte

@@ -1,53 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { id, children, checked = $bindable(false), class: _class, disabled = false, group = $bindable(), ...rest } = $props();
-let inputRef;
-$effect(() => {
-    if (children && id === undefined) {
-        id = idGenerator.nextId('Radio');
-    }
-});
-// ----- Methods ----- //
-export const blur = () => {
-    inputRef?.blur();
-};
-export const click = () => {
-    inputRef?.click();
-};
-export const focus = (options) => {
-    inputRef?.focus(options);
-};
-// ----- Event Handlers ----- //
-const onChange = (e) => {
-    console.log('onChange', e);
-    // if ((e.currentTarget && e.currentTarget.checked) || (e.target && e.target.checked)) {
-    //   group = value;
-    // }
-};
-$effect(() => {
-    console.log(id, '-checked', checked);
-});
-</script>
-
-<!--
-	@component
-	A styled HTML input type=radio element with optional label.
--->
-<div
-  class={`sterling-radio ${_class}`}
-  class:checked
-  class:disabled
-  class:using-keyboard={$usingKeyboard}
->
-  <div class="container">
-    <input bind:this={inputRef} checked {disabled} bind:group {id} type="radio" {...rest} />
-    <div class="indicator"></div>
-  </div>
-  {#if children}
-    <label for={id}>
-      {@render children()}
-    </label>
-  {/if}
-</div>

package/Radio.svelte.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = HTMLInputAttributes & {
-    group?: any | null;
-};
-/** A styled HTML input type=radio element with optional label. */
-declare const Radio: import("svelte").Component<Props, {
-    blur: () => void;
-    click: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "group" | "checked">;
-type Radio = ReturnType<typeof Radio>;
-export default Radio;

package/Select.svelte

@@ -1,196 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { tick } from 'svelte';
-import { clickOutside } from './actions/clickOutside';
-import { idGenerator } from './idGenerator';
-import List from './List.svelte';
-import Popover from './Popover.svelte';
-let { buttonSnippet, children, class: _class, disabled = false, open = $bindable(false), onSelect, onPending, selectedValue = $bindable(), listClass, valueSnippet, ...rest } = $props();
-const popupId = idGenerator.nextId('Select-popup');
-// ----- State ----- //
-// Tracks the pending selected index
-let pendingSelectedValue = $state(selectedValue);
-// svelte-ignore non_reactive_update
-let selectRef = $state(undefined);
-let listRef;
-// ----- Reactions ----- //
-$effect(() => {
-    pendingSelectedValue = selectedValue;
-});
-$effect(() => {
-    onSelect?.(selectedValue);
-});
-$effect(() => {
-    if (open) {
-        onPending?.(pendingSelectedValue);
-    }
-});
-$effect(() => {
-    if (open) {
-        tick().then(() => {
-            setTimeout(() => {
-                listRef?.focus();
-                listRef?.scrollToSelectedItem();
-            }, 10);
-        });
-    }
-});
-$effect(() => {
-    if (!open) {
-        tick().then(() => selectRef?.focus());
-    }
-});
-// ----- Methods ----- //
-export const blur = () => {
-    selectRef?.blur();
-};
-export const click = () => {
-    selectRef?.click();
-};
-export const focus = (options) => {
-    selectRef?.focus();
-};
-export const scrollToSelectedItem = () => {
-    if (open) {
-        listRef?.scrollToSelectedItem();
-    }
-};
-// ----- Event Handlers ----- //
-const onSelectClick = (event) => {
-    if (!disabled) {
-        open = !open;
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    rest.onclick?.(event);
-};
-const onSelectKeydown = (event) => {
-    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case ' ':
-                {
-                    if (!open) {
-                        open = true;
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'ArrowUp':
-                {
-                    if (selectedValue) {
-                        listRef?.selectPreviousItem();
-                    }
-                    else {
-                        listRef?.selectLastItem();
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'ArrowDown':
-                {
-                    if (selectedValue) {
-                        listRef?.selectNextItem();
-                    }
-                    else {
-                        listRef?.selectFirstItem();
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-        }
-    }
-    rest.onkeydown?.(event);
-};
-const onListKeydown = (event) => {
-    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case 'Enter':
-                {
-                    selectedValue = pendingSelectedValue;
-                    open = !open;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'Escape':
-                {
-                    pendingSelectedValue = selectedValue;
-                    open = !open;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-        }
-    }
-};
-const onListClick = (event) => {
-    open = false;
-    event.preventDefault();
-    event.stopPropagation();
-    return false;
-};
-const onListSelect = (value) => {
-    pendingSelectedValue = value;
-    if (!open) {
-        selectedValue = pendingSelectedValue;
-    }
-};
-</script>
-
-<div
-  bind:this={selectRef}
-  aria-controls={popupId}
-  aria-haspopup="listbox"
-  aria-expanded={open}
-  class={['sterling-select', _class].filter(Boolean).join(' ')}
-  class:disabled
-  role="combobox"
-  tabindex="0"
-  use:clickOutside={{ onclickoutside: () => (open = false) }}
-  {...rest}
-  onclick={onSelectClick}
-  onkeydown={onSelectKeydown}
->
-  <div class="value">
-    {#if valueSnippet}
-      {@render valueSnippet(selectedValue)}
-    {:else if selectedValue}
-      {selectedValue}
-    {:else}
-      <span>&nbsp;</span>
-    {/if}
-  </div>
-  <div class="button">
-    {#if buttonSnippet}
-      {@render buttonSnippet()}
-    {:else}
-      <div class="chevron"></div>
-    {/if}
-  </div>
-  <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
-    <div class={['sterling-select-popup-content', _class].filter(Boolean).join(' ')}>
-      <List
-        bind:this={listRef}
-        {disabled}
-        selectedValue={pendingSelectedValue}
-        onclick={onListClick}
-        onkeydown={onListKeydown}
-        onSelect={onListSelect}
-        tabindex={open ? 0 : -1}
-        class={`composed ${listClass}`}
-      >
-        {#if children}
-          {@render children()}
-        {/if}
-      </List>
-    </div>
-  </Popover>
-</div>

package/Select.svelte.d.ts

@@ -1,20 +0,0 @@
-import { type Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    buttonSnippet?: Snippet;
-    disabled?: boolean | null;
-    listClass?: string;
-    onPending?: (value?: string) => void;
-    onSelect?: (value?: string) => void;
-    open?: boolean | null;
-    selectedValue?: string;
-    valueSnippet?: Snippet<[string | undefined]>;
-};
-declare const Select: import("svelte").Component<Props, {
-    blur: () => void;
-    click: () => void;
-    focus: (options?: FocusOptions) => void;
-    scrollToSelectedItem: () => void;
-}, "open" | "selectedValue">;
-type Select = ReturnType<typeof Select>;
-export default Select;