@geotab/zenith 3.8.0 → 3.9.0-beta.0

package/dist/table/children/useTableChildren.js

@@ -27,7 +27,7 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, activeId, gridRef, onCloseDetailPanel) => (0, react_1.useMemo)(() => {
+const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => (0, react_1.useMemo)(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
     let activePage = undefined;
@@ -42,7 +42,7 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         }
         if (isChildElement(child, tableBulkActions_1.TableBulkActions.displayName)) {
             const bulkActionButtons = child.props.children || [];
-            bulkActions = ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons }));
+            bulkActions = ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
             return;
         }
         if (isChildElement(child, tablePagination_1.TablePagination.displayName)) {
@@ -103,5 +103,5 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         detailPanel: detailPanel,
         other: other
     };
-}, [children, clearSelection, isMobile, selected, gridRef, allSelected, selectAll, turnOffSelectAll, activeId, onCloseDetailPanel]);
+}, [children, clearSelection, isMobile, selected, gridRef, allSelected, activeId, onCloseDetailPanel]);
 exports.useTableChildren = useTableChildren;

package/dist/table/flexible/useFlexibleColumns.js

@@ -13,6 +13,8 @@ const columnSettingsStorage_1 = require("./columnSettingsStorage");
 const actionsColumn_1 = require("../../dataGrid/columns/actionsColumn/actionsColumn");
 const mergeColumnSettings_1 = require("./mergeColumnSettings");
 const zen_1 = require("../../utils/zen");
+const useSelectableRows_1 = require("../selectable/useSelectableRows");
+const useNestedRows_1 = require("../nested/useNestedRows");
 const getColumnSettings = (pageName, defaultValue) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const storage = new columnSettingsStorage_1.ColumnSettingsStorage(pageName || "", zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.localStorage, defaultValue);
@@ -46,11 +48,12 @@ const useFlexibleColumns = (columns, flexible, gridRef, columnsPopupRef, isFeed)
         onChangeColumnSettings(newSettings);
     }, [onChangeColumnSettings, saveSettingsToTheStorage]);
     const flexibleColumns = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e;
         if (!flexible) {
             return columns;
         }
         const visibleColumnsMap = new Map(columns.map(c => [c.id, c]));
-        return columnSettings
+        const result = columnSettings
             .map((s, index) => {
             var _a;
             const column = visibleColumnsMap.get(s.name);
@@ -67,6 +70,41 @@ const useFlexibleColumns = (columns, flexible, gridRef, columnsPopupRef, isFeed)
             return Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, (column.meta || {})), { defaultWidth: width }), wrappers: [...wrappers, wrapper] });
         })
             .filter(c => c !== undefined);
+        // Ensure selectable and nested wrappers are always on the first visible column
+        if (result.length > 0) {
+            const pinnedWrapperWidth = 32;
+            let widthDelta = 0;
+            let donorCol = undefined;
+            for (const wrapperName of [useNestedRows_1.NestedWrapperName, useSelectableRows_1.SelectableWrapperName]) {
+                if ((_a = result[0].wrappers) === null || _a === void 0 ? void 0 : _a.some(w => w.name === wrapperName)) {
+                    continue;
+                }
+                let pinnedWrapper;
+                for (const col of result.slice(1)) {
+                    if (col.wrappers) {
+                        const found = col.wrappers.find(w => w.name === wrapperName);
+                        if (found) {
+                            pinnedWrapper = found;
+                            donorCol = donorCol !== null && donorCol !== void 0 ? donorCol : col;
+                            widthDelta += pinnedWrapperWidth;
+                            col.wrappers = col.wrappers.filter(w => w.name !== wrapperName);
+                            break;
+                        }
+                    }
+                }
+                if (pinnedWrapper) {
+                    result[0].wrappers = [...(result[0].wrappers || []), pinnedWrapper];
+                }
+            }
+            if (widthDelta > 0) {
+                result[0] = Object.assign(Object.assign({}, result[0]), { meta: Object.assign(Object.assign({}, (result[0].meta || {})), { defaultWidth: ((_c = (_b = result[0].meta) === null || _b === void 0 ? void 0 : _b.defaultWidth) !== null && _c !== void 0 ? _c : 0) + widthDelta }) });
+                if (donorCol) {
+                    const donorIndex = result.indexOf(donorCol);
+                    result[donorIndex] = Object.assign(Object.assign({}, donorCol), { meta: Object.assign(Object.assign({}, (donorCol.meta || {})), { defaultWidth: Math.max(0, ((_e = (_d = donorCol.meta) === null || _d === void 0 ? void 0 : _d.defaultWidth) !== null && _e !== void 0 ? _e : 0) - widthDelta) }) });
+                }
+            }
+        }
+        return result;
     }, [columnSettings, columns, flexible]);
     const columnsPopup = (0, react_1.useMemo)(() => {
         if (!flexible) {

package/dist/table/nested/useNestedRows.d.ts

@@ -3,6 +3,7 @@ import { IListColumn } from "../../dataGrid/listColumn";
 import { IRowEntity } from "../../dataGrid/row/row";
 import "./nestedButton.less";
 import { IEntityWithId } from "../../commonHelpers/entity";
+export declare const NestedWrapperName = "Nested";
 export declare const useNestedRows: <T extends IRowEntity<N>, N extends IEntityWithId>(expandedRows: string[] | undefined, onExpand: ((id: string, isExpanded: boolean) => void) | undefined, columns: IListColumn<T, N>[], isMobile: boolean) => {
     nestedColumns: {
         id: string;

package/dist/table/nested/useNestedRows.js

@@ -6,7 +6,7 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNestedRows = void 0;
+exports.useNestedRows = exports.NestedWrapperName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const iconChevronTop_1 = require("../../icons/iconChevronTop");
@@ -66,7 +66,7 @@ injectString("zh-TW", "Expand", "\u5C55\u958B");
 injectString("ro-RO", "Expand", "Extinde\u021Bi");
 injectString("ar-SA", "Expand", "\u062A\u0648\u0633\u064A\u0639");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const NestedWrapperName = "Nested";
+exports.NestedWrapperName = "Nested";
 const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
   const {
     translate
@@ -91,7 +91,7 @@ const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
   }, [intExpanded, onExpand]);
   const firstColumnId = (0, react_1.useMemo)(() => columns.length > 0 ? columns[0].id : null, [columns]);
   const wrapper = (0, react_1.useMemo)(() => ({
-    name: NestedWrapperName,
+    name: exports.NestedWrapperName,
     render(value, entity, isNested) {
       if (!entity) {
         return null;

package/dist/table/selectable/useSelectableRows.d.ts

@@ -16,6 +16,14 @@ export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEnti
     checkboxTitle?: (entity: T | N) => string;
     headerTitle?: (state: SelectionState) => string;
     turnOffSelectAll?: boolean;
+    /**
+     * When `true`, the header checkbox emits the current page's IDs instead of `{ all: true }`.
+     * When `undefined`, falls back to `turnOffSelectAll` for backward compatibility.
+     *
+     * Note: avoid setting this to `false` alongside `turnOffSelectAll: true` — the checkbox
+     * will emit `{ all: true }` while the dropdown hides the "Select all" option, which is inconsistent.
+     */
+    checkboxSelectsCurrentPage?: boolean;
     checkboxPlaceholder?: boolean;
     strategy?: TSelectionStrategy;
     selectAll?: boolean;
@@ -24,6 +32,7 @@ export declare const getEmptySelection: () => {
     all: boolean;
     selected: string[];
 };
+export declare const SelectableWrapperName = "Selectable";
 export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>) => {
     selectableColumns: IListColumn<T, N>[];
     selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];

package/dist/table/selectable/useSelectableRows.js

@@ -6,7 +6,7 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRANSLATIONS = exports.useSelectableRows = exports.getEmptySelection = void 0;
+exports.TRANSLATIONS = exports.useSelectableRows = exports.SelectableWrapperName = exports.getEmptySelection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const interfaces_1 = require("./interfaces");
@@ -77,7 +77,7 @@ const getEmptySelection = () => ({
   selected: []
 });
 exports.getEmptySelection = getEmptySelection;
-const SelectableWrapperName = "Selectable";
+exports.SelectableWrapperName = "Selectable";
 const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable) => {
   var _a;
   const {
@@ -166,7 +166,6 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
       return;
     }
     const newSelections = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable);
-    setState(newState);
     const newValue = {
       selected: [...newSelections],
       all: false
@@ -185,12 +184,20 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
   const isEntityChecked = (0, react_1.useCallback)((entity, isNested) => (0, isRowChecked_1.isRowChecked)(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const hasSelectable = !!selectable;
+  const selectableCheckboxSelectsCurrentPage = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxSelectsCurrentPage;
+  const selectableTurnOffSelectAll = selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll;
+  const selectableCheckboxInHeader = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxInHeader;
+  const selectableSelectionLimit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
+  const selectableHeader = selectable === null || selectable === void 0 ? void 0 : selectable.header;
+  const checkboxEmitsCurrentPage = selectableCheckboxSelectsCurrentPage !== null && selectableCheckboxSelectsCurrentPage !== void 0 ? selectableCheckboxSelectsCurrentPage : selectableTurnOffSelectAll;
+  const checkboxInHeaderValue = selectableCheckboxInHeader !== undefined ? selectableCheckboxInHeader : selectableSelectionLimit !== undefined ? false : undefined;
   const wrapper = (0, react_1.useMemo)(() => {
-    if (!selectable) {
+    if (!hasSelectable) {
       return null;
     }
     return {
-      name: SelectableWrapperName,
+      name: exports.SelectableWrapperName,
       render(value, entity, isNested) {
         if (!entity) {
           return null;
@@ -228,23 +235,23 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
           checked: state === interfaces_1.SelectionState.CurrentPage || state === interfaces_1.SelectionState.All,
           indeterminate: state === interfaces_1.SelectionState.Partial,
           onChange: newValue => {
-            const newState = newValue ? selectable.turnOffSelectAll ? interfaces_1.SelectionState.CurrentPage : interfaces_1.SelectionState.All : interfaces_1.SelectionState.None;
+            const newState = newValue ? checkboxEmitsCurrentPage ? interfaces_1.SelectionState.CurrentPage : interfaces_1.SelectionState.All : interfaces_1.SelectionState.None;
             setState(newState);
             onChangeSelectionState(newState);
           },
           calculateSelectionState: () => selectableState,
-          checkboxInHeader: selectable.checkboxInHeader !== undefined ? selectable.checkboxInHeader : selectable.selectionLimit !== undefined ? false : undefined,
-          header: selectable.header,
+          checkboxInHeader: checkboxInHeaderValue,
+          header: selectableHeader,
           onSelect: newState => {
             setState(newState);
             onChangeSelectionState(newState);
           },
-          turnOffSelectAll: selectable.turnOffSelectAll
+          turnOffSelectAll: selectableTurnOffSelectAll
         });
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
   const selectableFeedWrapper = (0, react_1.useCallback)((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {
@@ -284,7 +291,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     // Remove CheckboxColumnWrappers from wrappers list
     newColumns.forEach(c => {
       if (c.wrappers) {
-        c.wrappers = c.wrappers.filter(w => w.name !== SelectableWrapperName);
+        c.wrappers = c.wrappers.filter(w => w.name !== exports.SelectableWrapperName);
       }
     });
     // Add selectable wrappers of the first column

package/dist/table/table.js

@@ -225,12 +225,6 @@ const TableInner = ({
       selected: []
     });
   }, [selectable]);
-  const selectAll = (0, react_1.useCallback)(() => {
-    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
-      all: true,
-      selected: []
-    });
-  }, [selectable]);
   const [activeIdInternal, setActiveInternal] = (0, react_1.useState)(undefined);
   const activeId = active !== undefined ? active : activeIdInternal;
   const onClickInternal = (0, react_1.useCallback)(id => setActiveInternal(id === activeIdInternal ? undefined : id), [activeIdInternal, setActiveInternal]);
@@ -247,7 +241,7 @@ const TableInner = ({
     detailPanel,
     footer,
     other
-  } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, selectAll, selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll, activeId, gridRef, onCloseDetailPanel);
+  } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, activeId, gridRef, onCloseDetailPanel);
   const hasDetailPanel = !!detailPanel;
   const shouldEnableRowClick = hasDetailPanel || !!onClick;
   const activeIdForRow = shouldEnableRowClick ? activeId : undefined;

package/dist/{card/components → title}/title.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
 import "./title.less";
-import { IIcon } from "../../icons/icon";
+import { IIcon } from "../icons/icon";
 export type TIconType = "info" | "warning" | "error" | "success" | "default";
 interface ITitle {
     isMobile: boolean;

package/dist/title/title.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useDrive_1 = require("../utils/theme/useDrive");
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
+const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
+    const isDrive = (0, useDrive_1.useDrive)();
+    const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-title");
+    const h3ClassName = (0, classNames_1.classNames)(["zen-title", driveClassName !== null && driveClassName !== void 0 ? driveClassName : ""]);
+    const clickableClass = onClick ? "zen-title__clickable" : "";
+    const iconClassName = iconType ? `zen-title__icon--${iconType}` : "";
+    const iconSize = (0, react_1.useMemo)(() => (isDrive ? "huge" : "large"), [isDrive]);
+    const iconElement = (0, react_1.useMemo)(() => (icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
+    const chevron = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("span", { className: "zen-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-title__chevron-icon" }) })), [iconSize]);
+    if (onClick) {
+        return ((0, jsx_runtime_1.jsx)("h3", { className: h3ClassName, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: clickableClass, onClick: onClick, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: [title, chevron] })] }) }));
+    }
+    if (link) {
+        return ((0, jsx_runtime_1.jsx)("h3", { className: h3ClassName, children: (0, jsx_runtime_1.jsxs)("a", { id: id, className: "zen-title__link", href: link, target: target, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-title__link-text"]), children: [title, chevron] })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("h3", { className: h3ClassName, children: [iconElement, (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: title })] }));
+};
+exports.Title = Title;

package/dist/toggleButtonRaw/toggleButtonRaw.js

@@ -110,7 +110,8 @@ const ToggleButtonRaw = props => {
     children,
     isReverted,
     isReadOnly,
-    value: valueProp
+    value: valueProp,
+    dataAnalyticsId
   } = props;
   const driveClassesToggler = (0, useDriveClassName_1.useDriveClassName)("zen-toggler");
   const driveClassesComponent = (0, useDriveClassName_1.useDriveClassName)("zen-toggler-component");
@@ -140,6 +141,7 @@ const ToggleButtonRaw = props => {
   }
   return (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-toggler", driveClassesToggler || "", className || ""]),
+    "data-analytics-id": dataAnalyticsId,
     children: [(0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, {
       name: name,
       className: "zen-toggler__input",

package/dist/toggleButtonRaw/types.d.ts

@@ -6,6 +6,7 @@ interface IToggleButtonBaseRaw extends IZenComponentProps {
     title?: string;
     isReverted?: boolean;
     isReadOnly?: boolean;
+    dataAnalyticsId?: string;
 }
 export interface IToggleButtonDefaultRaw extends IToggleButtonBaseRaw {
     onChange?: (checked: boolean) => void;

package/dist/tooltip/tooltip.d.ts

@@ -10,6 +10,7 @@ interface ITooltip extends IZenComponentProps {
     }>;
     alignment?: TAlignment;
     triggerClassName?: string;
+    triggerAriaLabel?: string;
     mobileTitle?: string;
     /**
      * @deprecated
@@ -32,5 +33,5 @@ interface ITooltip extends IZenComponentProps {
      */
     mobileSheetTitle?: ReactElement | string;
 }
-export declare const Tooltip: ({ trigger, triggerClassName, className, alignment, children, mobileSheetTitle, mobileTitle }: ITooltip) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ trigger, triggerClassName, triggerAriaLabel, className, alignment, children, mobileSheetTitle, mobileTitle }: ITooltip) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tooltip/tooltip.js

@@ -96,7 +96,7 @@ injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const react_1 = __importStar(require("react"));
 const useResize_1 = require("../commonHelpers/hooks/useResize");
 const calculatePosition_1 = require("../utils/positioningUtils/calculatePosition");
-const react_dom_1 = require("react-dom");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const calculateArrowPosition_1 = require("./helpers/calculateArrowPosition");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
@@ -138,7 +138,8 @@ const EventWrapper = ({
   handleUniversalClick,
   setTooltipVisible,
   timerRef,
-  timerMouseOutRef
+  timerMouseLeaveRef,
+  tooltipRef
 }) => {
   const isCurrentDeviceDesktop = deviceType === deviceType_1.DeviceType.Desktop;
   const originalOnClick = children.props.onClick;
@@ -151,10 +152,10 @@ const EventWrapper = ({
     handleUniversalClick(e);
   }, [originalOnClick, handleUniversalClick]);
   const desktopEvents = {
-    onMouseOver: () => {
+    onMouseEnter: () => {
       var _a;
       setTooltipVisible(true);
-      timerMouseOutRef.current && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerMouseOutRef.current));
+      timerMouseLeaveRef.current && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerMouseLeaveRef.current));
     },
     onMouseLeave: () => {
       var _a;
@@ -163,7 +164,13 @@ const EventWrapper = ({
       }, TOOLTIP_VISIBILITY_DELAY);
     },
     onFocus: () => setTooltipVisible(true),
-    onBlur: () => setTooltipVisible(false),
+    onBlur: () => {
+      // Skip if the tooltip DOM was already detached
+      if (tooltipRef.current && !tooltipRef.current.isConnected) {
+        return;
+      }
+      setTooltipVisible(false);
+    },
     onKeyDown: onKeyDownHandler,
     onClick: composedOnClick
   };
@@ -182,19 +189,22 @@ const EventWrapper = ({
 const Tooltip = ({
   trigger,
   triggerClassName,
+  triggerAriaLabel,
   className = "",
   alignment,
   children,
   mobileSheetTitle,
   mobileTitle
+  // eslint-disable-next-line complexity
 }) => {
+  var _a, _b, _c, _d;
   const GAP = 12;
   const isDrive = (0, useDrive_1.useDrive)();
-  const triggerRefNative = trigger === null || trigger === void 0 ? void 0 : trigger.ref;
+  const triggerRefNative = trigger ? trigger.props.ref : undefined;
   const triggerLocalRef = (0, react_1.useRef)(null);
   const triggerRef = triggerRefNative || triggerLocalRef;
   const timerRef = (0, react_1.useRef)(null);
-  const timerMouseOutRef = (0, react_1.useRef)(null);
+  const timerMouseLeaveRef = (0, react_1.useRef)(null);
   const tooltipRef = (0, react_1.useRef)(null);
   const arrowRef = (0, react_1.useRef)(null);
   const [isTooltipVisible, setTooltipVisible] = (0, react_1.useState)(false);
@@ -251,12 +261,12 @@ const Tooltip = ({
     tabIndex: 0,
     type: "button",
     className: "zen-tooltip__trigger-container",
-    "aria-label": translate("Information"),
+    "aria-label": triggerAriaLabel !== null && triggerAriaLabel !== void 0 ? triggerAriaLabel : translate("Information"),
     children: (0, react_1.createElement)(iconInfoCircle_1.IconInfoCircle, {
       size: isMobile ? "huge" : "large",
       className: (0, classNames_1.classNames)([triggerClassName || "", "zen-tooltip__trigger"])
     })
-  }), [trigger, isMobile, triggerClassName, translate]);
+  }), [trigger, isMobile, triggerClassName, triggerAriaLabel, translate]);
   const triggerClone = (0, jsx_runtime_1.jsx)(EventWrapper, {
     deviceType: deviceType,
     isTooltipVisible: isTooltipVisible,
@@ -264,7 +274,8 @@ const Tooltip = ({
     handleUniversalClick: handleUniversalClick,
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
-    timerMouseOutRef: timerMouseOutRef,
+    timerMouseLeaveRef: timerMouseLeaveRef,
+    tooltipRef: tooltipRef,
     children: react_1.default.cloneElement(tooltipTrigger, Object.assign({
       ref: triggerRef
     }, triggerCloneProps))
@@ -347,61 +358,54 @@ const Tooltip = ({
     }
     return preferredAlignment;
   }, [isMobile, TOOLTIP_ARROW_HEIGHT, triggerRef, checkNaturalFit]);
-  // eslint-disable-next-line complexity
-  const renderTooltip = () => {
-    var _a, _b;
-    if (!isTooltipVisible) {
-      return "";
-    }
-    const content = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-      children: [isMobile && (0, jsx_runtime_1.jsx)(shield_1.Shield, {
-        className: "zen-tooltip__shield"
+  const container = (_d = (_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body) !== null && _d !== void 0 ? _d : undefined;
+  const portal = (0, usePortal_1.usePortal)(isTooltipVisible ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [isMobile && (0, jsx_runtime_1.jsx)(shield_1.Shield, {
+      className: "zen-tooltip__shield"
+    }), (0, jsx_runtime_1.jsxs)("div", {
+      id: tooltipId,
+      role: "tooltip",
+      ref: tooltipRef,
+      className: (0, classNames_1.classNames)(["zen-tooltip", dark ? "zen-dark" : "", `zen-tooltip--auto`, isMobile ? "zen-tooltip--mobile" : "", isDrive ? "zen-tooltip--drive" : "", className]),
+      onMouseEnter: () => {
+        var _a, _b;
+        timerRef.current && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerRef.current));
+        timerMouseLeaveRef.current && ((_b = zen_1.zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, timerMouseLeaveRef.current));
+      },
+      onMouseLeave: () => {
+        var _a;
+        timerMouseLeaveRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+          if (!isMobile && !isDrive) {
+            setTooltipVisible(false);
+          }
+        }, TOOLTIP_VISIBILITY_DELAY);
+      },
+      children: [!isMobile && !isDrive && (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-tooltip__arrow", arrowClass]),
+        ref: arrowRef
       }), (0, jsx_runtime_1.jsxs)("div", {
-        id: tooltipId,
-        role: "tooltip",
-        ref: tooltipRef,
-        className: (0, classNames_1.classNames)(["zen-tooltip", dark ? "zen-dark" : "", `zen-tooltip--auto`, isMobile ? "zen-tooltip--mobile" : "", isDrive ? "zen-tooltip--drive" : "", className]),
-        onMouseOver: () => {
-          var _a, _b;
-          timerRef.current && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerRef.current));
-          timerMouseOutRef.current && ((_b = zen_1.zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, timerMouseOutRef.current));
-        },
-        onMouseOut: () => {
+        className: (0, classNames_1.classNames)(["zen-tooltip__body", "zen-tooltip__body--auto", isDrive ? "zen-tooltip__body--drive" : "", isMobile ? "zen-tooltip__body--mobile" : "", deviceType === deviceType_1.DeviceType.Desktop && !isDrive ? "zen-tooltip__body--desktop" : ""]),
+        children: [(mobileSheetTitle || mobileTitle) && (deviceType === deviceType_1.DeviceType.Mobile || isDrive) && (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-tooltip__title",
+          children: mobileSheetTitle || mobileTitle
+        }), children]
+      }), (deviceType === deviceType_1.DeviceType.Mobile || isDrive) && (0, jsx_runtime_1.jsx)(button_1.Button, {
+        className: "zen-tooltip__close-button",
+        title: translate("Close"),
+        "aria-label": translate("Close"),
+        onClick: () => {
           var _a;
-          timerMouseOutRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
-            if (!isMobile && !isDrive) {
-              setTooltipVisible(false);
-            }
-          }, TOOLTIP_VISIBILITY_DELAY);
+          setTooltipVisible(false);
+          (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         },
-        children: [!isMobile && !isDrive && (0, jsx_runtime_1.jsx)("div", {
-          className: (0, classNames_1.classNames)(["zen-tooltip__arrow", arrowClass]),
-          ref: arrowRef
-        }), (0, jsx_runtime_1.jsxs)("div", {
-          className: (0, classNames_1.classNames)(["zen-tooltip__body", "zen-tooltip__body--auto", isDrive ? "zen-tooltip__body--drive" : "", isMobile ? "zen-tooltip__body--mobile" : "", deviceType === deviceType_1.DeviceType.Desktop && !isDrive ? "zen-tooltip__body--desktop" : ""]),
-          children: [(mobileSheetTitle || mobileTitle) && (deviceType === deviceType_1.DeviceType.Mobile || isDrive) && (0, jsx_runtime_1.jsx)("div", {
-            className: "zen-tooltip__title",
-            children: mobileSheetTitle || mobileTitle
-          }), children]
-        }), (deviceType === deviceType_1.DeviceType.Mobile || isDrive) && (0, jsx_runtime_1.jsx)(button_1.Button, {
-          className: "zen-tooltip__close-button",
-          title: translate("Close"),
-          "aria-label": translate("Close"),
-          onClick: () => {
-            var _a;
-            setTooltipVisible(false);
-            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-          },
-          children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
-            description: translate("Close"),
-            className: "svgIcon",
-            size: "huge"
-          })
-        })]
+        children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+          description: translate("Close"),
+          className: "svgIcon",
+          size: "huge"
+        })
       })]
-    });
-    return (0, react_dom_1.createPortal)(content, ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body), tooltipId);
-  };
+    })]
+  }) : null, container, tooltipId);
   const calculatePosition = (0, react_1.useCallback)(() => {
     const eAlignment = getEffectiveAlignment(tooltipAlignmentRef.current);
     (0, calculatePosition_1.calculatePosition)(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP, false, eAlignment, tooltipAlignments_1.tooltipAlignments, undefined, isMobile);
@@ -452,12 +456,12 @@ const Tooltip = ({
     if (timerRef.current) {
       (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerRef.current);
     }
-    if (timerMouseOutRef.current) {
-      (_b = zen_1.zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, timerMouseOutRef.current);
+    if (timerMouseLeaveRef.current) {
+      (_b = zen_1.zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, timerMouseLeaveRef.current);
     }
   }, []);
   return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-    children: [isTooltipVisible && renderTooltip(), triggerClone]
+    children: [portal, triggerClone]
   });
 };
 exports.Tooltip = Tooltip;

