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

package/dist/list/listItem/listItem.js

@@ -1,9 +1,39 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const iconGrab_1 = require("../../icons/iconGrab");
+injectString("cs", "More", "V\xEDce");
+injectString("da-DK", "More", "Mere");
+injectString("de", "More", "Mehr");
+injectString("en", "More", "More");
+injectString("es", "More", "M\xE1s");
+injectString("fi-FI", "More", "Lis\xE4\xE4");
+injectString("fr", "More", "Plus");
+injectString("fr-FR", "More", "En savoir plus");
+injectString("hu-HU", "More", "M\xE9g t\xF6bb.");
+injectString("id", "More", "Lainnya");
+injectString("it", "More", "Altro");
+injectString("ja", "More", "\u305D\u306E\u4ED6");
+injectString("ko-KR", "More", "\uC790\uC138\uD788");
+injectString("ms", "More", "Lagi");
+injectString("nb-NO", "More", "Mer");
+injectString("nl", "More", "Meer");
+injectString("pl", "More", "Wi\u0119cej");
+injectString("pt-BR", "More", "Mais");
+injectString("sk-SK", "More", "Viac");
+injectString("sv", "More", "Mer");
+injectString("th", "More", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "More", "Di\u011Fer");
+injectString("zh-Hans", "More", "\u66F4\u591A");
+injectString("zh-TW", "More", "\u66F4\u591A");
 const button_1 = require("../../button/button");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const menu_1 = require("../../menu/menu");
@@ -15,58 +45,141 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useIconSize_1 = require("../../utils/theme/useIconSize");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
 const isActiveElement_1 = require("../utils/isActiveElement");
