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

package/esm/formLayout/utils/getComponentsWithClasses.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TFormLayoutColumns } from "../types";
+export declare const getComponentsWithClasses: (components: React.ReactElement[], columns: TFormLayoutColumns) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/esm/formLayout/utils/getComponentsWithClasses.js

@@ -0,0 +1,23 @@
+import { isStaticElement } from "./isStaticElement";
+import { applyGridPropsOneColumn } from "./applyGridPropsOneColumn";
+import { applyGridPropsTwoColumns } from "./applyGridPropsTwoColumns/applyGridPropsTwoColumns";
+import { applyGridPropsStatic } from "./applyGridPropsStatic";
+export const getComponentsWithClasses = (components, columns) => {
+    let nonStaticIndex = 0;
+    const result = [];
+    components.forEach((child, indx) => {
+        if (isStaticElement(child)) {
+            applyGridPropsStatic(child, indx, columns, result);
+            return;
+        }
+        if (columns === 1) {
+            applyGridPropsOneColumn(child, indx, result);
+            nonStaticIndex++;
+            return;
+        }
+        applyGridPropsTwoColumns(child, indx, result, nonStaticIndex);
+        nonStaticIndex++;
+        return;
+    });
+    return result;
+};

package/esm/formLayout/utils/getFilteredComponents.d.ts

@@ -0,0 +1,4 @@
+import { JSXElementConstructor, ReactElement } from "react";
+import { IZenFormLayoutItem, IZenGridItem } from "../../commonHelpers/zenComponent";
+export declare const DEFAULT_SUPPORTED_COMPONENTS: JSXElementConstructor<unknown>[];
+export declare const getFilteredComponents: (child: ReactElement) => ReactElement<IZenGridItem & IZenFormLayoutItem> | null;

package/esm/formLayout/utils/getFilteredComponents.js

@@ -0,0 +1,21 @@
+import { Banner } from "../../banner/banner";
+import { isCustomFormSection } from "./isCustomFormSection";
+import { FormSection } from "../../formSection/formSection";
+import { LayoutColumn } from "../components/layoutColumn/layoutColum";
+import { FormLayoutColumnTitle } from "../components/columnTitle/formLayoutColumnTitle";
+export const DEFAULT_SUPPORTED_COMPONENTS = [
+    Banner,
+    FormSection,
+    LayoutColumn,
+    FormLayoutColumnTitle
+];
+export const getFilteredComponents = (child) => {
+    // for React common components ("div", "span", etc.)
+    if (typeof child.type === "string") {
+        return null;
+    }
+    if (DEFAULT_SUPPORTED_COMPONENTS.includes(child.type) || isCustomFormSection(child)) {
+        return child;
+    }
+    return null;
+};

package/esm/formLayout/utils/getFormSection.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const getFormSection: (child: React.ReactElement) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/esm/formLayout/utils/getFormSection.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { FormSection } from "../../formSection/formSection";
+import { FormSectionInner } from "../../formSection/components/formSectionInner";
+export const getFormSection = (child) => {
+    if (child.type === FormSectionInner || child.type === FormSection) {
+        // TODO:  support only one column. Do we need to support two columns?
+        const clone = React.cloneElement(child, {
+            gridLgStart: 3,
+            gridLg: 8,
+            gridMdStart: 2,
+            gridMd: 6,
+            gridSmStart: 1,
+            gridSm: 4
+        });
+        return clone;
+    }
+    return null;
+};

package/esm/formLayout/utils/hasStepper.d.ts

