@cratis/components 4.23.0 → 4.24.0

package/dist/esm/IconPicker/useGridColumns.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+const defaultGridColumns = 4;
+const useGridColumns = (grid) => {
+    const [columns, setColumns] = useState(defaultGridColumns);
+    useEffect(() => {
+        const element = grid.current;
+        if (!element || typeof ResizeObserver === 'undefined')
+            return;
+        const measure = () => {
+            const tracks = getComputedStyle(element)
+                .gridTemplateColumns.split(' ')
+                .filter(track => track.endsWith('px')).length;
+            if (tracks > 0)
+                setColumns(tracks);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [grid]);
+    return columns;
+};
+
+export { defaultGridColumns, useGridColumns };
+//# sourceMappingURL=useGridColumns.js.map

package/dist/esm/IconPicker/useGridColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridColumns.js","sources":["../../../IconPicker/useGridColumns.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useState, type RefObject } from 'react';\n\n/** How many columns a grid is assumed to have until it has been measured. */\nexport const defaultGridColumns = 4;\n\n/**\n * Counts the columns a CSS grid currently lays out, so Up and Down can move a whole row. The browser\n * resolves `repeat(auto-fill, …)` into real tracks, so the count is read back from the grid's computed\n * style whenever it resizes. Environments that cannot lay out - or measure - a grid keep the default.\n * @param grid The grid element.\n * @returns The grid's column count.\n */\nexport const useGridColumns = (grid: RefObject<HTMLElement | null>): number => {\n    const [columns, setColumns] = useState(defaultGridColumns);\n\n    useEffect(() => {\n        const element = grid.current;\n        if (!element || typeof ResizeObserver === 'undefined') return;\n        const measure = () => {\n            const tracks = getComputedStyle(element)\n                .gridTemplateColumns.split(' ')\n                .filter(track => track.endsWith('px')).length;\n            if (tracks > 0) setColumns(tracks);\n        };\n        measure();\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [grid]);\n\n    return columns;\n};\n"],"names":[],"mappings":";;AAMO,MAAM,kBAAkB,GAAG;AAS3B,MAAM,cAAc,GAAG,CAAC,IAAmC,KAAY;IAC1E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC;IAE1D,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;AAC5B,QAAA,IAAI,CAAC,OAAO,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE;QACvD,MAAM,OAAO,GAAG,MAAK;AACjB,YAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO;AAClC,iBAAA,mBAAmB,CAAC,KAAK,CAAC,GAAG;AAC7B,iBAAA,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;YACjD,IAAI,MAAM,GAAG,CAAC;gBAAE,UAAU,CAAC,MAAM,CAAC;AACtC,QAAA,CAAC;AACD,QAAA,OAAO,EAAE;AACT,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC;AAC5C,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;AACzB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AAEV,IAAA,OAAO,OAAO;AAClB;;"}

package/dist/esm/IconPicker/useIconPickerBrowser.d.ts

@@ -0,0 +1,10 @@
+import type { IconPickerBrowser } from './IconPickerBrowser.js';
+import type { IconPickerEntry } from './IconPickerEntry.js';
+/**
+ * Holds the popout's search and filters and derives what they show. The search index is built once
+ * per catalog; typing only filters it, so a large library stays responsive.
+ * @param icons The catalog's icons.
+ * @returns What to show, and the controls that change it.
+ */
+export declare const useIconPickerBrowser: (icons: readonly IconPickerEntry[]) => IconPickerBrowser;
+//# sourceMappingURL=useIconPickerBrowser.d.ts.map

package/dist/esm/IconPicker/useIconPickerBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconPickerBrowser.d.ts","sourceRoot":"","sources":["../../../IconPicker/useIconPickerBrowser.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AAKzD;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UAAW,SAAS,eAAe,EAAE,KAAG,iBAyCxE,CAAC"}

package/dist/esm/IconPicker/useIconPickerBrowser.js

@@ -0,0 +1,45 @@
+import { useState, useMemo } from 'react';
+import { createIconPickerIndex } from './createIconPickerIndex.js';
+import { groupIconPickerByCategory } from './groupIconPickerByCategory.js';
+import { searchIconPickerIndex } from './searchIconPickerIndex.js';
+
+const useIconPickerBrowser = (icons) => {
+    const [query, setQuery] = useState('');
+    const [category, setCategory] = useState();
+    const [library, setLibrary] = useState();
+    const index = useMemo(() => createIconPickerIndex(icons), [icons]);
+    return useMemo(() => {
+        const inLibrary = library === undefined ? index : index.filter(candidate => candidate.entry.library === library);
+        const searched = searchIconPickerIndex(inLibrary, query.trim());
+        const categories = groupIconPickerByCategory(searched);
+        const matchesCategory = category === undefined
+            ? searched
+            : searched.filter(candidate => category === ''
+                ? candidate.entry.categories.length === 0
+                : candidate.entry.categories.includes(category));
+        const matches = matchesCategory.map(candidate => candidate.entry);
+        const isFiltered = query.trim() !== '' || category !== undefined || library !== undefined;
+        return {
+            query,
+            setQuery,
+            category,
+            setCategory,
+            library,
+            setLibrary,
+            reset: () => {
+                setQuery('');
+                setCategory(undefined);
+                setLibrary(undefined);
+            },
+            isFiltered,
+            categories,
+            matchCount: matches.length,
+            matches,
+            groups: categories,
+            isGrouped: query.trim() === '' && category === undefined,
+        };
+    }, [index, query, category, library]);
+};
+
+export { useIconPickerBrowser };
+//# sourceMappingURL=useIconPickerBrowser.js.map

package/dist/esm/IconPicker/useIconPickerBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconPickerBrowser.js","sources":["../../../IconPicker/useIconPickerBrowser.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo, useState } from 'react';\nimport type { IconPickerBrowser } from './IconPickerBrowser';\nimport type { IconPickerEntry } from './IconPickerEntry';\nimport { createIconPickerIndex } from './createIconPickerIndex';\nimport { groupIconPickerByCategory } from './groupIconPickerByCategory';\nimport { searchIconPickerIndex } from './searchIconPickerIndex';\n\n/**\n * Holds the popout's search and filters and derives what they show. The search index is built once\n * per catalog; typing only filters it, so a large library stays responsive.\n * @param icons The catalog's icons.\n * @returns What to show, and the controls that change it.\n */\nexport const useIconPickerBrowser = (icons: readonly IconPickerEntry[]): IconPickerBrowser => {\n    const [query, setQuery] = useState('');\n    const [category, setCategory] = useState<string | undefined>();\n    const [library, setLibrary] = useState<string | undefined>();\n    const index = useMemo(() => createIconPickerIndex(icons), [icons]);\n\n    return useMemo(() => {\n        const inLibrary = library === undefined ? index : index.filter(candidate => candidate.entry.library === library);\n        const searched = searchIconPickerIndex(inLibrary, query.trim());\n        const categories = groupIconPickerByCategory(searched);\n        const matchesCategory =\n            category === undefined\n                ? searched\n                : searched.filter(candidate =>\n                      category === ''\n                          ? candidate.entry.categories.length === 0\n                          : candidate.entry.categories.includes(category),\n                  );\n        const matches = matchesCategory.map(candidate => candidate.entry);\n        const isFiltered = query.trim() !== '' || category !== undefined || library !== undefined;\n\n        return {\n            query,\n            setQuery,\n            category,\n            setCategory,\n            library,\n            setLibrary,\n            reset: () => {\n                setQuery('');\n                setCategory(undefined);\n                setLibrary(undefined);\n            },\n            isFiltered,\n            categories,\n            matchCount: matches.length,\n            matches,\n            groups: categories,\n            isGrouped: query.trim() === '' && category === undefined,\n        };\n    }, [index, query, category, library]);\n};\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,oBAAoB,GAAG,CAAC,KAAiC,KAAuB;IACzF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAsB;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAsB;AAC5D,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,qBAAqB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAElE,OAAO,OAAO,CAAC,MAAK;AAChB,QAAA,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC;QAChH,MAAM,QAAQ,GAAG,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;AAC/D,QAAA,MAAM,UAAU,GAAG,yBAAyB,CAAC,QAAQ,CAAC;AACtD,QAAA,MAAM,eAAe,GACjB,QAAQ,KAAK;AACT,cAAE;cACA,QAAQ,CAAC,MAAM,CAAC,SAAS,IACrB,QAAQ,KAAK;kBACP,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,KAAK;AACxC,kBAAE,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CACtD;AACX,QAAA,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC;AACjE,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,QAAQ,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAEzF,OAAO;YACH,KAAK;YACL,QAAQ;YACR,QAAQ;YACR,WAAW;YACX,OAAO;YACP,UAAU;YACV,KAAK,EAAE,MAAK;gBACR,QAAQ,CAAC,EAAE,CAAC;gBACZ,WAAW,CAAC,SAAS,CAAC;gBACtB,UAAU,CAAC,SAAS,CAAC;YACzB,CAAC;YACD,UAAU;YACV,UAAU;YACV,UAAU,EAAE,OAAO,CAAC,MAAM;YAC1B,OAAO;AACP,YAAA,MAAM,EAAE,UAAU;YAClB,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,QAAQ,KAAK,SAAS;SAC3D;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACzC;;"}

package/dist/esm/IconPicker/useIsVisible.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Reports whether an element has come near the viewport, and stays true once it has - a preview that
+ * has been drawn is kept rather than torn down when scrolled away. Environments without
+ * `IntersectionObserver` treat everything as visible.
+ * @param margin How far outside the viewport counts as near, as a CSS margin.
+ * @returns A ref to put on the element, and whether it has been near the viewport.
+ */
+export declare const useIsVisible: (margin?: string) => {
+    ref: (element: HTMLElement | null) => void;
+    isVisible: boolean;
+};
+//# sourceMappingURL=useIsVisible.d.ts.map

package/dist/esm/IconPicker/useIsVisible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsVisible.d.ts","sourceRoot":"","sources":["../../../IconPicker/useIsVisible.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;mBAOP,WAAW,GAAG,IAAI;;CAkBnC,CAAC"}

package/dist/esm/IconPicker/useIsVisible.js

@@ -0,0 +1,23 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+const useIsVisible = (margin = '160px') => {
+    const [isVisible, setIsVisible] = useState(typeof IntersectionObserver === 'undefined');
+    const observer = useRef(undefined);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const ref = useCallback((element) => {
+        observer.current?.disconnect();
+        if (!element || isVisible || typeof IntersectionObserver === 'undefined')
+            return;
+        observer.current = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+                setIsVisible(true);
+                observer.current?.disconnect();
+            }
+        }, { rootMargin: margin });
+        observer.current.observe(element);
+    }, [isVisible, margin]);
+    return { ref, isVisible };
+};
+
+export { useIsVisible };
+//# sourceMappingURL=useIsVisible.js.map

