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

package/dist/formLayout/components/column/column.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+import { IZenGridItem } from "../../../commonHelpers/zenComponent";
+import "./column.less";
+interface IColumnProps extends IZenGridItem, PropsWithChildren {
+}
+export declare const Column: ({ className, children }: IColumnProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/formLayout/components/column/column.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const Column = ({ className = "", children }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-form-layout-column", className]), children: children }));
+exports.Column = Column;

package/dist/formLayout/components/columnTitle/formLayoutColumnTitle.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { TFormLayoutColumns } from "../../types";
+import "./formLayoutColumnTitle.less";
+export interface IFormLayoutColumnTitleProps {
+    value: string;
+    className?: string;
+    column?: TFormLayoutColumns;
+}
+export declare const FormLayoutColumnTitle: FC<IFormLayoutColumnTitleProps>;

package/dist/formLayout/components/columnTitle/formLayoutColumnTitle.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLayoutColumnTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const FormLayoutColumnTitle = ({ value, className = "" }) => (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-form-layout-column-title", className]), children: value });
+exports.FormLayoutColumnTitle = FormLayoutColumnTitle;

package/dist/formLayout/components/customColumns.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+interface ICustomColumnsProps extends PropsWithChildren {
+    className?: string;
+    title?: string;
+    secondary?: string;
+    [key: string]: unknown;
+}
+export declare const CustomColumns: React.FC<ICustomColumnsProps>;
+export {};

package/dist/formLayout/components/customColumns.js

@@ -0,0 +1,37 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomColumns = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const oneColumnGrid_1 = require("./oneColumnGrid");
+const twoColumnsGrid_1 = require("./twoColumnsGrid");
+const useComponents_1 = require("../hooks/useComponents");
+const getChildrenWithCustomColumns_1 = require("../utils/getChildrenWithCustomColumns");
+const useColumns_1 = require("../hooks/useColumns");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+// 1. Check if columns exists
+// 2. If yes -> has more priority than columns
+// 3. FormSections outside of LayoutColumns are ignored
+const CustomColumns = (_a) => {
+    var { children, className, title, secondary } = _a, stepperProps = __rest(_a, ["children", "className", "title", "secondary"]);
+    const columns = (0, useColumns_1.useColumns)();
+    const isMobile = (0, useMobile_1.useMobile)();
+    const ch = (0, getChildrenWithCustomColumns_1.getChildrenWithCustomColumns)(children);
+    const components = (0, useComponents_1.useComponents)(Object.assign({ children: ch, title, secondary }, stepperProps));
+    const columnOne = Array.isArray(components[0]);
+    const columnTwo = Array.isArray(components[1]);
+    const isOneColumn = (columns === 1 || isMobile && !columnOne && !columnTwo);
+    const isTwoColumns = columns === 2 && !isMobile;
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOneColumn && (0, jsx_runtime_1.jsx)(oneColumnGrid_1.OneColumnGrid, { className: className, components: components }), isTwoColumns && (0, jsx_runtime_1.jsx)(twoColumnsGrid_1.TwoColumnsGrid, { className: className, components: components })] });
+};
+exports.CustomColumns = CustomColumns;

package/dist/formLayout/components/formLayoutSecondary.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./formLayoutSecondary.less";
+export interface IFormLayoutSecondaryProps {
+    value: string;
+    className?: string;
+}
+export declare const FormLayoutSecondary: FC<IFormLayoutSecondaryProps>;

package/dist/formLayout/components/formLayoutSecondary.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLayoutSecondary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const FormLayoutSecondary = ({ value, className = "" }) => (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-form-layout-secondary", className]), children: value });
+exports.FormLayoutSecondary = FormLayoutSecondary;

package/dist/formLayout/components/formLayoutTitle.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./formLayoutTitle.less";
+export interface IFormLayoutTitleProps {
+    value: string;
+    className?: string;
+}
+export declare const FormLayoutTitle: FC<IFormLayoutTitleProps>;

package/dist/formLayout/components/formLayoutTitle.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLayoutTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const FormLayoutTitle = ({ value, className = "" }) => (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-form-layout-title", className]), children: value });
+exports.FormLayoutTitle = FormLayoutTitle;

package/dist/formLayout/components/getLayoutColumns.d.ts

@@ -0,0 +1 @@
+export declare const getLayoutColumns: (children?: React.ReactElement) => React.ReactElement[];

package/dist/formLayout/components/getLayoutColumns.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLayoutColumns = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formSection_1 = require("../../formSection/formSection");
+const isCustomFormSection_1 = require("../utils/isCustomFormSection");
+const layoutColum_1 = require("./layoutColumn/layoutColum");
+const getLayoutColumns = (children) => {
+    if (!children) {
+        return [];
+    }
+    if (!Array.isArray(children)) {
+        return ((0, react_1.isValidElement)(children) && children.type === layoutColum_1.LayoutColumn) ? [children] : [(0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: children }, "column1")];
+    }
+    const layoutColumns = children.filter((child) => child.type === layoutColum_1.LayoutColumn && child.props.children).slice(0, 2);
+    if (layoutColumns.length) {
+        return layoutColumns;
+    }
+    const sections = children.filter((el) => el.type === formSection_1.FormSection || (0, isCustomFormSection_1.isCustomFormSection)(el));
+    if (sections.length === 1) {
+        return [(0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: sections }, "column1")];
+    }
+    const columnOne = [];
+    const columnTwo = [];
+    sections.forEach((child, index) => {
+        if (index % 2 === 0) {
+            columnOne.push(child);
+        }
+        else {
+            columnTwo.push(child);
+        }
+    });
+    return [
+        (0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: columnOne }, "column1"),
+        (0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: columnTwo }, "column2")
+    ];
+};
+exports.getLayoutColumns = getLayoutColumns;

package/dist/formLayout/components/layoutColumn/layoutColum.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export interface ILayoutColumnProps {
+    children?: React.ReactNode;
+    title?: string;
+}
+export declare const LayoutColumn: FC<ILayoutColumnProps>;

package/dist/formLayout/components/layoutColumn/layoutColum.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutColumn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LayoutColumn = ({ children }) => (0, jsx_runtime_1.jsx)("div", { children: children });
+exports.LayoutColumn = LayoutColumn;

package/dist/formLayout/components/oneColumnGrid.d.ts

@@ -0,0 +1,2 @@
+import { IDefaultColumns } from "../types";
+export declare const OneColumnGrid: ({ className, components }: IDefaultColumns) => import("react/jsx-runtime").JSX.Element | null;

package/dist/formLayout/components/oneColumnGrid.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneColumnGrid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const gridLayout_1 = require("../../gridLayout/gridLayout");
+const getStepperLayout_1 = require("../hooks/getStepperLayout");
+const useColumns_1 = require("../hooks/useColumns");
+const formLayoutColumnTitle_1 = require("./columnTitle/formLayoutColumnTitle");
+const OneColumnGrid = ({ className, components }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const columns = (0, useColumns_1.useColumns)();
+    const columnOne = Array.isArray(components[0]);
+    const columnTwo = Array.isArray(components[1]);
+    const isOneColumn = (columns === 1 || isMobile && !columnOne && !columnTwo);
+    const emptyColumnTitleIndx = components.findIndex((el) => { var _a; return el.type === formLayoutColumnTitle_1.FormLayoutColumnTitle && !((_a = el.props) === null || _a === void 0 ? void 0 : _a.value); });
+    if (isOneColumn && emptyColumnTitleIndx !== -1) {
+        components.splice(emptyColumnTitleIndx, 1);
+    }
+    const classes = (0, classNames_1.classNames)([className || "", isOneColumn ? "zen-form-layout--one-column" : ""]);
+    const stepperLayout = (0, getStepperLayout_1.getStepperLayout)({ components, className: classes, isMobile });
+    if (stepperLayout) {
+        return isOneColumn ? stepperLayout : null;
+    }
+    return isOneColumn ? (0, jsx_runtime_1.jsx)(gridLayout_1.GridLayout, { className: classes, children: components }) : null;
+};
+exports.OneColumnGrid = OneColumnGrid;

package/dist/formLayout/components/twoColumnsGrid.d.ts

@@ -0,0 +1,2 @@
+import { IDefaultColumns } from "../types";
+export declare const TwoColumnsGrid: ({ className, components }: IDefaultColumns) => import("react/jsx-runtime").JSX.Element | null;

