@geoffcox/sterling-svelte 0.0.24 → 0.0.26

package/actions/clickOutside.d.ts

@@ -1,3 +1,14 @@
-export declare const clickOutside: (node: HTMLElement) => {
+type Params = {
+    /** Other elements should not raise the event if clicked. */
+    ignoreOthers?: HTMLElement[];
+};
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export declare const clickOutside: (node: HTMLElement, params?: Params) => {
+    update(params: Params): void;
     destroy(): void;
 };
+export {};

package/actions/clickOutside.js

@@ -1,7 +1,15 @@
-export const clickOutside = (node) => {
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export const clickOutside = (node, params) => {
+    let ignoreOthers = params?.ignoreOthers;
     const handleClick = (event) => {
         const targetNode = event?.target;
-        if (targetNode && !node.contains(targetNode)) {
+        if (targetNode &&
+            !node.contains(targetNode) &&
+            (!ignoreOthers || ignoreOthers.every((x) => !x.contains(targetNode)))) {
             node.dispatchEvent(new CustomEvent('click_outside', {
                 detail: { mouseEvent: event }
             }));
@@ -9,6 +17,9 @@ export const clickOutside = (node) => {
     };
     document.addEventListener('click', handleClick, true);
     return {
+        update(params) {
+            ignoreOthers = params.ignoreOthers;
+        },
         destroy() {
             document.removeEventListener('click', handleClick, true);
         }

package/index.d.ts

@@ -16,7 +16,7 @@ export type { FloatingPlacement } from './floating-ui.types';
 export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext } from './MenuBar.types';
-export type { MenuItemContext, MenuItemRegistration } from './MenuItem.types';
+export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
 export type { ProgressColorful } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
@@ -29,7 +29,7 @@ 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 { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { PROGRESS_COLORFULS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
@@ -51,6 +51,7 @@ 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 Select from './Select.svelte';
@@ -64,4 +65,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -20,7 +20,7 @@ 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 { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { PROGRESS_COLORFULS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
@@ -43,6 +43,7 @@ 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 Select from './Select.svelte';
@@ -56,4 +57,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -78,6 +78,7 @@
     "./MenuItem.utils": "./MenuItem.utils.js",
     "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
     "./MenuSeparator.svelte": "./MenuSeparator.svelte",
+    "./Popover.svelte": "./Popover.svelte",
     "./Progress.constants": "./Progress.constants.js",
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",
@@ -109,6 +110,8 @@
     "./floating-ui.types": "./floating-ui.types.js",
     "./idGenerator": "./idGenerator.js",
     ".": "./index.js",
+    "./stores/prefersReducedMotion": "./stores/prefersReducedMotion.js",
+    "./stores/usingKeyboard": "./stores/usingKeyboard.js",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",
     "./theme/applyTheme": "./theme/applyTheme.js",

package/stores/prefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare const prefersReducedMotion: import("svelte/store").Writable<boolean>;

package/stores/prefersReducedMotion.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+export const prefersReducedMotion = writable(false, (set) => {
+    const matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
+    set(matchMedia.matches);
+    const mediaChangeHandler = (e) => set(e.matches);
+    matchMedia.addEventListener('change', mediaChangeHandler);
+    return () => {
+        matchMedia.removeEventListener('change', mediaChangeHandler);
+    };
+});

package/stores/usingKeyboard.d.ts

@@ -0,0 +1 @@
+export declare const usingKeyboard: import("svelte/store").Writable<boolean>;

package/stores/usingKeyboard.js

@@ -0,0 +1,13 @@
+import { createKeyborg } from 'keyborg';
+import { writable } from 'svelte/store';
+export const usingKeyboard = writable(false, (set) => {
+    let keyborg = createKeyborg(window);
+    set(keyborg.isNavigatingWithKeyboard());
+    const keyborgHandler = (value) => {
+        set(value);
+    };
+    keyborg.subscribe(keyborgHandler);
+    return () => {
+        keyborg.unsubscribe(keyborgHandler);
+    };
+});