@geotab/zenith 1.26.4 → 1.26.5-beta.1

package/README.md

@@ -40,6 +40,12 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.26.5
+
+ * Fix min width of side panel on mobile
+ * Fix updating title of pills in `PillBox`
+ * Fix top border appearance of columns dropdown in `Table`
+
 ### 1.26.4
 
  * Improve accessibility of `Chart`

package/dist/absolute/absolute.js

@@ -25,7 +25,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
         var _a;
         prevScroll.current = (_a = e.target) === null || _a === void 0 ? void 0 : _a.scrollTop;
     };
-    const accessableAttr = (0, react_1.useMemo)(() => {
+    const accessibleAttr = (0, react_1.useMemo)(() => {
         if (!role) {
             return {};
         }
@@ -34,7 +34,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     const darkClassName = dark ? "zen-dark" : "";
     const renderPopup = () => {
         if (isOpen) {
-            const result = (0, jsx_runtime_1.jsx)("div", Object.assign({}, accessableAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children }));
+            const result = (0, jsx_runtime_1.jsx)("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children }));
             if (inline) {
                 return result;
             }

package/dist/chip/chip.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import "./chip.less";
+import { IZenComponentProps } from "./../commonHelpers/zenComponent";
+import { IIcon } from "../icons/icon";
+export interface IChipsParent {
+    chip?: boolean;
+    chipId?: string;
+    chipIcon?: React.FC<IIcon>;
+    chipName?: string;
+}
+export type TChipStatus = "default" | "success" | "active" | "accent";
+interface IChipBase extends IZenComponentProps {
+    disabled?: boolean;
+    icon?: React.FC<IIcon>;
+    id?: string;
+    status?: TChipStatus;
+    quantity?: undefined;
+    title?: string;
+    onClose?: (id: string) => void;
+}
+export interface IChip extends IChipBase {
+    readonly?: boolean;
+    onChange: (v: boolean) => void;
+    active: boolean;
+}
+export interface IChipTrigger extends Omit<IChipBase, "quantity"> {
+    triggerRef: React.Ref<HTMLElement>;
+    closeAriaText?: string;
+    isOpen: boolean;
+    quantity?: number;
+    onClick: (isOpen: boolean) => void;
+}
+type ChipProps = IChip | IChipTrigger;
+export declare const Chip: (props: ChipProps) => React.ReactElement;
+export {};

package/dist/chip/chip.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useDrive_1 = require("../utils/theme/useDrive");
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const getChipStateClassName_1 = require("./utils/getChipStateClassName");
+const iconClose_1 = require("../icons/iconClose");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const useChip_1 = require("./utils/useChip");
+function isChipTrigger(props) {
+    return "triggerRef" in props;
+}
+const Chip = (props) => {
+    const { className, children, disabled, icon, id, status, quantity, onClose, title } = props;
+    const isTriggerMode = isChipTrigger(props);
+    const readonly = !isTriggerMode ? props.readonly : undefined;
+    const onChange = !isTriggerMode ? props.onChange : undefined;
+    const active = !isTriggerMode ? props.active : false;
+    const triggerRef = isTriggerMode ? props.triggerRef : undefined;
+    const closeAriaText = isTriggerMode ? props.closeAriaText : undefined;
+    const isOpen = isTriggerMode ? props.isOpen : false;
+    const onClick = isTriggerMode ? props.onClick : undefined;
+    const hasQuantity = typeof quantity === "number";
+    const chipId = (0, react_1.useId)();
+    const isDrive = (0, useDrive_1.useDrive)();
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-chip-text-content");
+    const driveChipClass = (0, useDriveClassName_1.useDriveClassName)("zen-chip");
+    const hasIcon = !!icon;
+    const isClosable = !!onClose;
+    const hasContent = !!children;
+    const { ref, title: chipTitle } = (0, useChip_1.useChip)(title, isTriggerMode ? { triggerRef: triggerRef, children } : undefined);
+    const svgIcon = (0, react_1.useMemo)(() => hasIcon ? (0, react_1.createElement)(icon, {
+        className: "zen-chip__icon",
+        size: isDrive ? "huger" : "large"
+    }) : null, [hasIcon, icon, isDrive]);
+    const onChangeHandler = (0, react_1.useCallback)((e) => {
+        if (readonly || !onChange) {
+            return;
+        }
+        onChange(e.target.checked);
+    }, [onChange, readonly]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        if (onClick) {
+            onClick(!isOpen);
+        }
+    }, [onClick, isOpen]);
+    const onKeyDownHandler = (0, react_1.useCallback)((e) => {
+        if (e.key === "Enter" && !disabled && !readonly && onChange) {
+            onChange(!active);
+            return;
+        }
+        if (e.key === " " && !disabled && !readonly && onChange) {
+            e.preventDefault();
+            onChange(!active);
+        }
+    }, [disabled, readonly, active, onChange]);
+    const chipTriggerKeyDownHandler = (0, react_1.useCallback)((e) => {
+        var _a;
+        if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-chip__close-button")) {
+            return;
+        }
+        if (e.key === "Enter" && !disabled && !readonly) {
+            e.preventDefault();
+            handleClick();
+            return;
+        }
+        if (e.key === " " && !disabled && !readonly) {
+            handleClick();
+        }
+    }, [disabled, readonly, handleClick]);
+    const onKeyUpHandler = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-chip--keyboard-nav");
+        }
+    }, [ref]);
+    const onBlurHandler = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove("zen-chip--keyboard-nav");
+    }, [ref]);
+    const handleClose = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        isClosable && onClose(id || chipId);
+    }, [isClosable, onClose, id, chipId]);
+    const memoizedClasses = (0, react_1.useMemo)(() => [
+        "zen-chip",
+        driveChipClass !== null && driveChipClass !== void 0 ? driveChipClass : "",
+        isTriggerMode ? (0, getChipStateClassName_1.getChipTriggerStateClassName)(!!disabled, isOpen, status) : (0, getChipStateClassName_1.getChipStateClassName)(!!disabled, !!readonly, active, status),
+        className !== null && className !== void 0 ? className : ""
+    ], [driveChipClass, isTriggerMode, disabled, isOpen, status, readonly, active, className]);
+    const chipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(memoizedClasses), ref: ref, title: chipTitle, htmlFor: id || chipId, children: [(0, jsx_runtime_1.jsx)("input", { checked: active, onBlur: onBlurHandler, onKeyUp: onKeyUpHandler, onKeyDown: onKeyDownHandler, onChange: onChangeHandler, id: id || chipId, className: "zen-chip__input", type: "checkbox", disabled: disabled, readOnly: readonly }), children ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) })] }), [memoizedClasses, ref, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly, children, driveTextClass, svgIcon, isClosable,
+        handleClose, closeAriaText, translate, isDrive]);
+    const chipTriggerComponent = (0, react_1.useMemo)(() => {
+        const extraAttributes = chipTitle ? { "aria-label": chipTitle } : {};
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({ role: "button", tabIndex: 0 }, extraAttributes, { onClick: handleClick, onKeyDown: chipTriggerKeyDownHandler, className: (0, classNames_1.classNames)(memoizedClasses), "data-id": id || chipId, ref: triggerRef, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-chip__content-wrapper", children: [hasContent ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) }), hasQuantity && quantity ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chip__quantity", children: quantity }) : null] }) }));
+    }, [handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, chipTitle, driveTextClass, children, svgIcon, isClosable, handleClose,
+        closeAriaText, translate, isDrive, hasQuantity, quantity]);
+    return isTriggerMode ? chipTriggerComponent : chipComponent;
+};
+exports.Chip = Chip;

package/dist/chip/chipStatusProvider.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from "react";
+import { TChipStatus } from "./chip";
+export declare const chipStatusContext: import("react").Context<TChipStatus | undefined>;
+interface IChipStatusProviderProps extends PropsWithChildren {
+    status?: TChipStatus;
+}
+export declare const ChipStatusProvider: FC<IChipStatusProviderProps>;
+export declare const useChipStatus: () => TChipStatus | undefined;
+export {};

package/dist/chip/chipStatusProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChipStatus = exports.ChipStatusProvider = exports.chipStatusContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.chipStatusContext = (0, react_1.createContext)(undefined);
+const ChipStatusProvider = ({ status, children }) => ((0, jsx_runtime_1.jsx)(exports.chipStatusContext.Provider, { value: status, children: children }));
+exports.ChipStatusProvider = ChipStatusProvider;
+const useChipStatus = () => {
+    const status = (0, react_1.useContext)(exports.chipStatusContext);
+    return status;
+};
+exports.useChipStatus = useChipStatus;

package/dist/chip/utils/getChipStateClassName.d.ts

@@ -0,0 +1,2 @@
+export declare const getChipStateClassName: (disabled?: boolean, readonly?: boolean, active?: boolean, status?: "default" | "success" | "active" | "accent") => string;
+export declare const getChipTriggerStateClassName: (disabled?: boolean, isOpen?: boolean, status?: "default" | "success" | "active" | "accent") => string;

package/dist/chip/utils/getChipStateClassName.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChipTriggerStateClassName = exports.getChipStateClassName = void 0;
+const getChipStateClassName = (disabled = false, readonly = false, active = false, status) => {
+    if (status && !disabled) {
+        return `zen-chip--${status}`;
+    }
+    if (disabled) {
+        return "zen-chip--disabled";
+    }
+    if (readonly) {
+        return "zen-chip--readonly";
+    }
+    if (active) {
+        return "zen-chip--active";
+    }
+    return "zen-chip--default";
+};
+exports.getChipStateClassName = getChipStateClassName;
+const getChipTriggerStateClassName = (disabled = false, isOpen = false, status) => {
+    if (status && !disabled) {
+        return `zen-chip--${status}`;
+    }
+    if (disabled) {
+        return "zen-chip--disabled";
+    }
+    if (isOpen) {
+        return "zen-chip--active";
+    }
+    return "zen-chip--default";
+};
+exports.getChipTriggerStateClassName = getChipTriggerStateClassName;

package/dist/chip/utils/useChip.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ITriggerModeProps {
+    triggerRef: React.Ref<HTMLElement>;
+    children: React.ReactNode;
+}
+export declare const useChip: (initialTitle?: string, triggerModeProps?: ITriggerModeProps) => {
+    ref: import("react").RefObject<HTMLElement>;
+    title: string;
+};
+export {};

package/dist/chip/utils/useChip.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChip = void 0;
+const react_1 = require("react");
+const useChip = (initialTitle, triggerModeProps) => {
+    const ref = (0, react_1.useRef)(null);
+    const [title, setTitle] = (0, react_1.useState)(initialTitle || "");
+    (0, react_1.useLayoutEffect)(() => {
+        if (initialTitle) {
+            return;
+        }
+        if (triggerModeProps === undefined && ref.current) {
+            setTitle(ref.current.textContent || "");
+        }
+        if (triggerModeProps !== undefined && triggerModeProps.triggerRef) {
+            const { triggerRef } = triggerModeProps;
+            if ("current" in triggerRef && triggerRef.current instanceof HTMLElement) {
+                setTitle(triggerRef.current.textContent || "");
+            }
+        }
+    }, [ref, initialTitle, triggerModeProps]);
+    return { ref, title };
+};
+exports.useChip = useChip;

package/dist/commonHelpers/hooks/useDebouncedMemo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useDebouncedMemo<T>(factory: () => T, deps: React.DependencyList, delay: number): T;

package/dist/commonHelpers/hooks/useDebouncedMemo.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebouncedMemo = void 0;
+const react_1 = require("react");
+function useDebouncedMemo(factory, deps, delay) {
+    const [state, setState] = (0, react_1.useState)(() => factory());
+    const mountedRef = (0, react_1.useRef)(false);
+    const timeoutRef = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => {
+        if (mountedRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => {
+                setState(factory());
+            }, delay);
+        }
+        else {
+            mountedRef.current = true;
+        }
+        return () => {
+            clearTimeout(timeoutRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [delay, factory, ...deps]);
+    return state;
+}
+exports.useDebouncedMemo = useDebouncedMemo;

package/dist/commonStyles/shadows/shadows.less

@@ -4,4 +4,8 @@
 
 .zen-card-shadow {
     box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
+}
+
+.zen-chip-shadow {
+    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
 }

package/dist/dateRange/dateRange.d.ts

@@ -3,7 +3,8 @@ import "./dateRange.less";
 import { IZenComponentProps } from "./../commonHelpers/zenComponent";
 import { IDateRangeValue, IDateRangeValueOptionalLabel, TDateRangeOption } from "./dateRangeUtils";
 import { TButton } from "../button/buttonType";
-interface IDateRangeBase extends IZenComponentProps {
+import { IChipsParent } from "../chip/chip";
+interface IDateRangeBase extends IZenComponentProps, IChipsParent {
     options: TDateRangeOption[];
     triggerLabel?: string;
     className?: string;

package/dist/dateRange/dateRange.js

@@ -25,6 +25,8 @@ const areMapsEqual_1 = require("./utils/areMapsEqual");
 const iconChevronLeftSmall_1 = require("../icons/iconChevronLeftSmall");
 const useDrive_1 = require("../utils/theme/useDrive");
 const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
+const chip_1 = require("../chip/chip");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
 const parseLabel = (option, dateFormat, translate, toLacalFn) => {
     const localeFrom = toLacalFn(option.from);
     const localeTo = toLacalFn(option.to);
@@ -37,11 +39,12 @@ 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, triggerLabel, 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, chip, chipId, chipName, chipIcon }) => {
     var _a;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
     const driveWrapperTriggerClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-wrapper");
     const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup");
     const driveWrapperPopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup-wrapper");
@@ -254,7 +257,8 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === currentLabel || type && type !== buttonType_1.ButtonType.Secondary ? "" : "zen-date-range--active"
     ]);
     const popupTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonLabel }), [cssClass, type, disabled, toggleVisibility, buttonLabel]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stepper ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]), children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: checkIsRangeDisable(false), onClick: decreaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--left"]), title: translate("Previous"), children: (0, jsx_runtime_1.jsx)(iconChevronLeftSmall_1.IconChevronLeftSmall, { size: isDrive ? "huge" : "large" }) }), popupTriggerComponent, (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: checkIsRangeDisable(true), onClick: increaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--right"]), title: translate("Next"), children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: isDrive ? "huge" : "large" }) })] }) : popupTriggerComponent, isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
+    const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: isDefaultState ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon || iconCalendar_1.IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel]);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stepper ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]), children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: checkIsRangeDisable(false), onClick: decreaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--left"]), title: translate("Previous"), children: (0, jsx_runtime_1.jsx)(iconChevronLeftSmall_1.IconChevronLeftSmall, { size: isDrive ? "huge" : "large" }) }), popupTriggerComponent, (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: checkIsRangeDisable(true), onClick: increaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--right"]), title: translate("Next"), children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: isDrive ? "huge" : "large" }) })] }) : (chip ? chipTriggerComponent : popupTriggerComponent), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
 };
 exports.DateRange = DateRange;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdown.d.ts

@@ -4,6 +4,7 @@ import { IEntityWithId } from "../commonHelpers/entity";
 import { IColor } from "../groupsFilter/groupsFilterInterfaces";
 import { TFilterButton } from "../filterButton/filterButton";
 import { TAlignment } from "../absolute/absolute";
+import { IChipsParent } from "../chip/chip";
 export interface ISelectionItem {
     id: string;
     name?: string;
@@ -15,7 +16,14 @@ export interface IDropdownItem extends IEntityWithId {
     color?: IColor;
     disabled?: boolean;
 }
-interface IDropdownBase {
+interface IFetchState<T> {
+    data: T | undefined;
+    isLoading: boolean;
+    error: Error | null;
+}
+export interface IFetchDropdownState extends IFetchState<IDropdownItem[]> {
+}
+interface IDropdownBase extends IChipsParent {
     /**
     * @deprecated
     * @param translate - will be removed in the next major release
@@ -49,6 +57,9 @@ interface IDropdownBase {
     error?: string;
     sortFn?: (a: IDropdownItem, b: IDropdownItem) => number;
     checkboxLabel?: string;
+    setSearch?: (value: string) => void;
+    setChecked?: (value: boolean) => void;
+    fetchState?: IFetchDropdownState;
 }
 export interface IDropdownValueFullSelection {
     selected: string[];
@@ -98,14 +109,18 @@ export interface IDropdown extends IDropdownBase {
 export interface IDropdownWithCheckbox extends Omit<IDropdown, "value" | "onChange" | "getData" | "defaultValue"> {
     checkboxLabel: string;
     value: IDropdownWithCheckboxValue;
-    getData: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownItem[]>;
+    getData?: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownItem[]>;
+    setChecked?: (value: boolean) => void;
+    fetchState?: IFetchDropdownState;
     defaultValue?: IDropdownWithCheckboxValue;
     onChange: (selected: IDropdownWithCheckboxSelected) => void;
 }
 export interface IDropdownFullSelectionWithCheckbox extends Omit<IDropdownFullSelection, "value" | "onChange" | "getData" | "defaultValue"> {
     checkboxLabel: string;
     value: IDropdownValueFullSelectionWithCheckbox;
-    getData: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownItem[]>;
+    getData?: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownItem[]>;
+    setChecked?: (value: boolean) => void;
+    fetchState?: IFetchDropdownState;
     defaultValue?: IDropdownValueFullSelectionWithCheckbox;
     onChange: (selected: IDropdownFullSelectedValueWithCheckbox) => void;
 }

package/dist/dropdown/dropdown.js

@@ -19,16 +19,20 @@ const dropdownPopup_1 = require("./dropdownPopup");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const useDebounce_1 = require("../commonHelpers/hooks/useDebounce");
 const skeletonList_1 = require("../skeletonList/skeletonList");
-const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = 500, alignment = "bottom-left", error, sortFn, checkboxLabel }) => {
+const chip_1 = require("../chip/chip");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, fetchState, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = 500, alignment = "bottom-left", error, sortFn, checkboxLabel, chip, chipId, chipName, chipIcon, setChecked, setSearch }) => {
     var _a;
     const isFullSelectionMode = (0, react_1.useMemo)(() => typeof value === "object" &&
         "selected" in value &&
         Array.isArray(value.selected) &&
         "isAllSelected" in value &&
         typeof value.isAllSelected === "boolean", [value]);
+    const isQueryMode = (0, react_1.useMemo)(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
     const isCheckboxMode = (0, react_1.useMemo)(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
     const [initialInChecked] = (0, react_1.useState)(isCheckboxMode ? value.isChecked : undefined);
-    const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(isFullSelectionMode, dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, defaultValue ? (isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue) : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined) : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined));
+    const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, defaultValue ? (isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue) : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined) : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined));
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
     const isMobile = (0, useMobile_1.useMobile)();
     const abortToken = (0, react_1.useRef)(new AbortController());
     const triggerRef = (0, react_1.useRef)(null);
@@ -40,7 +44,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const { translate } = (0, useLanguage_1.useLanguage)();
     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 previousMapDataItems = (0, react_1.useRef)(isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : (!getData && (dataItems === null || dataItems === void 0 ? void 0 : dataItems.length) ? dataItems : []));
     const prevIsLoading = (0, react_1.useRef)(isLoading);
     const prevIsChecked = (0, react_1.useRef)(isCheckboxMode ? value.isChecked : undefined);
     const currentAllSelected = (0, react_1.useMemo)(() => (state.isNestedList || !multiselect || !isFullSelectionMode)
@@ -51,9 +55,9 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         const timeoutId = setTimeout(() => {
             if (Object.keys(state.groupsMap).length === 0 && getData) {
                 const currentAbort = abortToken.current;
-                (initialInChecked !== undefined ? getData(currentAbort.signal, undefined, initialInChecked) : getData(currentAbort.signal, undefined)).then((data) => {
-                    data.length && dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: data });
-                    previousMapDataItems.current = [...data];
+                (initialInChecked !== undefined ? getData(currentAbort.signal, undefined, initialInChecked) : getData(currentAbort.signal, undefined)).then((dta) => {
+                    dta.length && dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: dta });
+                    previousMapDataItems.current = [...dta];
                 }).catch(errorHandler);
             }
         });
@@ -96,7 +100,10 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
             return;
         }
         const promises = [];
-        ids.forEach(id => {
+        Array.from(ids).forEach((id, ind) => {
+            if (ind > 99) {
+                return;
+            }
             const itemOrPromise = getSelectedItem(id);
             promises.push(Promise.resolve(itemOrPromise));
         });
@@ -125,7 +132,8 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const handleChangeCurrentId = (0, react_1.useCallback)((id) => {
         dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: id });
         dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: "" });
-    }, []);
+        isQueryMode && setSearch && setSearch("");
+    }, [isQueryMode, setSearch]);
     const handleBackButtonClick = (0, react_1.useCallback)(() => {
         var _a, _b;
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -182,8 +190,8 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
             dispatchState({ type: stateActionType_1.StateActionType.DeselectItemsFromAllSelected, payload: undefined });
             return;
         }
-        (0, dropdownHelper_1.getDataForChange)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds, isAllSelect)
-            .forEach(el => dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { itemId: el.id, value: !isAllSelect } }));
+        const dataForChange = (0, dropdownHelper_1.getDataForChange)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds, isAllSelect);
+        dispatchState({ type: stateActionType_1.StateActionType.ChangeBulkSelection, payload: { itemsIds: dataForChange, value: !isAllSelect } });
     }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
     const handleClearClick = (0, react_1.useCallback)(() => {
         dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
@@ -221,25 +229,47 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const customGetData = (0, react_1.useCallback)((str) => (str && dataItems
         ? Promise.resolve(dataItems.filter(el => { var _a; return (((_a = el.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "").indexOf(str.trim().toLocaleLowerCase()) > -1; }))
         : Promise.resolve(dataItems || [])), [dataItems]);
-    const handleData = (0, react_1.useCallback)((data, searchVal) => {
-        if (data.length && !searchVal && (getData || dataItems)) {
-            dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: data });
-            previousMapDataItems.current = [...data];
+    const handleData = (0, react_1.useCallback)((dta, searchVal) => {
+        if (dta.length && !searchVal && (getData || dataItems || isQueryMode)) {
+            dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: dta });
+            previousMapDataItems.current = [...dta];
         }
-        dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: data });
+        dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: dta });
         searchVal && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-        data.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
-    }, [getData, dataItems]);
+        dta.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
+    }, [getData, dataItems, isQueryMode]);
     const handleError = (0, react_1.useCallback)((e) => {
         errorHandler(e);
         dispatchState({ type: stateActionType_1.StateActionType.NothingToShow, payload: undefined });
     }, [errorHandler]);
-    const debouncedGetData = (0, useDebounce_1.useDebounce)((signal, searchValue, isChecked) => getData ? (isCheckboxMode ? getData(signal, searchValue, isChecked) : getData(signal, searchValue)).then((data) => handleData(data, searchValue)).catch(handleError)
-        : customGetData(searchValue).then((data) => handleData(data, searchValue)).catch(handleError), 200);
+    const handleDataQuery = (0, react_1.useCallback)((dta, searchVal) => {
+        if (dta.length && !searchVal && !(0, dropdownHelper_1.compareObjectsArrays)(dta, previousMapDataItems.current)) {
+            dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: dta });
+            previousMapDataItems.current = [...dta];
+        }
+        dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: dta });
+        searchVal && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
+        dta.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
+    }, []);
+    const handleQueryMode = (0, react_1.useCallback)((searchValue, isChecked) => {
+        setChecked && isChecked !== undefined && setChecked(isChecked);
+        setSearch && setSearch(searchValue || "");
+    }, [setChecked, setSearch]);
+    const debouncedGetData = (0, useDebounce_1.useDebounce)((signal, searchValue, isChecked) => getData ? (isCheckboxMode ? getData(signal, searchValue, isChecked) : getData(signal, searchValue)).then((dta) => handleData(dta, searchValue)).catch(handleError)
+        : customGetData(searchValue).then((dta) => handleData(dta, searchValue)).catch(handleError), 200);
     const controlData = (0, react_1.useCallback)((signal, searchValue, isChecked) => {
-        dispatchState({ type: stateActionType_1.StateActionType.ShowWaiting, payload: undefined });
-        debouncedGetData(signal, searchValue, isChecked);
-    }, [debouncedGetData]);
+        !isQueryMode && dispatchState({ type: stateActionType_1.StateActionType.ShowWaiting, payload: undefined });
+        isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
+    }, [debouncedGetData, handleQueryMode, isQueryMode]);
+    (0, react_1.useEffect)(() => {
+        const timeoutId = setTimeout(() => {
+            if (!isQueryMode || (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading)) {
+                return;
+            }
+            handleDataQuery((fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [], state.inputValue);
+        });
+        return () => clearTimeout(timeoutId);
+    }, [fetchState === null || fetchState === void 0 ? void 0 : fetchState.data, handleDataQuery, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, isQueryMode, state.inputValue]);
     (0, react_1.useEffect)(() => {
         // when change inside
         if (hasApplyButton) {
@@ -293,8 +323,8 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         dispatchState({ type: stateActionType_1.StateActionType.SetState,
             payload: { selected: selectedValue, isAllSelected: isAllSelectedValue } });
         isCheckboxMode && isCheckedValue !== undefined && dispatchState({ type: stateActionType_1.StateActionType.SetIsChecked, payload: isCheckedValue });
-    }, [value, state.selectedIds, state.globalSelectedIds, hasApplyButton, isFullSelectionMode, state.isAllSelected, state.globalIsAllSelected, isCheckboxMode,
-        state.globalIsChecked, state.isChecked]);
+    }, [value, state.selectedIds, state.globalSelectedIds, hasApplyButton, isFullSelectionMode, state.isAllSelected,
+        state.globalIsAllSelected, isCheckboxMode, state.globalIsChecked, state.isChecked]);
     (0, react_1.useEffect)(() => {
         if (!isCheckboxMode || prevIsChecked.current === undefined) {
             return;
@@ -425,12 +455,12 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         if (currentWidth && currentWidth < 180) {
             currentWidth = 180;
         }
-        if (state.showWaiting || isLoading) {
+        if (state.showWaiting || isLoading || (isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading))) {
             return (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-dropdown-list__container zen-dropdown-list__container--empty", width: currentWidth });
         }
-        if (state.showEmptyList) {
+        if (state.showEmptyList || (isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.error))) {
             const isClearButtonDisabled = (0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, state.defaultValue);
-            return (0, jsx_runtime_1.jsx)(dropdownList_1.EmptyList, { width: currentWidth, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, hasApplyButton: hasApplyButton, isApplyDisabled: (0, dropdownHelper_1.compareStringsArrays)(state.globalSelectedIds, state.selectedIds), isClearButtonDisabled: isClearButtonDisabled, isWithFooter: memoizedWithFooter && Object.keys(state.groupsMap).length === 0 && ((!hasApplyButton && !isClearButtonDisabled) || hasApplyButton || false) });
+            return (0, jsx_runtime_1.jsx)(dropdownList_1.EmptyList, { width: currentWidth, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, hasApplyButton: hasApplyButton, isApplyDisabled: (0, dropdownHelper_1.compareStringsArrays)(state.globalSelectedIds, state.selectedIds), isClearButtonDisabled: isClearButtonDisabled, isWithFooter: memoizedWithFooter && Object.keys(state.groupsMap).length === 0 && ((!hasApplyButton && !isClearButtonDisabled) || hasApplyButton || false), hasError: state.showEmptyList && (isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.error) !== null) });
         }
         if (state.showList) {
             const isSearchMode = state.inputValue && !state.currentId;
@@ -449,15 +479,17 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
                         (((_c = state.groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)), isClearButtonDisabled: memoizedIsClearButtonDisabled, isWithFooter: memoizedWithFooter && !isMobile, isMobile: isMobile, handleCheckboxChange: isCheckboxMode && !isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked });
         }
         return null;
-    }, [state, isLoading, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, translate, sortFn, listLimit, multiselect, currentAllSelected,
-        handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection,
-        width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, memoizedWithFooter, checkboxLabel, isCheckboxMode, handleCheckboxChange]);
+    }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton,
+        memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch,
+        handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width,
+        selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel]);
     const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected ||
         isFullSelectionMode && !hasApplyButton && state.isAllSelected ? (0, dropdownHelper_1.getStringFromAllSelected)(state.groupsMap, translate)
         : (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, onReadyForFocus: handleReadyForFocus, handleCheckboxChange: isCheckboxMode && isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked, children: getPopupContent })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, ref: comboboxRef, children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: memoizedIsClearButtonDisabled ? undefined : chipStatus || "active", isOpen: state.isOpenCombo, disabled: disabled, onClick: handleTriggerClick, onClose: memoizedIsClearButtonDisabled ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon, id: chipId, children: currentStringFromSelected || chipName }) :
+                (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, handleCheckboxChange: isCheckboxMode && isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked, isSearchInPopup: chip, children: getPopupContent })] });
 };
 exports.Dropdown = Dropdown;
 exports.TRANSLATIONS = [