@@ -0,0 +1,2 @@
+import { IFormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+export declare const hasStepper: (props: Partial<IFormStepperButtons>) => boolean;

package/esm/formLayout/utils/hasStepper.js

@@ -0,0 +1 @@
+export const hasStepper = (props) => props.steps !== undefined && props.current !== undefined && !!props.setCurrent && !!props.onCancel && !!props.onSubmit;

package/esm/formLayout/utils/isCustomFormSection.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+export declare const CUSTOM_FORM_SECTION = "CustomFormSection";
+export declare const isCustomFormSection: (el: ReactElement) => boolean;

package/esm/formLayout/utils/isCustomFormSection.js

@@ -0,0 +1,2 @@
+export const CUSTOM_FORM_SECTION = "CustomFormSection";
+export const isCustomFormSection = (el) => typeof el.type === "function" && "displayName" in el.type && el.type.displayName === CUSTOM_FORM_SECTION;

package/esm/formLayout/utils/isStaticElement.d.ts

@@ -0,0 +1 @@
+export declare const isStaticElement: (element: React.ReactElement) => boolean;

package/esm/formLayout/utils/isStaticElement.js

@@ -0,0 +1,15 @@
+import { Banner } from "../../banner/banner";
+import { FormSection } from "../../formSection/formSection";
+import { FormStepper } from "../../formStepper/formStepper";
+import { FormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+import { FormLayoutSecondary } from "../components/formLayoutSecondary";
+import { FormLayoutTitle } from "../components/formLayoutTitle";
+export const isStaticElement = (element) => {
+    if (element.type === FormSection && element.props.type === "modal") {
+        return true;
+    }
+    if (element.type === FormStepper || element.type === FormStepperButtons || element.type === Banner || element.type === FormLayoutTitle || element.type === FormLayoutSecondary) {
+        return true;
+    }
+    return false;
+};

package/esm/formSection/components/actions.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { IActions } from "../../card/components/actions";
+export interface IFormSectionActions extends IActions {
+}
+export declare const FormSectionActions: FC<IFormSectionActions>;

package/esm/formSection/components/actions.js

@@ -0,0 +1 @@
+export const FormSectionActions = ({ children }) => children;

package/esm/formSection/components/additional.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { IAdditionalSectionProps } from "./additionalSection";
+export interface IFormSectionAdditional extends IAdditionalSectionProps {
+}
+export declare const FormSectionAdditional: FC<IFormSectionAdditional>;

package/esm/formSection/components/additional.js

@@ -0,0 +1 @@
+export const FormSectionAdditional = ({ children }) => children;

package/esm/formSection/components/additionalSection.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import "./additionalSection.less";
+export interface IAdditionalSectionProps extends IZenComponentProps {
+    title: string;
+    titleOn?: string;
+    secondary?: string;
+}
+export declare const AdditionalSection: FC<IAdditionalSectionProps>;

package/esm/formSection/components/additionalSection.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useState } from "react";
+import { Accordion } from "../../accordion/accordion";
+import { FormSectionInner } from "./formSectionInner";
+import { useLabelAlign } from "../../formGroup/hooks/useLabelAlign";
+import { useMode } from "../../formGroup/hooks/useMode";
+export const AdditionalSection = ({ children, className, title, titleOn, secondary }) => {
+    const [opened, setOpened] = useState([]);
+    const labelAlign = useLabelAlign();
+    const id = useId();
+    const currentTitle = opened.includes(id) ? (titleOn || title) : title;
+    const mode = useMode();
+    const accordionItems = useMemo(() => [
+        {
+            id,
+            title: currentTitle,
+            content: _jsxs(_Fragment, { children: [secondary && _jsx("div", { className: "zen-additional-sub-section__secondary", children: secondary }), _jsx(FormSectionInner, { className: "zen-additional-sub-section__content", mode: mode, labelAlign: labelAlign, children: children })] })
+        }
+    ], [id, currentTitle, secondary, labelAlign, children, mode]);
+    const switchAccordion = useCallback((itemId) => {
+        if (itemId === opened[0]) {
+            setOpened([]);
+            return;
+        }
+        setOpened([itemId]);
+    }, [opened, setOpened]);
+    return (_jsx(Accordion, { className: `zen-additional-sub-section ${className || ""}`, activeIds: opened, onItemClick: switchAccordion, data: accordionItems }));
+};

package/esm/formSection/components/formSectionButton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { ICardButton } from "../../card/components/cardButton/cardButton";
+export interface IFormSectionButton extends ICardButton {
+}
+export declare const FormSectionButton: FC<IFormSectionButton>;

package/esm/formSection/components/formSectionButton.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardButton } from "../../card/components/cardButton/cardButton";
+export const FormSectionButton = (_a) => {
+    var props = __rest(_a, []);
+    return _jsx(CardButton, Object.assign({}, props));
+};

