@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/dropdown/Dropdown.generated.js

@@ -0,0 +1,569 @@
+import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Dropdown.css";
+import { Show, createContext, createEffect, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createOverlayPosition } from "../_shared/overlayPosition.js";
+import { CLASSES, componentRecipe } from "./Dropdown.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div>");
+const DropdownContext = 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 __solidLayoutDropdownRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "open",
+        "defaultOpen",
+        "onOpenChange",
+        "placement",
+        "autoFlip",
+        "disabled",
+        "dataTheme",
+        "className",
+        "ref"
+    ]);
+    const baseId = createUniqueId();
+    const triggerId = `${baseId}-trigger`;
+    const menuId = `${baseId}-menu`;
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const [items, setItems] = createSignal([]);
+    const [focusedKey, setFocusedKey] = createSignal(void 0);
+    const [focusRequest, setFocusRequest] = createSignal(null);
+    const [triggerRef, setTriggerRefSignal] = createSignal(void 0);
+    const [menuRef, setMenuRefSignal] = createSignal(void 0);
+    const [rootRef, setRootRefSignal] = createSignal(void 0);
+    const isControlled = ()=>void 0 !== local.open;
+    const isDisabled = ()=>Boolean(local.disabled);
+    const open = ()=>isControlled() ? Boolean(local.open) : internalOpen();
+    const placement = ()=>local.placement ?? "bottom";
+    const autoFlip = ()=>local.autoFlip ?? true;
+    const setRootRef = (el)=>{
+        setRootRefSignal(el);
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    const setTriggerRef = (el)=>{
+        setTriggerRefSignal(el);
+    };
+    const setMenuRef = (el)=>{
+        setMenuRefSignal(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);
+    };
+    createEffect(()=>{
+        if (!open()) return;
+        const request = focusRequest();
+        if (!request) return;
+        focusBoundary("first" === request ? "first" : "last");
+        setFocusRequest(null);
+    });
+    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);
+        }
+    });
+    onMount(()=>{
+        const handlePointerDown = (event)=>{
+            if (!open()) return;
+            const target = event.target;
+            if (rootRef()?.contains(target)) return;
+            if (menuRef()?.contains(target)) return;
+            if (triggerRef()?.contains(target)) return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        onCleanup(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+        });
+    });
+    return createComponent(DropdownContext.Provider, {
+        value: {
+            open,
+            disabled: isDisabled,
+            triggerId,
+            menuId,
+            placement,
+            autoFlip,
+            triggerRef,
+            menuRef,
+            focusedKey,
+            setFocusedKey,
+            setOpen,
+            toggleOpen,
+            focusNext,
+            focusBoundary,
+            requestFocus: setFocusRequest,
+            registerItem,
+            unregisterItem,
+            setTriggerRef,
+            setMenuRef,
+            setRootRef
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            use(setRootRef, _el$);
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.base, local.class, local.className)
+                }), {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "dropdown",
+                get ["data-open"] () {
+                    return open() ? "true" : "false";
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const DropdownRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDropdownRoot,
+    embedded: true
+});
+const __solidLayoutDropdownTrigger = (_stable, p)=>{
+    const ctx = useContext(DropdownContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "children",
+        "disabled",
+        "onClick",
+        "onKeyDown",
+        "ref",
+        "type"
+    ]);
+    if (!ctx) return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.trigger, local.class)
+            }), {
+            get type () {
+                return local.type ?? "button";
+            }
+        }), false, true);
+        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();
+        use(setRef, _el$3);
+        spread(_el$3, mergeProps(others, {
+            get id () {
+                return ctx.triggerId;
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.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);
+        insert(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const DropdownTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDropdownTrigger,
+    embedded: true
+});
+const __solidLayoutDropdownMenu = (_stable, p)=>{
+    const ctx = useContext(DropdownContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "children",
+        "align",
+        "placement",
+        "autoFlip",
+        "sideOffset",
+        "onKeyDown",
+        "style",
+        "role"
+    ]);
+    if (!ctx) return (()=>{
+        var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+        spread(_el$4, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.popover, local.class)
+            })), false, true);
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.slot.menu
+            })), false, true);
+        insert(_el$5, ()=>local.children);
+        return _el$4;
+    })();
+    const overlayPosition = createOverlayPosition({
+        open: ctx.open,
+        triggerRef: ctx.triggerRef,
+        overlayRef: ctx.menuRef,
+        placement: ()=>local.placement ?? ctx.placement(),
+        offset: ()=>local.sideOffset ?? 6,
+        autoFlip: ()=>local.autoFlip ?? ctx.autoFlip(),
+        align: ()=>"end" === local.align ? "end" : "start"
+    });
+    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 = ()=>{
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
+        return {
+            ...local.style ?? {},
+            ...overlayStyle
+        };
+    };
+    return createComponent(Show, {
+        get when () {
+            return ctx.open();
+        },
+        get children () {
+            return createComponent(Portal, {
+                get children () {
+                    var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+                    var _ref$ = ctx.setMenuRef;
+                    "function" == typeof _ref$ ? use(_ref$, _el$6) : ctx.setMenuRef = _el$6;
+                    spread(_el$6, mergeProps(others, {
+                        get id () {
+                            return ctx.menuId;
+                        }
+                    }, ()=>({
+                            class: twMerge(CLASSES.slot.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 ["data-placement"] () {
+                            return overlayPosition.placement();
+                        },
+                        get ["aria-hidden"] () {
+                            return ctx.open() ? "false" : "true";
+                        },
+                        get style () {
+                            return menuStyle();
+                        },
+                        onKeyDown: handleKeyDown
+                    }), false, true);
+                    spread(_el$7, mergeProps(()=>({
+                            class: CLASSES.slot.menu
+                        }), {
+                        "data-slot": "dropdown-menu"
+                    }), false, true);
+                    insert(_el$7, ()=>local.children);
+                    return _el$6;
+                }
+            });
+        }
+    });
+};
+const DropdownMenu = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDropdownMenu,
+    embedded: true
+});
+const __solidLayoutDropdownItem = (_stable, p)=>{
+    const ctx = useContext(DropdownContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "children",
+        "disabled",
+        "closeOnSelect",
+        "onClick",
+        "onMouseEnter",
+        "onFocus",
+        "ref",
+        "role",
+        "type"
+    ]);
+    const itemKey = createUniqueId();
+    let itemRef;
+    if (ctx) {
+        onMount(()=>{
+            if (itemRef) ctx.registerItem({
+                key: itemKey,
+                ref: itemRef,
+                disabled: Boolean(local.disabled)
+            });
+        });
+        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();
+        use(setRef, _el$8);
+        spread(_el$8, mergeProps(others, {
+            get type () {
+                return local.type ?? "button";
+            },
+            get role () {
+                return local.role ?? "menuitem";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.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);
+        insert(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const DropdownItem = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDropdownItem,
+    embedded: true
+});
+const __solidLayoutDropdownGroup = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class",
+        "children"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$();
+        spread(_el$9, mergeProps(others, {
+            role: "group"
+        }, ()=>({
+                class: twMerge(CLASSES.slot.group, local.class)
+            }), {
+            "data-slot": "dropdown-group"
+        }), false, true);
+        insert(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const DropdownGroup = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDropdownGroup,
+    embedded: true
+});
+const __solidLayoutDropdownSeparator = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class"
+    ]);
+    return (()=>{
+        var _el$0 = _tmpl$();
+        spread(_el$0, mergeProps(others, {
+            role: "separator"
+        }, ()=>({
+                class: twMerge(CLASSES.slot.separator, local.class)
+            }), {
+            "data-slot": "separator",
+            "aria-orientation": "horizontal"
+        }), false, false);
+        return _el$0;
+    })();
+};
+const DropdownSeparator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDropdownSeparator,
+    embedded: true
+});
+const Dropdown = Object.assign(DropdownRoot, {
+    Root: DropdownRoot,
+    Trigger: DropdownTrigger,
+    Menu: DropdownMenu,
+    Item: DropdownItem,
+    Group: DropdownGroup,
+    Separator: DropdownSeparator
+});
+export default Dropdown;
+export { Dropdown, DropdownGroup, DropdownItem, DropdownMenu, DropdownRoot, DropdownSeparator, DropdownTrigger };

