@geotab/zenith 3.10.0-beta.0 → 3.10.0-beta.1

package/README.md

@@ -57,6 +57,11 @@ Zenith library provides components defined in Zenith Design System. It includes
 - Flip icons for Arabic (RTL) language
 - `Dropdown` search and select-all improvements
 - Fix system font fallback in Storybook pages
+- [MYG-128651](https://geotab.atlassian.net/browse/MYG-128651): Update Zenith beta pill parameters to take optional custom text
+- Increase max height of zen popup
+- [MYG-128520](https://geotab.atlassian.net/browse/MYG-128520): Fix SidePanel not animating open due to RTL regression
+- [MYG-121631](https://geotab.atlassian.net/browse/MYG-121631): Add `closeOnScroll` prop to close `ContextMenu` on scroll
+- [MYG-123578](https://geotab.atlassian.net/browse/MYG-123578): Fix checkbox accessibility by moving input inside label wrapper
 
 ### 3.9.1
 

package/dist/absolute/absolute.d.ts

@@ -22,8 +22,14 @@ export interface IAbsolute extends IZenComponentProps {
     ariaLabelledby?: string;
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
+    /**
+     * When true, closes the popup on scroll instead of repositioning it.
+     * Mutually exclusive with `recalculateOnScroll` — setting both causes a
+     * wasted position recalculation before the popup closes.
+     */
+    closeOnScroll?: boolean;
     recalculateTrigger?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/dist/absolute/absolute.js

@@ -19,7 +19,7 @@ const useScroll_1 = require("../commonHelpers/hooks/useScroll");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
-const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
+const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -47,14 +47,18 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
         return "";
     };
     const parent = (0, react_1.useMemo)(() => {
-        if (!isOpen || !recalculateOnScroll) {
+        if (!isOpen || (!recalculateOnScroll && !closeOnScroll)) {
             return null;
         }
         return (0, getScrollableParent_1.getScrollableParent)(triggerRef.current);
-    }, [triggerRef, isOpen, recalculateOnScroll]);
+    }, [triggerRef, isOpen, recalculateOnScroll, closeOnScroll]);
     const calculatePosition = (0, react_1.useCallback)(() => (0, calculatePosition_1.calculatePosition)(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
+    const handleCloseOnScroll = (0, react_1.useCallback)(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
     (0, useResize_1.useResize)(calculatePosition, isOpen);
-    (0, useScroll_1.useScroll)(calculatePosition, isOpen, parent);
+    (0, useScroll_1.useScroll)(calculatePosition, isOpen && !!recalculateOnScroll, parent);
+    (0, useScroll_1.useScroll)(handleCloseOnScroll, isOpen && !!closeOnScroll, parent);
     (0, react_1.useLayoutEffect)(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     function handleEscape() {
         onOpenChange(false);

package/dist/betaPill/betaPill.d.ts

@@ -6,10 +6,21 @@ export interface IBetaPillActions {
     link?: string;
     linkOptions?: ILinkOptions;
 }
-export interface IBetaPill {
+interface IBetaPillBase {
     className?: string;
+    name?: string;
+}
+interface IBetaPillWithActions extends IBetaPillBase {
     feedbackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
+    description?: string;
+}
+interface IBetaPillWithoutActions extends IBetaPillBase {
+    feedbackAction?: never;
+    betaOptionAction?: never;
+    description?: never;
 }
-export declare const BetaPill: ({ className, feedbackAction, betaOptionAction }: IBetaPill) => import("react/jsx-runtime").JSX.Element;
+export type IBetaPill = IBetaPillWithActions | IBetaPillWithoutActions;
+export declare const BetaPill: ({ className, feedbackAction, betaOptionAction, name, description }: IBetaPill) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
+export {};

package/dist/betaPill/betaPill.js

@@ -127,7 +127,9 @@ injectString("ar-SA", "Beta", "\u062A\u062C\u0631\u064A\u0628\u064A");
 const BetaPill = ({
   className,
   feedbackAction,
-  betaOptionAction
+  betaOptionAction,
+  name,
+  description
 }) => {
   const {
     translate
@@ -147,8 +149,8 @@ const BetaPill = ({
     return (0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, {
       isBeta: true,
       icon: iconLab_1.IconLab,
-      description: translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
-      text: translate("Beta"),
+      description: description !== null && description !== void 0 ? description : translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
+      text: name !== null && name !== void 0 ? name : translate("Beta"),
       type: "info",
       className: pillClasses,
       mainAction: resolvedMainAction,
@@ -161,7 +163,7 @@ const BetaPill = ({
     type: "info",
     children: !isMobile && (0, jsx_runtime_1.jsx)("span", {
       className: "zen-caption__content",
-      children: translate("Beta")
+      children: name !== null && name !== void 0 ? name : translate("Beta")
     })
   });
 };

package/dist/checkbox/checkbox.js

@@ -54,10 +54,10 @@ const Checkbox = (_a) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
     const checkbox = ((0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
-    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
+    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", "aria-hidden": true, children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
         return ((0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), title: title, children: [checkbox, iconAndLabel] }) }));
 };
 exports.Checkbox = Checkbox;

package/dist/controlledPopup/controlledPopup.d.ts

@@ -23,8 +23,9 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     recalculateOnScroll?: boolean;
+    closeOnScroll?: boolean;
     preventAttributesAutoSet?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/dist/controlledPopup/controlledPopup.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
-const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
@@ -24,6 +24,6 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/headerTitle/headerTitle.d.ts

@@ -16,9 +16,11 @@ export interface IHeaderTitle extends IZenComponentProps {
     allowBookmarkWithBack?: boolean;
     feedBackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
+    betaPillName?: string;
+    betaPillDescription?: string;
 }
 export declare const HeaderTitle: {
-    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/dist/headerTitle/headerTitle.js

@@ -10,7 +10,7 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const headerBack_1 = require("../header/headerBack");
 const bookmark_1 = require("../bookmark/bookmark");
 exports.HeaderTitleDisplayName = "PageHeader";
-const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }) => {
+const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const driveMainLineClassName = (0, useDriveClassName_1.useDriveClassName)("zen-page-header__main-line");
     const drivePageNameClassName = (0, useDriveClassName_1.useDriveClassName)("zen-page-header__page-name");
@@ -33,7 +33,7 @@ const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMob
         });
         return [b, b.length && !allowBookmarkWithBack ? o.filter(el => el.type !== bookmark_1.Bookmark) : o];
     }, [children, allowBookmarkWithBack]);
-    return ((0, jsx_runtime_1.jsxs)("header", { id: id, className: clsNames, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? (0, jsx_runtime_1.jsx)("h1", { className: (0, classNames_1.classNames)(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? (0, jsx_runtime_1.jsx)(betaPill_1.BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }) : null, other.length ? other : null] }), subline || ""] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { id: id, className: clsNames, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? (0, jsx_runtime_1.jsx)("h1", { className: (0, classNames_1.classNames)(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? ((0, jsx_runtime_1.jsx)(betaPill_1.BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, name: betaPillName, description: betaPillDescription, className: "zen-page-header__beta" })) : null, other.length ? other : null] }), subline || ""] }));
 };
 exports.HeaderTitle = HeaderTitle;
 exports.HeaderTitle.displayName = exports.HeaderTitleDisplayName;

package/dist/index.css

@@ -3443,7 +3443,7 @@ html:lang(ar) .zen-menu-button__action--drive-tablet {
   box-sizing: border-box;
   background-color: var(--backgrounds-main);
   padding: 4px 0;
-  max-height: 800px;
+  max-height: 90vh;
   border: 0px;
   min-height: 30px;
   min-width: 170px;
@@ -3523,6 +3523,9 @@ html:lang(ar) .zen-side-panel {
   visibility: visible;
   pointer-events: auto;
 }
+.zen-side-panel.zen-side-panel--shown {
+  transform: translateX(0);
+}
 .zen-side-panel--shown .zen-form-field--new-component {
   display: flex;
 }
@@ -4849,42 +4852,45 @@ html:lang(ar) .zen-checkbox__label-text {
 .zen-checkbox__icon--disabled {
   fill: var(--backgrounds-content-0);
 }
-.zen-checkbox__input:checked + .zen-checkbox__label > .zen-checkbox__box,
-.zen-checkbox__input:indeterminate + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:checked) .zen-checkbox__box,
+.zen-checkbox:has(.zen-checkbox__input:indeterminate) .zen-checkbox__box {
   border-color: var(--borders-form-field--active);
   background-color: var(--borders-form-field--active);
   fill: var(--text-reverse-primary);
   color: var(--text-reverse-primary);
   stroke: var(--text-reverse-primary);
 }
-.zen-checkbox__input:checked + .zen-checkbox__label > .zen-checkbox__box .zen-checkbox__icon,
-.zen-checkbox__input:indeterminate + .zen-checkbox__label > .zen-checkbox__box .zen-checkbox__icon {
+.zen-checkbox:has(.zen-checkbox__input:checked) .zen-checkbox__box .zen-checkbox__icon,
+.zen-checkbox:has(.zen-checkbox__input:indeterminate) .zen-checkbox__box .zen-checkbox__icon {
   display: block;
 }
-.zen-checkbox__input:focus + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__box,
+.zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__label {
   outline: 1px solid var(--zen-checkbox-outline, var(--borders-form-field--active));
   outline-offset: var(--border-width-default);
 }
 /* This was added because safari just added support for :focus-visible. Can be removed after 3 versions of safari browser. */
 @supports selector(:focus-visible) {
-  .zen-checkbox__input:focus + .zen-checkbox__label > .zen-checkbox__box {
+  .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__box,
+  .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__label {
     outline: none;
   }
-  .zen-checkbox__input:focus-visible + .zen-checkbox__label > .zen-checkbox__box {
+  .zen-checkbox:has(.zen-checkbox__input:focus-visible) .zen-checkbox__box,
+  .zen-checkbox:has(.zen-checkbox__input:focus-visible) .zen-checkbox__label {
     outline: 1px solid var(--zen-checkbox-outline, var(--borders-form-field--active));
     outline-offset: var(--border-width-default);
   }
 }
-.zen-checkbox__input:disabled + .zen-checkbox__label {
+.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__label {
   fill: var(--text-reverse-primary);
   color: var(--text-button-disabled);
 }
-.zen-checkbox__input:disabled + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__box {
   border-color: var(--borders-general);
   background-color: var(--backgrounds-field-disabled);
 }
-.zen-checkbox__input:disabled:checked + .zen-checkbox__label > .zen-checkbox__box,
-.zen-checkbox__input:disabled:indeterminate + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:disabled:checked) .zen-checkbox__box,
+.zen-checkbox:has(.zen-checkbox__input:disabled:indeterminate) .zen-checkbox__box {
   border-color: var(--borders-general);
   background-color: var(--borders-general);
 }

package/dist/menu/controlledMenu.d.ts

@@ -17,6 +17,7 @@ export interface IControlledMenu extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     listClassName?: string;
+    closeOnScroll?: boolean;
 }
 type TControlledMenu = FC<IControlledMenu> & {
     Item: FC<IMenuControlledItem>;

package/dist/menu/controlledMenu.js

@@ -23,7 +23,7 @@ const generateId_1 = require("../commonHelpers/generateId");
 const pathProvider_1 = require("./contexts/pathProvider");
 const menuSeparator_1 = require("./components/menuSeparator");
 const focusableSelector_1 = require("../utils/focusableSelector");
-const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
+const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment, closeOnScroll = true }) => {
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const memoizedOnChange = (0, react_1.useCallback)(setIsOpen, [setIsOpen]);
@@ -218,7 +218,7 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
     if (isMobile) {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, closeOnScroll: closeOnScroll, 
                 // focusOnOpen is false - ControlledMenu handles focus based on input method
                 // (keyboard vs mouse) in its own useEffect
                 focusOnOpen: false, children: renderMenuList() }) }) }));

