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.js CHANGED
@@ -2829,7 +2829,7 @@ const dropdownDefaultCSSData = {
2829
2829
  dropDownWrapperPadding: 0
2830
2830
  };
2831
2831
 
2832
- 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}";
2832
+ 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}";
2833
2833
  styleInject(css_248z$12);
2834
2834
 
2835
2835
  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 = ({
2861
2861
  selectedOption,
2862
2862
  valueAccessor,
2863
2863
  showIcon = false,
2864
- showToolTip = false
2864
+ showToolTip = false,
2865
+ customReccurenece = true,
2866
+ onCancelModal = () => {},
2867
+ onSaveModal = () => {},
2868
+ recurrence = false,
2869
+ modalJSXProps = jsxRuntime.jsx(jsxRuntime.Fragment, {})
2865
2870
  }) => {
2866
2871
  const themeContext = React.useContext(ThemeContext);
2867
2872
  const currentTheme = themeContext?.currentTheme;
2873
+ const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
2868
2874
  const optionsWrapperRef = React.useRef(null);
2869
- useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
2875
+ useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [inputRef, selectArrowRef]);
2870
2876
  const {
2871
2877
  positionX,
2872
2878
  positionY,
@@ -2927,11 +2933,25 @@ const Dropdown$1 = ({
2927
2933
  })
2928
2934
  });
2929
2935
  };
