@openviking/react 0.1.0 → 0.1.2

package/dist/f~0.js

@@ -0,0 +1,356 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+const SvgChevronDown = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 14,
+        height: 14,
+        fill: "none",
+        viewBox: "0 0 14 14",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            d: "M9.607 5.232a.437.437 0 1 1 .619.619L7.309 8.768a.437.437 0 0 1-.618 0L3.774 5.85a.437.437 0 1 1 .619-.619L7 7.84z"
+        })
+    });
+const chevron_downreact = SvgChevronDown;
+function moveScopeFocus(event) {
+    if (![
+        'ArrowDown',
+        'ArrowUp',
+        'Home',
+        'End'
+    ].includes(event.key)) return;
+    const target = event.target;
+    const isSearch = target.matches('input.ov-scope-switcher__search');
+    if (event.defaultPrevented || !target.matches('[role="option"]') && !isSearch || isSearch && !event.key.startsWith('Arrow')) return;
+    const options = Array.from(event.currentTarget.querySelectorAll('[role="option"]:not([aria-disabled="true"])'));
+    if (!options.length) return;
+    event.preventDefault();
+    const current = options.indexOf(document.activeElement);
+    const next = 'Home' === event.key ? 0 : 'End' === event.key ? options.length - 1 : 'ArrowDown' === event.key ? (current + 1) % options.length : current < 0 ? options.length - 1 : (current - 1 + options.length) % options.length;
+    options[next]?.focus();
+}
+const SvgCheck = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.2,
+            d: "M13.333 4 6 11.333 2.667 8"
+        })
+    });
+const checkreact = SvgCheck;
+const SvgSearch = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ jsxs("g", {
+            stroke: "currentColor",
+            strokeWidth: 1.2,
+            children: [
+                /*#__PURE__*/ jsx("circle", {
+                    cx: 7.167,
+                    cy: 7.167,
+                    r: 4.667
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    strokeLinecap: "round",
+                    d: "m10.667 10.667 3 3"
+                })
+            ]
+        })
+    });
+const searchreact = SvgSearch;
+function Highlight({ text, keyword }) {
+    const needle = keyword.trim().toLocaleLowerCase();
+    if (!needle) return /*#__PURE__*/ jsx(Fragment, {
+        children: text
+    });
+    const haystack = text.toLocaleLowerCase();
+    const parts = [];
+    let cursor = 0;
+    let hit = haystack.indexOf(needle);
+    while(hit >= 0){
+        if (hit > cursor) parts.push(text.slice(cursor, hit));
+        const end = hit + needle.length;
+        parts.push(/*#__PURE__*/ jsx("mark", {
+            children: text.slice(hit, end)
+        }, `${hit}-${end}`));
+        cursor = end;
+        hit = haystack.indexOf(needle, cursor);
+    }
+    if (cursor < text.length) parts.push(text.slice(cursor));
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: parts
+    });
+}
+function ScopePanel({ label, data, state, slots, actions, onSelect, labels }) {
+    const focusPanel = useCallback((node)=>{
+        const target = node?.querySelector('input') ?? node?.querySelector('[role="option"][aria-selected="true"]:not([aria-disabled="true"])') ?? node?.querySelector('[role="option"]:not([aria-disabled="true"])');
+        (target ?? node)?.focus();
+    }, []);
+    const options = data.visibleOptions ?? data.options;
+    const keyword = state?.searchKeyword ?? '';
+    const hasKeyword = keyword.trim().length > 0;
+    const searchVisible = actions?.onSearchKeywordChange && (hasKeyword || Math.max(options.length, data.options.length, data.total ?? 0) > 10);
+    const search = searchVisible ? /*#__PURE__*/ jsxs("div", {
+        className: "ov-scope-switcher__search-field",
+        children: [
+            /*#__PURE__*/ jsx(searchreact, {
+                className: "ov-scope-switcher__search-icon"
+            }),
+            /*#__PURE__*/ jsx("input", {
+                type: "search",
+                className: "ov-scope-switcher__search",
+                value: keyword,
+                "aria-label": labels?.searchPlaceholder ?? 'Search',
+                placeholder: labels?.searchPlaceholder ?? 'Search',
+                onChange: (event)=>actions?.onSearchKeywordChange?.(event.currentTarget.value)
+            })
+        ]
+    }) : null;
+    let list;
+    list = state?.loading ? /*#__PURE__*/ jsx("div", {
+        className: "ov-scope-switcher__state",
+        role: "status",
+        children: labels?.loading ?? 'Loading…'
+    }) : state?.error ? /*#__PURE__*/ jsx("div", {
+        className: "ov-scope-switcher__state",
+        role: "alert",
+        children: slots?.errorFallback ?? labels?.error ?? 'Unable to load options'
+    }) : options.length ? /*#__PURE__*/ jsx("div", {
+        className: "ov-scope-switcher__list",
+        role: "listbox",
+        "aria-label": label,
+        "aria-busy": state?.busy,
+        onScroll: (event)=>{
+            const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+            actions?.onScroll?.({
+                scrollTop,
+                scrollHeight,
+                clientHeight
+            });
+        },
+        children: options.map((option)=>{
+            const selected = option.id === data.selectedId;
+            const content = /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    option.icon && /*#__PURE__*/ jsx("span", {
+                        className: "ov-scope-switcher__icon",
+                        "aria-hidden": "true",
+                        children: option.icon
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: "ov-scope-switcher__option-text",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                children: /*#__PURE__*/ jsx(Highlight, {
+                                    text: option.label,
+                                    keyword: keyword
+                                })
+                            }),
+                            option.description && /*#__PURE__*/ jsx("small", {
+                                children: option.description
+                            })
+                        ]
+                    }),
+                    selected && /*#__PURE__*/ jsx("span", {
+                        className: "ov-scope-switcher__check",
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx(checkreact, {})
+                    })
+                ]
+            });
+            return /*#__PURE__*/ jsx("div", {
+                tabIndex: option.disabled || state?.busy ? -1 : 0,
+                role: "option",
+                "aria-selected": selected,
+                className: "ov-scope-switcher__option",
+                title: option.label,
+                "aria-disabled": option.disabled || state?.busy || void 0,
+                onClick: (event)=>{
+                    const target = event.target;
+                    if (option.disabled || state?.busy || target.closest('button, a, input, select, textarea, [role="button"]')) return;
+                    onSelect(option);
+                },
+                onKeyDown: (event)=>{
+                    if (event.target !== event.currentTarget || option.disabled || state?.busy) return;
+                    if ('Enter' === event.key || ' ' === event.key) {
+                        event.preventDefault();
+                        onSelect(option);
+                    }
+                },
+                children: slots?.renderOption ? slots?.renderOption(content, option) : content
+            }, option.id);
+        })
+    }, keyword) : /*#__PURE__*/ jsx("div", {
+        className: "ov-scope-switcher__state",
+        role: "status",
+        children: slots?.emptyFallback ?? (hasKeyword ? labels?.noMatch ?? labels?.empty ?? 'No matches' : labels?.empty ?? 'No options')
+    });
+    return /*#__PURE__*/ jsx("div", {
+        role: "group",
+        tabIndex: -1,
+        ref: focusPanel,
+        className: "ov-scope-switcher__panel-inner",
+        onKeyDownCapture: moveScopeFocus,
+        children: slots?.renderPanel ? slots?.renderPanel({
+            search,
+            list
+        }) : /*#__PURE__*/ jsxs("div", {
+            className: "ov-scope-switcher__panel-body",
+            children: [
+                search,
+                list
+            ]
+        })
+    });
+}
+function ScopeSelector(props) {
+    const { identity, trigger: triggerContent, labels } = props;
+    const selectable = 'selectable' === props.kind ? props : void 0;
+    const data = selectable?.data;
+    const state = selectable?.state;
+    const actions = selectable?.actions;
+    const slots = selectable?.slots;
+    const [localVisible, setLocalVisible] = useState(false);
+    const root = useRef(null);
+    const trigger = useRef(null);
+    const restoreSelectionFocus = useRef(false);
+    const panelId = useId();
+    const open = void 0 !== selectable && (state?.visible ?? localVisible) && !state?.disabled;
+    const onVisibleChange = actions?.onVisibleChange;
+    const changeVisible = useCallback((visible)=>{
+        setLocalVisible(visible);
+        onVisibleChange?.(visible);
+    }, [
+        onVisibleChange
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const dismiss = (event)=>{
+            if (event.target instanceof Node && !root.current?.contains(event.target)) changeVisible(false);
+        };
+        const escape = (event)=>{
+            if ('Escape' === event.key) {
+                event.preventDefault();
+                changeVisible(false);
+                trigger.current?.focus();
+            }
+        };
+        document.addEventListener('pointerdown', dismiss);
+        document.addEventListener('keydown', escape);
+        return ()=>{
+            document.removeEventListener('pointerdown', dismiss);
+            document.removeEventListener('keydown', escape);
+        };
+    }, [
+        open,
+        changeVisible
+    ]);
+    useEffect(()=>{
+        if (open || !restoreSelectionFocus.current) return;
+        restoreSelectionFocus.current = false;
+        if (document.activeElement === document.body || root.current?.contains(document.activeElement)) trigger.current?.focus();
+    }, [
+        open
+    ]);
+    const selected = data?.options.find((o)=>o.id === data.selectedId);
+    const label = triggerContent?.label ?? selected?.label ?? '';
+    const icon = triggerContent?.icon ?? selected?.icon;
+    const content = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            icon && /*#__PURE__*/ jsx("span", {
+                className: "ov-scope-switcher__icon",
+                "aria-hidden": "true",
+                children: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "ov-scope-switcher__label",
+                children: label
+            }),
+            identity.tag && /*#__PURE__*/ jsx("span", {
+                className: "ov-scope-switcher__tag",
+                children: identity.tag
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ref: root,
+        role: "group",
+        className: "ov-scope-switcher__level",
+        onBlur: (event)=>{
+            if (open && event.relatedTarget instanceof Node && !event.currentTarget.contains(event.relatedTarget)) changeVisible(false);
+        },
+        children: [
+            void 0 === selectable ? /*#__PURE__*/ jsx("span", {
+                className: "ov-scope-switcher__trigger",
+                "aria-label": identity.ariaLabel,
+                title: label,
+                children: content
+            }) : /*#__PURE__*/ jsxs("button", {
+                ref: trigger,
+                type: "button",
+                className: "ov-scope-switcher__trigger",
+                "aria-label": identity.ariaLabel,
+                title: label,
+                disabled: state?.disabled,
+                "aria-expanded": open,
+                "aria-haspopup": "dialog",
+                "aria-controls": open ? panelId : void 0,
+                onClick: ()=>changeVisible(!open),
+                onKeyDown: (event)=>{
+                    if ('ArrowDown' === event.key || 'ArrowUp' === event.key) {
+                        event.preventDefault();
+                        if (open) root.current?.querySelector('[role="option"]:not([aria-disabled="true"])')?.focus();
+                        else changeVisible(true);
+                    }
+                },
+                children: [
+                    content,
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-scope-switcher__arrow",
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx(chevron_downreact, {})
+                    })
+                ]
+            }),
+            open && void 0 !== selectable && void 0 !== data && /*#__PURE__*/ jsx("div", {
+                id: panelId,
+                className: slots?.renderPanel ? 'ov-scope-switcher__panel ov-scope-switcher__panel--custom' : 'ov-scope-switcher__panel',
+                role: "dialog",
+                "aria-label": identity.ariaLabel ?? label,
+                children: /*#__PURE__*/ jsx(ScopePanel, {
+                    label: identity.ariaLabel ?? label,
+                    data: data,
+                    state: state,
+                    slots: slots,
+                    actions: actions,
+                    onSelect: (option)=>{
+                        restoreSelectionFocus.current = true;
+                        changeVisible(false);
+                        actions?.onSelect?.(option);
+                    },
+                    labels: labels
+                })
+            })
+        ]
+    });
+}
+function ScopeSwitcher({ children, className = '', ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: `ov-scope-switcher ${className}`,
+        children: children
+    });
+}
+export { ScopeSelector, ScopeSwitcher };