@geotab/zenith 3.0.1-beta.4 → 3.1.0-beta.0

package/dist/utils/keyboardHelpers.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFirstFocusableItem = exports.getNewFocusableItem = void 0;
+const focusableSelector_1 = require("./focusableSelector");
+const getNewFocusableItem = (step, container, specificSelector) => {
+    if (!container) {
+        return undefined;
+    }
+    const allFocusables = Array.from(container.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR));
+    const currentElement = document.activeElement;
+    if (allFocusables.length === 0) {
+        return undefined;
+    }
+    if (specificSelector) {
+        const matchingItems = allFocusables.filter(el => el.matches(specificSelector));
+        const currentSpecificIndex = matchingItems.indexOf(currentElement);
+        if (currentSpecificIndex !== -1 && matchingItems.length > 1) {
+            let nextIndex = currentSpecificIndex + step;
+            if (nextIndex >= matchingItems.length) {
+                nextIndex = 0;
+            }
+            if (nextIndex < 0) {
+                nextIndex = matchingItems.length - 1;
+            }
+            return matchingItems[nextIndex];
+        }
+    }
+    const currentIndex = allFocusables.indexOf(currentElement);
+    if (currentIndex === -1) {
+        return undefined;
+    }
+    const nextIndex = currentIndex + step;
+    if (nextIndex >= allFocusables.length) {
+        return allFocusables[0];
+    }
+    if (nextIndex < 0) {
+        return allFocusables[allFocusables.length - 1];
+    }
+    return allFocusables[nextIndex];
+};
+exports.getNewFocusableItem = getNewFocusableItem;
+const getFirstFocusableItem = (container) => {
+    if (!container) {
+        return undefined;
+    }
+    const allFocusables = Array.from(container.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR));
+    return allFocusables[0];
+};
+exports.getFirstFocusableItem = getFirstFocusableItem;

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Zavřít filtr",
     "Column Settings": "Nastavení sloupců",
     "Category": "Kategorie",
-    "Select visible columns": "Vyberte viditelné sloupce"
+    "Select visible columns": "Vyberte viditelné sloupce",
+    "Selected": "Vybráno"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Filter schließen",
     "Column Settings": "Spalteneinstellungen",
     "Category": "Kategorie",
-    "Select visible columns": "Sichtbare Spalten auswählen"
+    "Select visible columns": "Sichtbare Spalten auswählen",
+    "Selected": "Ausgewählt"
 };

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

@@ -292,4 +292,11 @@ export declare const translations: {
     "Date range filter:": string;
     "Date filter:": string;
     "Select visible columns": string;
+    Selected: string;
+    "No Filters Selected": string;
+    "Selected filters will appear here.": string;
+    "Currently selected": string;
+    "Top results": string;
+    "Open setting conditions popup": string;
+    "Close setting conditions popup": string;
 };

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

@@ -294,5 +294,12 @@ exports.translations = {
     "Category": "Category",
     "Date range filter:": "Date range filter:",
     "Date filter:": "Date filter:",
-    "Select visible columns": "Select visible columns"
+    "Select visible columns": "Select visible columns",
+    "Selected": "Selected",
+    "No Filters Selected": "No Filters Selected",
+    "Selected filters will appear here.": "Selected filters will appear here.",
+    "Currently selected": "Currently selected",
+    "Top results": "Top results",
+    "Open setting conditions popup": "Open setting conditions popup",
+    "Close setting conditions popup": "Close setting conditions popup"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Cerrar filtro",
     "Column Settings": "Configuración de columnas",
     "Category": "Categoría",
-    "Select visible columns": "Seleccionar columnas visibles"
+    "Select visible columns": "Seleccionar columnas visibles",
+    "Selected": "Seleccionado"
 };

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

@@ -243,4 +243,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -245,5 +245,6 @@ exports.translations = {
     "Close filter": "Fermer le filtre",
     "Column Settings": "Paramètres des colonnes",
     "Category": "Catégorie",
-    "Select visible columns": "Sélectionner les colonnes visibles"
+    "Select visible columns": "Sélectionner les colonnes visibles",
+    "Selected": "Sélectionné"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Fermer le filtre",
     "Column Settings": "Paramètres des colonnes",
     "Category": "Catégorie",
-    "Select visible columns": "Sélectionner les colonnes visibles"
+    "Select visible columns": "Sélectionner les colonnes visibles",
+    "Selected": "Sélectionné"
 };

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

@@ -245,4 +245,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -247,5 +247,6 @@ exports.translations = {
     "Close filter": "Tutup filter",
     "Column Settings": "Pengaturan Kolom",
     "Category": "Kategori",
-    "Select visible columns": "Pilih kolom yang terlihat"
+    "Select visible columns": "Pilih kolom yang terlihat",
+    "Selected": "Dipilih"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Chiudi filtro",
     "Column Settings": "Impostazioni colonna",
     "Category": "Categoria",
-    "Select visible columns": "Selezionare colonne visibili"
+    "Select visible columns": "Selezionare colonne visibili",
+    "Selected": "Selezionato"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "フィルターを閉じる",
     "Column Settings": "列の設定",
     "Category": "カテゴリ",
-    "Select visible columns": "表示列を選択"
+    "Select visible columns": "表示列を選択",
+    "Selected": "選択車両"
 };

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

@@ -251,4 +251,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -253,5 +253,6 @@ exports.translations = {
     "Close filter": "필터 닫기",
     "Column Settings": "열 설정",
     "Category": "범주",
-    "Select visible columns": "표시되는 열 선택"
+    "Select visible columns": "표시되는 열 선택",
+    "Selected": "선택됨"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Tutup penyaring",
     "Column Settings": "Tetapan Lajur",
     "Category": "Kategori",
-    "Select visible columns": "Pilih lajur yang boleh dilihat"
+    "Select visible columns": "Pilih lajur yang boleh dilihat",
+    "Selected": "Dipilih"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Filter sluiten",
     "Column Settings": "Kolominstellingen",
     "Category": "Categorie",
-    "Select visible columns": "Zichtbare kolommen selecteren"
+    "Select visible columns": "Zichtbare kolommen selecteren",
+    "Selected": "Geselecteerd"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Zamknij filtr",
     "Column Settings": "Ustawienia kolumn",
     "Category": "Kategoria",
-    "Select visible columns": "Wybierz widoczne kolumny"
+    "Select visible columns": "Wybierz widoczne kolumny",
+    "Selected": "Wybrano"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Fechar filtro",
     "Column Settings": "Configurações da coluna",
     "Category": "Categoria",
-    "Select visible columns": "Selecionar colunas visíveis"
+    "Select visible columns": "Selecionar colunas visíveis",
+    "Selected": "Selecionado"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Stäng filter",
     "Column Settings": "Kolumninställningar",
     "Category": "Kategori",
-    "Select visible columns": "Välj synbara kolumner"
+    "Select visible columns": "Välj synbara kolumner",
+    "Selected": "Valda"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "ปิดตัวกรอง",
     "Column Settings": "การตั้งค่าคอลัมน์",
     "Category": "หมวดหมู่",
-    "Select visible columns": "เลือกคอลัมน์ที่มองเห็นได้"
+    "Select visible columns": "เลือกคอลัมน์ที่มองเห็นได้",
+    "Selected": "เลือกแล้ว"
 };

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

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

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

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "Filtreyi kapat",
     "Column Settings": "Sütun Ayarları",
     "Category": "Kategori",
-    "Select visible columns": "Görünür sütunları seç"
+    "Select visible columns": "Görünür sütunları seç",
+    "Selected": "Seçildi"
 };

package/dist/utils/localization/translations/zh-Hans-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/dist/utils/localization/translations/zh-Hans-json.js

@@ -246,5 +246,6 @@ exports.translations = {
     "Close filter": "关闭筛选器",
     "Column Settings": "列设置",
     "Category": "类别",
-    "Select visible columns": "选择可见列"
+    "Select visible columns": "选择可见列",
+    "Selected": "选中的"
 };

package/dist/utils/localization/translations/zh-TW-json.d.ts

@@ -264,4 +264,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/dist/utils/localization/translations/zh-TW-json.js

@@ -266,5 +266,6 @@ exports.translations = {
     "Close filter": "關閉篩選器",
     "Column Settings": "欄設定",
     "Category": "種類",
-    "Select visible columns": "選取可見欄"
+    "Select visible columns": "選取可見欄",
+    "Selected": "已選取"
 };

package/esm/advancedGroupsFilter/advancedGroupsFilter.d.ts

@@ -12,6 +12,7 @@ export interface IAdvancedGroupsFilter extends IZenComponentProps {
     errorHandler: (e: Error) => void;
     dataItems?: IDropdownItem[];
     tooltipText?: string;
+    isMobile?: boolean;
 }
 export declare const AdvancedGroupsFilter: React.FC<IAdvancedGroupsFilter>;
 export declare const TRANSLATIONS: string[];

package/esm/advancedGroupsFilter/advancedGroupsFilter.js

@@ -5,7 +5,7 @@ import { AdvancedGroupsFilterForm, TRANSLATIONS as AdvancedGroupsFilterFormTrans
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { Modal } from "../modal/modal";
-export const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, className, getData, errorHandler, dataItems, tooltipText }) => {
+export const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, className, getData, errorHandler, dataItems, tooltipText, isMobile }) => {
     //const dropdownFocusedListClasses = ["zen-dropdown-searchable-trigger__input", "zen-dropdown-searchable-trigger__popup-trigger"];
     const [currentState, setCurrentState] = useState(prepareCurrentFilterState(state));
     const [dataItemsValue, setDataItemsValue] = useState(dataItems || []);
@@ -28,7 +28,7 @@ export const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, classNam
     const handleApply = () => {
         onApply(prepareToFilterState(currentState));
     };
-    return _jsxs(Modal, { title: translate("Advanced groups filter"), className: classNames(["zen-advanced-groups-filter", className || ""]), isOpen: isOpen, onClose: handleClose, children: [_jsx(AdvancedGroupsFilterForm, { dataItems: dataItemsValue, getData: getData, errorHandler: errorHandler, state: currentState, onStateChange: setCurrentState, tooltipText: tooltipText }), _jsx(Modal.SecondaryButton, { onClick: onClose, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleApply, children: translate("Apply") })] });
+    return _jsxs(Modal, { title: translate("Advanced groups filter"), className: classNames(["zen-advanced-groups-filter", className || ""]), isOpen: isOpen, modalContainerClassName: isMobile ? "zen-advanced-groups-filter-prioritized-modal" : undefined, onClose: handleClose, children: [_jsx(AdvancedGroupsFilterForm, { dataItems: dataItemsValue, getData: getData, errorHandler: errorHandler, state: currentState, onStateChange: setCurrentState, tooltipText: tooltipText }), _jsx(Modal.SecondaryButton, { onClick: onClose, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleApply, children: translate("Apply") })] });
 };
 export const TRANSLATIONS = [
     ...AdvancedGroupsFilterFormTranslations,

package/esm/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -9,9 +9,11 @@ import { getCurrentSelectionFromIds } from "./advancedGroupsFilterHelper";
 import { ENTIRE_ORGANIZATION_GROUP_ID } from "../groupsFilter/groupsHelper";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
 export const AdvancedGroupsFilterFormSection = ({ state, interSectionRelation, itemId, onInterSectionChange, onRelationChange, onRemoveCondition, onStateChange, getData, errorHandler, dataItems, isHasRemoveConditionButton, isHasTooltip, tooltipText }) => {
     const { translate } = useLanguage();
     const inputItem = useId();
+    const isMobile = useMobile();
     const [currentSelection, setCurrentSelection] = React.useState(getCurrentSelectionFromIds(state.items, dataItems));
     const isPrevEmptyComboItems = useRef(dataItems.length === 0);
     const comboboxRef = useRef(null);
@@ -58,7 +60,7 @@ export const AdvancedGroupsFilterFormSection = ({ state, interSectionRelation, i
                         ] }) }) }) : null, _jsxs("div", { className: "zen-advanced-groups-filter-form__main-section", children: [_jsxs("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--left", children: [_jsxs("div", { className: "zen-advanced-groups-filter-form__section-label zen-advanced-groups-filter-form__operator-section", children: [_jsx("div", { className: "zen-advanced-groups-filter-form__operator-label", children: translate("Operator") }), isHasTooltip && _jsx(AdvancedGroupsFilterSectionTooltip, { ariaLabel: "Information", text: tooltipText })] }), _jsx(GroupButton, { onChange: handleRelationChange, groupData: [
                                     { name: translate("And"), value: RelationOperator.AND, selected: state.relation === RelationOperator.AND },
                                     { name: translate("Or"), value: RelationOperator.OR, selected: state.relation === RelationOperator.OR }
-                                ] })] }), _jsxs("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--right", children: [_jsx("label", { className: "zen-advanced-groups-filter-form__section-label", children: translate("Groups") }), isHasRemoveConditionButton && _jsx("button", { type: "button", className: "zen-advanced-groups-filter-form__remove-button", "data-item": itemId, onClick: onRemoveCondition, children: translate("Remove condition") }), _jsxs("div", { className: "zen-advanced-groups-filter-form__combo-section", children: [_jsx("div", { className: "zen-advanced-groups-filter-form__combo-box", ref: comboboxRef, children: _jsx(Dropdown, { classNamePopup: "zen-advanced-groups-filter-form__popup", getData: getData, errorHandler: errorHandler, dataItems: dataItems, onChange: handleSelection, value: state.items.map((el) => el.id), placeholder: translate("Select groups…"), inputId: `${inputItem}-dropdown-${itemId}`, showCounterPill: true }) }), _jsx("div", { className: "zen-advanced-groups-filter-form__selected-box", ref: pillBoxRef, children: _jsx(ComboboxSelected, { selection: getCurrentSelectionFromIds(state.items, dataItems).map((el) => ({ id: el.id, name: el.name })), onRemove: handleRemove, pillEmptyText: ENTIRE_ORGANIZATION_GROUP_ID }) })] })] })] })] });
+                                ] })] }), _jsxs("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--right", children: [_jsx("label", { className: "zen-advanced-groups-filter-form__section-label", children: translate("Groups") }), isHasRemoveConditionButton && _jsx("button", { type: "button", className: "zen-advanced-groups-filter-form__remove-button", "data-item": itemId, onClick: onRemoveCondition, children: translate("Remove condition") }), _jsxs("div", { className: "zen-advanced-groups-filter-form__combo-section", children: [_jsx("div", { className: "zen-advanced-groups-filter-form__combo-box", ref: comboboxRef, children: _jsx(Dropdown, { classNamePopup: "zen-advanced-groups-filter-form__popup", getData: getData, mobileSheetStackingClassName: isMobile ? "zen-advanced-groups-filter-form__mobile-sheet-stacking" : undefined, errorHandler: errorHandler, dataItems: dataItems, onChange: handleSelection, value: state.items.map((el) => el.id), placeholder: translate("Select groups…"), inputId: `${inputItem}-dropdown-${itemId}`, showCounterPill: true }) }), _jsx("div", { className: "zen-advanced-groups-filter-form__selected-box", ref: pillBoxRef, children: _jsx(ComboboxSelected, { selection: getCurrentSelectionFromIds(state.items, dataItems).map((el) => ({ id: el.id, name: el.name })), onRemove: handleRemove, pillEmptyText: ENTIRE_ORGANIZATION_GROUP_ID }) })] })] })] })] });
 };
 export const TRANSLATIONS = [
     ...AdvancedGroupsFilterSectionTooltipTranslations,

package/esm/chip/chip.js

@@ -90,12 +90,12 @@ export const Chip = (props) => {
         isTriggerMode ? getChipTriggerStateClassName(!!disabled, isOpen, status) : getChipStateClassName(!!disabled, !!readonly, active, status),
         className !== null && className !== void 0 ? className : ""
     ], [driveChipClass, isTriggerMode, disabled, isOpen, status, readonly, active, className]);
