pixel-react 1.10.5 → 1.10.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/lib/components/MenuOption/types.d.ts +1 -1
  2. package/lib/components/Select/components/types.d.ts +6 -1
  3. package/lib/components/Select/types.d.ts +17 -0
  4. package/lib/components/Table/Table.d.ts +1 -1
  5. package/lib/components/Table/Types.d.ts +1 -0
  6. package/lib/index.d.ts +20 -3
  7. package/lib/index.esm.js +245 -93
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +245 -93
  10. package/lib/index.js.map +1 -1
  11. package/lib/tsconfig.tsbuildinfo +1 -1
  12. package/lib/utils/getAnchorElement/getAnchorElement.d.ts +1 -0
  13. package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -1
  14. package/package.json +1 -1
  15. package/src/components/MenuOption/MenuOption.scss +4 -0
  16. package/src/components/MenuOption/MenuOption.stories.tsx +2 -2
  17. package/src/components/MenuOption/MenuOption.tsx +72 -60
  18. package/src/components/MenuOption/types.ts +1 -1
  19. package/src/components/Select/Select.stories.tsx +43 -1
  20. package/src/components/Select/Select.tsx +16 -1
  21. package/src/components/Select/components/Dropdown.scss +41 -1
  22. package/src/components/Select/components/Dropdown.tsx +52 -6
  23. package/src/components/Select/components/types.ts +7 -2
  24. package/src/components/Select/types.ts +22 -0
  25. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
  26. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
  27. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
  28. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
  29. package/src/components/Table/Table.tsx +47 -0
  30. package/src/components/Table/Types.ts +4 -1
  31. package/src/components/TableTree/Components/TableBody.tsx +0 -1
  32. package/src/utils/getAnchorElement/getAnchorElement.ts +7 -0
  33. package/src/utils/getTreeDetails/getTreeDetails.stories.tsx +59 -9
  34. package/src/utils/getTreeDetails/getTreeDetails.ts +66 -13
package/lib/index.esm.js CHANGED
@@ -2809,7 +2809,7 @@ const dropdownDefaultCSSData = {
2809
2809
  dropDownWrapperPadding: 0
2810
2810
  };
2811
2811
 
2812
- 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}";
2812
+ 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}";
2813
2813
  styleInject(css_248z$12);
2814
2814
 
2815
2815
  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 = ({
2841
2841
  selectedOption,
2842
2842
  valueAccessor,
2843
2843
  showIcon = false,
2844
- showToolTip = false
2844
+ showToolTip = false,
2845
+ customReccurenece = true,
2846
+ onCancelModal = () => {},
2847
+ onSaveModal = () => {},
2848
+ recurrence = false,
2849
+ modalJSXProps = jsx(Fragment, {})
2845
2850
  }) => {
2846
2851
  const themeContext = useContext(ThemeContext);
2847
2852
  const currentTheme = themeContext?.currentTheme;
2853
+ const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
2848
2854
  const optionsWrapperRef = useRef(null);
2849
- useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
2855
+ useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [inputRef, selectArrowRef]);
2850
2856
  const {
2851
2857
  positionX,
2852
2858
  positionY,
@@ -2907,11 +2913,25 @@ const Dropdown$1 = ({
2907
2913
  })
2908
2914
  });
2909
2915
  };