package/dist/utils/localization/directionContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TTextDirection } from "./getTextDirection";
+export declare const directionContext: import("react").Context<TTextDirection>;

package/dist/utils/localization/directionContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.directionContext = void 0;
+const react_1 = require("react");
+exports.directionContext = (0, react_1.createContext)("ltr");

package/dist/utils/localization/getTextDirection.d.ts

@@ -0,0 +1,2 @@
+export type TTextDirection = "ltr" | "rtl";
+export declare const getTextDirection: (language: string) => TTextDirection;

package/dist/utils/localization/getTextDirection.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextDirection = void 0;
+const RTL_LANGUAGES = ["ar"];
+const getTextDirection = (language) => (RTL_LANGUAGES.includes(language) ? "rtl" : "ltr");
+exports.getTextDirection = getTextDirection;

package/dist/utils/localization/languageProvider.js

@@ -2,7 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguageProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const languageContext_1 = require("./languageContext");
 const getSupportedLanguage_1 = require("./getSupportedLanguage");
-const LanguageProvider = ({ language, children }) => ((0, jsx_runtime_1.jsx)(languageContext_1.languageContext.Provider, { value: (0, getSupportedLanguage_1.getSupportedLanguage)(language), children: children }));
+const directionContext_1 = require("./directionContext");
+const getTextDirection_1 = require("./getTextDirection");
+const zen_1 = require("../zen");
+const LanguageProvider = ({ language, children }) => {
+    const validLanguage = (0, getSupportedLanguage_1.getSupportedLanguage)(language);
+    const direction = (0, getTextDirection_1.getTextDirection)(validLanguage);
+    (0, react_1.useEffect)(() => {
+        if (zen_1.zen.document) {
+            zen_1.zen.document.documentElement.dir = direction;
+            zen_1.zen.document.documentElement.lang = validLanguage;
+        }
+    }, [direction, validLanguage]);
+    return ((0, jsx_runtime_1.jsx)(languageContext_1.languageContext.Provider, { value: validLanguage, children: (0, jsx_runtime_1.jsx)(directionContext_1.directionContext.Provider, { value: direction, children: children }) }));
+};
 exports.LanguageProvider = LanguageProvider;

package/dist/utils/localization/translations/en-json.d.ts

@@ -312,4 +312,6 @@ export declare const translations: {
     "Failed to load page": string;
     "Please refresh the page and try again. If the issue persists, contact Support.": string;
     "Failed to load {0}": string;
+    "Sort by Ascending": string;
+    "Sort by Descending": string;
 };

package/dist/utils/localization/translations/en-json.js

@@ -314,5 +314,7 @@ exports.translations = {
     "Please reload this section to try again. If the issue persists, contact Support.": "Please reload this section to try again. If the issue persists, contact Support.",
     "Failed to load page": "Failed to load page",
     "Please refresh the page and try again. If the issue persists, contact Support.": "Please refresh the page and try again. If the issue persists, contact Support.",
-    "Failed to load {0}": "Failed to load {0}"
+    "Failed to load {0}": "Failed to load {0}",
+    "Sort by Ascending": "Sort by Ascending",
+    "Sort by Descending": "Sort by Descending"
 };