@geotab/zenith 1.22.3 → 1.22.4

package/README.md

@@ -40,6 +40,18 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.22.4
+
+ * Prevent `ListItem` to follow link on action click
+ * Fix long title in `Card`
+ * Fix long title in `Banner`
+ * Add the property to configure initial focus in `Modal`
+
+### 1.22.3
+
+ * Update `Card` appearance
+ * Trim whitespaces in `Dropdown` search with dataItems
+
 ### 1.22.2
 
  * Add component `List`

package/dist/index.css

@@ -4927,6 +4927,11 @@
   line-height: 16px;
   text-transform: none;
   padding-right: 8px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-align: start;
 }
 .zen-banner__header--drive {
   font-family: var(--main-font);
@@ -4994,6 +4999,10 @@
   overflow: unset;
   text-overflow: unset;
   white-space: unset;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
 }
 .zen-banner__message--multiline {
   font-family: var(--main-font);
@@ -6067,6 +6076,7 @@
   align-items: center;
   box-sizing: border-box;
   min-height: 24px;
+  min-width: 0;
 }
 .zen-card-title * {
   box-sizing: border-box;
@@ -6123,6 +6133,7 @@
   flex: 1 1 auto;
   gap: 4px;
   text-decoration: none;
+  min-width: 0;
 }
 .zen-card-title__link-text {
   font-family: var(--main-font);
@@ -6137,6 +6148,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  min-width: 0;
 }
 .zen-card-title__link-chevron {
   width: 16px;
@@ -6195,6 +6207,7 @@
   gap: 4px;
   width: 100%;
   box-sizing: border-box;
+  min-width: 0;
 }
 .zen-card__header-primary {
   display: flex;
@@ -6471,7 +6484,7 @@
   display: initial;
   flex: 0 0 auto;
 }