package/dist/esm/IconPicker/useIsVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsVisible.js","sources":["../../../IconPicker/useIsVisible.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Reports whether an element has come near the viewport, and stays true once it has - a preview that\n * has been drawn is kept rather than torn down when scrolled away. Environments without\n * `IntersectionObserver` treat everything as visible.\n * @param margin How far outside the viewport counts as near, as a CSS margin.\n * @returns A ref to put on the element, and whether it has been near the viewport.\n */\nexport const useIsVisible = (margin = '160px') => {\n    const [isVisible, setIsVisible] = useState(typeof IntersectionObserver === 'undefined');\n    const observer = useRef<IntersectionObserver | undefined>(undefined);\n\n    useEffect(() => () => observer.current?.disconnect(), []);\n\n    const ref = useCallback(\n        (element: HTMLElement | null) => {\n            observer.current?.disconnect();\n            if (!element || isVisible || typeof IntersectionObserver === 'undefined') return;\n            observer.current = new IntersectionObserver(\n                entries => {\n                    if (entries.some(entry => entry.isIntersecting)) {\n                        setIsVisible(true);\n                        observer.current?.disconnect();\n                    }\n                },\n                { rootMargin: margin },\n            );\n            observer.current.observe(element);\n        },\n        [isVisible, margin],\n    );\n\n    return { ref, isVisible };\n};\n"],"names":[],"mappings":";;MAYa,YAAY,GAAG,CAAC,MAAM,GAAG,OAAO,KAAI;AAC7C,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,OAAO,oBAAoB,KAAK,WAAW,CAAC;AACvF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmC,SAAS,CAAC;AAEpE,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAEzD,IAAA,MAAM,GAAG,GAAG,WAAW,CACnB,CAAC,OAA2B,KAAI;AAC5B,QAAA,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE;QAC9B,IAAI,CAAC,OAAO,IAAI,SAAS,IAAI,OAAO,oBAAoB,KAAK,WAAW;YAAE;QAC1E,QAAQ,CAAC,OAAO,GAAG,IAAI,oBAAoB,CACvC,OAAO,IAAG;AACN,YAAA,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,EAAE;gBAC7C,YAAY,CAAC,IAAI,CAAC;AAClB,gBAAA,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE;YAClC;AACJ,QAAA,CAAC,EACD,EAAE,UAAU,EAAE,MAAM,EAAE,CACzB;AACD,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;AACrC,IAAA,CAAC,EACD,CAAC,SAAS,EAAE,MAAM,CAAC,CACtB;AAED,IAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE;AAC7B;;"}

