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.
@@ -1,5 +1,5 @@
1
1
  import { DropdownPosition, Option } from '../types';
2
- import { RefObject } from 'react';
2
+ import { ReactNode, RefObject } from 'react';
3
3
  export interface DropdownProps {
4
4
  options: Option[];
5
5
  dropdownPosition: DropdownPosition;
@@ -14,6 +14,11 @@ export interface DropdownProps {
14
14
  selectedOption?: Option;
15
15
  showIcon?: boolean;
16
16
  showToolTip?: boolean;
17
+ customReccurenece?: boolean;
18
+ onCancelModal?: () => void;
19
+ onSaveModal?: () => void;
20
+ modalJSXProps?: ReactNode;
21
+ recurrence?: boolean;
17
22
  }
18
23
  export declare const dropdownDefaultCSSData: {
19
24
  margin: number;
@@ -1,3 +1,4 @@
1
+ import { ReactNode } from 'react';
1
2
  export interface SelectProps {
2
3
  label?: string;
3
4
  showLabel?: boolean;
@@ -36,6 +37,22 @@ export interface SelectProps {
36
37
  * Provide the background color for the select label on the hover state
37
38
  */
38
39
  labelBackgroundColor?: string;
40
+ /**
41
+ * To close the modal in the select dropdown
42
+ */
43
+ onCancelModal?: () => void;
44
+ /**
45
+ * To close the modal in the select dropdown
46
+ */
47
+ onSaveModal?: () => void;
48
+ /**
49
+ * Pass the custom Jsx for the Modal
50
+ */
51
+ modalJSXProps?: ReactNode;
52
+ /**
53
+ * Pass the recurrence boolean for the exeception cases
54
+ */
55
+ recurrence?: boolean;
39
56
  }
40
57
  export interface DropdownPosition {
41
58
  positionX: number;
@@ -1,4 +1,4 @@
1
1
  import './Table.scss';
2
2
  import { TableProps } from './Types';
3
- declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, }: TableProps) => import("react/jsx-runtime").JSX.Element;
3
+ declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, loadMore, }: TableProps) => import("react/jsx-runtime").JSX.Element;
4
4
  export default Table;
@@ -127,4 +127,5 @@ export interface TableProps {
127
127
  * Drag and Drop indexes
128
128
  */
129
129
  onDragEnd?: (startIndex: number, endIndex: number) => void | undefined;
130
+ loadMore?: (_direction?: string) => void;
130
131
  }
package/lib/index.d.ts CHANGED
@@ -812,6 +812,22 @@ interface SelectProps$1 {
812
812
  * Provide the background color for the select label on the hover state
813
813
  */
814
814
  labelBackgroundColor?: string;
815
+ /**
816
+ * To close the modal in the select dropdown
817
+ */
818
+ onCancelModal?: () => void;
819
+ /**
820
+ * To close the modal in the select dropdown
821
+ */
822
+ onSaveModal?: () => void;
823
+ /**
824
+ * Pass the custom Jsx for the Modal
825
+ */
826
+ modalJSXProps?: ReactNode;
827
+ /**
828
+ * Pass the recurrence boolean for the exeception cases
829
+ */
830
+ recurrence?: boolean;
815
831
  }
816
832
  type OptionValue = any;
817
833
  interface Option$2 {
@@ -1167,9 +1183,10 @@ interface TableProps$1 {
1167
1183
  * Drag and Drop indexes
1168
1184
  */
1169
1185
  onDragEnd?: (startIndex: number, endIndex: number) => void | undefined;
1186
+ loadMore?: (_direction?: string) => void;
1170
1187
  }
1171
1188
 
1172
- declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, }: TableProps$1) => react_jsx_runtime.JSX.Element;
1189
+ declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, loadMore, }: TableProps$1) => react_jsx_runtime.JSX.Element;
1173
1190
 
