@geotab/zenith 1.24.2-beta.2 → 1.25.0-beta.0

package/README.md

@@ -40,12 +40,26 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.25.0
+
+ * `FiltersBar.DropdownWithCheckbox` has be added
+ * `FormStepper` has been added
+ * Add property to configure `SidePanel` width
+ * Add translations for tranditional chinese language
+ * Fix `Chart` tooltip in `Modal`
+ * Description can be a `ReactNode` in `PillExpandable`
+ * Allow buttons in `Header` to be in context menu by default
+ * Fix visual appearance of `PillExpandable`
+ * Fix loading option names in pills under the `Dropdown` 
+ * Add `aria-label` to single-select dropdown
+ * Add the property `error` to `TimePicker`
+
 ### 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
+ * Add `Summary` component in `Chart`s
+ * 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
 

package/dist/chart/barChart.d.ts

@@ -8,7 +8,7 @@ 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";
+import { IChartSummary } from "./interfaces";
 export interface IBarChart extends IZenComponentProps {
     data: IBarChartData;
     options?: IBarChartOptions;

package/dist/chart/interfaces.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IYAxisMeta {
     name: string;
     min: number;
@@ -8,3 +9,13 @@ export interface IXAxisMeta {
     maxDate: string;
 }
 export type TUnit = string | string[] | ((index: number, value: string) => string);
+export interface IChartSummary {
+    color?: string;
+    label?: string;
+    value?: number | string;
+    unit?: string;
+    more?: React.ReactNode;
+    description?: string;
+    onClick?: () => void;
+    isHidden?: boolean;
+}

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

@@ -2,7 +2,7 @@
 import { ILineChartData } from "./interfaces";
 import { IBarChartData } from "../barChart/interfaces";
 import { IPieChartData } from "../pieChart/interfaces";
-import { IChartSummary } from "../chartSummary/chartSummary";
+import { IChartSummary } from "../interfaces";
 export declare const useSummary: (chartSummary: IChartSummary | false | undefined, data: ILineChartData | IBarChartData | IPieChartData) => {
     title: string | undefined;
     value: string | number;

package/dist/chart/lineChart.d.ts

@@ -8,7 +8,7 @@ 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";
+import { IChartSummary } from "./interfaces";
 export interface ILineChart extends IZenComponentProps {
     data: ILineChartData;
     options?: ILineChartOptions;

package/dist/chart/pieChart.d.ts

@@ -7,7 +7,7 @@ import { IPieChartData, IPieChartOptions } from "./pieChart/interfaces";
 import { ILegendOptions } from "./plugins/legend/interfaces";
 import { ITooltipOptions } from "./plugins/tooltip/interfaces";
 import { IChartInsight } from "./chartInsight/chartInsight";
-import { IChartSummary } from "./chartSummary/chartSummary";
+import { IChartSummary } from "./interfaces";
 export interface IPieChart extends IZenComponentProps {
     data: IPieChartData;
     options?: IPieChartOptions;

package/dist/commonStyles/zIndex.less

@@ -1,3 +1,5 @@
+// ---- Dropdowns, Tooltips, Popups, Modals ----
+
 @z-index-11100: 11100;
 // Tooltip
 
@@ -46,6 +48,7 @@
 // Modal
 // GroupsFilter
 
+// AdvancedGroupsFilter (inner; part of GroupsFilter)
 // DialogContent (deprecated)
 
 @z-index-11000: 11000;
@@ -57,6 +60,9 @@
 // ModalShield (inner)
 // Dialog shield (deprecated)
 
+@z-index-10999: 10999; // hidden in storybook
+// GroupsFilter (when AdvancedGroupsFilter is open)
+
 @z-index-10007: 10007;
 // SidePanel
 
@@ -65,3 +71,46 @@
 
 @z-index-10005: 10005;
 // Waiting
+
+
+// ---- Non modal/internal items (hidden in storybook) ----
+
+@z-index-5001: 5001;
+// DataGrid (flexibleColumnsReorder, inner)
+
+@z-index-5000: 5000;
+// DataGrid (FlexibleColumnsResizer, inner)
+
+@z-index-1000: 1000;
+// FiltersBar inner items (Drive)
+// PageLayout (deprecated)
+
+@z-index-10: 10;
+// Header
+// Layout (inner items)
+
+@z-index-4: 4;
+// DataGrid inner items
+
+@z-index-3: 3;
+// DataGrid inner items
+
+@z-index-2: 2;
+// Calendar inner items
+// DataGrid inner items
+// BulkActions inner items (internal component)
+// SearchableField inner items (deprecated)
+// SortControl inner items
+
+@z-index-1: 1;
+// Calendar inner items
+// GroupsFilter inner items
+// SearchableField inner items (deprecated)
+// DateRange inner items
+
+
+@z-index--1: -1;
+// BulkActions inner items (internal component)
+// Header inner items
+
+

package/dist/dropdown/dropdown.js

@@ -35,6 +35,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const getNamedItemsHasBeenCalled = (0, react_1.useRef)(false);
     const selectedItemsLoader = (0, react_1.useRef)(undefined);
     const previousMapDataItems = (0, react_1.useRef)(!getData && (dataItems === null || dataItems === void 0 ? void 0 : dataItems.length) ? dataItems : []);
+    const prevIsLoading = (0, react_1.useRef)(isLoading);
     const currentAllSelected = (0, react_1.useMemo)(() => (state.isNestedList || !multiselect || !isFullSelectionMode)
         ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
     (0, react_1.useEffect)(() => {
@@ -58,6 +59,12 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         });
         return () => clearTimeout(timeoutId);
     }, [dataItems, getData, state.groupsMap]);
+    (0, react_1.useEffect)(() => {
+        if (prevIsLoading.current !== isLoading && Object.keys(state.groupsMap).length !== 0) {
+            isLoading === false && dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined });
+            prevIsLoading.current = isLoading;
+        }
+    }, [isLoading, dataItems, state.groupsMap]);
     (0, react_1.useEffect)(() => {
         const defaultSelectedValue = defaultValue ? (isFullSelectionMode ? defaultValue.selected : defaultValue) : [];
         const defaultAllSelectedValue = defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined)

package/dist/dropdown/dropdownList.js

@@ -86,8 +86,8 @@ const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApp
             });
             return values;
         };
