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

package/dist/dropdownRaw/dropdownPopup.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.DropdownPopup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -13,23 +19,215 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const footerButtons_1 = require("../footerButtons/footerButtons");
 const checkbox_1 = require("../checkbox/checkbox");
 const useScrollWithAndroidKeyboard_1 = require("../utils/useScrollWithAndroidKeyboard");
-const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const triggerId = (0, react_1.useId)();
-    const { handleFocus, handleBlur, wrapperClass } = (0, useScrollWithAndroidKeyboard_1.useScrollWithAndroidKeyboard)();
-    const memoizedHandleHide = (0, react_1.useCallback)(() => {
-        handleTriggerClick(false);
-    }, [handleTriggerClick]);
-    const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-mobile-sheet__search", onChange: onInputChange, onBlur: handleBlur, onFocus: handleFocus, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children })] }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder,
-        translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
-    const memoizedMobileFooter = (0, react_1.useMemo)(() => {
-        if (!isWithFooter) {
-            return null;
-        }
-        return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
-    }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, stackingClassName: mobileSheetStackingClassName, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
-    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpenCombo, className: (0, classNames_1.classNames)(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "withTrigger", alignment: alignment, shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, children: [searchField && isSearchInPopup ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-popup__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-chip__search", onChange: onInputChange, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, children] }) }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, searchField, translate, triggerId, triggerRef]);
-    return isMobile ? memoizedMobileView : memoizedDesktopView;
+injectString("cs", "Filter by group", "Filtrovat podle skupiny");
+injectString("da-DK", "Filter by group", "Filtrer efter gruppe");
+injectString("de", "Filter by group", "Nach Gruppe filtern");
+injectString("en", "Filter by group", "Filter by group");
+injectString("es", "Filter by group", "Filtrar por grupo");
+injectString("fi-FI", "Filter by group", "Suodata ryhm\xE4n mukaan");
+injectString("fr", "Filter by group", "Filtrer par groupe");
+injectString("fr-FR", "Filter by group", "Filtrer par groupe");
+injectString("hu-HU", "Filter by group", "Sz\u0171rd csoport alapj\xE1n.");
+injectString("id", "Filter by group", "Filter berdasarkan grup");
+injectString("it", "Filter by group", "Filtrare per gruppo");
+injectString("ja", "Filter by group", "\u30B0\u30EB\u30FC\u30D7\u306B\u3088\u308B\u30D5\u30A3\u30EB\u30BF\u30EA\u30F3\u30B0");
+injectString("ko-KR", "Filter by group", "\uADF8\uB8F9\uBCC4 \uD544\uD130\uB9C1");
+injectString("ms", "Filter by group", "Saring mengikut kumpulan");
+injectString("nb-NO", "Filter by group", "Filtrer etter gruppe");
+injectString("nl", "Filter by group", "Filteren op groep");
+injectString("pl", "Filter by group", "Filtruj wed\u0142ug grupy");
+injectString("pt-BR", "Filter by group", "Filtrar por grupo");
+injectString("sk-SK", "Filter by group", "Filtrova\u0165 pod\u013Ea skupiny");
+injectString("sv", "Filter by group", "Filtrera efter grupp");
+injectString("th", "Filter by group", "\u0E01\u0E23\u0E2D\u0E07\u0E15\u0E32\u0E21\u0E01\u0E25\u0E38\u0E48\u0E21");
+injectString("tr", "Filter by group", "Gruba g\xF6re filtrele");
+injectString("zh-Hans", "Filter by group", "\u6309\u7EC4\u8FC7\u6EE4");
+injectString("zh-TW", "Filter by group", "\u4F9D\u7FA4\u7D44\u7BE9\u9078");
+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", "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");
+const DropdownPopup = ({
+  alignment,
+  triggerRef,
+  classNamePopup,
+  isMobile,
+  inputValue,
+  dialogAriaLabel,
+  disabled,
+  filterName,
+  handleApplyClick,
+  handleClearClick,
+  handleTriggerClick,
+  mobileSheetStackingClassName,
+  onInputChange,
+  hasApplyButton,
+  inputId,
+  isClearButtonDisabled,
+  isWithFooter,
+  placeholder,
+  searchField,
+  isSearchInPopup,
+  isApplyButtonDisabled,
+  isOpenCombo,
+  inputRef,
+  contentRef,
+  children,
+  onReadyForFocus,
+  handleCheckboxChange,
+  checkboxLabel,
+  isChecked
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const triggerId = (0, react_1.useId)();
+  const {
+    handleFocus,
+    handleBlur,
+    wrapperClass
+  } = (0, useScrollWithAndroidKeyboard_1.useScrollWithAndroidKeyboard)();
+  const memoizedHandleHide = (0, react_1.useCallback)(() => {
+    handleTriggerClick(false);
+  }, [handleTriggerClick]);
+  const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [searchField ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-dropdown-mobile-sheet__search-container",
+      children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, {
+        className: "zen-dropdown-mobile-sheet__search",
+        onChange: onInputChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        value: inputValue || "",
+        ref: inputRef,
+        id: inputId || triggerId,
+        disabled: disabled,
+        placeholder: placeholder || translate("Filter by group")
+      })
+    }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-dropdown-mobile-sheet__checkbox-container",
+      children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, {
+        checked: isChecked,
+        onChange: handleCheckboxChange,
+        children: checkboxLabel
+      })
+    }) : null, (0, jsx_runtime_1.jsx)("div", {
+      ref: contentRef,
+      children: children
+    })]
+  }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder, translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
+  const memoizedMobileFooter = (0, react_1.useMemo)(() => {
+    if (!isWithFooter) {
+      return null;
+    }
+    return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+      children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+        onClick: handleApplyClick,
+        type: buttonType_1.ButtonType.Primary,
+        disabled: isApplyButtonDisabled,
+        className: "zen-ellipsis",
+        title: translate("Apply"),
+        children: translate("Apply")
+      }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, {
+        onClick: handleClearClick,
+        disabled: isClearButtonDisabled,
+        className: "zen-ellipsis",
+        type: buttonType_1.ButtonType.Tertiary,
+        title: translate("Clear"),
+        children: translate("Clear")
+      })]
+    });
+  }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
+  const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
+    className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]),
+    wrapperClassName: wrapperClass,
+    stackingClassName: mobileSheetStackingClassName,
+    label: "label",
+    triggerRef: triggerRef,
+    isOpen: isOpenCombo,
+    onHidePanel: memoizedHandleHide,
+    onCloseClick: memoizedHandleHide,
+    useTrapFocusWithTrigger: true,
+    onReadyForFocus: onReadyForFocus,
+    children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
+      className: "zen-dropdown-mobile-sheet__title",
+      children: filterName || placeholder || ""
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
+      children: memoizedMobileContent
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, {
+      children: memoizedMobileFooter
+    })]
+  }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
+  const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
+    isOpen: isOpenCombo,
+    className: (0, classNames_1.classNames)(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]),
+    onOpenChange: handleTriggerClick,
+    useTrapFocusWithTrigger: "withTrigger",
+    alignment: alignment,
+    shouldHoldScroll: true,
+    triggerRef: triggerRef,
+    ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"),
+    recalculateOnScroll: true,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      ref: contentRef,
+      children: [searchField && isSearchInPopup ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-dropdown-popup__search-container",
+        children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, {
+          className: "zen-dropdown-chip__search",
+          onChange: onInputChange,
+          value: inputValue || "",
+          ref: inputRef,
+          id: inputId || triggerId,
+          disabled: disabled,
+          placeholder: placeholder || translate("Filter by group")
+        })
+      }) : null, children]
+    })
+  }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, searchField, translate, triggerId, triggerRef]);
+  return isMobile ? memoizedMobileView : memoizedDesktopView;
 };
-exports.DropdownPopup = DropdownPopup;
+exports.DropdownPopup = DropdownPopup;