package/dist/formLayout/components/twoColumnsGrid.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwoColumnsGrid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const gridLayout_1 = require("../../gridLayout/gridLayout");
+const getStepperLayout_1 = require("../hooks/getStepperLayout");
+const useColumns_1 = require("../hooks/useColumns");
+const useCustomColumns_1 = require("./useCustomColumns");
+const TwoColumnsGrid = ({ className, components }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const columns = (0, useColumns_1.useColumns)();
+    const firstColIndx = components.findIndex(item => { var _a; return ((_a = item.props) === null || _a === void 0 ? void 0 : _a.column) === 1; });
+    const secondColIndx = firstColIndx + 1;
+    const customColumns = (0, useCustomColumns_1.useCustomColumns)({ components, firstColIndx, secondColIndx, className });
+    if (customColumns) {
+        return customColumns;
+    }
+    const isTwoColumns = columns === 2 && !isMobile;
+    const classes = (0, classNames_1.classNames)([className || "", isTwoColumns ? "zen-form-layout--two-columns" : ""]);
+    const stepperLayout = (0, getStepperLayout_1.getStepperLayout)({ components, className: classes, isMobile });
+    if (stepperLayout) {
+        return isTwoColumns ? stepperLayout : null;
+    }
+    return isTwoColumns ? (0, jsx_runtime_1.jsx)(gridLayout_1.GridLayout, { className: classes, children: components }) : null;
+};
+exports.TwoColumnsGrid = TwoColumnsGrid;

package/dist/formLayout/components/useCustomColumns.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface IUseCustomColumns {
+    components: React.ReactElement<{
+        column?: number;
+    } | undefined>[];
+    firstColIndx: number;
+    secondColIndx: number;
+    className?: string;
+}
+export declare const useCustomColumns: ({ components, firstColIndx, secondColIndx, className }: IUseCustomColumns) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/formLayout/components/useCustomColumns.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomColumns = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const formSection_1 = require("../../formSection/formSection");
+const gridLayout_1 = require("../../gridLayout/gridLayout");
+const getStepperLayout_1 = require("../hooks/getStepperLayout");
+const useColumns_1 = require("../hooks/useColumns");
+const column_1 = require("./column/column");
+const formLayoutColumnTitle_1 = require("./columnTitle/formLayoutColumnTitle");
+const isCustomFormSection_1 = require("../utils/isCustomFormSection");
+const useCustomColumns = ({ components, firstColIndx, secondColIndx, className }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const columns = (0, useColumns_1.useColumns)();
+    const colOne = [];
+    const colTwo = [];
+    const result = components.filter((el) => el.type !== formSection_1.FormSection && !(0, isCustomFormSection_1.isCustomFormSection)(el));
+    components.forEach((el) => {
+        var _a, _b;
+        if (((_a = el.props) === null || _a === void 0 ? void 0 : _a.column) === 1) {
+            colOne.push(el);
+        }
+        else if (((_b = el.props) === null || _b === void 0 ? void 0 : _b.column) === 2) {
+            colTwo.push(el);
+        }
+    });
+    result.splice(firstColIndx, 0, colOne);
+    result.splice(secondColIndx, 0, colTwo);
+    // eslint-disable-next-line
+    // @ts-ignore
+    const columnTitleOneIndex = result.findIndex((item) => { var _a; return react_1.default.isValidElement(item) && item.type === formLayoutColumnTitle_1.FormLayoutColumnTitle && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.column) === 1; });
+    if (columnTitleOneIndex !== -1) {
+        result.splice(columnTitleOneIndex, 1);
+    }
+    // eslint-disable-next-line
+    // @ts-ignore
+    const columnTitleTwoIndex = result.findIndex(item => { var _a; return react_1.default.isValidElement(item) && item.type === formLayoutColumnTitle_1.FormLayoutColumnTitle && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.column) === 2; });
+    if (columnTitleTwoIndex !== -1) {
+        result.splice(columnTitleTwoIndex, 1);
+    }
+    const componentsArr = result.map(((el, indx) => {
+        if (Array.isArray(el)) {
+            return (0, jsx_runtime_1.jsx)(column_1.Column, { grid: 644, children: el }, indx);
+        }
+        return el;
+    }));
+    const isTwoColumns = columns === 2 && !isMobile;
+    const stepperLayout = (0, getStepperLayout_1.getStepperLayout)({ components: componentsArr, className, isMobile });
+    if (stepperLayout) {
+        return isTwoColumns ? stepperLayout : null;
+    }
+    const isShown = columns === 2 && firstColIndx !== -1 && !isMobile;
+    return isShown ? (0, jsx_runtime_1.jsx)(gridLayout_1.GridLayout, { className: className, children: componentsArr }) : null;
+};
+exports.useCustomColumns = useCustomColumns;

