@geotab/zenith 1.23.0 → 1.24.0

package/dist/index.d.ts

@@ -647,6 +647,8 @@ export { type TLazyContent, type TPromisableProps, LazyContent } from "./skeleto
 export { type TSkeletonType, type ISkeleton, Skeleton } from "./skeleton/skeleton";
 export { SortDirections, type ISortControl, SortControl } from "./sortControl/sortControl";
 export { type IStepperInput, Stepper } from "./stepper/stepper";
+export { Summaries } from "./summaries/summaries";
+export { type ISummary, Summary } from "./summary/summary";
 export { SummaryTileType, SummaryTileSize, type ISummaryTile, SummaryTileDisplayName, SummaryTile } from "./summaryTile/summaryTile";
 export { type ISummaryTileTrigger, SummaryTileTrigger } from "./summaryTile/summaryTileTrigger";
 export { getTypeClassName } from "./summaryTile/utils/getTypeClassName";
@@ -668,6 +670,7 @@ export { calculateArrowPosition } from "./tooltip/helpers/calculateArrowPosition
 export { removeArrowClasses } from "./tooltip/helpers/removeArrowClasses";
 export { type TooltipSize, type TMobileView, Tooltip } from "./tooltip/tooltip";
 export { type IAbortablePromiseOptions, type IAbortablePromiseConstructor, AbortablePromise } from "./utils/abortablePromise";
+export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvider";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";

package/dist/index.js

@@ -14,8 +14,8 @@ exports.IconPrinter = exports.IconPound = exports.IconPlusSquare = exports.IconP
 exports.IconSmiley = exports.IconSign = exports.IconSidebar = exports.IconShield4 = exports.IconShield3 = exports.IconShield2 = exports.IconShield = exports.IconShare3 = exports.IconShare2 = exports.IconShare = exports.IconSettings8 = exports.IconSettings7 = exports.IconSettings6 = exports.IconSettings4 = exports.IconSettings3 = exports.IconSettings2 = exports.IconSettings1 = exports.IconServer3 = exports.IconServer2 = exports.IconServer = exports.IconSend = exports.IconSecuredLines = exports.IconSecured = exports.IconSeatbelt = exports.IconSearchPage = exports.IconSearchLines = exports.IconSearchDocument = exports.IconSearch = exports.IconSdCard = exports.IconRuler = exports.IconRoute = exports.IconRotateRepeat2 = exports.IconRotateRepeat = exports.IconRotateCounterclockwise = exports.IconRotateClockwise = exports.IconResizeSmall = exports.IconResizeBig = exports.IconRepeat2 = exports.IconRepeat = exports.IconRemovePeople = exports.IconRefrigeration = exports.IconRedo2 = exports.IconRedo = exports.IconRecord = exports.IconReceipt = exports.IconRadar = exports.IconQuestion = exports.IconPuzzle = exports.IconPullRequest = exports.IconProcessor = void 0;
 exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeOf = exports.IconVolumeMinimum = exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTrailer = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSquare = exports.IconSpeaker = exports.IconSortVertical = exports.IconSortHorizontal = exports.IconSort2Vertical = exports.IconSort2Horizontal = void 0;
 exports.PageContentLayout = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageNothingFound = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = void 0;
-exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.LanguageProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = void 0;
+exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.LanguageProvider = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1382,6 +1382,10 @@ Object.defineProperty(exports, "SortDirections", { enumerable: true, get: functi
 Object.defineProperty(exports, "SortControl", { enumerable: true, get: function () { return sortControl_1.SortControl; } });
 var stepper_1 = require("./stepper/stepper");
 Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return stepper_1.Stepper; } });
+var summaries_1 = require("./summaries/summaries");
+Object.defineProperty(exports, "Summaries", { enumerable: true, get: function () { return summaries_1.Summaries; } });
+var summary_1 = require("./summary/summary");
+Object.defineProperty(exports, "Summary", { enumerable: true, get: function () { return summary_1.Summary; } });
 var summaryTile_1 = require("./summaryTile/summaryTile");
 Object.defineProperty(exports, "SummaryTileType", { enumerable: true, get: function () { return summaryTile_1.SummaryTileType; } });
 Object.defineProperty(exports, "SummaryTileSize", { enumerable: true, get: function () { return summaryTile_1.SummaryTileSize; } });
