@geotab/zenith 1.26.0 → 1.26.1-beta.0

package/README.md

@@ -40,6 +40,16 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.26.1
+
+ * Allow disabling next/submit buttons in `FormStepperButtons`
+ * Fix scrolling dropdown on mobile
+ * Make title optional in `Card`
+ * Fix point hover size in `Chart`
+ * Update the logic of selecting rows in `Table`
+ * Allow custom icon in `PillExpandable`
+ * Header toolbar updates (reduce max number of visible buttons, make "More" button to be an icon button)
+
 ### 1.26.0
 
  * Nested rows in `Table`

package/dist/card/card.d.ts

@@ -18,7 +18,7 @@ export interface ICard extends IZenComponentProps, IZenGridItem {
     * @param status - will be removed in the next major release
     */
     status?: TCardStatus;
-    title: string;
+    title?: string;
     icon?: FunctionComponent<IIcon>;
     iconType?: TIconType;
     secondary?: string;

package/dist/card/card.js

@@ -55,7 +55,9 @@ const getIconFromStatus_1 = require("./helpers/getIconFromStatus");
 const getIconTypeFromStatus_1 = require("./helpers/getIconTypeFromStatus");
 exports.DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
-const Card = (props) => {
+const Card = 
+// eslint-disable-next-line complexity
+(props) => {
     const { size, children, title, icon, iconType, secondary, status, date, tooltip, className = "", link, cardContentClasses = "", tooltipAlignment, tooltipSize, fullWidth, scrollableContent = true, autoHeight = false, fullHeight = false } = props;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
@@ -148,7 +150,9 @@ const Card = (props) => {
             titleIconType: iconType
         };
     }, [icon, iconType, status]);
-    return (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: (0, classNames_1.classNames)(["zen-card", className]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header", ref: headerRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-primary", children: [(0, jsx_runtime_1.jsx)(title_1.Title, { id: titleId, link: link, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && (0, jsx_runtime_1.jsx)(status_1.Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: menuTrigger, title: title, children: menuActions.map(action => (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({ key: action.props.id }, action.props))) })] })] }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-card__secondary", children: secondary }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: cardContentClassName, children: content })] });
+    const isHeaderPrimaryVisible = title || icon || link || !!headerActions.length || date || !!favoriteButton || !!tooltip || !!menuActions.length;
+    const isHeaderVisible = isHeaderPrimaryVisible || secondary;
+    return (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: (0, classNames_1.classNames)(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]), children: [isHeaderVisible ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header", ref: headerRef, children: [isHeaderPrimaryVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-primary", children: [title && (0, jsx_runtime_1.jsx)(title_1.Title, { id: titleId, link: link, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && (0, jsx_runtime_1.jsx)(status_1.Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: menuTrigger, title: title || translate("Actions"), children: menuActions.map(action => (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({ key: action.props.id }, action.props))) })] })] }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-card__secondary", children: secondary }) : null] }) : null, (0, jsx_runtime_1.jsx)("div", { className: cardContentClassName, children: content })] });
 };
 exports.Card = Card;
 exports.TRANSLATIONS = [

package/dist/chart/lineChart/getDefaultDatasetStyle.js

@@ -6,6 +6,7 @@ const getDatasetColor_1 = require("./getDatasetColor");
 const defaultLineOptions = {
     borderWidth: 2,
     pointRadius: 5,
+    pointHoverRadius: 7,
     pointHitRadius: 10
 };
 const getDefaultDatasetStyle = (dataSet, dsIndex) => {
@@ -20,8 +21,11 @@ const getDefaultDatasetStyle = (dataSet, dsIndex) => {
     }
     if (!dataSet.pointRadius) {
         const pointRs = Array(dataSet.data.length).fill(0);
+        const pointHoverRs = Array(dataSet.data.length).fill(lineStyle.pointRadius);
         pointRs[pointRs.length - 1] = lineStyle.pointRadius;
         newDataSet.pointRadius = pointRs;
+        pointHoverRs[pointHoverRs.length - 1] = lineStyle.pointHoverRadius;
+        newDataSet.pointHoverRadius = pointHoverRs;
         newDataSet.pointHitRadius = lineStyle.pointHitRadius;
         newDataSet.pointBackgroundColor = dataSet.pointBackgroundColor || baseColor;
     }

package/dist/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.js

@@ -72,7 +72,7 @@ class CheckboxColumnWrapper extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: (checked) => {
-                this.selectionState = checked ? SelectionState.CurrentPage : SelectionState.None;
+                this.selectionState = checked ? SelectionState.All : SelectionState.None;
                 this.fire("change-all", [checked]);
             }
         });
