@duskmoon-dev/components 0.1.2

package/dist/components/tree/index.js

@@ -0,0 +1,439 @@
+"use client";
+
+// src/components/tree/Tree.tsx
+import React, { forwardRef, useMemo, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/tree.ts
+var treeBaseClass = "tree";
+var treeDirectoryClass = "tree-directory";
+var treeDisabledClass = "tree-disabled";
+var treeShowLineClass = "tree-show-line";
+var treeCheckableClass = "tree-checkable";
+var treeMultipleClass = "tree-multiple";
+var treeListClass = "tree-list";
+var treeNodeClass = "tree-node";
+var treeNodeSelectedClass = "tree-node-selected";
+var treeNodeCheckedClass = "tree-node-checked";
+var treeNodeDisabledClass = "tree-node-disabled";
+var treeNodeExpandedClass = "tree-node-expanded";
+var treeNodeDraggableClass = "tree-node-draggable";
+var treeNodeSwitcherClass = "tree-node-switcher";
+var treeNodeCheckboxClass = "tree-node-checkbox";
+var treeNodeIconClass = "tree-node-icon";
+var treeNodeTitleClass = "tree-node-title";
+var treeNodeChildrenClass = "tree-node-children";
+function getTreeClasses({
+  disabled,
+  checkable,
+  multiple,
+  showLine,
+  directory,
+  className
+}) {
+  return cn(treeBaseClass, disabled && treeDisabledClass, checkable && treeCheckableClass, multiple && treeMultipleClass, showLine && treeShowLineClass, directory && treeDirectoryClass, className);
+}
+function getTreeNodeClasses({
+  selected,
+  checked,
+  disabled,
+  expanded,
+  draggable,
+  className
+}) {
+  return cn(treeNodeClass, selected && treeNodeSelectedClass, checked && treeNodeCheckedClass, disabled && treeNodeDisabledClass, expanded && treeNodeExpandedClass, draggable && treeNodeDraggableClass, className);
+}
+
+// src/components/tree/Tree.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function normalizeKeys(keys) {
+  return keys?.map(String) ?? [];
+}
+function uniqueKeys(keys) {
+  return Array.from(new Set(keys));
+}
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function isCurrentTreeItemEvent(event) {
+  return event.target instanceof Element && event.target.closest('[role="treeitem"]') === event.currentTarget;
+}
+function isActivationKey(key) {
+  return key === "Enter" || key === " ";
+}
+function buildFlatTree(nodes, level = 0, parentKey = undefined, parentPos = "0") {
+  return nodes.map((node, index) => {
+    const keyString = String(node.key);
+    const pos = `${parentPos}-${index}`;
+    const item = {
+      key: node.key,
+      keyString,
+      node,
+      parentKey,
+      children: [],
+      level,
+      pos
+    };
+    item.children = buildFlatTree(node.children ?? [], level + 1, keyString, pos);
+    return item;
+  });
+}
+function flattenTree(nodes) {
+  return nodes.flatMap((node) => [node, ...flattenTree(node.children)]);
+}
+function descendantKeys(node) {
+  return flattenTree(node.children).map((child) => child.keyString);
+}
+function eventNode(item) {
+  return {
+    ...item.node,
+    key: item.key,
+    pos: item.pos,
+    data: item.node
+  };
+}
+function eventInfo(item, nativeEvent) {
+  return {
+    node: eventNode(item),
+    nativeEvent
+  };
+}
+function checkedNodesFromKeys(flatNodes, keys) {
+  const keySet = new Set(keys);
+  return flatNodes.filter((item) => keySet.has(item.keyString)).map((item) => item.node);
+}
+function treeDataFromChildren(children) {
+  return React.Children.toArray(children).flatMap((child, index) => {
+    if (!React.isValidElement(child)) {
+      return [];
+    }
+    const {
+      title,
+      eventKey,
+      children: childChildren,
+      disabled,
+      disableCheckbox,
+      selectable,
+      checkable,
+      icon,
+      isLeaf,
+      className
+    } = child.props;
+    return [
+      {
+        key: eventKey ?? child.key ?? index,
+        title,
+        disabled,
+        disableCheckbox,
+        selectable,
+        checkable,
+        icon,
+        isLeaf,
+        className,
+        children: treeDataFromChildren(childChildren)
+      }
+    ];
+  });
+}
+var TreeNode = forwardRef(({
+  title,
+  children,
+  disabled,
+  checkable,
+  selectable,
+  icon,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxs("div", {
+  ...props,
+  ref,
+  "aria-disabled": disabled || undefined,
+  className: getTreeNodeClasses({ disabled, className }),
+  children: [
+    checkable ? /* @__PURE__ */ jsx("input", {
+      type: "checkbox",
+      className: treeNodeCheckboxClass,
+      disabled,
+      readOnly: true
+    }) : null,
+    hasNode(icon) ? /* @__PURE__ */ jsx("span", {
+      className: treeNodeIconClass,
+      children: icon
+    }) : null,
+    /* @__PURE__ */ jsx("span", {
+      className: treeNodeTitleClass,
+      children: title
+    }),
+    selectable === false ? null : children
+  ]
+}));
+TreeNode.displayName = "Tree.TreeNode";
+function TreeRoot({
+  treeData,
+  children,
+  expandedKeys,
+  defaultExpandedKeys,
+  selectedKeys,
+  defaultSelectedKeys,
+  checkedKeys,
+  defaultCheckedKeys,
+  checkable,
+  selectable = true,
+  multiple,
+  disabled,
+  showLine,
+  showIcon,
+  draggable,
+  blockNode,
+  defaultExpandAll,
+  loadData,
+  titleRender,
+  onExpand,
+  onSelect,
+  onCheck,
+  onDragStart,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  onDragEnd,
+  onDrop,
+  className,
+  ...props
+}, ref) {
+  const data = useMemo(() => treeData ?? treeDataFromChildren(children), [children, treeData]);
+  const flatRoots = useMemo(() => buildFlatTree(data), [data]);
+  const flatNodes = useMemo(() => flattenTree(flatRoots), [flatRoots]);
+  const allExpandableKeys = useMemo(() => flatNodes.filter((item) => item.children.length > 0 || item.node.isLeaf === false).map((item) => item.keyString), [flatNodes]);
+  const expandedControlled = expandedKeys !== undefined;
+  const selectedControlled = selectedKeys !== undefined;
+  const checkedControlled = checkedKeys !== undefined;
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState(() => defaultExpandAll ? allExpandableKeys : normalizeKeys(defaultExpandedKeys));
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(() => normalizeKeys(defaultSelectedKeys));
+  const [internalCheckedKeys, setInternalCheckedKeys] = useState(() => normalizeKeys(defaultCheckedKeys));
+  const [dragNodeKey, setDragNodeKey] = useState();
+  const currentExpandedKeys = expandedControlled ? normalizeKeys(expandedKeys) : internalExpandedKeys;
+  const currentSelectedKeys = selectedControlled ? normalizeKeys(selectedKeys) : internalSelectedKeys;
+  const currentCheckedKeys = checkedControlled ? normalizeKeys(checkedKeys) : internalCheckedKeys;
+  const expandedKeySet = useMemo(() => new Set(currentExpandedKeys), [currentExpandedKeys]);
+  const selectedKeySet = useMemo(() => new Set(currentSelectedKeys), [currentSelectedKeys]);
+  const checkedKeySet = useMemo(() => new Set(currentCheckedKeys), [currentCheckedKeys]);
+  function updateExpandedKeys(nextExpandedKeys, item, nativeEvent, expanded) {
+    if (!expandedControlled) {
+      setInternalExpandedKeys(nextExpandedKeys);
+    }
+    onExpand?.(nextExpandedKeys, {
+      ...eventInfo(item, nativeEvent),
+      expanded
+    });
+  }
+  function toggleExpand(item, nativeEvent) {
+    if (disabled || item.node.disabled || item.node.isLeaf) {
+      return;
+    }
+    const expanded = !expandedKeySet.has(item.keyString);
+    const nextExpandedKeys = expanded ? uniqueKeys([...currentExpandedKeys, item.keyString]) : currentExpandedKeys.filter((key) => key !== item.keyString);
+    updateExpandedKeys(nextExpandedKeys, item, nativeEvent, expanded);
+    if (expanded && loadData) {
+      loadData(eventNode(item));
+    }
+  }
+  function selectNode(item, nativeEvent) {
+    if (disabled || item.node.disabled || selectable === false || item.node.selectable === false) {
+      return;
+    }
+    const selected = selectedKeySet.has(item.keyString);
+    const nextSelectedKeys = selected && multiple ? currentSelectedKeys.filter((key) => key !== item.keyString) : selected ? currentSelectedKeys : multiple ? uniqueKeys([...currentSelectedKeys, item.keyString]) : [item.keyString];
+    if (!selectedControlled) {
+      setInternalSelectedKeys(nextSelectedKeys);
+    }
+    onSelect?.(nextSelectedKeys, {
+      ...eventInfo(item, nativeEvent),
+      selected: !selected,
+      selectedNodes: flatNodes.filter((node) => nextSelectedKeys.includes(node.keyString)).map((node) => node.node)
+    });
+  }
+  function checkNode(item, nativeEvent) {
+    if (disabled || item.node.disabled || item.node.disableCheckbox || checkable === false || item.node.checkable === false) {
+      return;
+    }
+    const checked = checkedKeySet.has(item.keyString);
+    const affectedKeys = [item.keyString, ...descendantKeys(item)];
+    const nextCheckedKeys = checked ? currentCheckedKeys.filter((key) => !affectedKeys.includes(key)) : uniqueKeys([...currentCheckedKeys, ...affectedKeys]);
+    if (!checkedControlled) {
+      setInternalCheckedKeys(nextCheckedKeys);
+    }
+    onCheck?.(nextCheckedKeys, {
+      ...eventInfo(item, nativeEvent),
+      checked: !checked,
+      checkedNodes: checkedNodesFromKeys(flatNodes, nextCheckedKeys)
+    });
+  }
+  function dragInfo(item, event) {
+    return {
+      ...eventInfo(item, event),
+      event
+    };
+  }
+  function handleDrop(item, event) {
+    event.preventDefault();
+    const dragNode = flatNodes.find((node) => node.keyString === dragNodeKey);
+    const info = {
+      ...dragInfo(item, event),
+      dragNode: dragNode ? eventNode(dragNode) : undefined,
+      dragNodesKeys: dragNode ? [dragNode.key] : [],
+      dropPosition: 0,
+      dropToGap: false
+    };
+    onDrop?.(info);
+  }
+  function renderNode(item) {
+    const nodeDisabled = disabled || item.node.disabled;
+    const expanded = expandedKeySet.has(item.keyString);
+    const checked = checkedKeySet.has(item.keyString);
+    const selected = selectedKeySet.has(item.keyString);
+    const expandable = item.children.length > 0 || item.node.isLeaf === false;
+    const nodeCheckable = checkable && item.node.checkable !== false;
+    const nodeDraggable = Boolean(draggable && !nodeDisabled);
+    const title = titleRender?.(item.node) ?? item.node.title ?? item.key;
+    return /* @__PURE__ */ jsxs("li", {
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : undefined,
+      "aria-selected": selected,
+      "aria-disabled": nodeDisabled || undefined,
+      tabIndex: nodeDisabled ? undefined : 0,
+      onClick: (event) => {
+        if (isCurrentTreeItemEvent(event)) {
+          selectNode(item, event);
+        }
+      },
+      onKeyDown: (event) => {
+        if (isActivationKey(event.key) && isCurrentTreeItemEvent(event)) {
+          event.preventDefault();
+          selectNode(item, event);
+        }
+      },
+      onDragStart: (event) => {
+        setDragNodeKey(item.keyString);
+        onDragStart?.(dragInfo(item, event));
+      },
+      onDragEnter: (event) => onDragEnter?.(dragInfo(item, event)),
+      onDragOver: (event) => {
+        if (onDrop) {
+          event.preventDefault();
+        }
+        onDragOver?.(dragInfo(item, event));
+      },
+      onDragLeave: (event) => onDragLeave?.(dragInfo(item, event)),
+      onDragEnd: (event) => onDragEnd?.(dragInfo(item, event)),
+      onDrop: (event) => handleDrop(item, event),
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: getTreeNodeClasses({
+            selected,
+            checked,
+            disabled: nodeDisabled,
+            expanded,
+            draggable: nodeDraggable,
+            className: cn(item.node.className, blockNode && "tree-node-block")
+          }),
+          style: { paddingInlineStart: item.level * 16 },
+          draggable: nodeDraggable,
+          children: [
+            /* @__PURE__ */ jsx("button", {
+              type: "button",
+              "aria-label": expanded ? `Collapse ${item.keyString}` : `Expand ${item.keyString}`,
+              className: treeNodeSwitcherClass,
+              disabled: nodeDisabled || !expandable,
+              onClick: (event) => {
+                event.stopPropagation();
+                toggleExpand(item, event);
+              },
+              children: expandable ? expanded ? "v" : ">" : showLine ? "-" : ""
+            }),
+            nodeCheckable ? /* @__PURE__ */ jsx("input", {
+              type: "checkbox",
+              className: treeNodeCheckboxClass,
+              "aria-label": `Check ${item.keyString}`,
+              checked,
+              disabled: nodeDisabled || item.node.disableCheckbox,
+              onChange: (event) => checkNode(item, event),
+              onClick: (event) => event.stopPropagation()
+            }) : null,
+            showIcon && hasNode(item.node.icon) ? /* @__PURE__ */ jsx("span", {
+              className: treeNodeIconClass,
+              children: item.node.icon
+            }) : null,
+            /* @__PURE__ */ jsx("span", {
+              className: treeNodeTitleClass,
+              children: title
+            })
+          ]
+        }),
+        expanded && item.children.length > 0 ? /* @__PURE__ */ jsx("ul", {
+          className: treeNodeChildrenClass,
+          role: "group",
+          children: item.children.map(renderNode)
+        }) : null
+      ]
+    }, item.keyString);
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getTreeClasses({
+      disabled,
+      checkable,
+      multiple,
+      showLine,
+      className
+    }),
+    role: "tree",
+    "aria-multiselectable": multiple || undefined,
+    children: /* @__PURE__ */ jsx("ul", {
+      className: treeListClass,
+      children: flatRoots.map(renderNode)
+    })
+  });
+}
+var TreeBase = forwardRef(TreeRoot);
+function DirectoryTreeRoot({ className, multiple = true, ...props }, ref) {
+  return /* @__PURE__ */ jsx(TreeBase, {
+    ...props,
+    ref,
+    multiple,
+    className: cn("tree-directory", className)
+  });
+}
+var DirectoryTree = forwardRef(DirectoryTreeRoot);
+var TreeNodeComponent = TreeNode;
+var Tree = TreeBase;
+Tree.TreeNode = TreeNodeComponent;
+Tree.DirectoryTree = DirectoryTree;
+Tree.displayName = "Tree";
+export {
+  Tree
+};

