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

package/dist/components/Tabs/components/TabsItem.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTabsContext } from "../context/TabsContext.js";
+const TabsItem = ({
+  icon,
+  label,
+  id,
+  order
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    onKeyDown,
+    tabsRef
+  } = useTabsContext(), {
+    t
+  } = useTranslation(), classes = clsx("nav-link d-inline-flex gap-8 border-0", activeTab === id ? "selected" : "");
+  return /* @__PURE__ */ jsx("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ jsxs("button", { ref: (el) => tabsRef.current[order] = el, type: "button", id: `tab-${id}`, className: classes, onClick: () => setSelectedTab(id), onKeyDown: (event) => onKeyDown(event), role: "tab", "aria-controls": `tabpanel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, children: [
+    icon,
+    /* @__PURE__ */ jsx("small", { children: t(label) })
+  ] }) });
+};
+export {
+  TabsItem as default
+};

package/dist/components/Tabs/components/TabsList.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react';
+declare const TabsList: {
+    (props: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsList;

package/dist/components/Tabs/components/TabsList.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTabsContext } from "../context/TabsContext.js";
+import { Tabs } from "./Tabs.js";
+const TabsList = (props) => {
+  const {
+    items,
+    tabUnderlineLeft,
+    tabUnderlineWidth
+  } = useTabsContext(), {
+    className,
+    ...restProps
+  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
+  return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
+    /* @__PURE__ */ jsx("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
+    /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
+      left: tabUnderlineLeft,
+      width: tabUnderlineWidth
+    } })
+  ] });
+};
+export {
+  TabsList as default
+};

package/dist/components/Tabs/components/TabsPanel.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useTabsContext } from "../context/TabsContext.js";
+const TabsPanel = ({
+  children,
+  currentItem
+}) => {
+  const {
+    activeTab
+  } = useTabsContext();
+  return /* @__PURE__ */ jsx("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
+};
+export {
+  TabsPanel as default
+};

package/dist/components/Tabs/context/TabsContext.d.ts

@@ -0,0 +1,12 @@
+import { TabsItemProps } from '../components/TabsItem';
+export interface TabsContextProps {
+    activeTab?: string;
+    items: TabsItemProps[];
+    setSelectedTab: (key: string) => void;
+    tabsRef: React.MutableRefObject<(HTMLButtonElement | null)[]>;
+    tabUnderlineLeft: number;
+    tabUnderlineWidth: number;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const TabsContext: import('react').Context<TabsContextProps | null>;
+export declare function useTabsContext(): TabsContextProps;

package/dist/components/Tabs/hooks/useTabs.d.ts

@@ -0,0 +1,15 @@
+import { TabsItemProps } from '../components/TabsItem';
+interface UseTabsProps {
+    defaultId?: string;
+    items: TabsItemProps[];
+    onChange?: (tab: TabsItemProps) => void;
+}
+export declare const useTabs: ({ defaultId, items, onChange }: UseTabsProps) => {
+    activeTab: string;
+    setSelectedTab: (id: string) => void;
+    tabsRef: import('react').MutableRefObject<(HTMLButtonElement | null)[]>;
+    tabUnderlineLeft: number;
+    tabUnderlineWidth: number;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+};
+export {};

package/dist/components/Tabs/hooks/useTabs.js

@@ -0,0 +1,61 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+const useTabs = ({
+  defaultId,
+  items,
+  onChange
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultId || ""), [tabUnderlineWidth, setTabUnderlineWidth] = useState(0), [tabUnderlineLeft, setTabUnderlineLeft] = useState(0), tabsRef = useRef([]), setSelectedTab = useCallback((id) => {
+    setActiveTab(id);
+  }, []);
+  useEffect(() => {
+    const currentItem = items.find((item) => item.id === activeTab);
+    currentItem && (onChange == null || onChange(currentItem));
+  }, [activeTab]), useEffect(() => {
+    function setTabPosition() {
+      var _a;
+      if (((_a = document == null ? void 0 : document.activeElement) == null ? void 0 : _a.tagName) !== "INPUT") {
+        const currentTabIndex = items.findIndex((item) => item.id === activeTab);
+        currentTabIndex === -1 && defaultId && setActiveTab(defaultId);
+        const currentTabRef = tabsRef.current[currentTabIndex];
+        currentTabRef && (currentTabRef.focus(), setTabUnderlineLeft((currentTabRef == null ? void 0 : currentTabRef.offsetLeft) ?? 0), setTabUnderlineWidth((currentTabRef == null ? void 0 : currentTabRef.clientWidth) ?? 0));
+      }
+    }
+    return setTabPosition(), window.addEventListener("resize", setTabPosition), () => window.removeEventListener("resize", setTabPosition);
+  }, [activeTab, items, defaultId]);
+  const moveFocusToPreviousTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[0]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index - 1]) == null ? void 0 : _c.id);
+  }, [items]), moveFocusToNextTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[items.length - 1]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[0]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index + 1]) == null ? void 0 : _c.id);
+  }, [items]), onKeyDown = useCallback((event) => {
+    var _a, _b;
+    switch (event.code) {
+      case "ArrowLeft":
+        moveFocusToPreviousTab(activeTab);
+        break;
+      case "ArrowRight":
+        moveFocusToNextTab(activeTab);
+        break;
+      case "Home":
+        setActiveTab((_a = items[0]) == null ? void 0 : _a.id);
+        break;
+      case "End":
+        setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id);
+        break;
+    }
+  }, [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab]);
+  return {
+    activeTab,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  };
+};
+export {
+  useTabs
+};

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

