pixel-react 1.10.5 → 1.10.6

package/lib/index.js

@@ -2829,7 +2829,7 @@ const dropdownDefaultCSSData = {
   dropDownWrapperPadding: 0
 };
 
-var css_248z$12 = ".ff-select-dropdown-wrapper {\n  max-height: 160px;\n  z-index: 999999;\n  position: absolute;\n  min-width: 50px;\n  border-radius: 4px;\n  border: 1px solid var(--ff-select-option-border-color);\n  margin-top: 4px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  background-color: var(--ff-select-background-color);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: 0px 8px;\n  border-radius: 4px;\n  min-height: 32px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n  display: flex;\n  align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n  margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}";
+var css_248z$12 = ".ff-select-dropdown-wrapper,\n.ff-select-dropdown-mini-modal-wrapper {\n  max-height: 160px;\n  z-index: 999999;\n  position: absolute;\n  min-width: 50px;\n  border-radius: 4px;\n  border: 1px solid var(--ff-select-option-border-color);\n  margin-top: 4px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  background-color: var(--ff-select-background-color);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar,\n.ff-select-dropdown-mini-modal-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb,\n.ff-select-dropdown-mini-modal-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track,\n.ff-select-dropdown-mini-modal-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option {\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: 0px 8px;\n  border-radius: 4px;\n  min-height: 32px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n  display: flex;\n  align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n  margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option__selected,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-no-option {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n\n.ff-select-dropdown-modal-wrapper {\n  max-height: 256px;\n}\n\n.ff-select-dropdown-mini-modal-wrapper {\n  display: flex;\n  justify-content: space-between;\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-label-minimodal-wrapper {\n  width: calc(50% - 4px);\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-mini-modal-wrapper {\n  width: 50%;\n  padding: 8px 2px 0px 4px;\n  display: flex;\n  align-items: flex-end;\n  margin-left: 4px;\n  border-left: 1px dashed var(--border-color);\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-mini-modal-wrapper .ff-select-modal-wrapper {\n  height: fit-content;\n  width: calc(100% - 4px);\n  border-radius: 8px;\n  border: 1px solid var(--ff-select-background-color);\n  box-shadow: 0px 1px 8px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 1px solid var(--border-color);\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-mini-modal-wrapper .ff-select-modal-wrapper .ff-select-mini-modal-footer {\n  min-height: 32px;\n  border-top: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n}";
 styleInject(css_248z$12);
 
 const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
@@ -2861,12 +2861,18 @@ const Dropdown$1 = ({
   selectedOption,
   valueAccessor,
   showIcon = false,
-  showToolTip = false
+  showToolTip = false,
+  customReccurenece = true,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  recurrence = false,
+  modalJSXProps = jsxRuntime.jsx(jsxRuntime.Fragment, {})
 }) => {
   const themeContext = React.useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
+  const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
   const optionsWrapperRef = React.useRef(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
+  useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [inputRef, selectArrowRef]);
   const {
     positionX,
     positionY,
@@ -2927,11 +2933,25 @@ const Dropdown$1 = ({
       })
     });
   };
