@openviking/react 0.1.1 → 0.1.2

package/dist/f~0.js

@@ -1,6 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
-const chevron_downinline_namespaceObject = "data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJpY29uLyYjMjI4OyYjMTg0OyYjMTM5OyYjMjMwOyYjMTM5OyYjMTM3OyYjMjMxOyYjMTc0OyYjMTczOyYjMjI5OyYjMTY0OyYjMTgwOyI+CjxwYXRoIGlkPSJWZWN0b3IgKFN0cm9rZSkiIGQ9Ik05LjYwNzM0IDUuMjMyMzRDOS43NzgxOSA1LjA2MTQ5IDEwLjA1NTEgNS4wNjE0OSAxMC4yMjYgNS4yMzIzNEMxMC4zOTY4IDUuNDAzMTkgMTAuMzk2OCA1LjY4MDE0IDEwLjIyNiA1Ljg1MDk5TDcuMzA5MzMgOC43Njc2NkM3LjEzODQ3IDguOTM4NTEgNi44NjE1MyA4LjkzODUxIDYuNjkwNjcgOC43Njc2NkwzLjc3NDAxIDUuODUwOTlDMy42MDMxNSA1LjY4MDE0IDMuNjAzMTUgNS40MDMxOSAzLjc3NDAxIDUuMjMyMzRDMy45NDQ4NiA1LjA2MTQ5IDQuMjIxODEgNS4wNjE0OSA0LjM5MjY2IDUuMjMyMzRMNyA3LjgzOTY4TDkuNjA3MzQgNS4yMzIzNFoiIGZpbGw9IiMzRjNGNTEiLz4KPC9nPgo8L3N2Zz4K";
+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',
@@ -18,61 +30,118 @@ function moveScopeFocus(event) {
     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 checkinline_namespaceObject = "data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJjaGVjayI+CjxwYXRoIGlkPSJJY29uIiBkPSJNMTMuMzMzMyA0TDYgMTEuMzMzM0wyLjY2NjY3IDgiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZT0iIzUyNTJGRiIvPgo8L2c+Cjwvc3ZnPgo=";
+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 index = text.toLocaleLowerCase().indexOf(keyword.toLocaleLowerCase());
-    if (!keyword || index < 0) return /*#__PURE__*/ jsx(Fragment, {
+    const needle = keyword.trim().toLocaleLowerCase();
+    if (!needle) return /*#__PURE__*/ jsx(Fragment, {
         children: text
     });
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            text.slice(0, index),
-            /*#__PURE__*/ jsx("mark", {
-                children: text.slice(index, index + keyword.length)
-            }),
-            text.slice(index + keyword.length)
-        ]
+    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({ level, labels }) {
+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 keyword = level.searchKeyword ?? '';
-    const searchVisible = level.onSearchKeywordChange && (keyword.length > 0 || Math.max(level.options.length, level.total ?? 0) > 10);
-    const search = searchVisible ? /*#__PURE__*/ jsx("input", {
-        type: "search",
-        className: "ov-scope-switcher__search",
-        value: keyword,
-        "aria-label": labels?.searchPlaceholder ?? 'Search',
-        placeholder: labels?.searchPlaceholder ?? 'Search',
-        onChange: (event)=>level.onSearchKeywordChange?.(event.currentTarget.value)
+    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 = level.loading ? /*#__PURE__*/ jsx("div", {
+    list = state?.loading ? /*#__PURE__*/ jsx("div", {
         className: "ov-scope-switcher__state",
         role: "status",
         children: labels?.loading ?? 'Loading…'
-    }) : level.error ? /*#__PURE__*/ jsx("div", {
+    }) : state?.error ? /*#__PURE__*/ jsx("div", {
         className: "ov-scope-switcher__state",
         role: "alert",
-        children: level.errorFallback ?? labels?.error ?? 'Unable to load options'
-    }) : level.options.length ? /*#__PURE__*/ jsx("div", {
+        children: slots?.errorFallback ?? labels?.error ?? 'Unable to load options'
+    }) : options.length ? /*#__PURE__*/ jsx("div", {
         className: "ov-scope-switcher__list",
         role: "listbox",
-        "aria-label": level.ariaLabel ?? level.selectedLabel,
-        "aria-busy": level.busy,
+        "aria-label": label,
+        "aria-busy": state?.busy,
         onScroll: (event)=>{
             const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
-            level.onScroll?.({
+            actions?.onScroll?.({
                 scrollTop,
                 scrollHeight,
                 clientHeight
             });
         },
-        children: level.options.map((option)=>{
-            const selected = option.id === level.selectedId;
+        children: options.map((option)=>{
+            const selected = option.id === data.selectedId;
             const content = /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     option.icon && /*#__PURE__*/ jsx("span", {
@@ -97,51 +166,48 @@ function ScopePanel({ level, labels }) {
                     selected && /*#__PURE__*/ jsx("span", {
                         className: "ov-scope-switcher__check",
                         "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsx("img", {
-                            src: checkinline_namespaceObject,
-                            alt: "",
-                            width: 16,
-                            height: 16
-                        })
+                        children: /*#__PURE__*/ jsx(checkreact, {})
                     })
                 ]
             });
             return /*#__PURE__*/ jsx("div", {
-                tabIndex: option.disabled || level.busy ? -1 : 0,
+                tabIndex: option.disabled || state?.busy ? -1 : 0,
                 role: "option",
                 "aria-selected": selected,
                 className: "ov-scope-switcher__option",
                 title: option.label,
-                "aria-disabled": option.disabled || level.busy || void 0,
+                "aria-disabled": option.disabled || state?.busy || void 0,
                 onClick: (event)=>{
                     const target = event.target;
-                    if (option.disabled || level.busy || target.closest('button, a, input, select, textarea, [role="button"]')) return;
-                    level.onSelect?.(option);
+                    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 || level.busy) return;
+                    if (event.target !== event.currentTarget || option.disabled || state?.busy) return;
                     if ('Enter' === event.key || ' ' === event.key) {
                         event.preventDefault();
-                        level.onSelect?.(option);
+                        onSelect(option);
                     }
                 },
-                children: level.renderOption ? level.renderOption(content, option) : content
+                children: slots?.renderOption ? slots?.renderOption(content, option) : content
             }, option.id);
         })
     }, keyword) : /*#__PURE__*/ jsx("div", {
         className: "ov-scope-switcher__state",
         role: "status",
-        children: level.emptyFallback ?? (keyword ? labels?.noMatch ?? labels?.empty ?? 'No matches' : labels?.empty ?? 'No options')
+        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: level.renderPanel ? level.renderPanel({
+        children: slots?.renderPanel ? slots?.renderPanel({
             search,
             list
-        }) : /*#__PURE__*/ jsxs(Fragment, {
+        }) : /*#__PURE__*/ jsxs("div", {
+            className: "ov-scope-switcher__panel-body",
             children: [
                 search,
                 list
@@ -149,14 +215,20 @@ function ScopePanel({ level, labels }) {
         })
     });
 }
-function ScopeSelector({ level, labels }) {
+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 = 'selectable' === level.kind && (level.visible ?? localVisible) && !level.disabled;
-    const onVisibleChange = 'selectable' === level.kind ? level.onVisibleChange : void 0;
+    const open = void 0 !== selectable && (state?.visible ?? localVisible) && !state?.disabled;
+    const onVisibleChange = actions?.onVisibleChange;
     const changeVisible = useCallback((visible)=>{
         setLocalVisible(visible);
         onVisibleChange?.(visible);
@@ -192,20 +264,23 @@ function ScopeSelector({ level, labels }) {
     }, [
         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: [
-            level.icon && /*#__PURE__*/ jsx("span", {
+            icon && /*#__PURE__*/ jsx("span", {
                 className: "ov-scope-switcher__icon",
                 "aria-hidden": "true",
-                children: level.icon
+                children: icon
             }),
             /*#__PURE__*/ jsx("span", {
                 className: "ov-scope-switcher__label",
-                children: level.selectedLabel
+                children: label
             }),
-            level.tag && /*#__PURE__*/ jsx("span", {
+            identity.tag && /*#__PURE__*/ jsx("span", {
                 className: "ov-scope-switcher__tag",
-                children: level.tag
+                children: identity.tag
             })
         ]
     });
@@ -217,18 +292,18 @@ function ScopeSelector({ level, labels }) {
             if (open && event.relatedTarget instanceof Node && !event.currentTarget.contains(event.relatedTarget)) changeVisible(false);
         },
         children: [
-            'fixed' === level.kind ? /*#__PURE__*/ jsx("span", {
+            void 0 === selectable ? /*#__PURE__*/ jsx("span", {
                 className: "ov-scope-switcher__trigger",
-                "aria-label": level.ariaLabel,
-                title: level.selectedLabel,
+                "aria-label": identity.ariaLabel,
+                title: label,
                 children: content
             }) : /*#__PURE__*/ jsxs("button", {
                 ref: trigger,
                 type: "button",
                 className: "ov-scope-switcher__trigger",
-                "aria-label": level.ariaLabel,
-                title: level.selectedLabel,
-                disabled: level.disabled,
+                "aria-label": identity.ariaLabel,
+                title: label,
+                disabled: state?.disabled,
                 "aria-expanded": open,
                 "aria-haspopup": "dialog",
                 "aria-controls": open ? panelId : void 0,
@@ -245,28 +320,25 @@ function ScopeSelector({ level, labels }) {
                     /*#__PURE__*/ jsx("span", {
                         className: "ov-scope-switcher__arrow",
                         "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsx("img", {
-                            src: chevron_downinline_namespaceObject,
-                            alt: "",
-                            width: 14,
-                            height: 14
-                        })
+                        children: /*#__PURE__*/ jsx(chevron_downreact, {})
                     })
                 ]
             }),
-            open && 'selectable' === level.kind && /*#__PURE__*/ jsx("div", {
+            open && void 0 !== selectable && void 0 !== data && /*#__PURE__*/ jsx("div", {
                 id: panelId,
-                className: "ov-scope-switcher__panel",
+                className: slots?.renderPanel ? 'ov-scope-switcher__panel ov-scope-switcher__panel--custom' : 'ov-scope-switcher__panel',
                 role: "dialog",
-                "aria-label": level.ariaLabel ?? level.selectedLabel,
+                "aria-label": identity.ariaLabel ?? label,
                 children: /*#__PURE__*/ jsx(ScopePanel, {
-                    level: {
-                        ...level,
-                        onSelect: (option)=>{
-                            restoreSelectionFocus.current = true;
-                            changeVisible(false);
-                            level.onSelect?.(option);
-                        }
+                    label: identity.ariaLabel ?? label,
+                    data: data,
+                    state: state,
+                    slots: slots,
+                    actions: actions,
+                    onSelect: (option)=>{
+                        restoreSelectionFocus.current = true;
+                        changeVisible(false);
+                        actions?.onSelect?.(option);
                     },
                     labels: labels
                 })