-.zen-favorite-button__filled {
+.zen-favorite-button__filled.zen-favorite-button__filled {
   display: none;
   flex: 0 0 auto;
 }

package/dist/index.d.ts

@@ -623,7 +623,8 @@ export { isButton } from "./menu/utils/isButton";
 export { isLink } from "./menu/utils/isLink";
 export { type IMiniTabElement, MiniTabsSize, type IMiniTabs, MiniTabs } from "./miniTabs/miniTabs";
 export { type IMobileSheet, MobileSheet } from "./mobileSheet/mobileSheet";
-export { type IModal, Modal, type IDialogContent, DialogContentNew } from "./modal/modal";
+export { type TFocusElement, type IModal, Modal, type IDialogContent, DialogContentNew } from "./modal/modal";
+export { getPredefinedFocusableItem } from "./modal/modalHelpers";
 export { type INotificationProps, Notification } from "./notification/notification";
 export { type IPageContentLayout, PageContentLayout } from "./pageLayout/pageContentLayout/pageContentLayout";
 export { PageLayout } from "./pageLayout/pageLayout";

package/dist/index.js

@@ -13,9 +13,9 @@ exports.IconMove = exports.IconMouseScrollUp = exports.IconMouseScrollDown = exp
 exports.IconQuestion = exports.IconPuzzle = exports.IconPullRequest = exports.IconProcessor = exports.IconPrinter = exports.IconPound = exports.IconPlusSquare = exports.IconPlusLines = exports.IconPlusFile = exports.IconPlusCircle = exports.IconPlus = exports.IconPlay = exports.IconPinLocation3 = exports.IconPinLocation2 = exports.IconPinLocation = exports.IconPin2 = exports.IconPin = exports.IconPhoneMobile = exports.IconPhone = exports.IconPerformance = exports.IconPercent = exports.IconPeopleLike = exports.IconPeopleGroup2 = exports.IconPeopleGroup = exports.IconPeople = exports.IconPencil2 = exports.IconPencil = exports.IconPause = exports.IconPassword = exports.IconPaperPlane = exports.IconPackage3 = exports.IconPackage2 = exports.IconPackage = exports.IconPDF = exports.IconOptAlt = exports.IconOpt = exports.IconOpen2 = exports.IconOpen = exports.IconOnDuty = exports.IconNumberedList = exports.IconNotifications = exports.IconNotificationOff = exports.IconNotificationBell = exports.IconNotificationAlarm = exports.IconNote = exports.IconNewspaper = exports.IconNews = exports.IconMyGeotab = exports.IconMyAdmin = exports.IconMove2 = void 0;
 exports.IconSortVertical = exports.IconSortHorizontal = exports.IconSort2Vertical = exports.IconSort2Horizontal = exports.IconSmiley = exports.IconSign = exports.IconSidebar = exports.IconShield4 = exports.IconShield3 = exports.IconShield2 = exports.IconShield = exports.IconShare3 = exports.IconShare2 = exports.IconShare = exports.IconSettings8 = exports.IconSettings7 = exports.IconSettings6 = exports.IconSettings4 = exports.IconSettings3 = exports.IconSettings2 = exports.IconSettings1 = exports.IconServer3 = exports.IconServer2 = exports.IconServer = exports.IconSend = exports.IconSecuredLines = exports.IconSecured = exports.IconSeatbelt = exports.IconSearchPage = exports.IconSearchLines = exports.IconSearchDocument = exports.IconSearch = exports.IconSdCard = exports.IconRuler = exports.IconRoute = exports.IconRotateRepeat2 = exports.IconRotateRepeat = exports.IconRotateCounterclockwise = exports.IconRotateClockwise = exports.IconResizeSmall = exports.IconResizeBig = exports.IconRepeat2 = exports.IconRepeat = exports.IconRemovePeople = exports.IconRefrigeration = exports.IconRedo2 = exports.IconRedo = exports.IconRecord = exports.IconReceipt = exports.IconRadar = void 0;
 exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeOf = exports.IconVolumeMinimum = exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTrailer = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSquare = exports.IconSpeaker = void 0;
-exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.Notification = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageNothingFound = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = void 0;
-exports.calculateArrowPosition = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.Popup = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.LanguageProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = void 0;
+exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageNothingFound = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = void 0;
+exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.Popup = exports.PillExpandable = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.LanguageProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1328,6 +1328,8 @@ Object.defineProperty(exports, "MobileSheet", { enumerable: true, get: function
 var modal_1 = require("./modal/modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
 Object.defineProperty(exports, "DialogContentNew", { enumerable: true, get: function () { return modal_1.DialogContentNew; } });
+var modalHelpers_1 = require("./modal/modalHelpers");
+Object.defineProperty(exports, "getPredefinedFocusableItem", { enumerable: true, get: function () { return modalHelpers_1.getPredefinedFocusableItem; } });
 var notification_1 = require("./notification/notification");
 Object.defineProperty(exports, "Notification", { enumerable: true, get: function () { return notification_1.Notification; } });
 var pageContentLayout_1 = require("./pageLayout/pageContentLayout/pageContentLayout");

package/dist/list/listItem/listItem.js

@@ -53,7 +53,7 @@ const ListItem = ({ id, className, image, name, secondary, status, actions, onCl
         if (!onClick && !link) {
             return;
         }
-        if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target) || isDndElement(e.target)) {
+        if ((0, isActiveElement_1.isActiveElement)(e.target) || isDndElement(e.target)) {
             return;
         }
         if (onClick) {

package/dist/list/utils/isActiveElement.d.ts

@@ -1 +1 @@
-export declare const isActiveElement: (element: HTMLElement, level?: number) => boolean;
+export declare const isActiveElement: (element: EventTarget, level?: number) => boolean;

package/dist/list/utils/isActiveElement.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isActiveElement = void 0;
 const activeElements = ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA", "LABEL"];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isNode = (element) => !!element.nodeName;
 const isActiveElement = (element, level = 0) => {
-    if (activeElements.indexOf(element.nodeName) > -1) {
+    if (isNode(element) && element.nodeName && activeElements.indexOf(element.nodeName) > -1) {
         return true;
     }
-    if (level < 4 && element.parentElement) {
-        return (0, exports.isActiveElement)(element.parentElement, level + 1);
+    if (level < 4 && isNode(element) && element.parentNode) {
+        return (0, exports.isActiveElement)(element.parentNode, level + 1);
     }
     return false;
 };

package/dist/modal/modal.d.ts

@@ -15,6 +15,7 @@ interface IPrimaryButtons extends IButtons {
 interface ITertiaryButtons extends IButtons {
     type?: "tertiary" | "tertiary-destructive";
 }
+export type TFocusElement = "tertiary" | "primary" | "secondary" | "close" | "content";
 export interface IModal {
     isOpen: boolean;
     children?: ReactNode;
@@ -24,6 +25,7 @@ export interface IModal {
     title: ReactNode;
     type?: "error" | "success" | "warning" | "info";
     className?: string;
+    focus?: TFocusElement;
 }
 export declare const Modal: FC<IModal> & {
     Content: FC<IDialogContent>;
@@ -40,6 +42,7 @@ export interface IDialogContent extends IZenComponentProps {
     onClose?: (e: any) => void;
     type?: "error" | "success" | "warning" | "info";
     labeledId?: string;
+    focus?: TFocusElement;
 }
 export declare const DialogContentNew: React.FC<IDialogContent>;
 export {};

package/dist/modal/modal.js

@@ -42,8 +42,9 @@ const iconInfoCircle_1 = require("../icons/iconInfoCircle");
 const react_dom_1 = require("react-dom");
 const dialogHelpers_1 = require("../dialog/dialogHelpers");
 const themeContext_1 = require("../utils/theme/themeContext");
+const modalHelpers_1 = require("./modalHelpers");
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
-const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title, type, className }) => {
+const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title, type, className, focus }) => {
     const lastActiveOutsideElement = (0, react_1.useRef)(document.activeElement);
     const modalRoot = document.fullscreenElement || document.body;
     const [top, setTop] = (0, react_1.useState)(`${window.pageYOffset}px`);
@@ -89,7 +90,7 @@ const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title
         });
         return someContent;
     }, [children]);
-    const dialogHTML = (0, react_1.useCallback)((id) => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal", darkClass]), "aria-labelledby": labeledId, "aria-modal": "true", role: "dialog", style: { top: top }, children: [(0, jsx_runtime_1.jsx)(exports.Modal.Content, { onClose: onClose, maxWidth: maxWidth, title: title, className: className, type: type, labeledId: id, children: modalContent.length > 0 && modalContent.map((el) => el) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-modal__shield", onClick: onOutSideClick })] }), [darkClass, labeledId, title, className, maxWidth, onClose, onOutSideClick, modalContent, type, top]);
+    const dialogHTML = (0, react_1.useCallback)((id) => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal", darkClass]), "aria-labelledby": labeledId, "aria-modal": "true", role: "dialog", style: { top: top }, children: [(0, jsx_runtime_1.jsx)(exports.Modal.Content, { onClose: onClose, maxWidth: maxWidth, title: title, className: className, type: type, labeledId: id, focus: focus, children: modalContent.length > 0 && modalContent.map((el) => el) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-modal__shield", onClick: onOutSideClick })] }), [darkClass, labeledId, title, className, maxWidth, onClose, onOutSideClick, modalContent, type, top, focus]);
     if (!isOpen) {
         return null;
     }