@@ -1,3 +1,2 @@
-export { default as Tabs } from './Tabs';
-export * from './Tabs';
-export { type TabsItemProps } from './TabsItem';
+export * from './components/Tabs';
+export type { TabsItemProps } from './components/TabsItem';

package/dist/components/TextArea/TextArea.d.ts

@@ -1,6 +1,6 @@
 import { Size } from '../../types';
-export type OmitTextAreaProps = 'disabled' | 'required' | 'size' | 'id' | 'readOnly';
-export interface TextAreaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, OmitTextAreaProps> {
+export type OmitTextAreaProps = "disabled" | "required" | "size" | "id" | "readOnly";
+export interface TextAreaProps extends Omit<React.ComponentPropsWithRef<"textarea">, OmitTextAreaProps> {
     /**
      * Control size of TextArea
      */

package/dist/components/TextArea/TextArea.js

@@ -28,7 +28,7 @@ const TextArea = /* @__PURE__ */ forwardRef(({
     "no-validation-icon": noValidationIcon
   }, className);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps }) });
-}), TextArea$1 = TextArea;
+});
 export {
-  TextArea$1 as default
+  TextArea as default
 };

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

@@ -2,47 +2,47 @@ import { ReactNode } from 'react';
 import { ButtonProps, IconButtonProps } from '../Button';
 import { DropdownProps } from '../Dropdown';
 import { Placement } from '../Tooltip';