-const ListItem = ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }) => {
-    const isMobile = (0, useMobile_1.useMobile)();
-    const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-list-item");
-    const iconSize = (0, useIconSize_1.useIconSize)();
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const itemRef = (0, react_1.useRef)(null);
-    const renderActions = (0, react_1.useCallback)(() => {
-        if (!actions || actions.length === 0) {
-            return null;
-        }
-        const { primaryActions, secondaryActions } = actions.reduce((acc, action) => {
-            if (!isMobile && action.hasOwnProperty("icon")) {
-                acc.primaryActions.push(action);
-            }
-            else {
-                acc.secondaryActions.push(action);
-            }
-            return acc;
-        }, { primaryActions: [], secondaryActions: [] });
-        const buttons = (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__actions", children: primaryActions.map((action) => (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__action-button", onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined, link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined, children: action.icon ? (0, react_1.createElement)(action.icon, { size: iconSize }) : null }, action.name)) });
-        const menu = secondaryActions.length > 0
-            ? (0, jsx_runtime_1.jsx)(menu_1.Menu, { alignment: "bottom-right", title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__more-button", children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "large" }) }), children: secondaryActions.map((action) => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: action.name, name: action.name, onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined, link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined }, action.name)) })
-            : null;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttons, menu] });
-    }, [actions, iconSize, isMobile, translate]);
-    const isDndElement = (0, react_1.useCallback)((el) => {
-        if (!el) {
-            return false;
-        }
-        if (typeof el.className !== "string") {
-            return false;
-        }
-        return el.className.indexOf("zen-list-item__dnd") !== -1;
-    }, []);
-    const handleClick = (0, react_1.useCallback)((e) => {
-        if (!onClick && !link) {
-            return;
-        }
-        if ((0, isActiveElement_1.isActiveElement)(e.target) || isDndElement(e.target)) {
-            return;
-        }
-        if (onClick) {
-            onClick();
-            return;
-        }
-        if (itemRef.current) {
-            const linkEl = itemRef.current.querySelector(".zen-list-item__click");
-            linkEl === null || linkEl === void 0 ? void 0 : linkEl.click();
-        }
-    }, [isDndElement, link, onClick]);
-    const clickableClassName = (0, react_1.useMemo)(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (0, jsx_runtime_1.jsxs)("li", { id: id, className: (0, classNames_1.classNames)(["zen-list-item", driveClassName || "", clickableClassName, className || ""]), onClick: handleClick, ref: itemRef, children: [onDragStart ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__dnd", onPointerDown: onDragStart, children: (0, jsx_runtime_1.jsx)(iconGrab_1.IconGrab, { size: "large" }) }) : null, image ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__image", children: image }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-list-item__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__name", children: name }), (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__secondary", children: secondary })] }), status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__status", children: status }) : null, renderActions(), onClick || link ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__click", onClick: onClick, link: link, target: target, children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large", className: "zen-list-item__click-icon" }) }) : null] });
+const ListItem = ({
+  id,
+  className,
+  image,
+  name,
+  secondary,
+  status,
+  actions,
+  onClick,
+  link,
+  target,
+  onDragStart
+}) => {
+  const isMobile = (0, useMobile_1.useMobile)();
+  const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-list-item");
+  const iconSize = (0, useIconSize_1.useIconSize)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const itemRef = (0, react_1.useRef)(null);
+  const renderActions = (0, react_1.useCallback)(() => {
+    if (!actions || actions.length === 0) {
+      return null;
+    }
+    const {
+      primaryActions,
+      secondaryActions
+    } = actions.reduce((acc, action) => {
+      if (!isMobile && action.hasOwnProperty("icon")) {
+        acc.primaryActions.push(action);
+      } else {
+        acc.secondaryActions.push(action);
+      }
+      return acc;
+    }, {
+      primaryActions: [],
+      secondaryActions: []
+    });
+    const buttons = (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-list-item__actions",
+      children: primaryActions.map(action => (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: "tertiary-black",
+        className: "zen-list-item__action-button",
+        onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined,
+        link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined,
+        children: action.icon ? (0, react_1.createElement)(action.icon, {
+          size: iconSize
+        }) : null
+      }, action.name))
+    });
+    const menu = secondaryActions.length > 0 ? (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+      alignment: "bottom-right",
+      title: translate("More"),
+      trigger: (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: "tertiary-black",
+        className: "zen-list-item__more-button",
+        children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
+          size: "large"
+        })
+      }),
+      children: secondaryActions.map(action => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, {
+        id: action.name,
+        name: action.name,
+        onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined,
+        link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined
+      }, action.name))
+    }) : null;
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [buttons, menu]
+    });
+  }, [actions, iconSize, isMobile, translate]);
+  const isDndElement = (0, react_1.useCallback)(el => {
+    if (!el) {
+      return false;
+    }
+    if (typeof el.className !== "string") {
+      return false;
+    }
+    return el.className.indexOf("zen-list-item__dnd") !== -1;
+  }, []);
+  const handleClick = (0, react_1.useCallback)(e => {
+    if (!onClick && !link) {
+      return;
+    }
+    if ((0, isActiveElement_1.isActiveElement)(e.target) || isDndElement(e.target)) {
+      return;
+    }
+    if (onClick) {
+      onClick();
+      return;
+    }
+    if (itemRef.current) {
+      const linkEl = itemRef.current.querySelector(".zen-list-item__click");
+      linkEl === null || linkEl === void 0 ? void 0 : linkEl.click();
+    }
+  }, [isDndElement, link, onClick]);
+  const clickableClassName = (0, react_1.useMemo)(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (0, jsx_runtime_1.jsxs)("li", {
+    id: id,
+    className: (0, classNames_1.classNames)(["zen-list-item", driveClassName || "", clickableClassName, className || ""]),
+    onClick: handleClick,
+    ref: itemRef,
+    children: [onDragStart ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-list-item__dnd",
+      onPointerDown: onDragStart,
+      children: (0, jsx_runtime_1.jsx)(iconGrab_1.IconGrab, {
+        size: "large"
+      })
+    }) : null, image ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-list-item__image",
+      children: image
+    }) : null, (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-list-item__identifier",
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: "zen-list-item__name",
+        children: name
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-list-item__secondary",
+        children: secondary
+      })]
+    }), status ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-list-item__status",
+      children: status
+    }) : null, renderActions(), onClick || link ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: "tertiary-black",
+      className: "zen-list-item__click",
+      onClick: onClick,
+      link: link,
+      target: target,
+      children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+        size: "large",
+        className: "zen-list-item__click-icon"
+      })
+    }) : null]
+  });
 };
-exports.ListItem = ListItem;
+exports.ListItem = ListItem;

