@ozen-ui/data-grid 0.73.0

package/__inner__/esm/shared/event-bus/entities/index.js

@@ -0,0 +1 @@
+export * from './EventBus';

package/__inner__/esm/shared/event-bus/hooks/index.js

@@ -0,0 +1 @@
+export * from './useEventBusEvents';

package/__inner__/esm/shared/event-bus/hooks/useEventBusEvents/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useEventBusEvents';

package/__inner__/esm/shared/event-bus/hooks/useEventBusEvents/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/shared/event-bus/hooks/useEventBusEvents/useEventBusEvents.js

@@ -0,0 +1,23 @@
+import { __read } from "tslib";
+import { useEffect } from 'react';
+import { useStoredValue } from "@ozen-ui/kit/useStoredValue";
+export var useEventBusEvents = function (eventBus, subscribes) {
+    var clearSubscribes = useStoredValue(function () { return function () { }; });
+    useEffect(function () {
+        clearSubscribes.current();
+        var clearSubscribesCallbacks = [];
+        Object.entries(subscribes).forEach(function (_a) {
+            var _b = __read(_a, 2), event = _b[0], callback = _b[1];
+            var unsubscribe = eventBus.subscribe(event, callback);
+            clearSubscribesCallbacks.push(unsubscribe);
+        });
+        clearSubscribes.current = function () {
+            clearSubscribesCallbacks.forEach(function (unsubscribe) {
+                unsubscribe();
+            });
+        };
+        return function () {
+            clearSubscribes.current();
+        };
+    }, [eventBus, subscribes]);
+};

package/__inner__/esm/shared/event-bus/index.js

@@ -0,0 +1,3 @@
+export * from './entities';
+export * from './hooks';
+export * from './types';

package/__inner__/esm/shared/event-bus/types/EventBusEvents.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/shared/event-bus/types/EventBusListener.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/shared/event-bus/types/EventBusListenerCallback.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/shared/event-bus/types/ExtractEventBusEvents.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/shared/event-bus/types/index.js

@@ -0,0 +1,4 @@
+export * from './EventBusEvents';
+export * from './EventBusListener';
+export * from './EventBusListenerCallback';
+export * from './ExtractEventBusEvents';

package/__inner__/esm/shared/index.js

@@ -0,0 +1,4 @@
+export * from './classNames';
+export * from './css';
+export * from './environment';
+export * from './event-bus';

package/__inner__/esm/ui/DataGrid/DataGrid.css

@@ -0,0 +1,52 @@
+.DataGrid-TableContainer {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+    padding: 0;
+  }
+  .DataGrid-TableContainer_overflowX_auto {
+      overflow-x: auto;
+    }
+  .DataGrid-TableContainer_overflowX_clip {
+      overflow-x: clip;
+    }
+  .DataGrid-TableContainer_overflowX_hidden {
+      overflow-x: hidden;
+    }
+  .DataGrid-TableContainer_overflowX_scroll {
+      overflow-x: scroll;
+    }
+  .DataGrid-TableContainer_overflowX_visible {
+      overflow-x: visible;
+    }
+  .DataGrid-TableContainer_overflowY_auto {
+      overflow-y: auto;
+    }
+  .DataGrid-TableContainer_overflowY_clip {
+      overflow-y: clip;
+    }
+  .DataGrid-TableContainer_overflowY_hidden {
+      overflow-y: hidden;
+    }
+  .DataGrid-TableContainer_overflowY_scroll {
+      overflow-y: scroll;
+    }
+  .DataGrid-TableContainer_overflowY_visible {
+      overflow-y: visible;
+    }
+  .DataGrid-TableWrapper {
+    flex: 1;
+  }
+  .DataGrid-Pagination, .DataGrid-Top {
+    flex-shrink: 0;
+  }
+  .DataGrid-Top {
+    margin-block-end: var(--spacing-s);
+  }
+  .DataGrid-Pagination {
+    margin-block-start: var(--spacing-s);
+  }
+  .DataGrid .DataGridCell_variant_body, .DataGrid .DataGridCell_variant_head, .DataGrid .DataGridCell_variant_foot {
+    padding: 0;
+  }

