@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,488 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Dropdown.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=dropdown__menu>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=dropdown__menu data-slot=dropdown-menu>");
+const DropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const sortItemsByDomOrder = (items)=>[
+        ...items
+    ].sort((a, b)=>{
+        if (a.ref === b.ref) return 0;
+        const relation = a.ref.compareDocumentPosition(b.ref);
+        if (relation & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+        if (relation & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+        return 0;
+    });
+const DropdownRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "open",
+        "defaultOpen",
+        "onOpenChange",
+        "disabled",
+        "dataTheme",
+        "className",
+        "ref"
+    ]);
+    const baseId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const triggerId = `${baseId}-trigger`;
+    const menuId = `${baseId}-menu`;
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
+    const [items, setItems] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
+    const [focusedKey, setFocusedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    const [focusRequest, setFocusRequest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [triggerRef, setTriggerRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    const [rootRef, setRootRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    const isControlled = ()=>void 0 !== local.open;
+    const isDisabled = ()=>Boolean(local.disabled);
+    const open = ()=>isControlled() ? Boolean(local.open) : internalOpen();
+    const setRootRef = (el)=>{
+        setRootRefSignal(el);
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    const setTriggerRef = (el)=>{
+        setTriggerRefSignal(el);
+    };
+    const getEnabledItems = ()=>items().filter((item)=>!item.disabled);
+    const focusItem = (item)=>{
+        if (!item) return;
+        setFocusedKey(item.key);
+        item.ref.focus();
+    };
+    const focusBoundary = (target)=>{
+        const enabled = getEnabledItems();
+        if (!enabled.length) return;
+        focusItem("first" === target ? enabled[0] : enabled[enabled.length - 1]);
+    };
+    const focusNext = (direction)=>{
+        const enabled = getEnabledItems();
+        if (!enabled.length) return;
+        const active = document.activeElement;
+        let currentIndex = enabled.findIndex((item)=>item.ref === active);
+        if (currentIndex < 0) currentIndex = enabled.findIndex((item)=>item.key === focusedKey());
+        if (currentIndex < 0) return void focusItem(1 === direction ? enabled[0] : enabled[enabled.length - 1]);
+        const nextIndex = (currentIndex + direction + enabled.length) % enabled.length;
+        focusItem(enabled[nextIndex]);
+    };
+    const setOpen = (next, options)=>{
+        if (next && isDisabled()) return;
+        const current = open();
+        if (!isControlled()) setInternalOpen(next);
+        if (current !== next) local.onOpenChange?.(next);
+        if (!next) {
+            setFocusedKey(void 0);
+            setFocusRequest(null);
+            if (options?.focusTrigger) triggerRef()?.focus();
+        }
+    };
+    const toggleOpen = ()=>{
+        setOpen(!open());
+    };
+    const registerItem = (item)=>{
+        setItems((prev)=>sortItemsByDomOrder([
+                ...prev.filter((entry)=>entry.key !== item.key),
+                item
+            ]));
+        if (!item.disabled && void 0 === focusedKey()) setFocusedKey(item.key);
+    };
+    const unregisterItem = (key)=>{
+        setItems((prev)=>prev.filter((item)=>item.key !== key));
+        if (focusedKey() === key) setFocusedKey(void 0);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!open()) return;
+        const request = focusRequest();
+        if (!request) return;
+        focusBoundary("first" === request ? "first" : "last");
+        setFocusRequest(null);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const list = items();
+        const currentFocused = focusedKey();
+        if (currentFocused && !list.some((item)=>item.key === currentFocused)) return void setFocusedKey(void 0);
+        if (open() && !currentFocused) {
+            const firstEnabled = list.find((item)=>!item.disabled);
+            if (firstEnabled) setFocusedKey(firstEnabled.key);
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        const handlePointerDown = (event)=>{
+            if (!open()) return;
+            const root = rootRef();
+            if (!root) return;
+            if (root.contains(event.target)) return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+        });
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DropdownContext.Provider, {
+        value: {
+            open,
+            disabled: isDisabled,
+            triggerId,
+            menuId,
+            focusedKey,
+            setFocusedKey,
+            setOpen,
+            toggleOpen,
+            focusNext,
+            focusBoundary,
+            requestFocus: setFocusRequest,
+            registerItem,
+            unregisterItem,
+            setTriggerRef,
+            setRootRef
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRootRef, _el$);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown", local.class, local.className);
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "dropdown",
+                get ["data-open"] () {
+                    return open() ? "true" : "false";
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const DropdownTrigger = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "disabled",
+        "onClick",
+        "onKeyDown",
+        "ref",
+        "type"
+    ]);
+    if (!ctx) return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__trigger", local.class);
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+    const isDisabled = ()=>Boolean(local.disabled) || ctx.disabled();
+    const setRef = (el)=>{
+        ctx.setTriggerRef(el);
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        ctx.toggleOpen();
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        if ("ArrowDown" === event.key) {
+            event.preventDefault();
+            if (ctx.open()) ctx.focusNext(1);
+            else {
+                ctx.setOpen(true);
+                ctx.requestFocus("first");
+            }
+            return;
+        }
+        if ("ArrowUp" === event.key) {
+            event.preventDefault();
+            if (ctx.open()) ctx.focusNext(-1);
+            else {
+                ctx.setOpen(true);
+                ctx.requestFocus("last");
+            }
+            return;
+        }
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            if (ctx.open()) ctx.setOpen(false);
+            else ctx.setOpen(true);
+            return;
+        }
+        if ("Escape" === event.key && ctx.open()) {
+            event.preventDefault();
+            ctx.setOpen(false, {
+                focusTrigger: true
+            });
+        }
+    };
+    return (()=>{
+        var _el$3 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$3);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx.triggerId;
+            },
+            get type () {
+                return local.type ?? "button";
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__trigger", local.class);
+            },
+            "data-slot": "dropdown-trigger",
+            "aria-haspopup": "menu",
+            get ["aria-expanded"] () {
+                return ctx.open();
+            },
+            get ["aria-controls"] () {
+                return ctx.menuId;
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const DropdownMenu = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "align",
+        "sideOffset",
+        "onKeyDown",
+        "style",
+        "role"
+    ]);
+    if (!ctx) return (()=>{
+        var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__popover", local.class);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+        return _el$4;
+    })();
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        switch(event.key){
+            case "ArrowDown":
+                event.preventDefault();
+                ctx.focusNext(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                ctx.focusNext(-1);
+                break;
+            case "Home":
+                event.preventDefault();
+                ctx.focusBoundary("first");
+                break;
+            case "End":
+                event.preventDefault();
+                ctx.focusBoundary("last");
+                break;
+            case "Escape":
+                event.preventDefault();
+                ctx.setOpen(false, {
+                    focusTrigger: true
+                });
+                break;
+            case "Tab":
+                ctx.setOpen(false);
+                break;
+            default:
+                break;
+        }
+    };
+    const menuStyle = ()=>{
+        if ("string" == typeof local.style) return `${local.style}; --dropdown-offset: ${local.sideOffset ?? 6}px;`;
+        return {
+            ...local.style ?? {},
+            "--dropdown-offset": `${local.sideOffset ?? 6}px`
+        };
+    };
+    return (()=>{
+        var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx.menuId;
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__popover", local.class);
+            },
+            get role () {
+                return local.role ?? "menu";
+            },
+            "data-slot": "dropdown-popover",
+            get ["data-open"] () {
+                return ctx.open() ? "true" : "false";
+            },
+            get ["data-align"] () {
+                return local.align ?? "start";
+            },
+            get ["aria-hidden"] () {
+                return ctx.open() ? "false" : "true";
+            },
+            get style () {
+                return menuStyle();
+            },
+            onKeyDown: handleKeyDown
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$6;
+    })();
+};
+const DropdownItem = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "disabled",
+        "closeOnSelect",
+        "onClick",
+        "onMouseEnter",
+        "onFocus",
+        "ref",
+        "role",
+        "type"
+    ]);
+    const itemKey = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    let itemRef;
+    if (ctx) {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+            if (itemRef) ctx.registerItem({
+                key: itemKey,
+                ref: itemRef,
+                disabled: Boolean(local.disabled)
+            });
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            ctx.unregisterItem(itemKey);
+        });
+    }
+    const isDisabled = ()=>Boolean(local.disabled);
+    const setRef = (el)=>{
+        itemRef = el;
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        if (ctx && (local.closeOnSelect ?? true)) ctx.setOpen(false, {
+            focusTrigger: true
+        });
+    };
+    const handleMouseEnter = (event)=>{
+        invokeEventHandler(local.onMouseEnter, event);
+        if (event.defaultPrevented) return;
+        if (ctx && !isDisabled()) ctx.setFocusedKey(itemKey);
+    };
+    const handleFocus = (event)=>{
+        invokeEventHandler(local.onFocus, event);
+        if (event.defaultPrevented) return;
+        if (ctx && !isDisabled()) ctx.setFocusedKey(itemKey);
+    };
+    return (()=>{
+        var _el$8 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$8);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get type () {
+                return local.type ?? "button";
+            },
+            get role () {
+                return local.role ?? "menuitem";
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__item", local.class);
+            },
+            "data-slot": "menu-item",
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-focused"] () {
+                return ctx?.focusedKey() === itemKey ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            get tabIndex () {
+                return ctx ? ctx.open() && ctx.focusedKey() === itemKey ? 0 : -1 : 0;
+            },
+            onClick: handleClick,
+            onMouseEnter: handleMouseEnter,
+            onFocus: handleFocus
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const DropdownGroup = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "group",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__group", local.class);
+            },
+            "data-slot": "dropdown-group"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const DropdownSeparator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class"
+    ]);
+    return (()=>{
+        var _el$0 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "separator",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__separator", local.class);
+            },
+            "data-slot": "separator",
+            "aria-orientation": "horizontal"
+        }), false, false);
+        return _el$0;
+    })();
+};
+const Dropdown = Object.assign(DropdownRoot, {
+    Root: DropdownRoot,
+    Trigger: DropdownTrigger,
+    Menu: DropdownMenu,
+    Item: DropdownItem,
+    Group: DropdownGroup,
+    Separator: DropdownSeparator
+});
+export { Dropdown, DropdownGroup, DropdownItem, DropdownMenu, DropdownRoot, DropdownSeparator, DropdownTrigger, Dropdown as default };