-interface Item {
+export interface ToolbarCommonItem {
     /** Object type */
     type: string;
     /** Items should be named, except for dividers */
     name?: string;
     /** Set to "hide" to hide this item. Defaults to "show" when undefined. */
-    visibility?: 'show' | 'hide';
+    visibility?: "show" | "hide";
 }
-interface ToolbarTooltip {
+export interface ToolbarTooltipProps {
     tooltip?: string | {
         message: string;
         position?: Placement;
     };
 }
-interface ButtonItem extends Item, ToolbarTooltip {
-    type: 'button';
+export interface ToolbarButtonItem extends ToolbarCommonItem, ToolbarTooltipProps {
+    type: "button";
     name: string;
     props: ButtonProps;
 }
-interface IconButtonItem extends Item, ToolbarTooltip {
-    type: 'icon';
+export interface ToolbarIconButtonItem extends ToolbarCommonItem, ToolbarTooltipProps {
+    type: "icon";
     name: string;
     props: IconButtonProps;
 }
-interface DropdownItem extends Item {
-    type: 'dropdown';
+export interface ToolbarDropdownItem extends ToolbarCommonItem {
+    type: "dropdown";
     props: DropdownProps;
     overflow?: boolean;
 }
-interface PrimaryItem extends Item, ToolbarTooltip {
-    type: 'primary';
+export interface ToolbarPrimaryItem extends ToolbarCommonItem, ToolbarTooltipProps {
+    type: "primary";
     props: ButtonProps;
 }
-interface DividerItem extends Item {
-    type: 'divider';
+export interface ToolbarDividerItem extends ToolbarCommonItem {
+    type: "divider";
 }
 export type ToolbarRef = HTMLDivElement;
-export type ToolbarVariant = 'default' | 'no-shadow';
-export type ToolbarAlign = 'left' | 'center' | 'space' | 'right';
-export type ToolbarItem = ButtonItem | IconButtonItem | DropdownItem | PrimaryItem | DividerItem;
-export interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {
+export type ToolbarVariant = "default" | "no-shadow";
+export type ToolbarAlign = "left" | "center" | "space" | "right";
+export type ToolbarItem = ToolbarButtonItem | ToolbarIconButtonItem | ToolbarDropdownItem | ToolbarPrimaryItem | ToolbarDividerItem;
+export interface ToolbarProps extends React.ComponentPropsWithRef<"div"> {
     /**
      * Toolbar data items
      */
@@ -72,5 +72,5 @@ export interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {
      */
     children?: ReactNode;
 }
-declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Toolbar;

package/dist/components/Toolbar/Toolbar.js

@@ -1,7 +1,7 @@
 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 { mergeRefs } from "../../utilities/refs/ref.js";
 import Tooltip from "../Tooltip/Tooltip.js";
 import Button from "../Button/Button.js";
 import Dropdown from "../Dropdown/Dropdown.js";
@@ -71,7 +71,8 @@ const Toolbar = /* @__PURE__ */ forwardRef(({
     }
     return null;
   }) });
-}), Toolbar$1 = Toolbar;
+});
 export {
-  Toolbar$1 as default
+  Toolbar,
+  Toolbar as default
 };

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

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

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-export type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export interface TooltipProps {
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type Placement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+export interface TooltipProps extends ComponentPropsWithRef<"div"> {
     /**
      * Text to display inside tooltip
      */
@@ -18,5 +18,5 @@ export interface TooltipProps {
      */
     icon?: ReactNode;
 }
-declare const Tooltip: ({ children, message, icon, placement, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ children, message, icon, placement, ...restProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -6,7 +6,8 @@ const Tooltip = ({
   children,
   message,
   icon = null,
-  placement = "auto"
+  placement = "auto",
+  ...restProps
 }) => {
   const [referenceElement, setReferenceElement] = useState(null), [popperElement, setPopperElement] = useState(null), [arrowElement, setArrowElement] = useState(null), {
     styles,
@@ -25,7 +26,7 @@ const Tooltip = ({
       setVisible(!0);
     }, onMouseLeave: () => {
       setVisible(!1);
-    }, children }),
+    }, ...restProps, 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,
@@ -34,7 +35,7 @@ const Tooltip = ({
       /* @__PURE__ */ jsx("div", { className: "tooltip-arrow", ref: setArrowElement, style: styles.arrow })
     ] })
   ] });
-}, Tooltip$1 = Tooltip;
+};
 export {
-  Tooltip$1 as default
+  Tooltip as default
 };

package/dist/components/Tree/components/DndTree.d.ts

@@ -0,0 +1,3 @@
+import { DndTreeProps } from '../types';
+export declare const DndTree: import('react').ForwardRefExoticComponent<DndTreeProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DndTree;

package/dist/components/Tree/components/DndTree.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useDroppable } from "@dnd-kit/core";
+import { forwardRef, useId } from "react";
+import { useTree } from "../hooks/useTree.js";
+import { TreeNode } from "./Tree.js";
+import { mergeRefs } from "../../../utilities/refs/ref.js";
+const DndTree = /* @__PURE__ */ forwardRef(({
+  nodes,
+  selectedNodeId: externalSelectedNodeId,
+  showIcon = !1,
+  shouldExpandAllNodes = !1,
+  draggedNode,
+  onTreeItemClick,
+  onTreeItemFold,
+  onTreeItemUnfold,
+  renderNode
+}, ref) => {
+  const {
+    selectedNodeId,
+    expandedNodes,
+    draggedNodeId,
+    handleItemClick,
+    handleFoldUnfold
+  } = useTree({
+    data: nodes,
+    externalSelectedNodeId,
+    draggedNode,
+    shouldExpandAllNodes,
+    onTreeItemClick,
+    onTreeItemFold,
+    onTreeItemUnfold
+  });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", ref, children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: Array.isArray(nodes) && nodes.map((node) => /* @__PURE__ */ jsx(DndTreeNode, { node, showIcon, draggedNodeId, expandedNodes, selectedNodeId, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, renderNode }, node.id)) }) });
+}), DndTreeNode = /* @__PURE__ */ forwardRef(({
+  node,
+  selectedNodeId,
+  showIcon = !1,
+  expandedNodes,
+  renderNode,
+  onTreeItemClick,
+  onToggleNode,
+  draggedNodeId,
+  ...restProps
+}, ref) => {
+  const {
+    setNodeRef
+  } = useDroppable({
+    id: useId(),
+    data: {
+      id: node.id,
+      name: node.name,
+      isTreeview: !0,
+      accepts: ["folder", "resource"]
+    }
+  }), focused = draggedNodeId === node.id;
+  return /* @__PURE__ */ jsx(TreeNode, { ref: mergeRefs(ref, setNodeRef), node, showIcon, selectedNodeId, expandedNodes, onTreeItemClick, onToggleNode, renderNode, focused, ...restProps }, node.id);
+});
+export {
+  DndTree,
+  DndTree as default
+};

