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

package/esm/table/selectable/useSelectableRows.js

@@ -68,7 +68,7 @@ export const getEmptySelection = () => ({
   all: false,
   selected: []
 });
-const SelectableWrapperName = "Selectable";
+export const SelectableWrapperName = "Selectable";
 export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable) => {
   var _a;
   const {
@@ -157,7 +157,6 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
       return;
     }
     const newSelections = getCurrentPageSelection(entities, selectable);
-    setState(newState);
     const newValue = {
       selected: [...newSelections],
       all: false
@@ -176,8 +175,16 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
   const isEntityChecked = useCallback((entity, isNested) => 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 = useMemo(() => {
-    if (!selectable) {
+    if (!hasSelectable) {
       return null;
     }
     return {
@@ -219,23 +226,23 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
           checked: state === SelectionState.CurrentPage || state === SelectionState.All,
           indeterminate: state === SelectionState.Partial,
           onChange: newValue => {
-            const newState = newValue ? selectable.turnOffSelectAll ? SelectionState.CurrentPage : SelectionState.All : SelectionState.None;
+            const newState = newValue ? checkboxEmitsCurrentPage ? SelectionState.CurrentPage : SelectionState.All : 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 = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {

package/esm/table/table.js

@@ -175,12 +175,6 @@ const TableInner = ({
       selected: []
     });
   }, [selectable]);
-  const selectAll = useCallback(() => {
-    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
-      all: true,
-      selected: []
-    });
-  }, [selectable]);
   const [activeIdInternal, setActiveInternal] = useState(undefined);
   const activeId = active !== undefined ? active : activeIdInternal;
   const onClickInternal = useCallback(id => setActiveInternal(id === activeIdInternal ? undefined : id), [activeIdInternal, setActiveInternal]);
@@ -197,7 +191,7 @@ const TableInner = ({
     detailPanel,
     footer,
     other
-  } = 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);
+  } = 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/esm/{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/esm/title/title.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useDrive } from "../utils/theme/useDrive";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { IconChevronRightSmall } from "../icons/iconChevronRightSmall";
+export const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
+    const isDrive = useDrive();
+    const driveClassName = useDriveClassName("zen-title");
+    const h3ClassName = classNames(["zen-title", driveClassName !== null && driveClassName !== void 0 ? driveClassName : ""]);
+    const clickableClass = onClick ? "zen-title__clickable" : "";
+    const iconClassName = iconType ? `zen-title__icon--${iconType}` : "";
+    const iconSize = useMemo(() => (isDrive ? "huge" : "large"), [isDrive]);
+    const iconElement = useMemo(() => (icon ? _jsx("div", { className: classNames(["zen-title__icon", iconClassName]), children: createElement(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
+    const chevron = useMemo(() => (_jsx("span", { className: "zen-title__link-chevron", children: _jsx(IconChevronRightSmall, { size: iconSize, className: "zen-title__chevron-icon" }) })), [iconSize]);
+    if (onClick) {
+        return (_jsx("h3", { className: h3ClassName, children: _jsxs("button", { type: "button", className: clickableClass, onClick: onClick, children: [iconElement, _jsxs("span", { title: title, id: id, className: classNames(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: [title, chevron] })] }) }));
+    }
+    if (link) {
+        return (_jsx("h3", { className: h3ClassName, children: _jsxs("a", { id: id, className: "zen-title__link", href: link, target: target, children: [iconElement, _jsxs("span", { title: title, className: classNames(["zen-title__link-text"]), children: [title, chevron] })] }) }));
+    }
+    return (_jsxs("h3", { className: h3ClassName, children: [iconElement, _jsx("span", { title: title, id: id, className: classNames(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: title })] }));
+};

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useResize } from "../commonHelpers/hooks/useResize";
 import { calculatePosition as calculatePos } from "../utils/positioningUtils/calculatePosition";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { calculateArrowPosition } from "./helpers/calculateArrowPosition";
 import { DeviceType } from "../commonHelpers/hooks/deviceType";
@@ -99,7 +99,8 @@ const EventWrapper = ({
   handleUniversalClick,
   setTooltipVisible,
   timerRef,
-  timerMouseOutRef
+  timerMouseLeaveRef,
+  tooltipRef
 }) => {
   const isCurrentDeviceDesktop = deviceType === DeviceType.Desktop;
   const originalOnClick = children.props.onClick;
@@ -112,10 +113,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;
@@ -124,7 +125,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
   };
@@ -143,19 +150,22 @@ const EventWrapper = ({
 export 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 = useDrive();
-  const triggerRefNative = trigger === null || trigger === void 0 ? void 0 : trigger.ref;
+  const triggerRefNative = trigger ? trigger.props.ref : undefined;
   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);
@@ -212,12 +222,12 @@ export 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: createElement(IconInfoCircle, {
       size: isMobile ? "huge" : "large",
       className: classNames([triggerClassName || "", "zen-tooltip__trigger"])
     })
-  }), [trigger, isMobile, triggerClassName, translate]);
+  }), [trigger, isMobile, triggerClassName, triggerAriaLabel, translate]);
   const triggerClone = _jsx(EventWrapper, {
     deviceType: deviceType,
     isTooltipVisible: isTooltipVisible,
@@ -225,7 +235,8 @@ export const Tooltip = ({
     handleUniversalClick: handleUniversalClick,
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
-    timerMouseOutRef: timerMouseOutRef,
+    timerMouseLeaveRef: timerMouseLeaveRef,
+    tooltipRef: tooltipRef,
     children: React.cloneElement(tooltipTrigger, Object.assign({
       ref: triggerRef
     }, triggerCloneProps))
@@ -308,61 +319,54 @@ export 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 = _jsxs(_Fragment, {
-      children: [isMobile && _jsx(Shield, {
-        className: "zen-tooltip__shield"
+  const container = (_d = (_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body) !== null && _d !== void 0 ? _d : undefined;
+  const portal = usePortal(isTooltipVisible ? _jsxs(_Fragment, {
+    children: [isMobile && _jsx(Shield, {
+      className: "zen-tooltip__shield"
+    }), _jsxs("div", {
+      id: tooltipId,
+      role: "tooltip",
+      ref: tooltipRef,
+      className: 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.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timerRef.current));
+        timerMouseLeaveRef.current && ((_b = zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, timerMouseLeaveRef.current));
+      },
+      onMouseLeave: () => {
+        var _a;
+        timerMouseLeaveRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
+          if (!isMobile && !isDrive) {
+            setTooltipVisible(false);
+          }
+        }, TOOLTIP_VISIBILITY_DELAY);
+      },
+      children: [!isMobile && !isDrive && _jsx("div", {
+        className: classNames(["zen-tooltip__arrow", arrowClass]),
+        ref: arrowRef
       }), _jsxs("div", {
-        id: tooltipId,
-        role: "tooltip",
-        ref: tooltipRef,
-        className: 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.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));
-        },
-        onMouseOut: () => {
+        className: classNames(["zen-tooltip__body", "zen-tooltip__body--auto", isDrive ? "zen-tooltip__body--drive" : "", isMobile ? "zen-tooltip__body--mobile" : "", deviceType === DeviceType.Desktop && !isDrive ? "zen-tooltip__body--desktop" : ""]),
+        children: [(mobileSheetTitle || mobileTitle) && (deviceType === DeviceType.Mobile || isDrive) && _jsx("div", {
+          className: "zen-tooltip__title",
+          children: mobileSheetTitle || mobileTitle
+        }), children]
+      }), (deviceType === DeviceType.Mobile || isDrive) && _jsx(Button, {
+        className: "zen-tooltip__close-button",
+        title: translate("Close"),
+        "aria-label": translate("Close"),
+        onClick: () => {
           var _a;
-          timerMouseOutRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(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 && _jsx("div", {
-          className: classNames(["zen-tooltip__arrow", arrowClass]),
-          ref: arrowRef
-        }), _jsxs("div", {
-          className: classNames(["zen-tooltip__body", "zen-tooltip__body--auto", isDrive ? "zen-tooltip__body--drive" : "", isMobile ? "zen-tooltip__body--mobile" : "", deviceType === DeviceType.Desktop && !isDrive ? "zen-tooltip__body--desktop" : ""]),
-          children: [(mobileSheetTitle || mobileTitle) && (deviceType === DeviceType.Mobile || isDrive) && _jsx("div", {
-            className: "zen-tooltip__title",
-            children: mobileSheetTitle || mobileTitle
-          }), children]
-        }), (deviceType === DeviceType.Mobile || isDrive) && _jsx(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: _jsx(IconClose, {
-            description: translate("Close"),
-            className: "svgIcon",
-            size: "huge"
-          })
-        })]
+        children: _jsx(IconClose, {
+          description: translate("Close"),
+          className: "svgIcon",
+          size: "huge"
+        })
       })]
-    });
-    return createPortal(content, ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body), tooltipId);
-  };
+    })]
+  }) : null, container, tooltipId);
   const calculatePosition = useCallback(() => {
     const eAlignment = getEffectiveAlignment(tooltipAlignmentRef.current);
     calculatePos(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP, false, eAlignment, tooltipAlignments, undefined, isMobile);
@@ -413,11 +417,11 @@ 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, {
-    children: [isTooltipVisible && renderTooltip(), triggerClone]
+    children: [portal, triggerClone]
   });
 };

package/esm/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/esm/utils/localization/directionContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const directionContext = createContext("ltr");

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

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

package/esm/utils/localization/getTextDirection.js

@@ -0,0 +1,2 @@
+const RTL_LANGUAGES = ["ar"];
+export const getTextDirection = (language) => (RTL_LANGUAGES.includes(language) ? "rtl" : "ltr");

package/esm/utils/localization/languageProvider.js

@@ -1,4 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { languageContext } from "./languageContext";
 import { getSupportedLanguage } from "./getSupportedLanguage";
-export const LanguageProvider = ({ language, children }) => (_jsx(languageContext.Provider, { value: getSupportedLanguage(language), children: children }));
+import { directionContext } from "./directionContext";
+import { getTextDirection } from "./getTextDirection";
+import { zen } from "../zen";
+export const LanguageProvider = ({ language, children }) => {
+    const validLanguage = getSupportedLanguage(language);
+    const direction = getTextDirection(validLanguage);
+    useEffect(() => {
+        if (zen.document) {
+            zen.document.documentElement.dir = direction;
+            zen.document.documentElement.lang = validLanguage;
+        }
+    }, [direction, validLanguage]);
+    return (_jsx(languageContext.Provider, { value: validLanguage, children: _jsx(directionContext.Provider, { value: direction, children: children }) }));
+};

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

@@ -208,6 +208,8 @@
     "X-axis": "X-axis",
     "Previous": "Previous",
     "Next": "Next",
+    "Previous date period": "Previous date period",
+    "Next date period": "Next date period",
     "Choose dates": "Choose dates",
     "Date range not available": "Date range not available",
     "Choose your date range": "Choose your date range",
@@ -217,6 +219,7 @@
     "Favorite": "Favorite",
     "All Filters": "All Filters",
     "Reset All": "Reset all",
+    "Active filters: {}": "Active filters: {}",
     "Loading": "Loading",
     "Select option": "Select option",
     "Value": "Value",

package/esm/utils/localization/useDirection.d.ts

@@ -0,0 +1,2 @@
+import { TTextDirection } from "./getTextDirection";
+export declare const useDirection: () => TTextDirection;

package/esm/utils/localization/useDirection.js

@@ -0,0 +1,3 @@
+import { useContext } from "react";
+import { directionContext } from "./directionContext";
+export const useDirection = () => useContext(directionContext);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.8.0-beta.1",
+    "version": "3.9.0-beta.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -12,35 +12,36 @@
         "**/react-chartjs/dateAdapter.js"
     ],
     "scripts": {
-        "test": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest",
-        "start": "npm run storybook --loglevel verbose",
-        "lint": "npx eslint",
-        "prettier-fix": "npx prettier --write \"**/*.{ts,tsx,js,jsx,json,md,less,css}\"",
-        "prettier": "npx prettier --check \"**/*.{ts,tsx,js,jsx,json,md,less,css}\"",
-        "new": "node newComponent.mjs",
-        "translations": "node build-utils/translations/translation-integrity.mjs",
+        "add-icon": "node addIcon.js",
+        "build": "npm run clean && npm run build-index && npm run update-version && npm run build-ts && npm run build-less && npm run build-copy && npm run build-clean && npm run translations",
         "build-ai-mdx": "node collectmdx.js",
-        "build-esm": "npx tsc -b tsconfig.esm.json",
         "build-cjs": "npx tsc -b tsconfig.cjs.json",
-        "build-ts": "npm run build-esm && npm run build-cjs && node build-utils/translations/inject-translations.js && node less-transformer.js",
-        "build-less": "node less-compile.js",
-        "build-copy": "node build-copy.js",
         "build-clean": "node build-clean.js",
+        "build-copy": "node build-copy.js",
+        "build-esm": "npx tsc -b tsconfig.esm.json",
         "build-index": "node buildIndex.js",
-        "update-version": "node updateVersion.js",
-        "build": "npm run build-index && npm run update-version && npm run build-ts && npm run build-less && npm run build-copy && npm run build-clean && npm run translations",
-        "add-icon": "node addIcon.js",
-        "watch": "npx tsc -b tsconfig.build.json -w",
-        "watch:inject": "npx nodemon --watch dist --ext js --exec 'node build-utils/translations/inject-translations.js' --delay 500ms",
-        "test-build": "npx tsc -b tsconfig.jestTests.json",
-        "test-watch": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && npx tsc -b tsconfig.jestTests.json -w",
-        "test-watch:inject": "npx nodemon --watch dist --ext js --exec 'node build-utils/translations/inject-translations.js' --delay 500ms",
-        "test-coverage": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest --collectCoverage=true --coverage --collectCoverageFrom='./dist/**/*.js' --collectCoverageFrom='!./dist/**/*.test.js' --json --outputFile=jest-result.json --coverageReporters=html --coverageReporters=text-summary --coverageReporters=cobertura --maxWorkers=4 --noStackTrace && node testHelpers/cobertura/cobertura.js",
-        "coverage": "npm run test-coverage && google-chrome ./jest-coverage/index.html",
-        "storybook": "storybook dev -p 6006",
+        "build-less": "node less-compile.js",
         "build-storybook": "storybook build && npm run build-ai-mdx",
+        "build-ts": "npm run build-esm && npm run build-cjs && npm run inject-translations && node less-transformer.js",
         "clean": "rm -rf ./dist && rm -rf ./esm && rm -rf ./jest-coverage",
-        "test-storybook": "test-storybook"
+        "coverage": "npm run test-coverage && google-chrome ./jest-coverage/index.html",
+        "inject-translations": "node build-utils/translations/inject-translations.js",
+        "lint": "npx eslint",
+        "new": "node newComponent.mjs",
+        "prettier": "npx prettier . --config '.prettierrc' --ignore-path '.prettierignore'",
+        "prettier-check": "npm run prettier -- --check",
+        "prettier-fix": "npm run prettier -- --write",
+        "start": "npm run storybook",
+        "storybook": "storybook dev -p 6006",
+        "test": "npm run clean && npm run test-build && jest",
+        "test-build": "npx tsc -b tsconfig.jestTests.json && npm run build-less && npm run inject-translations && jest --clearCache",
+        "test-coverage": "npm run clean && npm run test-build && jest --collectCoverage=true --coverage --collectCoverageFrom='./dist/**/*.js' --collectCoverageFrom='!./dist/**/*.test.js' --json --outputFile=jest-result.json --coverageReporters=html --coverageReporters=text-summary --coverageReporters=cobertura --maxWorkers=4 --noStackTrace && node testHelpers/cobertura/cobertura.js",
+        "test-storybook": "test-storybook",
+        "test-watch": "npm run clean && npm run test-build && npx tsc -b tsconfig.jestTests.json -w",
+        "translations": "node build-utils/translations/translation-integrity.mjs",
+        "update-version": "node updateVersion.js",
+        "watch": "npx tsc -b tsconfig.cjs.json -w",
+        "watch:inject-translations": "npx nodemon --watch dist --delay 500ms --ext js --exec 'npm run inject-translations'"
     },
     "author": "",
     "license": "SEE LICENSE IN LICENSE.txt",
@@ -53,11 +54,12 @@
         "@babel/preset-typescript": "^7.24.1",
         "@babel/traverse": "^7.28.5",
         "@eslint/js": "^9.18.0",
-        "@storybook/addon-docs": "^10.1.11",
-        "@storybook/addon-links": "^10.1.11",
-        "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-        "@storybook/react-webpack5": "^10.1.11",
-        "@storybook/test-runner": "^0.24.2",
+        "@storybook/addon-a11y": "^10.3.5",
+        "@storybook/addon-docs": "^10.3.5",
+        "@storybook/addon-links": "^10.3.5",
+        "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+        "@storybook/react-webpack5": "^10.3.5",
+        "@storybook/test-runner": "^0.24.3",
         "@tanstack/react-query": "^5.85.5",
         "@testing-library/react": "^16.3.0",
         "@types/jest": "^29.5.12",
@@ -71,7 +73,7 @@
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-react": "^7.37.3",
         "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-storybook": "^10.2.0",
+        "eslint-plugin-storybook": "^10.3.5",
         "globals": "^17.1.0",
         "jest": "^30.2.0",
         "jest-environment-jsdom": "^30.2.0",
@@ -80,7 +82,7 @@
         "less-loader": "^12.2.0",
         "mini-css-extract-plugin": "^2.9.2",
         "prettier": "^3.8.1",
-        "storybook": "^10.2.8",
+        "storybook": "^10.3.5",
         "style-loader": "^4.0.0",
         "typescript": "^5.4.3",
         "typescript-eslint": "^8.20.0",

package/dist/card/components/title.js

@@ -1,22 +0,0 @@
-"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 useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
-const useDrive_1 = require("../../utils/theme/useDrive");
-const iconChevronRightSmall_1 = require("../../icons/iconChevronRightSmall");
-const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
-    const driveClassNames = (0, useDriveClassName_1.useDriveClassName)("zen-card-title");
-    const isDrive = (0, useDrive_1.useDrive)();
-    const iconClassName = iconType ? `zen-card-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-card-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-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [iconSize]);
-    const roleProp = onClick ? "button" : undefined;
-    const tabIndexProp = onClick ? 0 : undefined;
-    const titleClasses = (0, classNames_1.classNames)(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: titleClasses, role: roleProp, onClick: onClick, tabIndex: tabIndexProp, children: [iconElement, link && !onClick ? ((0, jsx_runtime_1.jsx)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, target: target, children: (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: [title, chevron] }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: [title, onClick ? chevron : null] }) }))] }));
-};
-exports.Title = Title;

package/dist/commonHelpers/hooks/deviceProvider.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { DeviceType } from "./deviceType";
-export declare const DeviceContext: React.Context<DeviceType | undefined>;
-export declare const DeviceProvider: React.FC<{
-    deviceType: DeviceType;
-    children: React.ReactNode;
-}>;

package/dist/commonHelpers/hooks/deviceProvider.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeviceProvider = exports.DeviceContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-exports.DeviceContext = react_1.default.createContext(undefined);
-const DeviceProvider = ({ deviceType, children }) => ((0, jsx_runtime_1.jsx)(exports.DeviceContext.Provider, { value: deviceType, children: children }));
-exports.DeviceProvider = DeviceProvider;