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.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,
|
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
|
-
|
2931
|
-
|
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
|
-
|
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
|
3390
|
-
|
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
|
-
}
|
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
|
-
|
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
|
-
|
3473
|
-
|
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.
|
8581
|
+
}), jsxRuntime.jsxs("tbody", {
|
8464
8582
|
className: "ff-fixed-header-table",
|
8465
|
-
children:
|
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(
|
30176
|
-
|
30177
|
-
children:
|
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
|
-
}
|
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
|
-
}),
|
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
|
-
|
54358
|
-
|
54359
|
-
|
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
|
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
|
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
|
54382
|
-
previous: !firstNode
|
54383
|
-
startId: firstNode
|
54384
|
-
endId: lastNode
|
54533
|
+
next: !lastNode?.lastResource,
|
54534
|
+
previous: !firstNode?.lastResource,
|
54535
|
+
startId: firstNode?.key,
|
54536
|
+
endId: lastNode?.key,
|
54385
54537
|
root
|
54386
54538
|
};
|
54387
54539
|
};
|