@geotab/zenith 3.6.0 → 3.6.1-beta.0

package/README.md

@@ -45,8 +45,19 @@ Now components are ready for usage.
 
 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).
 
+## Documentation
+
+- [Development Guide](docs/DEVELOPMENT.md) - Creating components, adding icons, testing, code style
+- [Build Process](docs/BUILD.md) - How the build system works
+- [Release Process](docs/RELEASE.md) - How to publish new versions of Zenith
+- [Translations](docs/TRANSLATIONS.md) - How translations work and how to manage them
+
 ## Change log
 
+### 3.6.1
+
+Patch for the `Nav` component.
+
 ### 3.6.0
 
 Enhanced accessibility, improved component documentation, several component fixes and new mobile features.

package/dist/dataGrid/entitiesListActions/actions/fullscreenButton.js

@@ -17,6 +17,7 @@ const iconMinimize_1 = require("../../../icons/iconMinimize");
 const layoutFullScreenElementProvider_1 = require("../../../layout/layoutFullScreenElementProvider");
 const layoutFullScreenProvider_1 = require("../../../layout/layoutFullScreenProvider");
 const react_1 = require("react");
+injectString("en", "Exit full screen table view", "Exit full screen table view");
 injectString("cs", "Convert table to full screen", "Konvertovat tabulku do re\u017Eimu pln\xE9ho zobrazen\xED");
 injectString("da-DK", "Convert table to full screen", "Konverter tabel til fuld sk\xE6rm");
 injectString("de", "Convert table to full screen", "Tabelle in Vollbild umwandeln");
@@ -71,10 +72,10 @@ const FullScreenButton = ({
     icon: getFullScreen() ? iconMinimize_1.IconMinimize : iconExpand_1.IconExpand,
     iconPosition: textIconButton_1.ButtonIconPosition.Start,
     iconSize: svgIconSize_1.SvgIconSize.Large,
-    title: title ? title : translate("Convert table to full screen"),
+    title: title ? title : getFullScreen() ? translate("Exit full screen table view") : translate("Convert table to full screen"),
     type: buttonType_1.ButtonType.TertiaryBlack,
     onClick: handleClick
   });
 };
 exports.FullScreenButton = FullScreenButton;
-exports.FullScreenButton.translations = ["Convert table to full screen"];
+exports.FullScreenButton.translations = ["Convert table to full screen", "Exit full screen table view"];

package/dist/feedbackContainer/feedbackContainer.js