package/esm/formSection/components/formSectionCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { IFormSectionCard } from "../types";
+import "./formSectionCard.less";
+export declare const FormSectionCard: FC<Omit<IFormSectionCard, "type">>;

package/esm/formSection/components/formSectionCard.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children } from "react";
+import { Card } from "../../card/card";
+import React from "react";
+import { CardButton } from "../../card/components/cardButton/cardButton";
+import { FormSection } from "../formSection";
+import { FormSectionInner } from "./formSectionInner";
+import { useLoading } from "../hooks/useLoading";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useError } from "../hooks/useError";
+import { FormLayoutTitle } from "../../formLayout/components/formLayoutTitle";
+export const FormSectionCard = (_a) => {
+    var { labelAlign, header, children, className, title, mode, isError, isLoading, retry } = _a, cardProps = __rest(_a, ["labelAlign", "header", "children", "className", "title", "mode", "isError", "isLoading", "retry"]);
+    const actions = React.Children.toArray(children).filter((child) => child.type === FormSection.Actions);
+    const additional = React.Children.toArray(children).filter((child) => child.type === FormSection.Additional);
+    const content = React.Children.toArray(children).filter((child) => child.type !== FormSection.Actions && child.type !== FormSection.Additional);
+    const cardButtons = actions.length > 0 ? Children.toArray(actions[0].props.children)
+        .map((child, indx) => {
+        if (React.isValidElement(child) && child.type === FormSection.Button) {
+            const element = child;
+            return _jsx(CardButton, Object.assign({}, element.props), element.props.id || indx);
+        }
+        return child;
+    }) : [];
+    // TODO: tests
+    // 1. if both loading and error is true
+    // 2. loading only
+    // 3. error only
+    // 4. none
+    const { loadingContent } = useLoading({ isLoading, type: "card" });
+    const { error } = useError({ isError, isLoading, retry, type: "card" });
+    const contentClasses = classNames(["zen-form-section-card-content", loadingContent ? "zen-form-section-card-content--loading" : ""]);
+    // TODO: tests for header
+    return _jsxs(_Fragment, { children: [header && _jsx(FormLayoutTitle, { className: className, value: header || "" }), _jsxs(Card, Object.assign({ size: "L", autoHeight: true, title: title, className: className, cardContentClasses: contentClasses }, cardProps, { children: [actions.length > 0 && _jsx(Card.Actions, { children: cardButtons }), loadingContent || error || _jsxs(FormSectionInner, { mode: mode, labelAlign: labelAlign, children: [content, additional.length > 0 && _jsx(FormSectionInner.Additional, Object.assign({}, additional[0].props, { children: additional[0].props.children }))] })] }))] });
+};

package/esm/formSection/components/formSectionDefault.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { IFormSectionDefault } from "../types";
+export declare const FormSectionDefault: FC<IFormSectionDefault>;

package/esm/formSection/components/formSectionDefault.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { FormSection } from "../formSection";
+import { FormSectionDefaultTitle } from "./formSectionDefaultTitle";
+import { FormSectionInner } from "./formSectionInner";
+export const FormSectionDefault = ({ labelAlign, children, className, mode, type, title }) => {
+    const content = React.Children.toArray(children).filter((child) => child.type !== FormSection.Actions && child.type !== FormSection.Additional);
+    const additional = React.Children.toArray(children).filter((child) => child.type === FormSection.Additional);
+    return _jsxs(FormSectionInner, { type: type, labelAlign: labelAlign, className: className, mode: mode, children: [title && _jsx(FormSectionDefaultTitle, { grid: 1284, children: title }), content, additional.length > 0 && (() => {
+                const additionalProps = additional[0].props;
+                return _jsx(FormSectionInner.Additional, Object.assign({}, additionalProps, { children: additionalProps.children }));
+            })()] });
+};

