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

package/dist/components/Toolbar/Toolbar.js

@@ -1,83 +1 @@
-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
-};
+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};

package/dist/components/Tooltip/Tooltip.js

@@ -1,41 +1 @@
-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
-};
+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};

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

@@ -1,61 +1 @@
-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
-};
+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};

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

@@ -1,140 +1 @@
-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
-};
+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};

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

@@ -1,86 +1 @@
-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
-};
+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};

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

@@ -1,62 +1 @@
-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
-};
+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};