package/esm/absolute/absolute.d.ts

@@ -22,8 +22,14 @@ export interface IAbsolute extends IZenComponentProps {
     ariaLabelledby?: string;
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
+    /**
+     * When true, closes the popup on scroll instead of repositioning it.
+     * Mutually exclusive with `recalculateOnScroll` — setting both causes a
+     * wasted position recalculation before the popup closes.
+     */
+    closeOnScroll?: boolean;
     recalculateTrigger?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/esm/absolute/absolute.js

@@ -16,7 +16,7 @@ import { useScroll } from "../commonHelpers/hooks/useScroll";
 import { getScrollableParent } from "../utils/getScrollableParent";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
+export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = useRef(null);
     const prevScroll = useRef(0);
     const { dark } = useContext(themeContext);
@@ -44,14 +44,18 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
         return "";
     };
     const parent = useMemo(() => {
-        if (!isOpen || !recalculateOnScroll) {
+        if (!isOpen || (!recalculateOnScroll && !closeOnScroll)) {
             return null;
         }
         return getScrollableParent(triggerRef.current);
-    }, [triggerRef, isOpen, recalculateOnScroll]);
+    }, [triggerRef, isOpen, recalculateOnScroll, closeOnScroll]);
     const calculatePosition = useCallback(() => calculatePos(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
+    const handleCloseOnScroll = useCallback(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
     useResize(calculatePosition, isOpen);
-    useScroll(calculatePosition, isOpen, parent);
+    useScroll(calculatePosition, isOpen && !!recalculateOnScroll, parent);
+    useScroll(handleCloseOnScroll, isOpen && !!closeOnScroll, parent);
     useLayoutEffect(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     function handleEscape() {
         onOpenChange(false);

package/esm/betaPill/betaPill.d.ts

@@ -6,10 +6,21 @@ export interface IBetaPillActions {
     link?: string;
     linkOptions?: ILinkOptions;
 }
-export interface IBetaPill {
+interface IBetaPillBase {
     className?: string;
+    name?: string;
+}
+interface IBetaPillWithActions extends IBetaPillBase {
     feedbackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
+    description?: string;
+}
+interface IBetaPillWithoutActions extends IBetaPillBase {
+    feedbackAction?: never;
+    betaOptionAction?: never;
+    description?: never;
 }
-export declare const BetaPill: ({ className, feedbackAction, betaOptionAction }: IBetaPill) => import("react/jsx-runtime").JSX.Element;
+export type IBetaPill = IBetaPillWithActions | IBetaPillWithoutActions;
+export declare const BetaPill: ({ className, feedbackAction, betaOptionAction, name, description }: IBetaPill) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
+export {};

package/esm/betaPill/betaPill.js

@@ -119,7 +119,9 @@ injectString("ar-SA", "Beta", "\u062A\u062C\u0631\u064A\u0628\u064A");
 export const BetaPill = ({
   className,
   feedbackAction,
-  betaOptionAction
+  betaOptionAction,
+  name,
+  description
 }) => {
   const {
     translate
@@ -139,8 +141,8 @@ export const BetaPill = ({
     return _jsx(PillExpandable, {
       isBeta: true,
       icon: IconLab,
-      description: translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
-      text: translate("Beta"),
+      description: description !== null && description !== void 0 ? description : translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
+      text: name !== null && name !== void 0 ? name : translate("Beta"),
       type: "info",
       className: pillClasses,
       mainAction: resolvedMainAction,
@@ -153,7 +155,7 @@ export const BetaPill = ({
     type: "info",
     children: !isMobile && _jsx("span", {
       className: "zen-caption__content",
-      children: translate("Beta")
+      children: name !== null && name !== void 0 ? name : translate("Beta")
     })
   });
 };

package/esm/checkbox/checkbox.js

@@ -28,9 +28,9 @@ export const Checkbox = (_a) => {
     const isMobile = useMobile();
     const checkboxIconClasses = useMemo(() => classNames(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
     const checkbox = (_jsx(TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
-    const iconAndLabel = (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? (_jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === CheckboxState.On ? (_jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? (_jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
+    const iconAndLabel = (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", "aria-hidden": true, children: state === CheckboxState.Indeterminate ? (_jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === CheckboxState.On ? (_jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? (_jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
         return (_jsxs("label", { className: classNames(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, _jsx("div", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return (_jsxs("div", { className: classNames(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, _jsx("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
+    return (_jsx("div", { className: classNames(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: _jsxs("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), title: title, children: [checkbox, iconAndLabel] }) }));
 };

package/esm/controlledPopup/controlledPopup.d.ts

@@ -23,8 +23,9 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     recalculateOnScroll?: boolean;
+    closeOnScroll?: boolean;
     preventAttributesAutoSet?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/esm/controlledPopup/controlledPopup.js

@@ -3,7 +3,7 @@ import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
-export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
@@ -21,5 +21,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };

package/esm/headerTitle/headerTitle.d.ts

@@ -16,9 +16,11 @@ export interface IHeaderTitle extends IZenComponentProps {
     allowBookmarkWithBack?: boolean;
     feedBackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
+    betaPillName?: string;
+    betaPillDescription?: string;
 }
 export declare const HeaderTitle: {
-    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/headerTitle/headerTitle.js

@@ -7,7 +7,7 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { HeaderBack } from "../header/headerBack";
 import { Bookmark } from "../bookmark/bookmark";
 export const HeaderTitleDisplayName = "PageHeader";
-export const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }) => {
+export const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription }) => {
     const isMobile = useMobile();
     const driveMainLineClassName = useDriveClassName("zen-page-header__main-line");
     const drivePageNameClassName = useDriveClassName("zen-page-header__page-name");
@@ -30,7 +30,7 @@ export const HeaderTitle = ({ id, children, className, pageName, subline, isBeta
         });
         return [b, b.length && !allowBookmarkWithBack ? o.filter(el => el.type !== Bookmark) : o];
     }, [children, allowBookmarkWithBack]);
-    return (_jsxs("header", { id: id, className: clsNames, children: [_jsxs("div", { className: classNames(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? _jsx("h1", { className: classNames(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? _jsx(BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }) : null, other.length ? other : null] }), subline || ""] }));
+    return (_jsxs("header", { id: id, className: clsNames, children: [_jsxs("div", { className: classNames(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? _jsx("h1", { className: classNames(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? (_jsx(BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, name: betaPillName, description: betaPillDescription, className: "zen-page-header__beta" })) : null, other.length ? other : null] }), subline || ""] }));
 };
 HeaderTitle.displayName = HeaderTitleDisplayName;
 export const TRANSLATIONS = [...BetaPillTranslations];

package/esm/menu/controlledMenu.d.ts

@@ -17,6 +17,7 @@ export interface IControlledMenu extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     listClassName?: string;
+    closeOnScroll?: boolean;
 }
 type TControlledMenu = FC<IControlledMenu> & {
     Item: FC<IMenuControlledItem>;

package/esm/menu/controlledMenu.js

@@ -20,7 +20,7 @@ import { generateId } from "../commonHelpers/generateId";
 import { PathProvider } from "./contexts/pathProvider";
 import { isSeparator, MenuSeparator } from "./components/menuSeparator";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
-export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
+export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment, closeOnScroll = true }) => {
     const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
     const isMobile = deviceType === DeviceType.Mobile;
     const memoizedOnChange = useCallback(setIsOpen, [setIsOpen]);
@@ -215,7 +215,7 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
     if (isMobile) {
         return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) }));
     }
-    return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
+    return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, closeOnScroll: closeOnScroll, 
                 // focusOnOpen is false - ControlledMenu handles focus based on input method
                 // (keyboard vs mouse) in its own useEffect
                 focusOnOpen: false, children: renderMenuList() }) }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.10.0-beta.0",
+    "version": "3.10.0-beta.1",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",