@@ -97,7 +98,7 @@ const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title
 };
 exports.Modal = Modal;
 const dummyOnClose = () => { };
-const DialogContentNew = ({ onClose, className, title, type, maxWidth = "600px", labeledId, children }) => {
+const DialogContentNew = ({ onClose, className, title, type, maxWidth = "600px", labeledId, focus, children }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
     const contentRef = (0, react_1.useRef)(null);
@@ -115,9 +116,14 @@ const DialogContentNew = ({ onClose, className, title, type, maxWidth = "600px",
         if (contentRef.current === null) {
             return;
         }
+        const firstFocusableElement = (0, modalHelpers_1.getPredefinedFocusableItem)(contentRef.current, focus);
+        if (firstFocusableElement) {
+            firstFocusableElement.focus();
+            return;
+        }
         const focusable = contentRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
         focusable.length && focusable[focusable.length - 1].focus();
-    }, [contentRef]);
+    }, [contentRef, focus]);
     const bodyContent = (0, react_1.useMemo)(() => {
         const modalContent = [];
         let tertiaryButton;
@@ -150,13 +156,13 @@ const DialogContentNew = ({ onClose, className, title, type, maxWidth = "600px",
         // TODO implement sizing for modal and get rid of style
         style: { maxWidth: maxWidth }, ref: contentRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-modal-content__header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-modal-content__header-title heading-04 zen-ellipsis", id: labeledId, children: [type && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__icon", `${("zen-modal-content__icon--" + type)}`]), children: (0, react_1.createElement)(iconsByType[type], {
                                     size: iconDriveClassName ? "huge" : "large"
-                                }) }), title] }), onClose && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", className: "zen-modal-content__header-close-button", title: translate("Close"), "aria-label": translate("Close"), onClick: onClose, children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { description: translate("Close"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) })] }), bodyContent.modalContent.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: modalContentClasses, children: bodyContent.modalContent.map((el, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: el }, index)) }), isFooterVisible &&
+                                }) }), title] }), onClose && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", "data-focusable": "close", className: "zen-modal-content__header-close-button", title: translate("Close"), "aria-label": translate("Close"), onClick: onClose, children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { description: translate("Close"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) })] }), bodyContent.modalContent.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: modalContentClasses, children: bodyContent.modalContent.map((el, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: el }, index)) }), isFooterVisible &&
                 (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer", isMobile ? "zen-modal-content__footer--mobile" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer-left", isMobile ? "zen-modal-content__footer-left--mobile" : ""]), children: bodyContent.tertiaryButton }), (bodyContent.secondaryButton || bodyContent.primaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer-right", isMobile ? "zen-modal-content__footer-right--mobile" : ""]), children: [bodyContent.secondaryButton, bodyContent.primaryButton] })] })] });
 };
 exports.DialogContentNew = DialogContentNew;
-const SecondaryButton = (secondaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, secondaryButton, { children: secondaryButton.children }));
-const PrimaryButton = (primaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, primaryButton, { type: primaryButton.type || "primary", children: primaryButton.children }));
-const TertiaryButton = (tertiaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, tertiaryButton, { className: "zen-modal-content__left-button", type: tertiaryButton.type || "tertiary", children: tertiaryButton.children }));
+const SecondaryButton = (secondaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, secondaryButton, { "data-focusable": "secondary", children: secondaryButton.children }));
+const PrimaryButton = (primaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, primaryButton, { "data-focusable": "primary", type: primaryButton.type || "primary", children: primaryButton.children }));
+const TertiaryButton = (tertiaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, tertiaryButton, { "data-focusable": "tertiary", className: "zen-modal-content__left-button", type: tertiaryButton.type || "tertiary", children: tertiaryButton.children }));
 exports.Modal.Content = exports.DialogContentNew;
 exports.Modal.SecondaryButton = SecondaryButton;
 exports.Modal.PrimaryButton = PrimaryButton;

package/dist/modal/modalHelpers.d.ts

@@ -0,0 +1,2 @@
+import { TFocusElement } from "./modal";
+export declare const getPredefinedFocusableItem: (container: HTMLElement, focusable?: TFocusElement) => HTMLElement | null;

package/dist/modal/modalHelpers.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPredefinedFocusableItem = void 0;
+const dialogHelpers_1 = require("../dialog/dialogHelpers");
+const focusableSelector_1 = require("../utils/focusableSelector");
+const getPredefinedFocusableItem = (container, focusable) => {
+    const focusableSelector = {
+        primary: "[data-focusable='primary']",
+        secondary: "[data-focusable='secondary']",
+        tertiary: "[data-focusable='tertiary']",
+        close: "[data-focusable='close']"
+    };
+    if (!focusable || focusable !== "content" && !focusableSelector[focusable]) {
+        return null;
+    }
+    if (focusable === "content") {
+        const contentElements = container.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
+        const contentElement = Array.from(contentElements).find((el) => {
+            const dataFocus = el.getAttribute("data-focusable");
+            return (dataFocus !== "primary" && dataFocus !== "secondary" && dataFocus !== "tertiary" && dataFocus !== "close") && (0, dialogHelpers_1.isFocusable)(el);
+        });
+        return contentElement ? contentElement : null;
+    }
+    const focusableElement = container.querySelector(focusableSelector[focusable]);
+    if (focusableElement && (0, dialogHelpers_1.isFocusable)(focusableElement)) {
+        return focusableElement;
+    }
+    return null;
+};
+exports.getPredefinedFocusableItem = getPredefinedFocusableItem;

package/package.json

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