@adecore/ui 0.31.12 → 0.32.0

package/dist/tree/parts.js

@@ -1,113 +1,740 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 import { ChevronRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Checkbox as UICheckbox } from '../Checkbox.js';
-import { Icon } from '../Icon.js';
+import { Checkbox as UICheckbox } from "../Checkbox.js";
+import { Icon } from "../Icon.js";
 import { mergeRefs } from '../merge-refs.js';
 import { treeRowStyle } from './style.js';
-import { TREE_ROWS, useTreeShift } from './use-tree-shift.js';
+import { TREE_ROWS, useTreeShift } from "./use-tree-shift.js";
 /* A handler that keeps the event to the control, so the row under it never sees the press. */
-const stopped = (handler) => (event) => {
-    event.stopPropagation();
-    handler?.(event);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const stopped = handler => event => {
+  event.stopPropagation();
+  handler?.(event);
 };
-export function TreeRoot({ overflow = 'truncate', render, className, ref, children, ...props }) {
-    const { attach, bar } = useTreeShift(TREE_ROWS);
-    const scrolls = overflow === 'scroll';
-    const rootRef = useCallback((node) => {
-        attach(scrolls ? node : null);
-        mergeRefs(ref)(node);
-    }, [scrolls, ref, attach]);
-    return useRender({
-        render,
-        ref: rootRef,
-        defaultTagName: 'div',
-        props: {
-            role: 'tree',
-            ...props,
-            'data-overflow': overflow,
-            className: clsx('adecore-tree', className),
-            children: (_jsxs(_Fragment, { children: [_jsx("style", { children: treeRowStyle('.adecore-tree-row') }), children, scrolls && bar] }))
-        }
+export function TreeRoot(t0) {
+  const $ = _c(26);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      overflow: t1,
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+    $[6] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+    t1 = $[6];
+  }
+  const overflow = t1 === undefined ? "truncate" : t1;
+  const {
+    attach,
+    bar
+  } = useTreeShift(TREE_ROWS);
+  const scrolls = overflow === "scroll";
+  let t2;
+  if ($[7] !== attach || $[8] !== ref || $[9] !== scrolls) {
+    t2 = node => {
+      attach(scrolls ? node : null);
+      mergeRefs(ref)(node);
+    };
+    $[7] = attach;
+    $[8] = ref;
+    $[9] = scrolls;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const rootRef = t2;
+  let t3;
+  if ($[11] !== className) {
+    t3 = clsx("adecore-tree", className);
+    $[11] = className;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/_jsx("style", {
+      children: treeRowStyle(".adecore-tree-row")
     });
-}
-export function TreeRow({ level = 1, selected = false, joinedStart = false, joinedEnd = false, interactive = true, render, className, ref, style, children, ...props }) {
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'div',
-        props: {
-            role: 'treeitem',
-            'aria-level': level,
-            'aria-selected': selected,
-            ...props,
-            'data-selected': selected,
-            'data-joined-start': joinedStart,
-            'data-joined-end': joinedEnd,
-            'data-interactive': interactive,
-            className: clsx('adecore-tree-row', className),
-            style: { paddingInlineStart: 4 + (Math.max(1, level) - 1) * 16, ...style },
-            children: (_jsxs(_Fragment, { children: [Array.from({ length: Math.max(0, level - 1) }, (_, index) => (_jsx("span", { "aria-hidden": true, className: "adecore-tree-guide", style: { insetInlineStart: 11 + index * 16 } }, index))), children] }))
-        }
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  const t5 = scrolls && bar;
+  let t6;
+  if ($[14] !== children || $[15] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t4, children, t5]
     });
+    $[14] = children;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== overflow || $[18] !== props || $[19] !== t3 || $[20] !== t6) {
+    t7 = {
+      role: "tree",
+      ...props,
+      "data-overflow": overflow,
+      className: t3,
+      children: t6
+    };
+    $[17] = overflow;
+    $[18] = props;
+    $[19] = t3;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== render || $[23] !== rootRef || $[24] !== t7) {
+    t8 = {
+      render,
+      ref: rootRef,
+      defaultTagName: "div",
+      props: t7
+    };
+    $[22] = render;
+    $[23] = rootRef;
+    $[24] = t7;
+    $[25] = t8;
+  } else {
+    t8 = $[25];
+  }
+  return useRender(t8);
 }
-export function TreeChevronSlot({ render, className, ref, ...props }) {
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'span',
-        props: { 'aria-hidden': true, ...props, className: clsx('adecore-tree-chevron-slot', className) }
+export function TreeRow(t0) {
+  const $ = _c(36);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== t0) {
+    ({
+      level: t1,
+      selected: t2,
+      joinedStart: t3,
+      joinedEnd: t4,
+      interactive: t5,
+      render,
+      className,
+      ref,
+      style,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+    $[6] = style;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+    style = $[6];
+    t1 = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+  }
+  const level = t1 === undefined ? 1 : t1;
+  const selected = t2 === undefined ? false : t2;
+  const joinedStart = t3 === undefined ? false : t3;
+  const joinedEnd = t4 === undefined ? false : t4;
+  const interactive = t5 === undefined ? true : t5;
+  let t6;
+  if ($[12] !== className) {
+    t6 = clsx("adecore-tree-row", className);
+    $[12] = className;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  const t7 = 4 + (Math.max(1, level) - 1) * 16;
+  let t8;
+  if ($[14] !== style || $[15] !== t7) {
+    t8 = {
+      paddingInlineStart: t7,
+      ...style
+    };
+    $[14] = style;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== level) {
+    t9 = Array.from({
+      length: Math.max(0, level - 1)
+    }, _temp);
+    $[17] = level;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== children || $[20] !== t9) {
+    t10 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t9, children]
     });
+    $[19] = children;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] !== interactive || $[23] !== joinedEnd || $[24] !== joinedStart || $[25] !== level || $[26] !== props || $[27] !== selected || $[28] !== t10 || $[29] !== t6 || $[30] !== t8) {
+    t11 = {
+      role: "treeitem",
+      "aria-level": level,
+      "aria-selected": selected,
+      ...props,
+      "data-selected": selected,
+      "data-joined-start": joinedStart,
+      "data-joined-end": joinedEnd,
+      "data-interactive": interactive,
+      className: t6,
+      style: t8,
+      children: t10
+    };
+    $[22] = interactive;
+    $[23] = joinedEnd;
+    $[24] = joinedStart;
+    $[25] = level;
+    $[26] = props;
+    $[27] = selected;
+    $[28] = t10;
+    $[29] = t6;
+    $[30] = t8;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  let t12;
+  if ($[32] !== ref || $[33] !== render || $[34] !== t11) {
+    t12 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t11
+    };
+    $[32] = ref;
+    $[33] = render;
+    $[34] = t11;
+    $[35] = t12;
+  } else {
+    t12 = $[35];
+  }
+  return useRender(t12);
+}
+function _temp(_, index) {
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": true,
+    className: "adecore-tree-guide",
+    style: {
+      insetInlineStart: 11 + index * 16
+    }
+  }, index);
+}
+export function TreeChevronSlot(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx("adecore-tree-chevron-slot", className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      "aria-hidden": true,
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
 }
-export function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }) {
-    const { t } = useTranslation('ui');
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'button',
-        props: {
-            type: 'button',
-            tabIndex: -1,
-            'aria-label': t(expanded ? 'tree.collapse' : 'tree.expand'),
-            ...props,
-            className: clsx('adecore-tree-chevron-slot', className),
-            onClick: (event) => {
-                event.stopPropagation();
-                onClick?.(event);
-                if (!event.defaultPrevented) {
-                    onExpandedChange?.(!expanded);
-                }
-            },
-            onDoubleClick: stopped(onDoubleClick),
-            children: _jsx(Icon, { icon: ChevronRight, size: 12, className: expanded ? 'rotate-90' : undefined })
-        }
+export function TreeChevron(t0) {
+  const $ = _c(33);
+  let className;
+  let expanded;
+  let onClick;
+  let onDoubleClick;
+  let onExpandedChange;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      expanded,
+      onExpandedChange,
+      render,
+      className,
+      ref,
+      onClick,
+      onDoubleClick,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = expanded;
+    $[3] = onClick;
+    $[4] = onDoubleClick;
+    $[5] = onExpandedChange;
+    $[6] = props;
+    $[7] = ref;
+    $[8] = render;
+  } else {
+    className = $[1];
+    expanded = $[2];
+    onClick = $[3];
+    onDoubleClick = $[4];
+    onExpandedChange = $[5];
+    props = $[6];
+    ref = $[7];
+    render = $[8];
+  }
+  const {
+    t
+  } = useTranslation("ui");
+  const t1 = expanded ? "tree.collapse" : "tree.expand";
+  let t2;
+  if ($[9] !== t || $[10] !== t1) {
+    t2 = t(t1);
+    $[9] = t;
+    $[10] = t1;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  let t3;
+  if ($[12] !== className) {
+    t3 = clsx("adecore-tree-chevron-slot", className);
+    $[12] = className;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  let t4;
+  if ($[14] !== expanded || $[15] !== onClick || $[16] !== onExpandedChange) {
+    t4 = event => {
+      event.stopPropagation();
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        onExpandedChange?.(!expanded);
+      }
+    };
+    $[14] = expanded;
+    $[15] = onClick;
+    $[16] = onExpandedChange;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  let t5;
+  if ($[18] !== onDoubleClick) {
+    t5 = stopped(onDoubleClick);
+    $[18] = onDoubleClick;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  const t6 = expanded ? "rotate-90" : undefined;
+  let t7;
+  if ($[20] !== t6) {
+    t7 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronRight,
+      size: 12,
+      className: t6
     });
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== props || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t5 || $[27] !== t7) {
+    t8 = {
+      type: "button",
+      tabIndex: -1,
+      "aria-label": t2,
+      ...props,
+      className: t3,
+      onClick: t4,
+      onDoubleClick: t5,
+      children: t7
+    };
+    $[22] = props;
+    $[23] = t2;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t7;
+    $[28] = t8;
+  } else {
+    t8 = $[28];
+  }
+  let t9;
+  if ($[29] !== ref || $[30] !== render || $[31] !== t8) {
+    t9 = {
+      render,
+      ref,
+      defaultTagName: "button",
+      props: t8
+    };
+    $[29] = ref;
+    $[30] = render;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  return useRender(t9);
 }
-export function TreeLabel({ render, className, ref, ...props }) {
-    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-label', className) } });
+export function TreeLabel(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx("adecore-tree-label", className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
 }
-export function TreeDecoration({ render, className, ref, ...props }) {
-    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-decoration', className) } });
+export function TreeDecoration(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx("adecore-tree-decoration", className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
 }
-export function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }) {
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'span',
-        props: {
-            ...props,
-            'data-tree-control': true,
-            className: clsx('adecore-tree-control', className),
-            onClick: stopped(onClick),
-            onDoubleClick: stopped(onDoubleClick),
-            onKeyDown: stopped(onKeyDown),
-            onPointerDown: stopped(onPointerDown)
-        }
-    });
+export function TreeControl(t0) {
+  const $ = _c(30);
+  let className;
+  let onClick;
+  let onDoubleClick;
+  let onKeyDown;
+  let onPointerDown;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      onClick,
+      onDoubleClick,
+      onKeyDown,
+      onPointerDown,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = onClick;
+    $[3] = onDoubleClick;
+    $[4] = onKeyDown;
+    $[5] = onPointerDown;
+    $[6] = props;
+    $[7] = ref;
+    $[8] = render;
+  } else {
+    className = $[1];
+    onClick = $[2];
+    onDoubleClick = $[3];
+    onKeyDown = $[4];
+    onPointerDown = $[5];
+    props = $[6];
+    ref = $[7];
+    render = $[8];
+  }
+  let t1;
+  if ($[9] !== className) {
+    t1 = clsx("adecore-tree-control", className);
+    $[9] = className;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  let t2;
+  if ($[11] !== onClick) {
+    t2 = stopped(onClick);
+    $[11] = onClick;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  let t3;
+  if ($[13] !== onDoubleClick) {
+    t3 = stopped(onDoubleClick);
+    $[13] = onDoubleClick;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== onKeyDown) {
+    t4 = stopped(onKeyDown);
+    $[15] = onKeyDown;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  let t5;
+  if ($[17] !== onPointerDown) {
+    t5 = stopped(onPointerDown);
+    $[17] = onPointerDown;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== props || $[20] !== t1 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5) {
+    t6 = {
+      ...props,
+      "data-tree-control": true,
+      className: t1,
+      onClick: t2,
+      onDoubleClick: t3,
+      onKeyDown: t4,
+      onPointerDown: t5
+    };
+    $[19] = props;
+    $[20] = t1;
+    $[21] = t2;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  let t7;
+  if ($[26] !== ref || $[27] !== render || $[28] !== t6) {
+    t7 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t6
+    };
+    $[26] = ref;
+    $[27] = render;
+    $[28] = t6;
+    $[29] = t7;
+  } else {
+    t7 = $[29];
+  }
+  return useRender(t7);
 }
 export function TreeCheckbox(props) {
-    return (_jsx(TreeControl, { children: _jsx(UICheckbox, { ...props }) }));
-}
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/_jsx(TreeControl, {
+      children: /*#__PURE__*/_jsx(UICheckbox, {
+        ...props
+      })
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}