@geotab/zenith 3.8.0 → 3.9.0-beta.ssr.0

package/esm/nav/navEditList/navEditListUtils.js

@@ -4,7 +4,8 @@ import { NavActionItem } from "../navItem/navActionItem";
 import { IconGrab } from "../../icons/iconGrab";
 export const attachDndHandler = (item, onPointerDown) => {
     if (item.type === NavActionItem) {
-        return cloneElement(item, Object.assign(Object.assign({}, item.props), { startNode: (_jsx("div", { className: "zen-nav-item__dnd", onPointerDown: onPointerDown, children: _jsx(IconGrab, { size: "large" }) })) }));
+        const navActionItem = item;
+        return cloneElement(navActionItem, Object.assign(Object.assign({}, navActionItem.props), { onLeftContentPointerDown: onPointerDown, startNode: (_jsx("div", { className: "zen-nav-item__dnd", children: _jsx(IconGrab, { size: "large" }) })) }));
     }
     return item;
 };

package/esm/nav/navItem/navActionItem.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const NavActionItem = ({ title, id, icon, className, startNode, endButtonIcon, endButtonTitle, onEndButtonClick }) => {
+const NavActionItemComponent = ({ title, id, icon, className, startNode, endButtonIcon, endButtonTitle, onEndButtonClick, onLeftContentPointerDown }) => {
     const PrimaryIconComponent = typeof icon === "function" ? icon : null;
     const EndButtonIconComponent = typeof endButtonIcon === "function" ? endButtonIcon : null;
     const itemClasses = classNames(["zen-nav-item", className || ""]);
-    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick ? (_jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })) : null] }));
+    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", onPointerDown: onLeftContentPointerDown, children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick ? (_jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })) : null] }));
 };
+export const NavActionItem = NavActionItemComponent;
 NavActionItem.displayName = "NavActionItem";

package/esm/pageHeader/pageHeaderActions.js

@@ -8,7 +8,7 @@ import { PageToolbarCollapsedItemsControl } from "../header/components/collapsed
 import { PageHeaderButtonDisplayName } from "./pageHeaderButton";
 import { PageHeaderMenuDisplayName } from "./pageHeaderMenu";
 import { getItemsFromFragments } from "./pageHeaderHelpers";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { zen } from "../utils/zen";
 export const PageHeaderActions = ({ className = "", children }) => {
     var _a, _b;
@@ -32,10 +32,11 @@ export const PageHeaderActions = ({ className = "", children }) => {
             isMobile ? "zen-page-header-component__actions--mobile-portal" : "",
             className
         ]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
+    const modalRoot = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    const portal = usePortal(actionsContent, modalRoot);
     // For mobile, render actions in a portal at the bottom center of viewport
     if (isMobile && actionsContent) {
-        const modalRoot = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
-        return createPortal(actionsContent, modalRoot);
+        return portal;
     }
     return actionsContent;
 };

package/esm/rangeRaw/rangeRaw.js

@@ -252,6 +252,9 @@ export const RangeRaw = props => {
   } else {
     defaultValueInner = defaultValue;
   }
+  const generatedId = useId();
+  const intId = id || generatedId;
+  const rangeErrorId = `${intId}-error`;
   const [isOpen, setIsOpen] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
   const [errorType, setErrorType] = useState(undefined);
@@ -400,14 +403,17 @@ export const RangeRaw = props => {
   const memoizedContent = useMemo(() => _jsxs("div", {
     className: "zen-range__fields-wrapper",
     children: [_jsxs("div", {
+      id: intId,
       ref: setFieldsContainerRef,
+      "aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
       className: classNames(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]),
       children: [memoizedMinRangeField, memoizedMaxRangeField]
     }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, {
+      id: rangeErrorId,
       className: "zen-range__error",
       error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""]
     }) : null]
-  }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
+  }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max, intId, rangeErrorId]);
   const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, {
     isOpen: isOpen,
     className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]),

package/esm/selectList/selectList.js

