pixel-react 1.10.7 → 1.10.9
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.esm.js +13 -8
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +13 -8
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +0 -1
- package/src/components/MenuOption/MenuOption.tsx +3 -3
- package/src/components/Table/Table.scss +15 -15
- package/src/components/Table/Table.tsx +42 -42
- package/src/components/TableTree/TableTree.scss +16 -14
- package/src/utils/TableCell/TableCell.ts +3 -0
package/lib/index.esm.js
CHANGED
|
@@ -3419,7 +3419,7 @@ const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight) =>
|
|
|
3419
3419
|
left,
|
|
3420
3420
|
right: window.innerWidth - (left + width)
|
|
3421
3421
|
};
|
|
3422
|
-
const gap =
|
|
3422
|
+
const gap = 0;
|
|
3423
3423
|
switch (dropdownPlacement) {
|
|
3424
3424
|
case 'top':
|
|
3425
3425
|
return availableSpace.top > optionCardHeight + gap ? {
|
|
@@ -3523,12 +3523,12 @@ const MenuOption = ({
|
|
|
3523
3523
|
useEffect(() => {
|
|
3524
3524
|
if (targetRef) {
|
|
3525
3525
|
const parentDom = getAnchorElement(targetRef);
|
|
3526
|
-
parentDom?.classList.toggle('
|
|
3526
|
+
parentDom?.classList.toggle('hover', isClicked);
|
|
3527
3527
|
}
|
|
3528
3528
|
return () => {
|
|
3529
3529
|
if (targetRef) {
|
|
3530
3530
|
const parentDom = getAnchorElement(targetRef);
|
|
3531
|
-
parentDom?.classList.remove('
|
|
3531
|
+
parentDom?.classList.remove('hover');
|
|
3532
3532
|
}
|
|
3533
3533
|
};
|
|
3534
3534
|
}, [isClicked, targetRef]);
|
|
@@ -3598,7 +3598,7 @@ const MenuOption = ({
|
|
|
3598
3598
|
});
|
|
3599
3599
|
};
|
|
3600
3600
|
|
|
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 .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
|
|
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}";
|
|
3602
3602
|
styleInject(css_248z$_);
|
|
3603
3603
|
|
|
3604
3604
|
const isFunction$2 = functionToCheck => {
|
|
@@ -3674,10 +3674,14 @@ function formatMemoryValue(valueInBytes) {
|
|
|
3674
3674
|
const prepareData = (dataObj, columnObj) => {
|
|
3675
3675
|
let cellData = dataObj[columnObj.accessor];
|
|
3676
3676
|
if (columnObj.cell) {
|
|
3677
|
+
const refId = dataObj._id || dataObj.id;
|
|
3677
3678
|
return columnObj.cell({
|
|
3678
3679
|
value: cellData,
|
|
3679
3680
|
row: dataObj,
|
|
3680
|
-
column: columnObj.accessor
|
|
3681
|
+
column: columnObj.accessor,
|
|
3682
|
+
...(refId && {
|
|
3683
|
+
refId
|
|
3684
|
+
})
|
|
3681
3685
|
});
|
|
3682
3686
|
} else if (columnObj.accessor) {
|
|
3683
3687
|
return cellData;
|
|
@@ -8385,12 +8389,14 @@ const SortableRow = ({
|
|
|
8385
8389
|
transform: CSS.Transform.toString(transform),
|
|
8386
8390
|
transition
|
|
8387
8391
|
};
|
|
8392
|
+
const key = row._id || row.id;
|
|
8388
8393
|
return jsx("tr", {
|
|
8389
8394
|
ref: setNodeRef,
|
|
8390
8395
|
style: style,
|
|
8391
8396
|
className: classNames(tableBodyRowClass, {
|
|
8392
8397
|
'disabled-row': row.disabled
|
|
8393
8398
|
}),
|
|
8399
|
+
id: key,
|
|
8394
8400
|
children: columns.map((column, index) => {
|
|
8395
8401
|
return jsx("td", {
|
|
8396
8402
|
onClick: () => handleOnclick(column, row),
|
|
@@ -8421,7 +8427,7 @@ const SortableRow = ({
|
|
|
8421
8427
|
})
|
|
8422
8428
|
}, column.accessor + index);
|
|
8423
8429
|
})
|
|
8424
|
-
},
|
|
8430
|
+
}, key);
|
|
8425
8431
|
};
|
|
8426
8432
|
const Table$1 = ({
|
|
8427
8433
|
data = [],
|
|
@@ -8617,7 +8623,6 @@ const ArrowsButton = ({
|
|
|
8617
8623
|
iconButtonSize: 24,
|
|
8618
8624
|
iconButtonBorderRadius: 3,
|
|
8619
8625
|
onOptionClick: () => {},
|
|
8620
|
-
targetRef: menuOptionRef,
|
|
8621
8626
|
treeRowRef: treeRowRef
|
|
8622
8627
|
})
|
|
8623
8628
|
})
|
|
@@ -14553,7 +14558,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
|
|
|
14553
14558
|
}), document.body);
|
|
14554
14559
|
});
|
|
14555
14560
|
|
|
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(--
|
|
14561
|
+
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:hover,\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.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.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 {\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::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}";
|
|
14557
14562
|
styleInject(css_248z$R);
|
|
14558
14563
|
|
|
14559
14564
|
const TableHead = /*#__PURE__*/React__default.memo(({
|