@oliasoft-open-source/react-ui-library 4.5.2-beta-6 → 4.5.3-beta-1

package/dist/index.js

@@ -15423,7 +15423,7 @@ var getStyles = function getStyles2(rules2, property) {
     return rule.selector + " { " + value + " }";
   }).join(" ");
 };
-var noPointerEvents = "pointer-events: none;";
+var noPointerEvents$1 = "pointer-events: none;";
 var getStyles$1 = function(contextId) {
   var getSelector2 = makeGetSelector(contextId);
   var dragHandle$1 = function() {
@@ -15433,7 +15433,7 @@ var getStyles$1 = function(contextId) {
       styles: {
         always: "\n          -webkit-touch-callout: none;\n          -webkit-tap-highlight-color: rgba(0,0,0,0);\n          touch-action: manipulation;\n        ",
         resting: grabCursor,
-        dragging: noPointerEvents,
+        dragging: noPointerEvents$1,
         dropAnimating: grabCursor
       }
     };
@@ -18784,44 +18784,45 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-const inputInTable$8 = "_inputInTable_j55lv_1";
-const inputHover$8 = "_inputHover_j55lv_13";
-const inputFocus$8 = "_inputFocus_j55lv_18";
-const inputError$8 = "_inputError_j55lv_25";
-const inputWarning$8 = "_inputWarning_j55lv_26";
-const inputDisabled$8 = "_inputDisabled_j55lv_61";
-const hideScrollbars$8 = "_hideScrollbars_j55lv_67";
-const header$1 = "_header_j55lv_77";
-const headerTitle = "_headerTitle_j55lv_77";
-const heading$3 = "_heading_j55lv_78";
-const itemHeader = "_itemHeader_j55lv_78";
-const narrow = "_narrow_j55lv_81";
-const stickyHeader = "_stickyHeader_j55lv_85";
-const title$3 = "_title_j55lv_96";
-const name = "_name_j55lv_102";
-const iconTooltipMargin = "_iconTooltipMargin_j55lv_105";
-const bold = "_bold_j55lv_108";
-const toggleNarrow = "_toggleNarrow_j55lv_117";
-const drag$1 = "_drag_j55lv_135";
-const list$1 = "_list_j55lv_155";
-const bordered$1 = "_bordered_j55lv_159";
-const item$4 = "_item_j55lv_78";
-const action = "_action_j55lv_192";
-const active$3 = "_active_j55lv_195";
-const indented = "_indented_j55lv_202";
-const disabled$5 = "_disabled_j55lv_215";
-const label$6 = "_label_j55lv_226";
-const details$2 = "_details_j55lv_237";
-const metadata = "_metadata_j55lv_238";
-const itemContent = "_itemContent_j55lv_246";
-const indentIcon = "_indentIcon_j55lv_253";
-const expandIcon = "_expandIcon_j55lv_258";
-const expanded = "_expanded_j55lv_265";
-const right$4 = "_right_j55lv_268";
-const actions = "_actions_j55lv_276";
-const scrollableList = "_scrollableList_j55lv_281";
-const infiniteScrollContainer = "_infiniteScrollContainer_j55lv_286";
-const hideScrollbar = "_hideScrollbar_j55lv_67";
+const inputInTable$8 = "_inputInTable_tn20e_1";
+const inputHover$8 = "_inputHover_tn20e_13";
+const inputFocus$8 = "_inputFocus_tn20e_18";
+const inputError$8 = "_inputError_tn20e_25";
+const inputWarning$8 = "_inputWarning_tn20e_26";
+const inputDisabled$8 = "_inputDisabled_tn20e_61";
+const hideScrollbars$8 = "_hideScrollbars_tn20e_67";
+const header$1 = "_header_tn20e_77";
+const headerTitle = "_headerTitle_tn20e_77";
+const heading$3 = "_heading_tn20e_78";
+const itemHeader = "_itemHeader_tn20e_78";
+const narrow = "_narrow_tn20e_81";
+const stickyHeader = "_stickyHeader_tn20e_85";
+const title$3 = "_title_tn20e_96";
+const name = "_name_tn20e_102";
+const iconTooltipMargin = "_iconTooltipMargin_tn20e_105";
+const bold = "_bold_tn20e_108";
+const toggleNarrow = "_toggleNarrow_tn20e_117";
+const drag$1 = "_drag_tn20e_135";
+const list$1 = "_list_tn20e_155";
+const bordered$1 = "_bordered_tn20e_159";
+const item$4 = "_item_tn20e_78";
+const action = "_action_tn20e_192";
+const active$3 = "_active_tn20e_195";
+const indented = "_indented_tn20e_202";
+const disabled$5 = "_disabled_tn20e_215";
+const label$6 = "_label_tn20e_226";
+const details$2 = "_details_tn20e_237";
+const metadata = "_metadata_tn20e_238";
+const itemContent = "_itemContent_tn20e_246";
+const indentIcon = "_indentIcon_tn20e_253";
+const expandIcon = "_expandIcon_tn20e_258";
+const expanded = "_expanded_tn20e_265";
+const right$4 = "_right_tn20e_268";
+const actions = "_actions_tn20e_276";
+const scrollableList = "_scrollableList_tn20e_281";
+const infiniteScrollContainer = "_infiniteScrollContainer_tn20e_286";
+const hideScrollbar = "_hideScrollbar_tn20e_67";
+const noPointerEvents = "_noPointerEvents_tn20e_303";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -18860,7 +18861,8 @@ const listStyles = {
   actions,
   scrollableList,
   infiniteScrollContainer,
-  hideScrollbar
+  hideScrollbar,
+  noPointerEvents
 };
 const ToggleNarrow = ({
   toggleNarrow: toggleNarrow2,
@@ -69926,12 +69928,12 @@ function TreeInner(props, ref2) {
   );
 }
 var Tree$1 = forwardRef(TreeInner);
-const tree = "_tree_1lv9u_1";
-const toggle = "_toggle_1lv9u_4";
-const dropTarget = "_dropTarget_1lv9u_11";
-const draggingSource = "_draggingSource_1lv9u_14";
-const placeholderContainer = "_placeholderContainer_1lv9u_17";
-const placeholder2 = "_placeholder_1lv9u_17";
+const tree = "_tree_15yn1_1";
+const toggle = "_toggle_15yn1_4";
+const dropTarget = "_dropTarget_15yn1_11";
+const draggingSource = "_draggingSource_15yn1_26";
+const placeholderContainer = "_placeholderContainer_15yn1_29";
+const placeholder2 = "_placeholder_15yn1_29";
 const styles$1 = {
   tree,
   toggle,
@@ -69947,14 +69949,46 @@ const TreeItem = ({
   onToggle,
   hasChild,
   draggable: draggable2,
-  icons: icons2
+  icons: icons2,
+  onDrop
 }) => {
   const { id: id2, data } = node2;
   const { active: active2, testId, onClick, actions: actions2 = [] } = data;
+  const [isDragOver, setDragOver] = React__default.useState(false);
+  const [dragOverStartTime, setDragOverStartTime] = React__default.useState(0);
   const handleToggle = (e2) => {
     e2.stopPropagation();
     onToggle(id2);
   };
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isDragOver) {
+      setDragOver(true);
+      setDragOverStartTime((/* @__PURE__ */ new Date()).getTime());
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if ((/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 20) {
+      setDragOver(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (hasChild && !isOpen2 && (/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 200) {
+      handleToggle(event);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragOver(false);
+    setDragOverStartTime((/* @__PURE__ */ new Date()).getTime());
+    onDrop == null ? void 0 : onDrop(event);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -69962,7 +69996,8 @@ const TreeItem = ({
         listStyles.item,
         listStyles.action,
         active2 ? listStyles.active : "",
-        depth > 0 ? listStyles.indented : ""
+        depth > 0 ? listStyles.indented : "",
+        isDragOver ? listStyles.bordered : ""
       ),
       style: {
         marginInlineStart: depth * 24
@@ -69975,10 +70010,17 @@ const TreeItem = ({
           handleToggle(evt);
         }
       },
+      onDrop: (evt) => onDrop ? handleDrop(evt) : {},
+      onDragEnter: (evt) => onDrop ? handleDragEnter(evt) : {},
+      onDragOver: (evt) => onDrop ? handleDragOver(evt) : {},
+      onDragLeave: (evt) => onDrop ? handleDragLeave(evt) : {},
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: listStyles.itemHeader,
+          className: cx$2(
+            listStyles.itemHeader,
+            isDragOver ? listStyles.noPointerEvents : ""
+          ),
           children: [
             hasChild && /* @__PURE__ */ jsx("div", { className: styles$1.toggle, children: /* @__PURE__ */ jsx(
               Button$1,
@@ -70081,16 +70123,19 @@ const Tree = ({
     newList = transformTreeToList(workingTree);
     onListReorder(newList);
   };
-  const tree2 = (_a = list2 == null ? void 0 : list2.items) == null ? void 0 : _a.map(({ id: id2, droppable: droppable2, parent, name: name2, ...rest }) => ({
-    id: id2,
-    text: name2,
-    droppable: droppable2,
-    parent,
-    data: {
-      name: name2,
-      ...rest
-    }
-  }));
+  const tree2 = (_a = list2 == null ? void 0 : list2.items) == null ? void 0 : _a.map(
+    ({ id: id2, droppable: droppable2, parent, name: name2, onDrop, ...rest }) => ({
+      id: id2,
+      text: name2,
+      droppable: droppable2,
+      parent,
+      data: {
+        name: name2,
+        onDrop,
+        ...rest
+      }
+    })
+  );
   return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
     list2.name && !list2.noHeader && /* @__PURE__ */ jsx(ListHeading, { name: list2.name, actions: list2.actions }),
     /* @__PURE__ */ jsx("div", { className: listStyles.list, children: /* @__PURE__ */ jsx(
@@ -70114,6 +70159,7 @@ const Tree = ({
             },
             rootId: 0,
             render: (node2, { depth, isOpen: isOpen2, onToggle, hasChild }) => {
+              var _a2;
               return /* @__PURE__ */ jsx(
                 TreeItem,
                 {
@@ -70126,7 +70172,8 @@ const Tree = ({
                     onToggle();
                   },
                   draggable: draggable2,
-                  icons: icons2
+                  icons: icons2,
+                  onDrop: (_a2 = node2.data) == null ? void 0 : _a2.onDrop
                 }
               );
             },