package/dist/esm/IconPicker/useNarrowViewport.d.ts

@@ -0,0 +1,9 @@
+/** Viewports at most this wide show the popout as a contained sheet rather than anchored to the trigger. */
+export declare const narrowViewportQuery = "(max-width: 30rem)";
+/**
+ * Whether the viewport is narrow enough that the popout should be a sheet. Server rendering and
+ * environments without `matchMedia` are never narrow.
+ * @returns True on a narrow viewport.
+ */
+export declare const useNarrowViewport: () => boolean;
+//# sourceMappingURL=useNarrowViewport.d.ts.map

package/dist/esm/IconPicker/useNarrowViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNarrowViewport.d.ts","sourceRoot":"","sources":["../../../IconPicker/useNarrowViewport.ts"],"names":[],"mappings":"AAKA,4GAA4G;AAC5G,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AAYxD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAO,OAA6D,CAAC"}

package/dist/esm/IconPicker/useNarrowViewport.js

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from 'react';
+
+const narrowViewportQuery = '(max-width: 30rem)';
+const subscribe = (notify) => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+        return () => undefined;
+    const query = window.matchMedia(narrowViewportQuery);
+    query.addEventListener('change', notify);
+    return () => query.removeEventListener('change', notify);
+};
+const read = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(narrowViewportQuery).matches;
+const useNarrowViewport = () => useSyncExternalStore(subscribe, read, () => false);
+
+export { narrowViewportQuery, useNarrowViewport };
+//# sourceMappingURL=useNarrowViewport.js.map

