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.
- package/lib/components/MenuOption/types.d.ts +1 -1
- package/lib/components/Select/components/types.d.ts +6 -1
- package/lib/components/Select/types.d.ts +17 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +1 -0
- package/lib/index.d.ts +20 -3
- package/lib/index.esm.js +245 -93
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +245 -93
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getAnchorElement/getAnchorElement.d.ts +1 -0
- package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/MenuOption/MenuOption.scss +4 -0
- package/src/components/MenuOption/MenuOption.stories.tsx +2 -2
- package/src/components/MenuOption/MenuOption.tsx +72 -60
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/Select/Select.stories.tsx +43 -1
- package/src/components/Select/Select.tsx +16 -1
- package/src/components/Select/components/Dropdown.scss +41 -1
- package/src/components/Select/components/Dropdown.tsx +52 -6
- package/src/components/Select/components/types.ts +7 -2
- package/src/components/Select/types.ts +22 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
- package/src/components/Table/Table.tsx +47 -0
- package/src/components/Table/Types.ts +4 -1
- package/src/components/TableTree/Components/TableBody.tsx +0 -1
- package/src/utils/getAnchorElement/getAnchorElement.ts +7 -0
- package/src/utils/getTreeDetails/getTreeDetails.stories.tsx +59 -9
- 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,
|
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
|
-
|
2911
|
-
|
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
|
-
|
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
|
3370
|
-
|
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
|
-
}
|
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
|
-
|
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
|
-
|
3453
|
-
|
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
|
-
}),
|
8561
|
+
}), jsxs("tbody", {
|
8444
8562
|
className: "ff-fixed-header-table",
|
8445
|
-
children:
|
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(
|
30156
|
-
|
30157
|
-
children:
|
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
|
-
}
|
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
|
-
}),
|
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
|
-
|
54338
|
-
|
54339
|
-
|
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
|
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
|
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
|
54362
|
-
previous: !firstNode
|
54363
|
-
startId: firstNode
|
54364
|
-
endId: lastNode
|
54513
|
+
next: !lastNode?.lastResource,
|
54514
|
+
previous: !firstNode?.lastResource,
|
54515
|
+
startId: firstNode?.key,
|
54516
|
+
endId: lastNode?.key,
|
54365
54517
|
root
|
54366
54518
|
};
|
54367
54519
|
};
|