package/esm/formSection/components/formSectionDefaultTitle.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { IZenGridItem, IZenComponentProps } from "../../commonHelpers/zenComponent";
+import "./formSectionDefaultTitle.less";
+interface IFormSectionDefaultTitle extends IZenGridItem, IZenComponentProps {
+}
+export declare const FormSectionDefaultTitle: FC<IFormSectionDefaultTitle>;
+export {};

package/esm/formSection/components/formSectionDefaultTitle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const FormSectionDefaultTitle = ({ children, className }) => _jsx("div", { className: classNames(["zen-form-section-default-title", className || ""]), children: children });

package/esm/formSection/components/formSectionInner.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./formSectionInner.less";
+import { IAdditionalSectionProps } from "./additionalSection";
+import { IFormContentProps } from "../types";
+export declare const FormSectionInner: FC<IFormContentProps> & {
+    Additional: FC<IAdditionalSectionProps>;
+};

package/esm/formSection/components/formSectionInner.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useContext, Children, cloneElement } from "react";
+import { useGridClasses } from "../../gridLayout/hooks/useGridClasses";
+import { GridLayoutContext } from "../../gridLayout/utils/gridLayoutProvider";
+import { FormSectionProvider } from "../utils/formSectionProvider";
+import { getClassNames } from "../utils/getClassName";
+import { AdditionalSection } from "./additionalSection";
+import { FORM_SECTION } from "../types";
+import { useColumns } from "../../formLayout/hooks/useColumns";
+import { FormGroup } from "../../formGroup/formGroup";
+// TODO: on/off labels?
+// eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
+export const FormSectionInner = (_a) => {
+    var { children, type, className, labelAlign = "left", mode = "edit" } = _a, rest = __rest(_a, ["children", "type", "className", "labelAlign", "mode"]);
+    const childrenArr = useMemo(() => [], []);
+    const { screen } = useContext(GridLayoutContext);
+    const columns = useColumns();
+    const componentClassNames = useMemo(() => getClassNames(columns, screen, type, className), [columns, screen, type, className]);
+    const childrenInitial = Children.map(children, (child) => {
+        if (!child) {
+            return null;
+        }
+        if (child.type === AdditionalSection) {
+            // TODO: should only be rendered at the end of the form section?
+            const additionalSection = cloneElement(child, Object.assign(Object.assign({}, rest), { gridLgStart: 1, gridMdStart: 1, gridSmStart: 1, 
+                // TODO: is this reliable?
+                gridLg: 12 }));
+            return additionalSection;
+        }
+        if (child.type === FormGroup) {
+            return child;
+        }
+        const component = _jsx(FormGroup, { children: child });
+        return component;
+    });
+    useGridClasses(childrenInitial, childrenArr, {
+        desktop: columns === 1 ? 8 : 6,
+        tablet: columns === 1 ? 6 : 4,
+        mobile: 4
+    });
+    return _jsx(FormSectionProvider, { labelAlign: labelAlign, mode: mode, type: type, children: _jsx("div", { className: componentClassNames, children: childrenArr }) });
+};
+FormSectionInner.Additional = AdditionalSection;
+FormSectionInner.displayName = FORM_SECTION;

package/esm/formSection/components/formSectionModal.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { IFormSectionModal } from "../types";
+export declare const FormSectionModal: FC<IFormSectionModal>;

