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

package/esm/mobileSheet/mobileSheet.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 { Children, isValidElement, useCallback, useEffect, useMemo, useRef } from "react";
 import { SidePanel, SidePanelCloseReason } from "../sidePanel/sidePanel";
@@ -17,76 +18,196 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { useUniqueId } from "../commonHelpers/useUniqueId";
 import { useFadeComponent } from "../utils/useFadeComponent";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const MobileSheet = 
+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");
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
+export const MobileSheet =
 // eslint-disable-next-line react/prop-types
-({ triggerRef, label, isOpen, onHidePanel, className = "", panelPosition = "bottom", onBackClick, onCloseClick, isBackVisible, backButtonAriaLabel, children, useTrapFocusWithTrigger, onReadyForFocus, wrapperClassName, stackingClassName, preventFirstFocus }) => {
-    var _a, _b;
-    const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = useFadeComponent(isOpen, onReadyForFocus);
-    const dataShieldId = useUniqueId();
-    const { translate } = useLanguage();
-    const ref = useRef(null);
-    const isDrive = useDrive();
-    const driveWrapperMobileSheetClassName = useDriveClassName("zen-mobile-sheet-wrapper");
-    const driveTitleClassName = useDriveClassName("zen-mobile-sheet__title");
-    const driveFooterClassName = useDriveClassName("zen-mobile-sheet__footer");
-    const [content, footer, title] = useMemo(() => {
-        const c = [];
-        const f = [];
-        const t = [];
-        Children.forEach(children, (child) => {
-            if (!f.length && isValidElement(child) && child.type === MobileSheet.Footer) {
-                f.push(child);
-                return;
-            }
-            if (!c.length && isValidElement(child) && child.type === MobileSheet.Content) {
-                c.push(child);
-                return;
-            }
-            if (!t.length && isValidElement(child) && child.type === MobileSheet.Title) {
-                t.push(child);
-                return;
-            }
-        });
-        return [c, f, t];
-    }, [children]);
-    const onHidePanelAction = useCallback((reason, shieldId) => {
-        if (reason === SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === SidePanelCloseReason.Escape) {
-            onHidePanel(reason);
-            return;
-        }
-    }, [onHidePanel, dataShieldId]);
-    useEffect(() => {
-        setIsOpen(isOpen);
-    }, [isOpen, setIsOpen]);
-    useEffect(() => {
-        var _a, _b, _c;
-        if (useTrapFocusWithTrigger) {
-            return;
-        }
-        if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(".zen-mobile-sheet")) {
-            return;
-        }
-        showContent && !preventFirstFocus && ((_c = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR)) === null || _c === void 0 ? void 0 : _c.focus());
-    }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
-    useEffect(() => {
-        var _a;
-        if (!renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
-            triggerRef.current.setAttribute("aria-expanded", "false");
-            triggerRef.current.focus();
-        }
-    }, [triggerRef, renderComponent, readyForFocus]);
-    if (!renderComponent && !isOpen) {
-        return null;
+({
+  triggerRef,
+  label,
+  isOpen,
+  onHidePanel,
+  className = "",
+  panelPosition = "bottom",
+  onBackClick,
+  onCloseClick,
+  isBackVisible,
+  backButtonAriaLabel,
+  children,
+  useTrapFocusWithTrigger,
+  onReadyForFocus,
+  wrapperClassName,
+  stackingClassName,
+  preventFirstFocus
+}) => {
+  var _a, _b;
+  const {
+    renderComponent,
+    showContent,
+    readyForFocus,
+    setIsOpen,
+    handleTransitionEnd
+  } = useFadeComponent(isOpen, onReadyForFocus);
+  const dataShieldId = useUniqueId();
+  const {
+    translate
+  } = useLanguage();
+  const ref = useRef(null);
+  const isDrive = useDrive();
+  const driveWrapperMobileSheetClassName = useDriveClassName("zen-mobile-sheet-wrapper");
+  const driveTitleClassName = useDriveClassName("zen-mobile-sheet__title");
+  const driveFooterClassName = useDriveClassName("zen-mobile-sheet__footer");
+  const [content, footer, title] = useMemo(() => {
+    const c = [];
+    const f = [];
+    const t = [];
+    Children.forEach(children, child => {
+      if (!f.length && isValidElement(child) && child.type === MobileSheet.Footer) {
+        f.push(child);
+        return;
+      }
+      if (!c.length && isValidElement(child) && child.type === MobileSheet.Content) {
+        c.push(child);
+        return;
+      }
+      if (!t.length && isValidElement(child) && child.type === MobileSheet.Title) {
+        t.push(child);
+        return;
+      }
+    });
+    return [c, f, t];
+  }, [children]);
+  const onHidePanelAction = useCallback((reason, shieldId) => {
+    if (reason === SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === SidePanelCloseReason.Escape) {
+      onHidePanel(reason);
+      return;
     }
-    return _jsxs(_Fragment, { children: [_jsx(Shield, { className: classNames(["zen-mobile-sheet-shield", stackingClassName ? stackingClassName : ""]), dataShieldId: dataShieldId, isVisible: showContent }), _jsx(SidePanel, { className: classNames(["zen-mobile-sheet-wrapper", wrapperClassName || "", stackingClassName ? stackingClassName : "", driveWrapperMobileSheetClassName || ""]), panelPosition: panelPosition, triggerRef: triggerRef, label: label, isOpen: showContent, useTrapFocusWithTrigger: useTrapFocusWithTrigger, preventFirstFocus: preventFirstFocus, onHidePanel: onHidePanelAction, onTransitionEnd: handleTransitionEnd, children: _jsxs("div", { className: classNames(["zen-mobile-sheet", className]), ref: ref, children: [_jsxs("div", { className: classNames(["zen-mobile-sheet__title", driveTitleClassName || ""]), children: [isBackVisible ?
-                                    _jsx(TextIconButton, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();
-                                        }, "aria-label": backButtonAriaLabel || (((_b = (_a = title[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children) || translate("Back")), type: ButtonType.TertiaryBlack, className: "zen-mobile-sheet__back-button", iconPosition: ButtonIconPosition.Start, icon: IconBackArrow, contentClasses: "ellipsis", children: title[0] }) : _jsx("span", { className: "zen-mobile-sheet__title-text", children: title[0] }), _jsx(TextIconButton, { onClick: onCloseClick, "aria-label": translate("Close"), iconSize: isDrive ? "huge" : "large", type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, className: "zen-mobile-sheet__close-button", icon: IconClose })] }), _jsx("div", { className: "zen-mobile-sheet__content", children: content[0] }), _jsx("div", { className: classNames(["zen-mobile-sheet__footer", driveFooterClassName || ""]), children: footer[0] })] }) })] });
+  }, [onHidePanel, dataShieldId]);
+  useEffect(() => {
+    setIsOpen(isOpen);
+  }, [isOpen, setIsOpen]);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (useTrapFocusWithTrigger) {
+      return;
+    }
+    if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(".zen-mobile-sheet")) {
+      return;
+    }
+    showContent && !preventFirstFocus && ((_c = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR)) === null || _c === void 0 ? void 0 : _c.focus());
+  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
+  useEffect(() => {
+    var _a;
+    if (!renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
+      triggerRef.current.setAttribute("aria-expanded", "false");
+      triggerRef.current.focus();
+    }
+  }, [triggerRef, renderComponent, readyForFocus]);
+  if (!renderComponent && !isOpen) {
+    return null;
+  }
+  return _jsxs(_Fragment, {
+    children: [_jsx(Shield, {
+      className: classNames(["zen-mobile-sheet-shield", stackingClassName ? stackingClassName : ""]),
+      dataShieldId: dataShieldId,
+      isVisible: showContent
+    }), _jsx(SidePanel, {
+      className: classNames(["zen-mobile-sheet-wrapper", wrapperClassName || "", stackingClassName ? stackingClassName : "", driveWrapperMobileSheetClassName || ""]),
+      panelPosition: panelPosition,
+      triggerRef: triggerRef,
+      label: label,
+      isOpen: showContent,
+      useTrapFocusWithTrigger: useTrapFocusWithTrigger,
+      preventFirstFocus: preventFirstFocus,
+      onHidePanel: onHidePanelAction,
+      onTransitionEnd: handleTransitionEnd,
+      children: _jsxs("div", {
+        className: classNames(["zen-mobile-sheet", className]),
+        ref: ref,
+        children: [_jsxs("div", {
+          className: classNames(["zen-mobile-sheet__title", driveTitleClassName || ""]),
+          children: [isBackVisible ? _jsx(TextIconButton, {
+            onClick: e => {
+              e.stopPropagation();
+              onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();
+            },
+            "aria-label": backButtonAriaLabel || ((_b = (_a = title[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children) || translate("Back"),
+            type: ButtonType.TertiaryBlack,
+            className: "zen-mobile-sheet__back-button",
+            iconPosition: ButtonIconPosition.Start,
+            icon: IconBackArrow,
+            contentClasses: "ellipsis",
+            children: title[0]
+          }) : _jsx("span", {
+            className: "zen-mobile-sheet__title-text",
+            children: title[0]
+          }), _jsx(TextIconButton, {
+            onClick: onCloseClick,
+            "aria-label": translate("Close"),
+            iconSize: isDrive ? "huge" : "large",
+            type: ButtonType.TertiaryBlack,
+            iconPosition: ButtonIconPosition.Start,
+            className: "zen-mobile-sheet__close-button",
+            icon: IconClose
+          })]
+        }), _jsx("div", {
+          className: "zen-mobile-sheet__content",
+          children: content[0]
+        }), _jsx("div", {
+          className: classNames(["zen-mobile-sheet__footer", driveFooterClassName || ""]),
+          children: footer[0]
+        })]
+      })
+    })]
+  });
 };
-export const TRANSLATIONS = [
-    "Close"
-];
+export const TRANSLATIONS = ["Close"];
 MobileSheet.Footer = MobileSheetFooter;
 MobileSheet.Content = MobileSheetContent;
-MobileSheet.Title = MobileSheetTitle;
+MobileSheet.Title = MobileSheetTitle;