@@ -1437,6 +1441,8 @@ var tooltip_1 = require("./tooltip/tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });
 var abortablePromise_1 = require("./utils/abortablePromise");
 Object.defineProperty(exports, "AbortablePromise", { enumerable: true, get: function () { return abortablePromise_1.AbortablePromise; } });
+var headerButtonsProvider_1 = require("./utils/headerButtons/headerButtonsProvider");
+Object.defineProperty(exports, "HeaderButtonsProvider", { enumerable: true, get: function () { return headerButtonsProvider_1.HeaderButtonsProvider; } });
 var languageProvider_1 = require("./utils/localization/languageProvider");
 Object.defineProperty(exports, "LanguageProvider", { enumerable: true, get: function () { return languageProvider_1.LanguageProvider; } });
 var useLanguage_1 = require("./utils/localization/useLanguage");

package/dist/range/range.js

@@ -12,6 +12,7 @@ const rangeField_1 = require("./rangeField");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const rangeHelper_1 = require("./rangeHelper");
 const formFieldError_1 = require("../formFieldError/formFieldError");
+const useDirection_1 = require("../filtersBar/filtersBarSidePanel/hooks/useDirection");
 const Range = ({ className, onChange, value, labelMin, labelMax, unit, defaultValue, disabled, label, min, max, id, fullWidthTriggerButton, fullBounded, allowEqualMinMax, error, triggerAriaLabel }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
@@ -22,8 +23,13 @@ const Range = ({ className, onChange, value, labelMin, labelMax, unit, defaultVa
     const prevValueRef = (0, react_1.useRef)(value);
     const minRef = (0, react_1.useRef)(null);
     const maxRef = (0, react_1.useRef)(null);
+    const { directionState, setContainerNode } = (0, useDirection_1.useDirection)("column");
     const blurTimeoutRef = (0, react_1.useRef)(null);
     const { translate } = (0, useLanguage_1.useLanguage)();
+    // This is the callback ref
+    const setFieldsContainerRef = (0, react_1.useCallback)((node) => {
+        setContainerNode(node);
+    }, [setContainerNode]);
     const getSelection = (0, react_1.useCallback)(() => {
         let selection = value.min !== null && value.max !== null ? `${value.min} - ${value.max}` : "";
         if (!selection && value.min !== null) {
@@ -92,10 +98,11 @@ const Range = ({ className, onChange, value, labelMin, labelMax, unit, defaultVa
             setCurrentValue(value);
         }
     }, [currentValue.min, currentValue.max, value]);
-    const memoizedMinRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: "zen-range__min-field", label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: (0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min }), [translate, unit, labelMin, currentValue.min, errorType, min, max, handleChange, handleBlur]);
-    const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: "zen-range__max-field", label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType]);
+    const memoizedMinRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: "zen-range__min-field", label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: (0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: true, direction: directionState }), [labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, handleBlur, directionState]);
+    const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: "zen-range__max-field", label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: false, direction: directionState }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType, directionState]);
     const selection = (0, react_1.useMemo)(() => getSelection(), [getSelection]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-range", error ? "zen-range--error" : "", className || ""]), children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, { ariaLabel: triggerAriaLabel, ref: triggerRef, id: id || triggerId, className: "zen-range__trigger-button", onClick: handleTriggerClick, disabled: disabled, isActive: isOpen, fullWidth: fullWidthTriggerButton, title: selection ? translate("{rangeName} values {values}").replace("{rangeName}", label).replace("{values}", selection) : "", children: selection ? (0, jsx_runtime_1.jsx)("span", { className: "zen-range__trigger-button-text", children: selection }) : label }), (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "on", alignment: "bottom-left", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Range Filter popup"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, className: "zen-range__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-range__label body-04 zen-ellipsis", children: label }), memoizedMinRangeField, memoizedMaxRangeField, (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") })] })] })] }) })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-range", error ? "zen-range--error" : "", className || ""]), children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, { ariaLabel: triggerAriaLabel, ref: triggerRef, id: id || triggerId, className: "zen-range__trigger-button", onClick: handleTriggerClick, disabled: disabled, isActive: isOpen, fullWidth: fullWidthTriggerButton, title: selection ? translate("{rangeName} values {values}").replace("{rangeName}", label).replace("{values}", selection) : "", children: selection ? (0, jsx_runtime_1.jsx)("span", { className: "zen-range__trigger-button-text", children: selection }) : label }), (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "on", alignment: "bottom-left", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Range Filter popup"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, className: "zen-range__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-range__label zen-ellipsis", children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__fields-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { ref: setFieldsContainerRef, className: (0, classNames_1.classNames)(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]), children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { className: "zen-range__error", error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""] })
+                                    : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") })] })] })] }) })] });
 };
 exports.Range = Range;
 exports.TRANSLATIONS = [

package/dist/range/rangeField.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import "./rangeField.less";
+import { TDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
 export interface IRangeField {
     onChange: (id: string, value: number | null) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
@@ -13,6 +14,7 @@ export interface IRangeField {
     id: string;
     inputRef: React.RefObject<HTMLInputElement>;
     errorString?: string;
-    hideErrorText?: boolean;
+    direction?: TDirection;
+    isMinField: boolean;
 }
 export declare const RangeField: React.FC<IRangeField>;

package/dist/range/rangeField.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const textInput_1 = require("../textInput/textInput");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconException_1 = require("../icons/iconException");
-const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, hideErrorText }) => {
+const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
     const inputId = (0, react_1.useId)();
     const labelId = (0, react_1.useId)();
     const unitId = (0, react_1.useId)();
@@ -14,6 +14,7 @@ const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, m
         const newValue = e.target.value ? Number(e.target.value) : null;
         onChange(id, newValue);
     };
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-range-field", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__content", children: [(0, jsx_runtime_1.jsx)("label", { className: "zen-range-field__label body-04 zen-ellipsis", id: labelId, htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__input-container", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { inputClassName: (0, classNames_1.classNames)(["zen-range-field__input", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unitId}`, min: min, max: max }) }), (0, jsx_runtime_1.jsx)("div", { id: unitId, className: "zen-range-field__sense body-02-short zen-ellipsis", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) })] }), errorString && !hideErrorText ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__error", children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-range-field__error-icon", size: "bigger" }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__error-text", children: errorString })] }) : null] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-range-field", direction === "row" ? "zen-range-field--row" : "zen-range-field--column",
+            isMinField ? "zen-range-field--min" : "zen-range-field--max", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__content", children: [(0, jsx_runtime_1.jsx)("label", { className: "zen-range-field__label zen-ellipsis", id: labelId, htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__input-container", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { inputClassName: (0, classNames_1.classNames)(["zen-range-field__input", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max }) }), unit ? (0, jsx_runtime_1.jsx)("div", { id: unitId, className: "zen-range-field__sense zen-ellipsis", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) }) : null] }), errorString && direction !== "row" ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__error", children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-range-field__error-icon", size: "bigger" }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__error-text", children: errorString })] }) : null] });
 };
 exports.RangeField = RangeField;

