@geoffcox/sterling-svelte 2.0.0 → 2.0.2

package/actions/forwardEvents.d.ts

@@ -1,12 +0,0 @@
-export declare const forwardEvents: (node: HTMLElement, params: {
-    target: HTMLElement;
-    events?: string[];
-    customEvents?: string[];
-}) => {
-    update: (params: {
-        target: HTMLElement;
-        events?: string[];
-        customEvents?: [];
-    }) => void;
-    destroy(): void;
-};

package/actions/forwardEvents.js

@@ -1,32 +0,0 @@
-export const forwardEvents = (node, params) => {
-    const addListeners = (node, target, events, customEvents) => {
-        let forward = (event) => {
-            target.dispatchEvent(event);
-        };
-        let forwardCustom = (event) => {
-            const customEvent = event;
-            target.dispatchEvent(new CustomEvent(customEvent.type, {
-                bubbles: customEvent.bubbles,
-                cancelable: customEvent.cancelable,
-                detail: customEvent.detail
-            }));
-        };
-        events?.forEach((e) => node.addEventListener(e, forward));
-        customEvents?.forEach((e) => node.addEventListener(e, forwardCustom));
-        return () => {
-            events?.forEach((e) => node.removeEventListener(e, forward));
-            customEvents?.forEach((e) => node.removeEventListener(e, forwardCustom));
-        };
-    };
-    let unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
-    const update = (params) => {
-        unsubscribe();
-        unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
-    };
-    return {
-        update,
-        destroy() {
-            unsubscribe();
-        }
-    };
-};

package/actions/portal.d.ts

@@ -1,8 +0,0 @@
-export declare const portal: (node: HTMLElement, params: {
-    target?: HTMLElement;
-}) => {
-    update: (params: {
-        target?: HTMLElement;
-    }) => void;
-    destroy(): void;
-};

package/actions/portal.js

@@ -1,19 +0,0 @@
-export const portal = (node, params) => {
-    const child = node;
-    let portaled = false;
-    const createPortal = (node, params) => {
-        if (!portaled && params.target && node) {
-            params.target.appendChild(node);
-            portaled = true;
-        }
-    };
-    createPortal(child, params);
-    return {
-        update: (params) => createPortal(child, params),
-        destroy() {
-            if (portaled) {
-                child?.parentNode?.removeChild(child);
-            }
-        }
-    };
-};

package/actions/trapKeyboardFocus.d.ts

@@ -1,3 +0,0 @@
-export declare const trapKeyboardFocus: (node: HTMLElement) => {
-    destroy: () => void;
-};

package/actions/trapKeyboardFocus.js

@@ -1,52 +0,0 @@
-const getFirstFocusable = (node) => {
-    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
-    // but do default to tabIndex >= 0.
-    const nodes = node.querySelectorAll('*');
-    const elements = Array.from(nodes)
-        .map((n) => n)
-        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
-    return elements.length > 0 ? elements[0] : null;
-};
-const getLastFocusable = (node) => {
-    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
-    // but do default to tabIndex >= 0.
-    const nodes = node.querySelectorAll('*');
-    const elements = Array.from(nodes)
-        .map((n) => n)
-        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
-    return elements.length > 0 ? elements[elements.length - 1] : null;
-};
-export const trapKeyboardFocus = (node) => {
-    const onKeydown = (e) => {
-        let handledFocus = false;
-        if (e.key === 'Tab') {
-            if (e.shiftKey) {
-                const firstFocusable = getFirstFocusable(node);
-                if (document.activeElement === firstFocusable) {
-                    const lastFocusable = getLastFocusable(node);
-                    lastFocusable?.focus();
-                    handledFocus = true;
-                }
-            }
-            else {
-                const lastFocusable = getLastFocusable(node);
-                if (document.activeElement === lastFocusable) {
-                    const firstFocusable = getFirstFocusable(node);
-                    firstFocusable?.focus();
-                    handledFocus = true;
-                }
-            }
-        }
-        if (handledFocus) {
-            e.stopPropagation();
-            e.preventDefault();
-            return false;
-        }
-    };
-    node.addEventListener('keydown', onKeydown);
-    return {
-        destroy: () => {
-            node.removeEventListener('keydown', onKeydown);
-        }
-    };
-};