1174
1191
  /**
1175
1192
  * Props for the Add Resource Button component.
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, onSelectBlur, [inputRef, selectArrowRef]);
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
- return jsx("div", {
2911
- className: classNames('ff-select-dropdown-wrapper', currentTheme),
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
 
@@ -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
- onSelectBlur();
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
  });
@@ -8356,8 +8411,37 @@ const Table$1 = ({
8356
8411
  headerIconName = '',
8357
8412
  headerIconOnClick = () => {},
8358
8413
  draggable = false,
8359
- onDragEnd
8414
+ onDragEnd,
8415
+ loadMore = () => {}
8360
8416
  }) => {
8417
+ const observerRef = useRef(null);
8418
+ useEffect(() => {
8419
+ const scrollContainer = document.getElementById('ff-table-scroll-container');
8420
+ const firstNode = document.getElementById('ff-table-first-node');
8421
+ const lastNode = document.getElementById('ff-table-last-node');
8422
+ // Exit early if data is empty or elements are missing
8423
+ if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
8424
+ return;
8425
+ }
8426
+ observerRef.current = new IntersectionObserver(entries => {
8427
+ entries.forEach(entry => {
8428
+ if (entry.isIntersecting) {
8429
+ const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
8430
+ loadMore(direction);
8431
+ }
8432
+ });
8433
+ }, {
8434
+ root: scrollContainer,
8435
+ rootMargin: '8px',
8436
+ threshold: 0.1
8437
+ });
8438
+ observerRef.current.observe(firstNode);
8439
+ observerRef.current.observe(lastNode);
8440
+ return () => {
8441
+ // Cleanup observer
8442
+ observerRef.current?.disconnect();
8443
+ };
8444
+ }, [data, loadMore]);
8361
8445
  const handleOnclick = (column, row) => {
8362
8446
  let {
8363
8447
  onClick,
@@ -8395,6 +8479,7 @@ const Table$1 = ({
8395
8479
  height: height,
8396
8480
  position: 'relative'
8397
8481
  },
8482
+ id: "ff-table-scroll-container",
8398
8483
  className: classNames(className, {
8399
8484
  'ff-fixed-header-table': withFixedHeader,
8400
8485
  'border-borderRadius': borderWithRadius
@@ -8440,9 +8525,11 @@ const Table$1 = ({
8440
8525
  })
8441
8526
  }, column.header))
8442
8527
  })
8443
- }), jsx("tbody", {
8528
+ }), jsxs("tbody", {
8444
8529
  className: "ff-fixed-header-table",
8445
- children: data?.length > 0 && data?.map(row => jsx(SortableRow, {
8530
+ children: [jsx("tr", {
8531
+ id: "ff-table-first-node"
8532
+ }), data?.length > 0 && data?.map(row => jsx(SortableRow, {
8446
8533
  row: row,
8447
8534
  columns: columns,
8448
8535
  tableBodyRowClass: tableBodyRowClass,
@@ -8451,7 +8538,9 @@ const Table$1 = ({
8451
8538
  withCheckbox: withCheckbox,
8452
8539
  onSelectClick: onSelectClick,
8453
8540
  draggable: draggable
8454
- }, row?.id))
8541
+ }, row?.id)), jsx("tr", {
8542
+ id: "ff-table-last-node"
8543
+ })]
8455
8544
  })]
8456
8545
  }), data?.length <= 0 && jsx("div", {
8457
8546
  className: "no-data-content",
@@ -30152,9 +30241,10 @@ const DataSetTooltip = ({
30152
30241
  'Project Environment Set': peVariableSetName
30153
30242
  };
30154
30243
  return jsx(Fragment, {
30155
- children: jsx(Tooltip, {
30156
- placement: "bottom",
30157
- children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxs("div", {
30244
+ children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsx("div", {
30245
+ className: '',
30246
+ children: jsxs("div", {
30247
+ className: '',
30158
30248
  children: [jsx(Typography, {
30159
30249
  as: "div",
30160
30250
  fontSize: 10,
@@ -30165,8 +30255,8 @@ const DataSetTooltip = ({
30165
30255
  lineHeight: "18px",
30166
30256
  children: value
30167
30257
  })]
30168
- }, index))
30169
- })
30258
+ })
30259
+ }, index))
30170
30260
  });
30171
30261
  };
30172
30262
 
@@ -30309,7 +30399,7 @@ const Branches = ({
30309
30399
  modalId: `${machineInstanceId}-runCount-${runCount - 1}`,
30310
30400
  onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
30311
30401
  }, ffid())]
30312
- }), !readOnly && jsxs("div", {
30402
+ }), readOnly && jsxs("div", {
30313
30403
  className: classNames({
30314
30404
  'ff-connecting-branch-datalist': evenRow,
30315
30405
  'ff-connecting-branch-datalist-reverse': !evenRow
@@ -54341,7 +54431,7 @@ const getTreeDetails = (action, oldData, newData, index) => {
54341
54431
  }
54342
54432
  break;
54343
54433
  case 'start':
54344
- if (newData.length > 0) {
54434
+ if (!checkEmpty(newData)) {
54345
54435
  root = newData[0];
54346
54436
  treeDataList = newData.slice(1);
54347
54437
  } else {
@@ -54351,17 +54441,17 @@ const getTreeDetails = (action, oldData, newData, index) => {
54351
54441
  default:
54352
54442
  throw new Error(`Invalid action: ${action}`);
54353
54443
  }
54354
- if (treeDataList.length === 0 && action !== 'start') {
54444
+ if (checkEmpty(treeDataList) && action !== 'start') {
54355
54445
  throw new Error('Tree data list is empty.');
54356
54446
  }
54357
54447
  const firstNode = treeDataList[0] || root;
54358
54448
  const lastNode = treeDataList[treeDataList.length - 1];
54359
54449
  return {
54360
54450
  treeDataList,
54361
- next: !lastNode.lastResource,
54362
- previous: !firstNode.lastResource,
54363
- startId: firstNode.key,
54364
- endId: lastNode.key,
54451
+ next: !lastNode?.lastResource,
54452
+ previous: !firstNode?.lastResource,
54453
+ startId: firstNode?.key,
54454
+ endId: lastNode?.key,
54365
54455
  root
54366
54456
  };
54367
54457
  };