@geotab/zenith 1.24.1 → 1.24.2-beta.0

package/README.md

@@ -40,6 +40,15 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.24.2
+
+ * Add Summary component in Charts
+ * Fix Dropdown search in mobile view
+ * Add initial sorting order for table
+ * Fix Stepper issue with decimals
+ * Fix max banner width for XL size
+ * Fix sideEffect setting in package.json
+
 ### 1.24.1
 
 * Create `Summary` component

package/dist/chart/barChart.d.ts

@@ -3,12 +3,12 @@ import "./chart.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { Plugin } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
-import { IChartSummary } from "./chartSummary/chartSummary";
 import { IChartAxis } from "./chartAxis/chartAxis";
 import { IBarChartData, IBarChartOptions } from "./barChart/interfaces";
 import { ILegendOptions } from "./plugins/legend/interfaces";
 import { ITooltipOptions } from "./plugins/tooltip/interfaces";
 import { IChartInsight } from "./chartInsight/chartInsight";
+import { IChartSummary } from "./chartSummary/chartSummary";
 export interface IBarChart extends IZenComponentProps {
     data: IBarChartData;
     options?: IBarChartOptions;

package/dist/chart/barChart.js

@@ -24,7 +24,6 @@ const themeContext_1 = require("../utils/theme/themeContext");
 const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
-const chartSummary_1 = require("./chartSummary/chartSummary");
 const chartAxis_1 = require("./chartAxis/chartAxis");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const isDateRange_1 = require("./utils/isDateRange");
@@ -38,6 +37,7 @@ const useHidden_1 = require("./utils/useHidden");
 const tooltipPlugin_1 = require("./plugins/tooltip/tooltipPlugin");
 const chartInsight_1 = require("./chartInsight/chartInsight");
 const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
+const summary_1 = require("../summary/summary");
 auto_1.Chart.register(auto_1.BarController, auto_1.BarElement, auto_1.CategoryScale, auto_1.LinearScale);
 const BarChart = (_a) => {
     var { data, options = {}, axis, insight, summary, legend, tooltip, plugins, className } = _a, rest = __rest(_a, ["data", "options", "axis", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
@@ -78,7 +78,7 @@ const BarChart = (_a) => {
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), children: [insight
                 ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight))
                 : null, summary
-                ? (0, jsx_runtime_1.jsx)(chartSummary_1.ChartSummary, Object.assign({ onClick: toggleMainData, isHidden: isMainHidden }, intSummary))
+                ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary))
                 : null, xLabels || yLabels.length > 0
                 ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: xLabels, yLabels: yLabels })
                 : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId })] });

package/dist/chart/lineChart/useSummary.d.ts

@@ -1,15 +1,19 @@
 /// <reference types="react" />
-import { IChartSummary } from "../chartSummary/chartSummary";
 import { ILineChartData } from "./interfaces";
 import { IBarChartData } from "../barChart/interfaces";
 import { IPieChartData } from "../pieChart/interfaces";
