@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/{dist/TreeItem.svelte → TreeItem.svelte}

@@ -1,53 +1,66 @@
-<script>import { getContext, setContext } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext, setContext } from 'svelte';
 import { slide } from 'svelte/transition';
+import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
 import { TREE_CONTEXT_KEY } from './Tree.constants';
+import TreeChevron from './TreeChevron.svelte';
 import { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
-import TreeItemDisplay from './TreeItemDisplay.svelte';
-import { readable, writable } from 'svelte/store';
-import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-// ----- Props ----
-/** When true, the item is disabled. */
-export let disabled = false;
-/** The text for the item. Not used when either the item or label slots are filled. */
-export let text = undefined;
-/** The value uniquely identifying this item within the tree. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- Animation ----- //
-const slidNoOp = (node, params) => {
+let { children, class: _class, disabled = false, icon, label, style, value, ...rest } = $props();
+const slideNoOp = (node, params) => {
     return { delay: 0, duration: 0 };
 };
-$: slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
-// ----- Get Context ----- //
-const { disabled: treeDisabled, expandedValues, selectedValue } = getContext(TREE_CONTEXT_KEY);
-const { depth, disabled: parentDisabled } = getContext(TREE_ITEM_CONTEXT_KEY) || {
-    depth: readable(0),
-    disabled: readable(false)
+let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
+const treeContext = getContext(TREE_CONTEXT_KEY) || {
+    disabled: false,
+    expandedValues: [],
+    selectedValue: null
 };
-// ----- State ----- //
+const treeItemContext = getContext(TREE_ITEM_CONTEXT_KEY) || {
+    depth: 0,
+    disabled: false
+};
+let _disabled = $derived(disabled || treeItemContext.disabled || treeContext.disabled);
+// Using $derived would be preferred, but this helps avoid
+// updates to every tree item when expandedValues changes.
+let expanded = $state(treeContext.expandedValues?.includes(value));
+$effect(() => {
+    let expandedCandidate = treeContext.expandedValues?.includes(value);
+    if (expandedCandidate !== expanded) {
+        expanded = expandedCandidate;
+    }
+});
+// Using $derived would be preferred, but this helps avoid
+// updates to every list item when selectedValue changes.
+let selected = $state(treeContext.selectedValue === value);
+$effect(() => {
+    if (treeContext.selectedValue === value && !selected) {
+        selected = true;
+    }
+    else if (treeContext.selectedValue !== value && selected) {
+        selected = false;
+    }
+});
 let treeItemRef;
-$: hasChildren = $$slots.default;
-$: expanded = $expandedValues.includes(value);
-$: selected = $selectedValue === value;
-$: _disabled = disabled || $parentDisabled || $treeDisabled;
-const depthStore = writable($depth);
-const disabledStore = writable(_disabled);
-$: {
-    depthStore.set($depth + 1);
-}
-$: {
-    disabledStore.set(_disabled);
-}
-// ----- Expand/Collapse ----- //
+let itemRef;
+let treeItemChildContext = {
+    get disabled() {
+        return _disabled;
+    },
+    get depth() {
+        return treeItemContext.depth ? treeItemContext.depth + 1 : 1;
+    }
+};
+setContext(TREE_ITEM_CONTEXT_KEY, treeItemChildContext);
 const collapseItem = (index) => {
     if (!_disabled) {
-        index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
+        index =
+            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
         if (index !== -1) {
-            expandedValues.set([
-                ...$expandedValues.slice(0, index),
-                ...$expandedValues.slice(index + 1)
-            ]);
+            treeContext.expandedValues = [
+                ...treeContext.expandedValues.slice(0, index),
+                ...treeContext.expandedValues.slice(index + 1)
+            ];
             return true;
         }
     }
@@ -56,9 +69,10 @@ const collapseItem = (index) => {
 export const collapse = () => collapseItem();
 const expandItem = (index) => {
     if (!_disabled) {
-        index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
+        index =
+            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
         if (index === -1) {
-            expandedValues.set([...$expandedValues, value]);
+            treeContext.expandedValues = [...treeContext.expandedValues, value];
             return true;
         }
     }
@@ -66,13 +80,12 @@ const expandItem = (index) => {
 };
 export const expand = () => expandItem();
 export const toggleExpanded = () => {
-    if (!_disabled) {
-        const index = $expandedValues.findIndex((expandedValue) => expandedValue === value);
+    if (!_disabled && children) {
+        const index = treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
         return index !== -1 ? collapseItem(index) : expandItem(index);
     }
     return false;
 };
-// ----- Focus ----- //
 const blurItem = (treeItemElement) => {
     if (!_disabled) {
         const item = treeItemElement?.querySelector('.item');
@@ -84,7 +97,7 @@ export const blur = () => {
 };
 const focusItem = (treeItemElement, options) => {
     if (!_disabled) {
-        const item = treeItemElement?.querySelector('.item');
+        const item = treeItemElement;
         item?.focus(options);
     }
 };
@@ -92,20 +105,18 @@ export const focus = (options) => {
     focusItem(treeItemRef);
     treeItemRef?.focus(options);
 };
-// ----- Click ----- //
 const clickItem = (treeItemElement) => {
     if (!_disabled) {
-        const item = treeItemElement?.querySelector('.item');
+        const item = treeItemElement;
         item?.click();
     }
 };
 export const click = () => {
     clickItem(treeItemRef);
 };
-// ----- Selection ----- //
 const selectItemByValue = (value) => {
     if (!_disabled) {
-        selectedValue.set(value);
+        treeContext.selectedValue = value;
     }
 };
 export const select = () => {
@@ -187,12 +198,14 @@ export const selectNext = () => {
     }
     return false;
 };
-// ----- Event Handlers ----- //
-const onClick = () => {
-    if (!_disabled) {
+const onClick = (event) => {
+    const eventTarget = event.target;
+    if (!_disabled && itemRef.contains(eventTarget)) {
         toggleExpanded();
         select();
+        return;
     }
+    rest.onclick?.(event);
 };
 const onKeydown = (event) => {
     if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
@@ -202,7 +215,7 @@ const onKeydown = (event) => {
                 if (toggleExpanded()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
             case 'ArrowRight':
@@ -211,18 +224,18 @@ const onKeydown = (event) => {
                 When focus is on an open item, moves focus to the first child item.
                 When focus is on an end item (a tree item with no children), does nothing.
                 */
-                if (hasChildren) {
+                if (children) {
                     if (expanded) {
                         if (selectNext()) {
                             event.preventDefault();
                             event.stopPropagation();
-                            return false;
+                            return;
                         }
                     }
                     else if (expandItem()) {
                         event.preventDefault();
                         event.stopPropagation();
-                        return false;
+                        return;
                     }
                 }
                 break;
@@ -232,17 +245,17 @@ const onKeydown = (event) => {
                 When focus is on a child item that is also either an end item or a closed item, moves focus to its parent item.
                 When focus is on a closed `tree`, does nothing.
                 */
-                if (hasChildren && expanded) {
+                if (expanded && children) {
                     if (collapseItem()) {
                         event.preventDefault();
                         event.stopPropagation();
-                        return false;
+                        return;
                     }
                 }
                 else if (selectParent()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
             case 'ArrowUp':
@@ -252,7 +265,7 @@ const onKeydown = (event) => {
                 if (selectPrevious()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
             case 'ArrowDown':
@@ -262,122 +275,55 @@ const onKeydown = (event) => {
                 if (selectNext()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
         }
     }
+    rest.onkeydown?.(event);
 };
-// ----- Set Context ----- //
-setContext(TREE_ITEM_CONTEXT_KEY, {
-    depth: depthStore,
-    disabled: disabledStore
-});
 </script>
 
-<!--
-@component
-A item in a Tree displaying the item and children.
-  -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
 <div
+  bind:this={treeItemRef}
   aria-selected={selected ? true : undefined}
   aria-expanded={expanded}
-  bind:this={treeItemRef}
-  class={`sterling-tree-item ${variant}`}
+  class={`sterling-tree-item ${_class}`}
   class:disabled={_disabled}
+  class:expanded
   class:item-disabled={disabled}
-  class:parent-disabled={$parentDisabled}
-  class:tree-disabled={$treeDisabled}
+  class:leaf={!children}
+  class:parent-disabled={treeItemContext.disabled}
+  class:selected
+  class:tree-disabled={treeContext.disabled}
   data-value={value}
   role="treeitem"
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}
+  tabindex={selected ? 0 : -1}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
+  style={`--sterling-tree-item-depth: ${treeItemContext.depth}; ${style}`}
 >
-  <div
-    aria-selected={selected ? true : undefined}
-    class="item"
-    class:selected
-    role="treeitem"
-    tabindex={selected ? 0 : -1}
-    on:click={onClick}
-    on:keydown={onKeydown}
-  >
-    <slot
-      name="item"
-      {depth}
-      disabled={_disabled}
-      {expanded}
-      {hasChildren}
-      {selected}
+  <!-- TODO: In RTL consider position of icon and label get reversed -->
+  <div bind:this={itemRef} class="item" class:selected>
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <TreeChevron {expanded} hasChildren={!!children} />
+    {/if}
+    {#if label}
+      {#if typeof label === 'string'}
+        {label}
+      {:else}
+        {@render label()}
+      {/if}
+    {:else}
       {value}
-      {variant}
-    >
-      <TreeItemDisplay
-        depth={$depth}
-        disabled={_disabled && !$treeDisabled}
-        {expanded}
-        {hasChildren}
-        {selected}
-        {value}
-        {variant}
-      >
-        <svelte:fragment
-          let:depth
-          let:disabled
-          let:expanded
-          let:hasChildren
-          let:selected
-          let:value
-          let:variant
-        >
-          <slot
-            name="label"
-            {depth}
-            {disabled}
-            {expanded}
-            {hasChildren}
-            {selected}
-            {value}
-            {variant}>{text || value}</slot
-          >
-        </svelte:fragment>
-      </TreeItemDisplay>
-    </slot>
+    {/if}
   </div>
-  {#if expanded && hasChildren}
+  {#if expanded && children}
     <div class="children" transition:slideMotion|global={{ duration: 200 }} role="group">
-      <slot depth={$depth} disabled={_disabled} {selected} {value} {variant} />
+      {@render children?.()}
     </div>
   {/if}
 </div>

package/TreeItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Snippet } from 'svelte';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null | undefined;
+    icon?: Snippet;
+    label?: string | Snippet;
+    value: string;
+};
+declare const TreeItem: import("svelte").Component<Props, {
+    collapse: () => boolean;
+    expand: () => boolean;
+    toggleExpanded: () => boolean;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+    click: () => void;
+    select: () => void;
+    selectParent: () => boolean;
+    selectPrevious: () => boolean;
+    selectNext: () => boolean;
+}, "">;
+type TreeItem = ReturnType<typeof TreeItem>;
+export default TreeItem;

package/TreeItem.types.d.ts

@@ -0,0 +1,4 @@
+export type TreeItemContext = {
+    depth: number;
+    disabled: boolean | null | undefined;
+};

package/{dist/actions → actions}/clickOutside.d.ts

@@ -1,6 +1,7 @@
 type Params = {
     /** Other elements should not raise the event if clicked. */
     ignoreOthers?: HTMLElement[];
+    onclickoutside?: (mouseEvent: MouseEvent) => void;
 };
 /**
  * Raises the click_outside event when the user clicks outside the node.

package/{dist/actions → actions}/clickOutside.js

@@ -10,6 +10,7 @@ export const clickOutside = (node, params) => {
         if (targetNode &&
             !node.contains(targetNode) &&
             (!ignoreOthers || ignoreOthers.filter(Boolean).every((x) => !x.contains(targetNode)))) {
+            params?.onclickoutside?.(event);
             node.dispatchEvent(new CustomEvent('click_outside', {
                 detail: { mouseEvent: event }
             }));

package/actions/extraClass.d.ts

@@ -0,0 +1,8 @@
+type Params = {
+    extraClass: string | null | undefined;
+};
+export declare const extraClass: (node: HTMLElement, params?: Params) => {
+    update(params: Params): void;
+    destroy(): void;
+};
+export {};

package/actions/extraClass.js

@@ -0,0 +1,14 @@
+export const extraClass = (node, params) => {
+    let _class = params?.extraClass;
+    !!_class && node.classList.add(_class);
+    return {
+        update(params) {
+            !!_class && node.classList.remove(_class);
+            _class = params.extraClass;
+            !!_class && node.classList.add(_class);
+        },
+        destroy() {
+            !!_class && node.classList.remove(_class);
+        }
+    };
+};

package/{dist/index.d.ts → index.d.ts}

@@ -1,6 +1,7 @@
 export type { ClickOutsideEvent, ClickOutsideEventDetail } from './@types/clickOutside';
 export { applyLightDarkMode } from './actions/applyLightDarkMode';
 export { clickOutside } from './actions/clickOutside';
+export { extraClass } from './actions/extraClass';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
 export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
@@ -8,24 +9,21 @@ export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
 export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
 export { usingKeyboard } from './mediaQueries/usingKeyboard';
 export { idGenerator } from './idGenerator';
-export type { ButtonVariant, ButtonShape } from './Button.types';
-export type { LabelStatus, LabelVariant } from './Label.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext } from './MenuBar.types';
 export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
 export type { PopoverPlacement } from './Popover.types';
-export type { ProgressStatus } from './Progress.types';
+export type { ProgressOrientation } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
 export type { TreeContext } from './Tree.types';
 export type { TreeItemContext } from './TreeItem.types';
-export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
 export { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { POPOVER_PLACEMENTS } from './Popover.constants';
-export { PROGRESS_STATUSES } from './Progress.constants';
+export { PROGRESS_ORIENTATIONS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
 export { TREE_CONTEXT_KEY } from './Tree.constants';
@@ -33,12 +31,9 @@ export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
 import Button from './Button.svelte';
 import Callout from './Callout.svelte';
 import Checkbox from './Checkbox.svelte';
-import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
 import Label from './Label.svelte';
-import HexColorSliders from './HexColorSliders.svelte';
-import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
@@ -47,12 +42,10 @@ import Menu from './Menu.svelte';
 import MenuBar from './MenuBar.svelte';
 import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
-import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
-import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -63,5 +56,4 @@ import Tooltip from './Tooltip.svelte';
 import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
-import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Callout, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };

package/{dist/index.js → index.js}

@@ -1,6 +1,7 @@
 // ----- actions ----- //
 export { applyLightDarkMode } from './actions/applyLightDarkMode';
 export { clickOutside } from './actions/clickOutside';
+export { extraClass } from './actions/extraClass';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
 export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
@@ -11,13 +12,12 @@ export { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- functions ----- //
 export { idGenerator } from './idGenerator';
 // ----- Component constants ----- //
-export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
 export { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { POPOVER_PLACEMENTS } from './Popover.constants';
-export { PROGRESS_STATUSES } from './Progress.constants';
+export { PROGRESS_ORIENTATIONS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
 export { TREE_CONTEXT_KEY } from './Tree.constants';
@@ -26,12 +26,9 @@ export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
 import Button from './Button.svelte';
 import Callout from './Callout.svelte';
 import Checkbox from './Checkbox.svelte';
-import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
 import Label from './Label.svelte';
-import HexColorSliders from './HexColorSliders.svelte';
-import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
@@ -40,12 +37,10 @@ import Menu from './Menu.svelte';
 import MenuBar from './MenuBar.svelte';
 import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
-import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
-import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -56,5 +51,4 @@ import Tooltip from './Tooltip.svelte';
 import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
-import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Callout, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };