@geotab/zenith 3.8.0-beta.0 → 3.8.0

package/README.md

@@ -56,7 +56,7 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ### 3.8.0
 
-- Create reusable File upload component
+- Create FileUpload component
 - Improve Accordion component Storybook documentation
 - Improve Divider component Storybook documentation
 - Improve accessibility for DataGrid sorting

package/dist/button/button.d.ts

@@ -24,9 +24,8 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     ref?: Ref<HTMLButtonElement | null>;
     role?: string;
     ariaLabel?: string;
-    dataAnalyticsId?: string;
 }
 export declare const Button: {
-    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/button/button.js

@@ -19,14 +19,14 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const filterGridProps_1 = require("../gridLayout/utils/filterGridProps");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 const Button = (_a) => {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel"]);
     const modifierClassName = type && type !== buttonType_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
     const ariaLabelValue = ariaLabel || title;
     const mobileClasses = (0, useMobileClassName_1.useMobileClassName)("zen-button");
-    const commonArgs = Object.assign(Object.assign(Object.assign({ id,
-        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: (0, classNames_1.classNames)(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
+    const commonArgs = Object.assign(Object.assign({ id,
+        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), { className: (0, classNames_1.classNames)(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
     if (link) {
         return ((0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
     }

package/dist/calendar/calendar.js

@@ -645,7 +645,7 @@ const buttonType_1 = require("../button/buttonType");
 const zen_1 = require("../utils/zen");
 const DEFAULT_START_DAY_OF_WEEK = 0;
 const DEFAULT_YEAR_RANGE = 20;
-exports.monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "Ma", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+exports.monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 const Calendar = ({
   id,
   value,

package/dist/card/components/cardButton/cardButton.d.ts

@@ -10,6 +10,5 @@ export interface ICardButton extends IZenIdComponentProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     link?: string;
     target?: HTMLAttributeAnchorTarget;
-    dataAnalyticsId?: string;
 }
-export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }: ICardButton) => import("react/jsx-runtime").JSX.Element;
+export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget }: ICardButton) => import("react/jsx-runtime").JSX.Element;

package/dist/card/components/cardButton/cardButton.js

@@ -11,14 +11,12 @@ const iconChevronTopSmall_1 = require("../../../icons/iconChevronTopSmall");
 const menu_1 = require("../../../menu/menu");
 const useDriveClassName_1 = require("../../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../../utils/theme/useDrive");
-const toKebabCase_1 = require("../../../utils/toKebabCase");
-const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }) => {
+const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const content = [];
     const cardButtonDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card-button");
     const isDrive = (0, useDrive_1.useDrive)();
-    const analyticsId = dataAnalyticsId || (0, toKebabCase_1.toKebabCase)(name);
     react_1.Children.forEach(children, (el) => {
         if (el.type === menu_1.Menu.Item) {
             content.push(el);
@@ -32,9 +30,9 @@ const CardButton = ({ children, disabled = false, icon, name, onClick, link, cla
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(...args);
     };
-    const renderLink = () => ((0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, dataAnalyticsId: analyticsId, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name })] }));
+    const renderLink = () => ((0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name })] }));
     const renderButton = () => {
-        const trigger = ((0, jsx_runtime_1.jsxs)(button_1.Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, dataAnalyticsId: analyticsId, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), !!content.length &&
+        const trigger = ((0, jsx_runtime_1.jsxs)(button_1.Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), !!content.length &&
                     (isOpen ? ((0, jsx_runtime_1.jsx)(iconChevronTopSmall_1.IconChevronTopSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })) : ((0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })))] }));
         return content.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: name, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, children: content })] })) : (trigger);
     };

package/dist/dateInputInner/dateInputInnerControlBlock.js

@@ -87,28 +87,23 @@ const DateInputInnerControlBlock = props => {
     assistiveText,
     ref
   } = props;
