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/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
 
@@ -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
  });
@@ -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.jsx("tbody", {
8548
+ }), jsxRuntime.jsxs("tbody", {
8464
8549
  className: "ff-fixed-header-table",
8465
- children: data?.length > 0 && data?.map(row => jsxRuntime.jsx(SortableRow, {
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(Tooltip, {
30176
- placement: "bottom",
30177
- children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxRuntime.jsxs("div", {
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
- }, index))
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
- }), !readOnly && jsxRuntime.jsxs("div", {
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.length > 0) {
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.length === 0 && action !== 'start') {
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.lastResource,
54382
- previous: !firstNode.lastResource,
54383
- startId: firstNode.key,
54384
- endId: lastNode.key,
54471
+ next: !lastNode?.lastResource,
54472
+ previous: !firstNode?.lastResource,
54473
+ startId: firstNode?.key,
54474
+ endId: lastNode?.key,
54385
54475
  root
54386
54476
  };
54387
54477
  };