@@ -54,8 +54,10 @@ const FeedbackContainer = () => {
     if (isToastAdded) {
         removedToastId.current = null;
     }
-    prevAlertsLength.current = alerts.length;
-    prevToastsLength.current = toasts.length;
+    (0, react_1.useEffect)(() => {
+        prevAlertsLength.current = alerts.length;
+        prevToastsLength.current = toasts.length;
+    }, [alerts.length, toasts.length]);
     const alertsToRender = (0, react_1.useMemo)(() => alerts.map((alert, indx) => (0, jsx_runtime_1.jsx)(alertRaw_1.AlertRaw, { id: alert.id, header: alert.header, text: alert.text, isOpen: true, onClose: () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;

package/dist/formField/hooks/useContainer.js

@@ -28,7 +28,7 @@ const useFormFieldProps_1 = require("./useFormFieldProps");
 const useCounter_1 = require("./useCounter");
 const useContainer = (props, wrapperComponent) => {
     const { id, wrapperComponent: WrappedComponent, trailing, trailingId, showAdditionalInfo } = (0, useFormFieldProps_1.useFormFieldProps)(props, wrapperComponent);
-    const { className, inputClassName } = props, rest = __rest(props, ["className", "inputClassName"]);
+    const { className, inputClassName, inputWrapperClassName } = props, rest = __rest(props, ["className", "inputClassName", "inputWrapperClassName"]);
     const { id: errorId, error, errorBanner } = (0, useError_1.useError)(props);
     const { id: bannerId, banner: bannerComp } = (0, useBanner_1.useBanner)(props);
     const { id: assistiveId, assistive } = (0, useAssistive_1.useAssistive)(props);
@@ -44,7 +44,7 @@ const useContainer = (props, wrapperComponent) => {
     const isInputContainerHidden = isReadonly && props.isError;
     const ref = props.ref;
     const banner = errorBanner || bannerComp;
-    const container = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, ariaDescribedby: ariaDescribedBy })), (0, jsx_runtime_1.jsx)(formFieldAdditionalInfo_1.FormFieldAdditionalInfo, { counterId: counterId, assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isReadonly, isInputContainerHidden, trailing, WrappedComponent, rest, disabledProps, id, componentClassName, ref, props.isError, error, ariaDescribedBy, counterId, assistiveId, errorId, driveTextClass, assistive, counter, showAdditionalInfo, hasCustomWidth, trailingId, banner]);
+    const container = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field__input-wrapper", inputWrapperClassName || ""]), children: [(0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, ariaDescribedby: ariaDescribedBy })), (0, jsx_runtime_1.jsx)(formFieldAdditionalInfo_1.FormFieldAdditionalInfo, { counterId: counterId, assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isReadonly, isInputContainerHidden, trailing, inputWrapperClassName, props.isError, WrappedComponent, rest, disabledProps, id, componentClassName, ref, error, ariaDescribedBy, counterId, assistiveId, errorId, driveTextClass, assistive, counter, showAdditionalInfo, hasCustomWidth, trailingId, banner]);
     return container;
 };
 exports.useContainer = useContainer;

package/dist/formField/types.d.ts

@@ -5,6 +5,10 @@ export type TLabelAlign = "left" | "top";
 interface IFormFieldBase extends PropsWithChildren {
     className?: string;
     inputClassName?: string;
+    /**
+     * @param inputWrapperClassName - className for the wrapper around the input, which also contains assistive text, error and counter
+     */
+    inputWrapperClassName?: string;
     error?: string;
     assistive?: string;
     counter?: string;

package/dist/index.css

@@ -4102,6 +4102,7 @@
   width: 0;
   height: 0;
   opacity: 0;
+  outline: none;
 }
 .zen-checkbox__box {
   display: flex;
@@ -4311,7 +4312,6 @@
 .zen-select-item[aria-disabled="true"] > .zen-select-item__wrapper {
   color: var(--text-button-disabled);
   fill: var(--text-button-disabled);
-  background-color: var(--backgrounds-main);
 }
 .zen-select-item:not(.zen-select-item--with-checkbox)[aria-selected="true"] > .zen-select-item__wrapper {
   color: var(--text-reverse-primary);
@@ -6054,6 +6054,10 @@
 .zen-pill-actionable:not(.zen-pill-actionable--disabled):not(.zen-pill-actionable--readonly):hover {
   cursor: pointer;
 }
+.zen-pill-actionable:has(.zen-pill-actionable__input:focus-visible) {
+  outline: 1px solid var(--borders-form-field--active);
+  outline-offset: 2px;
+}
 .zen-pill-actionable__input {
   position: absolute;
   left: -5000px;
@@ -6080,10 +6084,6 @@
   color: var(--text-reverse-primary);
   fill: var(--text-reverse-primary);
 }
-.zen-pill-actionable--active.zen-pill-actionable--keyboard-nav {
-  outline: 1px solid var(--borders-form-field--active);
-  outline-offset: 2px;
-}
 .zen-pill-actionable--readonly {
   color: var(--text-secondary);
   background-color: var(--backgrounds-content-0);
@@ -8583,7 +8583,8 @@
 .zen-status-pill__container--error:hover {
   border-color: var(--accents-error--detail);
 }
-.zen-status-pill__container:focus-visible {
+.zen-status-pill__container:focus-visible,
+.zen-status-pill__container:focus-visible + .zen-status-pill__container {
   outline: none;
   border-color: var(--borders-form-field--active);
 }
@@ -15535,11 +15536,17 @@ button.zen-summary__clickable {
   flex: 1 1 100%;
 }
 .zen-nav-header-search {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
   flex: 1 1 auto;
 }
 .zen-nav-header-search__input {
   flex: 1 1 auto;
 }
+.zen-nav-header-search__close-button {
+  flex: 0 0 auto;
+}
 .zen-nav-section {
   display: flex;
   flex-direction: column;

package/dist/nav/navHeader/navHeaderSearch/navHeaderSearch.js

@@ -42,7 +42,11 @@ injectString("tr", "Search", "Ara");
 injectString("zh-Hans", "Search", "\u641C\u7D22");
 injectString("zh-TW", "Search", "\u641C\u5C0B");
 injectString("ro-RO", "Search", "C\u0103uta\u021Bi");
+injectString("en", "Close search", "Close search");
 const navItem_1 = require("../../navItem/navItem");
+const iconClose_1 = require("../../../icons/iconClose");
+const textIconButton_1 = require("../../../textIconButton/textIconButton");
+const buttonType_1 = require("../../../button/buttonType");
 const NavHeaderSearch = ({
   className,
   onSearch
@@ -78,6 +82,10 @@ const NavHeaderSearch = ({
       onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
     }
   }, [handleChange, onSearchToggle]);
+  const clearSearch = (0, react_1.useCallback)(() => {
+    handleChange("");
+    onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
+  }, [handleChange, onSearchToggle]);
   return (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-nav-header-search", className || ""]),
     children: [!searchOpen && !isMobile ? (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
@@ -97,6 +105,13 @@ const NavHeaderSearch = ({
       onChange: handleChange,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown
+    }) : null, searchOpen && !isMobile ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+      icon: iconClose_1.IconClose,
+      iconSize: "large",
+      onClick: clearSearch,
+      type: buttonType_1.ButtonType.TertiaryBlack,
+      title: translate("Close search"),
+      className: "zen-nav-header-search__close-button"
     }) : null]
   });
 };

package/dist/pill/components/pillActionable/pillActionable.js

@@ -25,7 +25,7 @@ const ActionablePill = ({ onChange, disabled, readonly, className, children, ico
         }
         onChange(e.target.checked);
     }, [onChange, readonly]);
-    const onKeyDownHandler = (0, react_1.useCallback)((e) => {
+    const onKeyUpHandler = (0, react_1.useCallback)((e) => {
         if (e.key === "Enter" && !disabled && !readonly) {
             onChange(!active);
             return;
@@ -34,17 +34,7 @@ const ActionablePill = ({ onChange, disabled, readonly, className, children, ico
             e.preventDefault();
             onChange(!active);
         }
-    }, [disabled, readonly, active, onChange]);
-    const onKeyUpHandler = (0, react_1.useCallback)((e) => {
-        var _a;
-        if (e.key === "Tab" || e.key === "Enter" || e.key === " " || e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowDown") {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-pill-actionable--keyboard-nav");
-        }
-    }, [ref]);
-    const onBlurHandler = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove("zen-pill-actionable--keyboard-nav");
-    }, [ref]);
+    }, [active, disabled, onChange, readonly]);
     // Only show title when icon is visible but text is hidden, or when explicit title is provided with hidden text
     const showTitle = hasIcon && isTextContentHidden;
     const titleValue = title || textContent;
@@ -54,6 +44,6 @@ const ActionablePill = ({ onChange, disabled, readonly, className, children, ico
             drivePillClass !== null && drivePillClass !== void 0 ? drivePillClass : "",
             (0, getActionablePillStateClassName_1.getActionablePillStateClassName)(!!disabled, !!readonly, active),
             className !== null && className !== void 0 ? className : ""
-        ]), htmlFor: id, children: [(0, jsx_runtime_1.jsx)("input", { checked: active, onBlur: onBlurHandler, onKeyUp: onKeyUpHandler, onKeyDown: onKeyDownHandler, onChange: onChangeHandler, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled, readOnly: readonly }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-pill-actionable__content-wrapper", contentClasses]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }), svgIcon] })] }));
+        ]), htmlFor: id, children: [(0, jsx_runtime_1.jsx)("input", { checked: active, onKeyUp: onKeyUpHandler, onChange: onChangeHandler, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled, readOnly: readonly }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-pill-actionable__content-wrapper", contentClasses]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }), svgIcon] })] }));
 };
 exports.ActionablePill = ActionablePill;

package/dist/pillExpandable/pillExpandable.js

@@ -353,7 +353,8 @@ const PillExpandableBase = ({
           text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChildren}`,
           includeExpandIcon: false,
           type: type,
-          errorHandler: errorHandler
+          errorHandler: errorHandler,
+          className: "zen-status-pill__counter"
         })]
       }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, {
         recalculateTrigger: isPopupContentReady,

package/dist/pillExpandable/pillExpandableSimple.d.ts

@@ -12,7 +12,7 @@ interface IPillExpandableSimple extends IPillExpandable {
     descriptionId?: string;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/pillExpandable/pillExpandableSimple.js

@@ -8,7 +8,7 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, ref, descriptionId }) => {
+const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, ref, className, descriptionId }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
     const containerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill__container");
     const onExpandHandler = (0, react_1.useCallback)(() => {
@@ -19,7 +19,7 @@ const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includ
     const iconSize = isBeta ? "big" : defaultIconSize;
     const hasText = (text || "").trim().length > 0;
     return (0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classNames_1.classNames)([
-            "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", "zen-ellipsis"
+            "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", className || "", "zen-ellipsis"
         ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,

package/dist/selectList/selectList.helpers.d.ts

@@ -5,7 +5,7 @@ export declare const getItemIdByIndex: (state: Map<string, CheckboxState>, index
 export declare const getItemIndexById: (state: Map<string, CheckboxState>, id: string) => number;
 export declare const updateItemState: (initialState: Map<string, CheckboxState>, multiselect: boolean, updatedId: string, newState: CheckboxState) => [Map<string, CheckboxState>, boolean];
 export declare const searchItemIndex: (items: ISelectListItem[], searchStr: string) => number;
-export declare const getFirstIndex: (items: ISelectListItem[]) => number;
+export declare const getFirstIndex: (items: ISelectListItem[]) => 0 | -1;
 export declare const getLastIndex: (items: ISelectListItem[]) => number;
 export declare const getNextIndex: (currIndex: number, items: ISelectListItem[]) => number;
 export declare const getPrevIndex: (currIndex: number, items: ISelectListItem[]) => number;

package/dist/selectList/selectList.helpers.js

@@ -37,43 +37,36 @@ const searchItemIndex = (items, searchStr) => {
         return -1;
     }
     return items.findIndex(item => {
-        if (item.disabled) {
-            return false;
-        }
         const content = (0, reactHelpers_1.getComponentText)(item.children);
         return content.toLocaleLowerCase().indexOf(searchStr.toLocaleLowerCase()) > -1;
     });
 };
 exports.searchItemIndex = searchItemIndex;
-const getFirstIndex = (items) => items.findIndex(i => !i.disabled);
+const getFirstIndex = (items) => (items.length > 0 ? 0 : -1);
 exports.getFirstIndex = getFirstIndex;
-const getLastIndex = (items) => {
-    const reverseLastIndex = [...items].reverse().findIndex(i => !i.disabled);
-    return reverseLastIndex === -1 ? reverseLastIndex : items.length - reverseLastIndex - 1;
-};
+const getLastIndex = (items) => (items.length > 0 ? items.length - 1 : -1);
 exports.getLastIndex = getLastIndex;
 const getNextIndex = (currIndex, items) => {
-    const next = (0, exports.getFirstIndex)(items.slice(currIndex + 1));
-    return next === -1 ? (0, exports.getFirstIndex)(items) : next + currIndex + 1;
+    if (items.length === 0) {
+        return -1;
+    }
+    return currIndex + 1 >= items.length ? 0 : currIndex + 1;
 };
 exports.getNextIndex = getNextIndex;
 const getPrevIndex = (currIndex, items) => {
-    const prev = (0, exports.getLastIndex)(items.slice(0, currIndex));
-    return prev === -1 ? (0, exports.getLastIndex)(items) : prev;
+    if (items.length === 0) {
+        return -1;
+    }
+    return currIndex <= 0 || currIndex >= items.length ? items.length - 1 : currIndex - 1;
 };
 exports.getPrevIndex = getPrevIndex;
 const getFirstActiveIndex = (state, items, multiselect) => {
-    let firstActiveItemIndex = -1;
     for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (!item.disabled && firstActiveItemIndex === -1) {
-            firstActiveItemIndex = i;
-        }
-        if (state.get(item.id) === checkboxState_1.CheckboxState.On && !item.disabled) {
+        if (state.get(items[i].id) === checkboxState_1.CheckboxState.On) {
             return i;
         }
     }
-    return multiselect ? firstActiveItemIndex : -1;
+    return multiselect && items.length > 0 ? 0 : -1;
 };
 exports.getFirstActiveIndex = getFirstActiveIndex;
 const getItemsState = (items, value, multiselect) => {

package/dist/selectList/selectList.js

@@ -80,7 +80,7 @@ const SelectList = (_a) => {
             "Enter": () => {
                 const item = items[state.activeIndex];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (!item) {
+                if (!item || item.disabled) {
                     return;
                 }
                 if (item.multiLevel) {
@@ -96,7 +96,14 @@ const SelectList = (_a) => {
             },
             "Home": () => multiselect || !selectItemOnFocus ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusFirst, payload: { items } }) : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectFirst, payload: { items, multiselect } }),
             "End": () => multiselect || !selectItemOnFocus ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusLast, payload: { items } }) : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectLast, payload: { items, multiselect } }),
-            "Space": () => dispatchState({ type: selectList_actionTypes_1.ListAction.ToggleCurrent, payload: { multiselect } }),
+            "Space": () => {
+                const item = items[state.activeIndex];
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (item === null || item === void 0 ? void 0 : item.disabled) {
+                    return;
+                }
+                dispatchState({ type: selectList_actionTypes_1.ListAction.ToggleCurrent, payload: { multiselect } });
+            },
             "Shift+ArrowUp": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectPrev, payload: { items, multiselect } }),
             "Shift+ArrowDown": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectNext, payload: { items, multiselect } }),
             "Ctrl+Shift+Home": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectAllToTheBeginning, payload: { items, multiselect } }),

package/dist/selectList/selectList.reducer.d.ts

@@ -2,9 +2,9 @@ import { CheckboxState } from "../checkbox/checkboxState";
 import { IListState } from "./selectList";
 import { TAction } from "./selectList.actionTypes";
 export declare const selectListReducer: (state: IListState, action: TAction) => {
-    itemsState: Map<string, CheckboxState>;
-    isItemsStateChanged: boolean;
     activeIndex: number;
+    isItemsStateChanged: boolean;
     searchStr: string;
+    itemsState: Map<string, CheckboxState>;
     level: string;
 };

package/dist/selectList/selectList.reducer.js

@@ -4,7 +4,10 @@ exports.selectListReducer = void 0;
 const checkboxState_1 = require("../checkbox/checkboxState");
 const selectList_actionTypes_1 = require("./selectList.actionTypes");
 const selectList_helpers_1 = require("./selectList.helpers");
-const selectItem = (state, itemIndex, multiselect) => {
+const selectItem = (state, itemIndex, multiselect, disabled) => {
+    if (disabled) {
+        return Object.assign(Object.assign({}, state), { activeIndex: itemIndex, isItemsStateChanged: false, searchStr: "" });
+    }
     const itemId = (0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, itemIndex);
     if (!itemId) {
         return Object.assign({}, state);
@@ -34,6 +37,7 @@ const toggleItems = (items, state, activeIndex, direction, multiselect, newState
 };
 // eslint-disable-next-line complexity
 const selectListReducer = (state, action) => {
+    var _a, _b, _c, _d;
     const { type, payload } = action;
     switch (type) {
         case selectList_actionTypes_1.ListAction.ChangeItemState: {
@@ -52,10 +56,22 @@ const selectListReducer = (state, action) => {
         case selectList_actionTypes_1.ListAction.FocusLast: return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getLastIndex)(payload.items), isItemsStateChanged: false, searchStr: "" });
         case selectList_actionTypes_1.ListAction.FocusNext: return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getNextIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
         case selectList_actionTypes_1.ListAction.FocusPrev: return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getPrevIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
-        case selectList_actionTypes_1.ListAction.SelectFirst: return selectItem(state, (0, selectList_helpers_1.getFirstIndex)(payload.items), payload.multiselect);
-        case selectList_actionTypes_1.ListAction.SelectLast: return selectItem(state, (0, selectList_helpers_1.getLastIndex)(payload.items), payload.multiselect);
-        case selectList_actionTypes_1.ListAction.SelectNext: return selectItem(state, (0, selectList_helpers_1.getNextIndex)(state.activeIndex, payload.items), payload.multiselect);
-        case selectList_actionTypes_1.ListAction.SelectPrev: return selectItem(state, (0, selectList_helpers_1.getPrevIndex)(state.activeIndex, payload.items), payload.multiselect);
+        case selectList_actionTypes_1.ListAction.SelectFirst: {
+            const index = (0, selectList_helpers_1.getFirstIndex)(payload.items);
+            return selectItem(state, index, payload.multiselect, (_a = payload.items[index]) === null || _a === void 0 ? void 0 : _a.disabled);
+        }
+        case selectList_actionTypes_1.ListAction.SelectLast: {
+            const index = (0, selectList_helpers_1.getLastIndex)(payload.items);
+            return selectItem(state, index, payload.multiselect, (_b = payload.items[index]) === null || _b === void 0 ? void 0 : _b.disabled);
+        }
+        case selectList_actionTypes_1.ListAction.SelectNext: {
+            const index = (0, selectList_helpers_1.getNextIndex)(state.activeIndex, payload.items);
+            return selectItem(state, index, payload.multiselect, (_c = payload.items[index]) === null || _c === void 0 ? void 0 : _c.disabled);
+        }
+        case selectList_actionTypes_1.ListAction.SelectPrev: {
+            const index = (0, selectList_helpers_1.getPrevIndex)(state.activeIndex, payload.items);
+            return selectItem(state, index, payload.multiselect, (_d = payload.items[index]) === null || _d === void 0 ? void 0 : _d.disabled);
+        }
         case selectList_actionTypes_1.ListAction.SelectAllToTheBeginning: return toggleItems(payload.items, state, state.activeIndex, selectList_actionTypes_1.SelectDirection.Up, payload.multiselect, checkboxState_1.CheckboxState.On);
         case selectList_actionTypes_1.ListAction.SelectAllToTheEnd: return toggleItems(payload.items, state, state.activeIndex, selectList_actionTypes_1.SelectDirection.Down, payload.multiselect, checkboxState_1.CheckboxState.On);
         case selectList_actionTypes_1.ListAction.ToggleAll: return toggleItems(payload.items, state, 0, selectList_actionTypes_1.SelectDirection.Down, payload.multiselect);

package/dist/selectRaw/select.reducer.d.ts

@@ -2,9 +2,9 @@ import { TSelectAction } from "./select.actionTypes";
 import { ISelectStateRaw } from "./selectRaw";
 export declare const selectReducer: (state: ISelectStateRaw, action: TSelectAction) => {
     expanded: boolean;
-    itemsState: Map<string, import("..").CheckboxState>;
-    isItemsStateChanged: boolean;
     activeIndex: number;
+    isItemsStateChanged: boolean;
     searchStr: string;
+    itemsState: Map<string, import("..").CheckboxState>;
     level: string;
 };

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

@@ -314,5 +314,7 @@
     "Filters and search": "Filters and search",
     "Apply filter": "Apply filter",
     "This filter is currently applied.": "This filter is currently applied.",
-    "Remove filter": "Remove filter"
+    "Remove filter": "Remove filter",
+    "Exit full screen table view": "Exit full screen table view",
+    "Close search": "Close search"
 }

package/esm/dataGrid/entitiesListActions/actions/fullscreenButton.js

@@ -9,6 +9,7 @@ import { IconMinimize } from "../../../icons/iconMinimize";
 import { useLayoutFullScreenElement } from "../../../layout/layoutFullScreenElementProvider";
 import { useLayoutFullScreen } from "../../../layout/layoutFullScreenProvider";
 import { useCallback } from "react";
+injectString("en", "Exit full screen table view", "Exit full screen table view");
 injectString("cs", "Convert table to full screen", "Konvertovat tabulku do re\u017Eimu pln\xE9ho zobrazen\xED");
 injectString("da-DK", "Convert table to full screen", "Konverter tabel til fuld sk\xE6rm");
 injectString("de", "Convert table to full screen", "Tabelle in Vollbild umwandeln");
@@ -63,9 +64,9 @@ export const FullScreenButton = ({
     icon: getFullScreen() ? IconMinimize : IconExpand,
     iconPosition: ButtonIconPosition.Start,
     iconSize: SvgIconSize.Large,
-    title: title ? title : translate("Convert table to full screen"),
+    title: title ? title : getFullScreen() ? translate("Exit full screen table view") : translate("Convert table to full screen"),
     type: ButtonType.TertiaryBlack,
     onClick: handleClick
   });
 };
-FullScreenButton.translations = ["Convert table to full screen"];
+FullScreenButton.translations = ["Convert table to full screen", "Exit full screen table view"];

package/esm/feedbackContainer/feedbackContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect } from "react";
 import { FeedbackContext } from "./feedbackContext";
 import { AlertRaw } from "../alertRaw/alertRaw";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
@@ -28,8 +28,10 @@ export const FeedbackContainer = () => {
     if (isToastAdded) {
         removedToastId.current = null;
     }
-    prevAlertsLength.current = alerts.length;
-    prevToastsLength.current = toasts.length;
+    useEffect(() => {
+        prevAlertsLength.current = alerts.length;
+        prevToastsLength.current = toasts.length;
+    }, [alerts.length, toasts.length]);
     const alertsToRender = useMemo(() => alerts.map((alert, indx) => _jsx(AlertRaw, { id: alert.id, header: alert.header, text: alert.text, isOpen: true, onClose: () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;

package/esm/formField/hooks/useContainer.js

@@ -25,7 +25,7 @@ import { useFormFieldProps } from "./useFormFieldProps";
 import { useCounter } from "./useCounter";
 export const useContainer = (props, wrapperComponent) => {
     const { id, wrapperComponent: WrappedComponent, trailing, trailingId, showAdditionalInfo } = useFormFieldProps(props, wrapperComponent);
-    const { className, inputClassName } = props, rest = __rest(props, ["className", "inputClassName"]);
+    const { className, inputClassName, inputWrapperClassName } = props, rest = __rest(props, ["className", "inputClassName", "inputWrapperClassName"]);
     const { id: errorId, error, errorBanner } = useError(props);
     const { id: bannerId, banner: bannerComp } = useBanner(props);
     const { id: assistiveId, assistive } = useAssistive(props);
@@ -41,6 +41,6 @@ export const useContainer = (props, wrapperComponent) => {
     const isInputContainerHidden = isReadonly && props.isError;
     const ref = props.ref;
     const banner = errorBanner || bannerComp;
-    const container = useMemo(() => _jsxs(_Fragment, { children: [_jsxs("div", { className: classNames(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [_jsxs("div", { children: [_jsx(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, ariaDescribedby: ariaDescribedBy })), _jsx(FormFieldAdditionalInfo, { counterId: counterId, assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), _jsx(TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isReadonly, isInputContainerHidden, trailing, WrappedComponent, rest, disabledProps, id, componentClassName, ref, props.isError, error, ariaDescribedBy, counterId, assistiveId, errorId, driveTextClass, assistive, counter, showAdditionalInfo, hasCustomWidth, trailingId, banner]);
+    const container = useMemo(() => _jsxs(_Fragment, { children: [_jsxs("div", { className: classNames(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [_jsxs("div", { className: classNames(["zen-form-field__input-wrapper", inputWrapperClassName || ""]), children: [_jsx(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, ariaDescribedby: ariaDescribedBy })), _jsx(FormFieldAdditionalInfo, { counterId: counterId, assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), _jsx(TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isReadonly, isInputContainerHidden, trailing, inputWrapperClassName, props.isError, WrappedComponent, rest, disabledProps, id, componentClassName, ref, error, ariaDescribedBy, counterId, assistiveId, errorId, driveTextClass, assistive, counter, showAdditionalInfo, hasCustomWidth, trailingId, banner]);
     return container;
 };

package/esm/formField/types.d.ts

@@ -5,6 +5,10 @@ export type TLabelAlign = "left" | "top";
 interface IFormFieldBase extends PropsWithChildren {
     className?: string;
     inputClassName?: string;
+    /**
+     * @param inputWrapperClassName - className for the wrapper around the input, which also contains assistive text, error and counter
+     */
+    inputWrapperClassName?: string;
     error?: string;
     assistive?: string;
     counter?: string;

package/esm/nav/navHeader/navHeaderSearch/navHeaderSearch.js

@@ -9,6 +9,9 @@ import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { IconSearch } from "../../../icons/iconSearch";
 import { SearchInput } from "../../../searchInput/searchInput";
 import { NavItem } from "../../navItem/navItem";
+import { IconClose } from "../../../icons/iconClose";
+import { TextIconButton } from "../../../textIconButton/textIconButton";
+import { ButtonType } from "../../../button/buttonType";
 injectString("cs", "Search", "Hledat");
 injectString("da-DK", "Search", "S\xF8g");
 injectString("de", "Search", "Suche");
@@ -35,6 +38,7 @@ injectString("tr", "Search", "Ara");
 injectString("zh-Hans", "Search", "\u641C\u7D22");
 injectString("zh-TW", "Search", "\u641C\u5C0B");
 injectString("ro-RO", "Search", "C\u0103uta\u021Bi");
+injectString("en", "Close search", "Close search");
 export const NavHeaderSearch = ({
   className,
   onSearch
@@ -70,6 +74,10 @@ export const NavHeaderSearch = ({
       onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
     }
   }, [handleChange, onSearchToggle]);
+  const clearSearch = useCallback(() => {
+    handleChange("");
+    onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
+  }, [handleChange, onSearchToggle]);
   return _jsxs("div", {
     className: classNames(["zen-nav-header-search", className || ""]),
     children: [!searchOpen && !isMobile ? _jsx(NavItem, {
@@ -89,6 +97,13 @@ export const NavHeaderSearch = ({
       onChange: handleChange,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown
+    }) : null, searchOpen && !isMobile ? _jsx(TextIconButton, {
+      icon: IconClose,
+      iconSize: "large",
+      onClick: clearSearch,
+      type: ButtonType.TertiaryBlack,
+      title: translate("Close search"),
+      className: "zen-nav-header-search__close-button"
     }) : null]
   });
 };

package/esm/pill/components/pillActionable/pillActionable.js

@@ -22,7 +22,7 @@ export const ActionablePill = ({ onChange, disabled, readonly, className, childr
         }
         onChange(e.target.checked);
     }, [onChange, readonly]);
-    const onKeyDownHandler = useCallback((e) => {
+    const onKeyUpHandler = useCallback((e) => {
         if (e.key === "Enter" && !disabled && !readonly) {
             onChange(!active);
             return;
@@ -31,17 +31,7 @@ export const ActionablePill = ({ onChange, disabled, readonly, className, childr
             e.preventDefault();
             onChange(!active);
         }
-    }, [disabled, readonly, active, onChange]);
-    const onKeyUpHandler = useCallback((e) => {
-        var _a;
-        if (e.key === "Tab" || e.key === "Enter" || e.key === " " || e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowDown") {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-pill-actionable--keyboard-nav");
-        }
-    }, [ref]);
-    const onBlurHandler = useCallback(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove("zen-pill-actionable--keyboard-nav");
-    }, [ref]);
+    }, [active, disabled, onChange, readonly]);
     // Only show title when icon is visible but text is hidden, or when explicit title is provided with hidden text
     const showTitle = hasIcon && isTextContentHidden;
     const titleValue = title || textContent;
@@ -51,5 +41,5 @@ export const ActionablePill = ({ onChange, disabled, readonly, className, childr
             drivePillClass !== null && drivePillClass !== void 0 ? drivePillClass : "",
             getActionablePillStateClassName(!!disabled, !!readonly, active),
             className !== null && className !== void 0 ? className : ""
-        ]), htmlFor: id, children: [_jsx("input", { checked: active, onBlur: onBlurHandler, onKeyUp: onKeyUpHandler, onKeyDown: onKeyDownHandler, onChange: onChangeHandler, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled, readOnly: readonly }), _jsxs("div", { className: classNames(["zen-pill-actionable__content-wrapper", contentClasses]), children: [_jsx("div", { className: classNames(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }), svgIcon] })] }));
+        ]), htmlFor: id, children: [_jsx("input", { checked: active, onKeyUp: onKeyUpHandler, onChange: onChangeHandler, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled, readOnly: readonly }), _jsxs("div", { className: classNames(["zen-pill-actionable__content-wrapper", contentClasses]), children: [_jsx("div", { className: classNames(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }), svgIcon] })] }));
 };

package/esm/pillExpandable/pillExpandable.js

@@ -345,7 +345,8 @@ const PillExpandableBase = ({
           text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChildren}`,
           includeExpandIcon: false,
           type: type,
-          errorHandler: errorHandler
+          errorHandler: errorHandler,
+          className: "zen-status-pill__counter"
         })]
       }), _jsx(Absolute, {
         recalculateTrigger: isPopupContentReady,

package/esm/pillExpandable/pillExpandableSimple.d.ts

@@ -12,7 +12,7 @@ interface IPillExpandableSimple extends IPillExpandable {
     descriptionId?: string;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/pillExpandable/pillExpandableSimple.js

@@ -5,7 +5,7 @@ import { IconChevronTop } from "../icons/iconChevronTop";
 import { IconChevronBottom } from "../icons/iconChevronBottom";
 import { IconException } from "../icons/iconException";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, ref, descriptionId }) => {
+export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, ref, className, descriptionId }) => {
     const iconDriveClassName = useDriveClassName("icon");
     const containerDriveClassName = useDriveClassName("zen-status-pill__container");
     const onExpandHandler = useCallback(() => {
@@ -16,7 +16,7 @@ export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded,
     const iconSize = isBeta ? "big" : defaultIconSize;
     const hasText = (text || "").trim().length > 0;
     return _jsxs("button", { type: "button", className: classNames([
-            "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", "zen-ellipsis"
+            "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", className || "", "zen-ellipsis"
         ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && _jsx("div", { className: classNames([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,

package/esm/selectList/selectList.helpers.d.ts

@@ -5,7 +5,7 @@ export declare const getItemIdByIndex: (state: Map<string, CheckboxState>, index
 export declare const getItemIndexById: (state: Map<string, CheckboxState>, id: string) => number;
 export declare const updateItemState: (initialState: Map<string, CheckboxState>, multiselect: boolean, updatedId: string, newState: CheckboxState) => [Map<string, CheckboxState>, boolean];
 export declare const searchItemIndex: (items: ISelectListItem[], searchStr: string) => number;
-export declare const getFirstIndex: (items: ISelectListItem[]) => number;
+export declare const getFirstIndex: (items: ISelectListItem[]) => 0 | -1;
 export declare const getLastIndex: (items: ISelectListItem[]) => number;
 export declare const getNextIndex: (currIndex: number, items: ISelectListItem[]) => number;
 export declare const getPrevIndex: (currIndex: number, items: ISelectListItem[]) => number;

package/esm/selectList/selectList.helpers.js

@@ -31,38 +31,31 @@ export const searchItemIndex = (items, searchStr) => {
         return -1;
     }
     return items.findIndex(item => {
-        if (item.disabled) {
-            return false;
-        }
         const content = getComponentText(item.children);
         return content.toLocaleLowerCase().indexOf(searchStr.toLocaleLowerCase()) > -1;
     });
 };
-export const getFirstIndex = (items) => items.findIndex(i => !i.disabled);
-export const getLastIndex = (items) => {
-    const reverseLastIndex = [...items].reverse().findIndex(i => !i.disabled);
-    return reverseLastIndex === -1 ? reverseLastIndex : items.length - reverseLastIndex - 1;
-};
+export const getFirstIndex = (items) => (items.length > 0 ? 0 : -1);
+export const getLastIndex = (items) => (items.length > 0 ? items.length - 1 : -1);
 export const getNextIndex = (currIndex, items) => {
-    const next = getFirstIndex(items.slice(currIndex + 1));
-    return next === -1 ? getFirstIndex(items) : next + currIndex + 1;
+    if (items.length === 0) {
+        return -1;
+    }
+    return currIndex + 1 >= items.length ? 0 : currIndex + 1;
 };
 export const getPrevIndex = (currIndex, items) => {
-    const prev = getLastIndex(items.slice(0, currIndex));
-    return prev === -1 ? getLastIndex(items) : prev;
+    if (items.length === 0) {
+        return -1;
+    }
+    return currIndex <= 0 || currIndex >= items.length ? items.length - 1 : currIndex - 1;
 };
 export const getFirstActiveIndex = (state, items, multiselect) => {
-    let firstActiveItemIndex = -1;
     for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (!item.disabled && firstActiveItemIndex === -1) {
-            firstActiveItemIndex = i;
-        }
-        if (state.get(item.id) === CheckboxState.On && !item.disabled) {
+        if (state.get(items[i].id) === CheckboxState.On) {
             return i;
         }
     }
-    return multiselect ? firstActiveItemIndex : -1;
+    return multiselect && items.length > 0 ? 0 : -1;
 };
 export const getItemsState = (items, value, multiselect) => {
     let forceUncheck = false;

package/esm/selectList/selectList.js

@@ -77,7 +77,7 @@ export const SelectList = (_a) => {
             "Enter": () => {
                 const item = items[state.activeIndex];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (!item) {
+                if (!item || item.disabled) {
                     return;
                 }
                 if (item.multiLevel) {
@@ -93,7 +93,14 @@ export const SelectList = (_a) => {
             },
             "Home": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusFirst, payload: { items } }) : dispatchState({ type: ListAction.SelectFirst, payload: { items, multiselect } }),
             "End": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusLast, payload: { items } }) : dispatchState({ type: ListAction.SelectLast, payload: { items, multiselect } }),
-            "Space": () => dispatchState({ type: ListAction.ToggleCurrent, payload: { multiselect } }),
+            "Space": () => {
+                const item = items[state.activeIndex];
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (item === null || item === void 0 ? void 0 : item.disabled) {
+                    return;
+                }
+                dispatchState({ type: ListAction.ToggleCurrent, payload: { multiselect } });
+            },
             "Shift+ArrowUp": () => multiselect && dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
             "Shift+ArrowDown": () => multiselect && dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
             "Ctrl+Shift+Home": () => multiselect && dispatchState({ type: ListAction.SelectAllToTheBeginning, payload: { items, multiselect } }),

package/esm/selectList/selectList.reducer.d.ts

@@ -2,9 +2,9 @@ import { CheckboxState } from "../checkbox/checkboxState";
 import { IListState } from "./selectList";
 import { TAction } from "./selectList.actionTypes";
 export declare const selectListReducer: (state: IListState, action: TAction) => {
-    itemsState: Map<string, CheckboxState>;
-    isItemsStateChanged: boolean;
     activeIndex: number;
+    isItemsStateChanged: boolean;
     searchStr: string;
+    itemsState: Map<string, CheckboxState>;
     level: string;
 };

package/esm/selectList/selectList.reducer.js

@@ -1,7 +1,10 @@
 import { CheckboxState } from "../checkbox/checkboxState";
 import { ListAction, SelectDirection } from "./selectList.actionTypes";
 import { getFirstActiveIndex, getFirstIndex, getItemIdByIndex, getItemIndexById, getLastIndex, getNextIndex, getPrevIndex, searchItemIndex, updateItemState } from "./selectList.helpers";
-const selectItem = (state, itemIndex, multiselect) => {
+const selectItem = (state, itemIndex, multiselect, disabled) => {
+    if (disabled) {
+        return Object.assign(Object.assign({}, state), { activeIndex: itemIndex, isItemsStateChanged: false, searchStr: "" });
+    }
     const itemId = getItemIdByIndex(state.itemsState, itemIndex);
     if (!itemId) {
         return Object.assign({}, state);
@@ -31,6 +34,7 @@ const toggleItems = (items, state, activeIndex, direction, multiselect, newState
 };
 // eslint-disable-next-line complexity
 export const selectListReducer = (state, action) => {
+    var _a, _b, _c, _d;
     const { type, payload } = action;
     switch (type) {
         case ListAction.ChangeItemState: {
@@ -49,10 +53,22 @@ export const selectListReducer = (state, action) => {
         case ListAction.FocusLast: return Object.assign(Object.assign({}, state), { activeIndex: getLastIndex(payload.items), isItemsStateChanged: false, searchStr: "" });
         case ListAction.FocusNext: return Object.assign(Object.assign({}, state), { activeIndex: getNextIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
         case ListAction.FocusPrev: return Object.assign(Object.assign({}, state), { activeIndex: getPrevIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
-        case ListAction.SelectFirst: return selectItem(state, getFirstIndex(payload.items), payload.multiselect);
-        case ListAction.SelectLast: return selectItem(state, getLastIndex(payload.items), payload.multiselect);
-        case ListAction.SelectNext: return selectItem(state, getNextIndex(state.activeIndex, payload.items), payload.multiselect);
-        case ListAction.SelectPrev: return selectItem(state, getPrevIndex(state.activeIndex, payload.items), payload.multiselect);
+        case ListAction.SelectFirst: {
+            const index = getFirstIndex(payload.items);
+            return selectItem(state, index, payload.multiselect, (_a = payload.items[index]) === null || _a === void 0 ? void 0 : _a.disabled);
+        }
+        case ListAction.SelectLast: {
+            const index = getLastIndex(payload.items);
+            return selectItem(state, index, payload.multiselect, (_b = payload.items[index]) === null || _b === void 0 ? void 0 : _b.disabled);
+        }
+        case ListAction.SelectNext: {
+            const index = getNextIndex(state.activeIndex, payload.items);
+            return selectItem(state, index, payload.multiselect, (_c = payload.items[index]) === null || _c === void 0 ? void 0 : _c.disabled);
+        }
+        case ListAction.SelectPrev: {
+            const index = getPrevIndex(state.activeIndex, payload.items);
+            return selectItem(state, index, payload.multiselect, (_d = payload.items[index]) === null || _d === void 0 ? void 0 : _d.disabled);
+        }
         case ListAction.SelectAllToTheBeginning: return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Up, payload.multiselect, CheckboxState.On);
         case ListAction.SelectAllToTheEnd: return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Down, payload.multiselect, CheckboxState.On);
         case ListAction.ToggleAll: return toggleItems(payload.items, state, 0, SelectDirection.Down, payload.multiselect);

package/esm/selectRaw/select.reducer.d.ts

@@ -2,9 +2,9 @@ import { TSelectAction } from "./select.actionTypes";
 import { ISelectStateRaw } from "./selectRaw";
 export declare const selectReducer: (state: ISelectStateRaw, action: TSelectAction) => {
     expanded: boolean;
-    itemsState: Map<string, import("..").CheckboxState>;
-    isItemsStateChanged: boolean;
     activeIndex: number;
+    isItemsStateChanged: boolean;
     searchStr: string;
+    itemsState: Map<string, import("..").CheckboxState>;
     level: string;
 };

package/esm/utils/localization/translations/en.json

@@ -314,5 +314,7 @@
     "Filters and search": "Filters and search",
     "Apply filter": "Apply filter",
     "This filter is currently applied.": "This filter is currently applied.",
-    "Remove filter": "Remove filter"
+    "Remove filter": "Remove filter",
+    "Exit full screen table view": "Exit full screen table view",
+    "Close search": "Close search"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.6.0",
+    "version": "3.6.1-beta.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -11,6 +11,9 @@
         "**/react-chartjs/dateAdapter.ts",
         "**/react-chartjs/dateAdapter.js"
     ],
+    "publishConfig": {
+        "access": "public"
+    },
     "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",
@@ -116,8 +119,5 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
-    },
-    "publishConfig": {
-        "access": "public"
     }
 }