@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/dist/dropdownRaw/dropdownList.js

@@ -1,30 +1,242 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.DropdownList = exports.EmptyList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("da-DK", "Error Loading Items", "Fejl ved indl\xE6sning af varer");
+injectString("en", "Error Loading Items", "Error Loading Items");
+injectString("fi-FI", "Error Loading Items", "Virhe ladattaessa kohteita");
+injectString("hu-HU", "Error Loading Items", "Hiba t\xF6rt\xE9nt az elemek bet\xF6lt\xE9sekor");
+injectString("nb-NO", "Error Loading Items", "Feil ved lasting av elementer");
+injectString("sk-SK", "Error Loading Items", "Chyba pri na\u010D\xEDtavan\xED polo\u017Eiek");
+injectString("cs", "No data", "\u017D\xE1dn\xE1 data");
+injectString("da-DK", "No data", "Ingen data");
+injectString("de", "No data", "Keine Daten");
+injectString("en", "No data", "No data");
+injectString("es", "No data", "No hay datos");
+injectString("fi-FI", "No data", "Ei tietoja");
+injectString("fr", "No data", "Pas de donn\xE9es");
+injectString("fr-FR", "No data", "Aucune donn\xE9e");
+injectString("hu-HU", "No data", "Nincs adat");
+injectString("id", "No data", "Tidak ada data");
+injectString("it", "No data", "Nessun dato");
+injectString("ja", "No data", "\u30C7\u30FC\u30BF\u306A\u3057");
+injectString("ko-KR", "No data", "\uB370\uC774\uD130 \uC5C6\uC74C");
+injectString("ms", "No data", "Tiada data");
+injectString("nb-NO", "No data", "Ingen data");
+injectString("nl", "No data", "Geen gegevens");
+injectString("pl", "No data", "Brak danych");
+injectString("pt-BR", "No data", "Sem dados");
+injectString("sk-SK", "No data", "\u017Diadne \xFAdaje");
+injectString("sv", "No data", "Inga data");
+injectString("th", "No data", "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
+injectString("tr", "No data", "Veri yok");
+injectString("zh-Hans", "No data", "\u65E0\u6570\u636E");
+injectString("zh-TW", "No data", "\u7121\u8CC7\u6599");
+injectString("cs", "Clear", "Vymazat");
+injectString("da-DK", "Clear", "Ryd");
+injectString("de", "Clear", "L\xF6schen");
+injectString("en", "Clear", "Clear");
+injectString("es", "Clear", "Borrar");
+injectString("fi-FI", "Clear", "Tyhjenn\xE4");
+injectString("fr", "Clear", "Effacer");
+injectString("fr-FR", "Clear", "Effacer");
+injectString("hu-HU", "Clear", "T\xF6r\xF6ld.");
+injectString("id", "Clear", "Hapus");
+injectString("it", "Clear", "Cancella");
+injectString("ja", "Clear", "\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear", "\uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear", "Kosongkan");
+injectString("nb-NO", "Clear", "T\xF8m");
+injectString("nl", "Clear", "Wissen");
+injectString("pl", "Clear", "Wyczy\u015B\u0107");
+injectString("pt-BR", "Clear", "Limpar");
+injectString("sk-SK", "Clear", "Vyma\u017E");
+injectString("sv", "Clear", "Rensa");
+injectString("th", "Clear", "\u0E25\u0E49\u0E32\u0E07");
+injectString("tr", "Clear", "Temizle");
+injectString("zh-Hans", "Clear", "\u6E05\u9664");
+injectString("zh-TW", "Clear", "\u6E05\u9664");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
+injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
+injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
+injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
+injectString("en", "Deselect all", "Deselect all");
+injectString("es", "Deselect all", "Deseleccionar todo");
+injectString("fi-FI", "Deselect all", "Poista kaikki valinnat");
+injectString("fr", "Deselect all", "D\xE9s\xE9lectionner tout");
+injectString("fr-FR", "Deselect all", "D\xE9s\xE9lectionner tout");
+injectString("hu-HU", "Deselect all", "Ne v\xE1lassz ki semmit.");
+injectString("id", "Deselect all", "Batalkan pilih semua");
+injectString("it", "Deselect all", "Deselezionare tutto");
+injectString("ja", "Deselect all", "\u3059\u3079\u3066\u3092\u9078\u629E\u89E3\u9664");
+injectString("ko-KR", "Deselect all", "\uBAA8\uB450 \uC120\uD0DD \uCDE8\uC18C");
+injectString("ms", "Deselect all", "Nyahpilih semua");
+injectString("nb-NO", "Deselect all", "Fjern alle valg");
+injectString("nl", "Deselect all", "Alles deselecteren");
+injectString("pl", "Deselect all", "Usu\u0144 wyb\xF3r wszystkich");
+injectString("pt-BR", "Deselect all", "Desmarcar tudo");
+injectString("sk-SK", "Deselect all", "Zru\u0161 v\xFDber v\u0161etk\xFDch.");
+injectString("sv", "Deselect all", "Avmarkera alla");
+injectString("th", "Deselect all", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
+injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
+injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
+injectString("cs", "Select all", "Vybrat v\u0161e");
+injectString("da-DK", "Select all", "V\xE6lg alle");
+injectString("de", "Select all", "Alle ausw\xE4hlen");
+injectString("en", "Select all", "Select all");
+injectString("es", "Select all", "Seleccionar todo");
+injectString("fi-FI", "Select all", "Valitse kaikki");
+injectString("fr", "Select all", "S\xE9lectionner tout");
+injectString("fr-FR", "Select all", "S\xE9lectionner tout");
+injectString("hu-HU", "Select all", "V\xE1laszd ki az \xF6sszeset.");
+injectString("id", "Select all", "Pilih semua");
+injectString("it", "Select all", "Selezionare tutto");
+injectString("ja", "Select all", "\u3059\u3079\u3066\u9078\u629E");
+injectString("ko-KR", "Select all", "\uBAA8\uB450 \uC120\uD0DD");
+injectString("ms", "Select all", "Pilih semua");
+injectString("nb-NO", "Select all", "Velg alle");
+injectString("nl", "Select all", "Alles selecteren");
+injectString("pl", "Select all", "Wybierz wszystko");
+injectString("pt-BR", "Select all", "Selecionar tudo");
+injectString("sk-SK", "Select all", "Vyber v\u0161etko.");
+injectString("sv", "Select all", "V\xE4lj alla");
+injectString("th", "Select all", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
+injectString("zh-Hans", "Select all", "\u5168\u9009");
+injectString("zh-TW", "Select all", "\u5168\u9078");
+injectString("cs", "Select option", "Vybrat mo\u017Enost");
+injectString("da-DK", "Select option", "V\xE6lg mulighed");
+injectString("de", "Select option", "Option ausw\xE4hlen");
+injectString("en", "Select option", "Select option");
+injectString("es", "Select option", "Seleccionar opci\xF3n");
+injectString("fi-FI", "Select option", "Valitse vaihtoehto");
+injectString("fr", "Select option", "S\xE9lectionnez l\u2019option");
+injectString("fr-FR", "Select option", "S\xE9lectionner une option");
+injectString("hu-HU", "Select option", "V\xE1laszd ki az opci\xF3t.");
+injectString("id", "Select option", "Pilih opsi");
+injectString("it", "Select option", "Selezionare l'opzione");
+injectString("ja", "Select option", "\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u9078\u629E");
+injectString("ko-KR", "Select option", "\uC635\uC158 \uC120\uD0DD");
+injectString("ms", "Select option", "Pilih pilihan");
+injectString("nb-NO", "Select option", "Velg alternativ");
+injectString("nl", "Select option", "Selecteer optie");
+injectString("pl", "Select option", "Wybierz opcj\u0119");
+injectString("pt-BR", "Select option", "Selecionar op\xE7\xE3o");
+injectString("sk-SK", "Select option", "Vyber si mo\u017Enos\u0165");
+injectString("sv", "Select option", "V\xE4lj alternativ");
+injectString("th", "Select option", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01");
+injectString("tr", "Select option", "Se\xE7enek belirleyin");
+injectString("zh-Hans", "Select option", "\u9009\u62E9\u9009\u9879");
+injectString("zh-TW", "Select option", "\u9078\u53D6\u9078\u9805");
+injectString("cs", "Back", "Zp\u011Bt");
+injectString("da-DK", "Back", "Tilbage");
+injectString("de", "Back", "Zur\xFCck");
+injectString("en", "Back", "Back");
+injectString("es", "Back", "Regresar");
+injectString("fi-FI", "Back", "Takaisin");
+injectString("fr", "Back", "Retour");
+injectString("fr-FR", "Back", "Retour");
+injectString("hu-HU", "Back", "Vissza");
+injectString("id", "Back", "Kembali");
+injectString("it", "Back", "Indietro");
+injectString("ja", "Back", "\u623B\u308B");
+injectString("ko-KR", "Back", "\uB4A4\uB85C");
+injectString("ms", "Back", "Kembali");
+injectString("nb-NO", "Back", "Tilbake");
+injectString("nl", "Back", "Terug");
+injectString("pl", "Back", "Wstecz");
+injectString("pt-BR", "Back", "Voltar");
+injectString("sk-SK", "Back", "Sp\xE4\u0165");
+injectString("sv", "Back", "Tillbaka");
+injectString("th", "Back", "\u0E01\u0E25\u0E31\u0E1A");
+injectString("tr", "Back", "Geri");
+injectString("zh-Hans", "Back", "\u8FD4\u56DE");
+injectString("zh-TW", "Back", "\u8FD4\u56DE");
 const react_1 = __importStar(require("react"));
 const checkboxListWithAction_1 = require("../checkboxListWithAction/checkboxListWithAction");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
@@ -38,64 +250,221 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const checkbox_1 = require("../checkbox/checkbox");
-const EmptyList = ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const styleWidth = width ? { style: { width: `${width}px` } } : {};
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, styleWidth, { className: (0, classNames_1.classNames)(["zen-dropdown-list__container", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__container--empty", children: translate(hasError ? "Error Loading Items" : "No data") }), isWithFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
+const EmptyList = ({
+  className,
+  width,
+  onClearClick,
+  onApplyClick,
+  onCancelClick,
+  hasApplyButton,
+  isApplyDisabled,
+  isClearButtonDisabled,
+  isWithFooter,
+  hasError
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const styleWidth = width ? {
+    style: {
+      width: `${width}px`
+    }
+  } : {};
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, styleWidth, {
+    className: (0, classNames_1.classNames)(["zen-dropdown-list__container", className || ""]),
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-dropdown-list__container--empty",
+      children: hasError ? translate("Error Loading Items") : translate("No data")
+    }), isWithFooter ? (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-dropdown-list__footer",
+      children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+        onClick: onClearClick,
+        disabled: isClearButtonDisabled,
+        className: "zen-dropdown-list__clear-button",
+        type: buttonType_1.ButtonType.Tertiary,
+        title: translate("Clear"),
+        children: translate("Clear")
+      }), hasApplyButton && (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-dropdown-list__button-group",
+        children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+          onClick: onCancelClick,
+          className: "zen-dropdown-list__cancel-button",
+          title: translate("Cancel"),
+          children: translate("Cancel")
+        }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+          onClick: onApplyClick,
+          type: buttonType_1.ButtonType.Primary,
+          disabled: isApplyDisabled,
+          className: "zen-dropdown-list__apply-button",
+          title: translate("Apply"),
+          children: translate("Apply")
+        })]
+      })]
+    }) : null]
+  }));
 };
 exports.EmptyList = EmptyList;