package/dist/formLayout/formLayout.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { TFormLayout } from "./types";
+import { ILayoutColumnProps } from "./components/layoutColumn/layoutColum";
+import "./formLayout.less";
+export declare const FormLayout: React.FC<TFormLayout> & {
+    Column: FC<ILayoutColumnProps>;
+};

package/dist/formLayout/formLayout.js

@@ -0,0 +1,43 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formLayoutProvider_1 = require("./utils/formLayoutProvider");
+const getLayoutColumns_1 = require("./components/getLayoutColumns");
+const customColumns_1 = require("./components/customColumns");
+const layoutColum_1 = require("./components/layoutColumn/layoutColum");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useLoading_1 = require("./hooks/useLoading");
+const useError_1 = require("./hooks/useError");
+const hasCustomColumnsFn = (children) => {
+    if (!Array.isArray(children)) {
+        return (0, react_1.isValidElement)(children) && children.type === layoutColum_1.LayoutColumn;
+    }
+    return children.some((child) => (0, react_1.isValidElement)(child) && child.type === layoutColum_1.LayoutColumn);
+};
+// TODO: Margins/paddings/gaps and etc.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const FormLayout = (_a) => {
+    var { children, className, columns = 1, title, secondary, mode, sectionType, labelAlign, isLoading, isError, retry } = _a, stepperProps = __rest(_a, ["children", "className", "columns", "title", "secondary", "mode", "sectionType", "labelAlign", "isLoading", "isError", "retry"]);
+    const hasCustomColumns = hasCustomColumnsFn(children);
+    const layoutColumns = (0, getLayoutColumns_1.getLayoutColumns)(children);
+    const classes = (0, classNames_1.classNames)([className || "", "zen-form-layout"]);
+    const { loadingContent } = (0, useLoading_1.useLoading)({ isLoading });
+    const { error } = (0, useError_1.useError)({ isError, retry, isLoading });
+    const content = loadingContent ? loadingContent : error ? error : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(customColumns_1.CustomColumns, Object.assign({ className: classes, title: title, secondary: secondary }, stepperProps, { children: children }), "custom") });
+    return (0, jsx_runtime_1.jsx)(formLayoutProvider_1.FormLayoutProvider, { columns: hasCustomColumns ? layoutColumns.length : columns, mode: mode, sectionType: sectionType, labelAlign: labelAlign, hasCustomColumns: hasCustomColumns, children: content });
+};
+exports.FormLayout = FormLayout;
+exports.FormLayout.Column = layoutColum_1.LayoutColumn;

package/dist/formLayout/hooks/getStepperLayout.d.ts

@@ -0,0 +1,2 @@
+import { IDefaultColumns } from "../types";
+export declare const getStepperLayout: (props: IDefaultColumns) => import("react/jsx-runtime").JSX.Element | null;

package/dist/formLayout/hooks/getStepperLayout.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStepperLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const formStepper_1 = require("../../formStepper/formStepper");
+const formStepperButtons_1 = require("../../formStepperButtons/formStepperButtons");
+const gridLayout_1 = require("../../gridLayout/gridLayout");
+const getStepperLayout = (props) => {
+    var _a, _b;
+    const { components, className } = props;
+    const hasStepper = ((_a = components[0]) === null || _a === void 0 ? void 0 : _a.type) === formStepper_1.FormStepper && ((_b = components[components.length - 1]) === null || _b === void 0 ? void 0 : _b.type) === formStepperButtons_1.FormStepperButtons;
+    if (!hasStepper) {
+        return null;
+    }
+    const stepper = components[0];
+    const stepperButtons = components[components.length - 1];
+    const restComponents = components.slice(1, components.length - 1);
+    const gridLayoutClasses = (0, classNames_1.classNames)([className || "", "zen-form-layout--has-wrapper"]);
+    const wrapperClasses = (0, classNames_1.classNames)(["zen-form-layout-wrapper", props.isMobile ? "zen-form-layout-wrapper--mobile" : ""]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [stepper, (0, jsx_runtime_1.jsx)(gridLayout_1.GridLayout, { className: gridLayoutClasses, children: restComponents }), stepperButtons] });
+};
+exports.getStepperLayout = getStepperLayout;

