@geotab/zenith 3.9.1 → 3.9.2

package/README.md

@@ -47,6 +47,10 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.9.2
+
+- Fix `ControlledPopup` max-height
+
 ### 3.9.1
 
 - Fix `GroupsButton` styles

package/dist/betaPill/betaPill.d.ts

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

package/dist/betaPill/betaPill.js

@@ -124,11 +124,14 @@ injectString("zh-Hans", "Beta", "\u6D4B\u8BD5\u7248");
 injectString("zh-TW", "Beta", "\u6E2C\u8A66\u7248");
 injectString("ro-RO", "Beta", "Beta");
 injectString("ar-SA", "Beta", "\u062A\u062C\u0631\u064A\u0628\u064A");
-const BetaPill = ({
-  className,
-  feedbackAction,
-  betaOptionAction
-}) => {
+const BetaPill = props => {
+  const {
+    className,
+    feedbackAction,
+    betaOptionAction,
+    name,
+    description
+  } = props;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
@@ -147,8 +150,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 +164,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/headerTitle/headerTitle.d.ts

@@ -3,6 +3,14 @@ import "./headerTitle.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IBetaPillActions } from "../betaPill/betaPill";
 export declare const HeaderTitleDisplayName = "PageHeader";
+/**
+ * @internal - temporary escape hatch
+ * @deprecated DO NOT USE in external consumers
+ */
+export interface IHeaderTitleInternal {
+    betaPillName?: string;
+    betaPillDescription?: string;
+}
 export interface IHeaderTitle extends IZenComponentProps {
     id?: string;
     pageName: string;
@@ -18,7 +26,7 @@ export interface IHeaderTitle extends IZenComponentProps {
     betaOptionAction?: IBetaPillActions;
 }
 export declare const HeaderTitle: {
-    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
+    (props: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/dist/headerTitle/headerTitle.js

@@ -10,7 +10,8 @@ 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 = (props) => {
+    const { id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription } = props;
     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 +34,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, Object.assign({ feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }, { name: betaPillName, description: betaPillDescription }))) : null, other.length ? other : null] }), subline || ""] }));
 };
 exports.HeaderTitle = HeaderTitle;
 exports.HeaderTitle.displayName = exports.HeaderTitleDisplayName;

package/dist/index.css

@@ -3438,7 +3438,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;

package/esm/betaPill/betaPill.d.ts

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

package/esm/betaPill/betaPill.js

@@ -116,11 +116,14 @@ injectString("zh-Hans", "Beta", "\u6D4B\u8BD5\u7248");
 injectString("zh-TW", "Beta", "\u6E2C\u8A66\u7248");
 injectString("ro-RO", "Beta", "Beta");
 injectString("ar-SA", "Beta", "\u062A\u062C\u0631\u064A\u0628\u064A");
-export const BetaPill = ({
-  className,
-  feedbackAction,
-  betaOptionAction
-}) => {
+export const BetaPill = props => {
+  const {
+    className,
+    feedbackAction,
+    betaOptionAction,
+    name,
+    description
+  } = props;
   const {
     translate
   } = useLanguage();
@@ -139,8 +142,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 +156,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/headerTitle/headerTitle.d.ts

@@ -3,6 +3,14 @@ import "./headerTitle.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IBetaPillActions } from "../betaPill/betaPill";
 export declare const HeaderTitleDisplayName = "PageHeader";
+/**
+ * @internal - temporary escape hatch
+ * @deprecated DO NOT USE in external consumers
+ */
+export interface IHeaderTitleInternal {
+    betaPillName?: string;
+    betaPillDescription?: string;
+}
 export interface IHeaderTitle extends IZenComponentProps {
     id?: string;
     pageName: string;
@@ -18,7 +26,7 @@ export interface IHeaderTitle extends IZenComponentProps {
     betaOptionAction?: IBetaPillActions;
 }
 export declare const HeaderTitle: {
-    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
+    (props: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/headerTitle/headerTitle.js

@@ -7,7 +7,8 @@ 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 = (props) => {
+    const { id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription } = props;
     const isMobile = useMobile();
     const driveMainLineClassName = useDriveClassName("zen-page-header__main-line");
     const drivePageNameClassName = useDriveClassName("zen-page-header__page-name");
@@ -30,7 +31,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, Object.assign({ feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }, { name: betaPillName, description: betaPillDescription }))) : null, other.length ? other : null] }), subline || ""] }));
 };
 HeaderTitle.displayName = HeaderTitleDisplayName;
 export const TRANSLATIONS = [...BetaPillTranslations];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.9.1",
+    "version": "3.9.2",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -82,6 +82,8 @@
         "less": "^4.1.3",
         "less-loader": "^12.2.0",
         "mini-css-extract-plugin": "^2.9.2",
+        "postcss-loader": "^8.2.1",
+        "postcss-rtlcss": "^6.0.0",
         "prettier": "^3.8.1",
         "storybook": "^10.3.5",
         "style-loader": "^4.0.0",