-const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isDrive = (0, useDrive_1.useDrive)();
-    const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-dropdown-list");
-    const listId = (0, react_1.useId)();
-    const handleSelectAllClick = () => {
-        onSelectAllClick(isAllSelected);
+const DropdownList = ({
+  onBackButtonClick,
+  onSelectAllClick,
+  onClearClick,
+  onApplyClick,
+  onCancelClick,
+  onChange,
+  onSelect,
+  onSingleSelect,
+  listData,
+  isAllSelected,
+  backButtonName,
+  width,
+  minWidth,
+  isSelectAllButtonDisable,
+  hasSelectAllButton,
+  filterName,
+  isMultiselect,
+  hasApplyButton,
+  isApplyDisabled,
+  isClearButtonDisabled,
+  activeValue,
+  forceSelection,
+  isWithFooter,
+  isMobile,
+  handleCheckboxChange,
+  checkboxLabel,
+  isChecked
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-dropdown-list");
+  const listId = (0, react_1.useId)();
+  const handleSelectAllClick = () => {
+    onSelectAllClick(isAllSelected);
+  };
+  const handleChange = (0, react_1.useCallback)(value => {
+    onChange(value);
+  }, [onChange]);
+  const handleClick = (0, react_1.useCallback)(id => {
+    onSelect(id);
+  }, [onSelect]);
+  const handleClearClick = (0, react_1.useCallback)(() => {
+    onSingleSelect(true);
+  }, [onSingleSelect]);
+  const handleSingleChange = (0, react_1.useCallback)(newState => {
+    let newActiveEl = undefined;
+    newState.forEach((value, key) => {
+      if (value === checkboxState_1.CheckboxState.On) {
+        newActiveEl = key;
+      }
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
+  }, [activeValue, forceSelection, onSingleSelect]);
+  const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
+  const getActionButton = (label, title, icon, isDisabled, clickHandler, size) => (0, jsx_runtime_1.jsx)("button", {
+    type: "button",
+    disabled: isDisabled,
+    onClick: clickHandler,
+    className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back",
+    title: title,
+    children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [react_1.default.createElement(icon, {
+        className: "zen-dropdown-list__icon zen-dropdown-list__action-icon",
+        size: size
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]),
+        children: label
+      })]
+    })
+  });
+  const styleWidth = (0, react_1.useMemo)(() => {
+    if (width && !isMobile) {
+      return {
+        style: Object.assign({
+          width: `${width}px`
+        }, minWidth ? {
+          minWidth: `${minWidth}px`
+        } : {})
+      };
+    }
+    return minWidth ? {
+      style: {
+        minWidth: `${minWidth}px`
+      }
+    } : {};
+  }, [width, isMobile, minWidth]);
+  const listDataComponent = (0, react_1.useMemo)(() => {
+    const createValue = (data, activeId) => {
+      const values = new Map();
+      data === null || data === void 0 ? void 0 : data.forEach(el => {
+        values.set(el.id, activeId === el.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
+      });
+      return values;
     };
-    const handleChange = (0, react_1.useCallback)((value) => {
-        onChange(value);
-    }, [onChange]);
-    const handleClick = (0, react_1.useCallback)((id) => {
-        onSelect(id);
-    }, [onSelect]);
-    const handleClearClick = (0, react_1.useCallback)(() => {
-        onSingleSelect(true);
-    }, [onSingleSelect]);
-    const handleSingleChange = (0, react_1.useCallback)((newState) => {
-        let newActiveEl = undefined;
-        newState.forEach((value, key) => {
-            if (value === checkboxState_1.CheckboxState.On) {
-                newActiveEl = key;
-            }
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
-    }, [activeValue, forceSelection, onSingleSelect]);
-    const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
-    const getActionButton = (label, title, icon, isDisabled, clickHandler, size) => (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: isDisabled, onClick: clickHandler, className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back", title: title, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.createElement(icon, { className: "zen-dropdown-list__icon zen-dropdown-list__action-icon", size: size }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]), children: label })] }) });
-    const styleWidth = (0, react_1.useMemo)(() => {
-        if (width && !isMobile) {
-            return { style: Object.assign({ width: `${width}px` }, (minWidth ? { minWidth: `${minWidth}px` } : {})) };
-        }
-        return minWidth ? { style: { minWidth: `${minWidth}px` } } : {};
-    }, [width, isMobile, minWidth]);
-    const listDataComponent = (0, react_1.useMemo)(() => {
-        const createValue = (data, activeId) => {
-            const values = new Map();
-            data === null || data === void 0 ? void 0 : data.forEach(el => {
-                values.set(el.id, activeId === el.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
-            });
-            return values;
-        };
-        return (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__elements", children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, { options: listData, label: "", onChange: handleChange, onClick: handleClick }) : (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { onChange: handleSingleChange, onClick: handleClick, title: translate("Select option"), id: listId, multiselect: false, selectItemOnFocus: false, items: listData, forceSelection: forceSelection, value: createValue(listData, activeValue) }) });
-    }, [isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, listId, forceSelection, activeValue]);
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""]) }, styleWidth, { children: [filterName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__label", children: filterName }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__item-wrapper", children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large") }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: isMultiselect ? onClearClick : handleClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
+    return (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-dropdown-list__elements",
+      children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, {
+        options: listData,
+        label: "",
+        onChange: handleChange,
+        onClick: handleClick
+      }) : (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
+        onChange: handleSingleChange,
+        onClick: handleClick,
+        title: translate("Select option"),
+        id: listId,
+        multiselect: false,
+        selectItemOnFocus: false,
+        items: listData,
+        forceSelection: forceSelection,
+        value: createValue(listData, activeValue)
+      })
+    });
+  }, [isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, listId, forceSelection, activeValue]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""])
+  }, styleWidth, {
+    children: [filterName ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-dropdown-list__label",
+      children: filterName
+    }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-dropdown-list__checkbox-container",
+      children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, {
+        checked: isChecked,
+        onChange: handleCheckboxChange,
+        children: checkboxLabel
+      })
+    }) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-dropdown-list__item-wrapper",
+      children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large")
+    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-dropdown-list__footer",
+      children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+        onClick: isMultiselect ? onClearClick : handleClearClick,
+        disabled: isClearButtonDisabled,
+        className: "zen-dropdown-list__clear-button zen-ellipsis",
+        type: buttonType_1.ButtonType.Tertiary,
+        title: translate("Clear"),
+        children: translate("Clear")
+      }), hasApplyButton && (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-dropdown-list__button-group",
+        children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+          onClick: onCancelClick,
+          className: "zen-dropdown-list__cancel-button zen-ellipsis",
+          title: translate("Cancel"),
+          children: translate("Cancel")
+        }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+          onClick: onApplyClick,
+          type: buttonType_1.ButtonType.Primary,
+          disabled: isApplyDisabled,
+          className: "zen-dropdown-list__apply-button zen-ellipsis",
+          title: translate("Apply"),
+          children: translate("Apply")
+        })]
+      })]
+    }) : null]
+  }));
 };
 exports.DropdownList = DropdownList;
-exports.TRANSLATIONS = [
-    "Select all",
-    "Deselect all",
-    "Clear",
-    "Back",
-    "No data"
-];
+exports.TRANSLATIONS = ["Select all", "Deselect all", "Clear", "Back", "No data"];