package/__inner__/esm/ui/DataGrid/DataGrid.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Card } from "@ozen-ui/kit/Card";
+import { TableContainer } from "@ozen-ui/kit/Table";
+import { isPlainObject } from '@ozen-ui/kit/utils';
+import { cn } from '../../shared';
+import { DataGridProvider } from '../context';
+import { DataGridFoot, DataGridHead, DataGridBody, DataGridPagination, DataGridTop, DataGridWrapper, DataGridTable, } from './components';
+import './components/DataGridWrapper/DataGridWrapper.css';
+import './components/DataGridPagination/DataGridPagination.css';
+import './components/DataGridHeadFoot/DataGridHeadFoot.css';
+import './components/DataGridHeadFoot/components/DataGridHeadFootCell/DataGridHeadFootCell.css';
+import './components/DataGridHeadFoot/components/DataGridHeadFootSelection/DataGridHeadFootSelection.css';
+import './components/DataGridHeadFoot/components/DataGridHeadFootExpand/DataGridHeadFootExpand.css';
+import '../statuses/DataGridPlaceholder/DataGridPlaceholder.css';
+import './components/DataGridTop/DataGridTop.css';
+import './components/DataGridBody/DataGridBody.css';
+import './components/DataGridRow/components/DataGridRowExpand/DataGridRowExpand.css';
+import './components/DataGridRow/components/DataGridRowCell/DataGridRowCell.css';
+import './components/DataGridRow/components/DataGridRowSelection/DataGridRowSelection.css';
+import './components/DataGridSubRow/DataGridSubRow.css';
+import './components/DataGridTable/DataGridTable.css';
+import '../cells/DataGridCellItem/DataGridCellItem.css';
+import './components/DataGridTop/components/DataGridTopSubControls/DataGridTopSubControls.css';
+import '../footer/DataGridFooterContainer/DataGridFooterContainer.css';
+import '../footer/DataGridSelectionFooter/DataGridSelectionFooter.css';
+import './DataGrid.css';
+export var cnDataGrid = cn('DataGrid');
+export var DataGrid = function (_a) {
+    var store = _a.store, actions = _a.actions, layout = _a.layout, subControlsBefore = _a.subControlsBefore, subControlsAfter = _a.subControlsAfter, className = _a.className, allFiltersDrawer = _a.allFiltersDrawer, settingsDrawer = _a.settingsDrawer, paginationBeforeText = _a.paginationBeforeText, paginationAfterText = _a.paginationAfterText, stickyHeader = _a.stickyHeader, loading = _a.loading, empty = _a.empty, clearFiltersText = _a.clearFiltersText, applyFiltersText = _a.applyFiltersText, footer = _a.footer, overflow = _a.overflow, refs = _a.refs;
+    return (React.createElement(DataGridProvider, { store: store },
+        React.createElement(DataGridWrapper, { ref: refs === null || refs === void 0 ? void 0 : refs.wrapper, className: cnDataGrid('', className) },
+            settingsDrawer,
+            allFiltersDrawer,
+            React.createElement(DataGridTop, { ref: refs === null || refs === void 0 ? void 0 : refs.top, applyText: applyFiltersText, clearText: clearFiltersText, className: cnDataGrid('Top'), hasAllFilterDrawer: !!allFiltersDrawer, hasSettingsDrawer: !!settingsDrawer, actions: actions, subControlsBefore: subControlsBefore, subControlsAfter: subControlsAfter }),
+            React.createElement(TableContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.tableContainer, as: Card, borderWidth: "none", size: "s", className: cnDataGrid('TableContainer', {
+                    overflowX: isPlainObject(overflow) ? overflow.x : overflow,
+                    overflowY: isPlainObject(overflow) ? overflow.y : overflow,
+                }) },
+                React.createElement("div", { ref: refs === null || refs === void 0 ? void 0 : refs.tableWrapper, className: cnDataGrid('TableWrapper') },
+                    React.createElement(DataGridTable, { ref: refs === null || refs === void 0 ? void 0 : refs.table, layout: layout, stickyHeader: stickyHeader },
+                        React.createElement(DataGridHead, null),
+                        React.createElement(DataGridBody, { loading: loading, empty: empty }),
+                        React.createElement(DataGridFoot, null))),
+                footer),
+            React.createElement(DataGridPagination, { ref: refs === null || refs === void 0 ? void 0 : refs.pagination, className: cnDataGrid('Pagination'), beforeText: paginationBeforeText, afterText: paginationAfterText }))));
+};

