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

package/esm/dropdownRaw/dropdownList.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useId, useMemo } from "react";
 import { CheckboxListWithAction } from "../checkboxListWithAction/checkboxListWithAction";
@@ -12,62 +13,417 @@ import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { Checkbox } from "../checkbox/checkbox";
-export const EmptyList = ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }) => {
-    const { translate } = useLanguage();
-    const styleWidth = width ? { style: { width: `${width}px` } } : {};
-    return _jsxs("div", Object.assign({}, styleWidth, { className: classNames(["zen-dropdown-list__container", className || ""]), children: [_jsx("div", { className: "zen-dropdown-list__container--empty", children: translate(hasError ? "Error Loading Items" : "No data") }), isWithFooter ? _jsxs("div", { className: "zen-dropdown-list__footer", children: [_jsx(Button, { onClick: onClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button", type: ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && _jsxs("div", { className: "zen-dropdown-list__button-group", children: [_jsx(Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { onClick: onApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
+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");
+export const EmptyList = ({
+  className,
+  width,
+  onClearClick,
+  onApplyClick,
+  onCancelClick,
+  hasApplyButton,
+  isApplyDisabled,
+  isClearButtonDisabled,
+  isWithFooter,
+  hasError
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const styleWidth = width ? {
+    style: {
+      width: `${width}px`
+    }
+  } : {};
+  return _jsxs("div", Object.assign({}, styleWidth, {
+    className: classNames(["zen-dropdown-list__container", className || ""]),
+    children: [_jsx("div", {
+      className: "zen-dropdown-list__container--empty",
+      children: hasError ? translate("Error Loading Items") : translate("No data")
+    }), isWithFooter ? _jsxs("div", {
+      className: "zen-dropdown-list__footer",
+      children: [_jsx(Button, {
+        onClick: onClearClick,
+        disabled: isClearButtonDisabled,
+        className: "zen-dropdown-list__clear-button",
+        type: ButtonType.Tertiary,
+        title: translate("Clear"),
+        children: translate("Clear")
+      }), hasApplyButton && _jsxs("div", {
+        className: "zen-dropdown-list__button-group",
+        children: [_jsx(Button, {
+          onClick: onCancelClick,
+          className: "zen-dropdown-list__cancel-button",
+          title: translate("Cancel"),
+          children: translate("Cancel")
+        }), _jsx(Button, {
+          onClick: onApplyClick,
+          type: ButtonType.Primary,
+          disabled: isApplyDisabled,
+          className: "zen-dropdown-list__apply-button",
+          title: translate("Apply"),
+          children: translate("Apply")
+        })]
+      })]
+    }) : null]
+  }));
 };
-export 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 } = useLanguage();
-    const isDrive = useDrive();
-    const driveComponentClass = useDriveClassName("zen-dropdown-list");
-    const listId = useId();
-    const handleSelectAllClick = () => {
-        onSelectAllClick(isAllSelected);
+export 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
+  } = useLanguage();
+  const isDrive = useDrive();
+  const driveComponentClass = useDriveClassName("zen-dropdown-list");
+  const listId = useId();
+  const handleSelectAllClick = () => {
+    onSelectAllClick(isAllSelected);
+  };
+  const handleChange = useCallback(value => {
+    onChange(value);
+  }, [onChange]);
+  const handleClick = useCallback(id => {
+    onSelect(id);
+  }, [onSelect]);
+  const handleClearClick = useCallback(() => {
+    onSingleSelect(true);
+  }, [onSingleSelect]);
+  const handleSingleChange = useCallback(newState => {
+    let newActiveEl = undefined;
+    newState.forEach((value, key) => {
+      if (value === 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) => _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: _jsxs(_Fragment, {
+      children: [React.createElement(icon, {
+        className: "zen-dropdown-list__icon zen-dropdown-list__action-icon",
+        size: size
+      }), _jsx("div", {
+        className: classNames(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]),
+        children: label
+      })]
+    })
+  });
+  const styleWidth = 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 = 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.On : CheckboxState.Off);
+      });
+      return values;
     };
-    const handleChange = useCallback((value) => {
-        onChange(value);
-    }, [onChange]);
-    const handleClick = useCallback((id) => {
-        onSelect(id);
-    }, [onSelect]);
-    const handleClearClick = useCallback(() => {
-        onSingleSelect(true);
-    }, [onSingleSelect]);
-    const handleSingleChange = useCallback((newState) => {
-        let newActiveEl = undefined;
-        newState.forEach((value, key) => {
-            if (value === 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) => _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: _jsxs(_Fragment, { children: [React.createElement(icon, { className: "zen-dropdown-list__icon zen-dropdown-list__action-icon", size: size }), _jsx("div", { className: classNames(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]), children: label })] }) });
-    const styleWidth = 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 = 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.On : CheckboxState.Off);
-            });
-            return values;
-        };
-        return _jsx("div", { className: "zen-dropdown-list__elements", children: isMultiselect ? _jsx(CheckboxListWithAction, { options: listData, label: "", onChange: handleChange, onClick: handleClick }) : _jsx(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 _jsxs("div", Object.assign({ className: classNames(["zen-dropdown-list", driveComponentClass || ""]) }, styleWidth, { children: [filterName ? _jsx("div", { className: "zen-dropdown-list__label", children: filterName }) : null, handleCheckboxChange ? _jsx("div", { className: "zen-dropdown-list__checkbox-container", children: _jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, backButtonName ? _jsx("div", { className: "zen-dropdown-list__item-wrapper", children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large") }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", { className: "zen-dropdown-list__footer", children: [_jsx(Button, { onClick: isMultiselect ? onClearClick : handleClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button zen-ellipsis", type: ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && _jsxs("div", { className: "zen-dropdown-list__button-group", children: [_jsx(Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { onClick: onApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
+    return _jsx("div", {
+      className: "zen-dropdown-list__elements",
+      children: isMultiselect ? _jsx(CheckboxListWithAction, {
+        options: listData,
+        label: "",
+        onChange: handleChange,
+        onClick: handleClick
+      }) : _jsx(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 _jsxs("div", Object.assign({
+    className: classNames(["zen-dropdown-list", driveComponentClass || ""])
+  }, styleWidth, {
+    children: [filterName ? _jsx("div", {
+      className: "zen-dropdown-list__label",
+      children: filterName
+    }) : null, handleCheckboxChange ? _jsx("div", {
+      className: "zen-dropdown-list__checkbox-container",
+      children: _jsx(Checkbox, {
+        checked: isChecked,
+        onChange: handleCheckboxChange,
+        children: checkboxLabel
+      })
+    }) : null, backButtonName ? _jsx("div", {
+      className: "zen-dropdown-list__item-wrapper",
+      children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large")
+    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", {
+      className: "zen-dropdown-list__footer",
+      children: [_jsx(Button, {
+        onClick: isMultiselect ? onClearClick : handleClearClick,
+        disabled: isClearButtonDisabled,
+        className: "zen-dropdown-list__clear-button zen-ellipsis",
+        type: ButtonType.Tertiary,
+        title: translate("Clear"),
+        children: translate("Clear")
+      }), hasApplyButton && _jsxs("div", {
+        className: "zen-dropdown-list__button-group",
+        children: [_jsx(Button, {
+          onClick: onCancelClick,
+          className: "zen-dropdown-list__cancel-button zen-ellipsis",
+          title: translate("Cancel"),
+          children: translate("Cancel")
+        }), _jsx(Button, {
+          onClick: onApplyClick,
+          type: ButtonType.Primary,
+          disabled: isApplyDisabled,
+          className: "zen-dropdown-list__apply-button zen-ellipsis",
+          title: translate("Apply"),
+          children: translate("Apply")
+        })]
+      })]
+    }) : null]
+  }));
 };
-export const TRANSLATIONS = [
-    "Select all",
-    "Deselect all",
-    "Clear",
-    "Back",
-    "No data"
-];
+export const TRANSLATIONS = ["Select all", "Deselect all", "Clear", "Back", "No data"];