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

package/esm/dropdownRaw/dropdownPopup.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo } from "react";
 import { MobileSheet } from "../mobileSheet/mobileSheet";
@@ -10,22 +11,214 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { FooterButtons } from "../footerButtons/footerButtons";
 import { Checkbox } from "../checkbox/checkbox";
 import { useScrollWithAndroidKeyboard } from "../utils/useScrollWithAndroidKeyboard";
-export 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 } = useLanguage();
-    const triggerId = useId();
-    const { handleFocus, handleBlur, wrapperClass } = useScrollWithAndroidKeyboard();
-    const memoizedHandleHide = useCallback(() => {
-        handleTriggerClick(false);
-    }, [handleTriggerClick]);
-    const memoizedMobileContent = useMemo(() => _jsxs(_Fragment, { children: [searchField ? _jsx("div", { className: "zen-dropdown-mobile-sheet__search-container", children: _jsx(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 ? _jsx("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: _jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, _jsx("div", { ref: contentRef, children: children })] }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder,
-        translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
-    const memoizedMobileFooter = useMemo(() => {
-        if (!isWithFooter) {
-            return null;
-        }
-        return _jsxs(FooterButtons, { children: [hasApplyButton ? _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, _jsx(Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
-    }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
-    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: classNames(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, stackingClassName: mobileSheetStackingClassName, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [_jsx(MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), _jsx(MobileSheet.Content, { children: memoizedMobileContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
-    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: isOpenCombo, className: 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: _jsxs("div", { ref: contentRef, children: [searchField && isSearchInPopup ? _jsx("div", { className: "zen-dropdown-popup__search-container", children: _jsx(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");
+export 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
+  } = useLanguage();
+  const triggerId = useId();
+  const {
+    handleFocus,
+    handleBlur,
+    wrapperClass
+  } = useScrollWithAndroidKeyboard();
+  const memoizedHandleHide = useCallback(() => {
+    handleTriggerClick(false);
+  }, [handleTriggerClick]);
+  const memoizedMobileContent = useMemo(() => _jsxs(_Fragment, {
+    children: [searchField ? _jsx("div", {
+      className: "zen-dropdown-mobile-sheet__search-container",
+      children: _jsx(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 ? _jsx("div", {
+      className: "zen-dropdown-mobile-sheet__checkbox-container",
+      children: _jsx(Checkbox, {
+        checked: isChecked,
+        onChange: handleCheckboxChange,
+        children: checkboxLabel
+      })
+    }) : null, _jsx("div", {
+      ref: contentRef,
+      children: children
+    })]
+  }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder, translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
+  const memoizedMobileFooter = useMemo(() => {
+    if (!isWithFooter) {
+      return null;
+    }
+    return _jsxs(FooterButtons, {
+      children: [hasApplyButton ? _jsx(Button, {
+        onClick: handleApplyClick,
+        type: ButtonType.Primary,
+        disabled: isApplyButtonDisabled,
+        className: "zen-ellipsis",
+        title: translate("Apply"),
+        children: translate("Apply")
+      }) : null, _jsx(Button, {
+        onClick: handleClearClick,
+        disabled: isClearButtonDisabled,
+        className: "zen-ellipsis",
+        type: ButtonType.Tertiary,
+        title: translate("Clear"),
+        children: translate("Clear")
+      })]
+    });
+  }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
+  const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
+    className: classNames(["zen-dropdown--mobile", classNamePopup || ""]),
+    wrapperClassName: wrapperClass,
+    stackingClassName: mobileSheetStackingClassName,
+    label: "label",
+    triggerRef: triggerRef,
+    isOpen: isOpenCombo,
+    onHidePanel: memoizedHandleHide,
+    onCloseClick: memoizedHandleHide,
+    useTrapFocusWithTrigger: true,
+    onReadyForFocus: onReadyForFocus,
+    children: [_jsx(MobileSheet.Title, {
+      className: "zen-dropdown-mobile-sheet__title",
+      children: filterName || placeholder || ""
+    }), _jsx(MobileSheet.Content, {
+      children: memoizedMobileContent
+    }), _jsx(MobileSheet.Footer, {
+      children: memoizedMobileFooter
+    })]
+  }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
+  const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, {
+    isOpen: isOpenCombo,
+    className: 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: _jsxs("div", {
+      ref: contentRef,
+      children: [searchField && isSearchInPopup ? _jsx("div", {
+        className: "zen-dropdown-popup__search-container",
+        children: _jsx(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;
+};