-export declare const useSummary: (summary: IChartSummary | false | undefined, data: ILineChartData | IBarChartData | IPieChartData) => {
-    label: string | undefined;
+import { IChartSummary } from "../chartSummary/chartSummary";
+export declare const useSummary: (chartSummary: IChartSummary | false | undefined, data: ILineChartData | IBarChartData | IPieChartData) => {
+    title: string | undefined;
     value: string | number;
-    color: string;
+    color: string | undefined;
     unit?: string | undefined;
+    tooltip?: import("react").ReactNode;
     more?: import("react").ReactNode;
-    description?: string | undefined;
+    isEnabled?: boolean | undefined;
+    onToggle?: (() => void) | undefined;
+    description?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
+    label?: string | undefined;
     onClick?: (() => void) | undefined;
     isHidden?: boolean | undefined;
 };

package/dist/chart/lineChart/useSummary.js

@@ -2,7 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSummary = void 0;
 const react_1 = require("react");
-const useSummary = (summary, data) => {
+const mapChartSummaryToSummary = (chartSummary) => {
+    var _a;
+    const mappedSummary = {
+        value: (_a = chartSummary.value) !== null && _a !== void 0 ? _a : 0,
+        color: chartSummary.color,
+        title: chartSummary.label,
+        unit: chartSummary.unit,
+        description: chartSummary.description,
+        more: chartSummary.more,
+        onToggle: chartSummary.onClick,
+        isEnabled: chartSummary.isHidden
+    };
+    return mappedSummary;
+};
+const useSummary = (chartSummary, data) => {
+    const summary = (0, react_1.useMemo)(() => chartSummary ? Object.assign(Object.assign({}, chartSummary), mapChartSummaryToSummary(chartSummary)) : false, [chartSummary]);
     const value = (0, react_1.useMemo)(() => {
         if (summary && summary.value) {
             return summary.value;
@@ -36,15 +51,15 @@ const useSummary = (summary, data) => {
         }
         return data.datasets[0] && typeof data.datasets[0].borderColor === "string"
             ? data.datasets[0].borderColor
-            : "#2853BD";
+            : (summary && summary.title) ? "#2853BD" : undefined;
     }, [data.datasets, summary]);
-    const label = (0, react_1.useMemo)(() => {
-        if (summary && summary.label) {
-            return summary.label;
+    const title = (0, react_1.useMemo)(() => {
+        if (summary && summary.title) {
+            return summary.title;
         }
         return data.datasets[0] ? data.datasets[0].label : undefined;
     }, [summary, data.datasets]);
-    return Object.assign(Object.assign({}, summary), { label,
+    return Object.assign(Object.assign({}, summary), { title,
         value,
         color });
 };

package/dist/chart/lineChart.d.ts

@@ -4,11 +4,11 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { Plugin } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
 import { IChartAxis } from "./chartAxis/chartAxis";
-import { IChartSummary } from "./chartSummary/chartSummary";
 import { ILineChartOptions, ILineChartData } from "./lineChart/interfaces";
 import { ILegendOptions } from "./plugins/legend/interfaces";
 import { ILineOptions } from "./plugins/linePlugin/interfaces";
 import { IChartInsight } from "./chartInsight/chartInsight";
+import { IChartSummary } from "./chartSummary/chartSummary";
 export interface ILineChart extends IZenComponentProps {
     data: ILineChartData;
     options?: ILineChartOptions;

package/dist/chart/lineChart.js

@@ -26,7 +26,6 @@ const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartAxis_1 = require("./chartAxis/chartAxis");
-const chartSummary_1 = require("./chartSummary/chartSummary");
 const isDateRange_1 = require("./utils/isDateRange");
 const convertDates_1 = require("./utils/convertDates");
 const useSummary_1 = require("./lineChart/useSummary");
@@ -40,6 +39,7 @@ const useChartTicks_1 = require("./lineChart/useChartTicks");
 const chartInsight_1 = require("./chartInsight/chartInsight");
 const getXAxisMeta_1 = require("./utils/getXAxisMeta");
 const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
+const summary_1 = require("../summary/summary");
 auto_1.Chart.register(auto_1.CategoryScale, auto_1.LinearScale, auto_1.PointElement, auto_1.LineElement, auto_1.Title, auto_1.Tooltip, auto_1.Legend, auto_1.Filler, auto_1.TimeScale);
 const LineChart = (_a) => {
     var { data, options = {}, axis, insight, summary, legend, tooltip, plugins, className } = _a, rest = __rest(_a, ["data", "options", "axis", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
@@ -88,7 +88,7 @@ const LineChart = (_a) => {
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), ref: chartRef, children: [insight
                 ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight))
                 : null, summary !== false
-                ? (0, jsx_runtime_1.jsx)(chartSummary_1.ChartSummary, Object.assign({}, intSummary, { onClick: toggleMainDataset, isHidden: isMainHidden }))
+                ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden }))
                 : null, xLabels || yLabels.length > 0
                 ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: xLabels, yLabels: yLabels })
                 : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId })] });

package/dist/chart/pieChart.d.ts

@@ -4,10 +4,10 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { Plugin } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
 import { IPieChartData, IPieChartOptions } from "./pieChart/interfaces";
-import { IChartSummary } from "./chartSummary/chartSummary";
 import { ILegendOptions } from "./plugins/legend/interfaces";
 import { ITooltipOptions } from "./plugins/tooltip/interfaces";
 import { IChartInsight } from "./chartInsight/chartInsight";
+import { IChartSummary } from "./chartSummary/chartSummary";
 export interface IPieChart extends IZenComponentProps {
     data: IPieChartData;
     options?: IPieChartOptions;

package/dist/chart/pieChart.js

@@ -24,13 +24,13 @@ const themeContext_1 = require("../utils/theme/themeContext");
 const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
-const chartSummary_1 = require("./chartSummary/chartSummary");
 const useSummary_1 = require("./lineChart/useSummary");
 const getDefaultOptions_1 = require("./pieChart/getDefaultOptions");
 const getDefaultDatasetStyle_1 = require("./pieChart/getDefaultDatasetStyle");
 const useHidden_1 = require("./utils/useHidden");
 const tooltipPlugin_1 = require("./plugins/tooltip/tooltipPlugin");
 const chartInsight_1 = require("./chartInsight/chartInsight");
+const summary_1 = require("../summary/summary");
 auto_1.Chart.register(auto_1.PieController, auto_1.ArcElement);
 const PieChart = (_a) => {
     var { data, options = {}, insight, summary, legend, tooltip, plugins, className } = _a, rest = __rest(_a, ["data", "options", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
@@ -63,7 +63,7 @@ const PieChart = (_a) => {
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), children: [insight
                 ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight))
                 : null, summary
-                ? (0, jsx_runtime_1.jsx)(chartSummary_1.ChartSummary, Object.assign({}, intSummary))
+                ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary))
                 : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId })] });
 };
 exports.PieChart = PieChart;