package/__inner__/esm/ui/DataGrid/components/DataGridBody/DataGridBody.css

@@ -0,0 +1,5 @@
+.DataGridBody {
+  position: relative;
+  z-index: 0;
+  height: 100%;
+}

package/__inner__/esm/ui/DataGrid/components/DataGridBody/DataGridBody.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TableBody } from "@ozen-ui/kit/Table";
+import { dataGridObserver, useDataGridStore } from '../../../../core';
+import { cn } from '../../../../shared';
+import { DataGridRow } from '../DataGridRow';
+export var cnDataGridBody = cn('DataGridBody');
+export var DataGridBody = dataGridObserver(function (_a) {
+    var empty = _a.empty, loading = _a.loading;
+    var store = useDataGridStore();
+    var isLoading = store.isLoading, isDefault = store.isDefault, isEmpty = store.isEmpty;
+    return (React.createElement(TableBody, { className: cnDataGridBody() },
+        isDefault &&
+            store.data.map(function (row, index) {
+                var rowId = store.generateRowId(row);
+                return (React.createElement(DataGridRow, { key: rowId, id: rowId, row: row, index: index }));
+            }),
+        isEmpty && empty,
+        isLoading && loading));
+});

package/__inner__/esm/ui/DataGrid/components/DataGridBody/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridBody';
+export * from './types';

package/__inner__/esm/ui/DataGrid/components/DataGridBody/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/ui/DataGrid/components/DataGridCell/DataGridCell.js

@@ -0,0 +1,26 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext } from 'react';
+import { TableCell, TableContext } from "@ozen-ui/kit/Table";
+import { cn } from '../../../../shared';
+export var cnDataGridCell = cn('DataGridCell');
+export var DataGridCell = forwardRef(function (_a, ref) {
+    var children = _a.children, align = _a.align, className = _a.className, verticalAlignProp = _a.verticalAlign, other = __rest(_a, ["children", "align", "className", "verticalAlign"]);
+    var table = useContext(TableContext);
+    var variant = table.variant;
+    var verticalAlign = (function () {
+        if (verticalAlignProp) {
+            return verticalAlignProp;
+        }
+        if (variant === 'head' || variant === 'foot') {
+            return 'bottom';
+        }
+        if (variant === 'body') {
+            return 'middle';
+        }
+        return undefined;
+    })();
+    return (React.createElement(TableCell, __assign({}, other, { ref: ref, align: align, verticalAlign: verticalAlign, className: cnDataGridCell({
+            variant: variant,
+        }, [className]) }), children));
+});
+DataGridCell.displayName = 'DataGridCell';

package/__inner__/esm/ui/DataGrid/components/DataGridCell/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridCell';
+export * from './types';

package/__inner__/esm/ui/DataGrid/components/DataGridCell/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/ui/DataGrid/components/DataGridFoot/DataGridFoot.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { dataGridObserver, useDataGridStore } from '../../../../core';
+import { DataGridHeadFoot } from '../DataGridHeadFoot';
+export var DataGridFoot = dataGridObserver(function () {
+    var store = useDataGridStore();
+    return (React.createElement(DataGridHeadFoot, { nodes: store.footerNodes.slice().reverse(), isFoot: true }));
+});

package/__inner__/esm/ui/DataGrid/components/DataGridFoot/index.js

