@edifice.io/react 2.6.9-develop-enabling.20261013152718 → 2.6.9-develop.20261013171251

package/dist/components/Toolbar/Toolbar.js

@@ -1 +1,83 @@
-import Button from"../Button/Button.js";import IconButton from"../Button/IconButton.js";import useBreakpoint from"../../hooks/useBreakpoint/useBreakpoint.js";import{mergeRefs}from"../../utilities/refs/ref.js";import Tooltip from"../Tooltip/Tooltip.js";import Dropdown from"../Dropdown/Dropdown.js";import clsx$1 from"clsx";import{createElement,forwardRef,useEffect,useRef,useState}from"react";import{jsx}from"react/jsx-runtime";var Toolbar=forwardRef(({items,variant=`default`,align=`space`,isBlock=!1,ariaControls,className,shouldHideLabelsOnMobile=!1},ref)=>{let[firstFocusableItemIndex,setFirstFocusableItemIndex]=useState(0),[a11yNavigationItems,setA11yNavigationItems]=useState([]),[firstA11yNavigationItem,setFirstA11yNavigationItem]=useState(),[lastA11yNavigationItem,setA11yNavigationLastItem]=useState(),divToolbarRef=useRef(),{lg}=useBreakpoint(),classes=clsx$1(`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`});useEffect(()=>{let buttons=divToolbarRef.current?.querySelectorAll(`button`),enabledItems=[],isfirstItemSet=!1;buttons?.forEach(item=>{item.disabled||(isfirstItemSet||=(setFirstA11yNavigationItem(item),!0),setA11yNavigationLastItem(item),enabledItems.push(item))}),setA11yNavigationItems(enabledItems),setFirstFocusableItemIndex(items.findIndex(item=>(item.type===`button`||item.type===`icon`)&&!item.props.disabled))},[items]);let handleFocus=event=>{event.target.classList.add(`focus`)},handleBlur=event=>{event.target.classList.remove(`focus`)},handleKeyDown=event=>{let index=a11yNavigationItems.indexOf(event.currentTarget);switch(event.code){case`ArrowLeft`:event.currentTarget===firstA11yNavigationItem?lastA11yNavigationItem?.focus():a11yNavigationItems[index-1]?.focus();break;case`ArrowRight`:event.currentTarget===lastA11yNavigationItem?firstA11yNavigationItem?.focus():a11yNavigationItems[index+1]?.focus();break;default:break}},renderTooltipMessage=item=>typeof item.tooltip==`string`?item.tooltip:item.tooltip?.message,renderTooltipPosition=item=>typeof item.tooltip==`string`?`top`:item.tooltip?.position;return 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;let hideLabel=shouldHideLabelsOnMobile&&!lg;switch(item.type){case`divider`:return jsx(`div`,{className:`toolbar-divider`},item.name??index);case`button`:return jsx(Tooltip,{message:hideLabel?renderTooltipMessage(item):void 0,placement:renderTooltipPosition(item),children:createElement(Button,{...item.props,children:!hideLabel&&item.props.children,"aria-label":item.name,key:item.name??index,color:item.props.color||`tertiary`,variant:`ghost`,size:item.props.size||(hideLabel?`sm`:`md`),tabIndex:index===firstFocusableItemIndex?0:-1,onKeyDown:handleKeyDown})},item.name??index);case`icon`:return jsx(Tooltip,{message:renderTooltipMessage(item),placement:renderTooltipPosition(item),children: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 createElement(Dropdown,{...item.props,key:item.name??index,extraTriggerKeyDownHandler:handleKeyDown,overflow:item.overflow});case`primary`:return jsx(Tooltip,{message:renderTooltipMessage(item),placement:renderTooltipPosition(item),children:jsx(Button,{...item.props,variant:`filled`,color:`primary`,tabIndex:index===firstFocusableItemIndex?0:-1,onKeyDown:handleKeyDown})},item.name??index);default:break}return null})})});export{Toolbar as default};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, createElement } from "react";
+import clsx from "clsx";
+import useBreakpoint from "../../hooks/useBreakpoint/useBreakpoint.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";
+import { mergeRefs } from "../../utilities/refs/ref.js";
+const Toolbar = /* @__PURE__ */ forwardRef(({
+  items,
+  variant = "default",
+  align = "space",
+  isBlock = !1,
+  ariaControls,
+  className,
+  shouldHideLabelsOnMobile = !1
+}, ref) => {
+  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), {
+    lg
+  } = useBreakpoint(), 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"
+  });
+  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":
+        event.currentTarget === firstA11yNavigationItem ? lastA11yNavigationItem == null || lastA11yNavigationItem.focus() : (_a = a11yNavigationItems[index - 1]) == null || _a.focus();
+        break;
+      case "ArrowRight":
+        event.currentTarget === lastA11yNavigationItem ? firstA11yNavigationItem == null || firstA11yNavigationItem.focus() : (_b = a11yNavigationItems[index + 1]) == null || _b.focus();
+        break;
+    }
+  }, 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__ */ 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;
+    const hideLabel = shouldHideLabelsOnMobile && !lg;
+    switch (item.type) {
+      case "divider":
+        return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
+      case "button":
+        return /* @__PURE__ */ jsx(Tooltip, { message: hideLabel ? renderTooltipMessage(item) : void 0, placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, children: !hideLabel && item.props.children, "aria-label": item.name, key: item.name ?? index, color: item.props.color || "tertiary", variant: "ghost", size: item.props.size || hideLabel ? "sm" : "md", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+      case "icon":
+        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__ */ createElement(Dropdown, { ...item.props, key: item.name ?? index, extraTriggerKeyDownHandler: handleKeyDown, overflow: item.overflow });
+      case "primary":
+        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;
+  }) });
+});
+export {
+  Toolbar,
+  Toolbar as default
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1 +1,41 @@
-import clsx$1 from"clsx";import{useState}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import{usePopper}from"react-popper";var Tooltip=({children,message,icon=null,placement=`auto`,...restProps})=>{let[referenceElement,setReferenceElement]=useState(null),[popperElement,setPopperElement]=useState(null),[arrowElement,setArrowElement]=useState(null),{styles,attributes}=usePopper(referenceElement,popperElement,{placement,modifiers:[{name:`arrow`,options:{element:arrowElement}}]}),[visible,setVisible]=useState(!1);return jsxs(Fragment$1,{children:[jsx(`div`,{className:`d-inline-block position-relative`,ref:setReferenceElement,onMouseEnter:()=>{setVisible(!0)},onMouseLeave:()=>{setVisible(!1)},...restProps,children}),visible&&message&&jsxs(`div`,{className:clsx$1(`tooltip d-block show mb-12 z-2`,`bs-tooltip-auto`),ref:setPopperElement,style:styles.popper,...attributes.popper,children:[jsxs(`div`,{className:`tooltip-inner shadow-hover d-flex gap-8 align-items-center`,children:[icon&&icon,jsx(`div`,{children:message})]}),jsx(`div`,{className:`tooltip-arrow`,ref:setArrowElement,style:styles.arrow})]})]})};export{Tooltip as default};
+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",
+  ...restProps
+}) => {
+  const [referenceElement, setReferenceElement] = useState(null), [popperElement, setPopperElement] = useState(null), [arrowElement, setArrowElement] = useState(null), {
+    styles,
+    attributes
+  } = usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [{
+      name: "arrow",
+      options: {
+        element: arrowElement
+      }
+    }]
+  }), [visible, setVisible] = useState(!1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "d-inline-block position-relative", ref: setReferenceElement, onMouseEnter: () => {
+      setVisible(!0);
+    }, onMouseLeave: () => {
+      setVisible(!1);
+    }, ...restProps, children }),
+    visible && message && /* @__PURE__ */ jsxs("div", { className: clsx("tooltip d-block show mb-12 z-2", "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__ */ jsx("div", { className: "tooltip-arrow", ref: setArrowElement, style: styles.arrow })
+    ] })
+  ] });
+};
+export {
+  Tooltip as default
+};

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

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

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

