@geotab/zenith 1.22.4 → 1.23.0-beta.1

package/README.md

@@ -40,6 +40,19 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.23.0
+
+ * Add the property `target` to `Modal` buttons
+ * Add possibility to use separator in `Table` menu
+ * Make specific `Table` columns non-draggable
+ * Fix long name in Standard list Item
+ * Allow tooltip in `LineChart` to appear only on data points
+ * Add `BannerUpsell`
+ * Audit `SidePanel`
+ * Add the property to configure `DateRange` trigger text
+ * Add `SortControl` default value translation
+ * Add ability to disable `Pagination`
+
 ### 1.22.4
 
  * Prevent `ListItem` to follow link on action click

package/dist/banner/banner.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const bannerSingleLine_1 = require("./bannerSingleLine");
 const bannerMultipLine_1 = require("./bannerMultipLine");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", className }) => {
+const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", primaryAction, className }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const isMultiline = multiline === undefined ? isMobile : multiline;
     return isMultiline ? (0, jsx_runtime_1.jsx)(bannerMultipLine_1.BannerMultiline, { children,
@@ -18,6 +18,7 @@ const Banner = ({ children, header, type = "warning", icon, action, size, onClos
         role,
         ariaAtomic,
         ariaLive,
+        primaryAction,
         className }) : (0, jsx_runtime_1.jsx)(bannerSingleLine_1.BannerSingleLine, { children,
         header,
         type,
@@ -28,6 +29,7 @@ const Banner = ({ children, header, type = "warning", icon, action, size, onClos
         role,
         ariaAtomic,
         ariaLive,
+        primaryAction,
         className });
 };
 exports.Banner = Banner;

package/dist/banner/bannerMultipLine.d.ts

@@ -2,7 +2,7 @@
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";
-export type BannerType = "error" | "info" | "success" | "warning";
+export type BannerType = "error" | "info" | "success" | "warning" | "upsell";
 export interface IBanner {
     className?: string;
     children: React.ReactNode;

package/dist/banner/bannerMultipLine.js

@@ -15,7 +15,7 @@ const button_1 = require("../button/button");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, className }) => {
+const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, primaryAction, className }) => {
     const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
@@ -31,6 +31,6 @@ const BannerMultiline = ({ children, header, type = "warning", icon, action, onC
         "zen-banner__block--multiline",
         "zen-banner__block--" + size
     ]);
-    return (0, jsx_runtime_1.jsx)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__multiline-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__header-container", children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__message-container", children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { className: "zen-banner__icon-block--top-gap", type: type }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, title: text, className: (0, classNames_1.classNames)(["zen-banner__message", "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "zen-banner__action zen-banner__action--multiline", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }) })] }) });
+    return (0, jsx_runtime_1.jsx)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__multiline-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__header-container", children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__message-container", children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { className: "zen-banner__icon-block--top-gap", type: type }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, title: text, className: (0, classNames_1.classNames)(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action zen-banner__action--multiline", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, onClick: primaryAction.onClick, children: primaryAction.text })] })] }) });
 };
 exports.BannerMultiline = BannerMultiline;

package/dist/banner/bannerSingleLine.d.ts

@@ -2,7 +2,7 @@
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";
-export type BannerType = "error" | "info" | "success" | "warning";
+export type BannerType = "error" | "info" | "success" | "warning" | "upsell";
 export interface IBanner {
     className?: string;
     children: React.ReactNode;

package/dist/banner/bannerSingleLine.js

@@ -16,7 +16,7 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = bannerUtils_1.DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className }) => {
+const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = bannerUtils_1.DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className, primaryAction }) => {
     const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
@@ -27,6 +27,6 @@ const BannerSingleLine = ({ children, header, type = "warning", icon, action, on
     const text = (0, useNodeText_1.useNodeText)(contentRef);
     const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
     const blockClassNames = (0, classNames_1.classNames)(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), action && (0, jsx_runtime_1.jsx)("div", { className: "zen-banner__action", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }) })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, onClick: primaryAction.onClick, children: primaryAction.text })] })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
 };
 exports.BannerSingleLine = BannerSingleLine;

package/dist/banner/bannerUpsell.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { IBanner, IBannerAction } from "./banner";
+import { TBannerSize } from "./bannerUtils";
+interface IBannerUpsell extends Omit<IBanner, "type" | "size" | "translate" | "center" | "close"> {
+    primaryAction?: IBannerAction;
+    size?: TBannerSize | "XXL";
+}
+export declare const BannerUpsell: FC<IBannerUpsell>;
+export {};

package/dist/banner/bannerUpsell.js

@@ -0,0 +1,23 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerUpsell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const banner_1 = require("./banner");
+const BannerUpsell = (_a) => {
+    var { icon = true, size = "XXL" } = _a, props = __rest(_a, ["icon", "size"]);
+    const type = "upsell";
+    const bannerSize = size;
+    return (0, jsx_runtime_1.jsx)(banner_1.Banner, Object.assign({}, props, { icon: icon, type: type, size: bannerSize }));
+};
+exports.BannerUpsell = BannerUpsell;

package/dist/banner/bannerUtils.d.ts

@@ -1,22 +1,22 @@
 import { TIconId } from "../static/icons/icons";
 export type TBannerSize = "XL" | "L" | "M" | "S" | "XS";
 export declare const DEFAULT_BANNER_SIZE: TBannerSize;
+export declare const DEFAULT_BANNER_UPSELL_SIZE: TBannerSize;
 export declare const options: {
     error: {
         blockClassName: string;
-        iconId: string;
     };
     info: {
         blockClassName: string;
-        iconId: string;
     };
     success: {
         blockClassName: string;
-        iconId: string;
     };
     warning: {
         blockClassName: string;
-        iconId: string;
+    };
+    upsell: {
+        blockClassName: string;
     };
 };
 export declare const getBannerOptions: (type: string) => {

package/dist/banner/bannerUtils.js

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBannerOptions = exports.options = exports.DEFAULT_BANNER_SIZE = void 0;
+exports.getBannerOptions = exports.options = exports.DEFAULT_BANNER_UPSELL_SIZE = exports.DEFAULT_BANNER_SIZE = void 0;
 exports.DEFAULT_BANNER_SIZE = "L";
+exports.DEFAULT_BANNER_UPSELL_SIZE = "XXL";
 exports.options = {
     "error": {
-        blockClassName: "zen-banner--error",
-        iconId: "zen-report-error"
+        blockClassName: "zen-banner--error"
     },
     "info": {
-        blockClassName: "zen-banner--info",
-        iconId: "zen-info-circled"
+        blockClassName: "zen-banner--info"
     },
     "success": {
-        blockClassName: "zen-banner--success",
-        iconId: "zen-checkmark"
+        blockClassName: "zen-banner--success"
     },
     "warning": {
-        blockClassName: "",
-        iconId: "zen-info-circled"
+        blockClassName: ""
+    },
+    "upsell": {
+        blockClassName: "zen-banner--upsell"
     }
 };
 const getBannerOptions = (type) => exports.options[type] || exports.options.warning;

package/dist/banner/typeIcon.d.ts

@@ -1,7 +1,7 @@
 import { BannerType } from "./banner";
 import "./banner.less";
 interface ITypeIcon {
-    type: BannerType;
+    type: BannerType | "upsell";
     className?: string;
 }
 declare const TypeIcon: ({ type, className }: ITypeIcon) => import("react/jsx-runtime").JSX.Element;

package/dist/banner/typeIcon.js

@@ -8,12 +8,14 @@ const iconWarning_1 = require("../icons/iconWarning");
 const iconException_1 = require("../icons/iconException");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const iconGraphPresentation_1 = require("../icons/iconGraphPresentation");
 const TypeIcon = ({ type, className }) => {
     const iconsByType = (0, react_1.useMemo)(() => ({
         "error": iconException_1.IconException,
         "success": iconCheckRadio_1.IconCheckRadio,
         "warning": iconWarning_1.IconWarning,
-        "info": iconInfoCircle_1.IconInfoCircle
+        "info": iconInfoCircle_1.IconInfoCircle,
+        "upsell": iconGraphPresentation_1.IconGraphPresentation
     }), []);
     const bannerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__icon-block");
     return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__icon-block", className || ""]), children: (0, react_1.createElement)(iconsByType[type], {

package/dist/chart/plugins/linePlugin/interfaces.d.ts

@@ -3,4 +3,5 @@ export interface ILineOptions {
     title?: string | undefined;
     subtitle?: string | undefined;
     unit?: TUnit;
+    tooltipOnPoints?: boolean;
 }

package/dist/chart/plugins/linePlugin/linePlugin.js

@@ -21,8 +21,11 @@ const LinePlugin = (containerId, options, isDark) => ({
                 const rect = canvas.getBoundingClientRect();
                 const x = event.clientX - rect.left;
                 const y = event.clientY - rect.top;
-                if (x >= chart.chartArea.left && x <= chart.chartArea.right) {
-                    chart.verticalLine.x = x;
+                // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/no-explicit-any
+                const activeElements = (options === null || options === void 0 ? void 0 : options.tooltipOnPoints) ? chart._active : [];
+                if (x >= chart.chartArea.left && x <= chart.chartArea.right && (!(options === null || options === void 0 ? void 0 : options.tooltipOnPoints) || activeElements.length > 0)) {
+                    const sortedPoints = activeElements.sort((a, b) => { var _a, _b; return Math.abs((((_a = a.element) === null || _a === void 0 ? void 0 : _a.x) || 0) - x) - Math.abs((((_b = b.element) === null || _b === void 0 ? void 0 : _b.x) || 0) - x); });
+                    chart.verticalLine.x = sortedPoints.length > 0 ? sortedPoints[0].element.x : x;
                     chart.verticalLine.y = y;
                     chart.verticalLine.enabled = true;
                     chart.update(); // Trigger redraw

package/dist/dataGrid/withFlexibleColumns/flexibleColumnsReorder.d.ts

@@ -10,6 +10,7 @@ export interface IFlexibleColumnReorder {
 export declare class FlexibleColumnReorder extends SimpleEventHandler implements IFlexibleColumnReorder {
     private readonly list;
     private readonly resizer;
+    private readonly isDraggable;
     private pageX;
     private pageY;
     private offsetLeft;
@@ -24,6 +25,8 @@ export declare class FlexibleColumnReorder extends SimpleEventHandler implements
     private createColumnToDrag;
     private cloneCell;
     private cloneCellContent;
+    private getFirstDraggable;
+    private getLastDraggable;
     private calculateClosestColumn;
     private readonly preventScroll;
     private readonly stopMoving;
@@ -31,7 +34,7 @@ export declare class FlexibleColumnReorder extends SimpleEventHandler implements
     private readonly endColumn;
     private readonly createDragElement;
     private readonly startColumn;
-    constructor(list: HTMLElement, resizer: IFlexibleColumnResizer);
+    constructor(list: HTMLElement, resizer: IFlexibleColumnResizer, isDraggable: (index: number) => boolean);
     add(): void;
     remove(): void;
 }

package/dist/dataGrid/withFlexibleColumns/flexibleColumnsReorder.js

@@ -35,13 +35,39 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
         p.append(clone);
         parent.append(p);
     }
+    getFirstDraggable() {
+        for (let i = 0; i < this.columnWidths.length; i++) {
+            if (this.isDraggable(i)) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    getLastDraggable() {
+        for (let i = this.columnWidths.length - 1; i >= 0; --i) {
+            if (this.isDraggable(i)) {
+                return i;
+            }
+        }
+        return -1;
+    }
     calculateClosestColumn(e) {
         const shiftX = e.pageX - this.pageX;
         let distanceFromTableStart = this.offsetLeft + shiftX + this.pointerOffset;
-        let closest = this.columnWidths.length - 1;
+        const firstDraggable = this.getFirstDraggable();
+        const lastDraggable = this.getLastDraggable();
+        let closest = lastDraggable;
         for (let i = 0; i < this.columnWidths.length; ++i) {
             const w = this.columnWidths[i];
             if (distanceFromTableStart < w) {
+                if (i < firstDraggable) {
+                    closest = firstDraggable;
+                    break;
+                }
+                if (i > lastDraggable) {
+                    closest = lastDraggable + 1;
+                    break;
+                }
                 const half = w / 2;
                 if (distanceFromTableStart < half) {
                     closest = i;
@@ -55,7 +81,7 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
         }
         return closest;
     }
-    constructor(list, resizer) {
+    constructor(list, resizer, isDraggable) {
         super();
         Object.defineProperty(this, "list", {
             enumerable: true,
@@ -69,6 +95,12 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
             writable: true,
             value: resizer
         });
+        Object.defineProperty(this, "isDraggable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: isDraggable
+        });
         Object.defineProperty(this, "pageX", {
             enumerable: true,
             configurable: true,

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -123,7 +123,7 @@ function InnerFlColumnsList(props, ref) {
         resizerRef.current.add(visibleColumns);
         // reorder
         if (!reordererRef.current) {
-            const reorder = new flexibleColumnsReorder_1.FlexibleColumnReorder(gridRef.current, resizerRef.current);
+            const reorder = new flexibleColumnsReorder_1.FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
             reordererRef.current = reorder;
         }
         reordererRef.current.detach("reorder");

package/dist/dateInput/dateInput.js

@@ -30,6 +30,7 @@ const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, i
     const dateFormatter = (0, react_1.useCallback)((d) => (0, formatDate_1.formatDate)(toLocalDateTime(d), dateFormat, translate), [dateFormat, toLocalDateTime, translate]);
     const dateDeformatter = (0, react_1.useCallback)((d) => (0, formatDate_1.deformatDate)(d, dateFormat, translate) || new Date(""), [dateFormat, translate]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [renderContent, setRenderContent] = (0, react_1.useState)(false);
     const prevIsOpenRef = (0, react_1.useRef)(false);
     const [customDate, setCustomDate] = (0, react_1.useState)(value);
     const triggerRef = (0, react_1.useRef)(null);
@@ -74,19 +75,30 @@ const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, i
     const memoizedHandleClose = (0, react_1.useCallback)(() => {
         setIsOpen(false);
     }, [setIsOpen]);
+    const onReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
+        if (!isMobile) {
+            return;
+        }
+        if (isCurrentOpen) {
+            setRenderContent(true);
+            return;
+        }
+        setRenderContent(false);
+        prevIsOpenRef.current = isCurrentOpen;
+    }, [isMobile]);
     const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-inner__calendar-wrapper", children: (0, jsx_runtime_1.jsx)(dateInputInner_1.DateInputInner, { id: id || componentId, value: { from: customDate, to: undefined }, onChange: onCalendarChange, dateFormat: dateFormat, dateFormatter: dateFormatter, dateDeformatter: dateDeformatter, startDayOfWeek: weekStartsOnSunday ? 0 : 1, dateRangeMode: false, selectTime: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesAfter: disableDatesAfter, disableDatesBefore: disableDatesBefore, title: "", isMobileView: isMobile, requireSelection: requireSelection }) }), [componentId, customDate, dateDeformatter, dateFormat, dateFormatter, disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, id, isMobile, onCalendarChange, requireSelection, timeSelect, weekStartsOnSunday]);
     const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-input-popup-wrapper", driveWrapperClassName || ""]), ariaLabel: translate("Pick a date"), useTrapFocusWithTrigger: "on", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-input-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-input-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-input-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: isValueState || (requireSelection && !customDate), onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate, drivePopupClassName, driveWrapperClassName, handleApplyClick, handleClearClick, isDefaultState, isOpen, isValueState, requireSelection, title, translate]);
     const memoizedMobileFooter = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, disabled: isValueState || (requireSelection && !customDate), onClick: handleApplyClick, children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") })] }), [customDate, handleApplyClick, handleClearClick, isDefaultState, isValueState, requireSelection, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-input-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Pick a date"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: component }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, title, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-input-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Pick a date"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderContent ? component : null }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, renderContent, title, translate]);
     (0, react_1.useEffect)(() => {
-        if (!isOpen && prevIsOpenRef.current) {
+        if (!isMobile && !isOpen && prevIsOpenRef.current) {
             setTimeout(() => {
                 var _a;
                 (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, 0);
         }
         prevIsOpenRef.current = isOpen;
-    }, [isOpen]);
+    }, [isOpen, isMobile]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: id || undefined, htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: getButtonLabel() }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
 };
 exports.DateInput = DateInput;

package/dist/dateRange/dateRange.d.ts

@@ -5,6 +5,7 @@ import { IDateRangeValue, IDateRangeValueOptionalLabel, TDateRangeOption } from
 import { TButton } from "../button/buttonType";
 interface IDateRangeBase extends IZenComponentProps {
     options: TDateRangeOption[];
+    triggerLabel?: string;
     className?: string;
     classNamePopup?: string;
     classNameWrapper?: string;

package/dist/dateRange/dateRange.js

@@ -38,7 +38,7 @@ const parseLabel = (option, dateFormat, translate, toLacalFn) => {
 };
 exports.parseLabel = parseLabel;
 // eslint-disable-next-line complexity
-const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, error, allowUnsetValue = false, stepper = false, classNameWrapper }) => {
+const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, triggerLabel, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, error, allowUnsetValue = false, stepper = false, classNameWrapper }) => {
     var _a;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [alertReason, setAlertReason] = (0, react_1.useState)("");
@@ -53,6 +53,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     const previousStepOption = (0, react_1.useRef)("");
     const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
     const isDefaultState = !defaultValue && !selectedRange || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label);
+    const [renderContent, setRenderContent] = (0, react_1.useState)(false);
     const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const prevIsOpenRef = (0, react_1.useRef)(false);
@@ -183,6 +184,17 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     const memoizedHandleClose = (0, react_1.useCallback)(() => {
         setIsOpen(false);
     }, [setIsOpen]);
+    const onReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
+        if (!isMobile) {
+            return;
+        }
+        if (isCurrentOpen) {
+            setRenderContent(true);
+            return;
+        }
+        setRenderContent(false);
+        prevIsOpenRef.current = isCurrentOpen;
+    }, [isMobile]);
     const isValueNotChanged = (0, react_1.useMemo)(() => {
         if (!hasApplyButton) {
             return false;
@@ -194,6 +206,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     }, [customDate.from, customDate.to, hasApplyButton, isCustomDateOption, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.label, value === null || value === void 0 ? void 0 : value.to]);
     const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-range-popup-wrapper", driveWrapperPopupClassName || ""]), ariaLabel: translate("Date range"), useTrapFocusWithTrigger: "on", role: "dialog", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
                             (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-reset", type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), (isCustomDateOption || hasApplyButton) && (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate.from, customDate.to, drivePopupClassName, driveWrapperPopupClassName, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isOpen, isValueNotChanged, selectedRange, title, translate]);
+    const notFocusedComponent = (0, react_1.useMemo)(() => !range.from && !range.to, [range.from, range.to]);
     const memoizedMobileFooter = (0, react_1.useMemo)(() => {
         const clearButton = (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") });
         const cancelButton = hasApplyButton && !showMobileCalendar ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }) : null;
@@ -202,7 +215,8 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [applyButton, cancelButton, clearButton] });
     }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isValueNotChanged, selectedRange,
         showMobileCalendar, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-range-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: component }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, showMobileCalendar, title, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-range-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: notFocusedComponent ? false : true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderContent ? component : null }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, notFocusedComponent,
+        onReadyForFocus, renderContent, showMobileCalendar, title, translate]);
     const checkIsRangeDisable = (0, react_1.useCallback)((isIncrease) => {
         if (!selectedRange) {
             return true;
@@ -237,15 +251,15 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         setIsOpen(true);
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!isOpen && prevIsOpenRef.current) {
+        if (!isMobile && !isOpen && prevIsOpenRef.current) {
             setTimeout(() => {
                 var _a;
                 (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, 0);
         }
         prevIsOpenRef.current = isOpen;
-    }, [isOpen]);
-    const buttonLabel = (0, react_1.useMemo)(() => getButtonLabel((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)), [getButtonLabel, optionsMap, value]);
+    }, [isOpen, isMobile]);
+    const buttonLabel = (0, react_1.useMemo)(() => triggerLabel && !stepper ? triggerLabel : getButtonLabel((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)), [getButtonLabel, optionsMap, value, triggerLabel, stepper]);
     const currentLabel = (_a = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)) === null || _a === void 0 ? void 0 : _a.label;
     const cssClass = (0, classNames_1.classNames)([
         "zen-date-range",

package/dist/dropdown/dropdown.js

@@ -272,9 +272,12 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         newVal && controlData(currentAbort.signal, state.inputValue);
         !newVal && dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: "" });
     }, [controlData, state.inputValue]);
-    (0, react_1.useEffect)(() => {
+    const handleReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
         var _a;
-        if (!state.isOpenCombo || !state.showList) {
+        if (!state.showList) {
+            return;
+        }
+        if (!isCurrentOpen) {
             return;
         }
         const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
@@ -285,20 +288,21 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
         }
-    }, [state.isOpenCombo, state.currentId, state.showList, searchField]);
+    }, [searchField, state.currentId, state.showList, contentRef]);
     (0, react_1.useEffect)(() => {
         var _a;
-        if (!isMobile || !searchField) {
+        if (!state.isOpenCombo || !state.showList) {
             return;
         }
         const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
-        if (firstFocusable && (state.currentId && state.currentId !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID)) {
+        if (firstFocusable && (state.currentId || !searchField)) {
             firstFocusable.focus();
-            return;
         }
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
-    }, [isMobile, searchField, state.inputValue, inputRef, state.currentId]);
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
+        }
+    }, [state.isOpenCombo, state.currentId, state.showList, searchField]);
     (0, react_1.useEffect)(() => {
         if ((Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0) || !getNamedItems || getNamedItemsHasBeenCalled.current) {
             return undefined;
@@ -385,7 +389,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         : (0, dropdownHelper_1.getStringFromSelected)(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate);
     const memoizedCurrentSelection = (0, react_1.useMemo)(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
     const parentTriggerWidth = ((_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 420;
-    return (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, ref: comboboxRef, children: [(0, jsx_runtime_1.jsx)(dropdownTrigger_1.DropdownTrigger, { className: (0, classNames_1.classNames)([!width && !fullWidthTriggerButton && parentTriggerWidth < 420 && !searchField ? "zen-dropdown__trigger-button--width-parent" : ""]), currentSelection: memoizedCurrentSelection, isActive: state.isOpenCombo, id: inputId, disabled: disabled, count: showCounterPill ? countSelected : 0, fullWidth: fullWidthTriggerButton, inputValue: state.inputValue, placeholder: placeholder || translate("Filter by group"), searchField: searchField && !isMobile ? searchField : false, onSearchChange: onSearchChange, handleClick: handleTriggerClick, width: width && width > 420 ? 420 : width, title: title, triggerAriaLabel: triggerAriaLabel, triggerRef: triggerRef, inputRef: inputRef, buttonType: buttonType, error: error }), (0, jsx_runtime_1.jsx)(dropdownPopup_1.DropdownPopup, { alignment: alignment, triggerRef: triggerRef, classNamePopup: classNamePopup, isMobile: isMobile, dialogAriaLabel: dialogAriaLabel, disabled: disabled, filterName: filterName, hasApplyButton: hasApplyButton, inputId: inputId, isClearButtonDisabled: memoizedIsClearButtonDisabled, isApplyButtonDisabled: memoizedIsApplyButtonDisabled, isWithFooter: memoizedWithFooter, isOpenCombo: state.isOpenCombo, searchField: searchField, placeholder: placeholder, inputValue: state.inputValue, handleApplyClick: handleApplyClick, handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true), handleTriggerClick: handleTriggerClick, onInputChange: onInputChange, inputRef: inputRef, contentRef: contentRef, children: getPopupContent })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, ref: comboboxRef, children: [(0, jsx_runtime_1.jsx)(dropdownTrigger_1.DropdownTrigger, { className: (0, classNames_1.classNames)([!width && !fullWidthTriggerButton && parentTriggerWidth < 420 && !searchField ? "zen-dropdown__trigger-button--width-parent" : ""]), currentSelection: memoizedCurrentSelection, isActive: state.isOpenCombo, id: inputId, disabled: disabled, count: showCounterPill ? countSelected : 0, fullWidth: fullWidthTriggerButton, inputValue: state.inputValue, placeholder: placeholder || translate("Filter by group"), searchField: searchField && !isMobile ? searchField : false, onSearchChange: onSearchChange, handleClick: handleTriggerClick, width: width && width > 420 ? 420 : width, title: title, triggerAriaLabel: triggerAriaLabel, triggerRef: triggerRef, inputRef: inputRef, buttonType: buttonType, error: error }), (0, jsx_runtime_1.jsx)(dropdownPopup_1.DropdownPopup, { alignment: alignment, triggerRef: triggerRef, classNamePopup: classNamePopup, isMobile: isMobile, dialogAriaLabel: dialogAriaLabel, disabled: disabled, filterName: filterName, hasApplyButton: hasApplyButton, inputId: inputId, isClearButtonDisabled: memoizedIsClearButtonDisabled, isApplyButtonDisabled: memoizedIsApplyButtonDisabled, isWithFooter: memoizedWithFooter, isOpenCombo: state.isOpenCombo, searchField: searchField, placeholder: placeholder, inputValue: state.inputValue, handleApplyClick: handleApplyClick, handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true), handleTriggerClick: handleTriggerClick, onInputChange: onInputChange, inputRef: inputRef, contentRef: contentRef, onReadyForFocus: handleReadyForFocus, children: getPopupContent })] });
 };
 exports.Dropdown = Dropdown;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdownPopup.d.ts

@@ -24,5 +24,6 @@ export interface IDropdownPopup extends IZenComponentProps {
     onInputChange: (newValue?: string) => void;
     inputRef: React.MutableRefObject<HTMLInputElement>;
     contentRef: React.RefObject<HTMLDivElement>;
+    onReadyForFocus?: (isCurrentOpen: boolean) => void;
 }
 export declare const DropdownPopup: React.FC<IDropdownPopup>;

package/dist/dropdown/dropdownPopup.js

@@ -11,13 +11,9 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const searchInput_1 = require("../searchInput/searchInput");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const footerButtons_1 = require("../footerButtons/footerButtons");
-const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children }) => {
+const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const triggerId = (0, react_1.useId)();
-    const memoizedHandleClose = (0, react_1.useCallback)(() => {
-        onInputChange("");
-        handleTriggerClick(false);
-    }, [handleTriggerClick, onInputChange]);
     const memoizedHandleHide = (0, react_1.useCallback)(() => {
         handleTriggerClick(false);
     }, [handleTriggerClick]);
@@ -28,7 +24,7 @@ const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputV
         }
         return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
     }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, filterName, isOpenCombo, memoizedHandleClose, memoizedHandleHide, memoizedMobileContent, memoizedMobileFooter, placeholder, triggerRef]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, filterName, isOpenCombo, onReadyForFocus, memoizedHandleHide, memoizedMobileContent, memoizedMobileFooter, placeholder, triggerRef]);
     const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpenCombo, className: (0, classNames_1.classNames)(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "withTrigger", alignment: alignment, shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children }) }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, handleTriggerClick, isOpenCombo, placeholder, translate, triggerRef]);
     return isMobile ? memoizedMobileView : memoizedDesktopView;
 };