2910
- return jsx("div", {
2911
- className: classNames('ff-select-dropdown-wrapper', currentTheme),
2916
+ const onHandleCancelModal = () => {
2917
+ onSelectBlur();
2918
+ onCancelModal();
2919
+ };
2920
+ const onHandleSaveModal = () => {
2921
+ onSelectBlur();
2922
+ onSaveModal();
2923
+ };
2924
+ return jsxs("div", {
2925
+ className: classNames('ff-select-dropdown-wrapper', currentTheme, {
2926
+ 'ff-select-dropdown-modal-wrapper': recurrence,
2927
+ 'ff-select-dropdown-mini-modal-wrapper': customReccurenece
2928
+ }),
2912
2929
  ref: optionsWrapperRef,
2913
2930
  style: updateDropdownPosition(),
2914
- children: jsx("div", {
2931
+ children: [jsx("div", {
2932
+ className: classNames({
2933
+ 'ff-select-label-minimodal-wrapper': customReccurenece
2934
+ }),
2915
2935
  children: !checkEmpty(options) ? options.map(option => jsx("div", {
2916
2936
  className: classNames('ff-select-dropdown-option', {
2917
2937
  'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
@@ -2929,7 +2949,27 @@ const Dropdown$1 = ({
2929
2949
  className: classNames('ff-select-no-option', currentTheme),
2930
2950
  children: "No Results found"
2931
2951
  })
2932
- })
2952
+ }), customReccurenece && jsx("div", {
2953
+ className: "ff-select-mini-modal-wrapper",
2954
+ id: "ff-select-mini-id",
2955
+ children: jsxs("div", {
2956
+ className: "ff-select-modal-wrapper",
2957
+ children: [jsx(Fragment, {
2958
+ children: modalJSXProps
2959
+ }), jsxs("div", {
2960
+ className: "ff-select-mini-modal-footer",
2961
+ children: [jsx(Button$1, {
2962
+ label: "Cancel",
2963
+ variant: "tertiary",
2964
+ onClick: onHandleCancelModal
2965
+ }), jsx(Button$1, {
2966
+ label: "Save",
2967
+ variant: "secondary",
2968
+ onClick: onHandleSaveModal
2969
+ })]
2970
+ })]
2971
+ })
2972
+ })]
2933
2973
  });
2934
2974
  };
2935
2975
 
@@ -2939,7 +2979,7 @@ const portalPosition = {
2939
2979
  width: 0,
2940
2980
  fromBottom: 0
2941
2981
  };
2942
- const calculatePosition = portalRef => {
2982
+ const calculatePosition$1 = portalRef => {
2943
2983
  if (!portalRef?.current) {
2944
2984
  return portalPosition;
2945
2985
  }
@@ -2955,7 +2995,7 @@ const calculatePosition = portalRef => {
2955
2995
  const usePortalPosition = (portalRef, isPortalOpen) => {
2956
2996
  useEffect(() => {
2957
2997
  const handleUpdate = () => {
2958
- calculatePosition(portalRef);
2998
+ calculatePosition$1(portalRef);
2959
2999
  };
2960
3000
  if (isPortalOpen) {
2961
3001
  window.addEventListener('resize', handleUpdate);
@@ -2966,7 +3006,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
2966
3006
  window.removeEventListener('scroll', handleUpdate);
2967
3007
  };
2968
3008
  }, [isPortalOpen]);
2969
- return calculatePosition;
3009
+ return calculatePosition$1;
2970
3010
  };
2971
3011
 
2972
3012
  const Select$1 = ({
@@ -2994,10 +3034,15 @@ const Select$1 = ({
2994
3034
  disableInput = false,
2995
3035
  showIcon = false,
2996
3036
  placeHolder = '',
2997
- showToolTip = false
3037
+ showToolTip = false,
3038
+ onCancelModal = () => {},
3039
+ onSaveModal = () => {},
3040
+ modalJSXProps = jsx(Fragment, {}),
3041
+ recurrence = false
2998
3042
  }) => {
2999
3043
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
3000
3044
  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
3045
+ const [customRecurrence, setCustomRecurrence] = useState(false);
3001
3046
  const [searchedOption, setSearchedOption] = useState({
3002
3047
  searchedText: '',
3003
3048
  searchedIcon: ''
@@ -3075,11 +3120,13 @@ const Select$1 = ({
3075
3120
  searchedIcon: selectedOption.iconName
3076
3121
  });
3077
3122
  setSelectOptionList(optionsList);
3123
+ setCustomRecurrence(false);
3078
3124
  onBlur();
3079
3125
  };
3080
3126
  const onSelectOptionSelector = option => {
3081
3127
  if (disabled) return;
3082
- onSelectBlur();
3128
+ const isCustomRecurrence = option?.recurrence || false;
3129
+ setCustomRecurrence(isCustomRecurrence);
3083
3130
  setSearchedOption({
3084
3131
  searchedText: getValue$1(selectedOption, valueAccessor),
3085
3132
  searchedIcon: selectedOption.iconName
@@ -3087,6 +3134,9 @@ const Select$1 = ({
3087
3134
  if (onChange) {
3088
3135
  onChange(option);
3089
3136
  }
3137
+ if (!isCustomRecurrence) {
3138
+ onSelectBlur();
3139
+ }
3090
3140
  };
3091
3141
  const handleResizeOrScroll = () => onSelectUpdatePosition();
3092
3142
  const hideShowScrollbar = () => {
@@ -3207,7 +3257,12 @@ const Select$1 = ({
3207
3257
  heightFromTop: height,
3208
3258
  selectedOption: searchedText,
3209
3259
  showIcon: showIcon,
3210
- showToolTip: showToolTip
3260
+ showToolTip: showToolTip,
3261
+ customReccurenece: customRecurrence,
3262
+ onSaveModal: onSaveModal,
3263
+ onCancelModal: onCancelModal,
3264
+ modalJSXProps: modalJSXProps,
3265
+ recurrence: recurrence
3211
3266
  }), document.body)
3212
3267
  })]
3213
3268
  });
@@ -3320,9 +3375,17 @@ const StatusButton = ({
3320
3375
  });
3321
3376
  };
3322
3377
 
3323
- var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: absolute;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
3378
+ var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: absolute;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}\n\n.ff-menu-parent-hover {\n background-color: var(--hover-color) !important;\n}";
3324
3379
  styleInject(css_248z$$);
3325
3380
 
3381
+ // Helper function to get the anchor element
3382
+ const getAnchorElement = anchorRef => {
3383
+ if (typeof anchorRef === 'string') {
3384
+ return document.getElementById(anchorRef);
3385
+ }
3386
+ return anchorRef?.current || null;
3387
+ };
3388
+
3326
3389
  const Option$1 = ({
3327
3390
  option,
3328
3391
  onClick
@@ -3343,6 +3406,60 @@ const Option$1 = ({
3343
3406
  children: option.label
3344
3407
  })]
3345
3408
  });
3409
+ const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight) => {
3410
+ const {
3411
+ top,
3412
+ left,
3413
+ height,
3414
+ width
3415
+ } = menuPosition;
3416
+ const availableSpace = {
3417
+ top,
3418
+ bottom: window.innerHeight - (top + height),
3419
+ left,
3420
+ right: window.innerWidth - (left + width)
3421
+ };
3422
+ const gap = 8; // Required gap
3423
+ switch (dropdownPlacement) {
3424
+ case 'top':
3425
+ return availableSpace.top > optionCardHeight + gap ? {
3426
+ top: top - optionCardHeight - gap,
3427
+ left
3428
+ } : {
3429
+ top: top + height + gap,
3430
+ left
3431
+ };
3432
+ case 'down':
3433
+ return availableSpace.bottom > optionCardHeight + gap ? {
3434
+ top: top + height + gap,
3435
+ left
3436
+ } : {
3437
+ top: top - optionCardHeight - gap,
3438
+ left
3439
+ };
3440
+ case 'left':
3441
+ return availableSpace.left > width + gap ? {
3442
+ top,
3443
+ left: left - width - gap
3444
+ } : {
3445
+ top,
3446
+ left: left + width + gap
3447
+ };
3448
+ case 'right':
3449
+ return availableSpace.right > width + gap ? {
3450
+ top,
3451
+ left: left + width + gap
3452
+ } : {
3453
+ top,
3454
+ left: left - width - gap
3455
+ };
3456
+ default:
3457
+ return {
3458
+ top,
3459
+ left
3460
+ };
3461
+ }
3462
+ };
3346
3463
  const OptionCard = ({
3347
3464
  options,
3348
3465
  onClick,
@@ -3355,50 +3472,14 @@ const OptionCard = ({
3355
3472
  }) => {
3356
3473
  const themeContext = useContext(ThemeContext);
3357
3474
  const currentTheme = themeContext?.currentTheme;
3358
- const [optionsHeight, setOptionsHeight] = useState(0);
3359
- const [optionsWidth, setOptionsWidth] = useState(0);
3360
3475
  const optionCardRef = useRef(null);
3361
- useEffect(() => {
3362
- if (optionCardRef?.current) {
3363
- const rect = optionCardRef?.current?.getBoundingClientRect();
3364
- setOptionsHeight(rect?.height);
3365
- setOptionsWidth(rect?.width);
3366
- }
3367
- }, []);
3368
3476
  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
3369
- const style = (() => {
3370
- switch (dropdownPlacement) {
3371
- case 'top':
3372
- return {
3373
- top: menuPosition.top - optionsHeight - 7,
3374
- left: menuPosition.left - 4
3375
- };
3376
- case 'down':
3377
- return {
3378
- top: menuPosition.top + 20,
3379
- left: menuPosition.left - 4
3380
- };
3381
- case 'left':
3382
- return {
3383
- top: menuPosition.top - 4,
3384
- left: menuPosition.left - optionsWidth - 8
3385
- };
3386
- case 'right':
3387
- return {
3388
- top: menuPosition.top - 4,
3389
- left: menuPosition.left + 20
3390
- };
3391
- default:
3392
- return {
3393
- top: menuPosition.bottom,
3394
- left: menuPosition.rightSpaceAvailable + 12
3395
- };
3396
- }
3397
- })();
3477
+ const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
3478
+ const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight);
3398
3479
  return /*#__PURE__*/createPortal(jsx("div", {
3399
- className: classNames('ff-option-card', [{
3480
+ className: classNames('ff-option-card', {
3400
3481
  'ff-option-card--primary': variant === 'primary'
3401
- }], currentTheme),
3482
+ }, currentTheme),
3402
3483
  style: {
3403
3484
  ...style,
3404
3485
  zIndex
@@ -3425,43 +3506,51 @@ const MenuOption = ({
3425
3506
  zIndex = 99,
3426
3507
  dropdownPlacement = 'down',
3427
3508
  optionCardVariant,
3428
- targetRef,
3509
+ targetRef = null,
3429
3510
  treeRowRef
3430
3511
  }) => {
3431
3512
  const [isClicked, setIsClicked] = useState(false);
3432
3513
  const menuRef = useRef(null);
3514
+ const menuIconRef = useRef(null);
3433
3515
  const [menuPosition, setMenuPosition] = useState({
3434
3516
  top: 0,
3435
3517
  left: 0,
3436
3518
  height: 0,
3437
- right: 0
3519
+ right: 0,
3520
+ width: 0
3438
3521
  });
3439
3522
  const closeDropDown = () => setIsClicked(false);
3523
+ useEffect(() => {
3524
+ if (targetRef) {
3525
+ const parentDom = getAnchorElement(targetRef);
3526
+ parentDom?.classList.toggle('ff-menu-parent-hover', isClicked);
3527
+ }
3528
+ return () => {
3529
+ if (targetRef) {
3530
+ const parentDom = getAnchorElement(targetRef);
3531
+ parentDom?.classList.remove('ff-menu-parent-hover');
3532
+ }
3533
+ };
3534
+ }, [isClicked, targetRef]);
3440
3535
  const onIconClickHandler = () => {
3441
3536
  onClick();
3442
3537
  calculateDims();
3443
3538
  setIsClicked(prev => !prev);
3444
3539
  };
3445
3540
  const handleOptionClick = option => {
3446
- const actionContainer = treeRowRef?.current?.children[0]?.children[2];
3447
- actionContainer.classList.remove('table-row-add-button');
3541
+ treeRowRef?.current?.children[0]?.children[2]?.classList.remove('table-row-add-button');
3448
3542
  onOptionClick(option);
3449
3543
  closeDropDown();
3450
3544
  };
3451
3545
  const calculateDims = () => {
3452
- let targetElement = null;
3453
- if (typeof targetRef === 'string') {
3454
- targetElement = document.getElementById(targetRef);
3455
- } else if (targetRef && targetRef.current) {
3456
- targetElement = targetRef.current;
3457
- }
3458
- if (targetElement) {
3459
- const rect = targetElement.getBoundingClientRect();
3546
+ if (menuIconRef.current) {
3547
+ const rect = menuIconRef.current.getBoundingClientRect();
3460
3548
  setMenuPosition({
3461
3549
  top: rect.top + window.scrollY,
3462
3550
  left: rect.left + window.scrollX,
3463
3551
  height: rect.height,
3464
- right: rect.right
3552
+ right: rect.right,
3553
+ width: rect.width
3465
3554
  });
3466
3555
  }
3467
3556
  };
@@ -3478,13 +3567,12 @@ const MenuOption = ({
3478
3567
  'ff-menuicon-container-clicked': isClicked,
3479
3568
  dark: variant === 'dark'
3480
3569
  }),
3570
+ ref: menuIconRef,
3481
3571
  onClick: onIconClickHandler,
3482
3572
  style: {
3483
3573
  width: `${iconButtonSize}px`,
3484
3574
  height: `${iconButtonSize}px`,
3485
- borderRadius: `${iconButtonBorderRadius}px`,
3486
- display: 'flex',
3487
- flexDirection: 'column'
3575
+ borderRadius: `${iconButtonBorderRadius}px`
3488
3576
  },
3489
3577
  children: jsx(Icon, {
3490
3578
  height: iconSize,
@@ -8356,8 +8444,37 @@ const Table$1 = ({
8356
8444
  headerIconName = '',
8357
8445
  headerIconOnClick = () => {},
8358
8446
  draggable = false,
8359
- onDragEnd
8447
+ onDragEnd,
8448
+ loadMore = () => {}
8360
8449
  }) => {
8450
+ const observerRef = useRef(null);
8451
+ useEffect(() => {
8452
+ const scrollContainer = document.getElementById('ff-table-scroll-container');
8453
+ const firstNode = document.getElementById('ff-table-first-node');
8454
+ const lastNode = document.getElementById('ff-table-last-node');
8455
+ // Exit early if data is empty or elements are missing
8456
+ if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
8457
+ return;
8458
+ }
8459
+ observerRef.current = new IntersectionObserver(entries => {
8460
+ entries.forEach(entry => {
8461
+ if (entry.isIntersecting) {
8462
+ const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
8463
+ loadMore(direction);
8464
+ }
8465
+ });
8466
+ }, {
8467
+ root: scrollContainer,
8468
+ rootMargin: '8px',
8469
+ threshold: 0.1
8470
+ });
8471
+ observerRef.current.observe(firstNode);
8472
+ observerRef.current.observe(lastNode);
8473
+ return () => {
8474
+ // Cleanup observer
8475
+ observerRef.current?.disconnect();
8476
+ };
8477
+ }, [data, loadMore]);
8361
8478
  const handleOnclick = (column, row) => {
8362
8479
  let {
8363
8480
  onClick,
@@ -8395,6 +8512,7 @@ const Table$1 = ({
8395
8512
  height: height,
8396
8513
  position: 'relative'
8397
8514
  },
8515
+ id: "ff-table-scroll-container",
8398
8516
  className: classNames(className, {
8399
8517
  'ff-fixed-header-table': withFixedHeader,
8400
8518
  'border-borderRadius': borderWithRadius
@@ -8440,9 +8558,11 @@ const Table$1 = ({
8440
8558
  })
8441
8559
  }, column.header))
8442
8560
  })
8443
- }), jsx("tbody", {
8561
+ }), jsxs("tbody", {
8444
8562
  className: "ff-fixed-header-table",
8445
- children: data?.length > 0 && data?.map(row => jsx(SortableRow, {
8563
+ children: [jsx("tr", {
8564
+ id: "ff-table-first-node"
8565
+ }), data?.length > 0 && data?.map(row => jsx(SortableRow, {
8446
8566
  row: row,
8447
8567
  columns: columns,
8448
8568
  tableBodyRowClass: tableBodyRowClass,
@@ -8451,7 +8571,9 @@ const Table$1 = ({
8451
8571
  withCheckbox: withCheckbox,
8452
8572
  onSelectClick: onSelectClick,
8453
8573
  draggable: draggable
8454
- }, row?.id))
8574
+ }, row?.id)), jsx("tr", {
8575
+ id: "ff-table-last-node"
8576
+ })]
8455
8577
  })]
8456
8578
  }), data?.length <= 0 && jsx("div", {
8457
8579
  className: "no-data-content",
@@ -14671,7 +14793,6 @@ const TableBody = ({
14671
14793
  onRowClick: onRowClick,
14672
14794
  onToggleExpand: node => onToggleExpand(node, index),
14673
14795
  onCheckBoxChange: onCheckBoxChange,
14674
- index: index,
14675
14796
  onAddConfirm: onAddConfirm,
14676
14797
  onAddCancel: onAddCancel
14677
14798
  }, node.key)), jsx("tr", {
@@ -30152,9 +30273,10 @@ const DataSetTooltip = ({
30152
30273
  'Project Environment Set': peVariableSetName
30153
30274
  };
30154
30275
  return jsx(Fragment, {
30155
- children: jsx(Tooltip, {
30156
- placement: "bottom",
30157
- children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxs("div", {
30276
+ children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsx("div", {
30277
+ className: '',
30278
+ children: jsxs("div", {
30279
+ className: '',
30158
30280
  children: [jsx(Typography, {
30159
30281
  as: "div",
30160
30282
  fontSize: 10,
@@ -30165,8 +30287,8 @@ const DataSetTooltip = ({
30165
30287
  lineHeight: "18px",
30166
30288
  children: value
30167
30289
  })]
30168
- }, index))
30169
- })
30290
+ })
30291
+ }, index))
30170
30292
  });
30171
30293
  };
30172
30294
 
@@ -30309,7 +30431,7 @@ const Branches = ({
30309
30431
  modalId: `${machineInstanceId}-runCount-${runCount - 1}`,
30310
30432
  onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
30311
30433
  }, ffid())]
30312
- }), !readOnly && jsxs("div", {
30434
+ }), readOnly && jsxs("div", {
30313
30435
  className: classNames({
30314
30436
  'ff-connecting-branch-datalist': evenRow,
30315
30437
  'ff-connecting-branch-datalist-reverse': !evenRow
@@ -54322,9 +54444,22 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
54322
54444
  return updatedData;
54323
54445
  };
54324
54446
 
54325
- const getTreeDetails = (action, oldData, newData, index) => {
54447
+ const getTreeDetails = (action, oldData, newData, index, sourceId) => {
54326
54448
  let treeDataList;
54327
54449
  let root = undefined;
54450
+ const findIndexByKey = (data, key) => {
54451
+ return data.findIndex(node => node.key === key);
54452
+ };
54453
+ const getIndex = () => {
54454
+ if (sourceId) {
54455
+ const indexByKey = findIndexByKey(oldData, sourceId);
54456
+ if (indexByKey === -1) {
54457
+ throw new Error(`Key "${sourceId}" not found in oldData.`);
54458
+ }
54459
+ return indexByKey;
54460
+ }
54461
+ return index; // Use index if sourceId is not provided
54462
+ };
54328
54463
  switch (action) {
54329
54464
  case 'above':
54330
54465
  treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -54334,14 +54469,28 @@ const getTreeDetails = (action, oldData, newData, index) => {
54334
54469
  break;
54335
54470
  case 'expand':
54336
54471
  case 'collapse':
54337
- if (typeof index === 'number') {
54338
- treeDataList = [...oldData.slice(0, index), ...newData];
54339
- } else {
54340
- throw new Error("Index is required for 'expand' or 'collapse' actions.");
54472
+ const actionIndex = getIndex();
54473
+ if (actionIndex === undefined) {
54474
+ throw new Error("Both sourceId and index are required for 'expand' or 'collapse' actions.");
54341
54475
  }
54476
+ treeDataList = [...oldData.slice(0, actionIndex), ...newData];
54477
+ break;
54478
+ case 'addAbove':
54479
+ const addAboveIndex = getIndex();
54480
+ if (addAboveIndex === undefined) {
54481
+ throw new Error("Both sourceId and index are required for 'addAbove' action.");
54482
+ }
54483
+ treeDataList = [...oldData.slice(0, addAboveIndex), ...newData, ...oldData.slice(addAboveIndex)];
54484
+ break;
54485
+ case 'addBelow':
54486
+ const addBelowIndex = getIndex();
54487
+ if (addBelowIndex === undefined) {
54488
+ throw new Error("Both sourceId and index are required for 'addBelow' action.");
54489
+ }
54490
+ treeDataList = [...oldData.slice(0, addBelowIndex + 1), ...newData, ...oldData.slice(addBelowIndex + 1)];
54342
54491
  break;
54343
54492
  case 'start':
54344
- if (newData.length > 0) {
54493
+ if (!checkEmpty(newData)) {
54345
54494
  root = newData[0];
54346
54495
  treeDataList = newData.slice(1);
54347
54496
  } else {
@@ -54351,17 +54500,20 @@ const getTreeDetails = (action, oldData, newData, index) => {
54351
54500
  default:
54352
54501
  throw new Error(`Invalid action: ${action}`);
54353
54502
  }
54354
- if (treeDataList.length === 0 && action !== 'start') {
54503
+ if (checkEmpty(treeDataList) && action !== 'start') {
54355
54504
  throw new Error('Tree data list is empty.');
54356
54505
  }
54357
54506
  const firstNode = treeDataList[0] || root;
54358
- const lastNode = treeDataList[treeDataList.length - 1];
54507
+ const lastNode = treeDataList[treeDataList.length - 1] || {
54508
+ lastResource: true,
54509
+ key: ''
54510
+ };
54359
54511
  return {
54360
54512
  treeDataList,
54361
- next: !lastNode.lastResource,
54362
- previous: !firstNode.lastResource,
54363
- startId: firstNode.key,
54364
- endId: lastNode.key,
54513
+ next: !lastNode?.lastResource,
54514
+ previous: !firstNode?.lastResource,
54515
+ startId: firstNode?.key,
54516
+ endId: lastNode?.key,
54365
54517
  root
54366
54518
  };
54367
54519
  };