package/dist/esm/IconPicker/useNarrowViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNarrowViewport.js","sources":["../../../IconPicker/useNarrowViewport.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useSyncExternalStore } from 'react';\n\n/** Viewports at most this wide show the popout as a contained sheet rather than anchored to the trigger. */\nexport const narrowViewportQuery = '(max-width: 30rem)';\n\nconst subscribe = (notify: () => void) => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return () => undefined;\n    const query = window.matchMedia(narrowViewportQuery);\n    query.addEventListener('change', notify);\n    return () => query.removeEventListener('change', notify);\n};\n\nconst read = () =>\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(narrowViewportQuery).matches;\n\n/**\n * Whether the viewport is narrow enough that the popout should be a sheet. Server rendering and\n * environments without `matchMedia` are never narrow.\n * @returns True on a narrow viewport.\n */\nexport const useNarrowViewport = (): boolean => useSyncExternalStore(subscribe, read, () => false);\n"],"names":[],"mappings":";;AAMO,MAAM,mBAAmB,GAAG;AAEnC,MAAM,SAAS,GAAG,CAAC,MAAkB,KAAI;IACrC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;AAAE,QAAA,OAAO,MAAM,SAAS;IACpG,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC;AACpD,IAAA,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;IACxC,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC5D,CAAC;AAED,MAAM,IAAI,GAAG,MACT,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO;AAOvH,MAAM,iBAAiB,GAAG,MAAe,oBAAoB,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,KAAK;;"}

