pixel-react 1.10.5 → 1.10.6
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/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 +18 -1
- package/lib/index.esm.js +116 -26
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +116 -26
- package/lib/index.js.map +1 -1
- package/package.json +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/utils/getTreeDetails/getTreeDetails.ts +7 -6
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
|
|
@@ -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
|
});
|
@@ -8376,8 +8431,37 @@ const Table$1 = ({
|
|
8376
8431
|
headerIconName = '',
|
8377
8432
|
headerIconOnClick = () => {},
|
8378
8433
|
draggable = false,
|
8379
|
-
onDragEnd
|
8434
|
+
onDragEnd,
|
8435
|
+
loadMore = () => {}
|
8380
8436
|
}) => {
|
8437
|
+
const observerRef = React.useRef(null);
|
8438
|
+
React.useEffect(() => {
|
8439
|
+
const scrollContainer = document.getElementById('ff-table-scroll-container');
|
8440
|
+
const firstNode = document.getElementById('ff-table-first-node');
|
8441
|
+
const lastNode = document.getElementById('ff-table-last-node');
|
8442
|
+
// Exit early if data is empty or elements are missing
|
8443
|
+
if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
|
8444
|
+
return;
|
8445
|
+
}
|
8446
|
+
observerRef.current = new IntersectionObserver(entries => {
|
8447
|
+
entries.forEach(entry => {
|
8448
|
+
if (entry.isIntersecting) {
|
8449
|
+
const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
|
8450
|
+
loadMore(direction);
|
8451
|
+
}
|
8452
|
+
});
|
8453
|
+
}, {
|
8454
|
+
root: scrollContainer,
|
8455
|
+
rootMargin: '8px',
|
8456
|
+
threshold: 0.1
|
8457
|
+
});
|
8458
|
+
observerRef.current.observe(firstNode);
|
8459
|
+
observerRef.current.observe(lastNode);
|
8460
|
+
return () => {
|
8461
|
+
// Cleanup observer
|
8462
|
+
observerRef.current?.disconnect();
|
8463
|
+
};
|
8464
|
+
}, [data, loadMore]);
|
8381
8465
|
const handleOnclick = (column, row) => {
|
8382
8466
|
let {
|
8383
8467
|
onClick,
|
@@ -8415,6 +8499,7 @@ const Table$1 = ({
|
|
8415
8499
|
height: height,
|
8416
8500
|
position: 'relative'
|
8417
8501
|
},
|
8502
|
+
id: "ff-table-scroll-container",
|
8418
8503
|
className: classNames(className, {
|
8419
8504
|
'ff-fixed-header-table': withFixedHeader,
|
8420
8505
|
'border-borderRadius': borderWithRadius
|
@@ -8460,9 +8545,11 @@ const Table$1 = ({
|
|
8460
8545
|
})
|
8461
8546
|
}, column.header))
|
8462
8547
|
})
|
8463
|
-
}), jsxRuntime.
|
8548
|
+
}), jsxRuntime.jsxs("tbody", {
|
8464
8549
|
className: "ff-fixed-header-table",
|
8465
|
-
children:
|
8550
|
+
children: [jsxRuntime.jsx("tr", {
|
8551
|
+
id: "ff-table-first-node"
|
8552
|
+
}), data?.length > 0 && data?.map(row => jsxRuntime.jsx(SortableRow, {
|
8466
8553
|
row: row,
|
8467
8554
|
columns: columns,
|
8468
8555
|
tableBodyRowClass: tableBodyRowClass,
|
@@ -8471,7 +8558,9 @@ const Table$1 = ({
|
|
8471
8558
|
withCheckbox: withCheckbox,
|
8472
8559
|
onSelectClick: onSelectClick,
|
8473
8560
|
draggable: draggable
|
8474
|
-
}, row?.id))
|
8561
|
+
}, row?.id)), jsxRuntime.jsx("tr", {
|
8562
|
+
id: "ff-table-last-node"
|
8563
|
+
})]
|
8475
8564
|
})]
|
8476
8565
|
}), data?.length <= 0 && jsxRuntime.jsx("div", {
|
8477
8566
|
className: "no-data-content",
|
@@ -30172,9 +30261,10 @@ const DataSetTooltip = ({
|
|
30172
30261
|
'Project Environment Set': peVariableSetName
|
30173
30262
|
};
|
30174
30263
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
30175
|
-
children: jsxRuntime.jsx(
|
30176
|
-
|
30177
|
-
children:
|
30264
|
+
children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxRuntime.jsx("div", {
|
30265
|
+
className: '',
|
30266
|
+
children: jsxRuntime.jsxs("div", {
|
30267
|
+
className: '',
|
30178
30268
|
children: [jsxRuntime.jsx(Typography, {
|
30179
30269
|
as: "div",
|
30180
30270
|
fontSize: 10,
|
@@ -30185,8 +30275,8 @@ const DataSetTooltip = ({
|
|
30185
30275
|
lineHeight: "18px",
|
30186
30276
|
children: value
|
30187
30277
|
})]
|
30188
|
-
}
|
30189
|
-
})
|
30278
|
+
})
|
30279
|
+
}, index))
|
30190
30280
|
});
|
30191
30281
|
};
|
30192
30282
|
|
@@ -30329,7 +30419,7 @@ const Branches = ({
|
|
30329
30419
|
modalId: `${machineInstanceId}-runCount-${runCount - 1}`,
|
30330
30420
|
onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
|
30331
30421
|
}, ffid())]
|
30332
|
-
}),
|
30422
|
+
}), readOnly && jsxRuntime.jsxs("div", {
|
30333
30423
|
className: classNames({
|
30334
30424
|
'ff-connecting-branch-datalist': evenRow,
|
30335
30425
|
'ff-connecting-branch-datalist-reverse': !evenRow
|
@@ -54361,7 +54451,7 @@ const getTreeDetails = (action, oldData, newData, index) => {
|
|
54361
54451
|
}
|
54362
54452
|
break;
|
54363
54453
|
case 'start':
|
54364
|
-
if (newData
|
54454
|
+
if (!checkEmpty(newData)) {
|
54365
54455
|
root = newData[0];
|
54366
54456
|
treeDataList = newData.slice(1);
|
54367
54457
|
} else {
|
@@ -54371,17 +54461,17 @@ const getTreeDetails = (action, oldData, newData, index) => {
|
|
54371
54461
|
default:
|
54372
54462
|
throw new Error(`Invalid action: ${action}`);
|
54373
54463
|
}
|
54374
|
-
if (treeDataList
|
54464
|
+
if (checkEmpty(treeDataList) && action !== 'start') {
|
54375
54465
|
throw new Error('Tree data list is empty.');
|
54376
54466
|
}
|
54377
54467
|
const firstNode = treeDataList[0] || root;
|
54378
54468
|
const lastNode = treeDataList[treeDataList.length - 1];
|
54379
54469
|
return {
|
54380
54470
|
treeDataList,
|
54381
|
-
next: !lastNode
|
54382
|
-
previous: !firstNode
|
54383
|
-
startId: firstNode
|
54384
|
-
endId: lastNode
|
54471
|
+
next: !lastNode?.lastResource,
|
54472
|
+
previous: !firstNode?.lastResource,
|
54473
|
+
startId: firstNode?.key,
|
54474
|
+
endId: lastNode?.key,
|
54385
54475
|
root
|
54386
54476
|
};
|
54387
54477
|
};
|