package/dist/dataFeed/dataFeedHeader/dataFeedHeader.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sortableColumnWrapper_1 = require("../../dataGrid/withSortableColumns/columns/sortableColumnWrapper");
 const columnSortDirection_1 = require("../../dataGrid/withSortableColumns/columns/columnSortDirection");
 const DataFeedHeader = ({ column, sortState, className, onSortChange }) => {
-    var _a;
+    var _a, _b;
     const isSortedBy = (sortState === null || sortState === void 0 ? void 0 : sortState.sortColumn) === column.id;
-    return (0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(sortableColumnWrapper_1.SortableHeaderCell, { columnName: ((_a = column.name) === null || _a === void 0 ? void 0 : _a.toString()) || column.id.toString(), isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortState.sortDirection : columnSortDirection_1.ColumnSortDirection.None, title: column.title, tooltip: column.title, onSortChange: onSortChange, isMobile: true }) });
+    return (0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(sortableColumnWrapper_1.SortableHeaderCell, { columnName: ((_a = column.name) === null || _a === void 0 ? void 0 : _a.toString()) || column.id.toString(), isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortState.sortDirection : columnSortDirection_1.ColumnSortDirection.None, title: column.title, tooltip: column.title, onSortChange: onSortChange, isMobile: true, initialSortDirection: (_b = column.meta) === null || _b === void 0 ? void 0 : _b.initialSortDirection }) });
 };
 exports.DataFeedHeader = DataFeedHeader;

package/dist/dataGrid/listColumn.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from "react";
+import { ColumnSortDirection } from "./withSortableColumns/columns/columnSortDirection";
 export interface IListColumnMeta<T> {
     readonly defaultWidth?: number;
     readonly defaultValue?: string;
     readonly lazyLoad?: boolean;
     readonly visibleOnHover?: boolean;
+    readonly initialSortDirection?: ColumnSortDirection.Ascending | ColumnSortDirection.Descending;
     readonly renderPlaceholder?: (entity: T) => ReactNode;
     readonly renderFeedPlaceholder?: (title: ReactNode, entity: T) => [ReactNode, ReactNode];
 }

package/dist/dataGrid/withSortableColumns/columns/sortableColumnWrapper.d.ts