package/dist/esm/IconPicker/useRovingFocus.d.ts

@@ -0,0 +1,29 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+/** What {@link useRovingFocus} hands to the container and each item. */
+export interface RovingFocus {
+    /** The container the items live in. */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** Moves focus between items; put on the container. */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * The props of the item at an index: its tab stop, its index marker, and the focus handler that
+     * keeps the tab stop where focus last was.
+     * @param index The item's index.
+     */
+    itemProps: (index: number) => {
+        tabIndex: number;
+        onFocus: () => void;
+        [attribute: `data-${string}`]: number;
+    };
+}
+/**
+ * A roving tab stop over a row or grid of items: one item is reachable with Tab, and the arrow keys,
+ * Home and End move focus among the rest. Items are located through their `data-roving-index`
+ * attribute, so they can be any element.
+ * @param count How many items there are.
+ * @param columns How many items make a row. Zero for a single row, where only Left/Right move focus.
+ * @param preferredIndex The item to make the tab stop when focus has not moved yet, such as the selection.
+ * @returns What to put on the container and on each item.
+ */
+export declare const useRovingFocus: (count: number, columns: number, preferredIndex?: number) => RovingFocus;
+//# sourceMappingURL=useRovingFocus.d.ts.map

package/dist/esm/IconPicker/useRovingFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingFocus.d.ts","sourceRoot":"","sources":["../../../IconPicker/useRovingFocus.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQxF,wEAAwE;AACxE,MAAM,WAAW,WAAW;IACxB,uCAAuC;IACvC,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAE/C,uDAAuD;IACvD,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;OAIG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAC1B,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,CAAC,SAAS,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACzC,CAAC;CACL;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,UAAW,MAAM,WAAW,MAAM,8BAAuB,WA6DnF,CAAC"}

package/dist/esm/IconPicker/useRovingFocus.js

@@ -0,0 +1,70 @@
+import { useRef, useState, useEffect } from 'react';
+
+const itemAttribute = 'data-roving-index';
+const isRightToLeft = (element) => getComputedStyle(element).direction === 'rtl' || element.closest('[dir="rtl"]') !== null;
+const useRovingFocus = (count, columns, preferredIndex = 0) => {
+    const containerRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState();
+    const tabStop = focusedIndex !== undefined && focusedIndex < count ? focusedIndex : Math.min(Math.max(preferredIndex, 0), Math.max(count - 1, 0));
+    useEffect(() => {
+        if (focusedIndex !== undefined && focusedIndex >= count)
+            setFocusedIndex(undefined);
+    }, [count, focusedIndex]);
+    const focusItem = (index) => {
+        const target = containerRef.current?.querySelector(`[${itemAttribute}="${index}"]`);
+        if (!target)
+            return;
+        setFocusedIndex(index);
+        target.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const current = event.target.closest(`[${itemAttribute}]`);
+        if (!current || !containerRef.current?.contains(current))
+            return;
+        const index = Number(current.getAttribute(itemAttribute));
+        const step = columns > 0 ? columns : 0;
+        const forward = isRightToLeft(containerRef.current) ? 'ArrowLeft' : 'ArrowRight';
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowLeft':
+                next = event.key === forward ? index + 1 : index - 1;
+                break;
+            case 'ArrowDown':
+                if (step > 0)
+                    next = index + step;
+                break;
+            case 'ArrowUp':
+                if (step > 0)
+                    next = index - step;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = count - 1;
+                break;
+            default:
+                return;
+        }
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        if (next >= 0 && next < count)
+            focusItem(next);
+    };
+    return {
+        containerRef,
+        onKeyDown,
+        itemProps: index => ({
+            tabIndex: index === tabStop ? 0 : -1,
+            onFocus: () => setFocusedIndex(index),
+            [itemAttribute]: index,
+        }),
+    };
+};
+
+export { useRovingFocus };
+//# sourceMappingURL=useRovingFocus.js.map

