pixel-react 1.10.5 → 1.10.6

package/lib/components/Select/components/types.d.ts

@@ -1,5 +1,5 @@
 import { DropdownPosition, Option } from '../types';
-import { RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 export interface DropdownProps {
     options: Option[];
     dropdownPosition: DropdownPosition;
@@ -14,6 +14,11 @@ export interface DropdownProps {
     selectedOption?: Option;
     showIcon?: boolean;
     showToolTip?: boolean;
+    customReccurenece?: boolean;
+    onCancelModal?: () => void;
+    onSaveModal?: () => void;
+    modalJSXProps?: ReactNode;
+    recurrence?: boolean;
 }
 export declare const dropdownDefaultCSSData: {
     margin: number;

package/lib/components/Select/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface SelectProps {
     label?: string;
     showLabel?: boolean;
@@ -36,6 +37,22 @@ export interface SelectProps {
      * Provide the background color for the select label on the hover state
      */
     labelBackgroundColor?: string;
+    /**
+     * To close the modal in the select dropdown
+     */
+    onCancelModal?: () => void;
+    /**
+     * To close the modal in the select dropdown
+     */
+    onSaveModal?: () => void;
+    /**
+     * Pass the custom Jsx for the Modal
+     */
+    modalJSXProps?: ReactNode;
+    /**
+     * Pass the recurrence boolean for the exeception cases
+     */
+    recurrence?: boolean;
 }
 export interface DropdownPosition {
     positionX: number;

package/lib/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import './Table.scss';
 import { TableProps } from './Types';
-declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, }: TableProps) => import("react/jsx-runtime").JSX.Element;
+declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, loadMore, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export default Table;

package/lib/components/Table/Types.d.ts

@@ -127,4 +127,5 @@ export interface TableProps {
     * Drag and Drop indexes
     */
     onDragEnd?: (startIndex: number, endIndex: number) => void | undefined;
+    loadMore?: (_direction?: string) => void;
 }

package/lib/index.d.ts

@@ -812,6 +812,22 @@ interface SelectProps$1 {
      * Provide the background color for the select label on the hover state
      */
     labelBackgroundColor?: string;
+    /**
+     * To close the modal in the select dropdown
+     */
+    onCancelModal?: () => void;
+    /**
+     * To close the modal in the select dropdown
+     */
+    onSaveModal?: () => void;
+    /**
+     * Pass the custom Jsx for the Modal
+     */
+    modalJSXProps?: ReactNode;
+    /**
+     * Pass the recurrence boolean for the exeception cases
+     */
+    recurrence?: boolean;
 }
 type OptionValue = any;
 interface Option$2 {
@@ -1167,9 +1183,10 @@ interface TableProps$1 {
     * Drag and Drop indexes
     */
     onDragEnd?: (startIndex: number, endIndex: number) => void | undefined;
+    loadMore?: (_direction?: string) => void;
 }
 
-declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, }: TableProps$1) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, loadMore, }: TableProps$1) => react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the Add Resource Button component.

package/lib/index.esm.js

@@ -2809,7 +2809,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));
@@ -2841,12 +2841,18 @@ const Dropdown$1 = ({
   selectedOption,
   valueAccessor,
   showIcon = false,
-  showToolTip = false
+  showToolTip = false,
+  customReccurenece = true,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  recurrence = false,
+  modalJSXProps = jsx(Fragment, {})
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
+  const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
   const optionsWrapperRef = useRef(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
+  useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [inputRef, selectArrowRef]);
   const {
     positionX,
     positionY,
@@ -2907,11 +2913,25 @@ const Dropdown$1 = ({
       })
     });
   };
