@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.13

package/dist/components/Toolbar/Toolbar.js

@@ -1,79 +1,77 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as k, useState as f, useRef as E, useEffect as S, createElement as h } from "react";
-import B from "clsx";
-import { mergeRefs as q } from "../../utils/ref.js";
-import { Tooltip as w } from "../Tooltip/Tooltip.js";
-import { Button as m } from "../Button/Button.js";
-import { Dropdown as z } from "../Dropdown/Dropdown.js";
-import { IconButton as H } from "../Button/IconButton.js";
-const V = /* @__PURE__ */ k(({
-  items: u,
-  variant: v = "default",
-  align: a = "space",
-  isBlock: d = !1,
-  ariaControls: T,
-  className: x
-}, F) => {
-  const [i, D] = f(0), [y, j] = f([]), [c, K] = f(), [l, R] = f(), I = E(), A = B("toolbar z-1000 bg-white", x, {
-    default: v === "default",
-    "no-shadow": v === "no-shadow",
-    "d-flex": d,
-    "d-inline-flex": !d,
-    "overflow-x-auto": d,
-    "justify-content-start": a === "left",
-    "justify-content-between": a === "space",
-    "justify-content-center": a === "center",
-    "justify-content-end": a === "right"
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, createElement } from "react";
+import clsx from "clsx";
+import { mergeRefs } from "../../utils/ref.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import Button from "../Button/Button.js";
+import Dropdown from "../Dropdown/Dropdown.js";
+import IconButton from "../Button/IconButton.js";
+const Toolbar = /* @__PURE__ */ forwardRef(({
+  items,
+  variant = "default",
+  align = "space",
+  isBlock = !1,
+  ariaControls,
+  className
+}, ref) => {
+  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), classes = clsx("toolbar z-1000 bg-white", className, {
+    default: variant === "default",
+    "no-shadow": variant === "no-shadow",
+    "d-flex": isBlock,
+    "d-inline-flex": !isBlock,
+    "overflow-x-auto": isBlock,
+    "justify-content-start": align === "left",
+    "justify-content-between": align === "space",
+    "justify-content-center": align === "center",
+    "justify-content-end": align === "right"
   });
-  S(() => {
-    var n;
-    const o = (n = I.current) == null ? void 0 : n.querySelectorAll("button"), r = [];
-    let s = !1;
-    o == null || o.forEach((e) => {
-      e.disabled || (s || (K(e), s = !0), R(e), r.push(e));
-    }), j(r), D(u.findIndex((e) => (e.type === "button" || e.type === "icon") && !e.props.disabled));
-  }, [u]);
-  const L = (o) => {
-    o.target.classList.add("focus");
-  }, N = (o) => {
-    o.target.classList.remove("focus");
-  }, p = (o) => {
-    var s, n;
-    const r = y.indexOf(o.currentTarget);
-    switch (o.code) {
+  useEffect(() => {
+    var _a;
+    const buttons = (_a = divToolbarRef.current) == null ? void 0 : _a.querySelectorAll("button"), enabledItems = [];
+    let isfirstItemSet = !1;
+    buttons == null || buttons.forEach((item) => {
+      item.disabled || (isfirstItemSet || (setFirstA11yNavigationItem(item), isfirstItemSet = !0), setA11yNavigationLastItem(item), enabledItems.push(item));
+    }), setA11yNavigationItems(enabledItems), setFirstFocusableItemIndex(items.findIndex((item) => (item.type === "button" || item.type === "icon") && !item.props.disabled));
+  }, [items]);
+  const handleFocus = (event) => {
+    event.target.classList.add("focus");
+  }, handleBlur = (event) => {
+    event.target.classList.remove("focus");
+  }, handleKeyDown = (event) => {
+    var _a, _b;
+    const index = a11yNavigationItems.indexOf(event.currentTarget);
+    switch (event.code) {
       case "ArrowLeft":
-        o.currentTarget === c ? l == null || l.focus() : (s = y[r - 1]) == null || s.focus();
+        event.currentTarget === firstA11yNavigationItem ? lastA11yNavigationItem == null || lastA11yNavigationItem.focus() : (_a = a11yNavigationItems[index - 1]) == null || _a.focus();
         break;
       case "ArrowRight":
-        o.currentTarget === l ? c == null || c.focus() : (n = y[r + 1]) == null || n.focus();
+        event.currentTarget === lastA11yNavigationItem ? firstA11yNavigationItem == null || firstA11yNavigationItem.focus() : (_b = a11yNavigationItems[index + 1]) == null || _b.focus();
         break;
     }
-  }, b = (o) => {
-    var r;
-    return typeof o.tooltip == "string" ? o.tooltip : (r = o.tooltip) == null ? void 0 : r.message;
-  }, g = (o) => {
-    var r;
-    return typeof o.tooltip != "string" ? (r = o.tooltip) == null ? void 0 : r.position : "top";
+  }, renderTooltipMessage = (item) => {
+    var _a;
+    return typeof item.tooltip == "string" ? item.tooltip : (_a = item.tooltip) == null ? void 0 : _a.message;
+  }, renderTooltipPosition = (item) => {
+    var _a;
+    return typeof item.tooltip != "string" ? (_a = item.tooltip) == null ? void 0 : _a.position : "top";
   };
-  return /* @__PURE__ */ t("div", { ref: q(F, I), className: A, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": T, onFocus: L, onBlur: N, children: u.map((o, r) => {
-    if (o.visibility === "hide") return null;
-    switch (o.type) {
+  return /* @__PURE__ */ jsx("div", { ref: mergeRefs(ref, divToolbarRef), className: classes, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": ariaControls, onFocus: handleFocus, onBlur: handleBlur, children: items.map((item, index) => {
+    if (item.visibility === "hide") return null;
+    switch (item.type) {
       case "divider":
-        return /* @__PURE__ */ t("div", { className: "toolbar-divider" }, o.name ?? r);
+        return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
       case "button":
-        return /* @__PURE__ */ t(w, { message: b(o), placement: g(o), children: /* @__PURE__ */ h(m, { ...o.props, key: o.name ?? r, color: o.props.color ? o.props.color : "tertiary", variant: "ghost", tabIndex: r === i ? 0 : -1, onKeyDown: p }) }, o.name ?? r);
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "icon":
-        return /* @__PURE__ */ t(w, { message: b(o), placement: g(o), children: /* @__PURE__ */ h(H, { ...o.props, key: o.name ?? r, color: o.props.color ? o.props.color : "tertiary", variant: o.props.variant ? o.props.variant : "ghost", tabIndex: r === i ? 0 : -1, onKeyDown: p }) }, o.name ?? r);
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(IconButton, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: item.props.variant ? item.props.variant : "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "dropdown":
-        return /* @__PURE__ */ h(z, { ...o.props, key: o.name ?? r, extraTriggerKeyDownHandler: p, overflow: o.overflow });
+        return /* @__PURE__ */ createElement(Dropdown, { ...item.props, key: item.name ?? index, extraTriggerKeyDownHandler: handleKeyDown, overflow: item.overflow });
       case "primary":
-        return /* @__PURE__ */ t(w, { message: b(o), placement: g(o), children: /* @__PURE__ */ t(m, { ...o.props, variant: "filled", color: "primary", tabIndex: r === i ? 0 : -1, onKeyDown: p }) }, o.name ?? r);
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ jsx(Button, { ...item.props, variant: "filled", color: "primary", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
     }
     return null;
   }) });
-});
+}), Toolbar$1 = Toolbar;
 export {
-  V as Toolbar,
-  V as default
+  Toolbar$1 as default
 };
-//# sourceMappingURL=Toolbar.js.map

package/dist/components/Toolbar/index.d.ts

@@ -1 +1,2 @@
+export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -18,5 +18,5 @@ export interface TooltipProps {
      */
     icon?: ReactNode;
 }
-export declare const Tooltip: ({ children, message, icon, placement, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ children, message, icon, placement, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -1,42 +1,40 @@
-import { jsxs as t, Fragment as h, jsx as o } from "react/jsx-runtime";
-import { useState as e } from "react";
-import w from "clsx";
-import { usePopper as E } from "react-popper";
-const j = ({
-  children: i,
-  message: r,
-  icon: l = null,
-  placement: a = "auto"
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { usePopper } from "react-popper";
+const Tooltip = ({
+  children,
+  message,
+  icon = null,
+  placement = "auto"
 }) => {
-  const [p, m] = e(null), [c, d] = e(null), [f, u] = e(null), {
-    styles: s,
-    attributes: v
-  } = E(p, c, {
-    placement: a,
+  const [referenceElement, setReferenceElement] = useState(null), [popperElement, setPopperElement] = useState(null), [arrowElement, setArrowElement] = useState(null), {
+    styles,
+    attributes
+  } = usePopper(referenceElement, popperElement, {
+    placement,
     modifiers: [{
       name: "arrow",
       options: {
-        element: f
+        element: arrowElement
       }
     }]
-  }), [b, n] = e(!1);
-  return /* @__PURE__ */ t(h, { children: [
-    /* @__PURE__ */ o("div", { className: "d-inline-block position-relative z-2", ref: m, onMouseEnter: () => {
-      n(!0);
+  }), [visible, setVisible] = useState(!1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "d-inline-block position-relative z-2", ref: setReferenceElement, onMouseEnter: () => {
+      setVisible(!0);
     }, onMouseLeave: () => {
-      n(!1);
-    }, children: i }),
-    b && r && /* @__PURE__ */ t("div", { className: w("tooltip d-block show mb-12", "bs-tooltip-auto"), ref: d, style: s.popper, ...v.popper, children: [
-      /* @__PURE__ */ t("div", { className: "tooltip-inner shadow-hover d-flex gap-8 align-items-center", children: [
-        l && l,
-        /* @__PURE__ */ o("div", { children: r })
+      setVisible(!1);
+    }, children }),
+    visible && message && /* @__PURE__ */ jsxs("div", { className: clsx("tooltip d-block show mb-12", "bs-tooltip-auto"), ref: setPopperElement, style: styles.popper, ...attributes.popper, children: [
+      /* @__PURE__ */ jsxs("div", { className: "tooltip-inner shadow-hover d-flex gap-8 align-items-center", children: [
+        icon && icon,
+        /* @__PURE__ */ jsx("div", { children: message })
       ] }),
-      /* @__PURE__ */ o("div", { className: "tooltip-arrow", ref: u, style: s.arrow })
+      /* @__PURE__ */ jsx("div", { className: "tooltip-arrow", ref: setArrowElement, style: styles.arrow })
     ] })
   ] });
-};
+}, Tooltip$1 = Tooltip;
 export {
-  j as Tooltip,
-  j as default
+  Tooltip$1 as default
 };
-//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/index.d.ts

@@ -1 +1,2 @@
+export { default as Tooltip } from './Tooltip';
 export * from './Tooltip';

package/dist/components/TreeView/TreeItem.js

@@ -1,55 +1,54 @@
-import { jsx as n, jsxs as o } from "react/jsx-runtime";
-import { useState as D, useEffect as K } from "react";
-import { useTranslation as U } from "react-i18next";
-import B from "./hooks/useTreeItemEvents.js";
-import { Icon as i } from "../Icon/Icon.js";
-const $ = (u) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { RafterRight, RafterDown, Folder } from "@edifice.io/icons";
+import { useTranslation } from "react-i18next";
+import useTreeItemEvents from "./hooks/useTreeItemEvents.js";
+const TreeItem = (props) => {
   const {
-    nodeId: t,
-    label: m,
-    children: r,
-    section: s,
-    selected: h,
-    onItemSelect: p,
-    onItemFold: y,
-    onItemUnfold: I,
-    onItemFocus: x,
-    onItemBlur: g,
-    selectedNodesIds: e
-  } = u, {
-    t: A
-  } = U(), [l, a] = D(!1), {
-    handleItemClick: b,
-    handleItemKeyDown: v,
-    handleItemFoldUnfoldClick: F,
-    handleItemFoldUnfoldKeyDown: w,
-    handleItemFocus: z,
-    handleItemBlur: k
-  } = B(t, m, l, a, p, y, I, x, g);
-  K(() => {
-    if (e != null && e.length && (e == null ? void 0 : e.length) >= 1) {
-      const C = e[e.length - 1];
-      e.some((f) => f === t && t !== C ? (a(!0), f === t) : (a(!1), !1));
+    nodeId,
+    label,
+    children,
+    section,
+    selected,
+    onItemSelect,
+    onItemFold,
+    onItemUnfold,
+    onItemFocus,
+    onItemBlur,
+    selectedNodesIds
+  } = props, {
+    t
+  } = useTranslation(), [expanded, setExpanded] = useState(!1), {
+    handleItemClick,
+    handleItemKeyDown,
+    handleItemFoldUnfoldClick,
+    handleItemFoldUnfoldKeyDown,
+    handleItemFocus,
+    handleItemBlur
+  } = useTreeItemEvents(nodeId, label, expanded, setExpanded, onItemSelect, onItemFold, onItemUnfold, onItemFocus, onItemBlur);
+  useEffect(() => {
+    if (selectedNodesIds != null && selectedNodesIds.length && (selectedNodesIds == null ? void 0 : selectedNodesIds.length) >= 1) {
+      const lastNodeId = selectedNodesIds[selectedNodesIds.length - 1];
+      selectedNodesIds.some((node) => node === nodeId && nodeId !== lastNodeId ? (setExpanded(!0), node === nodeId) : (setExpanded(!1), !1));
     } else
-      a(!1);
-  }, [t, e]);
-  const d = s ? "16" : "12", c = () => /* @__PURE__ */ n("li", { id: `listitem_${t}`, role: "treeitem", "aria-selected": h, "aria-expanded": l, children: /* @__PURE__ */ o("div", { children: [
-    /* @__PURE__ */ o("div", { className: "action-container d-flex align-items-center gap-8 px-2", children: [
-      /* @__PURE__ */ o("div", { className: `py-8 ${Array.isArray(r) ? null : "invisible"}`, tabIndex: 0, role: "button", onClick: F, onKeyDown: w, "aria-label": A("foldUnfold"), children: [
-        Array.isArray(r) && !!r.length && !l && /* @__PURE__ */ n(i, { name: "rafter-right", size: d }),
-        Array.isArray(r) && !!r.length && l && /* @__PURE__ */ n(i, { name: "rafter-down", size: d }),
-        !Array.isArray(r) && /* @__PURE__ */ n(i, { name: "rafter-right", size: d, "aria-hidden": "true" })
+      setExpanded(!1);
+  }, [nodeId, selectedNodesIds]);
+  const rafterSize = section ? 16 : 12, renderItem = () => /* @__PURE__ */ jsx("li", { id: `listitem_${nodeId}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "action-container d-flex align-items-center gap-8 px-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: `py-8 ${Array.isArray(children) ? null : "invisible"}`, tabIndex: 0, role: "button", onClick: handleItemFoldUnfoldClick, onKeyDown: handleItemFoldUnfoldKeyDown, "aria-label": t("foldUnfold"), children: [
+        Array.isArray(children) && !!children.length && !expanded && /* @__PURE__ */ jsx(RafterRight, { title: t("foldUnfold"), width: rafterSize, height: rafterSize }),
+        Array.isArray(children) && !!children.length && expanded && /* @__PURE__ */ jsx(RafterDown, { title: t("foldUnfold"), width: rafterSize, height: rafterSize }),
+        !Array.isArray(children) && /* @__PURE__ */ jsx(RafterRight, { title: t("foldUnfold"), width: rafterSize, height: rafterSize, "aria-hidden": "true" })
       ] }),
-      /* @__PURE__ */ o("div", { tabIndex: 0, role: "button", className: "flex-fill d-flex align-items-center text-truncate gap-8 py-8", onClick: b, onKeyDown: v, onFocus: z, onBlur: k, children: [
-        s && /* @__PURE__ */ n(i, { name: "folder", size: "20" }),
-        /* @__PURE__ */ n("span", { className: "text-truncate", children: m })
+      /* @__PURE__ */ jsxs("div", { tabIndex: 0, role: "button", className: "flex-fill d-flex align-items-center text-truncate gap-8 py-8", onClick: handleItemClick, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, onBlur: handleItemBlur, children: [
+        section && /* @__PURE__ */ jsx(Folder, { title: t("folder"), width: 20, height: 20 }),
+        /* @__PURE__ */ jsx("span", { className: "text-truncate", children: label })
       ] })
     ] }),
-    Array.isArray(r) && /* @__PURE__ */ n("ul", { role: "group", children: r })
-  ] }) }, t);
-  return s ? /* @__PURE__ */ n("ul", { role: "tree", className: "m-0 p-0", children: c() }) : c();
+    Array.isArray(children) && /* @__PURE__ */ jsx("ul", { role: "group", children })
+  ] }) }, nodeId);
+  return section ? /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: renderItem() }) : renderItem();
 };
 export {
-  $ as default
+  TreeItem as default
 };
-//# sourceMappingURL=TreeItem.js.map

package/dist/components/TreeView/TreeView.d.ts

@@ -36,5 +36,5 @@ export interface TreeViewProps {
 /**
  * UI TreeView Component
  */
-export declare const TreeView: import('react').ForwardRefExoticComponent<TreeViewProps & import('react').RefAttributes<TreeViewHandlers>>;
+declare const TreeView: import('react').ForwardRefExoticComponent<TreeViewProps & import('react').RefAttributes<TreeViewHandlers>>;
 export default TreeView;

package/dist/components/TreeView/TreeView.js

@@ -1,41 +1,39 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as A, useState as x, useEffect as y, useMemo as F, useImperativeHandle as S } from "react";
-import b from "./TreeItem.js";
-const H = /* @__PURE__ */ A((u, h) => {
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useMemo, useImperativeHandle } from "react";
+import TreeItem from "./TreeItem.js";
+const TreeView = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
-    data: f,
-    onTreeItemSelect: l,
-    onTreeItemFold: r,
-    onTreeItemUnfold: c,
-    onTreeItemFocus: a,
-    onTreeItemBlur: s,
-    selectedNodesIds: t
-  } = u, [d, n] = x(null);
-  y(() => {
-    t != null && t.length && (t == null ? void 0 : t.length) >= 1 ? n(t[t.length - 1]) : n(null);
-  }, [t]);
-  const i = F(() => ({
+    data,
+    onTreeItemSelect,
+    onTreeItemFold,
+    onTreeItemUnfold,
+    onTreeItemFocus,
+    onTreeItemBlur,
+    selectedNodesIds
+  } = props, [selectedItem, setSelectedItem] = useState(null);
+  useEffect(() => {
+    selectedNodesIds != null && selectedNodesIds.length && (selectedNodesIds == null ? void 0 : selectedNodesIds.length) >= 1 ? setSelectedItem(selectedNodesIds[selectedNodesIds.length - 1]) : setSelectedItem(null);
+  }, [selectedNodesIds]);
+  const handlers = useMemo(() => ({
     unselectAll() {
-      n(null);
+      setSelectedItem(null);
     },
-    select(e) {
-      n(e), l == null || l(e);
+    select(nodeId) {
+      setSelectedItem(nodeId), onTreeItemSelect == null || onTreeItemSelect(nodeId);
     }
-  }), [l]);
-  S(h, () => i, [i]);
-  const p = (e) => {
-    r == null || r(e);
-  }, I = (e) => {
-    c == null || c(e);
-  }, g = (e) => {
-    a == null || a(e);
-  }, v = (e) => {
-    s == null || s(e);
-  }, m = (e) => /* @__PURE__ */ o(b, { nodeId: e.id, label: e.name, section: e.section, selectedNodesIds: t, selected: d === e.id, onItemSelect: i.select, onItemFold: p, onItemUnfold: I, onItemFocus: g, onItemBlur: v, children: Array.isArray(e.children) ? e.children.map((w) => m(w)) : null }, e.id);
-  return /* @__PURE__ */ o("div", { className: "treeview", children: m(f) });
-});
+  }), [onTreeItemSelect]);
+  useImperativeHandle(ref, () => handlers, [handlers]);
+  const handleItemFold = (nodeId) => {
+    onTreeItemFold == null || onTreeItemFold(nodeId);
+  }, handleItemUnfold = (nodeId) => {
+    onTreeItemUnfold == null || onTreeItemUnfold(nodeId);
+  }, handleItemFocus = (nodeId) => {
+    onTreeItemFocus == null || onTreeItemFocus(nodeId);
+  }, handleItemBlur = (nodeId) => {
+    onTreeItemBlur == null || onTreeItemBlur(nodeId);
+  }, renderTree = (node) => /* @__PURE__ */ jsx(TreeItem, { nodeId: node.id, label: node.name, section: node.section, selectedNodesIds, selected: selectedItem === node.id, onItemSelect: handlers.select, onItemFold: handleItemFold, onItemUnfold: handleItemUnfold, onItemFocus: handleItemFocus, onItemBlur: handleItemBlur, children: Array.isArray(node.children) ? node.children.map((item) => renderTree(item)) : null }, node.id);
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: renderTree(data) });
+}), TreeView$1 = TreeView;
 export {
-  H as TreeView,
-  H as default
+  TreeView$1 as default
 };
-//# sourceMappingURL=TreeView.js.map

package/dist/components/TreeView/hooks/useTreeItemEvents.js

@@ -1,29 +1,28 @@
-function y(p, g, D, c, r, s, f, i, h) {
-  const u = (a) => {
-    a.preventDefault(), r == null || r(p), l(), a.stopPropagation();
-  }, d = (a) => {
-    (a.code === "Enter" || a.code === "Space") && (a.preventDefault(), r == null || r(p), l(), a.stopPropagation());
-  }, l = () => {
-    c(!D), D ? s == null || s(p) : f == null || f(p);
+function useTreeItemEvents(nodeId, label, expanded, setExpanded, onItemSelect, onItemFold, onItemUnfold, onItemFocus, onItemBlur) {
+  const handleItemClick = (event) => {
+    event.preventDefault(), onItemSelect == null || onItemSelect(nodeId), itemFoldUnfold(), event.stopPropagation();
+  }, handleItemKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), onItemSelect == null || onItemSelect(nodeId), itemFoldUnfold(), event.stopPropagation());
+  }, itemFoldUnfold = () => {
+    setExpanded(!expanded), expanded ? onItemFold == null || onItemFold(nodeId) : onItemUnfold == null || onItemUnfold(nodeId);
   };
   return {
-    handleItemClick: u,
-    handleItemKeyDown: d,
-    handleItemFoldUnfoldClick: (a) => {
-      a.preventDefault(), l(), a.stopPropagation();
+    handleItemClick,
+    handleItemKeyDown,
+    handleItemFoldUnfoldClick: (event) => {
+      event.preventDefault(), itemFoldUnfold(), event.stopPropagation();
     },
-    handleItemFoldUnfoldKeyDown: (a) => {
-      (a.code === "Enter" || a.code === "Space") && (a.preventDefault(), l(), a.stopPropagation());
+    handleItemFoldUnfoldKeyDown: (event) => {
+      (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), itemFoldUnfold(), event.stopPropagation());
     },
-    handleItemFocus: (a) => {
-      a.preventDefault(), i == null || i(p);
+    handleItemFocus: (event) => {
+      event.preventDefault(), onItemFocus == null || onItemFocus(nodeId);
     },
-    handleItemBlur: (a) => {
-      a.preventDefault(), h == null || h(p);
+    handleItemBlur: (event) => {
+      event.preventDefault(), onItemBlur == null || onItemBlur(nodeId);
     }
   };
 }
 export {
-  y as default
+  useTreeItemEvents as default
 };
-//# sourceMappingURL=useTreeItemEvents.js.map

package/dist/components/TreeView/index.d.ts

@@ -1,2 +1,3 @@
+export { default as TreeView } from './TreeView';
 export * from './TreeNode';
 export * from './TreeView';

package/dist/components/UploadCard/UploadCard.js

@@ -1,73 +1,72 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useTranslation as k } from "react-i18next";
-import { Card as c } from "../Card/Card.js";
-import P from "../../core/usePaths/usePaths.js";
-import { Button as B } from "../Button/Button.js";
-import { Icon as r } from "../Icon/Icon.js";
-import { Image as p } from "../Image/Image.js";
-import { Tooltip as n } from "../Tooltip/Tooltip.js";
-import { Loading as L } from "../Loading/Loading.js";
-import { IconButton as g } from "../Button/IconButton.js";
-const A = ({
-  item: h,
-  status: o = "idle",
-  isClickable: u = !1,
-  isSelectable: x = !1,
-  onDelete: v,
-  onEdit: f,
-  onRetry: N
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Reset, SuccessOutline, Close, Wand } from "@edifice.io/icons";
+import { useTranslation } from "react-i18next";
+import Button from "../Button/Button.js";
+import Image from "../Image/Image.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import Loading from "../Loading/Loading.js";
+import Card from "../Card/Card.js";
+import IconButton from "../Button/IconButton.js";
+import usePaths from "../../core/usePaths/usePaths.js";
+const UploadCard = ({
+  item,
+  status = "idle",
+  isClickable = !1,
+  isSelectable = !1,
+  onDelete,
+  onEdit,
+  onRetry
 }) => {
-  const [m] = P(), {
-    t: a
-  } = k(), {
-    src: y,
-    name: w,
-    info: t
-  } = h, d = o === "idle", I = o === "loading", b = o === "success", C = t == null ? void 0 : t.type.startsWith("image"), T = `${m}/common/image-placeholder.png`, i = {
+  const [imagePath] = usePaths(), {
+    t
+  } = useTranslation(), {
+    src,
+    name,
+    info
+  } = item, isIdle = status === "idle", isLoading = status === "loading", isSuccess = status === "success", isTypeImage = info == null ? void 0 : info.type.startsWith("image"), imgPlaceholder = `${imagePath}/common/image-placeholder.png`, defaultMapping = {
     text: "",
     context: null,
-    image: /* @__PURE__ */ e("img", { src: T, alt: "", width: "48", height: "48" })
-  }, s = {
+    image: /* @__PURE__ */ jsx("img", { src: imgPlaceholder, alt: "", width: "48", height: "48" })
+  }, mapping = {
     error: {
-      text: /* @__PURE__ */ e("strong", { children: /* @__PURE__ */ e("small", { className: "text-danger caption", children: a("tiptap.upload.error") }) }),
-      context: /* @__PURE__ */ e(B, { leftIcon: /* @__PURE__ */ e(r, { name: "reset" }), variant: "ghost", color: "tertiary", onClick: N, children: a("tiptap.upload.retry") }),
-      image: /* @__PURE__ */ e(p, { alt: "", src: `${m}/common/image-status-error.svg`, objectFit: "cover" })
+      text: /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("small", { className: "text-danger caption", children: t("tiptap.upload.error") }) }),
+      context: /* @__PURE__ */ jsx(Button, { leftIcon: /* @__PURE__ */ jsx(Reset, {}), variant: "ghost", color: "tertiary", onClick: onRetry, children: t("tiptap.upload.retry") }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: `${imagePath}/common/image-status-error.svg`, objectFit: "cover" })
     },
-    idle: i,
+    idle: defaultMapping,
     loading: {
       text: "",
-      context: /* @__PURE__ */ e(n, { message: a("tiptap.tooltip.upload.loading"), placement: "top", children: /* @__PURE__ */ e(L, { isLoading: !0, loadingPosition: "left", className: "text-secondary" }) }),
-      image: i.image
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loading"), placement: "top", children: /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingPosition: "left", className: "text-secondary" }) }),
+      image: defaultMapping.image
     },
-    warning: i,
+    warning: defaultMapping,
     success: {
-      text: /* @__PURE__ */ l("em", { children: [
-        t == null ? void 0 : t.type,
+      text: /* @__PURE__ */ jsxs("em", { children: [
+        info == null ? void 0 : info.type,
         " ",
-        (t == null ? void 0 : t.weight) && `- ${t.weight}`
+        (info == null ? void 0 : info.weight) && `- ${info.weight}`
       ] }),
-      context: /* @__PURE__ */ e(n, { message: a("tiptap.tooltip.upload.loaded"), placement: "top", children: /* @__PURE__ */ e(r, { name: "success-outline", className: "text-success" }) }),
-      image: /* @__PURE__ */ e(p, { alt: "", src: y ?? "", width: "48", objectFit: "cover", className: "rounded", style: {
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loaded"), placement: "top", children: /* @__PURE__ */ jsx(SuccessOutline, { className: "text-success" }) }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: src ?? "", width: "48", objectFit: "cover", className: "rounded", style: {
         aspectRatio: 1 / 1
       } })
     },
-    unknown: i
-  }, j = () => C && /* @__PURE__ */ e(n, { message: a("tiptap.tooltip.upload.edit"), placement: "top", children: /* @__PURE__ */ e(g, { icon: /* @__PURE__ */ e(r, { name: "wand" }), variant: "ghost", "aria-label": a("tiptap.tooltip.upload.loading"), disabled: I || !b, onClick: f, color: "secondary" }) });
-  return /* @__PURE__ */ e(c, { isClickable: u, isSelectable: x, className: "card-upload", children: /* @__PURE__ */ l(c.Body, { children: [
-    /* @__PURE__ */ e("div", { className: "card-image", children: s[o].image }),
-    /* @__PURE__ */ l("div", { className: "text-truncate", children: [
-      /* @__PURE__ */ e(c.Text, { children: w }),
-      /* @__PURE__ */ e(c.Text, { className: "caption", children: s[o].text })
+    unknown: defaultMapping
+  }, canEditItem = () => isTypeImage && /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.edit"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(Wand, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.loading"), disabled: isLoading || !isSuccess, onClick: onEdit, color: "secondary" }) });
+  return /* @__PURE__ */ jsx(Card, { isClickable, isSelectable, className: "card-upload", children: /* @__PURE__ */ jsxs(Card.Body, { children: [
+    /* @__PURE__ */ jsx("div", { className: "card-image", children: mapping[status].image }),
+    /* @__PURE__ */ jsxs("div", { className: "text-truncate", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "caption", children: mapping[status].text })
     ] }),
-    !d && /* @__PURE__ */ e("div", { className: "ms-auto", children: /* @__PURE__ */ l("div", { className: "d-flex align-items-center gap-12", children: [
-      s[o].context,
-      !d && /* @__PURE__ */ e("div", { className: "vr" }),
-      j(),
-      /* @__PURE__ */ e(n, { message: a("tiptap.tooltip.upload.delete"), placement: "top", children: /* @__PURE__ */ e(g, { icon: /* @__PURE__ */ e(r, { name: "close" }), variant: "ghost", "aria-label": a("tiptap.tooltip.upload.delete"), color: "tertiary", onClick: v }) })
+    !isIdle && /* @__PURE__ */ jsx("div", { className: "ms-auto", children: /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
+      mapping[status].context,
+      !isIdle && /* @__PURE__ */ jsx("div", { className: "vr" }),
+      canEditItem(),
+      /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.delete"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(Close, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.delete"), color: "tertiary", onClick: onDelete }) })
     ] }) })
   ] }) });
 };
 export {
-  A as UploadCard
+  UploadCard
 };
-//# sourceMappingURL=UploadCard.js.map