package/dist/components/tree-select/TreeSelect.d.ts

@@ -0,0 +1,2 @@
+import type { TreeSelectComponent } from "./TreeSelect.types";
+export declare const TreeSelect: TreeSelectComponent;

package/dist/components/tree-select/TreeSelect.types.d.ts

@@ -0,0 +1,70 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from "react";
+export type TreeSelectValue = string | number;
+export type TreeSelectRawValue = TreeSelectValue | TreeSelectValue[];
+export type TreeSelectCheckedStrategy = "SHOW_ALL" | "SHOW_PARENT" | "SHOW_CHILD";
+export interface TreeSelectDataNode {
+    value?: TreeSelectValue;
+    key?: TreeSelectValue;
+    title?: ReactNode;
+    label?: ReactNode;
+    children?: TreeSelectDataNode[];
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    isLeaf?: boolean;
+    className?: string;
+    [name: string]: unknown;
+}
+export interface TreeSelectNodeProps extends Omit<ComponentProps<"div">, "title" | "onSelect"> {
+    title?: ReactNode;
+    value: TreeSelectValue;
+    children?: ReactNode;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    isLeaf?: boolean;
+}
+export interface TreeSelectChangeExtra<T extends TreeSelectDataNode = TreeSelectDataNode> {
+    triggerValue?: TreeSelectValue;
+    selected?: boolean;
+    checked?: boolean;
+    triggerNode?: T;
+    allCheckedNodes?: T[];
+}
+export interface TreeSelectProps<T extends TreeSelectDataNode = TreeSelectDataNode> extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect"> {
+    allowClear?: boolean;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    defaultValue?: TreeSelectRawValue;
+    defaultExpandedKeys?: TreeSelectValue[];
+    defaultTreeExpandedKeys?: TreeSelectValue[];
+    disabled?: boolean;
+    expandedKeys?: TreeSelectValue[];
+    filterTreeNode?: boolean | ((inputValue: string, node: T) => boolean);
+    loadData?: (node: T) => Promise<unknown> | unknown;
+    multiple?: boolean;
+    onChange?: (value: TreeSelectRawValue | undefined, label: ReactNode | ReactNode[], extra: TreeSelectChangeExtra<T>) => void;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (value: TreeSelectValue, node: T, extra: TreeSelectChangeExtra<T>) => void;
+    open?: boolean;
+    placeholder?: ReactNode;
+    searchValue?: string;
+    showSearch?: boolean;
+    treeCheckable?: boolean;
+    treeCheckedStrategy?: TreeSelectCheckedStrategy;
+    treeData?: T[];
+    treeDefaultExpandAll?: boolean;
+    treeExpandedKeys?: TreeSelectValue[];
+    value?: TreeSelectRawValue;
+}
+export type TreeSelectNodeComponent = ForwardRefExoticComponent<TreeSelectNodeProps & RefAttributes<HTMLDivElement>>;
+export type TreeSelectComponent = (<T extends TreeSelectDataNode = TreeSelectDataNode>(props: TreeSelectProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null) & {
+    TreeNode: TreeSelectNodeComponent;
+    SHOW_ALL: "SHOW_ALL";
+    SHOW_PARENT: "SHOW_PARENT";
+    SHOW_CHILD: "SHOW_CHILD";
+    displayName?: string;
+};

package/dist/components/tree-select/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeSelect } from "./TreeSelect";
+export type { TreeSelectChangeExtra, TreeSelectCheckedStrategy, TreeSelectComponent, TreeSelectDataNode, TreeSelectNodeComponent, TreeSelectNodeProps, TreeSelectProps, TreeSelectRawValue, TreeSelectValue, } from "./TreeSelect.types";