@geotab/zenith 1.15.1 → 1.15.3

package/README.md

@@ -36,10 +36,17 @@ import { Menu, Button, IconSettings3 } from "@geotab/zenith";
 Now components are ready for usage.
 
 ### Available components
-Zenith library provides components defined in Zenith Design System. It includes very basic blocks like colors, icons, font presets, atom components like buttons, checkboxes etc and high order components - header, table, filters bar etc. List of existing components can be found in [https://developers.geotab.com/zenith-storybook/index.html](Storybook).
+Zenith library provides components defined in Zenith Design System. It includes very basic blocks like colors, icons, font presets, atom components like buttons, checkboxes etc and high order components - header, table, filters bar etc. List of existing components can be found in [Storybook](https://developers.geotab.com/zenith-storybook/index.html).
 
 ## Change log
 
+### 1.15.2
+
+ * Improve banner accessibility
+ * Add attribute `autoFocus` to `TextInput` and `SearchInput`
+ * Add default placeholder for `GroupsFilter`
+ * Fix mode detection in `FeedbackProvider`
+
 ### 1.15.1
 
  * Improve FeedbackProvider in add-ins

package/dist/banner/banner.d.ts

@@ -20,14 +20,17 @@ export interface IBanner {
     /**
     * @deprecated
     * @param translate - will be removed in the next major release
-    * @param center - will be removed in the next major release
-    * @param close - will be removed in the next major release
-    * @param role - will be removed in the next major release
-    * @param ariaAtomic - will be removed in the next major release
-    * @param ariaLive - will be removed in the next major release
     */
     translate?: (s: string) => string;
+    /**
+    * @deprecated
+    * @param center - will be removed in the next major release
+    */
     center?: boolean;
+    /**
+    * @deprecated
+    * @param close - will be removed in the next major release
+    */
     close?: boolean;
     role?: string;
     ariaAtomic?: "true" | "false";

package/dist/banner/banner.js

@@ -5,11 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const bannerSingleLine_1 = require("./bannerSingleLine");
 const bannerMultipLine_1 = require("./bannerMultipLine");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role, ariaAtomic = "true", ariaLive = "assertive", className }) => {
+const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", className }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const isMultiline = multiline === undefined ? isMobile : multiline;
-    const predefinedRole = type === "error" ? "alert" : "status";
-    const bannerRole = role ? role : predefinedRole;
     return isMultiline ? (0, jsx_runtime_1.jsx)(bannerMultipLine_1.BannerMultiline, { children,
         header,
         type,
@@ -17,7 +15,7 @@ const Banner = ({ children, header, type = "warning", icon, action, size, onClos
         size,
         action,
         onClose,
-        role: bannerRole,
+        role,
         ariaAtomic,
         ariaLive,
         className }) : (0, jsx_runtime_1.jsx)(bannerSingleLine_1.BannerSingleLine, { children,
@@ -27,7 +25,7 @@ const Banner = ({ children, header, type = "warning", icon, action, size, onClos
         icon,
         action,
         onClose,
-        role: bannerRole,
+        role,
         ariaAtomic,
         ariaLive,
         className });

package/dist/groupsFilter/groupsFilter.d.ts

@@ -3,6 +3,10 @@ import { IAdvancedEntitiesNavigatorDialog, IGroupItem, IGroupsFilterTotalState }
 import "./groupsFilter.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 interface IGroupsFilterOptions {
+    /**
+    * @deprecated
+    * @param placeholder - will be removed in the next major release
+    */
     placeholder?: string;
 }
 export interface IGroupsFilter extends IZenComponentProps {

package/dist/groupsFilter/groupsFilter.js

@@ -216,7 +216,7 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     (0, useEscape_1.useEscape)(triggerRef, handleEscape, uiState.isOpen);
     const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
     const isStateHasData = Object.keys(state.groupsMap).length > 0;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: options.placeholder }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !(0, stateReducerHelper_1.isStateChanged)(state), children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && (0, jsx_runtime_1.jsx)(waiting_1.Waiting, { className: "zen-groups-filter__waiting", isLoading: !Object.keys(state.groupsMap).length, delay: 100 })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: options.placeholder || translate("Groups") }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !(0, stateReducerHelper_1.isStateChanged)(state), children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && (0, jsx_runtime_1.jsx)(waiting_1.Waiting, { className: "zen-groups-filter__waiting", isLoading: !Object.keys(state.groupsMap).length, delay: 100 })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
 };
 exports.GroupsFilter = GroupsFilter;
 exports.TRANSLATIONS = [

package/dist/inputAdornments/inputAdornments.d.ts

@@ -14,5 +14,6 @@ export interface IInputAdornments {
     isError?: boolean;
     maxLength?: number;
     id?: string;
+    autoFocus?: boolean;
 }
 export declare const InputAdornments: React.ForwardRefExoticComponent<IInputAdornments & React.RefAttributes<HTMLInputElement>>;

package/dist/inputAdornments/inputAdornments.js

@@ -29,9 +29,9 @@ const React = __importStar(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-exports.InputAdornments = React.forwardRef(({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, startAdornment, endAdornment, placeholder, inputType = "text" }, ref) => {
+exports.InputAdornments = React.forwardRef(({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus }, ref) => {
     const disabledClassName = disabled ? "zen-input-adornments--disabled" : "";
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-input-adornments");
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-input-adornments", driveComponentClass || "", className, disabledClassName]), children: [!!startAdornment && ((0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment })), (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__wrapper", children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, disabled: disabled, type: inputType, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && ((0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-input-adornments", driveComponentClass || "", className, disabledClassName]), children: [!!startAdornment && ((0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment })), (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__wrapper", children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, disabled: disabled, type: inputType, autoFocus: autoFocus, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && ((0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment }))] }));
 });
 exports.InputAdornments.displayName = "InputAdornments";

package/dist/searchInputRaw/searchInputRaw.d.ts

@@ -18,6 +18,7 @@ export interface ISearchInputRaw {
     * @param withNewSearchIcon - will be removed in the next major release
     */
     withNewSearchIcon?: boolean;
+    autoFocus?: boolean;
 }
 export declare const SearchInputRaw: React.ForwardRefExoticComponent<ISearchInputRaw & React.RefAttributes<HTMLInputElement>>;
 export declare const TRANSLATIONS: string[];

package/dist/searchInputRaw/searchInputRaw.js

@@ -34,7 +34,7 @@ const iconClose_1 = require("../icons/iconClose");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-exports.SearchInputRaw = React.forwardRef(({ value, className = "", disabled, onChange, onKeyDown, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, id }, ref) => {
+exports.SearchInputRaw = React.forwardRef(({ value, className = "", disabled, onChange, onKeyDown, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, autoFocus, id }, ref) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const placeholderValue = placeholder || translate("Search");
     const closeButtonTitleValue = closeButtonTitle || translate("Clear");
@@ -68,7 +68,7 @@ exports.SearchInputRaw = React.forwardRef(({ value, className = "", disabled, on
             (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [ref, innerRef]);
-    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: (0, classNames_1.classNames)(["zen-search-input", className]), children: (0, jsx_runtime_1.jsx)(inputAdornments_1.InputAdornments, { id: id, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: (0, classNames_1.classNames)(["zen-search-input__input", disabledClassName, isError ? "zen-search-input__input--error" : ""]), disabled: disabled, onChange: handleChange, onKeyDown: onKeyDown, placeholder: placeholderValue, inputType: withDefaultCloseIcon ? "search" : "text", endAdornment: closeButton, ref: ref || innerRef }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: (0, classNames_1.classNames)(["zen-search-input", className]), children: (0, jsx_runtime_1.jsx)(inputAdornments_1.InputAdornments, { id: id, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: (0, classNames_1.classNames)(["zen-search-input__input", disabledClassName, isError ? "zen-search-input__input--error" : ""]), disabled: disabled, onChange: handleChange, onKeyDown: onKeyDown, placeholder: placeholderValue, inputType: withDefaultCloseIcon ? "search" : "text", endAdornment: closeButton, ref: ref || innerRef, autoFocus: autoFocus }) }));
 });
 exports.SearchInputRaw.displayName = "SearchInputRaw";
 exports.TRANSLATIONS = [

package/dist/textInputRaw/textInputRaw.d.ts

@@ -17,5 +17,6 @@ export interface ITextInputRaw extends IZenComponentProps {
     max?: number;
     ariaLabelledby?: string;
     ariaLabel?: string;
+    autoFocus?: boolean;
 }
 export declare const TextInputRaw: React.ForwardRefExoticComponent<ITextInputRaw & React.RefAttributes<HTMLInputElement>>;

package/dist/textInputRaw/textInputRaw.js

@@ -37,5 +37,5 @@ React.forwardRef(function InnerInput(props, ref) {
             driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
-        ]), value: props.maxLength ? props.value.substring(0, props.maxLength) : props.value, placeholder: props.placeholder, disabled: props.disabled, onChange: props.onChange, onKeyDown: props.onKeyDown, onBlur: props.onBlur, maxLength: props.maxLength, autoComplete: props.autocomplete, min: props.min, max: props.max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel });
+        ]), value: props.maxLength ? props.value.substring(0, props.maxLength) : props.value, placeholder: props.placeholder, disabled: props.disabled, onChange: props.onChange, onKeyDown: props.onKeyDown, onBlur: props.onBlur, maxLength: props.maxLength, autoComplete: props.autocomplete, min: props.min, max: props.max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus });
 });

package/package.json

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