-        return (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__elements", children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, { options: listData, label: "", onChange: handleChange, onClick: handleClick }) : (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { onChange: handleSingleChange, onClick: handleClick, title: "", id: listId, multiselect: false, selectItemOnFocus: false, items: listData, forceSelection: forceSelection, value: createValue(listData, activeValue) }) });
-    }, [isMultiselect, listData, handleChange, handleClick, handleSingleChange, listId, forceSelection, activeValue]);
+        return (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__elements", children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, { options: listData, label: "", onChange: handleChange, onClick: handleClick }) : (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { onChange: handleSingleChange, onClick: handleClick, title: translate("Select option"), id: listId, multiselect: false, selectItemOnFocus: false, items: listData, forceSelection: forceSelection, value: createValue(listData, activeValue) }) });
+    }, [isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, listId, forceSelection, activeValue]);
     return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""]) }, styleWidth, { children: [filterName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__label", children: filterName }) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__item-wrapper", children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large") }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: isMultiselect ? onClearClick : handleClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
 };
 exports.DropdownList = DropdownList;

package/dist/header/headerButton.d.ts

@@ -6,6 +6,7 @@ import { IIcon } from "../icons/icon";
 export interface IHeaderButton extends Omit<IButton, "onClick"> {
     id: string;
     important?: boolean;
+    inContextMenu?: boolean;
     icon?: React.FC<IIcon>;
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;

package/dist/header/headerButton.js

@@ -18,7 +18,7 @@ const textIconButton_1 = require("../textIconButton/textIconButton");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 exports.HeaderButtonDisplayName = "HeaderButton";
 const HeaderButton = (_a) => {
-    var { id, children, icon, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "important", "onClick"]);
+    var { id, children, icon, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick, inContextMenu } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "important", "onClick", "inContextMenu"]);
     const fullClassName = (0, classNames_1.classNames)(["zen-header-button", className]);
     const props = Object.assign(Object.assign({}, restProps), { "data-important": important ? "1" : "0" });
     return icon

package/dist/header/headerMenu.d.ts

