@uxf/data-grid 11.106.0 → 11.107.0

package/hidden-columns/hidden-columns-sortable.js

@@ -49,7 +49,6 @@ const text_link_1 = require("@uxf/ui/text-link");
 const react_1 = __importStar(require("react"));
 const column_item_1 = require("./column-item");
 const drop_placeholder_1 = require("./drop-placeholder");
-const types_1 = require("./types");
 function DataGridHiddenColumnsSortable(props) {
     const t = (0, translations_1.useUxfTranslation)();
     const columnsWithId = (0, react_1.useMemo)(() => props.schema.columns.filter((c) => !c.hidden).map((c) => ({ ...c, id: c.name })), [props.schema.columns]);
@@ -160,11 +159,11 @@ function DataGridHiddenColumnsSortable(props) {
                 react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-empty-box" },
                     react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation-solid", size: 20 }),
                     t("uxf-data-grid-hidden-columns:empty-message"))),
-            react_1.default.createElement(sortable_1.SortableContext, { items: getSectionItemsIds("visible"), strategy: sortable_1.verticalListSortingStrategy }, (0, is_empty_1.isEmpty)(sections.visible) ? (react_1.default.createElement(drop_placeholder_1.DropPlaceholder, { id: types_1.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID, type: "visible" })) : (sections.visible.map((column) => (react_1.default.createElement(column_item_1.ColumnItem, { column: column, id: column.id, isChecked: true, key: `visible-${column.id}`, onToggle: handleToggle }))))),
+            react_1.default.createElement(sortable_1.SortableContext, { items: getSectionItemsIds("visible"), strategy: sortable_1.verticalListSortingStrategy }, (0, is_empty_1.isEmpty)(sections.visible) ? (react_1.default.createElement(drop_placeholder_1.DropPlaceholder, { id: use_sortable_multi_1.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID, type: "visible" })) : (sections.visible.map((column) => (react_1.default.createElement(column_item_1.ColumnItem, { column: column, id: column.id, isChecked: true, key: `visible-${column.id}`, onToggle: handleToggle }))))),
             react_1.default.createElement(show_1.Show, { when: (0, is_not_empty_1.isNotEmpty)(sections.hidden) || (0, is_not_nil_1.isNotNil)(activeItem) },
                 react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title" },
                     react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title-text" }, t("uxf-data-grid-hidden-columns:hidden-columns")),
                     ((0, is_nil_1.isNil)(activeItem) || (0, is_not_empty_1.isNotEmpty)(sections.hidden)) && (react_1.default.createElement(text_link_1.TextLink, { onClick: onChangeAll(true), variant: "text" }, t("uxf-data-grid-hidden-columns:show-all")))),
-                (0, is_empty_1.isEmpty)(sections.hidden) ? (react_1.default.createElement(drop_placeholder_1.DropPlaceholder, { id: types_1.EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID, type: "hidden" })) : (sections.hidden.map((column) => (react_1.default.createElement(column_item_1.ColumnItem, { column: column, id: column.id, isChecked: false, key: `hidden-${column.id}`, onToggle: handleToggle }))))),
+                (0, is_empty_1.isEmpty)(sections.hidden) ? (react_1.default.createElement(drop_placeholder_1.DropPlaceholder, { id: use_sortable_multi_1.EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID, type: "hidden" })) : (sections.hidden.map((column) => (react_1.default.createElement(column_item_1.ColumnItem, { column: column, id: column.id, isChecked: false, key: `hidden-${column.id}`, onToggle: handleToggle }))))),
             react_1.default.createElement(core_1.DragOverlay, { dropAnimation: dropAnimationConfig }, (0, is_not_nil_1.isNotNil)(activeItem) ? (react_1.default.createElement(column_item_1.ColumnItem, { column: activeItem, id: activeItem.id, isChecked: Boolean(sections.visible.find((c) => c.name === activeItem.name)), onToggle: () => void null })) : null))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.106.0",
+    "version": "11.107.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -36,9 +36,7 @@
     "dependencies": {
         "@dnd-kit/core": "6.3.1",
         "@dnd-kit/sortable": "10.0.0",
-        "@uxf/core": "11.106.0",
-        "@uxf/core-react": "11.106.0",
-        "@uxf/ui": "11.106.0",
+        "@dnd-kit/utilities": "3.2.2",
         "dayjs": "1.11.19",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.3",
@@ -46,6 +44,11 @@
         "yargs": "18.0.0"
     },
     "peerDependencies": {
+        "@uxf/core": "11.107.0",
+        "@uxf/core-react": "11.107.0",
+        "@uxf/localize": "11.107.0",
+        "@uxf/styles": "11.107.0",
+        "@uxf/ui": "11.107.0",
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0"
     },
@@ -53,6 +56,11 @@
         "@types/react": "18.3.27",
         "@types/react-dom": "18.3.7",
         "@types/qs": "6.14.0",
+        "@uxf/core": "11.107.0",
+        "@uxf/core-react": "11.107.0",
+        "@uxf/localize": "11.107.0",
+        "@uxf/styles": "11.107.0",
+        "@uxf/ui": "11.107.0",
         "react": "18.3.1",
         "react-dom": "18.3.1"
     },

package/styles.css

@@ -233,30 +233,6 @@ o
         padding-left: theme("spacing.4");
     }
 
-    &__table {
-        border: 1px solid var(--rdg-border-color);
-        margin-top: 1px;
-
-        &::-webkit-scrollbar {
-            height: 8px;
-            width: 8px;
-        }
-
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb,
-        &::-webkit-scrollbar-thumb:hover {
-            background-color: theme("colors.lightLow");
-            border-radius: 999px;
-
-            :root .dark & {
-                background-color: theme("colors.darkLow");
-            }
-        }
-    }
-
     &__toolbar {
         align-items: center;
         display: flex;
@@ -486,10 +462,10 @@ o
 
     &__hidden-columns-drop-placeholder {
         align-items: center;
-        background-color: var(--gray-50);
-        border: 1px dashed var(--gray-300);
+        background-color: theme("colors.gray.50");
+        border: 1px dashed theme("colors.gray.300");
         border-radius: 4px;
-        color: var(--gray-500);
+        color: theme("colors.gray.500");
         display: grid;
         justify-content: center;
         min-height: 64px;
@@ -497,7 +473,7 @@ o
         padding: 16px;
 
         &--over {
-            background-color: var(--gray-100);
+            background-color: theme("colors.gray.100");
         }
     }
 
@@ -539,42 +515,6 @@ o
     --panel-max-w: 400px;
 }
 
-.rdg-header-row {
-    color: theme("colors.lightLow");
-    font-weight: theme("fontWeight.normal");
-
-    :root .dark & {
-        color: theme("colors.darkLow");
-    }
-
-    .rdg-cell {
-        background-color: var(--rdg-header-background-color);
-
-        :root .dark & {
-            color: theme("colors.darkMedium");
-        }
-
-        &:not(:first-child) {
-            border-inline-start: 1px solid var(--rdg-border-color);
-        }
-    }
-}
-
-.rdg-header-sort-name + span {
-    align-items: center;
-    display: flex;
-}
-
-.rdg-cell {
-    border-block-end-width: 1px;
-    border-color: var(--rdg-border-color);
-    border-inline-end: none;
-
-    &.rdg-cell-frozen {
-        box-shadow: none;
-    }
-}
-
 @keyframes datagridlineanim {
     0% {
         left: -40%;