pixel-react 1.14.84 → 1.14.86

package/lib/index.cjs

@@ -3611,7 +3611,7 @@ const ELEMENTS_TRAILING_SPACE_REGEX = /^\S.*\S$/;
 const ELEMENTS_WHITE_SPACE_REGEX = /.*\S.*/;
 const PARAMETER_ALPHANUMERIC_REGEX = /^[-_A-Za-z0-9 ]*$|^[-_A-Za-z0-9 ][A-Za-z0-9 ]*[-_A-Za-z-_]$/;
 const ALPHANUMERIC_PARENTHESIS_REGEX = /^[-_A-Za-z0-9 ()]*$|^[-_A-Za-z0-9 ()][A-Za-z0-9 ()]*[-_A-Za-z-()]$/;
-const STRIP_NEW_LINES_REGEX = /\n/g;
+const ENTER_NEW_LINE_REGEX = /\r/g;
 //Regular expression to convert lower camel case by excluding spaces
 const CAMEL_CASE_REGEX = /(?:^\w|[A-Z]|\b\w|\s+)/g;
 const SPECIAL_REGEX_CHARACTERS_PATTERN = /[.*+?^${}()|[\]\\]/g;
@@ -4229,6 +4229,7 @@ const MultiSelect = ({
       if (withSelectButton && dropdownWrapper.current && selectWrapper.current && dropdownRef.current && !dropdownRef.current.contains(event?.target) && !selectWrapper.current.contains(event?.target)) {
         setInputError('');
         setIsOpen(false);
+        setSearchedKeyword('');
         if (!isSelectFocusedOnce) {
           setIsSelectFocusedOnce(true);
         }
@@ -7332,7 +7333,8 @@ const Select$1 = ({
   dropDownRef,
   dropDownHeight = 160,
   onSearchText,
-  isCustomButtonDisabled = false
+  isCustomButtonDisabled = false,
+  hasInnerClearIcon = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
   const memoizedOptionsList = React.useMemo(() => optionsList, [optionsList]);
@@ -7514,28 +7516,43 @@ const Select$1 = ({
       window.removeEventListener('resize', checkTruncate);
     };
   }, [searchedText, width]);
-  const inputElement = jsxRuntime.jsx("input", {
-    type: "text",
-    ref: inputRef,
-    id: "select-input-element",
-    className: classNames('ff-select-inputField', {
-      'ff-select-inputField__disabled': disabled,
-      'ff-select-inputField__readonly': disableInput,
-      'ff-select-inputField__icon': showIcon && !checkEmpty(searchedIcon)
-    }),
-    onFocus: handleFocus,
-    value: searchedText,
-    autoCorrect: "off",
-    autoComplete: "off",
-    spellCheck: "false",
-    style: {
-      zIndex: optionZIndex,
-      color: selectedOptionColor
-    },
-    disabled: disabled,
-    onChange: handleChange,
-    readOnly: disableInput,
-    placeholder: placeHolder
+  const inputElement = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("input", {
+      type: "text",
+      ref: inputRef,
+      id: "select-input-element",
+      className: classNames('ff-select-inputField', {
+        'ff-select-inputField__disabled': disabled,
+        'ff-select-inputField__readonly': disableInput,
+        'ff-select-inputField__icon': showIcon && !checkEmpty(searchedIcon)
+      }),
+      onFocus: handleFocus,
+      value: searchedText,
+      autoCorrect: "off",
+      autoComplete: "off",
+      spellCheck: "false",
+      style: {
+        zIndex: optionZIndex,
+        color: selectedOptionColor
+      },
+      disabled: disabled,
+      onChange: handleChange,
+      readOnly: disableInput,
+      placeholder: placeHolder
+    }), hasInnerClearIcon && jsxRuntime.jsx("span", {
+      className: "ff-select-clear-icon",
+      children: jsxRuntime.jsx(Tooltip, {
+        title: "Clear",
+        children: jsxRuntime.jsx(Icon, {
+          name: "close",
+          height: 16,
+          width: 16,
+          onClick: handelClear,
+          hoverEffect: true,
+          cursorType: "pointer"
+        })
+      })
+    })]
   });
   return jsxRuntime.jsxs("div", {
     className: `ff-select-wrapper ${className} ${showClearIcon ? 'show-clear-icon' : ''}`,
@@ -7629,6 +7646,7 @@ const Select$1 = ({
         valueAccessor: valueAccessor,
         showArrowIcon: showArrowIcon,
         showClearIcon: showClearIcon,
+        hasInnerClearIcon: hasInnerClearIcon,
         noResultsMessage: noResultsMessage,
         ref: dropDownRef,
         searchedIcon: searchedIcon,
@@ -7652,7 +7670,7 @@ const Select$1 = ({
 };
 
 const getCharacterCount = value => {
-  return value.replace(STRIP_NEW_LINES_REGEX, '').length;
+  return value.replace(ENTER_NEW_LINE_REGEX, '').length;
 };
 const Textarea = ({
   capacity = 200,
@@ -7881,7 +7899,8 @@ const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight, op
       newTop = availableSpace.bottom > optionCardHeight + gap ? top + height + gap : top - optionCardHeight - gap;
       if (isAddResourceButton) {
         if (!(availableSpace?.bottom > optionCardHeight + gap)) {
-          newLeft = left + 50;
+          newLeft = left + 25;
+          newTop = top + 5;
         }
       }
       break;
@@ -17213,7 +17232,8 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
   pattern,
   inputMode,
   disableSelectHover = false,
-  inputRefWithDropdown
+  inputRefWithDropdown,
+  autoFocus = false
 }, ref) => {
   const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
   const handleWheel = e => {
@@ -17309,7 +17329,8 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
             'ff-floating-input--left-dropdown': dropdownPosition === 'left'
           }),
           inputMode: inputMode,
-          pattern: pattern
+          pattern: pattern,
+          autoFocus: autoFocus
         })]
       }), dropdownPosition === 'right' && jsxRuntime.jsx(Select$1, {
         optionsList: optionsList,
@@ -45191,7 +45212,7 @@ const ExcelFile = ({
   };
   const handleNameChange = (event, index, name) => {
     const target = event.target;
-    if (!target) {
+    if (!target || target?.textContent?.trim()?.toLowerCase() === name?.trim()?.toLowerCase()) {
       setEditingSheet(null);
       return;
     }
@@ -45202,13 +45223,13 @@ const ExcelFile = ({
       setEditingSheet(null);
       return;
     }
-    if (updatedSheetValue.length > 30) {
-      toast.warning('The sheet name cannot be greater than 30 characters');
+    if (updatedSheetValue.length > 50) {
+      toast.warning('The sheet name cannot be greater than 50 characters');
       target.textContent = selectedSheet.name;
       setEditingSheet(null);
       return;
     }
-    if (sheetNames.includes(updatedSheetValue) && sheetNames[index] !== updatedSheetValue) {
+    if (sheetNames.map(name => name.toLowerCase()).includes(updatedSheetValue.toLowerCase()) && name.trim()?.toLowerCase() !== updatedSheetValue?.toLowerCase()) {
       toast.warning('Sheet name already exists');
       target.textContent = selectedSheet.name;
       setEditingSheet(null);
@@ -52274,9 +52295,14 @@ const SessionDropdown = ({
   onTabClick,
   onDownloadClick,
   onDeleteClick,
+  downloadIconName = "download_file",
+  deleteIconName = "delete_icon",
   tabsData
 }) => {
   const itemsToDisplay = secondaryHeader && activeTab === 'secondary' ? secondaryItems : primaryItems;
+  const hasSecondaryItems = secondaryCount && parseInt(secondaryCount) > 0;
+  const hasPrimaryItems = primaryCount && parseInt(primaryCount) > 0;
+  const showActionIcons = secondaryHeader && (hasPrimaryItems || hasSecondaryItems);
   const handleTabClick = tabId => {
     if (onTabClick) {
       onTabClick(tabId);
@@ -52287,6 +52313,22 @@ const SessionDropdown = ({
       onSecondaryTabClick();
     }
   };
+  const renderHeaderIcons = () => jsxRuntime.jsxs("div", {
+    className: "ff-dropdown-header-icons",
+    children: [onDownloadClick && jsxRuntime.jsx(Icon, {
+      name: downloadIconName,
+      className: "ff-dropdown-icon ff-download-icon",
+      onClick: onDownloadClick,
+      width: 18,
+      height: 20
+    }), onDeleteClick && jsxRuntime.jsx(Icon, {
+      name: deleteIconName,
+      className: "ff-dropdown-icon ff-delete-icon",
+      onClick: onDeleteClick,
+      width: 25,
+      height: 25
+    })]
+  });
   return jsxRuntime.jsxs("div", {
     className: "ff-resolution-dropdown",
     style: width ? {
@@ -52303,22 +52345,32 @@ const SessionDropdown = ({
             tabsData: tabsData,
             activeTabId: activeTabId,
             onTabClick: handleTabClick
+          }), showActionIcons && renderHeaderIcons()]
+        }) : secondaryHeader && showActionIcons ? jsxRuntime.jsxs("div", {
+          className: "ff-dropdown-header-dual",
+          children: [jsxRuntime.jsxs("div", {
+            className: `ff-dropdown-header-item ${activeTab === "primary" ? "active" : ""}`,
+            onClick: onPrimaryTabClick,
+            children: [jsxRuntime.jsx(Typography, {
+              fontWeight: "semi-bold",
+              className: "ff-dropdown-text",
+              children: header
+            }), primaryCount && jsxRuntime.jsx("span", {
+              className: "ff-dropdown-count",
+              children: primaryCount
+            })]
           }), jsxRuntime.jsxs("div", {
-            className: "ff-dropdown-header-icons",
-            children: [jsxRuntime.jsx(Icon, {
-              name: "download_file",
-              className: "ff-dropdown-icon ff-download-icon",
-              onClick: onDownloadClick,
-              width: 18,
-              height: 20
-            }), jsxRuntime.jsx(Icon, {
-              name: "delete_icon",
-              className: "ff-dropdown-icon ff-delete-icon",
-              onClick: onDeleteClick,
-              width: 25,
-              height: 25
+            className: `ff-dropdown-header-item ${activeTab === "secondary" ? "active" : ""}`,
+            onClick: onSecondaryTabClick,
+            children: [jsxRuntime.jsx(Typography, {
+              fontWeight: "semi-bold",
+              className: "ff-dropdown-text",
+              children: secondaryHeader
+            }), secondaryCount && jsxRuntime.jsx("span", {
+              className: "ff-dropdown-count",
+              children: secondaryCount
             })]
-          })]
+          }), renderHeaderIcons()]
         }) : secondaryHeader ? jsxRuntime.jsxs("div", {
           className: "ff-dropdown-header-dual",
           children: [jsxRuntime.jsxs("div", {
@@ -52343,21 +52395,6 @@ const SessionDropdown = ({
               className: "ff-dropdown-count",
               children: secondaryCount
             })]
-          }), jsxRuntime.jsxs("div", {
-            className: "ff-dropdown-header-icons",
-            children: [jsxRuntime.jsx(Icon, {
-              name: "download_file",
-              className: "ff-dropdown-icon ff-download-icon",
-              onClick: onDownloadClick,
-              width: 18,
-              height: 20
-            }), jsxRuntime.jsx(Icon, {
-              name: "delete_icon",
-              className: "ff-dropdown-icon ff-delete-icon",
-              onClick: onDeleteClick,
-              width: 25,
-              height: 25
-            })]
           })]
         }) : jsxRuntime.jsx(Typography, {
           fontSize: 16,
@@ -52503,6 +52540,60 @@ const addLastChild = treeData => {
   return updatedTreeData;
 };
 
+const calculateParentSiblings = (node, allNodes) => {
+  const hierarchy = node.hierarchy || 0;
+  if (hierarchy === 0) {
+    return []; // Root nodes have no parent connecting lines
+  }
+  const parentSiblings = [];
+  const currentNodeIndex = allNodes.findIndex(n => n.key === node.key);
+  if (currentNodeIndex === -1) {
+    return new Array(hierarchy).fill(false);
+  }
+  // Build path from root to current node
+  const path = getPathToNode(node, allNodes);
+  // For each hierarchy level from 0 to hierarchy-1
+  for (let level = 0; level < hierarchy; level++) {
+    if (level === 0) {
+      // Special case for level 0: check for more root children after this node
+      const rootChildrenAfter = allNodes.slice(currentNodeIndex + 1).filter(n => (n.hierarchy || 0) === 1); // Root children have hierarchy 1
+      parentSiblings.push(rootChildrenAfter.length > 0);
+    } else {
+      // For other levels: find ancestor and check for siblings after
+      const ancestor = path.find(n => (n.hierarchy || 0) === level);
+      if (!ancestor) {
+        parentSiblings.push(false);
+        continue;
+      }
+      // Find children of this ancestor
+      const ancestorChildren = allNodes.filter(n => n.parentId === ancestor.key);
+      // Check if any child appears after the current node
+      let hasChildrenAfter = false;
+      for (const child of ancestorChildren) {
+        const childIndex = allNodes.findIndex(n => n.key === child.key);
+        if (childIndex > currentNodeIndex) {
+          hasChildrenAfter = true;
+          break;
+        }
+      }
+      parentSiblings.push(hasChildrenAfter);
+    }
+  }
+  return parentSiblings;
+};
+const getPathToNode = (node, allNodes) => {
+  const path = [];
+  let current = node;
+  while (current) {
+    path.unshift(current);
+    if (!current.parentId) break;
+    const found = allNodes.find(n => n.key === current.parentId);
+    if (!found) break;
+    current = found;
+  }
+  return path;
+};
+
 const addNewRow = (treeData, newNode, rootNode) => {
   const {
     sourceId,
@@ -52538,8 +52629,26 @@ const addNewRow = (treeData, newNode, rootNode) => {
   }
   const updatedTreeData = [...treeData];
   const sourceIndex = treeData.findIndex(node => node.key === sourceId);
+  // Create new node with proper parentId and hierarchy
+  let newNodeParentId = null;
+  let newNodeHierarchy = 0;
+  switch (action) {
+    case 'addAbove':
+      newNodeParentId = sourceNode.parentId;
+      newNodeHierarchy = sourceNode.hierarchy;
+      break;
+    case 'addBelow':
+      newNodeParentId = payloadSourceNode?.parentId || sourceNode.parentId;
+      newNodeHierarchy = payloadSourceNode?.hierarchy || sourceNode.hierarchy;
+      break;
+    case 'addInside':
+      newNodeParentId = payloadSourceNode?.key || sourceNode.key;
+      newNodeHierarchy = (payloadSourceNode?.hierarchy || sourceNode.hierarchy) + 1;
+      break;
+  }
   const newNodeBase = {
-    hierarchy: payloadSourceNode?.hierarchy ?? sourceNode.hierarchy,
+    hierarchy: newNodeHierarchy,
+    parentId: newNodeParentId,
     sourceId: sourceNode.key,
     isNewNode: true,
     key: 'new-node',
@@ -52552,28 +52661,25 @@ const addNewRow = (treeData, newNode, rootNode) => {
     confirmIconTooltip,
     cancelIconTooltip
   };
-  let parentId;
   switch (action) {
     case 'addAbove':
       updatedTreeData.splice(sourceIndex, 0, newNodeBase);
       break;
     case 'addBelow':
-      parentId = payloadSourceNode?.parentId;
-      updatedTreeData.splice(sourceIndex + 1, 0, {
-        ...newNodeBase,
-        parentId
-      });
+      updatedTreeData.splice(sourceIndex + 1, 0, newNodeBase);
       break;
     case 'addInside':
-      parentId = payloadSourceNode?.key;
-      updatedTreeData.splice(sourceIndex + 1, 0, {
-        ...newNodeBase,
-        hierarchy: newNodeBase.hierarchy + 1,
-        parentId
-      });
+      updatedTreeData.splice(sourceIndex + 1, 0, newNodeBase);
       break;
   }
-  return addLastChild(updatedTreeData);
+  // Apply lastChild updates
+  const treeWithLastChild = addLastChild(updatedTreeData);
+  // Calculate parentSiblings for all nodes
+  const treeWithParentSiblings = treeWithLastChild.map(node => ({
+    ...node,
+    parentSiblings: calculateParentSiblings(node, treeWithLastChild)
+  }));
+  return treeWithParentSiblings;
 };
 
 const renderSpaces = (level, parentSiblings = [], isLast, nextSibling, isContainer) => {