package/dist/menu/components/menuErrorItem.js

@@ -1,12 +1,40 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.MenuErrorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
 const iconWarning_1 = require("../../icons/iconWarning");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const MenuErrorItem = ({ id, onClick }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: id, className: "zen-menu-error-item", icon: iconWarning_1.IconWarning, type: "tertiary-destructive", onClick: onClick, role: "menuitem", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: translate("Error with loading") }, `error-msg-${id}`), (0, jsx_runtime_1.jsx)("div", { className: "zen-menu-error-item__nav", children: translate("Click to refresh") }, `error-nav-${id}`)] }) });
+injectString("en", "Error with loading", "Error with loading");
+injectString("en", "Click to refresh", "Click to refresh");
+const MenuErrorItem = ({
+  id,
+  onClick
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+    id: id,
+    className: "zen-menu-error-item",
+    icon: iconWarning_1.IconWarning,
+    type: "tertiary-destructive",
+    onClick: onClick,
+    role: "menuitem",
+    children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        children: translate("Error with loading")
+      }, `error-msg-${id}`), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-menu-error-item__nav",
+        children: translate("Click to refresh")
+      }, `error-nav-${id}`)]
+    })
+  });
 };
-exports.MenuErrorItem = MenuErrorItem;
+exports.MenuErrorItem = MenuErrorItem;

package/dist/mobileSheet/mobileSheet.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.TRANSLATIONS = exports.MobileSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -11,6 +17,54 @@ const mobileSheetContent_1 = require("./components/mobileSheetContent");
 const mobileSheetTitle_1 = require("./components/mobileSheetTitle");
 const buttonType_1 = require("../button/buttonType");
 const textIconButton_1 = require("../textIconButton/textIconButton");
+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");
 const iconBackArrow_1 = require("../icons/deprecated/iconBackArrow");
 const iconClose_1 = require("../icons/iconClose");
 const focusableSelector_1 = require("../utils/focusableSelector");
@@ -20,77 +74,149 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const useUniqueId_1 = require("../commonHelpers/useUniqueId");
 const useFadeComponent_1 = require("../utils/useFadeComponent");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const MobileSheet = 
