@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/esm/advancedGroupsFilter/advancedGroupsFilterFormHelper.js

@@ -1,5 +1,5 @@
-import { DEFAULT_RELATION_OPERATOR, getDefaultFilterState, isEntireOrganization, simplifyFilterState, toFilterState } from "../groupsFilter/groupsHelper";
-import { RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
+import { DEFAULT_RELATION_OPERATOR, getDefaultFilterState, isEntireOrganization, simplifyFilterState, toFilterState } from "../groupsFilterRaw/groupsHelper";
+import { RelationOperator } from "../groupsFilterRaw/groupsFilterInterfaces";
 import { isFilterStateLeafItem } from "./advancedGroupsFilterHelper";
 export const prepareCurrentFilterState = (state) => {
     if (!state) {

package/esm/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/esm/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useRef } from "react";
 import { GroupButton } from "../groupButton/groupButton";
-import { RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
+import { RelationOperator } from "../groupsFilterRaw/groupsFilterInterfaces";
 import { AdvancedGroupsFilterSectionTooltip, TRANSLATIONS as AdvancedGroupsFilterSectionTooltipTranslations } from "./advancedGroupsFilterSectionTooltip";
 import { Dropdown, TRANSLATIONS as DropdownTranslations } from "../dropdown/dropdown";
 import { ComboboxSelected, TRANSLATIONS as ComboboxSelectedTranslations } from "../comboboxSelected/comboboxSelected";
 import { getCurrentSelectionFromIds } from "./advancedGroupsFilterHelper";
-import { ENTIRE_ORGANIZATION_GROUP_ID } from "../groupsFilter/groupsHelper";
+import { ENTIRE_ORGANIZATION_GROUP_ID } from "../groupsFilterRaw/groupsHelper";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { useMobile } from "../commonHelpers/hooks/useMobile";

package/esm/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/esm/advancedGroupsFilter/advancedGroupsFilterHelper.js

@@ -1,4 +1,4 @@
-import { isFilterState } from "../groupsFilter/groupsHelper";
+import { isFilterState } from "../groupsFilterRaw/groupsHelper";
 export 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/esm/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/esm/banner/banner.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { BannerSingleLine } from "./bannerSingleLine";
 import { BannerMultiline } from "./bannerMultipLine";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
-export const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", primaryAction, className }) => {
+export const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", primaryAction, className, id }) => {
     const isMobile = useMobile();
     const isMultiline = multiline === undefined ? isMobile : multiline;
     return isMultiline ? _jsx(BannerMultiline, { children,
@@ -16,7 +16,8 @@ export const Banner = ({ children, header, type = "warning", icon, action, size,
         ariaAtomic,
         ariaLive,
         primaryAction,
-        className }) : _jsx(BannerSingleLine, { children,
+        className,
+        id }) : _jsx(BannerSingleLine, { children,
         header,
         type,
         size,
@@ -27,5 +28,6 @@ export const Banner = ({ children, header, type = "warning", icon, action, size,
         ariaAtomic,
         ariaLive,
         primaryAction,
-        className });
+        className,
+        id });
 };

package/esm/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/esm/banner/bannerMultipLine.js

@@ -9,7 +9,7 @@ import { Button } from "../button/button";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useRef } from "react";
 import { useNodeText } from "../utils/useNodeText";
-export const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = DEFAULT_BANNER_SIZE, primaryAction, className = "" }) => {
+export const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = DEFAULT_BANNER_SIZE, primaryAction, id, className = "" }) => {
     const bannerOptions = getBannerOptions(type);
     const { translate } = useLanguage();
     const bannerBlockClassName = useDriveClassName("zen-banner__block");
@@ -27,5 +27,5 @@ export const BannerMultiline = ({ children, header, type = "warning", icon, acti
         "zen-banner__block--multiline",
         "zen-banner__block--" + size
     ]);
-    return _jsx("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: _jsxs("div", { className: classNames(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && _jsxs("div", { className: "zen-banner__multiline-container", children: [_jsxs("div", { className: "zen-banner__header-container", children: [icon && header && _jsx(TypeIcon, { type: type }), header && _jsx("div", { className: classNames(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && _jsx("button", { type: "button", className: classNames(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), _jsxs("div", { className: "zen-banner__message-container", children: [icon && !header && _jsx(TypeIcon, { className: "zen-banner__icon-block--top-gap", type: type }), _jsx("div", { ref: contentRef, title: text, className: classNames(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && _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: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (action || primaryAction) && _jsxs("div", { className: "zen-banner__action zen-banner__action--multiline", children: [action && _jsx(Button, { className: linkClasses, type: ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && _jsx(Button, { className: linkClasses, type: ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }) });
+    return _jsx("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: _jsxs("div", { className: classNames(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && _jsxs("div", { className: "zen-banner__multiline-container", children: [_jsxs("div", { className: "zen-banner__header-container", children: [icon && header && _jsx(TypeIcon, { type: type }), header && _jsx("div", { className: classNames(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && _jsx("button", { type: "button", className: classNames(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), _jsxs("div", { className: "zen-banner__message-container", children: [icon && !header && _jsx(TypeIcon, { className: "zen-banner__icon-block--top-gap", type: type }), _jsx("div", { ref: contentRef, title: text, className: classNames(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && _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: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (action || primaryAction) && _jsxs("div", { className: "zen-banner__action zen-banner__action--multiline", children: [action && _jsx(Button, { className: linkClasses, type: ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && _jsx(Button, { className: linkClasses, type: ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }) });
 };

package/esm/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/esm/banner/bannerSingleLine.js

@@ -10,7 +10,7 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { useRef } from "react";
 import { useNodeText } from "../utils/useNodeText";
-export const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className, primaryAction }) => {
+export const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className, primaryAction, id }) => {
     const bannerOptions = getBannerOptions(type);
     const { translate } = useLanguage();
     const bannerHeaderClassName = useDriveClassName("zen-banner__header");
@@ -21,5 +21,5 @@ export const BannerSingleLine = ({ children, header, type = "warning", icon, act
     const text = useNodeText(contentRef);
     const linkClasses = classNames(["zen-banner__link", "zen-banner__link--" + type]);
     const blockClassNames = classNames(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
-    return _jsxs("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [_jsxs("div", { className: classNames(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && _jsx(TypeIcon, { type: type }), header && _jsx("div", { className: classNames(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), _jsx("div", { className: classNames(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), (action || primaryAction) && _jsxs("div", { className: "zen-banner__action", children: [action && _jsx(Button, { className: linkClasses, type: ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && _jsx(Button, { className: linkClasses, type: ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }), onClose && _jsx("button", { type: "button", className: classNames(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
+    return _jsxs("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [_jsxs("div", { className: classNames(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && _jsx(TypeIcon, { type: type }), header && _jsx("div", { className: classNames(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), _jsx("div", { className: classNames(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), (action || primaryAction) && _jsxs("div", { className: "zen-banner__action", children: [action && _jsx(Button, { className: linkClasses, type: ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && _jsx(Button, { className: linkClasses, type: ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }), onClose && _jsx("button", { type: "button", className: classNames(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
 };

package/esm/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/esm/button/button.js

@@ -13,9 +13,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonType } from "./buttonType";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { filterGridProps } from "../gridLayout/utils/filterGridProps";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export 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.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = useDriveClassName("zen-button");
@@ -32,8 +33,8 @@ export const Button = (_a) => {
         ])
     };
     if (link) {
-        return _jsx("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, other, { children: children }));
+        return _jsx("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, filterGridProps(other), { children: children }));
     }
-    return _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 _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, filterGridProps(other), { children: children }));
 };
 Button.displayName = "Button";

package/esm/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/esm/card/card.js

@@ -27,6 +27,8 @@ import { Button } from "../button/button";
 import { FavoriteButton } from "../favoriteButton/favoriteButton";
 import { getIconFromStatus } from "./helpers/getIconFromStatus";
 import { getIconTypeFromStatus } from "./helpers/getIconTypeFromStatus";
+import { isFormSection } from "../formSection/utils/isFormSection";
+// import { FormSection } from "../formSection/formSection";
 export const DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
 export const Card = 
@@ -71,7 +73,7 @@ export const Card =
                         acts.push(actionChildren);
                     }
                 }