-  const generatedId = (0, react_1.useId)();
-  const fieldId = id || generatedId;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveAssistiveClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
   const isHasDateError = requireSelection && !dateText;
   const isHasTimeError = requireSelection && !timePickerValue;
-  const dateErrorId = `${fieldId}-date-error`;
-  const timeErrorId = `${fieldId}-time-error`;
   const memoizedDateInput = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, {
     className: (0, classNames_1.classNames)(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]),
-    id: fieldId,
+    id: id,
     value: dateText,
     onChange: handleSetDateText,
     onBlur: onBlurDateChangeHandler,
     placeholder: placeholder,
     autocomplete: "off",
     isError: isHasDateError,
-    ariaDescribedby: isHasDateError ? dateErrorId : undefined,
     ref: ref
-  }), [dateText, handleSetDateText, fieldId, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref, dateErrorId]);
+  }), [dateText, handleSetDateText, id, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref]);
   const memoizedTimeSelect = (0, react_1.useMemo)(() => selectTime ? (0, jsx_runtime_1.jsxs)("div", {
     className: "zen-date-input-inner__inputs-block-item",
     children: [(0, jsx_runtime_1.jsx)(timePicker_1.TimePicker, {
@@ -116,16 +111,18 @@ const DateInputInnerControlBlock = props => {
       value: timePickerValue,
       onChange: timeChangeHandler,
       isMobileView: isMobileView,
-      fullWidth: true
+      fullWidth: true,
+      // eslint-disable-next-line
+      // @ts-ignore
+      dataTimeId: id
     }), isHasTimeError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
-      id: timeErrorId,
       error: translate("The time must be set")
     }) : null]
-  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, timeErrorId]);
+  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
   return (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-date-input-inner__control-block", className || ""]),
     children: [title ? (0, jsx_runtime_1.jsx)("label", {
-      htmlFor: fieldId,
+      htmlFor: id,
       className: "zen-date-input-inner__label",
       children: title
     }) : null, (0, jsx_runtime_1.jsxs)("div", {
@@ -133,7 +130,6 @@ const DateInputInnerControlBlock = props => {
       children: [(0, jsx_runtime_1.jsxs)("div", {
         className: "zen-date-input-inner__inputs-block-item",
         children: [memoizedDateInput, isHasDateError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
-          id: dateErrorId,
           error: translate("The date must be set")
         }) : null]
       }), memoizedTimeSelect]

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -86,7 +86,6 @@ const FiltersBarSidePanelRange = ({
 }) => {
   const generatedId = (0, react_1.useId)();
   const intId = id || generatedId;
-  const rangeErrorId = `${intId}-error`;
   const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
   const [errorType, setErrorType] = (0, react_1.useState)(undefined);
   const prevValueRef = (0, react_1.useRef)(value);
@@ -161,13 +160,11 @@ const FiltersBarSidePanelRange = ({
   return (0, jsx_runtime_1.jsxs)("div", {
     ref: setFieldsContainerRef,
     id: intId,
-    "aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
     className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range", className || ""]),
     children: [(0, jsx_runtime_1.jsxs)("div", {
       className: rangeFieldContainerClasses,
       children: [memoizedMinRangeField, memoizedMaxRangeField]
     }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
-      id: rangeErrorId,
       className: "zen-filters-bar-side-panel-range__error",
       error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""]
     }) : null]

package/dist/formFieldError/formFieldError.d.ts

@@ -1,8 +1,7 @@
 import "./formFieldError.less";
 interface IFormFieldError {
-    id?: string;
     className?: string;
     error?: string | string[];
 }
-export declare const FormFieldError: ({ id, className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormFieldError: ({ className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/formFieldError/formFieldError.js

@@ -6,12 +6,12 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconException_1 = require("../icons/iconException");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const FormFieldError = ({ id, className, error }) => {
+const FormFieldError = ({ className, error }) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field-error");
     const isDrive = (0, useDrive_1.useDrive)();
     const errorStrings = Array.isArray(error)
         ? error.filter(el => el).map((erStr, ind) => (0, jsx_runtime_1.jsx)("div", { children: erStr }, `error_str_${ind}`))
         : error && (0, jsx_runtime_1.jsx)("div", { children: error });
-    return error ? ((0, jsx_runtime_1.jsxs)("span", { id: id, className: (0, classNames_1.classNames)(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
+    return error ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-field-error__icon-container", children: (0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
 };
 exports.FormFieldError = FormFieldError;

package/dist/rangeRaw/rangeRaw.js

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

package/dist/summaryTile/summaryTile.d.ts

@@ -54,8 +54,6 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
     tooltipSize?: TooltipSize;
     /** When `true`, shows a skeleton placeholder while data is being fetched — two skeleton elements replace the title and content areas. */
     isLoading?: boolean;
-    /** When `true` and the tile is interactive, sets `aria-current="page"` on the tile. */
-    isSelected?: boolean;
     /** Analytics identifier applied as `data-analytics-id`. Defaults to a kebab-cased version of `title`. */
     dataAnalyticsId?: string;
 }
@@ -75,6 +73,6 @@ export declare const SummaryTileDisplayName = "SummaryTile";
  * Use inside `SummaryTileBar` to group multiple tiles in a scrollable row.
  */
 export declare const SummaryTile: {
-    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, isSelected, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/summaryTile/summaryTile.js

@@ -122,7 +122,6 @@ const SummaryTile = ({
   tooltipText,
   tooltipAlignment = "top",
   isLoading = false,
-  isSelected = false,
   dataAnalyticsId
 }) => {
   const {
@@ -178,7 +177,7 @@ const SummaryTile = ({
     }),
     children: tooltipText
   }) : null;
-  const ariaCurrentProps = isSelected && isInteractive ? {
+  const ariaCurrentProps = tileType === SummaryTileType.Active && isInteractive ? {
     "aria-current": "page"
   } : {};
   // When both onClick and tooltipText are present, the tooltip trigger

package/dist/toggleButtonRaw/toggleButtonRaw.js

@@ -110,8 +110,7 @@ const ToggleButtonRaw = props => {
     children,
     isReverted,
     isReadOnly,
-    value: valueProp,
-    dataAnalyticsId
+    value: valueProp
   } = props;
   const driveClassesToggler = (0, useDriveClassName_1.useDriveClassName)("zen-toggler");
   const driveClassesComponent = (0, useDriveClassName_1.useDriveClassName)("zen-toggler-component");
@@ -141,7 +140,6 @@ 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,7 +6,6 @@ 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.js

@@ -138,8 +138,7 @@ const EventWrapper = ({
   handleUniversalClick,
   setTooltipVisible,
   timerRef,
-  timerMouseOutRef,
-  tooltipRef
+  timerMouseOutRef
 }) => {
   const isCurrentDeviceDesktop = deviceType === deviceType_1.DeviceType.Desktop;
   const originalOnClick = children.props.onClick;
@@ -164,13 +163,7 @@ const EventWrapper = ({
       }, TOOLTIP_VISIBILITY_DELAY);
     },
     onFocus: () => setTooltipVisible(true),
-    onBlur: () => {
-      // Skip if the tooltip DOM was already detached
-      if (tooltipRef.current && !tooltipRef.current.isConnected) {
-        return;
-      }
-      setTooltipVisible(false);
-    },
+    onBlur: () => setTooltipVisible(false),
     onKeyDown: onKeyDownHandler,
     onClick: composedOnClick
   };
@@ -272,7 +265,6 @@ const Tooltip = ({
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
     timerMouseOutRef: timerMouseOutRef,
-    tooltipRef: tooltipRef,
     children: react_1.default.cloneElement(tooltipTrigger, Object.assign({
       ref: triggerRef
     }, triggerCloneProps))

package/esm/button/button.d.ts

@@ -24,9 +24,8 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     ref?: Ref<HTMLButtonElement | null>;
     role?: string;
     ariaLabel?: string;
-    dataAnalyticsId?: string;
 }
 export declare const Button: {
-    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/button/button.js

@@ -16,14 +16,14 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { filterGridProps } from "../gridLayout/utils/filterGridProps";
 import { useMobileClassName } from "../utils/theme/useMobileClassName";
 export const Button = (_a) => {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel"]);
     const modifierClassName = type && type !== ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = useDriveClassName("zen-button");
     const ariaLabelValue = ariaLabel || title;
     const mobileClasses = useMobileClassName("zen-button");
-    const commonArgs = Object.assign(Object.assign(Object.assign({ id,
-        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: classNames(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
+    const commonArgs = Object.assign(Object.assign({ id,
+        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), { className: classNames(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
     if (link) {
         return (_jsx("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, filterGridProps(other), { children: children })));
     }

package/esm/calendar/calendar.js

@@ -637,7 +637,7 @@ injectString("ro-RO", "Next month", "Luna urm\u0103toare");
 injectString("ar-SA", "Next month", "\u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062A\u0627\u0644\u064A");
 const DEFAULT_START_DAY_OF_WEEK = 0;
 const DEFAULT_YEAR_RANGE = 20;
-export const monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "Ma", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+export const monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 export const Calendar = ({
   id,
   value,

package/esm/card/components/cardButton/cardButton.d.ts

@@ -10,6 +10,5 @@ export interface ICardButton extends IZenIdComponentProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     link?: string;
     target?: HTMLAttributeAnchorTarget;
-    dataAnalyticsId?: string;
 }
-export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }: ICardButton) => import("react/jsx-runtime").JSX.Element;
+export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget }: ICardButton) => import("react/jsx-runtime").JSX.Element;

package/esm/card/components/cardButton/cardButton.js

@@ -8,14 +8,12 @@ import { IconChevronTopSmall } from "../../../icons/iconChevronTopSmall";
 import { Menu } from "../../../menu/menu";
 import { useDriveClassName } from "../../../utils/theme/useDriveClassName";
 import { useDrive } from "../../../utils/theme/useDrive";
-import { toKebabCase } from "../../../utils/toKebabCase";
-export const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }) => {
+export const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget }) => {
     const [isOpen, setIsOpen] = useState(false);
     const triggerRef = useRef(null);
     const content = [];
     const cardButtonDriveClasses = useDriveClassName("zen-card-button");
     const isDrive = useDrive();
-    const analyticsId = dataAnalyticsId || toKebabCase(name);
     Children.forEach(children, (el) => {
         if (el.type === Menu.Item) {
             content.push(el);
@@ -29,9 +27,9 @@ export const CardButton = ({ children, disabled = false, icon, name, onClick, li
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(...args);
     };
-    const renderLink = () => (_jsxs(Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, dataAnalyticsId: analyticsId, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name })] }));
+    const renderLink = () => (_jsxs(Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name })] }));
     const renderButton = () => {
-        const trigger = (_jsxs(Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, dataAnalyticsId: analyticsId, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name }), !!content.length &&
+        const trigger = (_jsxs(Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name }), !!content.length &&
                     (isOpen ? (_jsx(IconChevronTopSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })) : (_jsx(IconChevronDownSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })))] }));
         return content.length ? (_jsxs(_Fragment, { children: [trigger, _jsx(ControlledMenu, { title: name, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, children: content })] })) : (trigger);
     };

package/esm/dateInputInner/dateInputInnerControlBlock.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useMemo } from "react";
+import { useMemo } from "react";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { TimePicker } from "../timePicker/timePicker";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -79,28 +79,23 @@ export const DateInputInnerControlBlock = props => {
     assistiveText,
     ref
   } = props;
-  const generatedId = useId();
-  const fieldId = id || generatedId;
   const {
     translate
   } = useLanguage();
   const driveAssistiveClass = useDriveClassName("zen-form-field__text");
   const isHasDateError = requireSelection && !dateText;
   const isHasTimeError = requireSelection && !timePickerValue;
-  const dateErrorId = `${fieldId}-date-error`;
-  const timeErrorId = `${fieldId}-time-error`;
   const memoizedDateInput = useMemo(() => _jsx(TextInputRaw, {
     className: classNames(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]),
-    id: fieldId,
+    id: id,
     value: dateText,
     onChange: handleSetDateText,
     onBlur: onBlurDateChangeHandler,
     placeholder: placeholder,
     autocomplete: "off",
     isError: isHasDateError,
-    ariaDescribedby: isHasDateError ? dateErrorId : undefined,
     ref: ref
-  }), [dateText, handleSetDateText, fieldId, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref, dateErrorId]);
+  }), [dateText, handleSetDateText, id, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref]);
   const memoizedTimeSelect = useMemo(() => selectTime ? _jsxs("div", {
     className: "zen-date-input-inner__inputs-block-item",
     children: [_jsx(TimePicker, {
@@ -108,16 +103,18 @@ export const DateInputInnerControlBlock = props => {
       value: timePickerValue,
       onChange: timeChangeHandler,
       isMobileView: isMobileView,
-      fullWidth: true
+      fullWidth: true,
+      // eslint-disable-next-line
+      // @ts-ignore
+      dataTimeId: id
     }), isHasTimeError ? _jsx(FormFieldError, {
-      id: timeErrorId,
       error: translate("The time must be set")
     }) : null]
-  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, timeErrorId]);
+  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
   return _jsxs("div", {
     className: classNames(["zen-date-input-inner__control-block", className || ""]),
     children: [title ? _jsx("label", {
-      htmlFor: fieldId,
+      htmlFor: id,
       className: "zen-date-input-inner__label",
       children: title
     }) : null, _jsxs("div", {
@@ -125,7 +122,6 @@ export const DateInputInnerControlBlock = props => {
       children: [_jsxs("div", {
         className: "zen-date-input-inner__inputs-block-item",
         children: [memoizedDateInput, isHasDateError ? _jsx(FormFieldError, {
-          id: dateErrorId,
           error: translate("The date must be set")
         }) : null]
       }), memoizedTimeSelect]

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -78,7 +78,6 @@ export const FiltersBarSidePanelRange = ({
 }) => {
   const generatedId = useId();
   const intId = id || generatedId;
-  const rangeErrorId = `${intId}-error`;
   const [currentValue, setCurrentValue] = useState(value);
   const [errorType, setErrorType] = useState(undefined);
   const prevValueRef = useRef(value);
@@ -153,13 +152,11 @@ export const FiltersBarSidePanelRange = ({
   return _jsxs("div", {
     ref: setFieldsContainerRef,
     id: intId,
-    "aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
     className: classNames(["zen-filters-bar-side-panel-range", className || ""]),
     children: [_jsxs("div", {
       className: rangeFieldContainerClasses,
       children: [memoizedMinRangeField, memoizedMaxRangeField]
     }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, {
-      id: rangeErrorId,
       className: "zen-filters-bar-side-panel-range__error",
       error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""]
     }) : null]

package/esm/formFieldError/formFieldError.d.ts

@@ -1,8 +1,7 @@
 import "./formFieldError.less";
 interface IFormFieldError {
-    id?: string;
     className?: string;
     error?: string | string[];
 }
-export declare const FormFieldError: ({ id, className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormFieldError: ({ className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/esm/formFieldError/formFieldError.js

@@ -3,11 +3,11 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconException } from "../icons/iconException";
 import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const FormFieldError = ({ id, className, error }) => {
+export const FormFieldError = ({ className, error }) => {
     const driveComponentClass = useDriveClassName("zen-form-field-error");
     const isDrive = useDrive();
     const errorStrings = Array.isArray(error)
         ? error.filter(el => el).map((erStr, ind) => _jsx("div", { children: erStr }, `error_str_${ind}`))
         : error && _jsx("div", { children: error });
-    return error ? (_jsxs("span", { id: id, className: classNames(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [_jsx(IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }), _jsx("span", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
+    return error ? (_jsxs("div", { className: classNames(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [_jsx("div", { className: "zen-form-field-error__icon-container", children: _jsx(IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }) }), _jsx("div", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
 };

package/esm/rangeRaw/rangeRaw.js

@@ -252,9 +252,6 @@ 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);
@@ -403,17 +400,14 @@ 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, intId, rangeErrorId]);
+  }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
   const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, {
     isOpen: isOpen,
     className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]),

package/esm/summaryTile/summaryTile.d.ts

@@ -54,8 +54,6 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
     tooltipSize?: TooltipSize;
     /** When `true`, shows a skeleton placeholder while data is being fetched — two skeleton elements replace the title and content areas. */
     isLoading?: boolean;
-    /** When `true` and the tile is interactive, sets `aria-current="page"` on the tile. */
-    isSelected?: boolean;
     /** Analytics identifier applied as `data-analytics-id`. Defaults to a kebab-cased version of `title`. */
     dataAnalyticsId?: string;
 }
@@ -75,6 +73,6 @@ export declare const SummaryTileDisplayName = "SummaryTile";
  * Use inside `SummaryTileBar` to group multiple tiles in a scrollable row.
  */
 export declare const SummaryTile: {
-    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, isSelected, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/summaryTile/summaryTile.js

@@ -83,7 +83,6 @@ export const SummaryTile = ({
   tooltipText,
   tooltipAlignment = "top",
   isLoading = false,
-  isSelected = false,
   dataAnalyticsId
 }) => {
   const {
@@ -139,7 +138,7 @@ export const SummaryTile = ({
     }),
     children: tooltipText
   }) : null;
-  const ariaCurrentProps = isSelected && isInteractive ? {
+  const ariaCurrentProps = tileType === SummaryTileType.Active && isInteractive ? {
     "aria-current": "page"
   } : {};
   // When both onClick and tooltipText are present, the tooltip trigger

package/esm/toggleButtonRaw/toggleButtonRaw.js

@@ -71,8 +71,7 @@ export const ToggleButtonRaw = props => {
     children,
     isReverted,
     isReadOnly,
-    value: valueProp,
-    dataAnalyticsId
+    value: valueProp
   } = props;
   const driveClassesToggler = useDriveClassName("zen-toggler");
   const driveClassesComponent = useDriveClassName("zen-toggler-component");
@@ -102,7 +101,6 @@ 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,7 +6,6 @@ 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,8 +99,7 @@ const EventWrapper = ({
   handleUniversalClick,
   setTooltipVisible,
   timerRef,
-  timerMouseOutRef,
-  tooltipRef
+  timerMouseOutRef
 }) => {
   const isCurrentDeviceDesktop = deviceType === DeviceType.Desktop;
   const originalOnClick = children.props.onClick;
@@ -125,13 +124,7 @@ const EventWrapper = ({
       }, TOOLTIP_VISIBILITY_DELAY);
     },
     onFocus: () => setTooltipVisible(true),
-    onBlur: () => {
-      // Skip if the tooltip DOM was already detached
-      if (tooltipRef.current && !tooltipRef.current.isConnected) {
-        return;
-      }
-      setTooltipVisible(false);
-    },
+    onBlur: () => setTooltipVisible(false),
     onKeyDown: onKeyDownHandler,
     onClick: composedOnClick
   };
@@ -233,7 +226,6 @@ export const Tooltip = ({
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
     timerMouseOutRef: timerMouseOutRef,
-    tooltipRef: tooltipRef,
     children: React.cloneElement(tooltipTrigger, Object.assign({
       ref: triggerRef
     }, triggerCloneProps))

package/package.json

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