@@ -1 +1,86 @@
-import SvgIconFolder from"../../../modules/icons/components/IconFolder.js";import SvgIconRafterRight from"../../../modules/icons/components/IconRafterRight.js";import{getRotateTransitionStyle}from"../../../utilities/rotate-transition-style/get-rotate-transition-style.js";import{useTree}from"../hooks/useTree.js";import clsx$1 from"clsx";import{createElement,forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var Tree=({nodes,selectedNodeId:externalSelectedNodeId,showIcon=!1,shouldExpandAllNodes=!1,draggedNode,renderNode,onTreeItemFold,onTreeItemUnfold,onTreeItemClick})=>{let{selectedNodeId,expandedNodes,handleItemClick,handleFoldUnfold}=useTree({data:nodes,externalSelectedNodeId,draggedNode,shouldExpandAllNodes,onTreeItemClick,onTreeItemFold,onTreeItemUnfold});return jsx(`div`,{className:`treeview`,children:jsx(`ul`,{role:`tree`,className:`m-0 p-0`,children:Array.isArray(nodes)?nodes.map(node=>jsx(TreeNode,{node,showIcon,selectedNodeId,expandedNodes,onTreeItemClick:handleItemClick,onToggleNode:handleFoldUnfold,renderNode},node.id)):jsx(TreeNode,{node:nodes,selectedNodeId,expandedNodes,showIcon,onTreeItemClick:handleItemClick,onToggleNode:handleFoldUnfold})})})},TreeNode=forwardRef(({node,selectedNodeId,showIcon=!1,expandedNodes,focused,isChild,renderNode,onTreeItemClick,onToggleNode,...restProps},ref)=>{let{t}=useTranslation(),selected=selectedNodeId===node.id,expanded=expandedNodes.has(node.id),treeItemClasses={action:clsx$1(`action-container d-flex align-items-center gap-8 px-2`,{"drag-focus":focused,"py-4":!node.section}),arrow:clsx$1({"py-4":!node.section,"py-8":node.section,invisible:!Array.isArray(node.children)||node.children.length===0}),button:clsx$1(`flex-fill d-flex align-items-center text-truncate gap-8`,{"py-8":node.section})},handleItemKeyDown=event=>{(event.code===`Enter`||event.code===`Space`)&&(event.preventDefault(),event.stopPropagation(),onTreeItemClick?.(node.id))},handleItemToggleKeyDown=event=>{(event.code===`Enter`||event.code===`Space`)&&(event.preventDefault(),event.stopPropagation(),onToggleNode?.(node.id))};return createElement(`li`,{...restProps,ref,key:node.id,id:`treeitem-${node.id}`,role:`treeitem`,"aria-selected":selected,"aria-expanded":expanded},jsxs(`div`,{children:[jsxs(`div`,{className:treeItemClasses.action,children:[node.children&&node.children.length>0?jsx(`div`,{className:treeItemClasses.arrow,tabIndex:0,role:`button`,onClick:()=>onToggleNode?.(node.id),onKeyDown:handleItemToggleKeyDown,"aria-label":t(`foldUnfold`),children:jsx(SvgIconRafterRight,{width:16,style:getRotateTransitionStyle(expanded,{degrees:90})})}):jsx(`div`,{className:`py-8 invisible`}),node.children&&showIcon?jsx(SvgIconFolder,{title:`folder`,width:20,height:20}):null,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}):jsx(`div`,{className:`text-truncate`,children:node.name})})]}),expanded&&node.children&&!!node.children.length&&jsx(`ul`,{role:`group`,children:node.children?.map(node=>createElement(TreeNode,{...restProps,ref,node,key:node.id,showIcon,selectedNodeId,expandedNodes,onTreeItemClick,onToggleNode,renderNode,isChild:!0}))})]}))});export{TreeNode,Tree as default};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, createElement } from "react";
+import clsx from "clsx";
+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 { getRotateTransitionStyle } from "../../../utilities/rotate-transition-style/get-rotate-transition-style.js";
+const Tree = ({
+  nodes,
+  selectedNodeId: externalSelectedNodeId,
+  showIcon = !1,
+  shouldExpandAllNodes = !1,
+  draggedNode,
+  renderNode,
+  onTreeItemFold,
+  onTreeItemUnfold,
+  onTreeItemClick
+}) => {
+  const {
+    selectedNodeId,
+    expandedNodes,
+    handleItemClick,
+    handleFoldUnfold
+  } = useTree({
+    data: nodes,
+    externalSelectedNodeId,
+    draggedNode,
+    shouldExpandAllNodes,
+    onTreeItemClick,
+    onTreeItemFold,
+    onTreeItemUnfold
+  });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: Array.isArray(nodes) ? nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, selectedNodeId, expandedNodes, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, renderNode }, node.id)) : /* @__PURE__ */ jsx(TreeNode, { node: nodes, selectedNodeId, expandedNodes, showIcon, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold }) }) });
+}, TreeNode = /* @__PURE__ */ forwardRef(({
+  node,
+  selectedNodeId,
+  showIcon = !1,
+  expandedNodes,
+  focused,
+  isChild,
+  renderNode,
+  onTreeItemClick,
+  onToggleNode,
+  ...restProps
+}, ref) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(), selected = selectedNodeId === node.id, expanded = expandedNodes.has(node.id), treeItemClasses = {
+    action: clsx("action-container d-flex align-items-center gap-8 px-2", {
+      "drag-focus": focused,
+      "py-4": !node.section
+    }),
+    arrow: clsx({
+      "py-4": !node.section,
+      "py-8": node.section,
+      invisible: !Array.isArray(node.children) || node.children.length === 0
+    }),
+    button: clsx("flex-fill d-flex align-items-center text-truncate gap-8", {
+      "py-8": node.section
+    })
+  }, 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));
+  };
+  return /* @__PURE__ */ createElement("li", { ...restProps, ref, key: node.id, id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded }, /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [
+      node.children && node.children.length > 0 ? /* @__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: getRotateTransitionStyle(expanded, {
+        degrees: 90
+      }) }) }) : /* @__PURE__ */ jsx("div", { className: "py-8 invisible" }),
+      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__ */ createElement(TreeNode, { ...restProps, ref, node: node2, key: node2.id, showIcon, selectedNodeId, expandedNodes, onTreeItemClick, onToggleNode, renderNode, isChild: !0 })) })
+  ] }));
+});
+export {
+  TreeNode,
+  Tree as default
+};