-  return jsx("div", {
-    className: classNames('ff-select-dropdown-wrapper', currentTheme),
+  const onHandleCancelModal = () => {
+    onSelectBlur();
+    onCancelModal();
+  };
+  const onHandleSaveModal = () => {
+    onSelectBlur();
+    onSaveModal();
+  };
+  return 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: jsx("div", {
+    children: [jsx("div", {
+      className: classNames({
+        'ff-select-label-minimodal-wrapper': customReccurenece
+      }),
       children: !checkEmpty(options) ? options.map(option => jsx("div", {
         className: classNames('ff-select-dropdown-option', {
           'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
@@ -2929,7 +2949,27 @@ const Dropdown$1 = ({
         className: classNames('ff-select-no-option', currentTheme),
         children: "No Results found"
       })
-    })
+    }), customReccurenece && jsx("div", {
+      className: "ff-select-mini-modal-wrapper",
+      id: "ff-select-mini-id",
+      children: jsxs("div", {
+        className: "ff-select-modal-wrapper",
+        children: [jsx(Fragment, {
+          children: modalJSXProps
+        }), jsxs("div", {
+          className: "ff-select-mini-modal-footer",
+          children: [jsx(Button$1, {
+            label: "Cancel",
+            variant: "tertiary",
+            onClick: onHandleCancelModal
+          }), jsx(Button$1, {
+            label: "Save",
+            variant: "secondary",
+            onClick: onHandleSaveModal
+          })]
+        })]
+      })
+    })]
   });
 };
 
@@ -2994,10 +3034,15 @@ const Select$1 = ({
   disableInput = false,
   showIcon = false,
   placeHolder = '',
-  showToolTip = false
+  showToolTip = false,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  modalJSXProps = jsx(Fragment, {}),
+  recurrence = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
   const [showDropdownOptions, setShowDropdownOptions] = useState(false);
+  const [customRecurrence, setCustomRecurrence] = useState(false);
   const [searchedOption, setSearchedOption] = useState({
     searchedText: '',
     searchedIcon: ''
@@ -3075,11 +3120,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
@@ -3087,6 +3134,9 @@ const Select$1 = ({
     if (onChange) {
       onChange(option);
     }
+    if (!isCustomRecurrence) {
+      onSelectBlur();
+    }
   };
   const handleResizeOrScroll = () => onSelectUpdatePosition();
   const hideShowScrollbar = () => {
@@ -3207,7 +3257,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)
     })]
   });
@@ -8356,8 +8411,37 @@ const Table$1 = ({
   headerIconName = '',
   headerIconOnClick = () => {},
   draggable = false,
-  onDragEnd
+  onDragEnd,
+  loadMore = () => {}
 }) => {
+  const observerRef = useRef(null);
+  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,
@@ -8395,6 +8479,7 @@ const Table$1 = ({
           height: height,
           position: 'relative'
         },
+        id: "ff-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-table': withFixedHeader,
           'border-borderRadius': borderWithRadius
@@ -8440,9 +8525,11 @@ const Table$1 = ({
                 })
               }, column.header))
             })
-          }), jsx("tbody", {
+          }), jsxs("tbody", {
             className: "ff-fixed-header-table",
-            children: data?.length > 0 && data?.map(row => jsx(SortableRow, {
+            children: [jsx("tr", {
+              id: "ff-table-first-node"
+            }), data?.length > 0 && data?.map(row => jsx(SortableRow, {
               row: row,
               columns: columns,
               tableBodyRowClass: tableBodyRowClass,
@@ -8451,7 +8538,9 @@ const Table$1 = ({
               withCheckbox: withCheckbox,
               onSelectClick: onSelectClick,
               draggable: draggable
-            }, row?.id))
+            }, row?.id)), jsx("tr", {
+              id: "ff-table-last-node"
+            })]
           })]
         }), data?.length <= 0 && jsx("div", {
           className: "no-data-content",
@@ -30152,9 +30241,10 @@ const DataSetTooltip = ({
     'Project Environment Set': peVariableSetName
   };
   return jsx(Fragment, {
-    children: jsx(Tooltip, {
-      placement: "bottom",
-      children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxs("div", {
+    children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsx("div", {
+      className: '',
+      children: jsxs("div", {
+        className: '',
         children: [jsx(Typography, {
           as: "div",
           fontSize: 10,
@@ -30165,8 +30255,8 @@ const DataSetTooltip = ({
           lineHeight: "18px",
           children: value
         })]
-      }, index))
-    })
+      })
+    }, index))
   });
 };
 
@@ -30309,7 +30399,7 @@ const Branches = ({
               modalId: `${machineInstanceId}-runCount-${runCount - 1}`,
               onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
             }, ffid())]
-          }), !readOnly && jsxs("div", {
+          }), readOnly && jsxs("div", {
             className: classNames({
               'ff-connecting-branch-datalist': evenRow,
               'ff-connecting-branch-datalist-reverse': !evenRow
@@ -54341,7 +54431,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 {
@@ -54351,17 +54441,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
   };
 };