2930
- return jsxRuntime.jsx("div", {
2931
- className: classNames('ff-select-dropdown-wrapper', currentTheme),
2936
+ const onHandleCancelModal = () => {
2937
+ onSelectBlur();
2938
+ onCancelModal();
2939
+ };
2940
+ const onHandleSaveModal = () => {
2941
+ onSelectBlur();
2942
+ onSaveModal();
2943
+ };
2944
+ return jsxRuntime.jsxs("div", {
2945
+ className: classNames('ff-select-dropdown-wrapper', currentTheme, {
2946
+ 'ff-select-dropdown-modal-wrapper': recurrence,
2947
+ 'ff-select-dropdown-mini-modal-wrapper': customReccurenece
2948
+ }),
2932
2949
  ref: optionsWrapperRef,
2933
2950
  style: updateDropdownPosition(),
2934
- children: jsxRuntime.jsx("div", {
2951
+ children: [jsxRuntime.jsx("div", {
2952
+ className: classNames({
2953
+ 'ff-select-label-minimodal-wrapper': customReccurenece
2954
+ }),
2935
2955
  children: !checkEmpty(options) ? options.map(option => jsxRuntime.jsx("div", {
2936
2956
  className: classNames('ff-select-dropdown-option', {
2937
2957
  'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
@@ -2949,7 +2969,27 @@ const Dropdown$1 = ({
2949
2969
  className: classNames('ff-select-no-option', currentTheme),
2950
2970
  children: "No Results found"
2951
2971
  })
2952
- })
2972
+ }), customReccurenece && jsxRuntime.jsx("div", {
2973
+ className: "ff-select-mini-modal-wrapper",
2974
+ id: "ff-select-mini-id",
2975
+ children: jsxRuntime.jsxs("div", {
2976
+ className: "ff-select-modal-wrapper",
2977
+ children: [jsxRuntime.jsx(jsxRuntime.Fragment, {
2978
+ children: modalJSXProps
2979
+ }), jsxRuntime.jsxs("div", {
2980
+ className: "ff-select-mini-modal-footer",
2981
+ children: [jsxRuntime.jsx(Button$1, {
2982
+ label: "Cancel",
2983
+ variant: "tertiary",
2984
+ onClick: onHandleCancelModal
2985
+ }), jsxRuntime.jsx(Button$1, {
2986
+ label: "Save",
2987
+ variant: "secondary",
2988
+ onClick: onHandleSaveModal
2989
+ })]
2990
+ })]
2991
+ })
2992
+ })]
2953
2993
  });
2954
2994
  };
2955
2995
 
@@ -2959,7 +2999,7 @@ const portalPosition = {
2959
2999
  width: 0,
2960
3000
  fromBottom: 0
2961
3001
  };
2962
- const calculatePosition = portalRef => {
3002
+ const calculatePosition$1 = portalRef => {
2963
3003
  if (!portalRef?.current) {
2964
3004
  return portalPosition;
2965
3005
  }
@@ -2975,7 +3015,7 @@ const calculatePosition = portalRef => {
2975
3015
  const usePortalPosition = (portalRef, isPortalOpen) => {
2976
3016
  React.useEffect(() => {
2977
3017
  const handleUpdate = () => {
2978
- calculatePosition(portalRef);
3018
+ calculatePosition$1(portalRef);
2979
3019
  };
2980
3020
  if (isPortalOpen) {
2981
3021
  window.addEventListener('resize', handleUpdate);
@@ -2986,7 +3026,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
2986
3026
  window.removeEventListener('scroll', handleUpdate);
2987
3027
  };
2988
3028
  }, [isPortalOpen]);
2989
- return calculatePosition;
3029
+ return calculatePosition$1;
2990
3030
  };
2991
3031
 
2992
3032
  const Select$1 = ({
@@ -3014,10 +3054,15 @@ const Select$1 = ({
3014
3054
  disableInput = false,
3015
3055
  showIcon = false,
3016
3056
  placeHolder = '',
3017
- showToolTip = false
3057
+ showToolTip = false,
3058
+ onCancelModal = () => {},
3059
+ onSaveModal = () => {},
3060
+ modalJSXProps = jsxRuntime.jsx(jsxRuntime.Fragment, {}),
3061
+ recurrence = false
3018
3062
  }) => {
3019
3063
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
3020
3064
  const [showDropdownOptions, setShowDropdownOptions] = React.useState(false);
3065
+ const [customRecurrence, setCustomRecurrence] = React.useState(false);
3021
3066
  const [searchedOption, setSearchedOption] = React.useState({
3022
3067
  searchedText: '',
3023
3068
  searchedIcon: ''
@@ -3095,11 +3140,13 @@ const Select$1 = ({
3095
3140
  searchedIcon: selectedOption.iconName
3096
3141
  });
3097
3142
  setSelectOptionList(optionsList);
3143
+ setCustomRecurrence(false);
3098
3144
  onBlur();
3099
3145
  };
3100
3146
  const onSelectOptionSelector = option => {
3101
3147
  if (disabled) return;
3102
- onSelectBlur();
3148
+ const isCustomRecurrence = option?.recurrence || false;
3149
+ setCustomRecurrence(isCustomRecurrence);
3103
3150
  setSearchedOption({
3104
3151
  searchedText: getValue$1(selectedOption, valueAccessor),
3105
3152
  searchedIcon: selectedOption.iconName
@@ -3107,6 +3154,9 @@ const Select$1 = ({
3107
3154
  if (onChange) {
3108
3155
  onChange(option);
3109
3156
  }
3157
+ if (!isCustomRecurrence) {
3158
+ onSelectBlur();
3159
+ }
3110
3160
  };
3111
3161
  const handleResizeOrScroll = () => onSelectUpdatePosition();
3112
3162
  const hideShowScrollbar = () => {
@@ -3227,7 +3277,12 @@ const Select$1 = ({
3227
3277
  heightFromTop: height,
3228
3278
  selectedOption: searchedText,
3229
3279
  showIcon: showIcon,
3230
- showToolTip: showToolTip
3280
+ showToolTip: showToolTip,
3281
+ customReccurenece: customRecurrence,
3282
+ onSaveModal: onSaveModal,
3283
+ onCancelModal: onCancelModal,
3284
+ modalJSXProps: modalJSXProps,
3285
+ recurrence: recurrence
3231
3286
  }), document.body)
3232
3287
  })]
3233
3288
  });
@@ -3340,9 +3395,17 @@ const StatusButton = ({
3340
3395
  });
3341
3396
  };
3342
3397
 
3343
- 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}";
3398
+ 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}";
3344
3399
  styleInject(css_248z$$);
3345
3400
 
3401
+ // Helper function to get the anchor element
3402
+ const getAnchorElement = anchorRef => {
3403
+ if (typeof anchorRef === 'string') {
3404
+ return document.getElementById(anchorRef);
3405
+ }
3406
+ return anchorRef?.current || null;
3407
+ };
3408
+
3346
3409
  const Option$1 = ({
3347
3410
  option,
3348
3411
  onClick
@@ -3363,6 +3426,60 @@ const Option$1 = ({
3363
3426
  children: option.label
3364
3427
  })]
3365
3428
  });
3429
+ const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight) => {
3430
+ const {
3431
+ top,
3432
+ left,
3433
+ height,
3434
+ width
3435
+ } = menuPosition;
3436
+ const availableSpace = {
3437
+ top,
3438
+ bottom: window.innerHeight - (top + height),
3439
+ left,
3440
+ right: window.innerWidth - (left + width)
3441
+ };
3442
+ const gap = 8; // Required gap
3443
+ switch (dropdownPlacement) {
3444
+ case 'top':
3445
+ return availableSpace.top > optionCardHeight + gap ? {
3446
+ top: top - optionCardHeight - gap,
3447
+ left
3448
+ } : {
3449
+ top: top + height + gap,
3450
+ left
3451
+ };
3452
+ case 'down':
3453
+ return availableSpace.bottom > optionCardHeight + gap ? {
3454
+ top: top + height + gap,
3455
+ left
3456
+ } : {
3457
+ top: top - optionCardHeight - gap,
3458
+ left
3459
+ };
3460
+ case 'left':
3461
+ return availableSpace.left > width + gap ? {
3462
+ top,
3463
+ left: left - width - gap
3464
+ } : {
3465
+ top,
3466
+ left: left + width + gap
3467
+ };
3468
+ case 'right':
3469
+ return availableSpace.right > width + gap ? {
3470
+ top,
3471
+ left: left + width + gap
3472
+ } : {
3473
+ top,
3474
+ left: left - width - gap
3475
+ };
3476
+ default:
3477
+ return {
3478
+ top,
3479
+ left
3480
+ };
3481
+ }
3482
+ };
3366
3483
  const OptionCard = ({
3367
3484
  options,
3368
3485
  onClick,
@@ -3375,50 +3492,14 @@ const OptionCard = ({
3375
3492
  }) => {
3376
3493
  const themeContext = React.useContext(ThemeContext);
3377
3494
  const currentTheme = themeContext?.currentTheme;
3378
- const [optionsHeight, setOptionsHeight] = React.useState(0);
3379
- const [optionsWidth, setOptionsWidth] = React.useState(0);
3380
3495
  const optionCardRef = React.useRef(null);
3381
- React.useEffect(() => {
3382
- if (optionCardRef?.current) {
3383
- const rect = optionCardRef?.current?.getBoundingClientRect();
3384
- setOptionsHeight(rect?.height);
3385
- setOptionsWidth(rect?.width);
3386
- }
3387
- }, []);
3388
3496
  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
3389
- const style = (() => {
3390
- switch (dropdownPlacement) {
3391
- case 'top':
3392
- return {
3393
- top: menuPosition.top - optionsHeight - 7,
3394
- left: menuPosition.left - 4
3395
- };
3396
- case 'down':
3397
- return {
3398
- top: menuPosition.top + 20,
3399
- left: menuPosition.left - 4
3400
- };
3401
- case 'left':
3402
- return {
3403
- top: menuPosition.top - 4,
3404
- left: menuPosition.left - optionsWidth - 8
3405
- };
3406
- case 'right':
3407
- return {
3408
- top: menuPosition.top - 4,
3409
- left: menuPosition.left + 20
3410
- };
3411
- default:
3412
- return {
3413
- top: menuPosition.bottom,
3414
- left: menuPosition.rightSpaceAvailable + 12
3415
- };
3416
- }
3417
- })();
3497
+ const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
3498
+ const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight);
3418
3499
  return /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx("div", {
3419
- className: classNames('ff-option-card', [{
3500
+ className: classNames('ff-option-card', {
3420
3501
  'ff-option-card--primary': variant === 'primary'
3421
- }], currentTheme),
3502
+ }, currentTheme),
3422
3503
  style: {
3423
3504
  ...style,
3424
3505
  zIndex
@@ -3445,43 +3526,51 @@ const MenuOption = ({
3445
3526
  zIndex = 99,
3446
3527
  dropdownPlacement = 'down',
3447
3528
  optionCardVariant,
3448
- targetRef,
3529
+ targetRef = null,
3449
3530
  treeRowRef
3450
3531
  }) => {
3451
3532
  const [isClicked, setIsClicked] = React.useState(false);
3452
3533
  const menuRef = React.useRef(null);
3534
+ const menuIconRef = React.useRef(null);
3453
3535
  const [menuPosition, setMenuPosition] = React.useState({
3454
3536
  top: 0,
3455
3537
  left: 0,
3456
3538
  height: 0,
3457
- right: 0
3539
+ right: 0,
3540
+ width: 0
3458
3541
  });
3459
3542
  const closeDropDown = () => setIsClicked(false);
3543
+ React.useEffect(() => {
3544
+ if (targetRef) {
3545
+ const parentDom = getAnchorElement(targetRef);
3546
+ parentDom?.classList.toggle('ff-menu-parent-hover', isClicked);
3547
+ }
3548
+ return () => {
3549
+ if (targetRef) {
3550
+ const parentDom = getAnchorElement(targetRef);
3551
+ parentDom?.classList.remove('ff-menu-parent-hover');
3552
+ }
3553
+ };
3554
+ }, [isClicked, targetRef]);
3460
3555
  const onIconClickHandler = () => {
3461
3556
  onClick();
3462
3557
  calculateDims();
3463
3558
  setIsClicked(prev => !prev);
3464
3559
  };
3465
3560
  const handleOptionClick = option => {
3466
- const actionContainer = treeRowRef?.current?.children[0]?.children[2];
3467
- actionContainer.classList.remove('table-row-add-button');
3561
+ treeRowRef?.current?.children[0]?.children[2]?.classList.remove('table-row-add-button');
3468
3562
  onOptionClick(option);
3469
3563
  closeDropDown();
3470
3564
  };
3471
3565
  const calculateDims = () => {
3472
- let targetElement = null;
3473
- if (typeof targetRef === 'string') {
3474
- targetElement = document.getElementById(targetRef);
3475
- } else if (targetRef && targetRef.current) {
3476
- targetElement = targetRef.current;
3477
- }
3478
- if (targetElement) {
3479
- const rect = targetElement.getBoundingClientRect();
3566
+ if (menuIconRef.current) {
3567
+ const rect = menuIconRef.current.getBoundingClientRect();
3480
3568
  setMenuPosition({
3481
3569
  top: rect.top + window.scrollY,
3482
3570
  left: rect.left + window.scrollX,
3483
3571
  height: rect.height,
3484
- right: rect.right
3572
+ right: rect.right,
3573
+ width: rect.width
3485
3574
  });
3486
3575
  }
3487
3576
  };
@@ -3498,13 +3587,12 @@ const MenuOption = ({
3498
3587
  'ff-menuicon-container-clicked': isClicked,
3499
3588
  dark: variant === 'dark'
3500
3589
  }),
3590
+ ref: menuIconRef,
3501
3591
  onClick: onIconClickHandler,
3502
3592
  style: {
3503
3593
  width: `${iconButtonSize}px`,
3504
3594
  height: `${iconButtonSize}px`,
3505
- borderRadius: `${iconButtonBorderRadius}px`,
3506
- display: 'flex',
3507
- flexDirection: 'column'
3595
+ borderRadius: `${iconButtonBorderRadius}px`
3508
3596
  },
3509
3597
  children: jsxRuntime.jsx(Icon, {
3510
3598
  height: iconSize,
@@ -8376,8 +8464,37 @@ const Table$1 = ({
8376
8464
  headerIconName = '',
8377
8465
  headerIconOnClick = () => {},
8378
8466
  draggable = false,
8379
- onDragEnd
8467
+ onDragEnd,
8468
+ loadMore = () => {}
8380
8469
  }) => {
8470
+ const observerRef = React.useRef(null);
8471
+ React.useEffect(() => {
8472
+ const scrollContainer = document.getElementById('ff-table-scroll-container');
8473
+ const firstNode = document.getElementById('ff-table-first-node');
8474
+ const lastNode = document.getElementById('ff-table-last-node');
8475
+ // Exit early if data is empty or elements are missing
8476
+ if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
8477
+ return;
8478
+ }
8479
+ observerRef.current = new IntersectionObserver(entries => {
8480
+ entries.forEach(entry => {
8481
+ if (entry.isIntersecting) {
8482
+ const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
8483
+ loadMore(direction);
8484
+ }
8485
+ });
8486
+ }, {
8487
+ root: scrollContainer,
8488
+ rootMargin: '8px',
8489
+ threshold: 0.1
8490
+ });
8491
+ observerRef.current.observe(firstNode);
8492
+ observerRef.current.observe(lastNode);
8493
+ return () => {
8494
+ // Cleanup observer
8495
+ observerRef.current?.disconnect();
8496
+ };
8497
+ }, [data, loadMore]);
8381
8498
  const handleOnclick = (column, row) => {
8382
8499
  let {
8383
8500
  onClick,
@@ -8415,6 +8532,7 @@ const Table$1 = ({
8415
8532
  height: height,
8416
8533
  position: 'relative'
8417
8534
  },
8535
+ id: "ff-table-scroll-container",
8418
8536
  className: classNames(className, {
8419
8537
  'ff-fixed-header-table': withFixedHeader,
8420
8538
  'border-borderRadius': borderWithRadius
@@ -8460,9 +8578,11 @@ const Table$1 = ({
8460
8578
  })
8461
8579
  }, column.header))
8462
8580
  })
8463
- }), jsxRuntime.jsx("tbody", {
8581
+ }), jsxRuntime.jsxs("tbody", {
8464
8582
  className: "ff-fixed-header-table",
8465
- children: data?.length > 0 && data?.map(row => jsxRuntime.jsx(SortableRow, {
8583
+ children: [jsxRuntime.jsx("tr", {
8584
+ id: "ff-table-first-node"
8585
+ }), data?.length > 0 && data?.map(row => jsxRuntime.jsx(SortableRow, {
8466
8586
  row: row,
8467
8587
  columns: columns,
8468
8588
  tableBodyRowClass: tableBodyRowClass,
@@ -8471,7 +8591,9 @@ const Table$1 = ({
8471
8591
  withCheckbox: withCheckbox,
8472
8592
  onSelectClick: onSelectClick,
8473
8593
  draggable: draggable
8474
- }, row?.id))
8594
+ }, row?.id)), jsxRuntime.jsx("tr", {
8595
+ id: "ff-table-last-node"
8596
+ })]
8475
8597
  })]
8476
8598
  }), data?.length <= 0 && jsxRuntime.jsx("div", {
8477
8599
  className: "no-data-content",
@@ -14691,7 +14813,6 @@ const TableBody = ({
14691
14813
  onRowClick: onRowClick,
14692
14814
  onToggleExpand: node => onToggleExpand(node, index),
14693
14815
  onCheckBoxChange: onCheckBoxChange,
14694
- index: index,
14695
14816
  onAddConfirm: onAddConfirm,
14696
14817
  onAddCancel: onAddCancel
14697
14818
  }, node.key)), jsxRuntime.jsx("tr", {
@@ -30172,9 +30293,10 @@ const DataSetTooltip = ({
30172
30293
  'Project Environment Set': peVariableSetName
30173
30294
  };
30174
30295
  return jsxRuntime.jsx(jsxRuntime.Fragment, {
30175
- children: jsxRuntime.jsx(Tooltip, {
30176
- placement: "bottom",
30177
- children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxRuntime.jsxs("div", {
30296
+ children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxRuntime.jsx("div", {
30297
+ className: '',
30298
+ children: jsxRuntime.jsxs("div", {
30299
+ className: '',
30178
30300
  children: [jsxRuntime.jsx(Typography, {
30179
30301
  as: "div",
30180
30302
  fontSize: 10,
@@ -30185,8 +30307,8 @@ const DataSetTooltip = ({
30185
30307
  lineHeight: "18px",
30186
30308
  children: value
30187
30309
  })]
30188
- }, index))
30189
- })
30310
+ })
30311
+ }, index))
30190
30312
  });
30191
30313
  };
30192
30314
 
@@ -30329,7 +30451,7 @@ const Branches = ({
30329
30451
  modalId: `${machineInstanceId}-runCount-${runCount - 1}`,
30330
30452
  onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
30331
30453
  }, ffid())]
30332
- }), !readOnly && jsxRuntime.jsxs("div", {
30454
+ }), readOnly && jsxRuntime.jsxs("div", {
30333
30455
  className: classNames({
30334
30456
  'ff-connecting-branch-datalist': evenRow,
30335
30457
  'ff-connecting-branch-datalist-reverse': !evenRow
@@ -54342,9 +54464,22 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
54342
54464
  return updatedData;
54343
54465
  };
54344
54466
 
54345
- const getTreeDetails = (action, oldData, newData, index) => {
54467
+ const getTreeDetails = (action, oldData, newData, index, sourceId) => {
54346
54468
  let treeDataList;
54347
54469
  let root = undefined;
54470
+ const findIndexByKey = (data, key) => {
54471
+ return data.findIndex(node => node.key === key);
54472
+ };
54473
+ const getIndex = () => {
54474
+ if (sourceId) {
54475
+ const indexByKey = findIndexByKey(oldData, sourceId);
54476
+ if (indexByKey === -1) {
54477
+ throw new Error(`Key "${sourceId}" not found in oldData.`);
54478
+ }
54479
+ return indexByKey;
54480
+ }
54481
+ return index; // Use index if sourceId is not provided
54482
+ };
54348
54483
  switch (action) {
54349
54484
  case 'above':
54350
54485
  treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -54354,14 +54489,28 @@ const getTreeDetails = (action, oldData, newData, index) => {
54354
54489
  break;
54355
54490
  case 'expand':
54356
54491
  case 'collapse':
54357
- if (typeof index === 'number') {
54358
- treeDataList = [...oldData.slice(0, index), ...newData];
54359
- } else {
54360
- throw new Error("Index is required for 'expand' or 'collapse' actions.");
54492
+ const actionIndex = getIndex();
54493
+ if (actionIndex === undefined) {
54494
+ throw new Error("Both sourceId and index are required for 'expand' or 'collapse' actions.");
54361
54495
  }
54496
+ treeDataList = [...oldData.slice(0, actionIndex), ...newData];
54497
+ break;
54498
+ case 'addAbove':
54499
+ const addAboveIndex = getIndex();
54500
+ if (addAboveIndex === undefined) {
54501
+ throw new Error("Both sourceId and index are required for 'addAbove' action.");
54502
+ }
54503
+ treeDataList = [...oldData.slice(0, addAboveIndex), ...newData, ...oldData.slice(addAboveIndex)];
54504
+ break;
54505
+ case 'addBelow':
54506
+ const addBelowIndex = getIndex();
54507
+ if (addBelowIndex === undefined) {
54508
+ throw new Error("Both sourceId and index are required for 'addBelow' action.");
54509
+ }
54510
+ treeDataList = [...oldData.slice(0, addBelowIndex + 1), ...newData, ...oldData.slice(addBelowIndex + 1)];
54362
54511
  break;
54363
54512
  case 'start':
54364
- if (newData.length > 0) {
54513
+ if (!checkEmpty(newData)) {
54365
54514
  root = newData[0];
54366
54515
  treeDataList = newData.slice(1);
54367
54516
  } else {
@@ -54371,17 +54520,20 @@ const getTreeDetails = (action, oldData, newData, index) => {
54371
54520
  default:
54372
54521
  throw new Error(`Invalid action: ${action}`);
54373
54522
  }
54374
- if (treeDataList.length === 0 && action !== 'start') {
54523
+ if (checkEmpty(treeDataList) && action !== 'start') {
54375
54524
  throw new Error('Tree data list is empty.');
54376
54525
  }
54377
54526
  const firstNode = treeDataList[0] || root;
54378
- const lastNode = treeDataList[treeDataList.length - 1];
54527
+ const lastNode = treeDataList[treeDataList.length - 1] || {
54528
+ lastResource: true,
54529
+ key: ''
54530
+ };
54379
54531
  return {
54380
54532
  treeDataList,
54381
- next: !lastNode.lastResource,
54382
- previous: !firstNode.lastResource,
54383
- startId: firstNode.key,
54384
- endId: lastNode.key,
54533
+ next: !lastNode?.lastResource,
54534
+ previous: !firstNode?.lastResource,
54535
+ startId: firstNode?.key,
54536
+ endId: lastNode?.key,
54385
54537
  root
54386
54538
  };
54387
54539
  };