package/dist/components/dropdown/Dropdown.recipe.d.ts

@@ -0,0 +1,24 @@
+export declare const CLASSES: {
+    readonly base: "dropdown";
+    readonly slot: {
+        readonly trigger: "dropdown__trigger";
+        readonly popover: "dropdown__popover";
+        readonly menu: "dropdown__menu";
+        readonly item: "dropdown__item";
+        readonly group: "dropdown__group";
+        readonly separator: "dropdown__separator";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "dropdown";
+    readonly slots: {
+        readonly dropdown: {};
+        readonly "dropdown-group": {};
+        readonly "dropdown-menu": {};
+        readonly "dropdown-popover": {};
+        readonly "dropdown-trigger": {};
+        readonly "menu-item": {};
+        readonly root: {};
+        readonly separator: {};
+    };
+}>;

package/dist/components/dropdown/Dropdown.recipe.js

@@ -0,0 +1,73 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "dropdown",
+    slot: {
+        trigger: "dropdown__trigger",
+        popover: "dropdown__popover",
+        menu: "dropdown__menu",
+        item: "dropdown__item",
+        group: "dropdown__group",
+        separator: "dropdown__separator"
+    }
+};
+const componentRecipe = recipe({
+    component: "dropdown",
+    slots: {
+        dropdown: {},
+        "dropdown-group": {},
+        "dropdown-menu": {},
+        "dropdown-popover": {},
+        "dropdown-trigger": {},
+        "menu-item": {},
+        root: {},
+        separator: {}
+    },
+    _layouts: {
+        slots: {
+            dropdown: {
+                base: "",
+                axes: {}
+            },
+            "dropdown-group": {
+                base: "",
+                axes: {}
+            },
+            "dropdown-menu": {
+                base: "",
+                axes: {}
+            },
+            "dropdown-popover": {
+                base: "",
+                axes: {}
+            },
+            "dropdown-trigger": {
+                base: "",
+                axes: {}
+            },
+            "menu-item": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            },
+            separator: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            dropdown: 0,
+            "dropdown-group": 1,
+            "dropdown-menu": 2,
+            "dropdown-popover": 3,
+            "dropdown-trigger": 4,
+            "menu-item": 5,
+            root: 6,
+            separator: 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

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

package/dist/components/dropdown/index.js

@@ -1,3 +1 @@
-import { Dropdown as external_Dropdown_js_Dropdown } from "./Dropdown.js";
-export default external_Dropdown_js_Dropdown;
-export { external_Dropdown_js_Dropdown as Dropdown };
+export { Dropdown, default } from "./Dropdown.generated.js";