@@ -45,7 +45,7 @@ export const SelectList = (_a) => {
         dispatchState({ type: ListAction.Reset, payload: { items, value: new Map(parsedValue), multiselect } });
     }, [innerValue, multiselect, items]);
     useEffect(() => {
-        if (!multiselect) {
+        if (!multiselect && selectItemOnFocus) {
             dispatchState({ type: ListAction.FocusFirst, payload: { items } });
         }
         dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
@@ -56,14 +56,18 @@ export const SelectList = (_a) => {
     const onChangeItem = useCallback((updatedId, updatedState) => {
         dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
     }, [multiselect]);
+    const hasScrolledToInitial = useRef(false);
     useEffect(() => {
         var _a;
-        if (state.activeIndex >= 0 &&
-            ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) &&
-            listRef.current &&
-            isChildOf(zen.document.activeElement, listRef.current)) {
-            const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
-            itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
+        if (state.activeIndex >= 0 && listRef.current) {
+            const isFocusInList = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && isChildOf(zen.document.activeElement, listRef.current);
+            if (isFocusInList || !hasScrolledToInitial.current) {
+                const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
+                itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
+                if (itemEl) {
+                    hasScrolledToInitial.current = true;
+                }
+            }
         }
     }, [state.activeIndex]);
     useEffect(() => {

package/esm/toggleButtonRaw/toggleButtonRaw.js

@@ -71,7 +71,8 @@ export const ToggleButtonRaw = props => {
     children,
     isReverted,
     isReadOnly,
-    value: valueProp
+    value: valueProp,
+    dataAnalyticsId
   } = props;
   const driveClassesToggler = useDriveClassName("zen-toggler");
   const driveClassesComponent = useDriveClassName("zen-toggler-component");
@@ -101,6 +102,7 @@ export const ToggleButtonRaw = props => {
   }
   return _jsxs("div", {
     className: classNames(["zen-toggler", driveClassesToggler || "", className || ""]),
+    "data-analytics-id": dataAnalyticsId,
     children: [_jsx(TriStateCheckbox, {
       name: name,
       className: "zen-toggler__input",

package/esm/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/esm/tooltip/tooltip.js

@@ -99,7 +99,7 @@ const EventWrapper = ({
   handleUniversalClick,
   setTooltipVisible,
   timerRef,
-  timerMouseOutRef
+  timerMouseLeaveRef
 }) => {
   const isCurrentDeviceDesktop = deviceType === DeviceType.Desktop;
   const originalOnClick = children.props.onClick;
@@ -112,10 +112,10 @@ const EventWrapper = ({
     handleUniversalClick(e);
   }, [originalOnClick, handleUniversalClick]);
   const desktopEvents = {
-    onMouseOver: () => {
+    onMouseEnter: () => {
       var _a;
       setTooltipVisible(true);
-      timerMouseOutRef.current && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timerMouseOutRef.current));
+      timerMouseLeaveRef.current && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timerMouseLeaveRef.current));
     },
     onMouseLeave: () => {
       var _a;
@@ -155,7 +155,7 @@ export const Tooltip = ({
   const triggerLocalRef = useRef(null);
   const triggerRef = triggerRefNative || triggerLocalRef;
   const timerRef = useRef(null);
-  const timerMouseOutRef = useRef(null);
+  const timerMouseLeaveRef = useRef(null);
   const tooltipRef = useRef(null);
   const arrowRef = useRef(null);
   const [isTooltipVisible, setTooltipVisible] = useState(false);
@@ -225,7 +225,7 @@ export const Tooltip = ({
     handleUniversalClick: handleUniversalClick,
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
-    timerMouseOutRef: timerMouseOutRef,
+    timerMouseLeaveRef: timerMouseLeaveRef,
     children: React.cloneElement(tooltipTrigger, Object.assign({
       ref: triggerRef
     }, triggerCloneProps))
@@ -322,14 +322,14 @@ export const Tooltip = ({
         role: "tooltip",
         ref: tooltipRef,
         className: classNames(["zen-tooltip", dark ? "zen-dark" : "", `zen-tooltip--auto`, isMobile ? "zen-tooltip--mobile" : "", isDrive ? "zen-tooltip--drive" : "", className]),
-        onMouseOver: () => {
+        onMouseEnter: () => {
           var _a, _b;
           timerRef.current && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timerRef.current));
-          timerMouseOutRef.current && ((_b = zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, timerMouseOutRef.current));
+          timerMouseLeaveRef.current && ((_b = zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, timerMouseLeaveRef.current));
         },
-        onMouseOut: () => {
+        onMouseLeave: () => {
           var _a;
-          timerMouseOutRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
+          timerMouseLeaveRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             if (!isMobile && !isDrive) {
               setTooltipVisible(false);
             }
@@ -413,8 +413,8 @@ export const Tooltip = ({
     if (timerRef.current) {
       (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timerRef.current);
     }
-    if (timerMouseOutRef.current) {
-      (_b = zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, timerMouseOutRef.current);
+    if (timerMouseLeaveRef.current) {
+      (_b = zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, timerMouseLeaveRef.current);
     }
   }, []);
   return _jsxs(_Fragment, {

package/esm/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/esm/utils/localization/translations/en-json.js

@@ -311,5 +311,7 @@ export const 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"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.8.0",
+    "version": "3.9.0-beta.ssr.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -89,14 +89,14 @@
     },
     "dependencies": {
         "chart.js": "^4.4.6",
-        "react": "^19.2.0",
-        "react-dom": "^19.2.0",
+        "react": "^19.2.5",
+        "react-dom": "^19.2.5",
         "react-hook-form": "^7.60.0"
     },
     "peerDependencies": {
         "chart.js": "^4.4.6",
-        "react": "^19.2.0",
-        "react-dom": "^19.2.0"
+        "react": "^19.2.5",
+        "react-dom": "^19.2.5"
     },
     "files": [
         "./dist/",