@techsio/ui-kit 0.42.0 → 0.44.0

package/dist/molecules/cascade-select.js

@@ -0,0 +1,508 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, createElement, useContext, useEffect, useId, useMemo, useState } from "react";
+import { collection as cascade_select_collection, connect, machine } from "@zag-js/cascade-select";
+import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
+import { tv } from "../utils.js";
+const toControlSize = (size)=>"xs" === size ? "sm" : size;
+const controlGlyphClass = {
+    sm: "text-icon-control-sm",
+    md: "text-icon-control-md",
+    lg: "text-icon-control-lg"
+};
+const cascadeSelectVariants = tv({
+    slots: {
+        root: "relative flex w-full flex-col gap-cascade-select",
+        control: "relative flex w-full items-center justify-between",
+        positioner: "isolate",
+        trigger: [
+            "form-control-base group w-full",
+            "flex items-center justify-between gap-0",
+            "border-cascade-select-trigger-border",
+            "text-left font-normal",
+            "hover:border-cascade-select-trigger-border-hover",
+            "hover:bg-cascade-select-trigger-bg-hover",
+            "focus:border-cascade-select-trigger-border-focus",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-cascade-select-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-disabled:cursor-not-allowed",
+            "data-disabled:border-cascade-select-border-disabled",
+            "data-disabled:bg-cascade-select-bg-disabled",
+            "data-disabled:text-cascade-select-fg-disabled",
+            "data-[validation=error]:border-(length:--border-width-validation)",
+            "data-[validation=error]:border-cascade-select-border-error data-[validation=error]:outline-cascade-select-border-error",
+            "data-[validation=error]:outline-(style:--default-ring-style) data-[validation=error]:outline-(length:--default-ring-width)",
+            "data-[validation=error]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=success]:border-(length:--border-width-validation)",
+            "data-[validation=success]:border-cascade-select-border-success data-[validation=success]:outline-cascade-select-border-success",
+            "data-[validation=success]:outline-(style:--default-ring-style) data-[validation=success]:outline-(length:--default-ring-width)",
+            "data-[validation=success]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=warning]:border-(length:--border-width-validation)",
+            "data-[validation=warning]:border-cascade-select-border-warning data-[validation=warning]:outline-cascade-select-border-warning",
+            "data-[validation=warning]:outline-(style:--default-ring-style) data-[validation=warning]:outline-(length:--default-ring-width)",
+            "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        clearTrigger: "-translate-y-1/2 absolute top-1/2 right-cascade-select-right data-readonly:hidden",
+        content: [
+            "popup-surface-base flex w-max min-w-(--reference-width) max-w-(--available-width) overflow-x-auto",
+            "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",
+            "transition-discrete",
+            "starting:scale-98 starting:opacity-0",
+            "data-[state=open]:starting:scale-98 data-[state=open]:starting:opacity-0",
+            "data-[state=open]:scale-100 data-[state=open]:opacity-100",
+            "data-[state=closed]:scale-98 data-[state=closed]:opacity-0"
+        ],
+        list: "min-w-cascade-select-column grow basis-0",
+        item: [
+            "popup-item-base",
+            "hover:bg-popup-item-bg-hover",
+            "data-highlighted:bg-popup-item-bg-hover",
+            "data-[state=checked]:bg-popup-item-bg-selected",
+            "data-[state=checked]:text-popup-item-fg-selected",
+            "data-disabled:cursor-not-allowed data-disabled:text-popup-item-fg-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        itemText: "min-w-0 flex-grow truncate",
+        branchIndicator: [
+            "last:-me-(--size-popup-indicator) flex size-(--size-popup-indicator) shrink-0 items-center justify-center",
+            "rtl:rotate-180"
+        ],
+        itemIndicator: [
+            "last:-me-(--size-popup-indicator) flex size-(--size-popup-indicator) shrink-0 items-center justify-center",
+            "text-popup-item-fg-selected"
+        ],
+        valueText: [
+            "min-w-0 flex-grow truncate font-normal",
+            "data-placeholder:text-cascade-select-placeholder"
+        ],
+        indicator: [
+            "shrink-0 text-cascade-select-trigger-fg-base group-hover:text-cascade-select-trigger-fg-hover",
+            "data-[state=open]:rotate-180",
+            "motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none"
+        ]
+    },
+    variants: {
+        size: {
+            xs: {
+                trigger: "p-cascade-select-trigger-sm text-cascade-select-trigger-xs",
+                content: "popup-size-xs text-cascade-select-item-xs",
+                valueText: "text-cascade-select-value-xs"
+            },
+            sm: {
+                trigger: "h-form-control-sm rounded-cascade-select-sm p-cascade-select-trigger-sm text-cascade-select-trigger-sm",
+                content: "popup-size-sm text-cascade-select-item-sm",
+                valueText: "text-cascade-select-value-sm"
+            },
+            md: {
+                trigger: "h-form-control-md rounded-cascade-select-md p-cascade-select-trigger-md text-cascade-select-trigger-md",
+                content: "popup-size-md text-cascade-select-item-md",
+                valueText: "text-cascade-select-value-md"
+            },
+            lg: {
+                trigger: "p-cascade-select-trigger-md text-cascade-select-trigger-lg",
+                content: "popup-size-lg text-cascade-select-item-lg",
+                valueText: "text-cascade-select-value-lg"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const pathsMatch = (api, selectedItems)=>selectedItems.length === api.value.length && selectedItems.every((items, pathIndex)=>items.length === api.value[pathIndex]?.length && items.every((item, itemIndex)=>api.collection.getNodeValue(item) === api.value[pathIndex]?.[itemIndex]));
+const resolveSelectedItems = (api)=>{
+    if (pathsMatch(api, api.selectedItems)) return api.selectedItems;
+    return api.value.map((valuePath)=>{
+        const indexPath = api.collection.getIndexPath(valuePath);
+        return indexPath.map((_, index)=>api.collection.at(indexPath.slice(0, index + 1))).filter((item)=>void 0 !== item);
+    });
+};
+const formatSelectedItems = (api, selectedItems)=>{
+    const stringify = (item)=>api.collection.stringifyNode(item) ?? api.collection.getNodeValue(item);
+    if (api.multiple) return selectedItems.map((path)=>path.at(-1)).filter((item)=>void 0 !== item).map(stringify).join(", ");
+    return selectedItems.map((path)=>path.map(stringify).join(" / ")).join(", ");
+};
+const CascadeSelectContext = /*#__PURE__*/ createContext(null);
+const CascadeSelectItemContext = /*#__PURE__*/ createContext(null);
+function useCascadeSelectContext() {
+    const context = useContext(CascadeSelectContext);
+    if (!context) throw new Error("CascadeSelect parts must be used within CascadeSelect");
+    return context;
+}
+function useCascadeSelectItemContext() {
+    const context = useContext(CascadeSelectItemContext);
+    if (!context) throw new Error("CascadeSelect item parts must be used within CascadeSelect.Item");
+    return context;
+}
+function CascadeSelect({ children, className, id: providedId, items, ref, required = false, size = "md", validateStatus = "default", ...machineProps }) {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const [statusTextIds, setStatusTextIds] = useState([]);
+    const collection = useMemo(()=>cascade_select_collection({
+            rootNode: {
+                children: items,
+                label: "",
+                value: "__cascade-select-root__"
+            },
+            isNodeDisabled: (item)=>item.disabled ?? false,
+            nodeToChildren: (item)=>item.children ?? [],
+            nodeToString: (item)=>item.label,
+            nodeToValue: (item)=>item.value
+        }), [
+        items
+    ]);
+    const service = useMachine(machine, {
+        ...machineProps,
+        collection,
+        id,
+        invalid: "error" === validateStatus,
+        positioning: {
+            fitViewport: true,
+            placement: "bottom-start",
+            ...machineProps.positioning
+        },
+        required
+    });
+    const api = connect(service, normalizeProps);
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(CascadeSelectContext.Provider, {
+        value: {
+            api,
+            formatValue: machineProps.formatValue,
+            required,
+            size,
+            statusTextIds,
+            setStatusTextIds,
+            validateStatus
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            ...api.getRootProps(),
+            className: styles.root({
+                className
+            }),
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx("input", {
+                    ...api.getHiddenInputProps()
+                }),
+                children
+            ]
+        })
+    });
+}
+CascadeSelect.Label = function({ children, ...props }) {
+    const { api, required } = useCascadeSelectContext();
+    return /*#__PURE__*/ jsx(Label, {
+        ...mergeProps(api.getLabelProps(), props),
+        disabled: api.disabled,
+        required: required,
+        children: children
+    });
+};
+CascadeSelect.Control = function({ className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getControlProps(), props),
+        className: styles.control({
+            className
+        }),
+        ref: ref
+    });
+};
+CascadeSelect.Trigger = function({ className, ref, ...props }) {
+    const { api, size, statusTextIds, validateStatus } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const triggerProps = mergeProps(api.getTriggerProps(), props);
+    const ariaDescribedBy = [
+        triggerProps["aria-describedby"],
+        ...statusTextIds
+    ].filter(Boolean).join(" ") || void 0;
+    return /*#__PURE__*/ jsx(Button, {
+        ...triggerProps,
+        "aria-describedby": ariaDescribedBy,
+        className: styles.trigger({
+            className
+        }),
+        "data-validation": "default" === validateStatus ? void 0 : validateStatus,
+        ref: ref,
+        size: "current",
+        theme: "unstyled"
+    });
+};
+CascadeSelect.ValueText = function({ children, className, placeholder = "Select an option", ref, ...props }) {
+    const { api, formatValue, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const selectedItems = resolveSelectedItems(api);
+    const valueText = selectedItems === api.selectedItems ? api.valueAsString : formatValue?.(selectedItems) ?? formatSelectedItems(api, selectedItems);
+    const hasValue = api.hasSelectedItems;
+    let content = hasValue ? valueText : placeholder;
+    if (hasValue && "function" == typeof children) content = children(selectedItems);
+    else if (hasValue && void 0 !== children && "function" != typeof children) content = children;
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getValueTextProps(), props),
+        className: styles.valueText({
+            className
+        }),
+        "data-placeholder": hasValue ? void 0 : "",
+        ref: ref,
+        children: content
+    });
+};
+CascadeSelect.Indicator = function({ children, className, iconSize = "current", ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getIndicatorProps(), props),
+        className: styles.indicator({
+            className: `${controlGlyphClass[toControlSize(size)]} ${className ?? ""}`
+        }),
+        ref: ref,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-cascade-select-indicator",
+            size: iconSize
+        })
+    });
+};
+CascadeSelect.ClearTrigger = function({ "aria-label": ariaLabel = "Clear selection", className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        ...mergeProps(api.getClearTriggerProps(), props),
+        "aria-label": ariaLabel,
+        className: styles.clearTrigger({
+            className
+        }),
+        icon: "token-icon-cascade-select-clear",
+        ref: ref,
+        size: toControlSize(size),
+        tone: "neutral"
+    });
+};
+CascadeSelect.Positioner = function({ className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx("div", {
+            ...mergeProps(api.getPositionerProps(), props),
+            className: styles.positioner({
+                className
+            }),
+            ref: ref
+        })
+    });
+};
+CascadeSelect.Content = function({ className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getContentProps(), props),
+        className: styles.content({
+            className
+        }),
+        ref: ref
+    });
+};
+CascadeSelect.List = function({ className, indexPath, item, ref, value, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const itemProps = {
+        indexPath,
+        item,
+        value
+    };
+    return /*#__PURE__*/ jsx("ul", {
+        ...mergeProps(api.getListProps(itemProps), props),
+        className: styles.list({
+            className
+        }),
+        ref: ref
+    });
+};
+CascadeSelect.Item = function({ children, className, indexPath, item, ref, value, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const itemProps = {
+        indexPath,
+        item,
+        value
+    };
+    const itemState = api.getItemState(itemProps);
+    return /*#__PURE__*/ jsx(CascadeSelectItemContext.Provider, {
+        value: {
+            itemProps,
+            itemState
+        },
+        children: /*#__PURE__*/ jsx("li", {
+            ...mergeProps(api.getItemProps(itemProps), props),
+            className: styles.item({
+                className
+            }),
+            ref: ref,
+            children: children
+        })
+    });
+};
+CascadeSelect.ItemText = function({ children, className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const { itemProps } = useCascadeSelectItemContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getItemTextProps(itemProps), props),
+        className: styles.itemText({
+            className
+        }),
+        ref: ref,
+        children: children ?? itemProps.item.label
+    });
+};
+CascadeSelect.BranchIndicator = function({ children, className, iconSize = "current", ref, ...props }) {
+    const { size } = useCascadeSelectContext();
+    const { itemState } = useCascadeSelectItemContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    if (!itemState.hasChildren) return null;
+    return /*#__PURE__*/ jsx("span", {
+        "aria-hidden": "true",
+        className: styles.branchIndicator({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-cascade-select-branch",
+            size: iconSize
+        })
+    });
+};
+CascadeSelect.ItemIndicator = function({ children, className, iconSize = "current", ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const { itemProps } = useCascadeSelectItemContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getItemIndicatorProps(itemProps), props),
+        className: styles.itemIndicator({
+            className
+        }),
+        ref: ref,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-cascade-select-check",
+            size: iconSize
+        })
+    });
+};
+function CascadeSelectTreeNode({ indexPath, node, value }) {
+    const { api } = useCascadeSelectContext();
+    const nodeProps = {
+        indexPath,
+        item: node,
+        value
+    };
+    const nodeState = api.getItemState(nodeProps);
+    const children = api.collection.getNodeChildren(node);
+    const highlightedChild = nodeState.highlightedChild;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(CascadeSelect.List, {
+                ...nodeProps,
+                children: children.map((item, index)=>{
+                    const itemValue = api.collection.getNodeValue(item);
+                    const itemProps = {
+                        indexPath: [
+                            ...indexPath,
+                            index
+                        ],
+                        item,
+                        value: [
+                            ...value,
+                            itemValue
+                        ]
+                    };
+                    return /*#__PURE__*/ createElement(CascadeSelect.Item, {
+                        ...itemProps,
+                        key: itemValue,
+                        children: [
+                            /*#__PURE__*/ jsx(CascadeSelect.ItemText, {}, "text"),
+                            /*#__PURE__*/ jsx(CascadeSelect.ItemIndicator, {}, "item-indicator"),
+                            /*#__PURE__*/ jsx(CascadeSelect.BranchIndicator, {}, "branch-indicator")
+                        ]
+                    });
+                })
+            }),
+            highlightedChild && api.collection.isBranchNode(highlightedChild) && /*#__PURE__*/ jsx(CascadeSelectTreeNode, {
+                indexPath: [
+                    ...indexPath,
+                    nodeState.highlightedIndex
+                ],
+                node: highlightedChild,
+                value: [
+                    ...value,
+                    api.collection.getNodeValue(highlightedChild)
+                ]
+            })
+        ]
+    });
+}
+CascadeSelect.Node = function({ indexPath = [], node, value = [] }) {
+    const { api } = useCascadeSelectContext();
+    return /*#__PURE__*/ jsx(CascadeSelectTreeNode, {
+        indexPath: indexPath,
+        node: node ?? api.collection.rootNode,
+        value: value
+    });
+};
+CascadeSelect.StatusText = function({ id: providedId, size: sizeProp, status: statusProp, ...props }) {
+    const { setStatusTextIds, size, validateStatus } = useCascadeSelectContext();
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const effectiveSize = sizeProp ?? size;
+    useEffect(()=>{
+        setStatusTextIds((ids)=>[
+                ...ids,
+                id
+            ]);
+        return ()=>setStatusTextIds((ids)=>ids.filter((statusId)=>statusId !== id));
+    }, [
+        id,
+        setStatusTextIds
+    ]);
+    return /*#__PURE__*/ jsx(StatusText, {
+        ...props,
+        id: id,
+        size: "xs" === effectiveSize ? "sm" : effectiveSize,
+        status: statusProp ?? validateStatus
+    });
+};
+CascadeSelect.displayName = "CascadeSelect";
+export { CascadeSelect, cascadeSelectVariants, useCascadeSelectContext };