package/esm/formSection/components/formSectionModal.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from "../../modal/modal";
+import { FormSectionDefault } from "./formSectionDefault";
+// TODO: readonly mode?
+export const FormSectionModal = (props) => _jsxs(Modal, { className: "zen-form-section-modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, children: [_jsx(FormSectionDefault, { type: "modal", labelAlign: props.labelAlign, className: props.className, children: props.children }), _jsx(Modal.SecondaryButton, { onClick: props.onCancel, children: "Cancel" }), _jsx(Modal.PrimaryButton, { onClick: props.onConfirm, children: "Confirm" })] });

package/esm/formSection/formSection.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { IFormSectionActions } from "./components/actions";
+import { IFormSectionAdditional } from "./components/additional";
+import { IFormSectionButton } from "./components/formSectionButton";
+import { TFormSection } from "./types";
+export declare const FormSection: FC<TFormSection> & {
+    Actions: FC<IFormSectionActions>;
+} & {
+    Additional: FC<IFormSectionAdditional>;
+} & {
+    Button: FC<IFormSectionButton>;
+};

package/esm/formSection/formSection.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormSectionActions } from "./components/actions";
+import { FormSectionAdditional } from "./components/additional";
+import { FormSectionButton } from "./components/formSectionButton";
+import { FormSectionDefault } from "./components/formSectionDefault";
+import { FormSectionCard } from "./components/formSectionCard";
+import { FormSectionModal } from "./components/formSectionModal";
+import { isModalSection } from "./utils/isModalSection";
+import { useMode } from "../formGroup/hooks/useMode";
+import { useSectionType } from "../formGroup/hooks/useSectionType";
+import { useLabelAlign } from "../formGroup/hooks/useLabelAlign";
+// TODO: modal interface
+// isOpen, onClose, title, actions?
+// TODO: separate component?
+// TODO: add exclusive interface
+// TODO: better types for 3 elements?
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const FormSection = (props) => {
+    const mode = useMode(props.mode);
+    const type = useSectionType(props.type);
+    const labelAlign = useLabelAlign(props.labelAlign);
+    if (type === "card") {
+        const _a = props, { className } = _a, cardProps = __rest(_a, ["className"]);
+        return _jsx(FormSectionCard, Object.assign({ mode: mode, labelAlign: labelAlign, className: className }, cardProps, { children: props.children }));
+    }
+    if (isModalSection(props)) {
+        return _jsx(FormSectionModal, { type: "modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, labelAlign: labelAlign, className: props.className, onConfirm: props.onConfirm, onCancel: props.onCancel, children: props.children });
+    }
+    return _jsx(FormSectionDefault, { mode: mode, title: props.title, labelAlign: labelAlign, className: props.className, children: props.children });
+};
+FormSection.Actions = FormSectionActions;
+FormSection.Additional = FormSectionAdditional;
+FormSection.Button = FormSectionButton;

package/esm/formSection/hooks/useError.d.ts

@@ -0,0 +1,7 @@
+import { ILoadingBase } from "../../commonHelpers/loading";
+import { TFormSection } from "../types";
+export declare const useError: (props: Partial<TFormSection> & Partial<ILoadingBase>) => {
+    error: null;
+} | {
+    error: import("react/jsx-runtime").JSX.Element;
+};

package/esm/formSection/hooks/useError.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Banner } from "../../banner/banner";
+import { Card } from "../../card/card";
+import { hasErrorProps } from "../../commonHelpers/loading";
+import { useLanguage } from "../../utils/localization/useLanguage";
+export const useError = (props) => {
+    const { translate } = useLanguage();
+    if (!hasErrorProps(props)) {
+        return {
+            error: null
+        };
+    }
+    const action = props.retry ? {
+        text: translate("Reload"),
+        onClick: props.retry
+    } : undefined;
+    if (props.type === "card") {
+        return {
+            // TODO: add translations
+            error: _jsx(Card.Content, { children: _jsx(Banner, { className: "zen-form-section-error-banner", action: action, multiline: true, header: translate("Failed to load section"), type: "error", children: translate("Please reload this section to try again. If the issue persists, contact Support.") }) })
+        };
+    }
+    return {
+        // TODO: add translations
+        // TODO: should be support it for non-card?
+        error: _jsx(Banner, { multiline: true, header: translate("Failed to load section"), type: "error", children: translate("Please reload this section to try again. If the issue persists, contact Support.") })
+    };
+};

package/esm/formSection/hooks/useLoading.d.ts

@@ -0,0 +1,5 @@
+export declare const useLoading: (props: any) => {
+    loadingContent: null;
+} | {
+    loadingContent: import("react/jsx-runtime").JSX.Element;
+};

package/esm/formSection/hooks/useLoading.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card } from "../../card/card";
+import { Skeleton } from "../../skeleton/skeleton";
+export const useLoading = (props) => {
+    if (!props.isLoading) {
+        return {
+            loadingContent: null
+        };
+    }
+    if (props.type === "card") {
+        return {
+            loadingContent: _jsxs(Card.Content, { children: [_jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 })] })
+        };
+    }
+    return {
+        loadingContent: _jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 })] })
+    };
+};