-    const chipComponent = useMemo(() => _jsxs("label", { className: classNames(memoizedClasses), ref: ref, title: chipTitle, htmlFor: id || chipId, children: [_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 ? _jsx("div", { className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && _jsx("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: _jsx(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 chipComponent = useMemo(() => _jsxs("label", { className: classNames(memoizedClasses), ref: ref, title: title || chipTitle, htmlFor: id || chipId, children: [_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 ? _jsx("div", { className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && _jsx("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) })] }), [memoizedClasses, ref, title, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly,
+        children, driveTextClass, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive]);
     const chipTriggerComponent = useMemo(() => {
-        const extraAttributes = chipTitle ? { "aria-label": chipTitle } : {};
+        const extraAttributes = title ? { "aria-label": title } : chipTitle ? { "aria-label": chipTitle } : {};
         return _jsx("div", Object.assign({ role: "button", tabIndex: 0 }, extraAttributes, { onClick: handleClick, onKeyDown: chipTriggerKeyDownHandler, className: classNames(memoizedClasses), "data-id": id || chipId, ref: triggerRef, children: _jsxs("div", { className: "zen-chip__content-wrapper", children: [hasContent ? _jsx("div", { className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && _jsx("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) }), hasQuantity && quantity ? _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]);
+    }, [title, chipTitle, handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, driveTextClass,
+        children, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive, hasQuantity, quantity]);
     return isTriggerMode ? chipTriggerComponent : chipComponent;
 };

package/esm/dateInput/dateInput.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import "./dateInput.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-export interface IDateInput extends IZenComponentProps {
+import { IChipsParent } from "../chip/chip";
+export interface IDateInput extends IZenComponentProps, IChipsParent {
     defaultValue?: string;
     value: string | undefined;
     onChange: (value: string | undefined) => void;

package/esm/dateInput/dateInput.js

@@ -18,9 +18,12 @@ import { FormFieldError } from "../formFieldError/formFieldError";
 import { FooterButtons } from "../footerButtons/footerButtons";
 import { MobileSheet } from "../mobileSheet/mobileSheet";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, id, disabled, dropDownTitle, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, error, requireSelection = false, buttonLabel }) => {
+import { Chip } from "../chip/chip";
+import { useChipStatus } from "../chip/chipStatusProvider";
+export const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, id, disabled, dropDownTitle, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, error, requireSelection = false, chip, chipIcon, chipId, chipName, buttonLabel }) => {
     const { translate } = useLanguage();
     const isMobile = useMobile();
+    const chipStatus = useChipStatus();
     const drivePopupClassName = useDriveClassName("zen-date-input-popup");
     const driveWrapperClassName = useDriveClassName("zen-date-input-popup-wrapper");
     const { dateFormat, timeFormat, weekStartsOnSunday, toLocalDateTime } = useContext(userFormatContext);
@@ -66,6 +69,11 @@ export const DateInput = ({ className, classNamePopup, defaultValue, value, onCh
     const handleClearClick = useCallback(() => {
         setCustomDate(defaultValue);
     }, [defaultValue]);
+    const handleClearAndApply = useCallback(() => {
+        setCustomDate(defaultValue);
+        setIsOpen(false);
+        onChange(defaultValue);
+    }, [defaultValue, onChange]);
     useEffect(() => {
         setCustomDate(value);
     }, [value]);
@@ -98,7 +106,8 @@ export const DateInput = ({ className, classNamePopup, defaultValue, value, onCh
     }, [isOpen, isMobile]);
     const buttonCurrentLabel = getButtonLabel();
     const buttonCurrentTitle = getButtonLabel(true);
-    return _jsxs(_Fragment, { children: [_jsx(TextIconButton, { id: id || undefined, htmlType: "button", title: buttonCurrentTitle, icon: IconCalendar, iconPosition: ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonCurrentLabel }), isMobile ? memoizedMobileView : memoizedDesktopView, _jsx(FormFieldError, { error: error })] });
+    const chipTriggerComponent = useMemo(() => _jsx(Chip, { status: isDefaultState ? undefined : chipStatus || "active", title: isDefaultState ? chipName : buttonCurrentTitle, isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearAndApply, triggerRef: triggerRef, icon: chipIcon || IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonCurrentLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, chipName, buttonCurrentLabel, buttonCurrentTitle]);
+    return _jsxs(_Fragment, { children: [chip ? chipTriggerComponent : _jsx(TextIconButton, { id: id || undefined, htmlType: "button", title: buttonCurrentTitle, icon: IconCalendar, iconPosition: ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonCurrentLabel }), isMobile ? memoizedMobileView : memoizedDesktopView, _jsx(FormFieldError, { error: error })] });
 };
 export const TRANSLATIONS = [
     "Pick a date",

package/esm/dateRange/dateRange.js

@@ -24,6 +24,7 @@ import { useDrive } from "../utils/theme/useDrive";
 import { IconChevronRightSmall } from "../icons/iconChevronRightSmall";
 import { Chip } from "../chip/chip";
 import { useChipStatus } from "../chip/chipStatusProvider";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 export const parseLabel = (option, dateFormat, translate, toLacalFn) => {
     const localeFrom = toLacalFn(option.from);
     const localeTo = toLacalFn(option.to);
@@ -49,7 +50,7 @@ export const DateRange = ({ className, classNamePopup, defaultValue, value, onCh
     const optionsMap = useMemo(() => getOptionsPeriodMap(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
     const previousStepOption = useRef("");
     const [selectedRange, setSelectedRange] = useState(getSelectedRangeFromValue(optionsMap, value));
-    const [renderContent, setRenderContent] = useState(false);
+    const mobileContentRef = useRef(null);
     const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === CUSTOM_CALENDAR_ID;
     const [isOpen, setIsOpen] = useState(false);
     const prevIsOpenRef = useRef(false);
@@ -185,16 +186,17 @@ export const DateRange = ({ className, classNamePopup, defaultValue, value, onCh
         setIsOpen(false);
     }, [setIsOpen]);
     const onReadyForFocus = useCallback((isCurrentOpen) => {
+        var _a;
         if (!isMobile) {
             return;
         }
         if (isCurrentOpen) {
-            setRenderContent(true);
+            const focusableElement = (_a = mobileContentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+            focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.focus();
             return;
         }
-        setRenderContent(false);
         prevIsOpenRef.current = isCurrentOpen;
-    }, [isMobile]);
+    }, [isMobile, mobileContentRef]);
     const isValueNotChanged = useMemo(() => {
         if (!hasApplyButton) {
             return false;
@@ -206,7 +208,6 @@ export const DateRange = ({ className, classNamePopup, defaultValue, value, onCh
     }, [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 = useMemo(() => _jsx(ControlledPopup, { className: 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: _jsxs("div", { className: classNames(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [_jsx("div", { className: "zen-date-range-popup__header", children: title }), component, _jsxs("div", { className: "zen-date-range-popup__footer", children: [_jsx(Button, { className: "zen-date-range-popup__button-clear", type: ButtonType.Tertiary, disabled: !!isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
                             _jsx(Button, { className: "zen-date-range-popup__button-reset", type: ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), (isCustomDateOption || hasApplyButton) && _jsx(Button, { className: "zen-date-range-popup__button-apply", type: 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 = useMemo(() => !range.from && !range.to, [range.from, range.to]);
     const memoizedMobileFooter = useMemo(() => {
         const clearButton = _jsx(Button, { type: ButtonType.Tertiary, disabled: !!isDefaultState, onClick: handleClearClick, children: translate("Clear") });
         const cancelButton = hasApplyButton && !showMobileCalendar ? _jsx(Button, { type: ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }) : null;
@@ -215,8 +216,8 @@ export const DateRange = ({ className, classNamePopup, defaultValue, value, onCh
         return _jsxs(FooterButtons, { children: [applyButton, cancelButton, clearButton] });
     }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isValueNotChanged, selectedRange,
         showMobileCalendar, translate]);
-    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: 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: [_jsx(MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), _jsx(MobileSheet.Content, { children: renderContent ? component : null }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, notFocusedComponent,
-        onReadyForFocus, renderContent, showMobileCalendar, title, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: classNames(["zen-date-range-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: false, preventFirstFocus: true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, onReadyForFocus: onReadyForFocus, children: [_jsx(MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), _jsx(MobileSheet.Content, { children: _jsx("div", { ref: mobileContentRef, children: component }) }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter,
+        onReadyForFocus, showMobileCalendar, title, translate, mobileContentRef]);
     const checkIsRangeDisable = useCallback((isIncrease) => {
         if (!selectedRange) {
             return true;
@@ -254,7 +255,7 @@ export const DateRange = ({ className, classNamePopup, defaultValue, value, onCh
         !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === currentLabel || type && type !== ButtonType.Secondary ? "" : "zen-date-range--active"
     ]);
     const popupTriggerComponent = useMemo(() => _jsx(TextIconButton, { htmlType: "button", title: buttonTitle, icon: IconCalendar, iconPosition: ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonLabel }), [cssClass, type, disabled, toggleVisibility, buttonLabel, buttonTitle]);
-    const chipTriggerComponent = useMemo(() => _jsx(Chip, { status: isDefaultState ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon || IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel]);
+    const chipTriggerComponent = useMemo(() => _jsx(Chip, { status: isDefaultState ? undefined : chipStatus || "active", title: isDefaultState ? chipName : buttonTitle, isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon || IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel, buttonTitle]);
     return _jsxs(_Fragment, { children: [stepper ? _jsxs("div", { className: classNames(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]), children: [_jsx("button", { type: "button", disabled: checkIsRangeDisable(false), onClick: decreaseRange, className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--left"]), title: translate("Previous"), children: _jsx(IconChevronLeftSmall, { size: isDrive ? "huge" : "large" }) }), popupTriggerComponent, _jsx("button", { type: "button", disabled: checkIsRangeDisable(true), onClick: increaseRange, className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--right"]), title: translate("Next"), children: _jsx(IconChevronRightSmall, { size: isDrive ? "huge" : "large" }) })] }) : (chip ? chipTriggerComponent : popupTriggerComponent), isMobile ? memoizedMobileView : memoizedDesktopView, _jsx(FormFieldError, { error: error })] });
 };
 export const TRANSLATIONS = [

package/esm/dropdown/dropdown.d.ts

@@ -5,6 +5,7 @@ import { IColor } from "../groupsFilter/groupsFilterInterfaces";
 import { TFilterButton } from "../filterButton/filterButton";
 import { TAlignment } from "../absolute/absolute";
 import { IChipsParent } from "../chip/chip";
+export declare const LIST_LIMIT = 500;
 export interface ISelectionItem {
     id: string;
     name?: string;
@@ -49,6 +50,7 @@ interface IDropdownBase extends IChipsParent {
     isLoading?: boolean;
     alignment?: TAlignment;
     classNamePopup?: string;
+    mobileSheetStackingClassName?: string;
     error?: string;
     sortFn?: (a: IDropdownItem, b: IDropdownItem) => number;
     checkboxLabel?: string;