package/dist/esm/IconPicker/useRovingFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingFocus.js","sources":["../../../IconPicker/useRovingFocus.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useRef, useState, type KeyboardEvent, type RefObject } from 'react';\n\n/** The attribute every roving item carries, holding its index. */\nconst itemAttribute = 'data-roving-index';\n\nconst isRightToLeft = (element: HTMLElement) =>\n    getComputedStyle(element).direction === 'rtl' || element.closest('[dir=\"rtl\"]') !== null;\n\n/** What {@link useRovingFocus} hands to the container and each item. */\nexport interface RovingFocus {\n    /** The container the items live in. */\n    containerRef: RefObject<HTMLDivElement | null>;\n\n    /** Moves focus between items; put on the container. */\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n\n    /**\n     * The props of the item at an index: its tab stop, its index marker, and the focus handler that\n     * keeps the tab stop where focus last was.\n     * @param index The item's index.\n     */\n    itemProps: (index: number) => {\n        tabIndex: number;\n        onFocus: () => void;\n        [attribute: `data-${string}`]: number;\n    };\n}\n\n/**\n * A roving tab stop over a row or grid of items: one item is reachable with Tab, and the arrow keys,\n * Home and End move focus among the rest. Items are located through their `data-roving-index`\n * attribute, so they can be any element.\n * @param count How many items there are.\n * @param columns How many items make a row. Zero for a single row, where only Left/Right move focus.\n * @param preferredIndex The item to make the tab stop when focus has not moved yet, such as the selection.\n * @returns What to put on the container and on each item.\n */\nexport const useRovingFocus = (count: number, columns: number, preferredIndex = 0): RovingFocus => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [focusedIndex, setFocusedIndex] = useState<number | undefined>();\n\n    // The tab stop falls back to the preferred item when the focused one is no longer in the list.\n    const tabStop = focusedIndex !== undefined && focusedIndex < count ? focusedIndex : Math.min(Math.max(preferredIndex, 0), Math.max(count - 1, 0));\n\n    useEffect(() => {\n        if (focusedIndex !== undefined && focusedIndex >= count) setFocusedIndex(undefined);\n    }, [count, focusedIndex]);\n\n    const focusItem = (index: number) => {\n        const target = containerRef.current?.querySelector<HTMLElement>(`[${itemAttribute}=\"${index}\"]`);\n        if (!target) return;\n        setFocusedIndex(index);\n        target.focus();\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n        if (event.altKey || event.ctrlKey || event.metaKey) return;\n        const current = (event.target as HTMLElement).closest<HTMLElement>(`[${itemAttribute}]`);\n        if (!current || !containerRef.current?.contains(current)) return;\n        const index = Number(current.getAttribute(itemAttribute));\n        const step = columns > 0 ? columns : 0;\n        // Right and Left name visual directions, so they swap places in a right-to-left layout.\n        const forward = isRightToLeft(containerRef.current) ? 'ArrowLeft' : 'ArrowRight';\n        let next: number | undefined;\n        switch (event.key) {\n            case 'ArrowRight':\n            case 'ArrowLeft':\n                next = event.key === forward ? index + 1 : index - 1;\n                break;\n            case 'ArrowDown':\n                if (step > 0) next = index + step;\n                break;\n            case 'ArrowUp':\n                if (step > 0) next = index - step;\n                break;\n            case 'Home':\n                next = 0;\n                break;\n            case 'End':\n                next = count - 1;\n                break;\n            default:\n                return;\n        }\n        if (next === undefined) return;\n        event.preventDefault();\n        if (next >= 0 && next < count) focusItem(next);\n    };\n\n    return {\n        containerRef,\n        onKeyDown,\n        itemProps: index => ({\n            tabIndex: index === tabStop ? 0 : -1,\n            onFocus: () => setFocusedIndex(index),\n            [itemAttribute]: index,\n        }),\n    };\n};\n"],"names":[],"mappings":"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"}