package/dist/formLayout/hooks/useColumns.d.ts

@@ -0,0 +1 @@
+export declare const useColumns: () => import("../types").TFormLayoutColumns;

package/dist/formLayout/hooks/useColumns.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColumns = void 0;
+const react_1 = require("react");
+const formLayoutProvider_1 = require("../utils/formLayoutProvider");
+const useColumns = () => {
+    const { columns = 1 } = (0, react_1.useContext)(formLayoutProvider_1.FormLayoutContext);
+    return columns;
+};
+exports.useColumns = useColumns;

package/dist/formLayout/hooks/useComponents.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { IFormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+import { IFormLayout } from "../types";
+interface IUseComponents extends IFormLayout, Partial<IFormStepperButtons> {
+    children: React.ReactNode | React.ReactNode[];
+}
+export declare const useComponents: ({ children, title, secondary, setCurrent, steps, isNextDisabled, onCancel, onContinue, onSubmit, onPrevious, current }: IUseComponents) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+export {};

package/dist/formLayout/hooks/useComponents.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponents = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = __importDefault(require("react"));
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const formSection_1 = require("../../formSection/formSection");
+const getAllowedComponents_1 = require("../utils/getAllowedComponents");
+const applyLayoutPosition_1 = require("../utils/applyLayoutPosition/applyLayoutPosition");
+const getFormSection_1 = require("../utils/getFormSection");
+const formSectionInner_1 = require("../../formSection/components/formSectionInner");
+const getComponentsWithClasses_1 = require("../utils/getComponentsWithClasses");
+const useColumns_1 = require("./useColumns");
+const useSectionType_1 = require("../../formGroup/hooks/useSectionType");
+// 1. Check for FormStepper
+// 2. Check for Banner
+// 3. Rest logic
+const useComponents = ({ children, title, secondary, setCurrent, steps, isNextDisabled, onCancel, onContinue, onSubmit, onPrevious, current }) => {
+    const stepperProps = { setCurrent, steps, isNextDisabled, onCancel, onContinue, onSubmit, onPrevious, current };
+    const isMobile = (0, useMobile_1.useMobile)();
+    const columns = (0, useColumns_1.useColumns)();
+    const type = (0, useSectionType_1.useSectionType)();
+    let content = null;
+    if (!children) {
+        return [];
+    }
+    if (children.type === formSectionInner_1.FormSectionInner || children.type === formSection_1.FormSection) {
+        content = (0, getFormSection_1.getFormSection)(children);
+    }
+    else {
+        content = children;
+    }
+    const components = (0, getAllowedComponents_1.getAllowedComponents)(content, title || "", secondary || "", type, columns, stepperProps);
+    const componentsArr = isMobile ? new Array(react_1.default.Children.count(components)) : react_1.default.Children.toArray(components);
+    if (isMobile) {
+        (0, applyLayoutPosition_1.applyLayoutPosition)(components, componentsArr);
+    }
+    return (0, getComponentsWithClasses_1.getComponentsWithClasses)(componentsArr, columns);
+};
+exports.useComponents = useComponents;

package/dist/formLayout/hooks/useError.d.ts

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

package/dist/formLayout/hooks/useError.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const banner_1 = require("../../banner/banner");
+const loading_1 = require("../../commonHelpers/loading");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const useError = (props) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    if (!(0, loading_1.hasErrorProps)(props)) {
+        return {
+            error: null
+        };
+    }
+    const action = props.retry ? {
+        text: translate("Reload"),
+        onClick: props.retry
+    } : undefined;
+    return {
+        // TODO: add translations
+        error: (0, jsx_runtime_1.jsx)(banner_1.Banner, { size: "XL", header: translate("Failed to load page"), action: action, type: "error", children: translate("Please refresh the page and try again. If the issue persists, contact Support.") })
+    };
+};
+exports.useError = useError;

package/dist/formLayout/hooks/useFormButtons.d.ts

@@ -0,0 +1,11 @@
+import { TFormLayoutMode } from "../types";
+export interface IUseFormButtonsProps {
+    mode?: TFormLayoutMode;
+    onEdit?: () => void;
+    onCancel?: () => void;
+    onSave?: (<T extends unknown[]>(...args: T) => void);
+}
+export declare const useFormButtons: (props?: IUseFormButtonsProps) => {
+    mode: TFormLayoutMode;
+    buttons: (import("react/jsx-runtime").JSX.Element | null)[];
+};