@@ -8,6 +8,7 @@ export interface IHeaderMenu extends Omit<IButton, "onClick"> {
     id: string;
     name: string;
     important?: boolean;
+    inContextMenu?: boolean;
     icon?: FC<IIcon>;
     iconSize?: TSvgIconSize;
     alignment?: TAlignment;

package/dist/header/headerMenu.js

@@ -24,7 +24,7 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 exports.HeaderMenuDisplayName = "HeaderMenu";
 const HeaderMenu = (_a) => {
-    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-right" } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment"]);
+    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-right", inContextMenu } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment", "inContextMenu"]);
     const isMobile = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-header-button-with-dropdown");

package/dist/header/hooks/useNonFittingElements.d.ts

@@ -13,6 +13,7 @@ interface INonFittingElementProps<T extends {
 export declare const useNonFittingElements: <T extends {
     props?: {
         id?: string | undefined;
+        inContextMenu?: boolean | undefined;
     } | undefined;
 }>({ maxWidth, data, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible }: INonFittingElementProps<T>) => {
     visibleElements: T[];

package/dist/header/hooks/useNonFittingElements.js

@@ -64,9 +64,10 @@ const useNonFittingElements = ({ maxWidth, data, hiddenElementsCountToRender, wi
             });
             dataForRender = canBeFiltered ? filteredData : data;
         }
-        const newVisibleElements = dataForRender.slice(0, visibleChildrenCount);
+        const menuOnlyItems = dataForRender.filter(el => { var _a; return (_a = el.props) === null || _a === void 0 ? void 0 : _a.inContextMenu; });
+        const newVisibleElements = dataForRender.filter(el => { var _a; return !((_a = el.props) === null || _a === void 0 ? void 0 : _a.inContextMenu); }).slice(0, visibleChildrenCount);
         setVisibleElements(reverseOrderOfVisible ? newVisibleElements.reverse() : newVisibleElements);
-        setNonFittingElements(dataForRender.slice(visibleChildrenCount));
+        setNonFittingElements([...menuOnlyItems, ...dataForRender.filter(el => { var _a; return !((_a = el.props) === null || _a === void 0 ? void 0 : _a.inContextMenu); }).slice(visibleChildrenCount)]);
     }, [maxWidth, calculateVisibleChildrenCount, data, widthDelta, hiddenElementsCountToRender, reverseOrderOfVisible]);
     return {
         visibleElements,

package/dist/index.css

@@ -3038,9 +3038,9 @@
   border-bottom-left-radius: var(--border-radius-default);
   overflow: hidden;
   height: 100%;
-  width: 33%;
-  min-width: 320px;
-  max-width: 320px;
+  width: 25%;
+  min-width: 360px;
+  max-width: 600px;
   position: fixed;
   right: 0;
   top: 0;
@@ -3075,10 +3075,6 @@
 .zen-side-panel.zen-side-panel--left-positioned.zen-side-panel--shown {
   transform: translateX(0);
 }
-.zen-side-panel.zen-side-panel--drive,
-.zen-side-panel.zen-side-panel--drive-tablet {
-  min-width: 352px;
-}
 .zen-side-panel.zen-side-panel--drive {
   font-family: var(--main-font);
   font-size: 16px;
@@ -3113,11 +3109,6 @@
 .zen-side-panel.zen-side-panel--bottom-positioned.zen-side-panel--shown {
   transform: translateY(0);
 }
-.zen-side-panel .zen-side-panel-empty-child {
-  width: 100%;
-  height: 100%;
-  min-width: 320px;
-}
 @media (max-width: 640px) {
   .zen-side-panel {
     width: 100%;
@@ -6554,78 +6545,6 @@
     font-size: 0.875rem;
   }
 }
-.zen-chart-summary {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.zen-chart-summary__legend {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex: 0 1 auto;
-  max-width: 400px;
-}
-.zen-chart-summary__legend--clickable {
-  cursor: pointer;
-}
-.zen-chart-summary__legend--hidden {
-  text-decoration: line-through;
-}
-.zen-chart-summary__color {
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-}
-.zen-chart-summary__label {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-secondary);
-}
-.zen-chart-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;
-  color: var(--text-secondary);
-}
-.zen-chart-summary__description {
-  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-chart-summary__data {
-  display: flex;
-  gap: 4px;
-  flex-direction: column;
-}
-.zen-chart-summary__primary {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.zen-chart-summary__value {
-  font-feature-settings: 'liga' off, 'clig' off;
-  font-family: "Roboto Mono";
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 32px;
-  color: var(--text-primary);
-}
 .zen-summary {
   font-family: var(--main-font);
   font-size: 14px;
@@ -6765,7 +6684,7 @@ button.zen-summary__clickable {
   border-radius: 8px;
   pointer-events: none;
   position: absolute;
-  z-index: 10800;
+  z-index: 11100;
   border: 1px solid var(--borders-general);
   box-shadow: 0px 1px 3px 0px rgba(0, 17, 30, 0.15);
 }
@@ -8582,6 +8501,9 @@ button.zen-summary__clickable {
 .zen-popup.zen-time-picker__popup--mobile {
   z-index: 11010;
 }
+.zen-time-picker__trigger--error {
+  border: 1px solid var(--text-error-message);
+}
 @media (max-width: 640px) {
   .zen-time-picker__popup {
     width: 100%;
@@ -10482,6 +10404,16 @@ button.zen-summary__clickable {
   height: 100%;
   overflow-y: hidden;
 }
+.zen-side-panel-filters-bar.zen-side-panel-filters-bar {
+  min-width: 320px;
+  max-width: 320px;
+}
+@media (max-width: 640px) {
+  .zen-side-panel-filters-bar.zen-side-panel-filters-bar {
+    width: 100%;
+    max-width: 100%;
+  }
+}
 .zen-summary-tile {
   box-sizing: border-box;
   font-family: var(--main-font);

package/dist/pillExpandable/pillContent.js

@@ -7,7 +7,6 @@ const button_1 = require("../button/button");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const lazyContent_1 = require("../skeleton/lazyContent");
-const sanitizeJSX_1 = require("./sanitizeJSX");
 const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler }) => {
     const headerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__header-text");
     const descriptionDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__description");
@@ -21,10 +20,10 @@ const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction
     }, [onActionClick]);
     const renderMainButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? mainActionClick(data.onClick) : undefined, type: "primary", children: data.text })), [mainActionClick]);
     const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? secondaryActionClick(data.onClick) : undefined, type: "tertiary", children: data.text })), [secondaryActionClick]);