-  return jsxRuntime.jsx("div", {
-    className: classNames('ff-select-dropdown-wrapper', currentTheme),
+  const onHandleCancelModal = () => {
+    onSelectBlur();
+    onCancelModal();
+  };
+  const onHandleSaveModal = () => {
+    onSelectBlur();
+    onSaveModal();
+  };
+  return jsxRuntime.jsxs("div", {
+    className: classNames('ff-select-dropdown-wrapper', currentTheme, {
+      'ff-select-dropdown-modal-wrapper': recurrence,
+      'ff-select-dropdown-mini-modal-wrapper': customReccurenece
+    }),
     ref: optionsWrapperRef,
     style: updateDropdownPosition(),
-    children: jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
+      className: classNames({
+        'ff-select-label-minimodal-wrapper': customReccurenece
+      }),
       children: !checkEmpty(options) ? options.map(option => jsxRuntime.jsx("div", {
         className: classNames('ff-select-dropdown-option', {
           'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
@@ -2949,7 +2969,27 @@ const Dropdown$1 = ({
         className: classNames('ff-select-no-option', currentTheme),
         children: "No Results found"
       })
-    })
+    }), customReccurenece && jsxRuntime.jsx("div", {
+      className: "ff-select-mini-modal-wrapper",
+      id: "ff-select-mini-id",
+      children: jsxRuntime.jsxs("div", {
+        className: "ff-select-modal-wrapper",
+        children: [jsxRuntime.jsx(jsxRuntime.Fragment, {
+          children: modalJSXProps
+        }), jsxRuntime.jsxs("div", {
+          className: "ff-select-mini-modal-footer",
+          children: [jsxRuntime.jsx(Button$1, {
+            label: "Cancel",
+            variant: "tertiary",
+            onClick: onHandleCancelModal
+          }), jsxRuntime.jsx(Button$1, {
+            label: "Save",
+            variant: "secondary",
+            onClick: onHandleSaveModal
+          })]
+        })]
+      })
+    })]
   });
 };
 
@@ -3014,10 +3054,15 @@ const Select$1 = ({
   disableInput = false,
   showIcon = false,
   placeHolder = '',
-  showToolTip = false
+  showToolTip = false,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  modalJSXProps = jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+  recurrence = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
   const [showDropdownOptions, setShowDropdownOptions] = React.useState(false);
+  const [customRecurrence, setCustomRecurrence] = React.useState(false);
   const [searchedOption, setSearchedOption] = React.useState({
     searchedText: '',
     searchedIcon: ''
@@ -3095,11 +3140,13 @@ const Select$1 = ({
       searchedIcon: selectedOption.iconName
     });
     setSelectOptionList(optionsList);
+    setCustomRecurrence(false);
     onBlur();
   };
   const onSelectOptionSelector = option => {
     if (disabled) return;
-    onSelectBlur();
+    const isCustomRecurrence = option?.recurrence || false;
+    setCustomRecurrence(isCustomRecurrence);
     setSearchedOption({
       searchedText: getValue$1(selectedOption, valueAccessor),
       searchedIcon: selectedOption.iconName
@@ -3107,6 +3154,9 @@ const Select$1 = ({
     if (onChange) {
       onChange(option);
     }
+    if (!isCustomRecurrence) {
+      onSelectBlur();
+    }
   };
   const handleResizeOrScroll = () => onSelectUpdatePosition();
   const hideShowScrollbar = () => {
@@ -3227,7 +3277,12 @@ const Select$1 = ({
         heightFromTop: height,
         selectedOption: searchedText,
         showIcon: showIcon,
-        showToolTip: showToolTip
+        showToolTip: showToolTip,
+        customReccurenece: customRecurrence,
+        onSaveModal: onSaveModal,
+        onCancelModal: onCancelModal,
+        modalJSXProps: modalJSXProps,
+        recurrence: recurrence
       }), document.body)
     })]
   });
@@ -8376,8 +8431,37 @@ const Table$1 = ({
   headerIconName = '',
   headerIconOnClick = () => {},
   draggable = false,
-  onDragEnd
+  onDragEnd,
+  loadMore = () => {}
 }) => {
+  const observerRef = React.useRef(null);
+  React.useEffect(() => {
+    const scrollContainer = document.getElementById('ff-table-scroll-container');
+    const firstNode = document.getElementById('ff-table-first-node');
+    const lastNode = document.getElementById('ff-table-last-node');
+    // Exit early if data is empty or elements are missing
+    if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
+      return;
+    }
+    observerRef.current = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
+          loadMore(direction);
+        }
+      });
+    }, {
+      root: scrollContainer,
+      rootMargin: '8px',
+      threshold: 0.1
+    });
+    observerRef.current.observe(firstNode);
+    observerRef.current.observe(lastNode);
+    return () => {
+      // Cleanup observer
+      observerRef.current?.disconnect();
+    };
+  }, [data, loadMore]);
   const handleOnclick = (column, row) => {
     let {
       onClick,
@@ -8415,6 +8499,7 @@ const Table$1 = ({
           height: height,
           position: 'relative'
         },
+        id: "ff-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-table': withFixedHeader,
           'border-borderRadius': borderWithRadius
@@ -8460,9 +8545,11 @@ const Table$1 = ({
                 })
               }, column.header))
             })