@@ -0,0 +1 @@
+export * from './DataGridFoot';

package/__inner__/esm/ui/DataGrid/components/DataGridHead/DataGridHead.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { dataGridObserver, useDataGridStore } from '../../../../core';
+import { DataGridHeadFoot } from '../DataGridHeadFoot';
+export var DataGridHead = dataGridObserver(function () {
+    var store = useDataGridStore();
+    return React.createElement(DataGridHeadFoot, { nodes: store.headerNodes });
+});

package/__inner__/esm/ui/DataGrid/components/DataGridHead/index.js

@@ -0,0 +1 @@
+export * from './DataGridHead';

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/DataGridHeadFoot.css

@@ -0,0 +1,3 @@
+.DataGridHeadFoot {
+  z-index: 1;
+}

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/DataGridHeadFoot.js

@@ -0,0 +1,48 @@
+import React, { Fragment } from 'react';
+import { TableFoot, TableHead, TableRow } from "@ozen-ui/kit/Table";
+import { cn, isFunction } from '@ozen-ui/kit/utils';
+import { dataGridObserver, DataGridStoreColumnsGroup, DataGridStoreColumn, useDataGridStore, } from '../../../../core';
+import { DataGridHeadFootCell, DataGridHeadFootExpand, DataGridHeadFootSelection, } from './components';
+export var cnDataGridHeadFoot = cn('DataGridHeadFoot');
+export var DataGridHeadFoot = dataGridObserver(function (_a) {
+    var nodes = _a.nodes, _b = _a.isFoot, isFoot = _b === void 0 ? false : _b;
+    var store = useDataGridStore();
+    var isSubRowEnabled = store.subRows.isEnabled;
+    var isSelectionEnabled = store.selection.isEnabled;
+    var Wrapper = isFoot ? TableFoot : TableHead;
+    return (React.createElement(Wrapper, { className: cnDataGridHeadFoot() }, nodes.map(function (nodes, index, levels) {
+        var totalDepthCols = 0;
+        nodes.forEach(function (node) {
+            if (node instanceof DataGridStoreColumn) {
+                totalDepthCols += 1;
+                return;
+            }
+            totalDepthCols += node.offset + node.visibleColumns.length;
+        });
+        var rightOffset = store.columnsCount - totalDepthCols;
+        var isFirstLevel = index === 0;
+        var isLastLevel = index === levels.length - 1;
+        var isSelectionVisible = (function () {
+            if (isFoot) {
+                return isFirstLevel;
+            }
+            return isLastLevel;
+        })();
+        var isWithSelectionPlaceholder = isSelectionEnabled && !isSelectionVisible;
+        return (React.createElement(TableRow, { key: nodes.map(function (column) { return column === null || column === void 0 ? void 0 : column.id; }).join('_') },
+            isWithSelectionPlaceholder && React.createElement(DataGridHeadFootCell, null),
+            isSelectionVisible && React.createElement(DataGridHeadFootSelection, null),
+            isSubRowEnabled && store.subRows.isLeft && (React.createElement(DataGridHeadFootExpand, null)),
+            nodes.map(function (node) {
+                var render = isFoot ? node.footer : node.header;
+                var rendered = isFunction(render) ? render() : render;
+                var isGroup = node instanceof DataGridStoreColumnsGroup;
+                return (React.createElement(Fragment, { key: node.id },
+                    isGroup &&
+                        Array.from({ length: node.offset }).map(function (_, index) { return (React.createElement(DataGridHeadFootCell, { align: "left", key: index })); }),
+                    React.createElement(DataGridHeadFootCell, { node: node }, rendered)));
+            }),
+            Array.from({ length: rightOffset }).map(function (_, index) { return (React.createElement(DataGridHeadFootCell, { key: index })); }),
+            isSubRowEnabled && store.subRows.isRight && (React.createElement(DataGridHeadFootExpand, null))));
+    })));
+});

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootCell/DataGridHeadFootCell.css