package/idGenerator.d.ts

@@ -1,4 +0,0 @@
-export declare const idGenerator: {
-    next: () => number;
-    nextId: (prefix?: string) => string;
-};

package/idGenerator.js

@@ -1,10 +0,0 @@
-let id = 0;
-const next = () => {
-    return ++id;
-};
-export const idGenerator = {
-    next,
-    nextId: (prefix) => {
-        return prefix ? `${prefix}-${next()}` : `${next()}`;
-    }
-};

package/index.d.ts

@@ -1,59 +0,0 @@
-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';
-export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
-export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-export { usingKeyboard } from './mediaQueries/usingKeyboard';
-export { idGenerator } from './idGenerator';
-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 { 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 { 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_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';
-export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
-import Button from './Button.svelte';
-import Callout from './Callout.svelte';
-import Checkbox from './Checkbox.svelte';
-import Dialog from './Dialog.svelte';
-import Dropdown from './Dropdown.svelte';
-import Label from './Label.svelte';
-import Input from './Input.svelte';
-import Link from './Link.svelte';
-import List from './List.svelte';
-import ListItem from './ListItem.svelte';
-import Menu from './Menu.svelte';
-import MenuBar from './MenuBar.svelte';
-import MenuButton from './MenuButton.svelte';
-import MenuItem from './MenuItem.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';
-import Slider from './Slider.svelte';
-import Switch from './Switch.svelte';
-import Tab from './Tab.svelte';
-import TabList from './TabList.svelte';
-import TextArea from './TextArea.svelte';
-import Tooltip from './Tooltip.svelte';
-import Tree from './Tree.svelte';
-import TreeChevron from './TreeChevron.svelte';
-import TreeItem from './TreeItem.svelte';
-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/index.js

@@ -1,54 +0,0 @@
-// ----- 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';
-// ----- media queries ----- //
-export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
-export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-export { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- functions ----- //
-export { idGenerator } from './idGenerator';
-// ----- Component 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_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';
-export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
-// ----- Components ----- //
-import Button from './Button.svelte';
-import Callout from './Callout.svelte';
-import Checkbox from './Checkbox.svelte';
-import Dialog from './Dialog.svelte';
-import Dropdown from './Dropdown.svelte';
-import Label from './Label.svelte';
-import Input from './Input.svelte';
-import Link from './Link.svelte';
-import List from './List.svelte';
-import ListItem from './ListItem.svelte';
-import Menu from './Menu.svelte';
-import MenuBar from './MenuBar.svelte';
-import MenuButton from './MenuButton.svelte';
-import MenuItem from './MenuItem.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';
-import Slider from './Slider.svelte';
-import Switch from './Switch.svelte';
-import Tab from './Tab.svelte';
-import TabList from './TabList.svelte';
-import TextArea from './TextArea.svelte';
-import Tooltip from './Tooltip.svelte';
-import Tree from './Tree.svelte';
-import TreeChevron from './TreeChevron.svelte';
-import TreeItem from './TreeItem.svelte';
-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/mediaQueries/prefersColorSchemeDark.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="svelte" />
-export declare const prefersColorSchemeDark: import("svelte/store").Writable<boolean>;

package/mediaQueries/prefersColorSchemeDark.js

@@ -1,14 +0,0 @@
-import { onMount } from 'svelte';
-import { writable } from 'svelte/store';
-export const prefersColorSchemeDark = writable(false, (set) => {
-    let matchMedia = undefined;
-    const mediaChangeHandler = (e) => set(e.matches);
-    onMount(() => {
-        matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
-        set(matchMedia.matches);
-        matchMedia.addEventListener('change', mediaChangeHandler);
-    });
-    return () => {
-        matchMedia?.removeEventListener('change', mediaChangeHandler);
-    };
-});

package/mediaQueries/prefersReducedMotion.d.ts

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

package/mediaQueries/prefersReducedMotion.js

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

package/mediaQueries/usingKeyboard.d.ts

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

package/mediaQueries/usingKeyboard.js

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