pixel-react 1.10.6 → 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/index.js CHANGED
@@ -2999,7 +2999,7 @@ const portalPosition = {
2999
2999
  width: 0,
3000
3000
  fromBottom: 0
3001
3001
  };
3002
- const calculatePosition = portalRef => {
3002
+ const calculatePosition$1 = portalRef => {
3003
3003
  if (!portalRef?.current) {
3004
3004
  return portalPosition;
3005
3005
  }
@@ -3015,7 +3015,7 @@ const calculatePosition = portalRef => {
3015
3015
  const usePortalPosition = (portalRef, isPortalOpen) => {
3016
3016
  React.useEffect(() => {
3017
3017
  const handleUpdate = () => {
3018
- calculatePosition(portalRef);
3018
+ calculatePosition$1(portalRef);
3019
3019
  };
3020
3020
  if (isPortalOpen) {
3021
3021
  window.addEventListener('resize', handleUpdate);
@@ -3026,7 +3026,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
3026
3026
  window.removeEventListener('scroll', handleUpdate);
3027
3027
  };
3028
3028
  }, [isPortalOpen]);
3029
- return calculatePosition;
3029
+ return calculatePosition$1;
3030
3030
  };
3031
3031
 
3032
3032
  const Select$1 = ({
@@ -3395,9 +3395,17 @@ const StatusButton = ({
3395
3395
  });
3396
3396
  };
3397
3397
 
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}";
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}";
3399
3399
  styleInject(css_248z$$);
3400
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
+
3401
3409
  const Option$1 = ({
3402
3410
  option,
3403
3411
  onClick
@@ -3418,6 +3426,60 @@ const Option$1 = ({
3418
3426
  children: option.label
3419
3427
  })]
3420
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
+ };
3421
3483
  const OptionCard = ({
3422
3484
  options,
3423
3485
  onClick,
@@ -3430,50 +3492,14 @@ const OptionCard = ({
3430
3492
  }) => {
3431
3493
  const themeContext = React.useContext(ThemeContext);
3432
3494
  const currentTheme = themeContext?.currentTheme;
3433
- const [optionsHeight, setOptionsHeight] = React.useState(0);
3434
- const [optionsWidth, setOptionsWidth] = React.useState(0);
3435
3495
  const optionCardRef = React.useRef(null);
3436
- React.useEffect(() => {
3437
- if (optionCardRef?.current) {
3438
- const rect = optionCardRef?.current?.getBoundingClientRect();
3439
- setOptionsHeight(rect?.height);
3440
- setOptionsWidth(rect?.width);
3441
- }
3442
- }, []);
3443
3496
  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
3444
- const style = (() => {
3445
- switch (dropdownPlacement) {
3446
- case 'top':
3447
- return {
3448
- top: menuPosition.top - optionsHeight - 7,
3449
- left: menuPosition.left - 4
3450
- };
3451
- case 'down':
3452
- return {
3453
- top: menuPosition.top + 20,
3454
- left: menuPosition.left - 4
3455
- };
3456
- case 'left':
3457
- return {
3458
- top: menuPosition.top - 4,
3459
- left: menuPosition.left - optionsWidth - 8
3460
- };
3461
- case 'right':
3462
- return {
3463
- top: menuPosition.top - 4,
3464
- left: menuPosition.left + 20
3465
- };
3466
- default:
3467
- return {
3468
- top: menuPosition.bottom,
3469
- left: menuPosition.rightSpaceAvailable + 12
3470
- };
3471
- }
3472
- })();
3497
+ const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
3498
+ const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight);
3473
3499
  return /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx("div", {
3474
- className: classNames('ff-option-card', [{
3500
+ className: classNames('ff-option-card', {
3475
3501
  'ff-option-card--primary': variant === 'primary'
3476
- }], currentTheme),
3502
+ }, currentTheme),
3477
3503
  style: {
3478
3504
  ...style,
3479
3505
  zIndex
@@ -3500,43 +3526,51 @@ const MenuOption = ({
3500
3526
  zIndex = 99,
3501
3527
  dropdownPlacement = 'down',
3502
3528
  optionCardVariant,
3503
- targetRef,
3529
+ targetRef = null,
3504
3530
  treeRowRef
3505
3531
  }) => {
3506
3532
  const [isClicked, setIsClicked] = React.useState(false);
3507
3533
  const menuRef = React.useRef(null);
3534
+ const menuIconRef = React.useRef(null);
3508
3535
  const [menuPosition, setMenuPosition] = React.useState({
3509
3536
  top: 0,
3510
3537
  left: 0,
3511
3538
  height: 0,
3512
- right: 0
3539
+ right: 0,
3540
+ width: 0
3513
3541
  });
3514
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]);
3515
3555
  const onIconClickHandler = () => {
3516
3556
  onClick();
3517
3557
  calculateDims();
3518
3558
  setIsClicked(prev => !prev);
3519
3559
  };
3520
3560
  const handleOptionClick = option => {
3521
- const actionContainer = treeRowRef?.current?.children[0]?.children[2];
3522
- actionContainer.classList.remove('table-row-add-button');
3561
+ treeRowRef?.current?.children[0]?.children[2]?.classList.remove('table-row-add-button');
3523
3562
  onOptionClick(option);
3524
3563
  closeDropDown();
3525
3564
  };
3526
3565
  const calculateDims = () => {
3527
- let targetElement = null;
3528
- if (typeof targetRef === 'string') {
3529
- targetElement = document.getElementById(targetRef);
3530
- } else if (targetRef && targetRef.current) {
3531
- targetElement = targetRef.current;
3532
- }
3533
- if (targetElement) {
3534
- const rect = targetElement.getBoundingClientRect();
3566
+ if (menuIconRef.current) {
3567
+ const rect = menuIconRef.current.getBoundingClientRect();
3535
3568
  setMenuPosition({
3536
3569
  top: rect.top + window.scrollY,
3537
3570
  left: rect.left + window.scrollX,
3538
3571
  height: rect.height,
3539
- right: rect.right
3572
+ right: rect.right,
3573
+ width: rect.width
3540
3574
  });
3541
3575
  }
3542
3576
  };
@@ -3553,13 +3587,12 @@ const MenuOption = ({
3553
3587
  'ff-menuicon-container-clicked': isClicked,
3554
3588
  dark: variant === 'dark'
3555
3589
  }),
3590
+ ref: menuIconRef,
3556
3591
  onClick: onIconClickHandler,
3557
3592
  style: {
3558
3593
  width: `${iconButtonSize}px`,
3559
3594
  height: `${iconButtonSize}px`,
3560
- borderRadius: `${iconButtonBorderRadius}px`,
3561
- display: 'flex',
3562
- flexDirection: 'column'
3595
+ borderRadius: `${iconButtonBorderRadius}px`
3563
3596
  },
3564
3597
  children: jsxRuntime.jsx(Icon, {
3565
3598
  height: iconSize,
@@ -14780,7 +14813,6 @@ const TableBody = ({
14780
14813
  onRowClick: onRowClick,
14781
14814
  onToggleExpand: node => onToggleExpand(node, index),
14782
14815
  onCheckBoxChange: onCheckBoxChange,
14783
- index: index,
14784
14816
  onAddConfirm: onAddConfirm,
14785
14817
  onAddCancel: onAddCancel
14786
14818
  }, node.key)), jsxRuntime.jsx("tr", {
@@ -54432,9 +54464,22 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
54432
54464
  return updatedData;
54433
54465
  };
54434
54466
 
54435
- const getTreeDetails = (action, oldData, newData, index) => {
54467
+ const getTreeDetails = (action, oldData, newData, index, sourceId) => {
54436
54468
  let treeDataList;
54437
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
+ };
54438
54483
  switch (action) {
54439
54484
  case 'above':
54440
54485
  treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -54444,11 +54489,25 @@ const getTreeDetails = (action, oldData, newData, index) => {
54444
54489
  break;
54445
54490
  case 'expand':
54446
54491
  case 'collapse':
54447
- if (typeof index === 'number') {
54448
- treeDataList = [...oldData.slice(0, index), ...newData];
54449
- } else {
54450
- 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.");
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.");
54451
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)];
54452
54511
  break;
54453
54512
  case 'start':
54454
54513
  if (!checkEmpty(newData)) {
@@ -54465,7 +54524,10 @@ const getTreeDetails = (action, oldData, newData, index) => {
54465
54524
  throw new Error('Tree data list is empty.');
54466
54525
  }
54467
54526
  const firstNode = treeDataList[0] || root;
54468
- const lastNode = treeDataList[treeDataList.length - 1];
54527
+ const lastNode = treeDataList[treeDataList.length - 1] || {
54528
+ lastResource: true,
54529
+ key: ''
54530
+ };
54469
54531
  return {
54470
54532
  treeDataList,
54471
54533
  next: !lastNode?.lastResource,