@@ -0,0 +1,43 @@
+/* stylelint-disable */
+.DataGridHeadFootCell {
+  z-index: 1;
+}
+.DataGridHeadFootCell_type_Column .DataGridHeadFootCell-Inner {
+      display: flex;
+      align-items: center;
+    }
+.DataGridHeadFootCell_type_Column .DataGridHeadFootCell-Inner_align_left {
+        justify-content: flex-start;
+      }
+.DataGridHeadFootCell_type_Column .DataGridHeadFootCell-Inner_align_right {
+        justify-content: flex-end;
+      }
+.DataGridHeadFootCell-Inner {
+    font: var(--typography-text-3xs-font);
+    letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+    text-transform: var(--typography-text-3xs-text_transform, none);
+    padding-block: 24px 8px;
+    padding-inline: var(--data-grid-column-inline-gap);
+    box-sizing: border-box;
+    text-transform: uppercase;
+  }
+.DataGridHeadFootCell-Inner_interactive {
+      cursor: pointer;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
+    }
+.DataGridHeadFootCell-Inner_disabled {
+      cursor: not-allowed;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
+    }
+.DataGridHeadFootCell-Content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+.DataGridHeadFootCell-Sort {
+    margin-inline-start: var(--spacing-2xs);
+  }

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootCell/DataGridHeadFootCell.js

@@ -0,0 +1,51 @@
+import { __read } from "tslib";
+import React, { useRef, useState } from 'react';
+import { isString } from '@ozen-ui/kit/utils';
+import { useDataGridStoreEvents, dataGridObserver, DataGridStoreColumn, DataGridStoreColumnsGroup, } from '../../../../../../core';
+import { cn } from '../../../../../../shared';
+import { DataGridCell } from '../../../DataGridCell';
+import { DataGridHeadFootSort } from '../DataGridHeadFootSort';
+export var cnDataGridHeadFootCell = cn('DataGridHeadFootCell');
+export var DataGridHeadFootCell = dataGridObserver(function (_a) {
+    var node = _a.node, children = _a.children, className = _a.className, align = _a.align;
+    var ref = useRef(null);
+    var _b = __read(useState(undefined), 2), savedWidth = _b[0], setSavedWidth = _b[1];
+    var isGroup = node instanceof DataGridStoreColumnsGroup;
+    var isColumn = node instanceof DataGridStoreColumn;
+    useDataGridStoreEvents({
+        changeStatus: function (status) {
+            var _a;
+            if (status === 'default') {
+                setSavedWidth(undefined);
+            }
+            else {
+                setSavedWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
+            }
+        },
+    });
+    var width = (function () {
+        if (!isColumn) {
+            return undefined;
+        }
+        if (node.width === 'responsive') {
+            return savedWidth;
+        }
+        return node.width;
+    })();
+    return (React.createElement(DataGridCell, { ref: ref, colSpan: isGroup ? node.visibleColumns.length : undefined, style: {
+            width: width,
+        }, align: align, className: cnDataGridHeadFootCell('', {
+            type: isGroup ? 'Group' : 'Column',
+        }, [className]) },
+        React.createElement("div", { className: cnDataGridHeadFootCell('Inner', {
+                align: isGroup || !node ? undefined : node.align,
+                interactive: isColumn && !!node.hasSort && !node.isSortDisabled,
+                disabled: isColumn && !!node.hasSort && node.isSortDisabled,
+            }), onClick: function () {
+                if (isColumn && node.hasSort) {
+                    node.switchSort();
+                }
+            } },
+            React.createElement("div", { className: cnDataGridHeadFootCell('Content'), title: isString(children) ? children : undefined }, children),
+            isColumn && (React.createElement(DataGridHeadFootSort, { column: node, className: cnDataGridHeadFootCell('Sort') })))));
+});

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootCell/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridHeadFootCell';
+export * from './types';

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootCell/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootExpand/DataGridHeadFootExpand.css

@@ -0,0 +1,9 @@
+.DataGridHeadFootExpand {
+  inline-size: var(--data-grid-expand-width);
+  box-sizing: border-box;
+}
+
+  .DataGridHeadFootExpand .DataGridHeadFootCell-Inner {
+    padding: 0;
+    inline-size: var(--data-grid-expand-width);
+  }

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootExpand/DataGridHeadFootExpand.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { cn } from '../../../../../../shared';
+import { DataGridHeadFootCell } from '../DataGridHeadFootCell';
+export var cnDataGridHeadFootExpand = cn('DataGridHeadFootExpand');
+export var DataGridHeadFootExpand = function () { return (React.createElement(DataGridHeadFootCell, { className: cnDataGridHeadFootExpand() })); };

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootExpand/index.js

@@ -0,0 +1 @@
+export * from './DataGridHeadFootExpand';

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootSelection/DataGridHeadFootSelection.css

@@ -0,0 +1,3 @@
+.DataGridHeadFootSelection {
+  inline-size: var(--data-grid-selection-width);
+}

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootSelection/DataGridHeadFootSelection.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Checkbox } from "@ozen-ui/kit/CheckboxNext";
+import { dataGridObserver, useDataGridStore } from '../../../../../../core';
+import { cn } from '../../../../../../shared';
+import { DataGridHeadFootCell } from '../DataGridHeadFootCell';
+export var cnDataGridHeadFootSelection = cn('DataGridHeadFootSelection');
+export var DataGridHeadFootSelection = dataGridObserver(function () {
+    var store = useDataGridStore();
+    var isWithSelection = store.selection.isEnabled;
+    if (!isWithSelection) {
+        return null;
+    }
+    return (React.createElement(DataGridHeadFootCell, { className: cnDataGridHeadFootSelection() }, store.selection.isMultiple && (React.createElement(Checkbox, { size: "s", indeterminate: !store.selection.isAllSelected && store.selection.isSomeSelected, checked: store.selection.isAllSelected, onChange: function (event) {
+            if (event.target.checked) {
+                store.selection.selectAll();
+            }
+            else {
+                store.selection.unselectAll();
+            }
+        }, disabled: store.isEmpty || !store.isDefault }))));
+});

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootSelection/index.js

@@ -0,0 +1 @@
+export * from './DataGridHeadFootSelection';

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootSort/DataGridHeadFootSort.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SortDefaultIcon, SortDownIcon, SortUpIcon } from '@ozen-ui/icons';
+import { IconButton } from "@ozen-ui/kit/IconButtonNext";
+import { dataGridObserver } from '../../../../../../core';
+import { cn } from '../../../../../../shared';
+export var cnDataGridHeadFootSort = cn('DataGridHeadFootSort');
+export var DataGridHeadFootSort = dataGridObserver(function (_a) {
+    var column = _a.column, className = _a.className;
+    if (!column.hasSort) {
+        return null;
+    }
+    var icon = (function () {
+        if (column.isAscending) {
+            return SortUpIcon;
+        }
+        if (column.isDescending) {
+            return SortDownIcon;
+        }
+        return SortDefaultIcon;
+    })();
+    return (React.createElement(IconButton, { className: cnDataGridHeadFootSort('', [className]), compressed: true, variant: "function", size: "xs", color: column.isSortActive ? 'primary' : 'tertiary', icon: icon, disabled: column.isSortDisabled, onClick: function (event) {
+            event.stopPropagation();
+            column.switchSort();
+        } }));
+});

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootSort/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridHeadFootSort';
+export * from './types';

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/DataGridHeadFootSort/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/components/index.js

@@ -0,0 +1,4 @@
+export * from './DataGridHeadFootCell';
+export * from './DataGridHeadFootExpand';
+export * from './DataGridHeadFootSelection';
+export * from './DataGridHeadFootSort';

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridHeadFoot';
+export * from './types';

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/DataGridPagination.css

@@ -0,0 +1,9 @@
+.DataGridPagination-OpenText {
+    color: var(--color-content-secondary);
+  }
+  .DataGridPagination-SizesChevron {
+    transition: transform var(--transition-default);
+  }
+  .DataGridPagination-SizesChevron_open {
+      transform: rotate(180deg);
+    }

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/DataGridPagination.js

@@ -0,0 +1,44 @@
+import { __read } from "tslib";
+import React, { forwardRef, useRef } from 'react';
+import { ChevronDownIcon } from '@ozen-ui/icons';
+import { Button } from "@ozen-ui/kit/ButtonNext";
+import { DataList, DataListOption } from "@ozen-ui/kit/DataList";
+import { Pagination } from "@ozen-ui/kit/Pagination";
+import { Stack } from "@ozen-ui/kit/Stack";
+import { Typography } from "@ozen-ui/kit/Typography";
+import { useBoolean } from "@ozen-ui/kit/useBoolean";
+import { isFunction } from '@ozen-ui/kit/utils';
+import { dataGridObserver, useDataGridStore } from '../../../../core';
+import { cn } from '../../../../shared';
+export var cnDataGridPagination = cn('DataGridPagination');
+var UnwrappedDataGridPagination = forwardRef(function (_a, ref) {
+    var className = _a.className, afterText = _a.afterText, beforeText = _a.beforeText;
+    var store = useDataGridStore();
+    var pagination = store.pagination;
+    var pageSizeButtonRef = useRef(null);
+    var _b = __read(useBoolean(false), 2), isPageSizeSelectOpen = _b[0], _c = _b[1], toggleIsPageSizeSelectOpen = _c.toggle, closePageSizeSelect = _c.off;
+    if (!pagination.isEnabled) {
+        return null;
+    }
+    var renderedBeforeText = isFunction(beforeText) ? beforeText() : beforeText;
+    var renderedAfterText = isFunction(afterText)
+        ? afterText(pagination.total)
+        : afterText;
+    return (React.createElement(Stack, { ref: ref, className: cnDataGridPagination('', [className]), justify: "spaceBetween", align: "center", fullWidth: true },
+        React.createElement(Pagination, { totalCount: pagination.total, page: pagination.index, pageSize: pagination.pageSize, size: "s", onPageChange: function (page) { return pagination.setIndex(page); }, disabled: store.isLoading }),
+        pagination.isAvailableSizeEnabled && (React.createElement(Stack, { gap: "s", align: "center" },
+            React.createElement(Typography, { className: cnDataGridPagination('OpenText'), variant: "text-s" }, renderedBeforeText),
+            React.createElement(Button, { ref: pageSizeButtonRef, onClick: toggleIsPageSizeSelectOpen, disabled: store.isLoading, variant: "function", size: "s" },
+                React.createElement(Stack, { align: "center", gap: "s" },
+                    React.createElement("span", null, pagination.pageSize),
+                    React.createElement(ChevronDownIcon, { size: "s", className: cnDataGridPagination('SizesChevron', {
+                            open: isPageSizeSelectOpen,
+                        }) }))),
+            React.createElement(Typography, { className: cnDataGridPagination('OpenText'), variant: "text-s" }, renderedAfterText),
+            React.createElement(DataList, { open: isPageSizeSelectOpen, onClose: closePageSizeSelect, placement: "bottom", onSelect: function (_, payload) {
+                    pagination.setPageSize(payload.value);
+                    closePageSizeSelect();
+                }, anchorRef: pageSizeButtonRef, selected: pagination.pageSize }, pagination.availableSizes.map(function (size) { return (React.createElement(DataListOption, { key: size, value: size }, size)); }))))));
+});
+UnwrappedDataGridPagination.displayName = 'DataGridPagination';
+export var DataGridPagination = dataGridObserver(UnwrappedDataGridPagination);

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/entities/afterText.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/entities/beforeText.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/entities/index.js

@@ -0,0 +1,2 @@
+export * from './afterText';
+export * from './beforeText';

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/index.js

@@ -0,0 +1,3 @@
+export * from './entities';
+export * from './DataGridPagination';
+export * from './types';

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/types.js

@@ -0,0 +1 @@
+export {};