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.js
CHANGED
|
@@ -3439,7 +3439,7 @@ const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight) =>
|
|
|
3439
3439
|
left,
|
|
3440
3440
|
right: window.innerWidth - (left + width)
|
|
3441
3441
|
};
|
|
3442
|
-
const gap =
|
|
3442
|
+
const gap = 0;
|
|
3443
3443
|
switch (dropdownPlacement) {
|
|
3444
3444
|
case 'top':
|
|
3445
3445
|
return availableSpace.top > optionCardHeight + gap ? {
|
|
@@ -3543,12 +3543,12 @@ const MenuOption = ({
|
|
|
3543
3543
|
React.useEffect(() => {
|
|
3544
3544
|
if (targetRef) {
|
|
3545
3545
|
const parentDom = getAnchorElement(targetRef);
|
|
3546
|
-
parentDom?.classList.toggle('
|
|
3546
|
+
parentDom?.classList.toggle('hover', isClicked);
|
|
3547
3547
|
}
|
|
3548
3548
|
return () => {
|
|
3549
3549
|
if (targetRef) {
|
|
3550
3550
|
const parentDom = getAnchorElement(targetRef);
|
|
3551
|
-
parentDom?.classList.remove('
|
|
3551
|
+
parentDom?.classList.remove('hover');
|
|
3552
3552
|
}
|
|
3553
3553
|
};
|
|
3554
3554
|
}, [isClicked, targetRef]);
|
|
@@ -3618,7 +3618,7 @@ const MenuOption = ({
|
|
|
3618
3618
|
});
|
|
3619
3619
|
};
|
|
3620
3620
|
|
|
3621
|
-
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
|
|
3621
|
+
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}";
|
|
3622
3622
|
styleInject(css_248z$_);
|
|
3623
3623
|
|
|
3624
3624
|
const isFunction$2 = functionToCheck => {
|
|
@@ -3694,10 +3694,14 @@ function formatMemoryValue(valueInBytes) {
|
|
|
3694
3694
|
const prepareData = (dataObj, columnObj) => {
|
|
3695
3695
|
let cellData = dataObj[columnObj.accessor];
|
|
3696
3696
|
if (columnObj.cell) {
|
|
3697
|
+
const refId = dataObj._id || dataObj.id;
|
|
3697
3698
|
return columnObj.cell({
|
|
3698
3699
|
value: cellData,
|
|
3699
3700
|
row: dataObj,
|
|
3700
|
-
column: columnObj.accessor
|
|
3701
|
+
column: columnObj.accessor,
|
|
3702
|
+
...(refId && {
|
|
3703
|
+
refId
|
|
3704
|
+
})
|
|
3701
3705
|
});
|
|
3702
3706
|
} else if (columnObj.accessor) {
|
|
3703
3707
|
return cellData;
|
|
@@ -8405,12 +8409,14 @@ const SortableRow = ({
|
|
|
8405
8409
|
transform: CSS.Transform.toString(transform),
|
|
8406
8410
|
transition
|
|
8407
8411
|
};
|
|
8412
|
+
const key = row._id || row.id;
|
|
8408
8413
|
return jsxRuntime.jsx("tr", {
|
|
8409
8414
|
ref: setNodeRef,
|
|
8410
8415
|
style: style,
|
|
8411
8416
|
className: classNames(tableBodyRowClass, {
|
|
8412
8417
|
'disabled-row': row.disabled
|
|
8413
8418
|
}),
|
|
8419
|
+
id: key,
|
|
8414
8420
|
children: columns.map((column, index) => {
|
|
8415
8421
|
return jsxRuntime.jsx("td", {
|
|
8416
8422
|
onClick: () => handleOnclick(column, row),
|
|
@@ -8441,7 +8447,7 @@ const SortableRow = ({
|
|
|
8441
8447
|
})
|
|
8442
8448
|
}, column.accessor + index);
|
|
8443
8449
|
})
|
|
8444
|
-
},
|
|
8450
|
+
}, key);
|
|
8445
8451
|
};
|
|
8446
8452
|
const Table$1 = ({
|
|
8447
8453
|
data = [],
|
|
@@ -8637,7 +8643,6 @@ const ArrowsButton = ({
|
|
|
8637
8643
|
iconButtonSize: 24,
|
|
8638
8644
|
iconButtonBorderRadius: 3,
|
|
8639
8645
|
onOptionClick: () => {},
|
|
8640
|
-
targetRef: menuOptionRef,
|
|
8641
8646
|
treeRowRef: treeRowRef
|
|
8642
8647
|
})
|
|
8643
8648
|
})
|
|
@@ -14573,7 +14578,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
|
|
|
14573
14578
|
}), document.body);
|
|
14574
14579
|
});
|
|
14575
14580
|
|
|
14576
|
-
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(--
|
|
14581
|
+
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}";
|
|
14577
14582
|
styleInject(css_248z$R);
|
|
14578
14583
|
|
|
14579
14584
|
const TableHead = /*#__PURE__*/React.memo(({
|