package/dist/components/dropdown/index.d.ts

@@ -1,2 +1,2 @@
-import Dropdown from "./Dropdown";
-export default Dropdown;
+export { default, Dropdown } from "./Dropdown";
+export type { DropdownAlign, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, } from "./Dropdown";

package/dist/components/dropdown/index.js

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Dropdown_js_379094a4__ from "./Dropdown.js";
+var __webpack_exports__Dropdown = __WEBPACK_EXTERNAL_MODULE__Dropdown_js_379094a4__.Dropdown;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Dropdown_js_379094a4__["default"];
+export { __webpack_exports__Dropdown as Dropdown, __webpack_exports__default as default };

package/dist/components/dropdown-select/DropdownSelect.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+import type { ComponentSize, IComponentBaseProps } from "../types";
+export type DropdownSelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type DropdownSelectProps = IComponentBaseProps & {
+    options: DropdownSelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    showCheckmark?: boolean;
+    size?: ComponentSize;
+    "aria-label"?: string;
+    labelRenderer?: (value: string, option?: DropdownSelectOption) => JSX.Element;
+    optionRenderer?: (option: DropdownSelectOption, selected: boolean, highlighted: boolean) => JSX.Element;
+};
+declare const DropdownSelect: (props: DropdownSelectProps) => JSX.Element;
+export default DropdownSelect;