package/dist/skeleton/skeleton.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useLanguage_1 = require("../utils/localization/useLanguage");
 const Skeleton = ({ type = "text", height, width = "100%", className }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
     const classNameList = (0, classNames_1.classNames)(["zen-skeleton", `zen-skeleton--${type}`, className || ""]);
-    return (0, jsx_runtime_1.jsx)("div", { role: "progressbar", style: { height: height, width: width ? width : "100%" }, className: classNameList.trim() });
+    return (0, jsx_runtime_1.jsx)("div", { role: "progressbar", "aria-label": translate("Loading"), style: { height: height, width: width ? width : "100%" }, className: classNameList.trim() });
 };
 exports.Skeleton = Skeleton;

package/dist/skeletonList/skeletonList.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "./skeletonList.less";
+import { IZenComponentProps } from "./../commonHelpers/zenComponent";
+type ISkeletonListSize = "small" | "medium" | "large";
+export interface ISkeletonList extends Omit<IZenComponentProps, "children"> {
+    width?: number;
+    size?: ISkeletonListSize;
+}
+export declare const SkeletonList: React.FC<ISkeletonList>;
+export {};

package/dist/skeletonList/skeletonList.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const skeleton_1 = require("../skeleton/skeleton");
+const SkeletonList = ({ className, width, size = "small" }) => {
+    const styleWidth = width ? { style: { width: `${width}px` } } : {};
+    const itemWidth = 115;
+    const itemHeight = 14;
+    const getSizeCount = (value) => {
+        if (value === "large") {
+            return 12;
+        }
+        if (value === "medium") {
+            return 8;
+        }
+        return 4;
+    };
+    const count = getSizeCount(size);
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, styleWidth, { className: (0, classNames_1.classNames)(["zen-skeleton-list", className || ""]), children: Array.from({ length: count }, (_, index) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: itemWidth, height: itemHeight }, `skeleton-${index}`))) }));
+};
+exports.SkeletonList = SkeletonList;

package/dist/summaries/summaries.d.ts

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

package/dist/summaries/summaries.js