-    const renderDescription = (0, react_1.useCallback)(data => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: (0, sanitizeJSX_1.sanitaizeJSX)(data, ["span", "i", "b"]) }), [descriptionDriveClassName]);
+    const renderDescription = (0, react_1.useCallback)(data => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName]);
     const renderCount = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(date || count) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__content-header", children: [date && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&
-                (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__actions", children: [mainAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible })] })] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(date || count) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__content-header", children: [date && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&
+                (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__actions", children: [mainAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible })] })] });
 };
 exports.PillContent = PillContent;

package/dist/sidePanel/sidePanel.d.ts

@@ -6,6 +6,7 @@ interface ISidePanelComponents {
     Cell: React.FC<ISidePanelCell>;
 }
 export declare const isChildPopup: (target: HTMLElement, stopElement: HTMLElement) => boolean;
+export declare const formatWidth: (width: string | number) => string;
 export type TPanelPosition = "left" | "right" | "bottom";
 export declare enum SidePanelCloseReason {
     Escape = "Escape",
@@ -21,6 +22,7 @@ export interface ISidePanel extends IZenComponentProps {
     useTrapFocusWithTrigger?: boolean;
     onTransitionEnd?: (isCurrentOpen: boolean) => void;
     onHidePanel: (reason: SidePanelCloseReason, dataShieldId?: string) => void;
+    width?: number | string;
 }
 export declare const SidePanel: React.FC<ISidePanel> & ISidePanelComponents;
 export {};

package/dist/sidePanel/sidePanel.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = void 0;
+exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.formatWidth = exports.isChildPopup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const react_1 = require("react");
@@ -16,6 +16,7 @@ const react_dom_1 = require("react-dom");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const themeContext_1 = require("../utils/theme/themeContext");
 const useFadeComponent_1 = require("../utils/useFadeComponent");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 /* eslint-enable @typescript-eslint/naming-convention */
 const isChildPopup = (target, stopElement) => {
     const parentPopup = (0, getParentByClass_1.getParentByClass)(target, "zen-absolute");
@@ -35,15 +36,26 @@ const isChildPopup = (target, stopElement) => {
     return (0, exports.isChildPopup)(popupTrigger, stopElement);
 };
 exports.isChildPopup = isChildPopup;
+const formatWidth = (width) => {
+    if (typeof width === "number") {
+        return `${width}px`;
+    }
+    if (typeof width === "string" && /^\d+$/.test(width)) {
+        return `${width}px`;
+    }
+    return width;
+};
+exports.formatWidth = formatWidth;
 var SidePanelCloseReason;
 (function (SidePanelCloseReason) {
     SidePanelCloseReason["Escape"] = "Escape";
     SidePanelCloseReason["ClickOutside"] = "ClickOutside";
 })(SidePanelCloseReason || (exports.SidePanelCloseReason = SidePanelCloseReason = {}));
 exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-popup";
-const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, onTransitionEnd }) => {
+const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, width, onTransitionEnd }) => {
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = (0, useFadeComponent_1.useFadeComponent)(isOpen, onTransitionEnd);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
+    const isMobile = (0, useMobile_1.useMobile)();
     const sidePanelRef = (0, react_1.useRef)(null);
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-side-panel");
     const autoId = (0, useUniqueId_1.useUniqueId)();
@@ -126,17 +138,23 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
         ? "zen-side-panel--left-positioned"
         : panelPosition === "right" ? "zen-side-panel--right-positioned" : "zen-side-panel--bottom-positioned";
     const memoizedChildForRender = (0, react_1.useMemo)(() => isOpen || renderComponent ? children : null, [children, isOpen, renderComponent]);
+    const memoizedStyles = (0, react_1.useMemo)(() => {
+        if (width && !isMobile && panelPosition !== "bottom") {
+            return { style: { width: (0, exports.formatWidth)(width) } };
+        }
+        return {};
+    }, [width, isMobile, panelPosition]);
     if (!renderComponent && !isOpen) {
         return null;
     }
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: sidePanelRef, id: popupId, role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)([
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)([
             "zen-side-panel",
             driveClassName || "",
             dark ? "zen-dark" : "",
             showContent ? "zen-side-panel--shown" : "",
             positioningClass,
             className !== null && className !== void 0 ? className : ""
-        ]), children: memoizedChildForRender }), document.fullscreenElement || document.body);
+        ]), children: memoizedChildForRender })), document.fullscreenElement || document.body);
 };
 exports.SidePanel = SidePanel;
 exports.SidePanel.Cell = sidePanelCell_1.SidePanelCell;

