silver-ui 0.1.0

package/dist/chunk-KVREBGWA.js

@@ -0,0 +1,711 @@
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { useId, useRef, useMemo, useState, useCallback } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var styles = {
+  container: css({
+    position: "absolute",
+    h: "full",
+    w: "5"
+  }),
+  line: css({
+    position: "absolute",
+    insetInline: 0,
+    m: "auto",
+    w: "1px",
+    h: "calc(100% + 1px)",
+    borderRadius: "xs",
+    bg: "border.emphasized"
+  })
+};
+var branchOffset = "6px";
+function TreeViewBranches({
+  ancestorsIsLast,
+  nestedLevel
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ancestorsIsLast.map((ancestorIsLast, level) => {
+      if (ancestorIsLast || level === nestedLevel - 1) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.container,
+          style: { left: `calc(${branchOffset} + ${level} * 16px)` },
+          children: /* @__PURE__ */ jsx("div", { className: styles.line })
+        },
+        level
+      );
+    }),
+    nestedLevel > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.container,
+        style: { left: `calc(${branchOffset} + ${nestedLevel - 1} * 16px)` },
+        children: /* @__PURE__ */ jsx("div", { className: styles.line })
+      }
+    ) : null
+  ] });
+}
+TreeViewBranches.displayName = "TreeViewBranches";
+var styles2 = {
+  childGroup: css({
+    m: 0,
+    p: 0,
+    listStyleType: "none"
+  }),
+  content: css({
+    display: "flex",
+    flex: 1,
+    minW: 0,
+    flexDirection: "column",
+    textAlign: "start"
+  }),
+  contentWrapper: css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    px: "2",
+    borderRadius: "md",
+    outline: "none",
+    textAlign: "start"
+  }),
+  density: {
+    balanced: css({
+      py: "2",
+      fontSize: "sm",
+      lineHeight: "normal"
+    }),
+    compact: css({
+      py: "1",
+      fontSize: "sm",
+      lineHeight: "normal"
+    }),
+    spacious: css({
+      py: "3",
+      fontSize: "sm",
+      lineHeight: "normal"
+    })
+  },
+  description: css({
+    color: "fg.muted",
+    fontSize: "xs",
+    lineHeight: "normal"
+  }),
+  disabled: css({
+    cursor: "not-allowed",
+    opacity: 0.5,
+    pointerEvents: "none"
+  }),
+  endContent: css({
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    ml: "auto"
+  }),
+  interactive: css({
+    cursor: "pointer",
+    transitionDuration: "fast",
+    transitionProperty: "background-color",
+    transitionTimingFunction: "default",
+    _active: {
+      bg: "bg.hover"
+    },
+    _hover: {
+      "@media (hover: hover)": {
+        bg: "bg.subtle"
+      }
+    }
+  }),
+  invisibleAction: css({
+    all: "unset",
+    display: "flex",
+    flex: 1,
+    minW: 0,
+    flexDirection: "column",
+    color: "inherit",
+    cursor: "inherit",
+    font: "inherit",
+    textAlign: "start",
+    textDecoration: "none",
+    outline: "none"
+  }),
+  label: css({
+    color: "fg"
+  }),
+  rowWrapper: css({
+    position: "relative"
+  }),
+  selected: css({
+    bg: "bg.selected"
+  }),
+  focused: css({
+    outlineWidth: "focus",
+    outlineStyle: "solid",
+    outlineColor: "primary",
+    outlineOffset: "focusOffset"
+  }),
+  startContent: css({
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0
+  }),
+  toggleButton: css({
+    all: "unset",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    w: "4",
+    h: "4",
+    borderRadius: "sm",
+    color: "fg.muted",
+    cursor: "pointer"
+  }),
+  toggleIcon: css({
+    display: "flex",
+    transitionDuration: "fast",
+    transitionProperty: "transform",
+    transitionTimingFunction: "default"
+  }),
+  toggleIconExpanded: css({
+    transform: "rotate(90deg)"
+  }),
+  toggleSpacer: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    w: "4",
+    h: "4",
+    color: "fg.muted"
+  }),
+  treeBranches: css({
+    ps: "2"
+  }),
+  wrapper: css({
+    position: "relative",
+    m: 0,
+    p: 0,
+    w: "full",
+    listStyleType: "none",
+    outline: "none"
+  })
+};
+function TreeViewItem({
+  ariaLabel,
+  ancestorsIsLast,
+  density,
+  description,
+  endContent,
+  hasChildren,
+  href,
+  id,
+  isDisabled = false,
+  isExpanded,
+  isFocused,
+  isLast: _isLast,
+  isSelected = false,
+  label,
+  nestedLevel,
+  onClick,
+  onFocusItem,
+  onItemKeyDown,
+  onToggle,
+  ref,
+  renderedChildren,
+  startContent,
+  tabIndex,
+  target
+}) {
+  const labelId = useId();
+  const descriptionId = useId();
+  const actionRef = useRef(null);
+  const isInteractive = onClick != null || href != null;
+  const togglesOnRow = hasChildren && onClick == null && onToggle != null;
+  const textLabel = ariaLabel ?? (typeof label === "string" || typeof label === "number" ? String(label) : id);
+  const handleToggle = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onToggle?.(id);
+    },
+    [id, onToggle]
+  );
+  const handleRowClick = useCallback(() => {
+    if (!togglesOnRow) {
+      return;
+    }
+    if (isDisabled) {
+      return;
+    }
+    onToggle(id);
+  }, [id, isDisabled, onToggle, togglesOnRow]);
+  const handleRowKeyDown = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (togglesOnRow) {
+          handleRowClick();
+          return;
+        }
+        actionRef.current?.click();
+        return;
+      }
+      onItemKeyDown(event, id);
+    },
+    [handleRowClick, id, onItemKeyDown, togglesOnRow]
+  );
+  const handleFocus = useCallback(
+    (event) => {
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+      onFocusItem(id, event.currentTarget.matches(":focus-visible"));
+    },
+    [id, onFocusItem]
+  );
+  const handlePointerDown = useCallback(() => {
+    onFocusItem(id, false);
+  }, [id, onFocusItem]);
+  const handleDisabledLinkClick = useCallback(
+    (event) => {
+      if (!isDisabled) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [isDisabled]
+  );
+  const labelAndDescription = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: styles2.label, id: labelId, children: label }),
+    description == null ? null : /* @__PURE__ */ jsx("span", { className: styles2.description, id: descriptionId, children: description })
+  ] });
+  const toggleIcon = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(
+        styles2.toggleIcon,
+        isExpanded ? styles2.toggleIconExpanded : void 0
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: "sm" })
+    }
+  );
+  const toggle = hasChildren ? onClick != null ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": `Toggle ${textLabel} children`,
+      className: styles2.toggleButton,
+      onClick: handleToggle,
+      tabIndex: -1,
+      type: "button",
+      children: toggleIcon
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: styles2.toggleSpacer, children: toggleIcon }) : null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    toggle,
+    startContent == null ? null : /* @__PURE__ */ jsx("span", { className: styles2.startContent, children: startContent }),
+    href != null ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        "aria-describedby": description == null ? void 0 : descriptionId,
+        "aria-disabled": isDisabled || void 0,
+        "aria-labelledby": labelId,
+        className: styles2.invisibleAction,
+        href,
+        onClick: handleDisabledLinkClick,
+        ref: actionRef,
+        tabIndex: -1,
+        target,
+        children: labelAndDescription
+      }
+    ) : onClick != null ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-describedby": description == null ? void 0 : descriptionId,
+        "aria-labelledby": labelId,
+        className: styles2.invisibleAction,
+        disabled: isDisabled,
+        onClick,
+        ref: actionRef,
+        tabIndex: -1,
+        type: "button",
+        children: labelAndDescription
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: styles2.content, children: labelAndDescription }),
+    endContent == null ? null : /* @__PURE__ */ jsx("span", { className: styles2.endContent, children: endContent })
+  ] });
+  const marginLeft = hasChildren ? `calc(${nestedLevel} * 16px)` : `calc(${nestedLevel} * 16px + 24px)`;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "aria-describedby": description == null ? void 0 : descriptionId,
+      "aria-disabled": isDisabled || void 0,
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-labelledby": labelId,
+      "aria-selected": isSelected || void 0,
+      className: styles2.wrapper,
+      onFocus: handleFocus,
+      onKeyDown: handleRowKeyDown,
+      ref,
+      role: "treeitem",
+      tabIndex: isDisabled ? -1 : tabIndex,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles2.treeBranches, children: /* @__PURE__ */ jsx(
+          TreeViewBranches,
+          {
+            ancestorsIsLast,
+            nestedLevel
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: styles2.rowWrapper, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "silver-tree-view-item",
+              styles2.contentWrapper,
+              styles2.density[density],
+              isInteractive || togglesOnRow ? styles2.interactive : void 0,
+              isDisabled ? styles2.disabled : void 0,
+              isSelected ? styles2.selected : void 0,
+              isFocused ? styles2.focused : void 0
+            ),
+            onClick: handleRowClick,
+            onPointerDown: handlePointerDown,
+            style: { marginLeft },
+            tabIndex: void 0,
+            children: content
+          }
+        ) }),
+        isExpanded && renderedChildren != null ? /* @__PURE__ */ jsx("ul", { className: styles2.childGroup, role: "group", children: renderedChildren }) : null
+      ]
+    }
+  );
+}
+TreeViewItem.displayName = "TreeViewItem";
+var styles3 = {
+  header: css({
+    mb: "2"
+  }),
+  list: css({
+    m: 0,
+    p: 0,
+    listStyleType: "none"
+  }),
+  root: css({
+    position: "relative"
+  })
+};
+function collectExpandedKeys(items) {
+  const keys = [];
+  for (const item of items) {
+    if (item.isExpanded && item.children != null && item.children.length > 0) {
+      keys.push(item.id);
+    }
+    if (item.children != null) {
+      keys.push(...collectExpandedKeys(item.children));
+    }
+  }
+  return keys;
+}
+function getTextLabel(item) {
+  if (item.ariaLabel != null) {
+    return item.ariaLabel;
+  }
+  if (typeof item.label === "string" || typeof item.label === "number") {
+    return String(item.label);
+  }
+  return item.id;
+}
+function getItemExpansion(id, expandedKeyOverrides, expandedKeysFromProps) {
+  return expandedKeyOverrides.has(id) ? expandedKeyOverrides.get(id) ?? false : expandedKeysFromProps.has(id);
+}
+function collectVisibleItems(items, expandedKeyOverrides, expandedKeysFromProps, parentId = null) {
+  const visibleItems = [];
+  for (const item of items) {
+    const hasChildren = item.children != null && item.children.length > 0;
+    const isExpanded = getItemExpansion(
+      item.id,
+      expandedKeyOverrides,
+      expandedKeysFromProps
+    );
+    visibleItems.push({
+      hasChildren,
+      id: item.id,
+      isDisabled: item.isDisabled === true,
+      isExpanded,
+      label: getTextLabel(item),
+      parentId
+    });
+    if (hasChildren && isExpanded) {
+      visibleItems.push(
+        ...collectVisibleItems(
+          item.children ?? [],
+          expandedKeyOverrides,
+          expandedKeysFromProps,
+          item.id
+        )
+      );
+    }
+  }
+  return visibleItems;
+}
+function TreeView({
+  className,
+  "data-testid": dataTestId,
+  density = "balanced",
+  header,
+  items,
+  ref,
+  style
+}) {
+  const headerId = useId();
+  const itemElementsRef = useRef(/* @__PURE__ */ new Map());
+  const inputModalityRef = useRef("keyboard");
+  const expandedKeysFromProps = useMemo(
+    () => new Set(collectExpandedKeys(items)),
+    [items]
+  );
+  const [expandedKeyOverrides, setExpandedKeyOverrides] = useState(() => /* @__PURE__ */ new Map());
+  const [focusedId, setFocusedId] = useState(null);
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  const [focusVisibleId, setFocusVisibleId] = useState(null);
+  const visibleItems = useMemo(
+    () => collectVisibleItems(items, expandedKeyOverrides, expandedKeysFromProps),
+    [expandedKeyOverrides, expandedKeysFromProps, items]
+  );
+  const focusableItems = useMemo(
+    () => visibleItems.filter((item) => !item.isDisabled),
+    [visibleItems]
+  );
+  const activeFocusedId = focusedId != null && focusableItems.some((item) => item.id === focusedId) ? focusedId : focusableItems[0]?.id ?? null;
+  const handleToggle = useCallback(
+    (id) => {
+      setExpandedKeyOverrides((previous) => {
+        const next = new Map(previous);
+        const defaultIsExpanded = expandedKeysFromProps.has(id);
+        const isExpanded = previous.has(id) ? previous.get(id) ?? false : defaultIsExpanded;
+        const nextIsExpanded = !isExpanded;
+        if (nextIsExpanded === defaultIsExpanded) {
+          next.delete(id);
+        } else {
+          next.set(id, nextIsExpanded);
+        }
+        return next;
+      });
+    },
+    [expandedKeysFromProps]
+  );
+  const focusItem = useCallback((id) => {
+    setFocusedId(id);
+    itemElementsRef.current.get(id)?.focus();
+  }, []);
+  const handleItemFocus = useCallback((id, isFocusVisible = false) => {
+    setFocusedId(id);
+    setFocusVisibleId(
+      isFocusVisible || inputModalityRef.current === "keyboard" ? id : null
+    );
+  }, []);
+  const handleFocusCapture = useCallback(() => {
+    setHasFocusWithin(true);
+  }, []);
+  const handleBlurCapture = useCallback((event) => {
+    const nextFocusedElement = event.relatedTarget;
+    if (nextFocusedElement instanceof Node && event.currentTarget.contains(nextFocusedElement)) {
+      return;
+    }
+    setHasFocusWithin(false);
+    setFocusVisibleId(null);
+  }, []);
+  const handleKeyDownCapture = useCallback(() => {
+    inputModalityRef.current = "keyboard";
+  }, []);
+  const handlePointerDownCapture = useCallback(() => {
+    inputModalityRef.current = "pointer";
+  }, []);
+  const registerItem = useCallback(
+    (id) => (element) => {
+      if (element == null) {
+        itemElementsRef.current.delete(id);
+        return;
+      }
+      itemElementsRef.current.set(id, element);
+    },
+    []
+  );
+  const handleItemKeyDown = useCallback(
+    (event, id) => {
+      const currentIndex = focusableItems.findIndex((item) => item.id === id);
+      if (currentIndex === -1) {
+        return;
+      }
+      const currentItem = focusableItems[currentIndex];
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const nextIndex = currentIndex + 1;
+        if (nextIndex < focusableItems.length) {
+          focusItem(focusableItems[nextIndex].id);
+        }
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const previousIndex = currentIndex - 1;
+        if (previousIndex >= 0) {
+          focusItem(focusableItems[previousIndex].id);
+        }
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        if (focusableItems.length > 0) {
+          focusItem(focusableItems[0].id);
+        }
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        if (focusableItems.length > 0) {
+          focusItem(focusableItems[focusableItems.length - 1].id);
+        }
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        if (!currentItem.hasChildren) {
+          return;
+        }
+        event.preventDefault();
+        if (!currentItem.isExpanded) {
+          handleToggle(currentItem.id);
+          return;
+        }
+        const firstChild = focusableItems.find(
+          (item) => item.parentId === currentItem.id
+        );
+        if (firstChild != null) {
+          focusItem(firstChild.id);
+        }
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        if (currentItem.hasChildren && currentItem.isExpanded) {
+          handleToggle(currentItem.id);
+          return;
+        }
+        if (currentItem.parentId != null) {
+          focusItem(currentItem.parentId);
+        }
+        return;
+      }
+      if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+        const query = event.key.toLocaleLowerCase();
+        const orderedItems = [
+          ...focusableItems.slice(currentIndex + 1),
+          ...focusableItems.slice(0, currentIndex + 1)
+        ];
+        const matchingItem = orderedItems.find(
+          (item) => item.label.toLocaleLowerCase().startsWith(query)
+        );
+        if (matchingItem != null) {
+          event.preventDefault();
+          focusItem(matchingItem.id);
+        }
+      }
+    },
+    [focusItem, focusableItems, handleToggle]
+  );
+  const renderItems = useCallback(
+    (treeItems, nestedLevel, ancestorsIsLast) => treeItems.map((item, index) => {
+      const isLast = index === treeItems.length - 1;
+      const hasChildren = item.children != null && item.children.length > 0;
+      const isExpanded = expandedKeyOverrides.has(item.id) ? expandedKeyOverrides.get(item.id) ?? false : expandedKeysFromProps.has(item.id);
+      const childAncestorsIsLast = hasChildren ? [...ancestorsIsLast, isLast] : ancestorsIsLast;
+      const renderedChildren = isExpanded && hasChildren ? renderItems(
+        item.children ?? [],
+        nestedLevel + 1,
+        childAncestorsIsLast
+      ) : void 0;
+      return /* @__PURE__ */ jsx(
+        TreeViewItem,
+        {
+          ancestorsIsLast,
+          ariaLabel: item.ariaLabel,
+          density,
+          description: item.description,
+          endContent: item.endContent,
+          hasChildren,
+          href: item.href,
+          id: item.id,
+          isDisabled: item.isDisabled,
+          isExpanded,
+          isFocused: hasFocusWithin && focusVisibleId === item.id,
+          isLast,
+          isSelected: item.isSelected,
+          label: item.label,
+          nestedLevel,
+          onClick: item.onClick,
+          onFocusItem: handleItemFocus,
+          onItemKeyDown: handleItemKeyDown,
+          onToggle: handleToggle,
+          ref: registerItem(item.id),
+          renderedChildren,
+          startContent: item.startContent,
+          tabIndex: activeFocusedId === item.id ? 0 : -1,
+          target: item.target
+        },
+        item.id
+      );
+    }),
+    [
+      activeFocusedId,
+      density,
+      expandedKeyOverrides,
+      expandedKeysFromProps,
+      focusVisibleId,
+      hasFocusWithin,
+      handleItemFocus,
+      handleItemKeyDown,
+      handleToggle,
+      registerItem
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("silver-tree-view", styles3.root, className),
+      "data-testid": dataTestId,
+      onBlurCapture: handleBlurCapture,
+      onFocusCapture: handleFocusCapture,
+      onKeyDownCapture: handleKeyDownCapture,
+      onPointerDownCapture: handlePointerDownCapture,
+      ref,
+      style,
+      children: [
+        header == null ? null : /* @__PURE__ */ jsx("div", { className: styles3.header, id: headerId, children: header }),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            "aria-labelledby": header == null ? void 0 : headerId,
+            className: styles3.list,
+            role: "tree",
+            children: renderItems(items, 0, [])
+          }
+        )
+      ]
+    }
+  );
+}
+TreeView.displayName = "TreeView";
+
+export { TreeView };
+//# sourceMappingURL=chunk-KVREBGWA.js.map
+//# sourceMappingURL=chunk-KVREBGWA.js.map