pixel-react 1.10.6 → 1.10.8

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.
@@ -173,7 +173,7 @@ interface MenuOptionProps {
173
173
  * @optional
174
174
  */
175
175
  optionCardVariant?: 'primary';
176
- targetRef?: string | React.RefObject<HTMLElement>;
176
+ targetRef?: string | React.RefObject<HTMLElement> | null;
177
177
  treeRowRef?: React.RefObject<any | null>;
178
178
  }
179
179
  interface OptionProps {
package/lib/index.d.ts CHANGED
@@ -1072,7 +1072,7 @@ interface MenuOptionProps {
1072
1072
  * @optional
1073
1073
  */
1074
1074
  optionCardVariant?: 'primary';
1075
- targetRef?: string | React.RefObject<HTMLElement>;
1075
+ targetRef?: string | React.RefObject<HTMLElement> | null;
1076
1076
  treeRowRef?: React.RefObject<any | null>;
1077
1077
  }
1078
1078
 
@@ -3484,7 +3484,7 @@ interface TreeDetailsResult {
3484
3484
  endId: string;
3485
3485
  root?: TreeNodeProps;
3486
3486
  }
3487
- declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start", oldData: TreeNodeProps[], newData: TreeNodeProps[], index?: number) => TreeDetailsResult;
3487
+ declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start" | "addAbove" | "addBelow", oldData: TreeNodeProps[], newData: TreeNodeProps[], index?: number, sourceId?: string) => TreeDetailsResult;
3488
3488
 
3489
3489
  declare const handleTreeNodeSect: (data: TreeNodeProps[], key: string | undefined, isChecked: boolean | "partial") => TreeNodeProps[];
3490
3490
 
package/lib/index.esm.js CHANGED
@@ -2979,7 +2979,7 @@ const portalPosition = {
2979
2979
  width: 0,
2980
2980
  fromBottom: 0
2981
2981
  };
2982
- const calculatePosition = portalRef => {
2982
+ const calculatePosition$1 = portalRef => {
2983
2983
  if (!portalRef?.current) {
2984
2984
  return portalPosition;
2985
2985
  }
@@ -2995,7 +2995,7 @@ const calculatePosition = portalRef => {
2995
2995
  const usePortalPosition = (portalRef, isPortalOpen) => {
2996
2996
  useEffect(() => {
2997
2997
  const handleUpdate = () => {
2998
- calculatePosition(portalRef);
2998
+ calculatePosition$1(portalRef);
2999
2999
  };
3000
3000
  if (isPortalOpen) {
3001
3001
  window.addEventListener('resize', handleUpdate);
@@ -3006,7 +3006,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
3006
3006
  window.removeEventListener('scroll', handleUpdate);
3007
3007
  };
3008
3008
  }, [isPortalOpen]);
3009
- return calculatePosition;
3009
+ return calculatePosition$1;
3010
3010
  };
3011
3011
 
3012
3012
  const Select$1 = ({
@@ -3375,9 +3375,17 @@ const StatusButton = ({
3375
3375
  });
3376
3376
  };
3377
3377
 
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}";
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}";
3379
3379
  styleInject(css_248z$$);
3380
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
+
3381
3389
  const Option$1 = ({
3382
3390
  option,
3383
3391
  onClick
@@ -3398,6 +3406,60 @@ const Option$1 = ({
3398
3406
  children: option.label
3399
3407
  })]
3400
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
+ };
3401
3463
  const OptionCard = ({
3402
3464
  options,
3403
3465
  onClick,
@@ -3410,50 +3472,14 @@ const OptionCard = ({
3410
3472
  }) => {
3411
3473
  const themeContext = useContext(ThemeContext);
3412
3474
  const currentTheme = themeContext?.currentTheme;
3413
- const [optionsHeight, setOptionsHeight] = useState(0);
3414
- const [optionsWidth, setOptionsWidth] = useState(0);
3415
3475
  const optionCardRef = useRef(null);
3416
- useEffect(() => {
3417
- if (optionCardRef?.current) {
3418
- const rect = optionCardRef?.current?.getBoundingClientRect();
3419
- setOptionsHeight(rect?.height);
3420
- setOptionsWidth(rect?.width);
3421
- }
3422
- }, []);
3423
3476
  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
3424
- const style = (() => {
3425
- switch (dropdownPlacement) {
3426
- case 'top':
3427
- return {
3428
- top: menuPosition.top - optionsHeight - 7,
3429
- left: menuPosition.left - 4
3430
- };
3431
- case 'down':
3432
- return {
3433
- top: menuPosition.top + 20,
3434
- left: menuPosition.left - 4
3435
- };
3436
- case 'left':
3437
- return {
3438
- top: menuPosition.top - 4,
3439
- left: menuPosition.left - optionsWidth - 8
3440
- };
3441
- case 'right':
3442
- return {
3443
- top: menuPosition.top - 4,
3444
- left: menuPosition.left + 20
3445
- };
3446
- default:
3447
- return {
3448
- top: menuPosition.bottom,
3449
- left: menuPosition.rightSpaceAvailable + 12
3450
- };
3451
- }
3452
- })();
3477
+ const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
3478
+ const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight);
3453
3479
  return /*#__PURE__*/createPortal(jsx("div", {
3454
- className: classNames('ff-option-card', [{
3480
+ className: classNames('ff-option-card', {
3455
3481
  'ff-option-card--primary': variant === 'primary'
3456
- }], currentTheme),
3482
+ }, currentTheme),
3457
3483
  style: {
3458
3484
  ...style,
3459
3485
  zIndex
@@ -3480,43 +3506,51 @@ const MenuOption = ({
3480
3506
  zIndex = 99,
3481
3507
  dropdownPlacement = 'down',
3482
3508
  optionCardVariant,
3483
- targetRef,
3509
+ targetRef = null,
3484
3510
  treeRowRef
3485
3511
  }) => {
3486
3512
  const [isClicked, setIsClicked] = useState(false);
3487
3513
  const menuRef = useRef(null);
3514
+ const menuIconRef = useRef(null);
3488
3515
  const [menuPosition, setMenuPosition] = useState({
3489
3516
  top: 0,
3490
3517
  left: 0,
3491
3518
  height: 0,
3492
- right: 0
3519
+ right: 0,
3520
+ width: 0
3493
3521
  });
3494
3522
  const closeDropDown = () => setIsClicked(false);
3523
+ useEffect(() => {
3524
+ if (targetRef) {
3525
+ const parentDom = getAnchorElement(targetRef);
3526
+ parentDom?.classList.toggle('hover', isClicked);
3527
+ }
3528
+ return () => {
3529
+ if (targetRef) {
3530
+ const parentDom = getAnchorElement(targetRef);
3531
+ parentDom?.classList.remove('hover');
3532
+ }
3533
+ };
3534
+ }, [isClicked, targetRef]);
3495
3535
  const onIconClickHandler = () => {
3496
3536
  onClick();
3497
3537
  calculateDims();
3498
3538
  setIsClicked(prev => !prev);
3499
3539
  };
3500
3540
  const handleOptionClick = option => {
3501
- const actionContainer = treeRowRef?.current?.children[0]?.children[2];
3502
- actionContainer.classList.remove('table-row-add-button');
3541
+ treeRowRef?.current?.children[0]?.children[2]?.classList.remove('table-row-add-button');
3503
3542
  onOptionClick(option);
3504
3543
  closeDropDown();
3505
3544
  };
3506
3545
  const calculateDims = () => {
3507
- let targetElement = null;
3508
- if (typeof targetRef === 'string') {
3509
- targetElement = document.getElementById(targetRef);
3510
- } else if (targetRef && targetRef.current) {
3511
- targetElement = targetRef.current;
3512
- }
3513
- if (targetElement) {
3514
- const rect = targetElement.getBoundingClientRect();
3546
+ if (menuIconRef.current) {
3547
+ const rect = menuIconRef.current.getBoundingClientRect();
3515
3548
  setMenuPosition({
3516
3549
  top: rect.top + window.scrollY,
3517
3550
  left: rect.left + window.scrollX,
3518
3551
  height: rect.height,
3519
- right: rect.right
3552
+ right: rect.right,
3553
+ width: rect.width
3520
3554
  });
3521
3555
  }
3522
3556
  };
@@ -3533,13 +3567,12 @@ const MenuOption = ({
3533
3567
  'ff-menuicon-container-clicked': isClicked,
3534
3568
  dark: variant === 'dark'
3535
3569
  }),
3570
+ ref: menuIconRef,
3536
3571
  onClick: onIconClickHandler,
3537
3572
  style: {
3538
3573
  width: `${iconButtonSize}px`,
3539
3574
  height: `${iconButtonSize}px`,
3540
- borderRadius: `${iconButtonBorderRadius}px`,
3541
- display: 'flex',
3542
- flexDirection: 'column'
3575
+ borderRadius: `${iconButtonBorderRadius}px`
3543
3576
  },
3544
3577
  children: jsx(Icon, {
3545
3578
  height: iconSize,
@@ -3565,7 +3598,7 @@ const MenuOption = ({
3565
3598
  });
3566
3599
  };
3567
3600
 
3568
- var css_248z$_ = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 8px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag-icon {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n cursor: grab;\n}\n.ff-table tbody tr:hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr:hover .ff-table-drag,\n.ff-table tbody tr:hover .ff-table-drag-icon {\n opacity: 1;\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3601
+ var css_248z$_ = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr:hover,\n.ff-table tbody tr.hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container,\n.ff-table tbody tr.hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr:hover .ff-table-drag,\n.ff-table tbody tr:hover .ff-table-drag-icon,\n.ff-table tbody tr.hover .ff-table-drag,\n.ff-table tbody tr.hover .ff-table-drag-icon {\n opacity: 1;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 8px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag-icon {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n cursor: grab;\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3569
3602
  styleInject(css_248z$_);
3570
3603
 
3571
3604
  const isFunction$2 = functionToCheck => {
@@ -14520,7 +14553,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
14520
14553
  }), document.body);
14521
14554
  });
14522
14555
 
14523
- var css_248z$R = ":root {\n --table-height: auto;\n}\n\n.tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 22px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n}\n.tree-table .ff-table-tree-row:hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 400px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
14556
+ var css_248z$R = ":root {\n --table-height: auto;\n}\n\n.tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 22px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n align-items: center;\n}\n.tree-table .ff-table-tree-row:hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 400px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
14524
14557
  styleInject(css_248z$R);
14525
14558
 
14526
14559
  const TableHead = /*#__PURE__*/React__default.memo(({
@@ -14760,7 +14793,6 @@ const TableBody = ({
14760
14793
  onRowClick: onRowClick,
14761
14794
  onToggleExpand: node => onToggleExpand(node, index),
14762
14795
  onCheckBoxChange: onCheckBoxChange,
14763
- index: index,
14764
14796
  onAddConfirm: onAddConfirm,
14765
14797
  onAddCancel: onAddCancel
14766
14798
  }, node.key)), jsx("tr", {
@@ -54412,9 +54444,22 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
54412
54444
  return updatedData;
54413
54445
  };
54414
54446
 
54415
- const getTreeDetails = (action, oldData, newData, index) => {
54447
+ const getTreeDetails = (action, oldData, newData, index, sourceId) => {
54416
54448
  let treeDataList;
54417
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
+ };
54418
54463
  switch (action) {
54419
54464
  case 'above':
54420
54465
  treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -54424,11 +54469,25 @@ const getTreeDetails = (action, oldData, newData, index) => {
54424
54469
  break;
54425
54470
  case 'expand':
54426
54471
  case 'collapse':
54427
- if (typeof index === 'number') {
54428
- treeDataList = [...oldData.slice(0, index), ...newData];
54429
- } else {
54430
- 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.");
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.");
54431
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)];
54432
54491
  break;
54433
54492
  case 'start':
54434
54493
  if (!checkEmpty(newData)) {
@@ -54445,7 +54504,10 @@ const getTreeDetails = (action, oldData, newData, index) => {
54445
54504
  throw new Error('Tree data list is empty.');
54446
54505
  }
54447
54506
  const firstNode = treeDataList[0] || root;
54448
- const lastNode = treeDataList[treeDataList.length - 1];
54507
+ const lastNode = treeDataList[treeDataList.length - 1] || {
54508
+ lastResource: true,
54509
+ key: ''
54510
+ };
54449
54511
  return {
54450
54512
  treeDataList,
54451
54513
  next: !lastNode?.lastResource,