package/dist/timePicker/timePicker.d.ts

@@ -13,6 +13,7 @@ export interface ITimePicker extends IZenComponentProps {
     translate?: (key: string) => string;
     isMobileView?: boolean;
     dataTimeId?: string;
+    error?: string;
 }
 export declare const TimePicker: React.FC<ITimePicker>;
 export declare const TRANSLATIONS: string[];

package/dist/timePicker/timePicker.js

@@ -11,9 +11,10 @@ const timeSelect_1 = require("./components/timeSelect/timeSelect");
 const button_1 = require("../button/button");
 const timePickerUtils_1 = require("./timePickerUtils");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const formFieldError_1 = require("../formFieldError/formFieldError");
 const hours = (0, timePickerUtils_1.getSelectItemsForTimePicker)(23);
 const minutes = (0, timePickerUtils_1.getSelectItemsForTimePicker)(59);
-const TimePicker = ({ className, disabled, fullWidth, value, onChange, isMobileView, dataTimeId }) => {
+const TimePicker = ({ className, disabled, fullWidth, value, onChange, isMobileView, dataTimeId, error }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const classes = (0, classNames_1.classNames)(["zen-time-picker", disabled ? "zen-time-picker--disabled" : "", className || ""]);
     const innerTriggerRef = (0, react_1.useRef)(null);
@@ -42,9 +43,10 @@ const TimePicker = ({ className, disabled, fullWidth, value, onChange, isMobileV
             setTimeValue({ hour: hourValue, minutes: minutesValue });
         }
     }, [hourValue, isOpen, minutesValue]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: innerTriggerRef, className: className, onClick: () => {
+    const triggerClassName = (0, classNames_1.classNames)(["zen-time-picker__trigger", error ? "zen-time-picker__trigger--error" : "", className || ""]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: innerTriggerRef, className: triggerClassName, onClick: () => {
                     setIsOpen(!isOpen);
-                }, disabled: disabled, isActive: isOpen, fullWidth: fullWidth }, (dataTimeId ? { "data-time": dataTimeId } : {}), { children: `${hourValue || "24"}:${minutesValue || "00"}` })), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { useTrapFocusWithTrigger: "on", alignment: "bottom", onOpenChange: setIsOpen, isOpen: isOpen, triggerRef: innerTriggerRef, recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-time-picker__popup", isMobileView ? "zen-time-picker__popup--mobile" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__wrapper", children: [(0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select hour"), selected: timeValue.hour, items: hours, onSelect: (newHourValue) => {
+                }, disabled: disabled, isActive: isOpen, fullWidth: fullWidth }, (dataTimeId ? { "data-time": dataTimeId } : {}), { children: `${hourValue || "24"}:${minutesValue || "00"}` })), (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { useTrapFocusWithTrigger: "on", alignment: "bottom", onOpenChange: setIsOpen, isOpen: isOpen, triggerRef: innerTriggerRef, recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-time-picker__popup", isMobileView ? "zen-time-picker__popup--mobile" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__wrapper", children: [(0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select hour"), selected: timeValue.hour, items: hours, onSelect: (newHourValue) => {
                                         setTimeValue(Object.assign(Object.assign({}, timeValue), { hour: newHourValue }));
                                     } }), (0, jsx_runtime_1.jsx)("div", { className: "zen-time-picker-select__separator" }), (0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select minutes"), selected: timeValue.minutes, items: minutes, onSelect: (newMinutesValue) => {
                                         setTimeValue(Object.assign(Object.assign({}, timeValue), { minutes: newMinutesValue }));

package/dist/utils/localization/getSupportedLanguage.d.ts

@@ -1,4 +1,4 @@
-declare const supportedLanguages: readonly ["en", "es", "de", "cs", "fr-FR", "fr", "id", "it", "ja", "ms", "nl", "pl", "pt-BR", "sv", "th", "tr", "zh-Hans", "ko-KR"];
+declare const supportedLanguages: readonly ["en", "es", "de", "cs", "fr-FR", "fr", "id", "it", "ja", "ms", "nl", "pl", "pt-BR", "sv", "th", "tr", "zh-Hans", "ko-KR", "zh-TW"];
 export type TSupportedLanguage = typeof supportedLanguages[number];
 export declare const getSupportedLanguage: (language: string) => TSupportedLanguage;
 export {};

package/dist/utils/localization/getSupportedLanguage.js

@@ -4,7 +4,7 @@ exports.getSupportedLanguage = void 0;
 const supportedLanguages = [
     "en", "es", "de", "cs", "fr-FR", "fr",
     "id", "it", "ja", "ms", "nl", "pl", "pt-BR",
-    "sv", "th", "tr", "zh-Hans", "ko-KR"
+    "sv", "th", "tr", "zh-Hans", "ko-KR", "zh-TW"
 ];
 const getSupportedLanguage = (language) => supportedLanguages.includes(language)
     ? language

package/dist/utils/localization/languageContext.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const languageContext: import("react").Context<"th" | "tr" | "ms" | "id" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "it" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR">;
+export declare const languageContext: import("react").Context<"th" | "tr" | "ms" | "id" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "it" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR" | "zh-TW">;

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

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

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

@@ -220,5 +220,6 @@ exports.translations = {
     "Previous": "Předchozí",
     "Open": "Otevřít",
     "All Filters": "Všechny filtry",
-    "Loading": "Načítání"
+    "Loading": "Načítání",
+    "Select option": "Vybrat možnost"
 };

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

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

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

@@ -220,5 +220,6 @@ exports.translations = {
     "Previous": "Vorherige",
     "Open": "Offen",
     "All Filters": "Alle Filter",
-    "Loading": "Wird geladen"
+    "Loading": "Wird geladen",
+    "Select option": "Option auswählen"
 };

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

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

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

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