package/dist/components/Tree/hooks/useTree.js

@@ -1 +1,62 @@
-import{findNodeById,findPathById}from"../utilities/tree.js";import{useEffect,useState}from"react";var useTree=({data,externalSelectedNodeId,draggedNode,shouldExpandAllNodes,onTreeItemUnfold,onTreeItemFold,onTreeItemClick})=>{let[internalSelectedNodeId,setInternalSelectedNodeId]=useState(void 0),[expandedNodes,setExpandedNodes]=useState(new Set),[draggedNodeId,setDraggedNodeId]=useState(void 0),selectedNodeId=internalSelectedNodeId??externalSelectedNodeId,expandAllNodes=shouldExpandAllNodes=>{let initExpandedNodes=new Set(``);data&&Array.isArray(data)&&shouldExpandAllNodes&&(data.forEach(node=>initExpandedNodes.add(node.id)),setExpandedNodes(initExpandedNodes))};useEffect(()=>{draggedNode?.isOver&&draggedNode.isTreeview?(draggedNode.overId&&handleItemDrag(draggedNode.overId),setDraggedNodeId(draggedNode.overId)):setDraggedNodeId(void 0)},[draggedNode]),useEffect(()=>{shouldExpandAllNodes&&expandAllNodes(shouldExpandAllNodes)},[Array.isArray(data)?data.map(node=>node.id).join(`,`):data?.id??``,shouldExpandAllNodes]),useEffect(()=>{externalSelectedNodeId&&!shouldExpandAllNodes?(handleExternalSelectedNodeId(externalSelectedNodeId),setInternalSelectedNodeId(externalSelectedNodeId)):setInternalSelectedNodeId(void 0)},[externalSelectedNodeId]);let handleExternalSelectedNodeId=nodeId=>{if(!findNodeById(data,selectedNodeId)){setInternalSelectedNodeId(void 0);return}if(externalSelectedNodeId===`default`){expandedNodes.forEach(node=>onTreeItemUnfold?.(node));return}handleExpandNode(nodeId)},handleExpandNode=nodeId=>{let updatedExpandedNodes=new Set(expandedNodes),parents=findPathById(data,nodeId),arrayOrder=Array.from(updatedExpandedNodes);parents.forEach(parent=>{let index=arrayOrder.indexOf(parent);index>-1&&arrayOrder.splice(index,1),arrayOrder.push(parent)}),updatedExpandedNodes.clear(),arrayOrder.forEach(node=>updatedExpandedNodes.add(node)),updatedExpandedNodes.forEach(node=>onTreeItemUnfold?.(node)),setExpandedNodes(updatedExpandedNodes)},handleCollapseNode=nodeId=>{let updatedExpandedNodes=new Set(expandedNodes);updatedExpandedNodes.delete(nodeId),updatedExpandedNodes.forEach(node=>onTreeItemFold?.(node)),setExpandedNodes(updatedExpandedNodes)},handleToggleNode=nodeId=>{expandedNodes.has(nodeId)?handleCollapseNode(nodeId):handleExpandNode(nodeId)},handleSelectedItem=nodeId=>{selectedNodeId!==nodeId&&setInternalSelectedNodeId(nodeId)},handleItemClick=nodeId=>{handleSelectedItem(nodeId),handleExpandNode(nodeId),onTreeItemClick?.(nodeId)},handleFoldUnfold=nodeId=>handleToggleNode(nodeId),handleItemDrag=nodeId=>{findNodeById(data,externalSelectedNodeId)&&handleCollapseNode(nodeId)};return{selectedNodeId,expandedNodes,draggedNodeId,handleItemClick,handleFoldUnfold,handleCollapseNode}};export{useTree};
+import { useState, useEffect } from "react";
+import { findNodeById, findPathById } from "../utilities/tree.js";
+const useTree = ({
+  data,
+  externalSelectedNodeId,
+  draggedNode,
+  shouldExpandAllNodes,
+  onTreeItemUnfold,
+  onTreeItemFold,
+  onTreeItemClick
+}) => {
+  const [internalSelectedNodeId, setInternalSelectedNodeId] = useState(void 0), [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set()), [draggedNodeId, setDraggedNodeId] = useState(void 0), selectedNodeId = internalSelectedNodeId ?? externalSelectedNodeId, expandAllNodes = (shouldExpandAllNodes2) => {
+    const initExpandedNodes = new Set("");
+    data && Array.isArray(data) && shouldExpandAllNodes2 && (data.forEach((node) => initExpandedNodes.add(node.id)), setExpandedNodes(initExpandedNodes));
+  };
+  useEffect(() => {
+    draggedNode != null && draggedNode.isOver && draggedNode.isTreeview ? (draggedNode.overId && handleItemDrag(draggedNode.overId), setDraggedNodeId(draggedNode.overId)) : setDraggedNodeId(void 0);
+  }, [draggedNode]), useEffect(() => {
+    shouldExpandAllNodes && expandAllNodes(shouldExpandAllNodes);
+  }, [data, shouldExpandAllNodes]), useEffect(() => {
+    externalSelectedNodeId && !shouldExpandAllNodes ? (handleExternalSelectedNodeId(externalSelectedNodeId), setInternalSelectedNodeId(externalSelectedNodeId)) : setInternalSelectedNodeId(void 0);
+  }, [externalSelectedNodeId]);
+  const handleExternalSelectedNodeId = (nodeId) => {
+    if (!findNodeById(data, selectedNodeId)) {
+      setInternalSelectedNodeId(void 0);
+      return;
+    }
+    if (externalSelectedNodeId === "default") {
+      expandedNodes.forEach((node) => onTreeItemUnfold == null ? void 0 : onTreeItemUnfold(node));
+      return;
+    }
+    handleExpandNode(nodeId);
+  }, handleExpandNode = (nodeId) => {
+    const updatedExpandedNodes = new Set(expandedNodes), parents = findPathById(data, nodeId), arrayOrder = Array.from(updatedExpandedNodes);
+    parents.forEach((parent) => {
+      const index = arrayOrder.indexOf(parent);
+      index > -1 && arrayOrder.splice(index, 1), arrayOrder.push(parent);
+    }), updatedExpandedNodes.clear(), arrayOrder.forEach((node) => updatedExpandedNodes.add(node)), updatedExpandedNodes.forEach((node) => onTreeItemUnfold == null ? void 0 : onTreeItemUnfold(node)), setExpandedNodes(updatedExpandedNodes);
+  }, handleCollapseNode = (nodeId) => {
+    const updatedExpandedNodes = new Set(expandedNodes);
+    updatedExpandedNodes.delete(nodeId), updatedExpandedNodes.forEach((node) => onTreeItemFold == null ? void 0 : onTreeItemFold(node)), setExpandedNodes(updatedExpandedNodes);
+  }, handleToggleNode = (nodeId) => {
+    expandedNodes.has(nodeId) ? handleCollapseNode(nodeId) : handleExpandNode(nodeId);
+  }, handleSelectedItem = (nodeId) => {
+    selectedNodeId !== nodeId && setInternalSelectedNodeId(nodeId);
+  }, handleItemClick = (nodeId) => {
+    handleSelectedItem(nodeId), handleExpandNode(nodeId), onTreeItemClick == null || onTreeItemClick(nodeId);
+  }, handleFoldUnfold = (nodeId) => handleToggleNode(nodeId), handleItemDrag = (nodeId) => {
+    findNodeById(data, externalSelectedNodeId) && handleCollapseNode(nodeId);
+  };
+  return {
+    selectedNodeId,
+    expandedNodes,
+    draggedNodeId,
+    handleItemClick,
+    handleFoldUnfold,
+    handleCollapseNode
+  };
+};
+export {
+  useTree
+};