@@ -99,7 +99,7 @@ class CheckboxColumnWrapper extends simpleEventHandler_1.SimpleEventHandler {
         if (this.options.header === false) {
             return title;
         }
-        const cell = (0, jsx_runtime_1.jsxs)(checkboxHeaderCell_1.CheckboxHeaderCell, { label: this.options.headerTitle || "", actions: true, checked: this.state === SelectionState.CurrentPage || this.state === SelectionState.All, indeterminate: this.state === SelectionState.Partial, disabled: this.state === SelectionState.All, onChange: this.changeHandlerAll, children: [(0, jsx_runtime_1.jsx)(checkboxHeaderCell_1.CheckboxHeaderCell.Actions, { ref: this.menuTriggerRef, onClick: this.actionsClickHandler }), (0, jsx_runtime_1.jsx)(checkboxHeaderCell_1.CheckboxHeaderCell.Content, { children: title })] });
+        const cell = (0, jsx_runtime_1.jsxs)(checkboxHeaderCell_1.CheckboxHeaderCell, { label: this.options.headerTitle || "", actions: true, checked: this.state === SelectionState.CurrentPage || this.state === SelectionState.All, indeterminate: this.state === SelectionState.Partial, onChange: this.changeHandlerAll, children: [(0, jsx_runtime_1.jsx)(checkboxHeaderCell_1.CheckboxHeaderCell.Actions, { ref: this.menuTriggerRef, onClick: this.actionsClickHandler }), (0, jsx_runtime_1.jsx)(checkboxHeaderCell_1.CheckboxHeaderCell.Content, { children: title })] });
         return cell;
     }
 }

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -10,6 +10,7 @@ export interface IBulkActionsProps extends IZenComponentProps {
     selected: number;
     allSelected?: boolean;
     onClearSelection: () => void;
+    onSelectAll?: () => void;
     gridType?: DeviceType;
     children?: ReactElement<TBulkAction> | null | (ReactElement<TBulkAction> | null)[];
     /**

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -14,7 +14,8 @@ const useNonFittingElements_1 = require("../../../../header/hooks/useNonFittingE
 const useResizeObserver_1 = require("../../../../commonHelpers/hooks/useResizeObserver");
 const menu_1 = require("../../../../menu/menu");
 const iconDotVertical_1 = require("../../../../icons/iconDotVertical");
-const BulkActions = ({ selected, allSelected, className, onClearSelection, gridType = deviceType_1.DeviceType.Desktop, children }) => {
+const button_1 = require("../../../../button/button");
+const BulkActions = ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType = deviceType_1.DeviceType.Desktop, children }) => {
     var _a;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const childrenArray = (0, react_1.useMemo)(() => react_1.Children.toArray(children), [children]);
@@ -26,10 +27,12 @@ const BulkActions = ({ selected, allSelected, className, onClearSelection, gridT
     const maxWidth = (result === null || result === void 0 ? void 0 : result.contentRect.width) || 1000;
     const { visibleElements, nonFittingElements, hiddenContainerRef } = (0, useNonFittingElements_1.useNonFittingElements)({ maxWidth, data: childrenArray, hiddenElementsCountToRender: 10, widthDelta });
     const isMobile = gridType === deviceType_1.DeviceType.Mobile;
-    const text = isMobile && selected === 0
-        ? translate("Selecting...")
-        : translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-bulk-actions", className || "", isMobile ? "zen-bulk-actions--condensed" : ""]), ref: bulkActionsElement, children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-bulk-actions__button-clear", icon: iconClose_1.IconClose, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", type: "tertiary-black", title: translate("Clear selection"), "aria-label": translate("Clear selection"), onClick: onClearSelection }), (0, jsx_runtime_1.jsx)("span", { className: "zen-bulk-actions__number-of-selected ellipsis", children: text }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-bulk-actions__action-button-holder", ref: buttonHolder, children: [visibleElements, nonFittingElements.length > 0
+    const text = translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-bulk-actions", className || "", isMobile ? "zen-bulk-actions--condensed" : ""]), ref: bulkActionsElement, children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-bulk-actions__button-clear", icon: iconClose_1.IconClose, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", type: "tertiary-black", title: translate("Clear selection"), "aria-label": translate("Clear selection"), onClick: onClearSelection }), (0, jsx_runtime_1.jsx)("span", { className: "zen-bulk-actions__number-of-selected ellipsis", children: text }), onSelectAll
+                ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", className: "zen-bulk-actions__select-all", disabled: allSelected, onClick: onSelectAll, children: translate("Select all") })
+                : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-bulk-actions__action-button-holder", ref: buttonHolder, children: [react_1.Children.map(visibleElements, element => (0, react_1.cloneElement)(element, {
+                        disabled: selected > 0 || allSelected ? element.props.disabled : true
+                    })), nonFittingElements.length > 0
                         ? (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: moreButtonRef, className: "zen-bulk-actions__action-button zen-bulk-actions__action-button-more", icon: iconDotVertical_1.IconDotVertical, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", type: isMobile ? "tertiary-black" : "secondary", title: translate("More"), "aria-label": translate("More") }), children: nonFittingElements.filter(el => el.props).map(child => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: child.props.id, name: child.props.title, icon: child.props.icon, disabled: child.props.disabled, onClick: child.props.clickHandler, link: child.props.link }, child.props.id)) })
                         : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-bulk-actions__hidden-elements", ref: hiddenContainerRef, children: childrenArray })] })] });
 };

package/dist/dataGrid/withSelectableRows/withSelectableRows.js

@@ -115,6 +115,16 @@ function InnerList(props, ref) {
         });
     }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
     const onSelectListener = (0, react_1.useCallback)(([id, checked]) => {
+        if (allSelected) {
+            const newSelection = new Set(entities.map(entity => entity.id));
+            newSelection.delete(id);
+            onSelect({
+                selected: [...newSelection],
+                allSelected: false,
+                turnOffSelectAll: selection.turnOffSelectAll
+            });
+            return;
+        }
         if (checked) {
             selections.add(id);
         }
@@ -129,8 +139,12 @@ function InnerList(props, ref) {
         });
     }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
     const onSelectAll = (0, react_1.useCallback)(([checked]) => {
-        selectAll(checked);
-    }, [selectAll]);
+        onSelect({
+            selected: [],
+            allSelected: checked,
+            turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+        });
+    }, [onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
     const onTriggerClick = (0, react_1.useCallback)(() => {
         setIsOpen(!isOpen);
     }, [isOpen]);

package/dist/dropdown/dropdownPopup.js

@@ -12,20 +12,23 @@ const searchInput_1 = require("../searchInput/searchInput");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const footerButtons_1 = require("../footerButtons/footerButtons");
 const checkbox_1 = require("../checkbox/checkbox");
+const useScrollWithAndroidKeyboard_1 = require("../utils/useScrollWithAndroidKeyboard");
 const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const triggerId = (0, react_1.useId)();
+    const { handleFocus, handleBlur, wrapperClass } = (0, useScrollWithAndroidKeyboard_1.useScrollWithAndroidKeyboard)();
     const memoizedHandleHide = (0, react_1.useCallback)(() => {
         handleTriggerClick(false);
     }, [handleTriggerClick]);
-    const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-mobile-sheet__search", onChange: onInputChange, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children })] }), [checkboxLabel, children, contentRef, disabled, handleCheckboxChange, inputId, inputRef, inputValue, isChecked, onInputChange, placeholder, searchField, translate, triggerId]);
+    const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-mobile-sheet__search", onChange: onInputChange, onBlur: handleBlur, onFocus: handleFocus, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children })] }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder,
+        translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
     const memoizedMobileFooter = (0, react_1.useMemo)(() => {
         if (!isWithFooter) {
             return null;
         }
         return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
     }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, filterName, isOpenCombo, onReadyForFocus, memoizedHandleHide, memoizedMobileContent, memoizedMobileFooter, placeholder, triggerRef]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
     const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpenCombo, className: (0, classNames_1.classNames)(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "withTrigger", alignment: alignment, shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children }) }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, handleTriggerClick, isOpenCombo, placeholder, translate, triggerRef]);
     return isMobile ? memoizedMobileView : memoizedDesktopView;
 };

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -95,13 +95,14 @@ const FiltersContainer = ({ className, children, getDefaultFiltersState, ignoreN
             window.requestAnimationFrame(animateScroll);
         }
     }, []);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", `zen-filters-toolbar__filters-container--${scrollButtonType || "none"}`]), children: [scrollButtonType === "start" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__gradient", driveClassNameGradient || "", "zen-filters-toolbar__gradient--left"]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll left"), className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start"]), icon: iconChevronRight_1.IconChevronRight, iconPosition: textIconButton_1.ButtonIconPosition.Start, onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep), iconClasses: "zen-filters-toolbar__start-icon" })] }) : null, (0, jsx_runtime_1.jsx)("div", { ref: scrollableRef, className: "zen-filters-toolbar__scrollable", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__filters", children: react_1.Children.map(children, (child, index) => {
-                        if (child.props.hideInBar && !isFilterStateChanged(child.props.id, child.props.state) || (child.props.hideInBar && ignoreNewFunctionality)) {
-                            return null;
-                        }
-                        const childComponent = (0, react_1.cloneElement)(child, { useSidePanelView: false });
-                        return (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__filters-item", children: childComponent }, `filtersBarItem_${index}`);
-                    }) }) }), scrollButtonType === "end" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__gradient", driveClassNameGradient || "", "zen-filters-toolbar__gradient--right"]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll right"), className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__end"]), icon: iconChevronRight_1.IconChevronRight, onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep), iconPosition: textIconButton_1.ButtonIconPosition.End })] }) : null] });
+    const filtersForRender = react_1.Children.map(children, (child, index) => {
+        if (child.props.hideInBar && !isFilterStateChanged(child.props.id, child.props.state) || (child.props.hideInBar && ignoreNewFunctionality)) {
+            return null;
+        }
+        const childComponent = (0, react_1.cloneElement)(child, { useSidePanelView: false });
+        return (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__filters-item", children: childComponent }, `filtersBarItem_${index}`);
+    });
+    return filtersForRender.length ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", `zen-filters-toolbar__filters-container--${scrollButtonType || "none"}`]), children: [scrollButtonType === "start" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__gradient", driveClassNameGradient || "", "zen-filters-toolbar__gradient--left"]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll left"), className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start"]), icon: iconChevronRight_1.IconChevronRight, iconPosition: textIconButton_1.ButtonIconPosition.Start, onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep), iconClasses: "zen-filters-toolbar__start-icon" })] }) : null, (0, jsx_runtime_1.jsx)("div", { ref: scrollableRef, className: "zen-filters-toolbar__scrollable", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__filters", children: filtersForRender }) }), scrollButtonType === "end" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__gradient", driveClassNameGradient || "", "zen-filters-toolbar__gradient--right"]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll right"), className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__end"]), icon: iconChevronRight_1.IconChevronRight, onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep), iconPosition: textIconButton_1.ButtonIconPosition.End })] }) : null] }) : null;
 };
 exports.FiltersContainer = FiltersContainer;
 exports.TRANSLATIONS = [

package/dist/formStepperButtons/formStepperButtons.d.ts

@@ -6,5 +6,6 @@ export interface IFormStepperButtons extends Pick<IFormStepper, "current" | "set
     onCancel: () => void;
     onPrevious?: () => void;
     onContinue?: () => void;
+    isNextDisabled?: boolean;
 }
-export declare const FormStepperButtons: ({ onPrevious, onCancel, onContinue, onSubmit, current, setCurrent, steps, className }: IFormStepperButtons) => import("react/jsx-runtime").JSX.Element;
+export declare const FormStepperButtons: ({ onPrevious, onCancel, onContinue, onSubmit, current, setCurrent, steps, isNextDisabled, className }: IFormStepperButtons) => import("react/jsx-runtime").JSX.Element;

package/dist/formStepperButtons/formStepperButtons.js

@@ -7,7 +7,7 @@ const button_1 = require("../button/button");
 const iconChevronLeft_1 = require("../icons/iconChevronLeft");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, current, setCurrent, steps, className = "" }) => {
+const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, current, setCurrent, steps, isNextDisabled, className = "" }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const onPreviousHandler = (0, react_1.useCallback)(() => {
         setCurrent((prev) => {
@@ -31,6 +31,6 @@ const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, curren
     }, [onContinue, setCurrent, steps]);
     const isFirstStep = steps[0].id === current;
     const isLastStep = steps[steps.length - 1].id === current;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `zen-form-step-buttons ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-step-buttons__left", children: !isFirstStep && (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-form-step-buttons__previous", icon: iconChevronLeft_1.IconChevronLeft, type: "tertiary-black", onClick: onPreviousHandler, children: translate("Previous step") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-step-buttons__right", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-form-step-buttons__cancel", type: "secondary", onClick: onCancel, children: translate("Cancel") }), isLastStep ? ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-form-step-buttons__submit", type: "primary", onClick: onSubmit, children: translate("Submit") })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-form-step-buttons__continue", type: "primary", onClick: onContinueHandler, children: translate("Continue") }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `zen-form-step-buttons ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-step-buttons__left", children: !isFirstStep && (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-form-step-buttons__previous", icon: iconChevronLeft_1.IconChevronLeft, type: "tertiary-black", onClick: onPreviousHandler, children: translate("Previous step") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-step-buttons__right", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-form-step-buttons__cancel", type: "secondary", onClick: onCancel, children: translate("Cancel") }), isLastStep ? ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__submit", type: "primary", onClick: onSubmit, children: translate("Submit") })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__continue", type: "primary", onClick: onContinueHandler, children: translate("Continue") }))] })] }));
 };
 exports.FormStepperButtons = FormStepperButtons;

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -12,8 +12,6 @@ const headerButton_1 = require("../../headerButton");
 const headerMenu_1 = require("../../headerMenu");
 const headerHelpers_1 = require("../../headerHelpers");
 const iconDotVertical_1 = require("../../../icons/iconDotVertical");
-const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
-const iconChevronDownSmall_1 = require("../../../icons/iconChevronDownSmall");
 const useDrive_1 = require("../../../utils/theme/useDrive");
 const handleCustomMenuWrapper_1 = require("./utils/handleCustomMenuWrapper");
 exports.HeaderCustomContent = (0, react_1.createContext)({
@@ -25,9 +23,8 @@ exports.HeaderCustomContentProvider = HeaderCustomContentProvider;
 const PageToolbarCollapsedItemsControl = ({ children }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
-    const isMobile = (0, useMobile_1.useMobile)();
     const { content } = (0, react_1.useContext)(exports.HeaderCustomContent);
-    const adjustmentButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-header-more-button", title: translate("More"), type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.End, iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: isMobile ? iconDotVertical_1.IconDotVertical : iconChevronDownSmall_1.IconChevronDownSmall, children: isMobile ? null : translate("More") }), [isDrive, isMobile, translate]);
+    const adjustmentButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { "aria-label": translate("More"), className: "zen-header-more-button", type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.End, iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: iconDotVertical_1.IconDotVertical }), [isDrive, translate]);
     const items = [];
     const clickHandler = (0, react_1.useCallback)((propsOnClick) => ((_, e) => { propsOnClick(e); }), []);
     react_1.Children.forEach(children, (child) => {

package/dist/header/header.js

@@ -142,7 +142,7 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
     const maxWidth = middleWidth || ((_b = toolbarRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
     const actionCount = (0, react_1.useMemo)(() => {
         if (!isMobile) {
-            return 4;
+            return 2;
         }
         if (memoizedFiltersBar && !searchComponent) {
             return 1;

package/dist/index.css

@@ -3142,6 +3142,9 @@
     max-width: 100%;
   }
 }
+.zen-side-panel--shown-keyboard.zen-side-panel--bottom-positioned {
+  top: 0;
+}
 .zen-side-panel-cell {
   box-sizing: border-box;
   padding: 16px;
@@ -3285,6 +3288,10 @@
   flex: 1 1 auto;
   overflow-y: auto;
 }
+.zen-mobile-sheet--mobile-android {
+  overflow-y: hidden;
+  position: fixed;
+}
 .zen-mobile-sheet-wrapper--drive.zen-mobile-sheet-wrapper--drive,
 .zen-mobile-sheet-wrapper--drive-tablet.zen-mobile-sheet-wrapper--drive-tablet {
   max-width: 520px;
@@ -6288,6 +6295,9 @@
   display: flex;
   justify-content: flex-end;
 }
+.zen-card--no-header {
+  grid-template-rows: 1fr;
+}
 .zen-menu-button {
   box-sizing: border-box;
   width: 100%;
@@ -6354,7 +6364,6 @@
 .zen-menu-button__action-text {
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 90%;
   white-space: nowrap;
   margin-left: 0;
   margin-right: auto;
@@ -7563,7 +7572,7 @@ button.zen-summary__clickable {
 }
 .zen-feed-item__values {
   display: grid;
-  grid-template-columns: minmax(104px, auto) 1fr;
+  grid-template-columns: minmax(104px, 104px) 1fr;
   align-items: baseline;
   gap: 4px;
   overflow-wrap: break-word;
@@ -7650,7 +7659,7 @@ button.zen-summary__clickable {
   display: flex;
   align-items: center;
 }
-.zen-checkbox-column--no-checkbox .zen-checkbox-column__checkbox-input {
+.zen-checkbox-column--no-checkbox .zen-checkbox-column__checkbox {
   display: none;
 }
 .zen-main-column,
@@ -7814,7 +7823,7 @@ button.zen-summary__clickable {
   display: flex;
   align-items: center;
 }
-.zen-selectable-column--no-checkbox .zen-checkbox-column__checkbox-input {
+.zen-selectable-column--no-checkbox .zen-checkbox-column__checkbox {
   visibility: hidden;
 }
 .zen-sortable-column {
@@ -8134,8 +8143,6 @@ button.zen-summary__clickable {
   line-height: 16px;
   text-transform: none;
   flex: 0 1 auto;
-  margin-left: 4px;
-  margin-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9332,7 +9339,7 @@ button.zen-summary__clickable {
 .zen-filters-toolbar {
   box-sizing: border-box;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   height: 56px;
   align-items: center;
   border-bottom: 1px solid var(--borders-general);
@@ -12769,27 +12776,10 @@ button.zen-summary__clickable {
   background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--borders-general) 40%, transparent) 10%, var(--borders-general) 50%, color-mix(in srgb, var(--borders-general) 40%, transparent) 90%, transparent 100%);
   border: none;
 }
-.zen-nav-header {
-  box-sizing: border-box;
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  align-items: center;
-}
-.zen-nav-header__actions-icon {
-  border-radius: 50%;
-}
-.zen-nav-header__actions {
+.nav-footer-action {
   display: flex;
   flex-direction: column;
 }
-.zen-nav-header__action {
-  display: flex;
-}
-.zen-nav-header--collapsed {
-  align-items: center;
-  flex-direction: column;
-}
 .zen-nav-item {
   box-sizing: border-box;
   width: 100%;
@@ -12926,6 +12916,27 @@ button.zen-summary__clickable {
   border: 1px solid var(--backgrounds-content-0);
   border-radius: 50%;
 }
+.zen-nav-header {
+  box-sizing: border-box;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  align-items: center;
+}
+.zen-nav-header__actions-icon {
+  border-radius: 50%;
+}
+.zen-nav-header__actions {
+  display: flex;
+  flex-direction: column;
+}
+.zen-nav-header__action {
+  display: flex;
+}
+.zen-nav-header--collapsed {
+  align-items: center;
+  flex-direction: column;
+}
 .zen-push {
   box-sizing: border-box;
   font-family: var(--main-font);

package/dist/inputAdornments/inputAdornments.d.ts

@@ -7,6 +7,8 @@ export interface IInputAdornments {
     disabled?: boolean;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
     endAdornment?: ReactNode;
     startAdornment?: ReactNode;
     placeholder?: string;

package/dist/inputAdornments/inputAdornments.js

@@ -30,7 +30,7 @@ const react_1 = 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", autoFocus }, ref) => {
+exports.InputAdornments = React.forwardRef(({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, onBlur, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus }, ref) => {
     const disabledClassName = disabled ? "zen-input-adornments--disabled" : "";
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-input-adornments");
     const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
@@ -45,6 +45,6 @@ exports.InputAdornments = React.forwardRef(({ id, value, className = "", disable
         !value ? "zen-input-adornments__wrapper--empty" : "",
         className
     ]), [className, endAdornment, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, 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: wrapperClasses, 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 }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, 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: wrapperClasses, 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, onBlur: onBlur, onFocus: onFocus, 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/lineChart/utils.js

@@ -5,11 +5,13 @@ const colorUtils_1 = require("../commonHelpers/colorUtils");
 const defaultLineOptions = {
     borderWidth: 2,
     pointRadius: 5,
+    pointHoverRadius: 7,
     pointHitRadius: 10
 };
 const defaultThinLineOptions = {
     borderWidth: 1,
     pointRadius: 3,
+    pointHoverRadius: 5,
     pointHitRadius: 6
 };
 const baseColors = [
@@ -32,8 +34,11 @@ const getDefaultDatasetStyle = (dataSet, dsIndex, useThinLines = false) => {
     }
     if (!dataSet.pointRadius) {
         const poinRs = Array(dataSet.data.length).fill(0);
+        const pointHoverRs = Array(dataSet.data.length).fill(lineStyle.pointRadius);
         poinRs[poinRs.length - 1] = lineStyle.pointRadius;
         newDataSet.pointRadius = poinRs;
+        pointHoverRs[pointHoverRs.length - 1] = lineStyle.pointHoverRadius;
+        newDataSet.pointHoverRadius = pointHoverRs;
         newDataSet.pointHitRadius = lineStyle.pointHitRadius;
         newDataSet.pointBackgroundColor = dataSet.pointBackgroundColor || baseColor;
     }

package/dist/menu/menu.d.ts

@@ -10,6 +10,7 @@ export interface IMenu extends Pick<IZenComponentProps, "children"> {
     alignment?: TAlignment;
     ariaLabel?: string;
     ariaLabelledBy?: string;
+    className?: string;
 }
 export declare const Menu: FC<IMenu> & {
     Item: FC<IMenuItem>;

package/dist/menu/menu.js

@@ -6,10 +6,11 @@ const react_1 = require("react");
 const controlledMenu_1 = require("./controlledMenu");
 const menuItem_1 = require("./components/menuItem");
 const menuSeparator_1 = require("./components/menuSeparator");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const Menu = 
 // eslint-disable-next-line react/prop-types
-({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-left" }) => {
+({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-left", className }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const innerRef = (0, react_1.useRef)(null);
     const shouldRenderTrigger = !!trigger;
@@ -30,7 +31,7 @@ const Menu =
         }
     }, [triggerRef, isOpen, shouldRenderTrigger]);
     const triggerComp = shouldRenderTrigger ? renderTrigger() : null;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerComp, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { alignment: alignment, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || (triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props.id), isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: ref, title: title, className: "zen-menu", children: children })] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerComp, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { alignment: alignment, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || (triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props.id), isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: ref, title: title, className: (0, classNames_1.classNames)(["zen-menu", className || ""]), children: children })] });
 };
 exports.Menu = Menu;
 exports.Menu.Item = menuItem_1.MenuItem;

package/dist/mobileSheet/mobileSheet.d.ts

@@ -18,6 +18,7 @@ export interface IMobileSheet extends IZenComponentProps, Pick<ISidePanel, "trig
     */
     translate?: (s: string) => string;
     onReadyForFocus?: (currentIsOpen: boolean) => void;
+    wrapperClassName?: string;
 }
 export declare const MobileSheet: FC<IMobileSheet> & {
     Footer: FC<IMobileSheetFooter>;

package/dist/mobileSheet/mobileSheet.js

@@ -22,7 +22,7 @@ const useFadeComponent_1 = require("../utils/useFadeComponent");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const MobileSheet = 
 // eslint-disable-next-line react/prop-types
-({ triggerRef, label, isOpen, onHidePanel, className = "", panelPosition = "bottom", onBackClick, onCloseClick, isBackVisible, backButtonAriaLabel, children, useTrapFocusWithTrigger, onReadyForFocus }) => {
+({ triggerRef, label, isOpen, onHidePanel, className = "", panelPosition = "bottom", onBackClick, onCloseClick, isBackVisible, backButtonAriaLabel, children, useTrapFocusWithTrigger, onReadyForFocus, wrapperClassName }) => {
     var _a, _b;
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = (0, useFadeComponent_1.useFadeComponent)(isOpen, onReadyForFocus);
     const dataShieldId = (0, useUniqueId_1.useUniqueId)();
@@ -78,7 +78,7 @@ const MobileSheet =
     if (!renderComponent && !isOpen) {
         return null;
     }
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, { className: "zen-mobile-sheet-shield", dataShieldId: dataShieldId, isVisible: showContent }), (0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, { className: (0, classNames_1.classNames)(["zen-mobile-sheet-wrapper", driveWrapperMobileSheetClassName || ""]), panelPosition: panelPosition, triggerRef: triggerRef, label: label, isOpen: showContent, useTrapFocusWithTrigger: useTrapFocusWithTrigger, onHidePanel: onHidePanelAction, onTransitionEnd: handleTransitionEnd, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet", className]), ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet__title", driveTitleClassName || ""]), children: [isBackVisible ?
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, { className: "zen-mobile-sheet-shield", dataShieldId: dataShieldId, isVisible: showContent }), (0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, { className: (0, classNames_1.classNames)(["zen-mobile-sheet-wrapper", wrapperClassName || "", driveWrapperMobileSheetClassName || ""]), panelPosition: panelPosition, triggerRef: triggerRef, label: label, isOpen: showContent, useTrapFocusWithTrigger: useTrapFocusWithTrigger, onHidePanel: onHidePanelAction, onTransitionEnd: handleTransitionEnd, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet", className]), ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet__title", driveTitleClassName || ""]), children: [isBackVisible ?
                                     (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { onClick: (e) => {
                                             e.stopPropagation();
                                             onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();

package/dist/nav/navFooter/navFooterAction/navFooterAction.d.ts

@@ -0,0 +1,13 @@
+import "./navFooterAction.less";
+interface INavFooterActionLink {
+    title: string;
+    link: string;
+}
+interface INavFooterActionProps {
+    title: string;
+    links: INavFooterActionLink[];
+}
+export declare const NavFooterAction: (({ links, title }: INavFooterActionProps) => import("react/jsx-runtime").JSX.Element) & {
+    translations: string[];
+};
+export {};

package/dist/nav/navFooter/navFooterAction/navFooterAction.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavFooterAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useLanguage_1 = require("../../../utils/localization/useLanguage");
+const navItem_1 = require("../../navItem/navItem");
+const react_1 = require("react");
+const controlledMenu_1 = require("../../../menu/controlledMenu");
+const iconSettings4_1 = require("../../../icons/iconSettings4");
+const NavFooterActionInner = ({ links, title }) => {
+    const triggerRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const handlerTriggerClick = (0, react_1.useCallback)(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+    const handleStateChange = (0, react_1.useCallback)(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const menuItems = (0, react_1.useMemo)(() => links.map(link => {
+        const itemId = `${link.title}${link.link}`;
+        return (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu.Item, { name: link.title, link: link.link, id: itemId }, itemId);
+    }), [links]);
+    if (links.length === 0) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(navItem_1.NavItem, { active: isOpen, primaryIcon: iconSettings4_1.IconSettings4, hasSubmenu: true, ref: triggerRef, onClick: handlerTriggerClick, title: translate("Configure") }), (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { setIsOpen: handleStateChange, title: title, triggerRef: triggerRef, className: "nav-footer-action", isOpen: isOpen, alignment: "right-bottom", children: menuItems })] });
+};
+exports.NavFooterAction = Object.assign(NavFooterActionInner, { translations: [
+        "Configure"
+    ] });

package/dist/nav/navItem/navItem.d.ts

@@ -19,5 +19,5 @@ interface ILinkNavItem extends INavItemCommon {
 interface IButtonNavItem extends INavItemCommon {
     onClick: () => void;
 }
-export declare const NavItem: FC<ILinkNavItem | IButtonNavItem>;
+export declare const NavItem: import("react").ForwardRefExoticComponent<(ILinkNavItem | IButtonNavItem) & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export {};