@@ -6,6 +6,7 @@ import { ColumnSortDirection } from "./columnSortDirection";
 interface ISortableColumnOptions {
     isSortedBy: boolean;
     sortDirection: ColumnSortDirection;
+    initialSortDirection?: ColumnSortDirection.Ascending | ColumnSortDirection.Descending;
     /**
     * @deprecated
     * @param translate - will be removed in the next major release
@@ -20,6 +21,7 @@ interface ISortableHeaderCellProps {
     tooltip: string;
     onSortChange: (state: ISortableColumnSettings) => void;
     isMobile?: boolean;
+    initialSortDirection?: ColumnSortDirection.Ascending | ColumnSortDirection.Descending;
 }
 export declare const SortableHeaderCell: FC<ISortableHeaderCellProps>;
 export declare class SortableColumnWrapper<T> implements IListColumnWrapper<T> {

package/dist/dataGrid/withSortableColumns/columns/sortableColumnWrapper.js

@@ -14,28 +14,38 @@ const getSortButtonTitle = (sortDirection, title, translate) => {
     const titleTemplate = sortDirection === columnSortDirection_1.ColumnSortDirection.Descending ? "Sort by {COLUMN_NAME} descending" : "Sort by {COLUMN_NAME} ascending";
     return translate(titleTemplate).replace("{COLUMN_NAME}", title);
 };
-const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false }) => {
+const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false, initialSortDirection = columnSortDirection_1.ColumnSortDirection.Ascending }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isActive = isHovered || isFocused;
-    const iconTitle = getSortButtonTitle(isActive
-        ? sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
-            ? columnSortDirection_1.ColumnSortDirection.Descending
-            : columnSortDirection_1.ColumnSortDirection.Ascending
-        : sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
-            ? columnSortDirection_1.ColumnSortDirection.Descending
-            : columnSortDirection_1.ColumnSortDirection.Ascending, tooltip, translate);
+    const iconTitleText = (0, react_1.useMemo)(() => {
+        switch (sortDirection) {
+            case columnSortDirection_1.ColumnSortDirection.Ascending: {
+                return columnSortDirection_1.ColumnSortDirection.Descending;
+            }
+            case columnSortDirection_1.ColumnSortDirection.Descending: {
+                return columnSortDirection_1.ColumnSortDirection.Ascending;
+            }
+            case undefined:
+            default:
+                return initialSortDirection;
+        }
+    }, [sortDirection, initialSortDirection]);
+    const iconTitle = getSortButtonTitle(iconTitleText, tooltip, translate);
     const icon = (0, react_1.useMemo)(() => {
-        if (isActive) {
-            return sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
-                ? iconFilter3Desc_1.IconFilter3Desc
-                : iconFilter3Asc_1.IconFilter3Asc;
+        switch (sortDirection) {
+            case columnSortDirection_1.ColumnSortDirection.Ascending: {
+                return isActive ? iconFilter3Desc_1.IconFilter3Desc : iconFilter3Asc_1.IconFilter3Asc;
+            }
+            case columnSortDirection_1.ColumnSortDirection.Descending:
+                return isActive ? iconFilter3Asc_1.IconFilter3Asc : iconFilter3Desc_1.IconFilter3Desc;
+            case undefined:
+            default: {
+                return initialSortDirection === columnSortDirection_1.ColumnSortDirection.Ascending ? iconFilter3Asc_1.IconFilter3Asc : iconFilter3Desc_1.IconFilter3Desc;
+            }
         }
-        return sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
-            ? iconFilter3Asc_1.IconFilter3Asc
-            : iconFilter3Desc_1.IconFilter3Desc;
-    }, [sortDirection, isActive]);
+    }, [sortDirection, isActive, initialSortDirection]);
     const iconButton = ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? textIconButton_1.ButtonIconPosition.Start : textIconButton_1.ButtonIconPosition.End, type: buttonType_1.ButtonType.TertiaryBlack, title: iconTitle }));
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
             "zen-sortable-column",
@@ -52,9 +62,10 @@ const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tool
             ]), title: iconTitle, "aria-label": iconTitle, onClick: () => {
                 onSortChange({
                     sortColumn: columnName,
-                    sortDirection: sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
-                        ? columnSortDirection_1.ColumnSortDirection.Descending
-                        : columnSortDirection_1.ColumnSortDirection.Ascending
+                    sortDirection: sortDirection === columnSortDirection_1.ColumnSortDirection.None ? initialSortDirection :
+                        sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
+                            ? columnSortDirection_1.ColumnSortDirection.Descending
+                            : columnSortDirection_1.ColumnSortDirection.Ascending
                 });
             }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile ? iconButton : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) }));
 };
@@ -87,7 +98,7 @@ class SortableColumnWrapper {
         });
     }
     renderHeader(title) {
-        return (0, jsx_runtime_1.jsx)(exports.SortableHeaderCell, { columnName: this.columnName, isSortedBy: this.options.isSortedBy === undefined ? false : this.options.isSortedBy, sortDirection: this.options.sortDirection || columnSortDirection_1.ColumnSortDirection.None, title: title, tooltip: this.columnTitle, onSortChange: this.onSort });
+        return (0, jsx_runtime_1.jsx)(exports.SortableHeaderCell, { columnName: this.columnName, isSortedBy: this.options.isSortedBy === undefined ? false : this.options.isSortedBy, sortDirection: this.options.sortDirection || columnSortDirection_1.ColumnSortDirection.None, title: title, tooltip: this.columnTitle, onSortChange: this.onSort, initialSortDirection: this.options.initialSortDirection });
     }
     render(value, _) {
         return value;

package/dist/dataGrid/withSortableColumns/withSortableColumns.js

@@ -17,7 +17,10 @@ function InnerColumnsList(props, ref) {
     var _a, _b;
     const { columns, options, onSortChange } = props;
     const settingsStore = (0, react_1.useMemo)(() => { var _a, _b; return new sortableColumnsStorage_1.SortableColumnsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage); }, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
-    const allColumns = (0, react_1.useMemo)(() => columns.map(column => (Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), { isSortable: column.isSortable }))), [columns]);
+    const allColumns = (0, react_1.useMemo)(() => columns.map(column => {
+        var _a;
+        return (Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), { isSortable: column.isSortable, initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection }));
+    }), [columns]);
     const sortSettings = (0, react_1.useMemo)(() => options.sortOptions || settingsStore.getItem(), [options.sortOptions, settingsStore]);
     const saveSettingsToTheStore = (0, react_1.useCallback)((newSettings) => 
     // not to block main thread this operation can be postponed
@@ -44,7 +47,8 @@ function InnerColumnsList(props, ref) {
                 ...wrappers,
                 new sortableColumnWrapper_1.SortableColumnWrapper(column.name, {
                     isSortedBy,
-                    sortDirection: isSortedBy ? sortSettings.sortDirection : columnSortDirection_1.ColumnSortDirection.None
+                    sortDirection: isSortedBy ? sortSettings.sortDirection : columnSortDirection_1.ColumnSortDirection.None,
+                    initialSortDirection: column.initialSortDirection
                 }, column.title, onSort)
             ] }));
     }), [allColumns, sortSettings, onSort]);

package/dist/header/header.js

@@ -103,6 +103,12 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
         setIsFilterHidden(isDownDirection);
     }, [getPreviousScrollPosition, previousScrollPosition, headerRef]);
     const handleScroll = (0, useThrottle_1.useThrottle)((e) => {
+        var _a;
+        const isKeyboardLikelyOpen = ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches("input, textarea, [contenteditable]")) || false;
+        const isMobileFilterOpen = (mobileFilterTrigger === null || mobileFilterTrigger === void 0 ? void 0 : mobileFilterTrigger.current) && mobileFilterTrigger.current.getAttribute("aria-expanded") === "true" || false;
+        if (isMobileFilterOpen || isKeyboardLikelyOpen) {
+            return;
+        }
         scrollCallback(e);
     }, 200);
     (0, react_1.useEffect)(() => {

package/dist/index.css

@@ -4794,6 +4794,7 @@
   align-items: center;
   text-align: center;
   overflow: hidden;
+  justify-content: center;
 }
 .zen-banner__content--XXL {
   max-width: unset;
@@ -4846,9 +4847,12 @@
 .zen-banner__block--multiline {
   height: unset;
 }
-.zen-banner__block--XXL,
+.zen-banner__block--XXL {
+  max-width: 100%;
+}
 .zen-banner__block--XL {
   max-width: 100%;
+  justify-content: center;
 }
 .zen-banner__block--L {
   max-width: 1136px;
@@ -6622,6 +6626,131 @@
   line-height: 32px;
   color: var(--text-primary);
 }
+.zen-summary {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  box-sizing: border-box;
+  background-color: var(--backgrounds-content-1);
+  background: var(--backgrounds-main);
+  border-radius: 8px;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  text-transform: none;
+  width: fit-content;
+  max-width: 240px;
+}
+.zen-summary * {
+  box-sizing: border-box;
+}
+.zen-summary__header,
+.zen-summary__data,
+.zen-summary__content {
+  width: 100%;
+  min-width: 0;
+}
+.zen-summary__header {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  align-items: center;
+  color: var(--text-secondary);
+  display: inline-flex;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.zen-summary__crossed-out {
+  text-decoration: line-through;
+}
+.zen-summary__color {
+  border: none;
+  border-radius: 50%;
+  display: inline-block;
+  height: 8px;
+  margin: 2px 2px;
+  min-height: 8px;
+  min-width: 8px;
+  padding-inline: 0;
+  text-align: center;
+  text-decoration: none;
+  width: 8px;
+}
+button.zen-summary__clickable {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  outline: inherit;
+}
+.zen-summary__clickable {
+  cursor: pointer;
+}
+.zen-summary__trigger {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  fill: var(--text-secondary);
+  justify-content: center;
+}
+.zen-summary__data {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  justify-content: left;
+}
+.zen-summary__value,
+.zen-summary__unit {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  font-feature-settings: 'liga' off, 'clig' off;
+}
+.zen-summary__value {
+  font-family: var(--main-font-data);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 32px;
+  text-transform: none;
+  color: var(--text-primary);
+}
+.zen-summary__unit,
+.zen-summary__content {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-secondary);
+}
+.zen-summary__content {
+  margin-top: 8px;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.zen-summary__more {
+  flex: 1;
+}
 .zen-chart-tooltip {
   box-sizing: border-box;
   padding: 12px 16px;
@@ -13336,132 +13465,6 @@
 .zen-stepper-field.zen-stepper-field--drive-tablet.zen-stepper-field--drive-tablet .zen-text-input {
   padding-right: 25px;
 }
-.zen-summary {
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  box-sizing: border-box;
-  background-color: var(--backgrounds-content-1);
-  background: var(--backgrounds-main);
-  border-radius: 8px;
-  color: var(--text-primary);
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  text-transform: none;
-  width: fit-content;
-  max-width: 240px;
-}
-.zen-summary * {
-  box-sizing: border-box;
-}
-.zen-summary__header,
-.zen-summary__data,
-.zen-summary__content {
-  width: 100%;
-  min-width: 0;
-}
-.zen-summary__header {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  align-items: center;
-  color: var(--text-secondary);
-  display: inline-flex;
-  gap: 4px;
-  margin-bottom: 8px;
-}
-.zen-summary__crossed-out {
-  text-decoration: line-through;
-}
-.zen-summary__color {
-  border: none;
-  border-radius: 50%;
-  display: inline-block;
-  height: 8px;
-  margin: 2px 2px;
-  min-height: 8px;
-  min-width: 8px;
-  padding-inline: 0;
-  text-align: center;
-  text-decoration: none;
-  width: 8px;
-}
-button.zen-summary__clickable {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  outline: inherit;
-}
-.zen-summary__clickable {
-  cursor: pointer;
-}
-.zen-summary__trigger {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  fill: var(--text-secondary);
-  justify-content: center;
-}
-.zen-summary__data {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-  justify-content: left;
-}
-.zen-summary__value,
-.zen-summary__unit {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  font-feature-settings: 'liga' off, 'clig' off;
-}
-.zen-summary__value {
-  font-family: var(--main-font-data);
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 32px;
-  text-transform: none;
-  color: var(--text-primary);
-}
-.zen-summary__unit,
-.zen-summary__content {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-secondary);
-}
-.zen-summary__content {
-  margin-top: 8px;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.zen-summary__more {
-  flex: 1;
-}
 .zen-summaries__row {
   display: flex;
   align-items: top;

package/dist/stepperRaw/utils/calculateWithPrecision.d.ts

@@ -0,0 +1 @@
+export declare const calculateWithPrecision: (value: number, step: number, isAddition?: boolean) => number;

package/dist/stepperRaw/utils/calculateWithPrecision.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateWithPrecision = void 0;
+const countDecimals_1 = require("./countDecimals");
+const calculateWithPrecision = (value, step, isAddition = true) => {
+    // Get the number of decimal places for both numbers
+    const decimals1 = (0, countDecimals_1.countDecimals)(value);
+    const decimals2 = (0, countDecimals_1.countDecimals)(step);
+    // Find the maximum number of decimal places
+    const maxDecimals = Math.max(decimals1, decimals2);
+    // Calculate the scale factor (e.g., 100 for 2 decimals, 1000 for 3)
+    const scaleFactor = Math.pow(10, maxDecimals);
+    // Convert to integers, perform the addition, and scale back
+    const integerValue = Math.round(value * scaleFactor);
+    const integerStep = Math.round(step * scaleFactor);
+    const result = isAddition
+        ? (integerValue + integerStep) / scaleFactor
+        : (integerValue - integerStep) / scaleFactor;
+    return result;
+};
+exports.calculateWithPrecision = calculateWithPrecision;

package/dist/stepperRaw/utils/countDecimals.d.ts

@@ -0,0 +1 @@
+export declare const countDecimals: (num: unknown) => number;

package/dist/stepperRaw/utils/countDecimals.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.countDecimals = void 0;
+const countDecimals = (num) => {
+    var _a;
+    if (typeof num !== "number") {
+        return 0;
+    }
+    if (Math.floor(num) === num) {
+        return 0;
+    }
+    return ((_a = num.toString().split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) || 0;
+};
+exports.countDecimals = countDecimals;

package/dist/stepperRaw/utils/getDecreasedValue.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDecreasedValue = void 0;
+const calculateWithPrecision_1 = require("./calculateWithPrecision");
 const getDecreasedValue = (value, step, min) => {
-    const decreasedValue = (Number(value) || 0) - step;
+    const decreasedValue = (0, calculateWithPrecision_1.calculateWithPrecision)(Number(value) || 0, step, false);
     return decreasedValue < min ? min : decreasedValue;
 };
 exports.getDecreasedValue = getDecreasedValue;

package/dist/stepperRaw/utils/getIncreasedValue.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIncreasedValue = void 0;
+const calculateWithPrecision_1 = require("./calculateWithPrecision");
 const getIncreasedValue = (value, step, max) => {
-    const increasedValue = (Number(value) || 0) + step;
+    const increasedValue = (0, calculateWithPrecision_1.calculateWithPrecision)(Number(value) || 0, step);
     return increasedValue > max ? max : increasedValue;
 };
 exports.getIncreasedValue = getIncreasedValue;

package/dist/summaries/summaries.d.ts

@@ -4,7 +4,7 @@ import "./summaries.less";
 type SummariesType = "row" | "column" | "two-columns";
 interface ISummaries {
     children: ReactElement<ISummary>[];
-    type: SummariesType;
+    type?: SummariesType;
 }
 export declare const Summaries: React.FC<ISummaries>;
 export {};

package/dist/summaries/summaries.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Summaries = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const splitIntoPairs_1 = require("./utils/splitIntoPairs");
-const Summaries = ({ type, children }) => {
+const Summaries = ({ type = "row", children }) => {
     if (type === "two-columns") {
         return (0, jsx_runtime_1.jsx)("div", { className: `zen-summaries__${type}`, children: (0, splitIntoPairs_1.splitIntoPairs)(children).map((pair, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "zen-summaries__two-columns-container", children: [pair[0], pair[1]] }, `summaries-item-${index}`))) });
     }

package/dist/summary/summary.d.ts

@@ -5,7 +5,7 @@ export interface ISummary {
     title?: string;
     value: string | number;
     unit?: string;
-    tooltip?: React.ReactNode;
+    tooltip?: ReactNode;
     more?: ReactNode;
     isEnabled?: boolean;
     onToggle?: () => void;

package/dist/summary/summary.js

@@ -12,6 +12,6 @@ const Summary = ({ color, title, value, unit, tooltip, more, isEnabled, onToggle
     const { translate } = (0, useLanguage_1.useLanguage)();
     return (0, jsx_runtime_1.jsxs)("div", { className: "zen-summary", children: [(color || title || tooltip) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-summary__header", children: [color && (0, jsx_runtime_1.jsx)("button", { "aria-label": translate("Summary color"), className: (0, classNames_1.classNames)(["zen-summary__color", isClickable ? "zen-summary__clickable" : ""]), style: { backgroundColor: color }, onClick: onToggle }), isClickable ?
                         (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)(["zen-summary__title-text zen-ellipsis heading-05 zen-summary__clickable", isEnabled ? "zen-summary__crossed-out" : ""]), onClick: onToggle, children: title }) :
-                        (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__title-text zen-ellipsis heading-05", children: title }), tooltip && (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { alignment: "top", size: "auto", trigger: (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__trigger", children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, { size: "large", className: "zen-summary__title-icon" }) }), children: tooltip })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-summary__data", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-summary__value zen-ellipsis", children: value }), unit && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__unit", children: unit }), more && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__more zen-ellipsis", children: more })] }), description && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__content", children: description })] });
+                        (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__title-text zen-ellipsis heading-05", children: title }), tooltip && (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { alignment: "top", size: "auto", trigger: (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__trigger", children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, { size: "large", className: "zen-summary__title-icon" }) }), children: tooltip })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-summary__data", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-summary__value zen-ellipsis", children: typeof value === "string" ? value : value.toFixed(2) }), unit && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__unit", children: unit }), more && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__more zen-ellipsis", children: more })] }), description && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__content", children: description })] });
 };
 exports.Summary = Summary;

package/dist/table/loading/useLoading.d.ts

@@ -16,6 +16,7 @@ export declare const useLoading: <T extends IEntityWithId>(columns: IListColumn<
             renderPlaceholder: () => import("react/jsx-runtime").JSX.Element;
             renderFeedPlaceholder: (_: ReactNode) => [ReactNode, ReactNode];
             defaultWidth?: number | undefined;
+            initialSortDirection?: import("../table").ColumnSortDirection | undefined;
         };
         columnComponent: {
             render: (entity: T & ILoadingEntity) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | PromiseLike<ReactNode> | null | undefined;

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

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

package/dist/table/sortable/sortableHeader.js

@@ -31,28 +31,38 @@ 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");
 };
-const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false }) => {
+const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false, initialSortDirection = interfaces_1.ColumnSortDirection.Ascending }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isActive = isHovered || isFocused;
-    const iconTitle = getSortButtonTitle(isActive
-        ? sortDirection === interfaces_1.ColumnSortDirection.Ascending
-            ? interfaces_1.ColumnSortDirection.Descending
-            : interfaces_1.ColumnSortDirection.Ascending
-        : sortDirection === interfaces_1.ColumnSortDirection.Ascending
-            ? interfaces_1.ColumnSortDirection.Descending
-            : interfaces_1.ColumnSortDirection.Ascending, tooltip, translate);
+    const iconTitleText = (0, react_1.useMemo)(() => {
+        switch (sortDirection) {
+            case interfaces_1.ColumnSortDirection.Ascending: {
+                return interfaces_1.ColumnSortDirection.Descending;
+            }
+            case interfaces_1.ColumnSortDirection.Descending: {
+                return interfaces_1.ColumnSortDirection.Ascending;
+            }
+            case undefined:
+            default:
+                return initialSortDirection;
+        }
+    }, [sortDirection, initialSortDirection]);
+    const iconTitle = getSortButtonTitle(iconTitleText, tooltip, translate);
     const icon = (0, react_1.useMemo)(() => {
-        if (isActive) {
-            return sortDirection === interfaces_1.ColumnSortDirection.Ascending
-                ? iconFilter3Desc_1.IconFilter3Desc
-                : iconFilter3Asc_1.IconFilter3Asc;
+        switch (sortDirection) {
+            case interfaces_1.ColumnSortDirection.Ascending: {
+                return isActive ? iconFilter3Desc_1.IconFilter3Desc : iconFilter3Asc_1.IconFilter3Asc;
+            }
+            case interfaces_1.ColumnSortDirection.Descending:
+                return isActive ? iconFilter3Asc_1.IconFilter3Asc : iconFilter3Desc_1.IconFilter3Desc;
+            case undefined:
+            default: {
+                return initialSortDirection === interfaces_1.ColumnSortDirection.Ascending ? iconFilter3Asc_1.IconFilter3Asc : iconFilter3Desc_1.IconFilter3Desc;
+            }
         }
-        return sortDirection === interfaces_1.ColumnSortDirection.Ascending
-            ? iconFilter3Asc_1.IconFilter3Asc
-            : iconFilter3Desc_1.IconFilter3Desc;
-    }, [sortDirection, isActive]);
+    }, [sortDirection, isActive, initialSortDirection]);
     const iconButton = ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? textIconButton_1.ButtonIconPosition.Start : textIconButton_1.ButtonIconPosition.End, type: "tertiary-black", title: iconTitle }));
     const onHeaderClick = (0, react_1.useCallback)((e) => {
         const target = e && e.target;
@@ -62,12 +72,13 @@ const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tool
         if (isClickOnSortableParent(target)) {
             onSortChange({
                 sortColumn: columnName,
-                sortDirection: sortDirection === interfaces_1.ColumnSortDirection.Ascending
-                    ? interfaces_1.ColumnSortDirection.Descending
-                    : interfaces_1.ColumnSortDirection.Ascending
+                sortDirection: sortDirection === undefined ? initialSortDirection :
+                    sortDirection === interfaces_1.ColumnSortDirection.Ascending
+                        ? interfaces_1.ColumnSortDirection.Descending
+                        : interfaces_1.ColumnSortDirection.Ascending
             });
         }
-    }, [columnName, sortDirection, onSortChange]);
+    }, [onSortChange, columnName, sortDirection, initialSortDirection]);
     return ((0, jsx_runtime_1.jsx)("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: (0, classNames_1.classNames)([
             "zen-sortable-column",
             isSortedBy ? `zen-sortable-column--active` : "",

package/dist/table/sortable/useSortableColumns.js

@@ -44,7 +44,10 @@ const useSortableColumns = (columns, sortable, isMobile) => {
             const isSortedBy = (sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn) === column.id;
             const wrapper = {
                 name: SortableWrapperName,
-                renderHeader: (title) => (0, jsx_runtime_1.jsx)(sortableHeader_1.SortableHeaderCell, { columnName: column.id, isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: title, tooltip: column.title, onSortChange: onSort }),
+                renderHeader: (title) => {
+                    var _a;
+                    return (0, jsx_runtime_1.jsx)(sortableHeader_1.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);
@@ -52,6 +55,7 @@ const useSortableColumns = (columns, sortable, isMobile) => {
         });
     }, [columns, onSort, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortDirection, sortable]);
     const feedSortControl = (0, react_1.useMemo)(() => {
+        var _a;
         if (!sortable) {
             return null;
         }
@@ -60,7 +64,7 @@ const useSortableColumns = (columns, sortable, isMobile) => {
         }
         const column = columns[0];
         const isSortedBy = (sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn) === column.id;
-        return (0, jsx_runtime_1.jsx)(sortableHeader_1.SortableHeaderCell, { columnName: column.id.toString(), isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: column.title, tooltip: column.title, onSortChange: onSort, isMobile: true });
+        return (0, jsx_runtime_1.jsx)(sortableHeader_1.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 };
 };

package/dist/table/table.d.ts

@@ -31,6 +31,7 @@ export interface IListColumn<T> {
         defaultWidth?: number;
         readonly renderPlaceholder?: (entity: T) => ReactNode;
         readonly renderFeedPlaceholder?: (title: ReactNode, entity: T) => [ReactNode, ReactNode];
+        readonly initialSortDirection?: ColumnSortDirection;
     };
     columnComponent?: IListColumnBasic<T>;
     wrappers?: IListColumnWrapper<T>[];

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@geotab/zenith",
-  "version": "1.24.1",
+  "version": "1.24.2-beta.0",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": [
-     "**/*.css"
+    "**/*.css",
+    "**/*.less"
   ],
   "module": "dist/index.js",
   "scripts": {
@@ -46,6 +47,7 @@
     "@storybook/react": "^8.5.8",
     "@storybook/react-webpack5": "^8.5.8",
     "@storybook/theming": "^8.5.8",
+    "@storybook/test": "^8.5.8",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.73",
@@ -71,7 +73,6 @@
     "xml2js": "^0.6.0"
   },
   "dependencies": {
-    "@storybook/test": "^8.5.8",
     "chart.js": "^4.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -97,6 +98,6 @@
     ]
   },
   "publishConfig": {
-   "access": "public"
- }
+    "access": "public"
+  }
 }