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

package/esm/filters/components/filtersSelect.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
@@ -5,69 +6,130 @@ import { useLanguage } from "../../utils/localization/useLanguage";
 import { useUniqueId } from "../../commonHelpers/useUniqueId";
 import { FiltersSelectListExpandableItem, FiltersSelectListItem } from "./filtersSelectListItem";
 import { getNewFocusableItem } from "../../utils/keyboardHelpers";
+injectString("cs", "All", "V\u0161e");
+injectString("da-DK", "All", "Alle");
+injectString("de", "All", "Alle");
+injectString("en", "All", "All");
+injectString("es", "All", "Todo");
+injectString("fi-FI", "All", "Kaikki");
+injectString("fr", "All", "Tout");
+injectString("fr-FR", "All", "Tous");
+injectString("hu-HU", "All", "Minden");
+injectString("id", "All", "Semua");
+injectString("it", "All", "Tutti");
+injectString("ja", "All", "\u3059\u3079\u3066");
+injectString("ko-KR", "All", "\uC804\uCCB4");
+injectString("ms", "All", "Semua");
+injectString("nb-NO", "All", "Alle");
+injectString("nl", "All", "Alle");
+injectString("pl", "All", "Wszystkie");
+injectString("pt-BR", "All", "Tudo");
+injectString("sk-SK", "All", "V\u0161etko");
+injectString("sv", "All", "Alla");
+injectString("th", "All", "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "All", "T\xFCm\xFC");
+injectString("zh-Hans", "All", "\u5168\u90E8");
+injectString("zh-TW", "All", "\u5168\u90E8");
 export const ALL_SELECT_OPTION_ID = "All";
 export const FiltersSelectDisplayName = "FiltersSelect";
 export const getFiltersSearchTypeAllOption = () => ({
-    [ALL_SELECT_OPTION_ID]: undefined
+  [ALL_SELECT_OPTION_ID]: undefined
 });
-export const getAllOption = (translate) => ({
-    id: ALL_SELECT_OPTION_ID,
-    name: translate("All")
+export const getAllOption = translate => ({
+  id: ALL_SELECT_OPTION_ID,
+  name: translate("All")
 });
-export const FiltersSelect = ({ value, onChange, items, className, selectListRef }) => {
-    const { translate } = useLanguage();
-    const [activeId, setActiveId] = useState("");
-    const filtersSelectListId = useUniqueId();
-    const filteredItems = useMemo(() => (items === null || items === void 0 ? void 0 : items.filter(el => el.id !== ALL_SELECT_OPTION_ID)) || [], [items]);
-    const preparedItems = useMemo(() => [
-        getAllOption(translate),
-        ...filteredItems
-    ], [translate, filteredItems]);
-    const handleExpandableItemClick = useCallback((clickedId) => () => {
-        if (activeId === clickedId) {
-            setActiveId("");
-            return;
-        }
-        setActiveId(clickedId);
-    }, [activeId]);
-    const handleItemClick = useCallback((clickedId, parentId) => () => {
-        if (!clickedId) {
-            parentId && onChange({ [parentId]: undefined });
-            return;
-        }
-        if (parentId) {
-            onChange({ [parentId]: clickedId });
-            return;
-        }
-        onChange(Object.keys(value).includes(clickedId) ? getFiltersSearchTypeAllOption() : { [clickedId]: undefined });
-    }, [onChange, value]);
-    const handleKeyDown = useCallback((event) => {
-        var _a, _b, _c, _d;
-        if (event.key === "ArrowDown") {
-            const nextElement = ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling) ? (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling
-                : getNewFocusableItem(1, selectListRef.current);
-            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
-            return;
-        }
-        if (event.key === "ArrowUp") {
-            const nextElement = ((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling) ? (_d = document.activeElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling
-                : getNewFocusableItem(-1, selectListRef.current);
-            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
-            return;
-        }
-        if (event.key === "ArrowLeft") {
-            const nextElement = getNewFocusableItem(-1, selectListRef.current);
-            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
-            return;
-        }
-        if (event.key === "ArrowRight") {
-            const nextElement = getNewFocusableItem(1, selectListRef.current);
-            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
-            return;
-        }
-    }, [selectListRef]);
-    const selectListComponent = useMemo(() => preparedItems.map(el => el.subItems && el.subItems.length > 0 ?
-        _jsx(FiltersSelectListExpandableItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isExpanded: el.id === activeId, isActive: Object.keys(value).includes(el.id) && Boolean(value[el.id]), className: classNames([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item-wrapper--active" : ""]), onExpandItem: handleExpandableItemClick(el.id), onClick: handleItemClick(undefined, el.id), content: el.id === activeId ? el.subItems.map(subEl => _jsx(FiltersSelectListItem, { className: classNames(["zen-filters-select__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) : _jsx(_Fragment, {}) }, `${filtersSelectListId}-${el.id}`) : _jsx(FiltersSelectListItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, className: "zen-filters-select__list-item--not-expandable", isActive: Object.keys(value).includes(el.id), onClick: handleItemClick(el.id) }, `${filtersSelectListId}-${el.id}`)), [activeId, filtersSelectListId, handleExpandableItemClick, handleItemClick, preparedItems, value]);
-    return _jsx("div", { className: "zen-filters-select", ref: selectListRef, onKeyDown: handleKeyDown, children: _jsx("div", { className: classNames(["zen-filters-select__list", className || ""]), children: selectListComponent }) });
+export const FiltersSelect = ({
+  value,
+  onChange,
+  items,
+  className,
+  selectListRef
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const [activeId, setActiveId] = useState("");
+  const filtersSelectListId = useUniqueId();
+  const filteredItems = useMemo(() => (items === null || items === void 0 ? void 0 : items.filter(el => el.id !== ALL_SELECT_OPTION_ID)) || [], [items]);
+  const preparedItems = useMemo(() => [getAllOption(translate), ...filteredItems], [translate, filteredItems]);
+  const handleExpandableItemClick = useCallback(clickedId => () => {
+    if (activeId === clickedId) {
+      setActiveId("");
+      return;
+    }
+    setActiveId(clickedId);
+  }, [activeId]);
+  const handleItemClick = useCallback((clickedId, parentId) => () => {
+    if (!clickedId) {
+      parentId && onChange({
+        [parentId]: undefined
+      });
+      return;
+    }
+    if (parentId) {
+      onChange({
+        [parentId]: clickedId
+      });
+      return;
+    }
+    onChange(Object.keys(value).includes(clickedId) ? getFiltersSearchTypeAllOption() : {
+      [clickedId]: undefined
+    });
+  }, [onChange, value]);
+  const handleKeyDown = useCallback(event => {
+    var _a, _b, _c, _d;
+    if (event.key === "ArrowDown") {
+      const nextElement = ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling) ? (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling : getNewFocusableItem(1, selectListRef.current);
+      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      const nextElement = ((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling) ? (_d = document.activeElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling : getNewFocusableItem(-1, selectListRef.current);
+      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      const nextElement = getNewFocusableItem(-1, selectListRef.current);
+      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      const nextElement = getNewFocusableItem(1, selectListRef.current);
+      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      return;
+    }
+  }, [selectListRef]);
+  const selectListComponent = useMemo(() => preparedItems.map(el => el.subItems && el.subItems.length > 0 ? _jsx(FiltersSelectListExpandableItem, {
+    id: `${filtersSelectListId}-${el.id}`,
+    name: el.name,
+    isExpanded: el.id === activeId,
+    isActive: Object.keys(value).includes(el.id) && Boolean(value[el.id]),
+    className: classNames([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item-wrapper--active" : ""]),
+    onExpandItem: handleExpandableItemClick(el.id),
+    onClick: handleItemClick(undefined, el.id),
+    content: el.id === activeId ? el.subItems.map(subEl => _jsx(FiltersSelectListItem, {
+      className: classNames(["zen-filters-select__sub-item"]),
+      id: `${filtersSelectListId}-${el.id}-${subEl.id}`,
+      name: subEl.name,
+      isActive: value[el.id] === subEl.id,
+      onClick: handleItemClick(subEl.id, el.id)
+    }, `${el.id}-${subEl.id}`)) : _jsx(_Fragment, {})
+  }, `${filtersSelectListId}-${el.id}`) : _jsx(FiltersSelectListItem, {
+    id: `${filtersSelectListId}-${el.id}`,
+    name: el.name,
+    className: "zen-filters-select__list-item--not-expandable",
+    isActive: Object.keys(value).includes(el.id),
+    onClick: handleItemClick(el.id)
+  }, `${filtersSelectListId}-${el.id}`)), [activeId, filtersSelectListId, handleExpandableItemClick, handleItemClick, preparedItems, value]);
+  return _jsx("div", {
+    className: "zen-filters-select",
+    ref: selectListRef,
+    onKeyDown: handleKeyDown,
+    children: _jsx("div", {
+      className: classNames(["zen-filters-select__list", className || ""]),
+      children: selectListComponent
+    })
+  });
 };
-FiltersSelect.displayName = FiltersSelectDisplayName;
+FiltersSelect.displayName = FiltersSelectDisplayName;

package/esm/filters/components/filtersSelectListItem.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 { useCallback } from "react";
 import { Button } from "../../button/button";
@@ -5,15 +6,121 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useUniqueId } from "../../commonHelpers/useUniqueId";
 import { IconChevronDownSmall } from "../../icons/iconChevronDownSmall";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const FiltersSelectListItem = ({ id, name, isActive, onClick, className = "" }) => _jsx("div", { children: _jsx("button", { type: "button", className: classNames(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]), id: id, onClick: onClick, children: name }) });
-export const FiltersSelectListExpandableItem = ({ id, name, content, isActive, isExpanded, onClick, className = "", onExpandItem }) => {
-    const ariaControlsId = useUniqueId();
-    const { translate } = useLanguage();
-    const handleExpandItem = useCallback((e) => {
-        e.stopPropagation();
-        if (onExpandItem) {
-            onExpandItem();
-        }
-    }, [onExpandItem]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames(["zen-filters-select__list-item-wrapper", isExpanded ? "zen-filters-select__list-item-wrapper--expanded" : "", className]), children: [_jsx("button", { type: "button", className: classNames(["zen-filters-select__list-item"]), id: id, onClick: onClick, children: _jsxs("div", { className: "zen-filters-select__list-item-title", children: [name, isActive ? _jsx("div", { className: "zen-filters-select__item-active-indicator" }) : null] }) }), _jsx(Button, { type: "tertiary-black", onClick: handleExpandItem, className: "zen-filters-select__item-button", "aria-expanded": isExpanded, "aria-controls": ariaControlsId, "aria-label": isExpanded ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`, children: _jsx(IconChevronDownSmall, { size: "large", className: classNames(["zen-filters-select__item-icon", isExpanded ? "zen-filters-select__item-icon--rotated" : ""]) }) })] }), _jsx("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: classNames(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]), children: content })] }));
-};
+injectString("cs", "Collapse", "Sbalit");
+injectString("da-DK", "Collapse", "Fold sammen");
+injectString("de", "Collapse", "Ausblenden");
+injectString("en", "Collapse", "Collapse");
+injectString("es", "Collapse", "Contraer");
+injectString("fi-FI", "Collapse", "Tiivist\xE4");
+injectString("fr", "Collapse", "R\xE9duire");
+injectString("fr-FR", "Collapse", "R\xE9duire");
+injectString("hu-HU", "Collapse", "\xD6sszecsuk\xE1s");
+injectString("id", "Collapse", "Ciutkan");
+injectString("it", "Collapse", "Comprimi");
+injectString("ja", "Collapse", "\u6298\u308A\u7573\u3080");
+injectString("ko-KR", "Collapse", "\uBB34\uB108\uC9C0\uB2E4");
+injectString("ms", "Collapse", "Runtuhkan");
+injectString("nb-NO", "Collapse", "Kollapse");
+injectString("nl", "Collapse", "Samenvouwen");
+injectString("pl", "Collapse", "Zwi\u0144");
+injectString("pt-BR", "Collapse", "Recolher");
+injectString("sk-SK", "Collapse", "Zlo\u017E.");
+injectString("sv", "Collapse", "Komprimera");
+injectString("th", "Collapse", "\u0E22\u0E38\u0E1A");
+injectString("tr", "Collapse", "Daralt");
+injectString("zh-Hans", "Collapse", "\u6298\u53E0");
+injectString("zh-TW", "Collapse", "\u647A\u758A");
+injectString("cs", "Expand", "Rozbalit");
+injectString("da-DK", "Expand", "Udvid");
+injectString("de", "Expand", "Erweitern");
+injectString("en", "Expand", "Expand");
+injectString("es", "Expand", "Expandir");
+injectString("fi-FI", "Expand", "Laajenna");
+injectString("fr", "Expand", "D\xE9velopper");
+injectString("fr-FR", "Expand", "D\xE9velopper");
+injectString("hu-HU", "Expand", "B\u0151v\xEDtsd ki");
+injectString("id", "Expand", "Perluas");
+injectString("it", "Expand", "Espandere");
+injectString("ja", "Expand", "\u5C55\u958B");
+injectString("ko-KR", "Expand", "\uD655\uC7A5");
+injectString("ms", "Expand", "Kembangkan");
+injectString("nb-NO", "Expand", "Utvide");
+injectString("nl", "Expand", "Uitvouwen");
+injectString("pl", "Expand", "Rozwi\u0144");
+injectString("pt-BR", "Expand", "Expandir");
+injectString("sk-SK", "Expand", "Roz\u0161\xEDr.");
+injectString("sv", "Expand", "Expandera");
+injectString("th", "Expand", "\u0E02\u0E22\u0E32\u0E22");
+injectString("tr", "Expand", "Geni\u015Flet");
+injectString("zh-Hans", "Expand", "\u5C55\u5F00");
+injectString("zh-TW", "Expand", "\u5C55\u958B");
+export const FiltersSelectListItem = ({
+  id,
+  name,
+  isActive,
+  onClick,
+  className = ""
+}) => _jsx("div", {
+  children: _jsx("button", {
+    type: "button",
+    className: classNames(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]),
+    id: id,
+    onClick: onClick,
+    children: name
+  })
+});
+export const FiltersSelectListExpandableItem = ({
+  id,
+  name,
+  content,
+  isActive,
+  isExpanded,
+  onClick,
+  className = "",
+  onExpandItem
+}) => {
+  const ariaControlsId = useUniqueId();
+  const {
+    translate
+  } = useLanguage();
+  const handleExpandItem = useCallback(e => {
+    e.stopPropagation();
+    if (onExpandItem) {
+      onExpandItem();
+    }
+  }, [onExpandItem]);
+  return _jsxs(_Fragment, {
+    children: [_jsxs("div", {
+      className: classNames(["zen-filters-select__list-item-wrapper", isExpanded ? "zen-filters-select__list-item-wrapper--expanded" : "", className]),
+      children: [_jsx("button", {
+        type: "button",
+        className: classNames(["zen-filters-select__list-item"]),
+        id: id,
+        onClick: onClick,
+        children: _jsxs("div", {
+          className: "zen-filters-select__list-item-title",
+          children: [name, isActive ? _jsx("div", {
+            className: "zen-filters-select__item-active-indicator"
+          }) : null]
+        })
+      }), _jsx(Button, {
+        type: "tertiary-black",
+        onClick: handleExpandItem,
+        className: "zen-filters-select__item-button",
+        "aria-expanded": isExpanded,
+        "aria-controls": ariaControlsId,
+        "aria-label": isExpanded ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`,
+        children: _jsx(IconChevronDownSmall, {
+          size: "large",
+          className: classNames(["zen-filters-select__item-icon", isExpanded ? "zen-filters-select__item-icon--rotated" : ""])
+        })
+      })]
+    }), _jsx("div", {
+      id: ariaControlsId,
+      "aria-labelledby": id,
+      role: "region",
+      className: classNames(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]),
+      children: content
+    })]
+  });
+};