-                if (el.type === Card.Content) {
+                if (el.type === Card.Content || isFormSection(el)) {
                     cnt.push(el);
                 }
             });

package/esm/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/esm/card/components/cardButton/cardButton.js

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

package/esm/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/esm/comboboxSelected/comboboxSelected.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ENTIRE_ORGANIZATION_GROUP_ID } from "../groupsFilter/groupsHelper";
+import { ENTIRE_ORGANIZATION_GROUP_ID } from "../groupsFilterRaw/groupsHelper";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { Pill } from "../pill/pill";

package/esm/commonHelpers/getAriaAttributes.d.ts

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

package/esm/commonHelpers/getAriaAttributes.js

@@ -0,0 +1,12 @@
+export 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;
+};

package/esm/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/esm/commonHelpers/hooks/useFormField.js

@@ -0,0 +1,15 @@
+import { useController, useForm } from "react-hook-form";
+export const useFormField = (controller) => {
+    // TODO: how to replace it?
+    const { control: controlInner } = useForm();
+    const { control, name, defaultValue, rules } = controller || {};
+    const nameInner = name || "";
+    const { field, fieldState } = useController({ name: nameInner, control: control || controlInner, defaultValue, rules });
+    if (!control || !name) {
+        return {
+            field: null,
+            fieldState: null
+        };
+    }
+    return { field, fieldState };
+};

package/esm/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/esm/commonHelpers/hooks/useFormFieldValues/getRuleValue.js

@@ -0,0 +1,9 @@
+export const getRuleValue = (rule) => {
+    if (!rule) {
+        return undefined;
+    }
+    if (rule.value) {
+        return rule.value;
+    }
+    return rule;
+};

package/esm/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/esm/commonHelpers/hooks/useFormFieldValues/useFormFieldValues.js

@@ -0,0 +1,48 @@
+// 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>[];
+import { useFormField } from "../useFormField";
+import { getRuleValue } from "./getRuleValue";
+export const useFormFieldValues = (controller, props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { field } = 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: getRuleValue((_a = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _a === void 0 ? void 0 : _a.required),
+        min: getRuleValue((_b = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _b === void 0 ? void 0 : _b.min),
+        max: getRuleValue((_c = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _c === void 0 ? void 0 : _c.max),
+        maxLength: getRuleValue((_d = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _d === void 0 ? void 0 : _d.maxLength),
+        pattern: getRuleValue((_e = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _e === void 0 ? void 0 : _e.pattern),
+        minLength: getRuleValue((_f = controller === null || controller === void 0 ? void 0 : controller.rules) === null || _f === void 0 ? void 0 : _f.minLength)
+    };
+};

package/esm/commonHelpers/isFormItem.d.ts

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

package/esm/commonHelpers/isFormItem.js

@@ -0,0 +1 @@
+export const isFormItem = (props) => !!(props && "controller" in props);

package/esm/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/esm/commonHelpers/loading.js

@@ -0,0 +1 @@
+export const hasErrorProps = (props) => props.isError;

package/esm/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/esm/commonHelpers/types/without.d.ts

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

package/esm/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/esm/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 {};