@geoffcox/sterling-svelte 0.0.20 → 0.0.21

package/TreeItem.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext, setContext } from "svelte";
 import { slide } from "svelte/transition";
-import { treeContextKey, treeItemContextKey } from "./Tree.constants";
+import { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from "./Tree.constants";
 import TreeItemDisplay from "./TreeItemDisplay.svelte";
 import { writable } from "svelte/store";
 export let disabled = false;
@@ -9,8 +9,8 @@ const {
   expandedValues,
   selectedValue,
   disabled: treeDisabled
-} = getContext(treeContextKey);
-const { depth = 0, disabled: parentDisabled } = getContext(treeItemContextKey) || {};
+} = getContext(TREE_CONTEXT_KEY);
+const { depth = 0, disabled: parentDisabled } = getContext(TREE_ITEM_CONTEXT_KEY) || {};
 let treeItemRef;
 $:
   hasChildren = $$slots.default;
@@ -26,7 +26,7 @@ $: {
 }
 const collapseItem = (index) => {
   if (!disabled) {
-    index = index ?? $expandedValues.findIndex((id) => id === value);
+    index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
     if (index !== -1) {
       expandedValues.set([
         ...$expandedValues.slice(0, index),
@@ -37,9 +37,10 @@ const collapseItem = (index) => {
   }
   return false;
 };
+export const collapse = () => collapseItem();
 const expandItem = (index) => {
   if (!disabled) {
-    index = index ?? $expandedValues.findIndex((id) => id === value);
+    index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
     if (index === -1) {
       expandedValues.set([...$expandedValues, value]);
       return true;
@@ -47,42 +48,93 @@ const expandItem = (index) => {
   }
   return false;
 };
-const toggleExpanded = () => {
+export const expand = () => expandItem();
+export const toggleExpanded = () => {
   if (!disabled) {
-    const index = $expandedValues.findIndex((id) => id === value);
+    const index = $expandedValues.findIndex((expandedValue) => expandedValue === value);
     return index !== -1 ? collapseItem(index) : expandItem(index);
   }
   return false;
 };
-const focusItem = (treeItemElement) => {
+const blurItem = (treeItemElement) => {
   if (!_disabled) {
-    const item = treeItemElement.querySelector(".item");
-    item?.focus();
+    const item = treeItemElement?.querySelector(".item");
+    item?.blur();
   }
 };
-const selectItemById = (value2) => {
+export const blur = () => {
+  blurItem(treeItemRef);
+};
+const focusItem = (treeItemElement, options) => {
+  if (!_disabled) {
+    const item = treeItemElement?.querySelector(".item");
+    item?.focus(options);
+  }
+};
+export const focus = (options) => {
+  focusItem(treeItemRef);
+  treeItemRef?.focus(options);
+};
+const clickItem = (treeItemElement) => {
+  if (!_disabled) {
+    const item = treeItemElement?.querySelector(".item");
+    item?.click();
+  }
+};
+export const click = () => {
+  clickItem(treeItemRef);
+};
+const selectItemByValue = (value2) => {
   if (!_disabled) {
     selectedValue.set(value2);
   }
 };
-export const selectItem = () => {
+export const select = () => {
   if (!_disabled) {
-    selectItemById(value);
+    selectItemByValue(value);
   }
 };
-const selectParentItem = () => {
+export const selectParent = () => {
   if (!_disabled) {
     let candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
     let candidateValue = candidate?.getAttribute("data-value");
     if (candidateValue && candidate) {
-      selectItemById(candidateValue);
+      selectItemByValue(candidateValue);
       focusItem(candidate);
       return true;
     }
   }
   return false;
 };
-const selectNextItem = () => {
+export const selectPrevious = () => {
+  if (!_disabled) {
+    let candidate = void 0;
+    let candidateValue = void 0;
+    const previousSibling = treeItemRef?.previousElementSibling;
+    if (previousSibling) {
+      const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
+      if (decendants) {
+        candidate = decendants[decendants.length - 1];
+        candidateValue = candidate?.getAttribute("data-value");
+      }
+      if (!candidateValue) {
+        candidate = previousSibling;
+        candidateValue = candidate?.getAttribute("data-value");
+      }
+    }
+    if (!candidateValue) {
+      candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (candidateValue && candidate) {
+      selectItemByValue(candidateValue);
+      focusItem(candidate);
+      return true;
+    }
+  }
+  return false;
+};
+export const selectNext = () => {
   if (!_disabled) {
     let candidateValue = void 0;
     let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
@@ -105,35 +157,7 @@ const selectNextItem = () => {
       }
     }
     if (candidateValue && candidate) {
-      selectItemById(candidateValue);
-      focusItem(candidate);
-      return true;
-    }
-  }
-  return false;
-};
-const selectPreviousItem = () => {
-  if (!_disabled) {
-    let candidate = void 0;
-    let candidateValue = void 0;
-    const previousSibling = treeItemRef?.previousElementSibling;
-    if (previousSibling) {
-      const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
-      if (decendants) {
-        candidate = decendants[decendants.length - 1];
-        candidateValue = candidate?.getAttribute("data-value");
-      }
-      if (!candidateValue) {
-        candidate = previousSibling;
-        candidateValue = candidate?.getAttribute("data-value");
-      }
-    }
-    if (!candidateValue) {
-      candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-      candidateValue = candidate?.getAttribute("data-value");
-    }
-    if (candidateValue && candidate) {
-      selectItemById(candidateValue);
+      selectItemByValue(candidateValue);
       focusItem(candidate);
       return true;
     }
@@ -143,7 +167,7 @@ const selectPreviousItem = () => {
 const onClick = () => {
   if (!_disabled) {
     toggleExpanded();
-    selectItem();
+    select();
   }
 };
 const onKeydown = (event) => {
@@ -160,7 +184,7 @@ const onKeydown = (event) => {
       case "ArrowRight":
         if (hasChildren) {
           if (expanded) {
-            if (selectNextItem()) {
+            if (selectNext()) {
               event.preventDefault();
               event.stopPropagation();
               return false;
@@ -179,21 +203,21 @@ const onKeydown = (event) => {
             event.stopPropagation();
             return false;
           }
-        } else if (selectParentItem()) {
+        } else if (selectParent()) {
           event.preventDefault();
           event.stopPropagation();
           return false;
         }
         break;
       case "ArrowUp":
-        if (selectPreviousItem()) {
+        if (selectPrevious()) {
           event.preventDefault();
           event.stopPropagation();
           return false;
         }
         break;
       case "ArrowDown":
-        if (selectNextItem()) {
+        if (selectNext()) {
           event.preventDefault();
           event.stopPropagation();
           return false;
@@ -202,7 +226,7 @@ const onKeydown = (event) => {
     }
   }
 };
-setContext(treeItemContextKey, { depth: depth + 1, disabled: disabledStore });
+setContext(TREE_ITEM_CONTEXT_KEY, { depth: depth + 1, disabled: disabledStore });
 </script>
 
 <!--
@@ -264,7 +288,7 @@ A item in a Tree displaying the item and children.
   </div>
   {#if expanded && hasChildren}
     <div class="children" transition:slide={{ duration: 200 }} role="group">
-      <slot />
+      <slot {depth} {disabled} {selected} {value} />
     </div>
   {/if}
 </div>

package/TreeItem.svelte.d.ts

@@ -4,7 +4,16 @@ declare const __propDef: {
         [x: string]: any;
         disabled?: boolean | undefined;
         value: string;
-        selectItem?: (() => void) | undefined;
+        collapse?: (() => boolean) | undefined;
+        expand?: (() => boolean) | undefined;
+        toggleExpanded?: (() => boolean) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
+        click?: (() => void) | undefined;
+        select?: (() => void) | undefined;
+        selectParent?: (() => boolean) | undefined;
+        selectPrevious?: (() => boolean) | undefined;
+        selectNext?: (() => boolean) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -52,7 +61,12 @@ declare const __propDef: {
             selected: boolean;
             value: string;
         };
-        default: {};
+        default: {
+            depth: number;
+            disabled: boolean;
+            selected: boolean;
+            value: string;
+        };
     };
 };
 export type TreeItemProps = typeof __propDef.props;
@@ -60,6 +74,15 @@ export type TreeItemEvents = typeof __propDef.events;
 export type TreeItemSlots = typeof __propDef.slots;
 /** A item in a Tree displaying the item and children. */
 export default class TreeItem extends SvelteComponentTyped<TreeItemProps, TreeItemEvents, TreeItemSlots> {
-    get selectItem(): () => void;
+    get collapse(): () => boolean;
+    get expand(): () => boolean;
+    get toggleExpanded(): () => boolean;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
+    get click(): () => void;
+    get select(): () => void;
+    get selectParent(): () => boolean;
+    get selectPrevious(): () => boolean;
+    get selectNext(): () => boolean;
 }
 export {};

package/TreeItemDisplay.svelte

@@ -5,9 +5,20 @@ export let expanded = false;
 export let hasChildren = false;
 export let value;
 export let selected = false;
+let divRef;
+export const click = () => {
+  divRef?.click();
+};
+export const blur = () => {
+  divRef?.blur();
+};
+export const focus = (options) => {
+  divRef?.focus(options);
+};
 </script>
 
 <div
+  bind:this={divRef}
   class="sterling-tree-item"
   class:disabled
   class:expanded

package/TreeItemDisplay.svelte.d.ts

@@ -8,6 +8,9 @@ declare const __propDef: {
         hasChildren?: boolean | undefined;
         value: string;
         selected?: boolean | undefined;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -53,5 +56,8 @@ export type TreeItemDisplayProps = typeof __propDef.props;
 export type TreeItemDisplayEvents = typeof __propDef.events;
 export type TreeItemDisplaySlots = typeof __propDef.slots;
 export default class TreeItemDisplay extends SvelteComponentTyped<TreeItemDisplayProps, TreeItemDisplayEvents, TreeItemDisplaySlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/floating-ui.constants.d.ts

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

package/floating-ui.constants.js

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

package/floating-ui.types.d.ts

@@ -0,0 +1,2 @@
+import type { Placement } from '@floating-ui/dom';
+export type FloatingPlacement = Placement;

package/floating-ui.types.js

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

package/index.d.ts

@@ -9,20 +9,30 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
 export type { ButtonVariant, ButtonShape } from './Button.types';
 export type { FieldStatus } from './Field.types';
+export type { FloatingPlacement } from './floating-ui.types';
 export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
-export type { MenuBarContext, MenuItemContext, MenuItemRegistration } from './Menus.types';
+export type { MenuBarContext } from './MenuBar.types';
+export type { MenuItemContext, MenuItemRegistration } from './MenuItem.types';
 export type { ProgressColorful } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
-export type { TooltipAutoShow, TooltipPlacement } from './Tooltip.types';
+export type { TooltipShowOn } from './Tooltip.types';
 export type { TreeContext, TreeItemContext } from './Tree.types';
-export { listContextKey } from './List.constants';
-export { tabListContextKey } from './TabList.constants';
-export { treeContextKey, treeItemContextKey } from './Tree.constants';
+export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
+export { FIELD_STATUSES } from './Field.constants';
+export { FLOATING_PLACEMENTS } from './floating-ui.constants';
+export { LINK_VARIANTS } from './Link.constants';
+export { LIST_CONTEXT_KEY } from './List.constants';
+export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+export { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+export { PROGRESS_COLORFULS } from './Progress.constants';
+export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+export { TEXT_AREA_RESIZES } from './TextArea.constants';
+export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
+export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
 import Dialog from './Dialog.svelte';

package/index.js

@@ -11,12 +11,19 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-// ----- Button ----- //
-export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
 // ----- Component constants ----- //
-export { listContextKey } from './List.constants';
-export { tabListContextKey } from './TabList.constants';
-export { treeContextKey, treeItemContextKey } from './Tree.constants';
+export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
+export { FIELD_STATUSES } from './Field.constants';
+export { FLOATING_PLACEMENTS } from './floating-ui.constants';
+export { LINK_VARIANTS } from './Link.constants';
+export { LIST_CONTEXT_KEY } from './List.constants';
+export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+export { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+export { PROGRESS_COLORFULS } from './Progress.constants';
+export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+export { TEXT_AREA_RESIZES } from './TextArea.constants';
+export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
+export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
 // ----- Components ----- //
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -51,15 +51,18 @@
   },
   "exports": {
     "./package.json": "./package.json",
+    "./Button.constants": "./Button.constants.js",
     "./Button.svelte": "./Button.svelte",
     "./Button.types": "./Button.types.js",
     "./Checkbox.svelte": "./Checkbox.svelte",
     "./Dialog.svelte": "./Dialog.svelte",
     "./Dropdown.svelte": "./Dropdown.svelte",
+    "./Field.constants": "./Field.constants.js",
     "./Field.svelte": "./Field.svelte",
     "./Field.types": "./Field.types.js",
     "./Input.svelte": "./Input.svelte",
     "./Label.svelte": "./Label.svelte",
+    "./Link.constants": "./Link.constants.js",
     "./Link.svelte": "./Link.svelte",
     "./Link.types": "./Link.types.js",
     "./List.constants": "./List.constants.js",
@@ -67,14 +70,17 @@
     "./List.types": "./List.types.js",
     "./ListItem.svelte": "./ListItem.svelte",
     "./Menu.svelte": "./Menu.svelte",
+    "./MenuBar.constants": "./MenuBar.constants.js",
     "./MenuBar.svelte": "./MenuBar.svelte",
+    "./MenuBar.types": "./MenuBar.types.js",
     "./MenuButton.svelte": "./MenuButton.svelte",
+    "./MenuItem.constants": "./MenuItem.constants.js",
     "./MenuItem.svelte": "./MenuItem.svelte",
+    "./MenuItem.types": "./MenuItem.types.js",
+    "./MenuItem.utils": "./MenuItem.utils.js",
     "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
     "./MenuSeparator.svelte": "./MenuSeparator.svelte",
-    "./Menus.constants": "./Menus.constants.js",
-    "./Menus.types": "./Menus.types.js",
-    "./Menus.utils": "./Menus.utils.js",
+    "./Progress.constants": "./Progress.constants.js",
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",
     "./Radio.svelte": "./Radio.svelte",
@@ -85,8 +91,10 @@
     "./TabList.constants": "./TabList.constants.js",
     "./TabList.svelte": "./TabList.svelte",
     "./TabList.types": "./TabList.types.js",
+    "./TextArea.constants": "./TextArea.constants.js",
     "./TextArea.svelte": "./TextArea.svelte",
     "./TextArea.types": "./TextArea.types.js",
+    "./Tooltip.constants": "./Tooltip.constants.js",
     "./Tooltip.svelte": "./Tooltip.svelte",
     "./Tooltip.types": "./Tooltip.types.js",
     "./Tree.constants": "./Tree.constants.js",
@@ -98,6 +106,8 @@
     "./actions/clickOutside": "./actions/clickOutside.js",
     "./actions/forwardEvents": "./actions/forwardEvents.js",
     "./actions/portal": "./actions/portal.js",
+    "./floating-ui.constants": "./floating-ui.constants.js",
+    "./floating-ui.types": "./floating-ui.types.js",
     ".": "./index.js",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",

package/Menus.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const menuBarContextKey = "sterlingMenuBar";
-export declare const menuItemContextKey = "sterlingMenuItem";

package/Menus.constants.js

@@ -1,2 +0,0 @@
-export const menuBarContextKey = 'sterlingMenuBar';
-export const menuItemContextKey = 'sterlingMenuItem';