@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.2

package/dist/advancedGroupsFilter/advancedGroupsFilter.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./advancedGroupsFilter.less";
-import { IFilterState } from "../groupsFilter/groupsFilterInterfaces";
+import { IFilterState } from "../groupsFilterRaw/groupsFilterInterfaces";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IDropdownItem } from "../dropdown/dropdown";
 export interface IAdvancedGroupsFilter extends IZenComponentProps {

package/dist/advancedGroupsFilter/advancedGroupsFilterForm.js

@@ -4,8 +4,8 @@ exports.TRANSLATIONS = exports.AdvancedGroupsFilterForm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const advancedGroupsFilterFormSection_1 = require("./advancedGroupsFilterFormSection");
-const groupsHelper_1 = require("../groupsFilter/groupsHelper");
-const groupsFilterInterfaces_1 = require("../groupsFilter/groupsFilterInterfaces");
+const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
+const groupsFilterInterfaces_1 = require("../groupsFilterRaw/groupsFilterInterfaces");
 const iconPlus_1 = require("../icons/iconPlus");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const AdvancedGroupsFilterForm = ({ state, onStateChange, getData, errorHandler, dataItems, tooltipText }) => {

package/dist/advancedGroupsFilter/advancedGroupsFilterFormHelper.d.ts

@@ -1,4 +1,4 @@
-import { IFilterState, RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
+import { IFilterState, RelationOperator } from "../groupsFilterRaw/groupsFilterInterfaces";
 export interface ICurrentAdvancedState {
     sectionState: IFilterState;
     interSectionRelation: RelationOperator;

package/dist/advancedGroupsFilter/advancedGroupsFilterFormHelper.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prepareToFilterState = exports.prepareCurrentFilterState = void 0;
-const groupsHelper_1 = require("../groupsFilter/groupsHelper");
-const groupsFilterInterfaces_1 = require("../groupsFilter/groupsFilterInterfaces");
+const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
+const groupsFilterInterfaces_1 = require("../groupsFilterRaw/groupsFilterInterfaces");
 const advancedGroupsFilterHelper_1 = require("./advancedGroupsFilterHelper");
 const prepareCurrentFilterState = (state) => {
     if (!state) {

package/dist/advancedGroupsFilter/advancedGroupsFilterFormSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IFilterState, RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
+import { IFilterState, RelationOperator } from "../groupsFilterRaw/groupsFilterInterfaces";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IDropdownItem } from "../dropdown/dropdown";
 export interface IAdvancedGroupsFilterFormSection extends IZenComponentProps {

package/dist/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -27,12 +27,12 @@ exports.TRANSLATIONS = exports.AdvancedGroupsFilterFormSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const groupButton_1 = require("../groupButton/groupButton");
-const groupsFilterInterfaces_1 = require("../groupsFilter/groupsFilterInterfaces");
+const groupsFilterInterfaces_1 = require("../groupsFilterRaw/groupsFilterInterfaces");
 const advancedGroupsFilterSectionTooltip_1 = require("./advancedGroupsFilterSectionTooltip");
 const dropdown_1 = require("../dropdown/dropdown");
 const comboboxSelected_1 = require("../comboboxSelected/comboboxSelected");
 const advancedGroupsFilterHelper_1 = require("./advancedGroupsFilterHelper");
-const groupsHelper_1 = require("../groupsFilter/groupsHelper");
+const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const focusableSelector_1 = require("../utils/focusableSelector");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");

package/dist/advancedGroupsFilter/advancedGroupsFilterHelper.d.ts

@@ -1,4 +1,4 @@
-import { IFilterState, ILeafStateItem, RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
+import { IFilterState, ILeafStateItem, RelationOperator } from "../groupsFilterRaw/groupsFilterInterfaces";
 import { IEntityWithId } from "../commonHelpers/entity";
 import { IDropdownItem } from "../dropdown/dropdown";
 interface ISelectedNode {
@@ -10,7 +10,7 @@ interface ISelectedNode {
 export declare const getCurrentSelectionFromIds: (items: IEntityWithId[], comboArr: IDropdownItem[]) => {
     id: string;
     name: string | undefined;
-    color: import("../groupsFilter/groupsFilterInterfaces").IColor | undefined;
+    color: import("../groupsFilterRaw/groupsFilterInterfaces").IColor | undefined;
 }[];
 export interface ISectionState {
     interSectionRelation: RelationOperator;

package/dist/advancedGroupsFilter/advancedGroupsFilterHelper.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isFilterStateLeafItem = exports.getCurrentSelectionFromIds = void 0;
-const groupsHelper_1 = require("../groupsFilter/groupsHelper");
+const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const getCurrentSelectionFromIds = (items, comboArr) => items.map((item) => {
     const currentItem = comboArr.find((comboItem) => comboItem.id === item.id);
     return currentItem ? { id: currentItem.id, name: currentItem.name, color: currentItem.color } : { id: item.id, name: item.id, color: undefined };

package/dist/banner/banner.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
+import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
 export interface IBannerAction {
     link?: string;
     target?: React.HTMLAttributeAnchorTarget;
@@ -8,7 +9,7 @@ export interface IBannerAction {
     text: string;
 }
 export type BannerType = "error" | "info" | "success" | "warning";
-export interface IBanner {
+export interface IBanner extends Partial<IZenIdComponentProps> {
     className?: string;
     children: React.ReactNode;
     header?: string;

package/dist/banner/banner.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const bannerSingleLine_1 = require("./bannerSingleLine");
 const bannerMultipLine_1 = require("./bannerMultipLine");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", primaryAction, className }) => {
+const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", primaryAction, className, id }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const isMultiline = multiline === undefined ? isMobile : multiline;
     return isMultiline ? (0, jsx_runtime_1.jsx)(bannerMultipLine_1.BannerMultiline, { children,
@@ -19,7 +19,8 @@ const Banner = ({ children, header, type = "warning", icon, action, size, onClos
         ariaAtomic,
         ariaLive,
         primaryAction,
-        className }) : (0, jsx_runtime_1.jsx)(bannerSingleLine_1.BannerSingleLine, { children,
+        className,
+        id }) : (0, jsx_runtime_1.jsx)(bannerSingleLine_1.BannerSingleLine, { children,
         header,
         type,
         size,
@@ -30,6 +31,7 @@ const Banner = ({ children, header, type = "warning", icon, action, size, onClos
         ariaAtomic,
         ariaLive,
         primaryAction,
-        className });
+        className,
+        id });
 };
 exports.Banner = Banner;

package/dist/banner/bannerMultipLine.d.ts

@@ -2,8 +2,9 @@
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";
+import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
 export type BannerType = "error" | "info" | "success" | "warning" | "upsell";
-export interface IBanner {
+export interface IBanner extends Partial<IZenIdComponentProps> {
     className?: string;
     children: React.ReactNode;
     header?: string;

package/dist/banner/bannerMultipLine.js

@@ -15,7 +15,7 @@ const button_1 = require("../button/button");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, primaryAction, className = "" }) => {
+const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, primaryAction, id, className = "" }) => {
     const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerBlockClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__block");
@@ -33,6 +33,6 @@ const BannerMultiline = ({ children, header, type = "warning", icon, action, onC
         "zen-banner__block--multiline",
         "zen-banner__block--" + size
     ]);
-    return (0, jsx_runtime_1.jsx)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__multiline-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__header-container", children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__message-container", children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { className: "zen-banner__icon-block--top-gap", type: type }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, title: text, className: (0, classNames_1.classNames)(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action zen-banner__action--multiline", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }) });
+    return (0, jsx_runtime_1.jsx)("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__multiline-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__header-container", children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__message-container", children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { className: "zen-banner__icon-block--top-gap", type: type }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, title: text, className: (0, classNames_1.classNames)(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action zen-banner__action--multiline", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }) });
 };
 exports.BannerMultiline = BannerMultiline;

package/dist/banner/bannerSingleLine.d.ts

@@ -2,8 +2,9 @@
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";
+import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
 export type BannerType = "error" | "info" | "success" | "warning" | "upsell";
-export interface IBanner {
+export interface IBanner extends Partial<IZenIdComponentProps> {
     className?: string;
     children: React.ReactNode;
     header?: string;

package/dist/banner/bannerSingleLine.js

@@ -16,7 +16,7 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = bannerUtils_1.DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className, primaryAction }) => {
+const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = bannerUtils_1.DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className, primaryAction, id }) => {
     const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
@@ -27,6 +27,6 @@ const BannerSingleLine = ({ children, header, type = "warning", icon, action, on
     const text = (0, useNodeText_1.useNodeText)(contentRef);
     const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
     const blockClassNames = (0, classNames_1.classNames)(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
+    return (0, jsx_runtime_1.jsxs)("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
 };
 exports.BannerSingleLine = BannerSingleLine;

package/dist/button/button.d.ts

@@ -1,14 +1,16 @@
 import * as React from "react";
 import { TButton, THTMLButtonType } from "./buttonType";
 import "./button.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
 import { Ref } from "react";
-export interface IButton extends IZenComponentProps {
+export interface IButton extends IZenComponentProps, IZenGridItem {
     id?: string;
+    name?: string;
     title?: string;
     type?: TButton;
     disabled?: boolean;
     onClick?: React.MouseEventHandler;
+    onBlur?: React.FocusEventHandler;
     onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
     onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -22,6 +24,6 @@ export interface IButton extends IZenComponentProps {
     ref?: Ref<HTMLButtonElement | null>;
 }
 export declare const Button: {
-    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/button/button.js

@@ -16,9 +16,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const buttonType_1 = require("./buttonType");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const filterGridProps_1 = require("../gridLayout/utils/filterGridProps");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const Button = (_a) => {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref"]);
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur"]);
     const modifierClassName = type && type !== buttonType_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
@@ -35,9 +36,9 @@ const Button = (_a) => {
         ])
     };
     if (link) {
-        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, other, { children: children }));
+        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children }));
     }
-    return (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled }, commonArgs, other, { children: children }));
+    return (0, jsx_runtime_1.jsx)("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children }));
 };
 exports.Button = Button;
 exports.Button.displayName = "Button";

package/dist/card/card.d.ts

@@ -7,11 +7,11 @@ import { IContent } from "./components/content";
 import "./card.less";
 import { TAlignment } from "../absolute/absolute";
 import { TooltipSize } from "../tooltip/tooltip";
-import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
+import { IZenComponentProps, IZenFormLayoutItem, IZenGridItem } from "../commonHelpers/zenComponent";
 import { ICardButton } from "./components/cardButton/cardButton";
 import { IIcon } from "../icons/icon";
 export declare const DEFAULT_CARD_SIZE: TContainerSize;
-export interface ICard extends IZenComponentProps, IZenGridItem {
+export interface ICard extends IZenComponentProps, IZenGridItem, IZenFormLayoutItem {
     size?: TContainerSize | IAbsoluteSize;
     /**
     * @deprecated

package/dist/card/card.js

@@ -53,6 +53,8 @@ const button_1 = require("../button/button");
 const favoriteButton_1 = require("../favoriteButton/favoriteButton");
 const getIconFromStatus_1 = require("./helpers/getIconFromStatus");
 const getIconTypeFromStatus_1 = require("./helpers/getIconTypeFromStatus");
+const isFormSection_1 = require("../formSection/utils/isFormSection");
+// import { FormSection } from "../formSection/formSection";
 exports.DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
 const Card = 
@@ -97,7 +99,7 @@ const Card =
                         acts.push(actionChildren);
                     }
                 }
-                if (el.type === exports.Card.Content) {
+                if (el.type === exports.Card.Content || (0, isFormSection_1.isFormSection)(el)) {
                     cnt.push(el);
                 }
             });

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

@@ -1,13 +1,14 @@
-import { FC } from "react";
+import { FC, HTMLAttributeAnchorTarget } from "react";
 import { IZenIdComponentProps } from "../../../commonHelpers/zenComponent";
 import { IIcon } from "../../../icons/icon";
 import "./cardButton.less";
 export interface ICardButton extends IZenIdComponentProps {
     name: string;
     icon?: FC<IIcon>;
-    link?: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
     inContextMenu?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    link?: string;
+    target?: HTMLAttributeAnchorTarget;
 }
 export declare const CardButton: FC<ICardButton>;

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

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

package/dist/checkboxListWithAction/checkboxListWithAction.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import "./checkboxListWithAction.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IColor } from "../groupsFilter/groupsFilterInterfaces";
+import { IColor } from "../groupsFilterRaw/groupsFilterInterfaces";
 export interface ICheckboxListWithActionOption {
     label: string;
     title?: string;

package/dist/comboboxSelected/comboboxSelected.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.ComboboxSelected = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const groupsHelper_1 = require("../groupsFilter/groupsHelper");
+const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const pill_1 = require("../pill/pill");

package/dist/commonHelpers/getAriaAttributes.d.ts

@@ -0,0 +1 @@
+export declare const getAriaAttributes: (props?: object) => {};

package/dist/commonHelpers/getAriaAttributes.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAriaAttributes = void 0;
+const getAriaAttributes = (props) => {
+    if (!props) {
+        return {};
+    }
+    const ariaAttributes = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (key.startsWith("aria-")) {
+            ariaAttributes[key] = value;
+        }
+    }
+    return ariaAttributes;
+};
+exports.getAriaAttributes = getAriaAttributes;

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

@@ -0,0 +1,8 @@
+import { UseControllerProps } from "react-hook-form";
+export declare const useFormField: (controller?: UseControllerProps) => {
+    field: null;
+    fieldState: null;
+} | {
+    field: import("react-hook-form").ControllerRenderProps<import("react-hook-form").FieldValues, string>;
+    fieldState: import("react-hook-form").ControllerFieldState;
+};

package/dist/commonHelpers/hooks/useFormField.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormField = void 0;
+const react_hook_form_1 = require("react-hook-form");
+const useFormField = (controller) => {
+    // TODO: how to replace it?
+    const { control: controlInner } = (0, react_hook_form_1.useForm)();
+    const { control, name, defaultValue, rules } = controller || {};
+    const nameInner = name || "";
+    const { field, fieldState } = (0, react_hook_form_1.useController)({ name: nameInner, control: control || controlInner, defaultValue, rules });
+    if (!control || !name) {
+        return {
+            field: null,
+            fieldState: null
+        };
+    }
+    return { field, fieldState };
+};
+exports.useFormField = useFormField;

package/dist/commonHelpers/hooks/useFormFieldValues/getRuleValue.d.ts

@@ -0,0 +1,2 @@
+import { ValidationRule, ValidationValueMessage } from "react-hook-form";
+export declare const getRuleValue: (rule?: ValidationRule | ValidationValueMessage) => string | number | boolean | RegExp | ValidationValueMessage<import("react-hook-form").ValidationValue> | undefined;

package/dist/commonHelpers/hooks/useFormFieldValues/getRuleValue.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRuleValue = void 0;
+const getRuleValue = (rule) => {
+    if (!rule) {
+        return undefined;
+    }
+    if (rule.value) {
+        return rule.value;
+    }
+    return rule;
+};
+exports.getRuleValue = getRuleValue;

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

@@ -0,0 +1,13 @@
+import { RegisterOptions, UseControllerProps } from "react-hook-form";
+interface IRegisterOptions extends Partial<Pick<RegisterOptions, "required" | "min" | "max" | "maxLength" | "minLength" | "value" | "onChange" | "onBlur" | "disabled">> {
+}
+export interface IRulesProps extends IRegisterOptions {
+    name?: string;
+    pattern?: RegExp | string;
+}
+interface IUseFormFieldValues extends IRegisterOptions {
+    name?: string;
+    pattern?: string;
+}
+export declare const useFormFieldValues: (controller?: UseControllerProps, props?: IRulesProps) => IUseFormFieldValues;
+export {};

package/dist/commonHelpers/hooks/useFormFieldValues/useFormFieldValues.js

@@ -0,0 +1,52 @@
+"use strict";
+// RegisterOptions:
+// required: Message | ValidationRule<boolean>;
+// min: ValidationRule<number | string>;
+// max: ValidationRule<number | string>;
+// maxLength: ValidationRule<number>;
+// minLength: ValidationRule<number>;
+// validate: Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
+// value: FieldPathValue<TFieldValues, TFieldName>;
+// setValueAs: (value: any) => any;
+// shouldUnregister?: boolean;
+// onChange?: (event: any) => void;
+// onBlur?: (event: any) => void;
+// disabled: boolean;
+// deps: FieldPath<TFieldValues> | FieldPath<TFieldValues>[];
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldValues = void 0;
+const useFormField_1 = require("../useFormField");
+const getRuleValue_1 = require("./getRuleValue");
+const useFormFieldValues = (controller, props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { field } = (0, useFormField_1.useFormField)(controller);
+    if (!field) {
+        return {
+            required: props === null || props === void 0 ? void 0 : props.required,
+            min: props === null || props === void 0 ? void 0 : props.min,
+            max: props === null || props === void 0 ? void 0 : props.max,
+            maxLength: props === null || props === void 0 ? void 0 : props.maxLength,
+            minLength: props === null || props === void 0 ? void 0 : props.minLength,
+            value: props === null || props === void 0 ? void 0 : props.value,
+            onChange: props === null || props === void 0 ? void 0 : props.onChange,
+            onBlur: props === null || props === void 0 ? void 0 : props.onBlur,
+            disabled: props === null || props === void 0 ? void 0 : props.disabled,
+            name: props === null || props === void 0 ? void 0 : props.name,
+            pattern: props === null || props === void 0 ? void 0 : props.pattern
+        };
+    }
+    return {
+        value: field.value,
+        onChange: field.onChange,
+        onBlur: field.onBlur,
+        disabled: controller === null || controller === void 0 ? void 0 : controller.disabled,
+        name: field.name,
+        required: (0, getRuleValue_1.getRuleValue)((_a = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _a === void 0 ? void 0 : _a.required),
+        min: (0, getRuleValue_1.getRuleValue)((_b = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _b === void 0 ? void 0 : _b.min),
+        max: (0, getRuleValue_1.getRuleValue)((_c = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _c === void 0 ? void 0 : _c.max),
+        maxLength: (0, getRuleValue_1.getRuleValue)((_d = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _d === void 0 ? void 0 : _d.maxLength),
+        pattern: (0, getRuleValue_1.getRuleValue)((_e = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _e === void 0 ? void 0 : _e.pattern),
+        minLength: (0, getRuleValue_1.getRuleValue)((_f = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _f === void 0 ? void 0 : _f.minLength)
+    };
+};
+exports.useFormFieldValues = useFormFieldValues;

package/dist/commonHelpers/isFormItem.d.ts

@@ -0,0 +1,2 @@
+import { IReactFormItemController } from "./zenComponent";
+export declare const isFormItem: (props: any) => props is IReactFormItemController;

package/dist/commonHelpers/isFormItem.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFormItem = void 0;
+const isFormItem = (props) => !!(props && "controller" in props);
+exports.isFormItem = isFormItem;

package/dist/commonHelpers/loading.d.ts

@@ -0,0 +1,6 @@
+export interface ILoadingBase {
+    isLoading?: boolean;
+    isError?: boolean;
+    retry?: () => void;
+}
+export declare const hasErrorProps: (props: Partial<ILoadingBase>) => boolean | undefined;

package/dist/commonHelpers/loading.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasErrorProps = void 0;
+const hasErrorProps = (props) => props.isError;
+exports.hasErrorProps = hasErrorProps;

package/dist/commonHelpers/types/exclusive.d.ts

@@ -0,0 +1,3 @@
+import { Without } from "./without";
+export type Exclusive<A, B> = (A & Without<B, A>) | (B & Without<A, B>);
+export type XOR<T extends unknown[]> = T extends [infer Head, ...infer Tail] ? Head & Without<Exclude<keyof Head, keyof Tail>, Head> & XOR<Tail> : unknown;

package/dist/commonHelpers/types/without.d.ts

@@ -0,0 +1,3 @@
+export type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};

package/dist/commonHelpers/zenComponent.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from "react";
+import { UseControllerProps } from "react-hook-form";
 export interface IZenComponentProps extends PropsWithChildren {
     className?: string;
 }
@@ -73,5 +74,21 @@ export interface IZenGridItem extends Partial<Pick<IZenIdComponentProps, "classN
         @see `gridLayout/gridLayout.tsx`
     */
     gridSm?: TMobileColumns;
+    /**
+        @param gridFitContent - If true, grid width classes won't be applied and the item will take the space according to its content.
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridFitContent?: boolean;
+}
+export interface IZenFormLayoutItem {
+    /**
+        @param position - applies the order of the item in the FormLayout. Works only for single column layout.
+    */
+    layoutPosition?: number;
+}
+export interface IReactFormItemController {
+    controller?: UseControllerProps<any, any>;
 }
 export {};

package/dist/dateInput/dateInput.d.ts

@@ -1,24 +1,10 @@
-/// <reference types="react" />
-import "./dateInput.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IChipsParent } from "../chip/chip";
-export interface IDateInput extends IZenComponentProps, IChipsParent {
-    defaultValue?: string;
-    value: string | undefined;
-    onChange: (value: string | undefined) => void;
-    className?: string;
-    classNamePopup?: string;
-    disabled?: boolean;
-    dropDownTitle?: string;
-    id?: string;
-    timeSelect?: boolean;
-    disableFutureDates?: boolean;
-    disablePastDates?: boolean;
-    disableDatesBefore?: string;
-    disableDatesAfter?: string;
-    error?: string;
-    requireSelection?: boolean;
-    buttonLabel?: string;
+import { TFormFieldComponentProps } from "../formField/formField";
+import { IDateInputRaw } from "../dateInputRaw/dateInputRaw";
+import { TDateInputRaw } from "../dateInputRaw/types";
+type TFormInput = TFormFieldComponentProps<TDateInputRaw>;
+export interface IDateInput extends IDateInputRaw {
 }
-export declare const DateInput: React.FC<IDateInput>;
+export type TDateInput = Omit<TFormFieldComponentProps<TFormInput>, "counter" | "ref">;
+export declare const DateInput: ({ ...props }: TDateInput) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
+export {};