@@ -0,0 +1,12 @@
+"use strict";
+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 }) => {
+    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}`))) });
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: `zen-summaries__${type}`, children: children });
+};
+exports.Summaries = Summaries;

package/dist/summaries/utils/splitIntoPairs.d.ts

@@ -0,0 +1,3 @@
+type Pair<T> = [T, T?];
+export declare function splitIntoPairs<T>(arr: T[]): Pair<T>[];
+export {};

package/dist/summaries/utils/splitIntoPairs.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitIntoPairs = void 0;
+function splitIntoPairs(arr) {
+    const pairs = [];
+    for (let i = 0; i < arr.length; i += 2) {
+        const pair = arr.slice(i, i + 2);
+        pairs.push(pair); // Type assertion as slice returns T[]
+    }
+    return pairs;
+}
+exports.splitIntoPairs = splitIntoPairs;

package/dist/summary/summary.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import "./summary.less";
+export interface ISummary {
+    color?: string;
+    title?: string;
+    value: string | number;
+    unit?: string;
+    tooltip?: React.ReactNode;
+    more?: ReactNode;
+    isEnabled?: boolean;
+    onToggle?: () => void;
+    description?: ReactNode;
+}
+export declare const Summary: React.FC<ISummary>;

package/dist/summary/summary.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Summary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tooltip_1 = require("../tooltip/tooltip");
+const iconInfoCircle_1 = require("../icons/iconInfoCircle");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const Summary = ({ color, title, value, unit, tooltip, more, isEnabled, onToggle, description }) => {
+    const isClickable = (0, react_1.useMemo)(() => color && onToggle, [color, 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 })] });
+};
+exports.Summary = Summary;

package/dist/utils/headerButtons/headerButtonsProvider.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactElement, PropsWithChildren } from "react";
+import { IHeaderButton } from "../../header/headerButton";
+interface IHeaderButtonsFormat {
+    buttons: ReactElement<IHeaderButton>[];
+    priority?: boolean;
+}
+export declare const headerButtonsFormatContext: import("react").Context<IHeaderButtonsFormat>;
+interface IHeaderButtonsProviderProps extends PropsWithChildren {
+    buttons?: ReactElement<IHeaderButton>[];
+    priority?: boolean;
+}
+export declare const HeaderButtonsProvider: FC<IHeaderButtonsProviderProps>;
+export declare const useHeaderButtons: () => {
+    buttons: ReactElement<IHeaderButton, string | import("react").JSXElementConstructor<any>>[];
+    priority: boolean | undefined;
+};
+export {};

package/dist/utils/headerButtons/headerButtonsProvider.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeaderButtons = exports.HeaderButtonsProvider = exports.headerButtonsFormatContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+exports.headerButtonsFormatContext = (0, react_2.createContext)({
+    buttons: [],
+    priority: false
+});
+const HeaderButtonsProvider = ({ buttons, priority, children }) => ((0, jsx_runtime_1.jsx)(exports.headerButtonsFormatContext.Provider, { value: {
+        buttons: buttons || [],
+        priority: priority || false
+    }, children: children }));
+exports.HeaderButtonsProvider = HeaderButtonsProvider;
+const useHeaderButtons = () => {
+    const { buttons, priority } = (0, react_1.useContext)(exports.headerButtonsFormatContext);
+    return { buttons, priority };
+};
+exports.useHeaderButtons = useHeaderButtons;

package/dist/utils/localization/translations/cs-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/cs-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Další",
     "Previous": "Předchozí",
     "Open": "Otevřít",
-    "All Filters": "Všechny filtry"
+    "All Filters": "Všechny filtry",
+    "Loading": "Načítání"
 };

package/dist/utils/localization/translations/de-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/de-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Nächstes",
     "Previous": "Vorherige",
     "Open": "Offen",
-    "All Filters": "Alle Filter"
+    "All Filters": "Alle Filter",
+    "Loading": "Wird geladen"
 };

package/dist/utils/localization/translations/en-json.d.ts

@@ -236,4 +236,5 @@ export declare const translations: {
     Favorite: string;
     "All Filters": string;
     "Reset All": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/en-json.js

@@ -238,5 +238,6 @@ exports.translations = {
     "Open": "Open",
     "Favorite": "Favorite",
     "All Filters": "All Filters",
-    "Reset All": "Reset All"
+    "Reset All": "Reset All",
+    "Loading": "Loading"
 };

package/dist/utils/localization/translations/es-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/es-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Siguiente",
     "Previous": "Anterior",
     "Open": "Abierto",
-    "All Filters": "Todos los filtros"
+    "All Filters": "Todos los filtros",
+    "Loading": "Cargando"
 };

package/dist/utils/localization/translations/fr-FR-json.d.ts

@@ -216,4 +216,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/fr-FR-json.js

@@ -218,5 +218,6 @@ exports.translations = {
     "Next": "Suivant",
     "Previous": "Précédent",
     "Open": "Ouvrir",
-    "All Filters": "Tous les filtres"
+    "All Filters": "Tous les filtres",
+    "Loading": "En cours de chargement"
 };

package/dist/utils/localization/translations/fr-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/fr-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Suivant",
     "Previous": "Précédent",
     "Open": "Ouvert",
-    "All Filters": "Tous les filtres"
+    "All Filters": "Tous les filtres",
+    "Loading": "Chargement en cours"
 };

package/dist/utils/localization/translations/id-json.d.ts

@@ -218,4 +218,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/id-json.js

@@ -220,5 +220,6 @@ exports.translations = {
     "Next": "Berikutnya",
     "Previous": "Sebelumnya",
     "Open": "Buka",
-    "All Filters": "Semua Filter"
+    "All Filters": "Semua Filter",
+    "Loading": "Memuat"
 };

package/dist/utils/localization/translations/it-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/it-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Avanti",
     "Previous": "Indietro",
     "Open": "Aperto",
-    "All Filters": "Tutti i filtri"
+    "All Filters": "Tutti i filtri",
+    "Loading": "Caricamento in corso"
 };

package/dist/utils/localization/translations/ja-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/ja-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "次の",
     "Previous": "前",
     "Open": "オープン",
-    "All Filters": "すべてのフィルター"
+    "All Filters": "すべてのフィルター",
+    "Loading": "読み込み中"
 };

package/dist/utils/localization/translations/ko-KR-json.d.ts

@@ -227,4 +227,5 @@ export declare const translations: {
     "X-axis": string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/ko-KR-json.js

@@ -229,5 +229,6 @@ exports.translations = {
     "Y-axis": "Y축",
     "X-axis": "X축",
     "Open": "열려 있는",
-    "All Filters": "모든 필터"
+    "All Filters": "모든 필터",
+    "Loading": "로드 중"
 };

package/dist/utils/localization/translations/ms-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/ms-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Seterusnya",
     "Previous": "Sebelumnya",
     "Open": "Buka",
-    "All Filters": "Semua Penyaring"
+    "All Filters": "Semua Penyaring",
+    "Loading": "Memuatkan"
 };

package/dist/utils/localization/translations/nl-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/nl-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Volgende",
     "Previous": "Vorige",
     "Open": "Open",
-    "All Filters": "Alle filters"
+    "All Filters": "Alle filters",
+    "Loading": "Laden"
 };

package/dist/utils/localization/translations/pl-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/pl-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Następne",
     "Previous": "Poprzednie",
     "Open": "Otwórz",
-    "All Filters": "Wszystkie filtry"
+    "All Filters": "Wszystkie filtry",
+    "Loading": "Ładowanie"
 };

package/dist/utils/localization/translations/pt-BR-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/pt-BR-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Avançar",
     "Previous": "Anterior",
     "Open": "Aberto",
-    "All Filters": "Todos os filtros"
+    "All Filters": "Todos os filtros",
+    "Loading": "Carregando"
 };

package/dist/utils/localization/translations/sv-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/sv-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Nästa",
     "Previous": "Föregående",
     "Open": "Öppna",
-    "All Filters": "Alla filter"
+    "All Filters": "Alla filter",
+    "Loading": "Laddar"
 };

package/dist/utils/localization/translations/th-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/th-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "ถัดไป",
     "Previous": "ก่อนหน้า",
     "Open": "เปิด",
-    "All Filters": "ตัวกรองทั้งหมด"
+    "All Filters": "ตัวกรองทั้งหมด",
+    "Loading": "กำลังโหลด"
 };

package/dist/utils/localization/translations/tr-json.d.ts

@@ -217,4 +217,5 @@ export declare const translations: {
     Previous: string;
     Open: string;
     "All Filters": string;
+    Loading: string;
 };

package/dist/utils/localization/translations/tr-json.js

@@ -219,5 +219,6 @@ exports.translations = {
     "Next": "Sonraki",
     "Previous": "Önceki",
     "Open": "Aç",
-    "All Filters": "Tüm Filtreler"
+    "All Filters": "Tüm Filtreler",
+    "Loading": "Yükleniyor"
 };