pixel-react 1.10.8 → 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 +10 -5
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +10 -5
- 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 +1 -1
- package/src/components/Table/Table.tsx +3 -1
- package/src/components/TableTree/TableTree.scss +15 -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 ? {
|
|
@@ -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(({
|