package/dist/formLayout/hooks/useFormButtons.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormButtons = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const header_1 = require("../../header/header");
+const iconEdit_1 = require("../../icons/iconEdit");
+const buttonType_1 = require("../../button/buttonType");
+const iconDisk_1 = require("../../icons/iconDisk");
+const iconClose_1 = require("../../icons/iconClose");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const useFormButtons = (props = {}) => {
+    const { onSave, onEdit, onCancel } = props;
+    const [mode, setMode] = (0, react_1.useState)(props.mode || "review");
+    const isReview = mode === "review";
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const saveButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(header_1.Header.Button, { important: true, icon: iconDisk_1.IconDisk, title: translate("Save"), onClick: (...args) => {
+            onSave === null || onSave === void 0 ? void 0 : onSave(...args);
+            setMode("review");
+        }, id: "form-save", type: buttonType_1.ButtonType.Primary }, "form-save"), [onSave, translate]);
+    const editButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(header_1.Header.Button, { important: true, icon: iconEdit_1.IconEdit, title: translate("Edit"), onClick: () => {
+            onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+            setMode("edit");
+        }, id: "form-edit", type: buttonType_1.ButtonType.Primary }, "form-edit"), [onEdit, translate]);
+    const cancelButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(header_1.Header.Button, { important: true, icon: iconClose_1.IconClose, title: translate("Cancel"), onClick: () => {
+            setMode("review");
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        }, id: "form-cancel", type: buttonType_1.ButtonType.Secondary }, "form-cancel"), [onCancel, translate]);
+    const buttons = (0, react_1.useMemo)(() => [
+        !isReview ? saveButton : null,
+        !isReview ? cancelButton : null,
+        isReview ? editButton : null
+    ].filter(el => !!el), [cancelButton, editButton, isReview, saveButton]);
+    return {
+        mode,
+        buttons
+    };
+};
+exports.useFormButtons = useFormButtons;

package/dist/formLayout/hooks/useLayoutColumns.d.ts

@@ -0,0 +1 @@
+export declare const useLayoutColumns: () => boolean | undefined;

package/dist/formLayout/hooks/useLayoutColumns.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayoutColumns = void 0;
+const react_1 = require("react");
+const formLayoutProvider_1 = require("../utils/formLayoutProvider");
+const useLayoutColumns = () => {
+    const { hasCustomColumns } = (0, react_1.useContext)(formLayoutProvider_1.FormLayoutContext);
+    return hasCustomColumns;
+};
+exports.useLayoutColumns = useLayoutColumns;

package/dist/formLayout/hooks/useLoading.d.ts

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

package/dist/formLayout/hooks/useLoading.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const waiting_1 = require("../../waiting/waiting");
+const useLoading = (props) => {
+    if (!props.isLoading) {
+        return {
+            loadingContent: null
+        };
+    }
+    return {
+        loadingContent: (0, jsx_runtime_1.jsx)(waiting_1.Waiting, { isLoading: true })
+    };
+};
+exports.useLoading = useLoading;

package/dist/formLayout/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { ILoadingBase } from "../commonHelpers/loading";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { TLabelAlign } from "../formField/formField";
+import { TFormSectionType } from "../formSection/types";
+import { IFormStepper } from "../formStepper/formStepper";
+import { IFormStepperButtons } from "../formStepperButtons/formStepperButtons";
+export type TFormLayoutColumns = 1 | 2;
+export type TFormLayoutMode = "edit" | "review";
+interface IFormLayoutBase extends IZenComponentProps, ILoadingBase {
+    columns?: TFormLayoutColumns;
+    title?: string;
+    secondary?: string;
+    mode?: TFormLayoutMode;
+    sectionType?: Extract<TFormSectionType, "card" | "inline">;
+    labelAlign?: TLabelAlign;
+}
+export interface IFormLayout extends IFormLayoutBase {
+}
+export interface IFormLayoutWithStepper extends IFormLayoutBase, Omit<IFormStepper, "mode">, IFormStepperButtons {
+}
+export type TFormLayout = Exclusive<IFormLayout, IFormLayoutWithStepper>;
+export interface IDefaultColumns {
+    isMobile?: boolean;
+    className?: string;
+    components: React.ReactElement<{
+        column?: number;
+        value?: string;
+    } | undefined>[];
+}
+export {};