+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 } = (0, useFadeComponent_1.useFadeComponent)(isOpen, onReadyForFocus);
-    const dataShieldId = (0, useUniqueId_1.useUniqueId)();
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const ref = (0, react_1.useRef)(null);
-    const isDrive = (0, useDrive_1.useDrive)();
-    const driveWrapperMobileSheetClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet-wrapper");
-    const driveTitleClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet__title");
-    const driveFooterClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet__footer");
-    const [content, footer, title] = (0, react_1.useMemo)(() => {
-        const c = [];
-        const f = [];
-        const t = [];
-        react_1.Children.forEach(children, (child) => {
-            if (!f.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Footer) {
-                f.push(child);
-                return;
-            }
-            if (!c.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Content) {
-                c.push(child);
-                return;
-            }
-            if (!t.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Title) {
-                t.push(child);
-                return;
-            }
-        });
-        return [c, f, t];
-    }, [children]);
-    const onHidePanelAction = (0, react_1.useCallback)((reason, shieldId) => {
-        if (reason === sidePanel_1.SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === sidePanel_1.SidePanelCloseReason.Escape) {
-            onHidePanel(reason);
-            return;
-        }
-    }, [onHidePanel, dataShieldId]);
-    (0, react_1.useEffect)(() => {
-        setIsOpen(isOpen);
-    }, [isOpen, setIsOpen]);
-    (0, react_1.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(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _c === void 0 ? void 0 : _c.focus());
-    }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
-    (0, react_1.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
+  } = (0, useFadeComponent_1.useFadeComponent)(isOpen, onReadyForFocus);
+  const dataShieldId = (0, useUniqueId_1.useUniqueId)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const ref = (0, react_1.useRef)(null);
+  const isDrive = (0, useDrive_1.useDrive)();
+  const driveWrapperMobileSheetClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet-wrapper");
+  const driveTitleClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet__title");
+  const driveFooterClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet__footer");
+  const [content, footer, title] = (0, react_1.useMemo)(() => {
+    const c = [];
+    const f = [];
+    const t = [];
+    react_1.Children.forEach(children, child => {
+      if (!f.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Footer) {
+        f.push(child);
+        return;
+      }
+      if (!c.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Content) {
+        c.push(child);
+        return;
+      }
+      if (!t.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Title) {
+        t.push(child);
+        return;
+      }
+    });
+    return [c, f, t];
+  }, [children]);
+  const onHidePanelAction = (0, react_1.useCallback)((reason, shieldId) => {
+    if (reason === sidePanel_1.SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === sidePanel_1.SidePanelCloseReason.Escape) {
+      onHidePanel(reason);
+      return;
     }
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, { className: (0, classNames_1.classNames)(["zen-mobile-sheet-shield", stackingClassName ? stackingClassName : ""]), dataShieldId: dataShieldId, isVisible: showContent }), (0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, { className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet", className]), ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet__title", driveTitleClassName || ""]), children: [isBackVisible ?
-                                    (0, jsx_runtime_1.jsx)(textIconButton_1.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_1.ButtonType.TertiaryBlack, className: "zen-mobile-sheet__back-button", iconPosition: textIconButton_1.ButtonIconPosition.Start, icon: iconBackArrow_1.IconBackArrow, contentClasses: "ellipsis", children: title[0] }) : (0, jsx_runtime_1.jsx)("span", { className: "zen-mobile-sheet__title-text", children: title[0] }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { onClick: onCloseClick, "aria-label": translate("Close"), iconSize: isDrive ? "huge" : "large", type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: "zen-mobile-sheet__close-button", icon: iconClose_1.IconClose })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-mobile-sheet__content", children: content[0] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet__footer", driveFooterClassName || ""]), children: footer[0] })] }) })] });
+  }, [onHidePanel, dataShieldId]);
+  (0, react_1.useEffect)(() => {
+    setIsOpen(isOpen);
+  }, [isOpen, setIsOpen]);
+  (0, react_1.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(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _c === void 0 ? void 0 : _c.focus());
+  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
+  (0, react_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, {
+      className: (0, classNames_1.classNames)(["zen-mobile-sheet-shield", stackingClassName ? stackingClassName : ""]),
+      dataShieldId: dataShieldId,
+      isVisible: showContent
+    }), (0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, {
+      className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", {
+        className: (0, classNames_1.classNames)(["zen-mobile-sheet", className]),
+        ref: ref,
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: (0, classNames_1.classNames)(["zen-mobile-sheet__title", driveTitleClassName || ""]),
+          children: [isBackVisible ? (0, jsx_runtime_1.jsx)(textIconButton_1.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_1.ButtonType.TertiaryBlack,
+            className: "zen-mobile-sheet__back-button",
+            iconPosition: textIconButton_1.ButtonIconPosition.Start,
+            icon: iconBackArrow_1.IconBackArrow,
+            contentClasses: "ellipsis",
+            children: title[0]
+          }) : (0, jsx_runtime_1.jsx)("span", {
+            className: "zen-mobile-sheet__title-text",
+            children: title[0]
+          }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+            onClick: onCloseClick,
+            "aria-label": translate("Close"),
+            iconSize: isDrive ? "huge" : "large",
+            type: buttonType_1.ButtonType.TertiaryBlack,
+            iconPosition: textIconButton_1.ButtonIconPosition.Start,
+            className: "zen-mobile-sheet__close-button",
+            icon: iconClose_1.IconClose
+          })]
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-mobile-sheet__content",
+          children: content[0]
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: (0, classNames_1.classNames)(["zen-mobile-sheet__footer", driveFooterClassName || ""]),
+          children: footer[0]
+        })]
+      })
+    })]
+  });
 };
 exports.MobileSheet = MobileSheet;
-exports.TRANSLATIONS = [
-    "Close"
-];
+exports.TRANSLATIONS = ["Close"];
 exports.MobileSheet.Footer = mobileSheetFooter_1.MobileSheetFooter;
 exports.MobileSheet.Content = mobileSheetContent_1.MobileSheetContent;
-exports.MobileSheet.Title = mobileSheetTitle_1.MobileSheetTitle;
+exports.MobileSheet.Title = mobileSheetTitle_1.MobileSheetTitle;