@pathscale/ui 1.3.0 → 1.4.0

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

@@ -1,44 +0,0 @@
-import "./Dropdown.css";
-import { type JSX } from "solid-js";
-import { type OverlayPlacement } from "../_shared/overlayPosition";
-type DropdownAlign = "start" | "end";
-type DropdownPlacement = OverlayPlacement;
-type DropdownRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & {
-    children: JSX.Element;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    placement?: DropdownPlacement;
-    autoFlip?: boolean;
-    disabled?: boolean;
-    dataTheme?: string;
-    className?: string;
-};
-declare const DropdownRoot: (props: DropdownRootProps) => JSX.Element;
-type DropdownTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-declare const DropdownTrigger: (props: DropdownTriggerProps) => JSX.Element;
-type DropdownMenuProps = JSX.HTMLAttributes<HTMLDivElement> & {
-    align?: DropdownAlign;
-    placement?: DropdownPlacement;
-    autoFlip?: boolean;
-    sideOffset?: number;
-};
-declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
-type DropdownItemProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
-    closeOnSelect?: boolean;
-};
-declare const DropdownItem: (props: DropdownItemProps) => JSX.Element;
-type DropdownGroupProps = JSX.HTMLAttributes<HTMLDivElement>;
-declare const DropdownGroup: (props: DropdownGroupProps) => JSX.Element;
-type DropdownSeparatorProps = JSX.HTMLAttributes<HTMLDivElement>;
-declare const DropdownSeparator: (props: DropdownSeparatorProps) => JSX.Element;
-declare const Dropdown: ((props: DropdownRootProps) => JSX.Element) & {
-    Root: (props: DropdownRootProps) => JSX.Element;
-    Trigger: (props: DropdownTriggerProps) => JSX.Element;
-    Menu: (props: DropdownMenuProps) => JSX.Element;
-    Item: (props: DropdownItemProps) => JSX.Element;
-    Group: (props: DropdownGroupProps) => JSX.Element;
-    Separator: (props: DropdownSeparatorProps) => JSX.Element;
-};
-export { Dropdown as default, Dropdown, DropdownRoot, DropdownTrigger, DropdownMenu, DropdownItem, DropdownGroup, DropdownSeparator, };
-export type { DropdownAlign, DropdownPlacement, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, };

package/dist/components/dropdown/Dropdown.js

@@ -1,538 +0,0 @@
-import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-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 } from "./Dropdown.classes.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 DropdownRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 DropdownTrigger = (props)=>{
-    const ctx = useContext(DropdownContext);
-    const [local, others] = splitProps(props, [
-        "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 DropdownMenu = (props)=>{
-    const ctx = useContext(DropdownContext);
-    const [local, others] = splitProps(props, [
-        "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 DropdownItem = (props)=>{
-    const ctx = useContext(DropdownContext);
-    const [local, others] = splitProps(props, [
-        "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 DropdownGroup = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 DropdownSeparator = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 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/empty-state/EmptyState.classes.d.ts

@@ -1,9 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "empty-state";
-    readonly slot: {
-        readonly icon: "empty-state__icon";
-        readonly title: "empty-state__title";
-        readonly description: "empty-state__description";
-        readonly actions: "empty-state__actions";
-    };
-};

package/dist/components/empty-state/EmptyState.classes.js

@@ -1,10 +0,0 @@
-const CLASSES = {
-    base: "empty-state",
-    slot: {
-        icon: "empty-state__icon",
-        title: "empty-state__title",
-        description: "empty-state__description",
-        actions: "empty-state__actions"
-    }
-};
-export { CLASSES };

package/dist/components/empty-state/EmptyState.d.ts

@@ -1,32 +0,0 @@
-import "./EmptyState.css";
-import { type Component, type JSX, type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type EmptyStateRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type EmptyStateIconProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type EmptyStateTitleProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type EmptyStateDescriptionProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type EmptyStateActionsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-declare const EmptyStateRoot: ParentComponent<EmptyStateRootProps>;
-declare const EmptyStateIcon: Component<EmptyStateIconProps>;
-declare const EmptyStateTitle: ParentComponent<EmptyStateTitleProps>;
-declare const EmptyStateDescription: ParentComponent<EmptyStateDescriptionProps>;
-declare const EmptyStateActions: ParentComponent<EmptyStateActionsProps>;
-declare const EmptyState: ParentComponent<EmptyStateRootProps> & {
-    Root: ParentComponent<EmptyStateRootProps>;
-    Icon: Component<EmptyStateIconProps>;
-    Title: ParentComponent<EmptyStateTitleProps>;
-    Description: ParentComponent<EmptyStateDescriptionProps>;
-    Actions: ParentComponent<EmptyStateActionsProps>;
-};
-export default EmptyState;
-export { EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions };