@geotab/zenith 1.26.6-beta.3 → 2.0.0-beta.0

package/esm/table/selectable/useSelectableRows.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { SelectionState } from "./interfaces";
+import { CheckboxCell } from "../../dataGrid/columns/checkboxColumn/checkboxCell";
+import { SelectableHeader } from "./selectableHeader";
+import { getSelections } from "./utils/getSelection";
+import { calculateSelectionState } from "./utils/calculateSelectionState";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { checkRow } from "./utils/checkRow";
+import { isRowChecked } from "./utils/isRowChecked";
+import { getCurrentPageSelection } from "./utils/getCurrentPageSelection";
+export const getEmptySelection = () => ({
+    all: false,
+    selected: []
+});
+const SelectableWrapperName = "Selectable";
+export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable) => {
+    var _a;
+    const { translate } = useLanguage();
+    const selections = useMemo(() => getSelections(selectable === null || selectable === void 0 ? void 0 : selectable.selection), [selectable === null || selectable === void 0 ? void 0 : selectable.selection]);
+    const [state, setState] = useState(SelectionState.None);
+    const checkboxVisible = useMemo(() => {
+        if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) {
+            return selectable.checkboxVisible;
+        }
+        if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) !== "nested") {
+            return (_, isNested) => !isNested;
+        }
+        return (() => true);
+    }, [selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+    const checkboxDisabled = useMemo(() => {
+        if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) {
+            return selectable.checkboxDisabled;
+        }
+        if (selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit) {
+            const limit = selectable.selectionLimit;
+            return (entity) => selections.size >= limit && !selections.has(entity.id);
+        }
+        return () => false;
+    }, [selectable, selections]);
+    const checkboxPlaceholder = useMemo(() => {
+        if ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder) !== undefined) {
+            return selectable.checkboxPlaceholder;
+        }
+        // don't change it when user takes control over checkbox visibility
+        if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) {
+            return true;
+        }
+        return (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested";
+    }, [selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder, selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+    const isAllSelected = useMemo(() => { var _a; return ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false; }, [(_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all]);
+    const selectableState = useMemo(() => calculateSelectionState(entities, selections, isAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy), [checkboxDisabled, checkboxVisible, entities, isAllSelected, selections, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+    const firstColumnId = useMemo(() => columns.length > 0 ? columns[0].id : null, [columns]);
+    useEffect(() => {
+        if (selectable && selectable.selection) {
+            const newSelections = new Set(selectable.selection.selected);
+            const newState = calculateSelectionState(entities, newSelections, selectable.selection.all || false, checkboxVisible, checkboxDisabled, selectable.strategy);
+            setState(newState);
+        }
+    }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+    const getNewSelection = useCallback((id, checked) => {
+        if (state === SelectionState.All) {
+            const newSelection = getCurrentPageSelection(entities, selectable);
+            checkRow(newSelection, selectable, entities, id, false);
+            return newSelection;
+        }
+        checkRow(selections, selectable, entities, id, checked);
+        return selections;
+    }, [state, entities, selectable, selections]);
+    const onSelectListener = useCallback((id, checked) => {
+        var _a;
+        const newSelection = getNewSelection(id, checked);
+        const newState = calculateSelectionState(entities, newSelection, ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
+        const newValue = {
+            selected: [...newSelection],
+            all: newState === SelectionState.All
+        };
+        setState(newState);
+        selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
+        setSelectMode(newValue.all || newValue.selected.length > 0);
+    }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
+    const onChangeSelectionState = useCallback((newState) => {
+        if (newState === SelectionState.All) {
+            (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
+                selected: [],
+                all: true
+            });
+            setSelectMode(true);
+            return;
+        }
+        if (newState === SelectionState.None) {
+            (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
+                selected: [],
+                all: false
+            });
+            setSelectMode(false);
+            return;
+        }
+        const newSelections = getCurrentPageSelection(entities, selectable);
+        setState(newState);
+        const newValue = { selected: [...newSelections], all: false };
+        selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
+        setSelectMode(newValue.all || newValue.selected.length > 0);
+    }, [selectable, entities, setSelectMode]);
+    const checkboxTitle = useCallback((entity) => (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxTitle) ? selectable.checkboxTitle(entity) : firstColumnId ? entity[firstColumnId] || entity.id : entity.id, [firstColumnId, selectable]);
+    const headerTitle = useCallback(() => {
+        if (selectable === null || selectable === void 0 ? void 0 : selectable.headerTitle) {
+            return selectable.headerTitle(selectableState);
+        }
+        if (state === SelectionState.None || state === SelectionState.Partial) {
+            return translate("Select all");
+        }
+        return translate("Deselect all");
+    }, [selectable, selectableState, state, translate]);
+    const isEntityChecked = useCallback((entity, isNested) => isRowChecked(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+    const wrapper = useMemo(() => {
+        if (!selectable) {
+            return null;
+        }
+        return {
+            name: SelectableWrapperName,
+            render(value, entity, isNested) {
+                if (!entity) {
+                    return null;
+                }
+                if (isMobile) {
+                    return value;
+                }
+                if (entity.isLoading) {
+                    return value;
+                }
+                const allowed = checkboxVisible(entity, isNested);
+                if (!allowed && !checkboxPlaceholder) {
+                    return value;
+                }
+                const isDisable = checkboxDisabled(entity, isNested);
+                const checked = isEntityChecked(entity, isNested || false);
+                const cell = _jsx(CheckboxCell, { id: entity.id, className: allowed ? "zen-selectable-row" : "zen-selectable-row zen-selectable-column--no-checkbox", checked: checked.checked, indeterminate: checked.indeterminate, disabled: isDisable, label: checkboxTitle(entity), onChange: onSelectListener, children: _jsx(CheckboxCell.Content, { children: value }) });
+                return cell;
+            },
+            renderHeader(title) {
+                const cell = _jsx(SelectableHeader, { title: title, label: headerTitle(), checked: state === SelectionState.CurrentPage || state === SelectionState.All, indeterminate: state === SelectionState.Partial, onChange: (newValue) => {
+                        const newState = newValue
+                            ? selectable.turnOffSelectAll ? SelectionState.CurrentPage : SelectionState.All
+                            : SelectionState.None;
+                        setState(newState);
+                        onChangeSelectionState(newState);
+                    }, calculateSelectionState: () => selectableState, checkboxInHeader: selectable.checkboxInHeader !== undefined
+                        ? selectable.checkboxInHeader
+                        : (selectable.selectionLimit !== undefined ? false : undefined), header: selectable.header, onSelect: (newState) => {
+                        setState(newState);
+                        onChangeSelectionState(newState);
+                    }, turnOffSelectAll: selectable.turnOffSelectAll });
+                return cell;
+            }
+        };
+    }, [
+        checkboxDisabled,
+        checkboxTitle,
+        checkboxVisible,
+        headerTitle,
+        onChangeSelectionState,
+        onSelectListener,
+        selectable,
+        selectableState,
+        state,
+        isMobile,
+        checkboxPlaceholder,
+        isEntityChecked
+    ]);
+    const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!entity) {
+            return [primaryData, secondaryData];
+        }
+        if (!isMobile) {
+            return [primaryData, secondaryData];
+        }
+        if (!selectMode) {
+            return [primaryData, secondaryData];
+        }
+        const allowed = checkboxVisible(entity);
+        const isDisable = checkboxDisabled(entity);
+        const checked = isEntityChecked(entity, isNested || false);
+        const cell = _jsx(CheckboxCell, { id: entity.id, className: allowed ? "zen-selectable-row" : "zen-selectable-row zen-selectable-column--no-checkbox", checked: checked.checked, indeterminate: checked.indeterminate, disabled: isDisable, label: checkboxTitle(entity), onChange: onSelectListener, children: _jsx(CheckboxCell.Content, { children: primaryData }) });
+        return [
+            cell,
+            _jsx("div", { className: "zen-checkbox-column__padding", children: secondaryData }, "1")
+        ];
+    }, [checkboxDisabled, checkboxTitle, checkboxVisible, isMobile, selectMode, onSelectListener, isEntityChecked]);
+    const selectableColumns = useMemo(() => {
+        if (!selectable) {
+            return columns;
+        }
+        const newColumns = columns.map(c => (Object.assign({}, c)));
+        // Remove CheckboxColumnWrappers from wrappers list
+        newColumns.forEach(c => {
+            if (c.wrappers) {
+                c.wrappers = c.wrappers.filter(w => w.name !== SelectableWrapperName);
+            }
+        });
+        // Add selectable wrappers of the first column
+        const firstColumn = newColumns.find(c => c.id === firstColumnId);
+        if (firstColumn && wrapper) {
+            firstColumn.wrappers = [...firstColumn.wrappers || [], wrapper];
+        }
+        return newColumns;
+    }, [columns, firstColumnId, selectable, wrapper]);
+    return { selectableColumns, selectableFeedWrapper };
+};
+export const TRANSLATIONS = [
+    "Select all", "Deselect all"
+];

package/esm/table/selectable/utils/calculateSelectionState.d.ts

@@ -0,0 +1,5 @@
+import { IEntityWithId } from "../../../commonHelpers/entity";
+import { IRowEntity } from "../../../dataGrid/row/row";
+import { SelectionState } from "../interfaces";
+import { TSelectionStrategy } from "../useSelectableRows";
+export declare const calculateSelectionState: <T extends IRowEntity<N>, N extends IEntityWithId>(entities: T[], selections: Set<string>, all: boolean, checkboxVisible: (e: T | N) => boolean, checkboxDisabled: (e: T | N) => boolean, strategy?: TSelectionStrategy) => SelectionState;

package/esm/table/selectable/utils/calculateSelectionState.js

@@ -0,0 +1,29 @@
+import { SelectionState } from "../interfaces";
+export const calculateSelectionState = (entities, selections, all, checkboxVisible, checkboxDisabled, strategy) => {
+    if (selections.size === 0) {
+        return all ? SelectionState.All : SelectionState.None;
+    }
+    return entities.every(entity => {
+        if (!checkboxVisible(entity)) {
+            return true;
+        }
+        if (checkboxDisabled(entity)) {
+            return true;
+        }
+        if (strategy === "nested") {
+            if (entity.children) {
+                return entity.children.every(child => {
+                    if (!checkboxVisible(child)) {
+                        return true;
+                    }
+                    if (checkboxDisabled(child)) {
+                        return true;
+                    }
+                    return selections.has(child.id);
+                });
+            }
+            return false;
+        }
+        return selections.has(entity.id);
+    }) ? SelectionState.CurrentPage : SelectionState.Partial;
+};

package/esm/table/selectable/utils/checkRow.d.ts

@@ -0,0 +1,4 @@
+import { IEntityWithId } from "../../../commonHelpers/entity";
+import { IRowEntity } from "../../../dataGrid/row/row";
+import { ISelectableRowsOptions } from "../useSelectableRows";
+export declare const checkRow: <T extends IRowEntity<N>, N extends IEntityWithId>(selectionSet: Set<string>, selectable: ISelectableRowsOptions<T, N> | undefined, entities: T[], id: string, checked: boolean) => Set<string>;

package/esm/table/selectable/utils/checkRow.js

@@ -0,0 +1,24 @@
+export const checkRow = (selectionSet, selectable, entities, id, checked) => {
+    const setValue = (rowId) => checked ? selectionSet.add(rowId) : selectionSet.delete(rowId);
+    if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested") {
+        const entity = entities.find(e => e.id === id);
+        if (entity && entity.children && entity.children.length > 0) {
+            entity.children.forEach(child => {
+                const isChildVisible = selectable.checkboxVisible
+                    ? selectable.checkboxVisible(child, true)
+                    : true;
+                const isChildEnabled = !selectable.checkboxDisabled || !selectable.checkboxDisabled(child, true);
+                if (isChildVisible && isChildEnabled) {
+                    setValue(child.id);
+                }
+            });
+        }
+        else {
+            setValue(id);
+        }
+    }
+    else {
+        setValue(id);
+    }
+    return selectionSet;
+};

package/esm/table/selectable/utils/getCurrentPageSelection.d.ts

@@ -0,0 +1,4 @@
+import { IEntityWithId } from "../../../commonHelpers/entity";
+import { IRowEntity } from "../../../dataGrid/row/row";
+import { ISelectableRowsOptions } from "../useSelectableRows";
+export declare const getCurrentPageSelection: <T extends IRowEntity<N>, N extends IEntityWithId>(entities: T[], selectable: ISelectableRowsOptions<T, N> | undefined) => Set<string>;

package/esm/table/selectable/utils/getCurrentPageSelection.js

@@ -0,0 +1,24 @@
+export const getCurrentPageSelection = (entities, selectable) => {
+    const newSelections = new Set();
+    entities.forEach(entity => {
+        const isVisible = (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible)
+            ? selectable.checkboxVisible(entity)
+            : true;
+        const isEnabled = !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) || !selectable.checkboxDisabled(entity);
+        if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested") {
+            (entity.children || []).forEach(child => {
+                const isChildVisible = selectable.checkboxVisible
+                    ? selectable.checkboxVisible(child, true)
+                    : true;
+                const isChildEnabled = !selectable.checkboxDisabled || !selectable.checkboxDisabled(child, true);
+                if (isChildVisible && isChildEnabled) {
+                    newSelections.add(child.id);
+                }
+            });
+        }
+        else if (isVisible && isEnabled) {
+            newSelections.add(entity.id);
+        }
+    });
+    return newSelections;
+};

package/esm/table/selectable/utils/getSelection.d.ts

@@ -0,0 +1,2 @@
+import { ISelectionValue } from "../interfaces";
+export declare const getSelections: (selections: ISelectionValue | undefined) => Set<string>;

package/esm/table/selectable/utils/getSelection.js

@@ -0,0 +1,7 @@
+export const getSelections = (selections) => {
+    const res = new Set();
+    if (selections !== undefined) {
+        selections.selected.forEach(id => res.add(id));
+    }
+    return res;
+};

package/esm/table/selectable/utils/isRowChecked.d.ts

@@ -0,0 +1,8 @@
+import { IEntityWithId } from "../../../commonHelpers/entity";
+import { IRowEntity } from "../../../dataGrid/row/row";
+import { SelectionState } from "../interfaces";
+import { TSelectionStrategy } from "../useSelectableRows";
+export declare const isRowChecked: <T extends IRowEntity<N>, N extends IEntityWithId>(selections: Set<string>, state: SelectionState, strategy: TSelectionStrategy | undefined, entity: T | N, isNested: boolean) => {
+    indeterminate: boolean;
+    checked: boolean;
+};

package/esm/table/selectable/utils/isRowChecked.js

@@ -0,0 +1,16 @@
+import { SelectionState } from "../interfaces";
+export const isRowChecked = (selections, state, strategy, entity, isNested) => {
+    if (state === SelectionState.All) {
+        return { indeterminate: false, checked: true };
+    }
+    if (isNested) {
+        return { indeterminate: false, checked: selections.has(entity.id) };
+    }
+    const mainEntity = entity;
+    if (strategy === "nested" && mainEntity.children && mainEntity.children.length > 0) {
+        const allChildrenSelected = mainEntity.children.every(child => selections.has(child.id));
+        const someChildrenSelected = mainEntity.children.some(child => selections.has(child.id));
+        return { indeterminate: someChildrenSelected, checked: allChildrenSelected };
+    }
+    return { indeterminate: false, checked: selections.has(entity.id) };
+};

package/esm/table/sortable/interfaces.d.ts

@@ -0,0 +1,18 @@
+export declare enum ColumnSortDirection {
+    Ascending = "asc",
+    Descending = "desc"
+}
+export interface ISortableValue {
+    sortColumn: string;
+    sortDirection: ColumnSortDirection;
+}
+export interface ISortableStorage {
+    getItem: () => ISortableValue | undefined;
+    setItem: (settings: ISortableValue) => void;
+    clear: () => void;
+}
+export interface ISortableExternalStorage {
+    getItem: (key: string) => string | undefined | null;
+    removeItem: (key: string) => void;
+    setItem: (key: string, settings: string) => void;
+}

package/esm/table/sortable/interfaces.js

@@ -0,0 +1,5 @@
+export var ColumnSortDirection;
+(function (ColumnSortDirection) {
+    ColumnSortDirection["Ascending"] = "asc";
+    ColumnSortDirection["Descending"] = "desc";
+})(ColumnSortDirection || (ColumnSortDirection = {}));

package/esm/table/sortable/sortableHeader.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { ColumnSortDirection, ISortableValue } from "./interfaces";
+import { ColumnSortDirection as ColumnSortDirectionTable } from "../table";
+interface ISortableHeaderCellProps {
+    columnName: string;
+    isSortedBy: boolean;
+    sortDirection: ColumnSortDirection | undefined;
+    initialSortDirection?: ColumnSortDirectionTable;
+    title: ReactNode;
+    tooltip: string;
+    onSortChange: (state: ISortableValue) => void;
+    isMobile?: boolean;
+}
+export declare const SortableHeaderCell: ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile, initialSortDirection }: ISortableHeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/table/sortable/sortableHeader.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { ColumnSortDirection } from "./interfaces";
+import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
+import { IconFilter3Asc } from "../../icons/iconFilter3Asc";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { IconFilter3Desc } from "../../icons/iconFilter3Desc";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+const getSortButtonTitle = (sortDirection, title, translate) => {
+    const titleTemplate = sortDirection === ColumnSortDirection.Descending ? "Sort by {COLUMN_NAME} descending" : "Sort by {COLUMN_NAME} ascending";
+    return translate(titleTemplate).replace("{COLUMN_NAME}", title);
+};
+const activeElementNames = new Set(["BUTTON", "A", "LABEL", "INPUT"]);
+const isActiveElement = (element) => activeElementNames.has(element.nodeName);
+const findParent = (element, className) => {
+    if (element.classList.contains(className)) {
+        return element;
+    }
+    if (isActiveElement(element)) {
+        return element;
+    }
+    if (!element.parentElement) {
+        return element;
+    }
+    return findParent(element.parentElement, className);
+};
+const isClickOnSortableParent = (element) => {
+    const parent = findParent(element, "zen-sortable-column-button");
+    return parent.classList.contains("zen-sortable-column-button") || parent.classList.contains("zen-sortable-column-button__dir-icon");
+};
+export const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false, initialSortDirection = ColumnSortDirection.Ascending }) => {
+    const { translate } = useLanguage();
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const isActive = isHovered || isFocused;
+    const iconTitleText = useMemo(() => {
+        switch (sortDirection) {
+            case ColumnSortDirection.Ascending: {
+                return ColumnSortDirection.Descending;
+            }
+            case ColumnSortDirection.Descending: {
+                return ColumnSortDirection.Ascending;
+            }
+            case undefined:
+            default:
+                return initialSortDirection;
+        }
+    }, [sortDirection, initialSortDirection]);
+    const iconTitle = getSortButtonTitle(iconTitleText, tooltip, translate);
+    const icon = useMemo(() => {
+        switch (sortDirection) {
+            case ColumnSortDirection.Ascending: {
+                return isActive ? IconFilter3Desc : IconFilter3Asc;
+            }
+            case ColumnSortDirection.Descending:
+                return isActive ? IconFilter3Asc : IconFilter3Desc;
+            case undefined:
+            default: {
+                return initialSortDirection === ColumnSortDirection.Ascending ? IconFilter3Asc : IconFilter3Desc;
+            }
+        }
+    }, [sortDirection, isActive, initialSortDirection]);
+    const iconButton = (_jsx(TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? ButtonIconPosition.Start : ButtonIconPosition.End, type: "tertiary-black", title: iconTitle }));
+    const onHeaderClick = useCallback((e) => {
+        const target = e && e.target;
+        if (!target) {
+            return;
+        }
+        if (isClickOnSortableParent(target)) {
+            onSortChange({
+                sortColumn: columnName,
+                sortDirection: sortDirection === undefined ? initialSortDirection :
+                    sortDirection === ColumnSortDirection.Ascending
+                        ? ColumnSortDirection.Descending
+                        : ColumnSortDirection.Ascending
+            });
+        }
+    }, [onSortChange, columnName, sortDirection, initialSortDirection]);
+    return (_jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: classNames([
+            "zen-sortable-column",
+            isSortedBy ? `zen-sortable-column--active` : "",
+            isMobile ? `zen-sortable-column--mobile` : ""
+        ]), children: _jsx("div", { className: classNames([
+                "zen-caption",
+                "zen-sortable-column__button",
+                "zen-sortable-column-button",
+                isSortedBy ? `zen-sortable-column-button--active` : "",
+                sortDirection === ColumnSortDirection.Ascending
+                    ? "zen-sortable-column-button--dir-asc"
+                    : "zen-sortable-column-button--dir-desc"
+            ]), title: iconTitle, "aria-label": iconTitle, onClick: onHeaderClick, children: _jsxs(_Fragment, { children: [isMobile ? iconButton : null, _jsx("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) }));
+};

package/esm/table/sortable/sortableStorage.d.ts

@@ -0,0 +1,10 @@
+import { ISortableStorage, ISortableValue } from "./interfaces";
+export declare class SortableColumnsStorage implements ISortableStorage {
+    private readonly defaultSortState?;
+    private readonly storeKey;
+    private readonly storage;
+    constructor(pageName: string, defaultSortState?: ISortableValue | undefined);
+    getItem(): ISortableValue | undefined;
+    setItem(s: ISortableValue): void;
+    clear(): void;
+}

package/esm/table/sortable/sortableStorage.js

@@ -0,0 +1,43 @@
+const STORAGE_PREFIX = "columnsSort_";
+export class SortableColumnsStorage {
+    constructor(pageName, defaultSortState) {
+        Object.defineProperty(this, "defaultSortState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: defaultSortState
+        });
+        Object.defineProperty(this, "storeKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "storage", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.storage = localStorage;
+        this.storeKey = `${STORAGE_PREFIX}${pageName}`;
+    }
+    getItem() {
+        const settings = this.storage.getItem(this.storeKey);
+        if (!settings) {
+            return this.defaultSortState;
+        }
+        try {
+            return JSON.parse(settings);
+        }
+        catch (e) {
+            return this.defaultSortState;
+        }
+    }
+    setItem(s) {
+        this.storage.setItem(this.storeKey, JSON.stringify(s));
+    }
+    clear() {
+        this.storage.removeItem(this.storeKey);
+    }
+}

package/esm/table/sortable/useSortableColumns.d.ts

@@ -0,0 +1,16 @@
+import { ISortableStorage, ISortableValue } from "./interfaces";
+import { IListColumn } from "../table";
+import "./sortableColumn.less";
+import { IRowEntity } from "../../dataGrid/row/row";
+import { IEntityWithId } from "../../commonHelpers/entity";
+export interface ISortableOptions {
+    pageName: string;
+    storage?: ISortableStorage;
+    value: ISortableValue | undefined;
+    onChange: (newSortSettings: ISortableValue) => void;
+}
+export declare const getSortableValue: (pageName: string, defaultValue?: ISortableValue) => ISortableValue | undefined;
+export declare const useSortableColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], sortable: ISortableOptions | undefined, isMobile: boolean) => {
+    sortableColumns: IListColumn<T, N>[];
+    feedSortControl: import("react/jsx-runtime").JSX.Element | null;
+};

package/esm/table/sortable/useSortableColumns.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { SortableColumnsStorage } from "./sortableStorage";
+import { SortableHeaderCell } from "./sortableHeader";
+import { ActionsColumn } from "../../dataGrid/columns/actionsColumn/actionsColumn";
+const SortableWrapperName = "Sortable";
+export const getSortableValue = (pageName, defaultValue) => {
+    const storage = new SortableColumnsStorage(pageName, defaultValue);
+    return storage.getItem();
+};
+export const useSortableColumns = (columns, sortable, isMobile) => {
+    const settingsStore = useMemo(() => (sortable === null || sortable === void 0 ? void 0 : sortable.storage) || new SortableColumnsStorage((sortable === null || sortable === void 0 ? void 0 : sortable.pageName) || ""), [sortable === null || sortable === void 0 ? void 0 : sortable.pageName, sortable === null || sortable === void 0 ? void 0 : sortable.storage]);
+    const sortSettings = useMemo(() => (sortable === null || sortable === void 0 ? void 0 : sortable.value) || settingsStore.getItem(), [settingsStore, sortable === null || sortable === void 0 ? void 0 : sortable.value]);
+    const saveSettingsToTheStore = useCallback((newSettings) => 
+    // not to block main thread this operation can be postponed
+    new Promise((resolve, reject) => {
+        setTimeout(() => {
+            try {
+                settingsStore.setItem(newSettings);
+                resolve();
+            }
+            catch (e) {
+                reject(e);
+            }
+        }, 0);
+    }), [settingsStore]);
+    const onSort = useCallback(async (newSortSettings) => {
+        await saveSettingsToTheStore(newSortSettings);
+        sortable === null || sortable === void 0 ? void 0 : sortable.onChange(newSortSettings);
+    }, [saveSettingsToTheStore, sortable]);
+    const sortableColumns = useMemo(() => {
+        if (!sortable) {
+            return columns;
+        }
+        return columns.map(column => {
+            const isSortable = column.sortable !== false && !(column.columnComponent instanceof ActionsColumn);
+            if (!isSortable) {
+                return column;
+            }
+            const isSortedBy = (sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn) === column.id;
+            const wrapper = {
+                name: SortableWrapperName,
+                renderHeader: (title) => {
+                    var _a;
+                    return _jsx(SortableHeaderCell, { columnName: column.id, isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: title, tooltip: column.title, onSortChange: onSort, initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection });
+                },
+                render: (value, _) => value
+            };
+            const columnWrappers = (column.wrappers || []).filter(w => w.name !== SortableWrapperName);
+            return Object.assign(Object.assign({}, column), { wrappers: [...columnWrappers, wrapper] });
+        });
+    }, [columns, onSort, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortDirection, sortable]);
+    const feedSortControl = useMemo(() => {
+        var _a;
+        if (!sortable) {
+            return null;
+        }
+        if (!isMobile) {
+            return null;
+        }
+        const column = columns[0];
+        const isSortedBy = (sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn) === column.id;
+        return _jsx(SortableHeaderCell, { columnName: column.id.toString(), isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: column.title, tooltip: column.title, onSortChange: onSort, isMobile: true, initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection });
+    }, [columns, isMobile, onSort, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortDirection, sortable]);
+    return { sortableColumns, feedSortControl };
+};