package/esm/formSection/types.d.ts

@@ -0,0 +1,35 @@
+import { ICard } from "../card/card";
+import { ILoadingBase } from "../commonHelpers/loading";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IZenComponentProps, IZenFormLayoutItem } from "../commonHelpers/zenComponent";
+import { TLabelAlign } from "../formField/formField";
+import { TFormLayoutMode } from "../formLayout/types";
+export declare const FORM_SECTION = "FORM_SECTION";
+export type TFormSectionMode = TFormLayoutMode;
+export interface IFormContentProps extends IZenComponentProps {
+    labelAlign?: TLabelAlign;
+    mode?: TFormSectionMode;
+    type?: TFormSectionType;
+}
+export type TFormSectionType = "inline" | "card" | "modal" | undefined;
+export interface IFormSectionBase extends IZenComponentProps, IZenFormLayoutItem, ILoadingBase {
+    labelAlign?: TLabelAlign;
+    type?: TFormSectionType;
+    mode?: TFormSectionMode;
+    title?: string;
+}
+export interface IFormSectionDefault extends IFormSectionBase {
+    type?: "inline" | undefined;
+}
+export interface IFormSectionCard extends IFormSectionBase, Pick<ICard, "icon" | "secondary" | "tooltip" | "link"> {
+    type?: "card" | undefined;
+    header?: string;
+}
+export interface IFormSectionModal extends IFormSectionBase {
+    type?: "modal" | undefined;
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export type TFormSection = Exclusive<IFormSectionCard, IFormSectionBase> & Exclusive<IFormSectionModal, IFormSectionBase> & Exclusive<IFormSectionDefault, IFormSectionBase>;

package/esm/formSection/types.js

@@ -0,0 +1 @@
+export const FORM_SECTION = "FORM_SECTION";

package/esm/formSection/utils/formSectionProvider.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from "react";
+import { TFormSectionMode, TFormSectionType } from "../types";
+import { TLabelAlign } from "../../formField/formField";
+export interface IFormSectionProviderProps extends PropsWithChildren {
+    isFormSection?: boolean;
+    labelAlign?: TLabelAlign;
+    mode?: TFormSectionMode;
+    type: TFormSectionType;
+}
+export declare const FormSectionContext: import("react").Context<IFormSectionProviderProps>;
+export declare const FormSectionProvider: FC<IFormSectionProviderProps>;

package/esm/formSection/utils/formSectionProvider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+export const FormSectionContext = createContext({
+    labelAlign: undefined,
+    mode: undefined,
+    type: undefined,
+    isFormSection: false
+});
+export const FormSectionProvider = ({ children, labelAlign = "left", mode = undefined, type = "card" }) => _jsx(FormSectionContext.Provider, { value: { labelAlign, mode, type, isFormSection: true }, children: children });

package/esm/formSection/utils/getClassName.d.ts

@@ -0,0 +1,4 @@
+import { TFormLayoutColumns } from "../../formLayout/types";
+import { TGridScreen } from "../../gridLayout/utils/gridLayoutProvider";
+import { TFormSectionType } from "../types";
+export declare const getClassNames: (columns: TFormLayoutColumns, screen: TGridScreen, type: TFormSectionType, className?: string) => string;

package/esm/formSection/utils/getClassName.js

@@ -0,0 +1,8 @@
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const getClassNames = (columns, screen, type, className = "") => classNames([
+    "zen-form-section",
+    `zen-form-section--${screen}`,
+    className,
+    columns === 1 ? "zen-form-section--one-column" : "zen-form-section--two-column",
+    type === "modal" ? "zen-form-section--modal" : ""
+]);

package/esm/formSection/utils/isFormSection.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const isFormSection: (element: unknown) => element is import("react").FC<import("../types").IFormContentProps> & {
+    Additional: import("react").FC<import("../components/additionalSection").IAdditionalSectionProps>;
+};

package/esm/formSection/utils/isFormSection.js

@@ -0,0 +1 @@
+export const isFormSection = (element) => !!(element && typeof element === "object" && "type" in element && element.type.displayName === "FORM_SECTION");

package/esm/formSection/utils/isModalSection.d.ts

@@ -0,0 +1,2 @@
+import { IFormSectionModal } from "../types";
+export declare const isModalSection: (props: unknown) => props is IFormSectionModal;

package/esm/formSection/utils/isModalSection.js

@@ -0,0 +1,4 @@
+export const isModalSection = (props) => (typeof props === "object" &&
+    props !== null &&
+    "type" in props &&
+    props.type === "modal");

package/esm/formStepper/formStepper.js

@@ -35,5 +35,5 @@ export const FormStepper = ({ steps, onStepClicked, className = "", current, err
     const isOptionalStep = isCompactMode && ((_a = adjustedSteps[activeStepIndex]) === null || _a === void 0 ? void 0 : _a.optional);
     const stepNumber = current === STEPPER_LAST_STEP ? adjustedSteps.length : activeStepIndex + 1;
     const stepLabel = current === STEPPER_LAST_STEP ? (_b = adjustedSteps[activeStepIndex - 1]) === null || _b === void 0 ? void 0 : _b.label : (_c = adjustedSteps[activeStepIndex]) === null || _c === void 0 ? void 0 : _c.label;
-    return _jsxs("div", { className: `zen-form-stepper ${className}`, role: "tablist", children: [_jsx("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => (_jsx(FormStep, { id: step.id, label: step.label, isFirst: step.id === steps[0].id, value: indx + 1, onClick: isStepperNonClickable ? false : () => onStepClickedHandler(step.id), isError: errors === null || errors === void 0 ? void 0 : errors.includes(step.id), isCurrent: current === step.id, isComplete: indx < activeStepIndex, optional: step.optional, compact: isCompactMode }, step.id))) }), isCompactMode && _jsxs("label", { className: "zen-form-stepper__mobile-labels", children: [_jsx("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(stepNumber)).replace("{1}", String(adjustedSteps.length)) }), _jsx("span", { title: stepLabel, className: "zen-form-stepper__mobile-label", children: stepLabel }), _jsx("span", { title: translate("Optional"), className: `zen-form-stepper__mobile-secondary-label ${isOptionalStep ? "zen-form-stepper__mobile-secondary-label--visible" : ""}`, children: translate("Optional") })] })] });
+    return _jsxs("div", { className: `zen-form-stepper ${isMobile ? "zen-form-stepper--mobile" : ""} ${className}`, role: "tablist", children: [_jsx("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => (_jsx(FormStep, { id: step.id, label: step.label, isFirst: step.id === steps[0].id, value: indx + 1, onClick: isStepperNonClickable ? false : () => onStepClickedHandler(step.id), isError: errors === null || errors === void 0 ? void 0 : errors.includes(step.id), isCurrent: current === step.id, isComplete: indx < activeStepIndex, optional: step.optional, compact: isCompactMode }, step.id))) }), isCompactMode && _jsxs("label", { className: "zen-form-stepper__mobile-labels", children: [_jsx("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(stepNumber)).replace("{1}", String(adjustedSteps.length)) }), _jsx("span", { title: stepLabel, className: "zen-form-stepper__mobile-label", children: stepLabel }), _jsx("span", { title: translate("Optional"), className: `zen-form-stepper__mobile-secondary-label ${isOptionalStep ? "zen-form-stepper__mobile-secondary-label--visible" : ""}`, children: translate("Optional") })] })] });
 };

package/esm/formStepper/hooks/useFormStepper.d.ts

@@ -0,0 +1,6 @@
+import { IFormStepper } from "../formStepper";
+import { IFormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+export interface IUseFormStepperProps extends Omit<IFormStepper, "current" | "setCurrent">, Omit<IFormStepperButtons, "current" | "setCurrent"> {
+    initialStep?: string;
+}
+export declare const useFormStepper: ({ initialStep, steps, ...rest }: IUseFormStepperProps) => IFormStepper & IFormStepperButtons;