package/dist/components/Tree/components/SortableTree.d.ts

@@ -0,0 +1,9 @@
+import { FlattenedItem, SortableTreeProps } from '../types';
+declare const SortableTree: {
+    ({ nodes, selectedNodeId: externalSelectedNodeId, showIcon, shouldExpandAllNodes, renderNode, isDisabled, onTreeItemClick, onSortable, }: SortableTreeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DragOverlayItem: import('react').ForwardRefExoticComponent<{
+    activeItem: FlattenedItem | null | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default SortableTree;

package/dist/components/Tree/components/SortableTree.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import SvgIconFolder from "../../../modules/icons/components/IconFolder.js";
+import SvgIconRafterRight from "../../../modules/icons/components/IconRafterRight.js";
+import { useTree } from "../hooks/useTree.js";
+import { useTreeSortable } from "../hooks/useTreeSortable.js";
+const SortableTree = ({
+  nodes,
+  selectedNodeId: externalSelectedNodeId,
+  showIcon = !1,
+  shouldExpandAllNodes = !1,
+  renderNode,
+  isDisabled = () => !1,
+  onTreeItemClick,
+  onSortable
+}) => {
+  const {
+    selectedNodeId,
+    expandedNodes,
+    handleItemClick,
+    handleFoldUnfold,
+    collapseAllNodes
+  } = useTree({
+    data: nodes,
+    externalSelectedNodeId,
+    shouldExpandAllNodes,
+    onTreeItemClick
+  }), {
+    handleDragEnd,
+    handleDragMove,
+    handleDragOver,
+    handleDragStart,
+    adjustTranslate,
+    sortedIds,
+    indicator,
+    projected,
+    announcements,
+    activeId,
+    indentationWidth,
+    activeItem,
+    dropAnimationConfig,
+    measuring,
+    sensors,
+    items
+  } = useTreeSortable({
+    nodes,
+    onSortable,
+    collapseAllNodes
+  });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: /* @__PURE__ */ jsxs(DndContext, { accessibility: {
+    announcements
+  }, sensors, measuring, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragMove: handleDragMove, children: [
+    /* @__PURE__ */ jsx(SortableContext, { items: sortedIds, strategy: verticalListSortingStrategy, children: Array.isArray(items) && items.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, expandedNodes, selectedNodeId, renderNode, disabled: isDisabled(node.id), onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, depth: node.id === activeId && projected ? projected.depth : 0, indentationWidth, projected }, node.id)) }),
+    /* @__PURE__ */ createPortal(/* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, modifiers: indicator ? [adjustTranslate] : void 0, children: activeId && activeItem ? /* @__PURE__ */ jsx(DragOverlayItem, { activeItem }) : null }), document.body)
+  ] }) }) });
+}, TreeNode = /* @__PURE__ */ forwardRef(({
+  node,
+  selectedNodeId,
+  showIcon = !1,
+  expandedNodes,
+  focused,
+  disabled,
+  indentationWidth,
+  depth,
+  isChild,
+  projected,
+  renderNode,
+  onTreeItemClick,
+  onToggleNode
+}, ref) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(), selected = selectedNodeId === node.id, expanded = expandedNodes.has(node.id), animateLayoutChanges = ({
+    isSorting,
+    wasDragging
+  }) => !(isSorting || wasDragging), {
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: node.id,
+    disabled,
+    animateLayoutChanges
+  }), style = {
+    transform: CSS.Translate.toString(transform),
+    transition
+  }, treeItemClasses = {
+    action: clsx("action-container d-flex align-items-center gap-8 px-2", {
+      "drag-focus": focused,
+      "border border-secondary rounded rounded-2 shadow bg-white": isDragging
+    }),
+    arrow: clsx({
+      invisible: !Array.isArray(node.children) || node.children.length === 0
+    }),
+    button: clsx("flex-fill d-flex align-items-center text-truncate gap-8", {
+      "py-8": depth === 0,
+      "py-4": depth === 1
+    })
+  }, handleItemKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onTreeItemClick == null || onTreeItemClick(node.id));
+  }, handleItemToggleKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onToggleNode == null || onToggleNode(node.id));
+  }, spaceGestion = () => isDragging ? isChild ? depth === 1 ? `${indentationWidth * depth}px` : "0px" : `${indentationWidth * depth}px` : null;
+  return /* @__PURE__ */ jsx("li", { ref: setNodeRef, id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, style: {
+    ...style,
+    marginLeft: spaceGestion()
+  }, ...listeners, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [
+      /* @__PURE__ */ jsx("div", { className: treeItemClasses.arrow, tabIndex: 0, role: "button", onClick: () => onToggleNode == null ? void 0 : onToggleNode(node.id), onKeyDown: handleItemToggleKeyDown, "aria-label": t("foldUnfold"), children: /* @__PURE__ */ jsx(SvgIconRafterRight, { width: 16, style: {
+        transform: expanded ? "rotate(90deg)" : ""
+      } }) }),
+      node.children && showIcon ? /* @__PURE__ */ jsx(SvgIconFolder, { title: "folder", width: 20, height: 20 }) : null,
+      /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "button", className: treeItemClasses.button, onClick: () => onTreeItemClick(node.id), onKeyDown: handleItemKeyDown, children: renderNode ? renderNode({
+        node,
+        hasChildren: Array.isArray(node.children) && !!node.children.length,
+        isChild
+      }) : /* @__PURE__ */ jsx("div", { className: "text-truncate", children: node.name }) })
+    ] }),
+    expanded && node.children && !!node.children.length && /* @__PURE__ */ jsx("ul", { role: "group", children: (_a = node.children) == null ? void 0 : _a.map((node2) => /* @__PURE__ */ jsx(TreeNode, { ref, node: node2, showIcon, selectedNodeId, expandedNodes, onTreeItemClick, onToggleNode, renderNode, indentationWidth, depth: node2.id === (projected == null ? void 0 : projected.activeId) && projected ? projected.depth : 0, isChild: !0, projected }, node2.id)) })
+  ] }) }, node.id);
+}), DragOverlayItem = /* @__PURE__ */ forwardRef(({
+  activeItem,
+  ...props
+}, ref) => /* @__PURE__ */ jsx("div", { ref, ...props, className: "opacity-0", style: {
+  cursor: "grabbing"
+}, children: /* @__PURE__ */ jsx("div", { className: clsx("action-container align-items-center gap-8 px-2"), style: {
+  backgroundColor: "white",
+  border: "1px solid black",
+  width: "100px"
+}, children: /* @__PURE__ */ jsx("div", { className: clsx("flex-fill d-flex align-items-center text-truncate gap-8 py-8"), children: /* @__PURE__ */ jsx("span", { className: "text-truncate", children: activeItem == null ? void 0 : activeItem.name }) }) }) }));
+export {
+  DragOverlayItem,
+  SortableTree as default
+};

package/dist/components/Tree/components/Tree.d.ts

@@ -0,0 +1,7 @@
+import { TreeNodeProps, TreeProps } from '../types';
+declare const Tree: {
+    ({ nodes, selectedNodeId: externalSelectedNodeId, showIcon, shouldExpandAllNodes, draggedNode, renderNode, onTreeItemFold, onTreeItemUnfold, onTreeItemClick, }: TreeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const TreeNode: import('react').ForwardRefExoticComponent<Omit<TreeNodeProps, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+export default Tree;