-          }), jsxRuntime.jsx("tbody", {
+          }), jsxRuntime.jsxs("tbody", {
             className: "ff-fixed-header-table",
-            children: data?.length > 0 && data?.map(row => jsxRuntime.jsx(SortableRow, {
+            children: [jsxRuntime.jsx("tr", {
+              id: "ff-table-first-node"
+            }), data?.length > 0 && data?.map(row => jsxRuntime.jsx(SortableRow, {
               row: row,
               columns: columns,
               tableBodyRowClass: tableBodyRowClass,
@@ -8471,7 +8558,9 @@ const Table$1 = ({
               withCheckbox: withCheckbox,
               onSelectClick: onSelectClick,
               draggable: draggable
-            }, row?.id))
+            }, row?.id)), jsxRuntime.jsx("tr", {
+              id: "ff-table-last-node"
+            })]
           })]
         }), data?.length <= 0 && jsxRuntime.jsx("div", {
           className: "no-data-content",
@@ -30172,9 +30261,10 @@ const DataSetTooltip = ({
     'Project Environment Set': peVariableSetName
   };
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: jsxRuntime.jsx(Tooltip, {
-      placement: "bottom",
-      children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxRuntime.jsxs("div", {
+    children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxRuntime.jsx("div", {
+      className: '',
+      children: jsxRuntime.jsxs("div", {
+        className: '',
         children: [jsxRuntime.jsx(Typography, {
           as: "div",
           fontSize: 10,
@@ -30185,8 +30275,8 @@ const DataSetTooltip = ({
           lineHeight: "18px",
           children: value
         })]
-      }, index))
-    })
+      })
+    }, index))
   });
 };
 
@@ -30329,7 +30419,7 @@ const Branches = ({
               modalId: `${machineInstanceId}-runCount-${runCount - 1}`,
               onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
             }, ffid())]
-          }), !readOnly && jsxRuntime.jsxs("div", {
+          }), readOnly && jsxRuntime.jsxs("div", {
             className: classNames({
               'ff-connecting-branch-datalist': evenRow,
               'ff-connecting-branch-datalist-reverse': !evenRow
@@ -54361,7 +54451,7 @@ const getTreeDetails = (action, oldData, newData, index) => {
       }
       break;
     case 'start':
-      if (newData.length > 0) {
+      if (!checkEmpty(newData)) {
         root = newData[0];
         treeDataList = newData.slice(1);
       } else {
@@ -54371,17 +54461,17 @@ const getTreeDetails = (action, oldData, newData, index) => {
     default:
       throw new Error(`Invalid action: ${action}`);
   }
-  if (treeDataList.length === 0 && action !== 'start') {
+  if (checkEmpty(treeDataList) && action !== 'start') {
     throw new Error('Tree data list is empty.');
   }
   const firstNode = treeDataList[0] || root;
   const lastNode = treeDataList[treeDataList.length - 1];
   return {
     treeDataList,
-    next: !lastNode.lastResource,
-    previous: !firstNode.lastResource,
-    startId: firstNode.key,
-    endId: lastNode.key,
+    next: !lastNode?.lastResource,
+    previous: !firstNode?.lastResource,
+    startId: firstNode?.key,
+    endId: lastNode?.key,
     root
   };
 };