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

package/esm/formGroup/utils/getListClasses.d.ts

@@ -0,0 +1,3 @@
+import { TLabelAlign } from "../../formField/formField";
+import { TFormLayoutColumns } from "../../formLayout/types";
+export declare const getListClasses: (align: TLabelAlign | undefined, columns: TFormLayoutColumns, isFirstLabel?: boolean) => string;

package/esm/formGroup/utils/getListClasses.js

@@ -0,0 +1,27 @@
+import { convertStateToClasses } from "../../gridLayout/utils/convertStateToClasses";
+// TODO: can we get rid of this file?
+export const getListClasses = (align = "left", columns, isFirstLabel = false) => {
+    if (isFirstLabel) {
+        if (align === "left") {
+            if (columns === 1) {
+                return convertStateToClasses({ lg: 3, md: 2, sm: 1, lgStart: 1, mdStart: 1, smStart: 1 });
+            }
+            return convertStateToClasses({ lg: 2, md: 4, sm: 4, lgStart: 1, mdStart: 1, smStart: 1 });
+        }
+        if (columns === 1) {
+            return convertStateToClasses({ lg: 8, md: 4, sm: 4, lgStart: 1, mdStart: 1, smStart: 1 });
+        }
+        return convertStateToClasses({ lg: 6, md: 2, sm: 4, lgStart: 1, mdStart: 1, smStart: 1 });
+    }
+    if (align === "top") {
+        if (columns === 1) {
+            return convertStateToClasses({ lg: 5, md: 3, sm: 4, lgStart: 1, mdStart: 1, smStart: 1 });
+        }
+        return convertStateToClasses({ lg: 3, md: 4, sm: 4, lgStart: 3, mdStart: 1, smStart: 1 });
+    }
+    // align === "left"
+    if (columns === 1) {
+        return convertStateToClasses({ lg: 3, md: 3, sm: 4, lgStart: 1, mdStart: 1, smStart: 1 });
+    }
+    return convertStateToClasses({ lg: 1, md: 1, sm: 4, lgStart: 3, mdStart: 1, smStart: 1 });
+};

package/esm/formGroup/utils/getToggleClasses.d.ts

@@ -0,0 +1,3 @@
+import { TLabelAlign } from "../../formField/formField";
+import { TFormLayoutColumns } from "../../formLayout/types";
+export declare const getToggleClasses: (columns: TFormLayoutColumns, labelAlign?: TLabelAlign) => string;

package/esm/formGroup/utils/getToggleClasses.js

@@ -0,0 +1,13 @@
+import { convertStateToClasses } from "../../gridLayout/utils/convertStateToClasses";
+export const getToggleClasses = (columns, labelAlign = "left") => {
+    if (labelAlign === "left") {
+        if (columns === 1) {
+            return convertStateToClasses({ lgStart: 4, lg: 5, mdStart: 3, md: 4, sm: 2 });
+        }
+        return convertStateToClasses({ lgStart: 3, lg: 5, mdStart: 1, md: 3, smStart: 1, sm: 4 });
+    }
+    if (columns === 1) {
+        return convertStateToClasses({ lgStart: 4, lg: 5, mdStart: 3, md: 3, smStart: 1, sm: 4 });
+    }
+    return convertStateToClasses({ lgStart: 1, mdStart: 1, smStart: 1, lg: 6, md: 4, sm: 4 });
+};

package/esm/formGroup/utils/getTotalState.d.ts

@@ -0,0 +1,2 @@
+import { ITotalState, IElementsState } from "../types";
+export declare const getTotalState: (elements: IElementsState) => ITotalState;

package/esm/formGroup/utils/getTotalState.js

@@ -0,0 +1,19 @@
+import { hasCustomWidthControl } from "./hasCustomWidthControl";
+export const getTotalState = (elements) => {
+    let totalCount = 0;
+    let controlsCount = 0;
+    let labelsCount = 0;
+    // TODO: should calculate base on label inside control?
+    Object.values(elements).forEach((el) => {
+        if (el) {
+            totalCount++;
+            if (el.type === "control") {
+                controlsCount++;
+            }
+            if (el.type === "label") {
+                labelsCount++;
+            }
+        }
+    });
+    return { totalCount, controlsCount, labelsCount, elements, custom: !!hasCustomWidthControl(elements) };
+};

package/esm/formGroup/utils/hasCustomWidthControl.d.ts

@@ -0,0 +1,2 @@
+import { IElementsState } from "../types";
+export declare const hasCustomWidthControl: (state: IElementsState) => boolean;

package/esm/formGroup/utils/hasCustomWidthControl.js

@@ -0,0 +1,7 @@
+export const hasCustomWidthControl = (state) => {
+    var _a, _b, _c, _d;
+    if (((_b = (_a = state.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.width) || ((_d = (_c = state.control2) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.props.width)) {
+        return true;
+    }
+    return false;
+};

package/esm/formGroup/utils/hasWidthProp.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const hasWidthProp: (children: React.ReactNode) => boolean;

package/esm/formGroup/utils/hasWidthProp.js

@@ -0,0 +1,7 @@
+import React from "react";
+export const hasWidthProp = (children) => React.Children.toArray(children).some((child) => {
+    if (React.isValidElement(child)) {
+        return !!child.props.width;
+    }
+    return false;
+});

package/esm/formGroup/utils/initializeState.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { IFormFieldWithLabel, TLabelAlign } from "../../formField/formField";
+import { TFormLayoutMode } from "../../formLayout/types";
+import { IElementsState } from "../types";
+export interface IControlNode extends Pick<IFormFieldWithLabel, "isReadOnly" | "readOnlyValue"> {
+    label?: string;
+    labelAlign?: TLabelAlign;
+    tooltip?: React.ReactNode;
+    value?: React.ReactNode;
+    className?: string;
+}
+export declare const initializeState: (initState: IElementsState, children: React.ReactNode, mode: TFormLayoutMode, label?: string, labelAlign?: TLabelAlign, tooltip?: React.ReactNode) => import("../types").ITotalState;

package/esm/formGroup/utils/initializeState.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { getElementsControl } from "./getElementsControl";
+import { getTotalState } from "./getTotalState";
+import { getControlNode } from "./getControlNode";
+import { getLabelNode } from "./getLabelNode";
+const attachLabelToState = (state, labelKey, sectionState, control) => {
+    const label = (control === null || control === void 0 ? void 0 : control.props.label) || sectionState.label;
+    const labelAlign = (control === null || control === void 0 ? void 0 : control.props.labelAlign) || sectionState.labelAlign;
+    const tooltip = (control === null || control === void 0 ? void 0 : control.props.tooltip) || sectionState.tooltip;
+    if (label) {
+        state[labelKey] = { value: label, labelAlign: labelAlign, tooltip, type: "label", className: "" };
+    }
+};
+export const initializeState = (initState, children, mode, label = "", labelAlign, tooltip) => {
+    // Parsing children
+    const nodes = React.Children.toArray(children).slice(0, 2);
+    const [item1, item2] = nodes;
+    let controlNode1 = getControlNode(item1);
+    let controlNode2 = getControlNode(item2);
+    const labelNode2 = getLabelNode(item2);
+    // attach label 1 to state
+    attachLabelToState(initState, "label1", { label, labelAlign, tooltip }, controlNode1);
+    if (controlNode1 === null || controlNode1 === void 0 ? void 0 : controlNode1.props.label) {
+        controlNode1 = React.cloneElement(controlNode1, { label: undefined, labelAlign: undefined });
+    }
+    // attach label 2 to state
+    attachLabelToState(initState, "label2", { label: labelNode2 === null || labelNode2 === void 0 ? void 0 : labelNode2.props.label, labelAlign: labelAlign, tooltip: labelNode2 === null || labelNode2 === void 0 ? void 0 : labelNode2.props.tooltip, className: labelNode2 === null || labelNode2 === void 0 ? void 0 : labelNode2.props.className }, controlNode2);
+    if (controlNode2 === null || controlNode2 === void 0 ? void 0 : controlNode2.props.label) {
+        controlNode2 = React.cloneElement(controlNode2, { label: undefined, labelAlign: undefined });
+    }
+    // attach control 1 to state
+    getElementsControl(controlNode1, mode, initState, "control1");
+    // attach control 2 to state
+    getElementsControl(((labelNode2 === null || labelNode2 === void 0 ? void 0 : labelNode2.props.children) || controlNode2), mode, initState, "control2");
+    return getTotalState(initState);
+};

package/esm/formGroup/utils/isFormLabel.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { ILabelState } from "../types";
+export declare const isFormLabel: (element: any) => element is ReactElement<ILabelState, string | import("react").JSXElementConstructor<any>>;

package/esm/formGroup/utils/isFormLabel.js

@@ -0,0 +1,2 @@
+import { FormGroup } from "../formGroup";
+export const isFormLabel = (element) => (element === null || element === void 0 ? void 0 : element.type) === FormGroup;

package/esm/formGroup/utils/isTopAlign.d.ts

@@ -0,0 +1,3 @@
+import { TLabelAlign } from "../../formField/formField";
+import { ITotalState } from "../types";
+export declare const isTopAligned: (state: ITotalState, sectionAlign: TLabelAlign | undefined) => boolean;

package/esm/formGroup/utils/isTopAlign.js

@@ -0,0 +1,5 @@
+export const isTopAligned = (state, sectionAlign) => {
+    var _a, _b, _c, _d;
+    return (((_a = state.elements.label2) === null || _a === void 0 ? void 0 : _a.labelAlign) === "top" && ((_b = state.elements.label1) === null || _b === void 0 ? void 0 : _b.labelAlign) === "top") ||
+        (sectionAlign === "top" && !((_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.labelAlign) && !((_d = state.elements.label2) === null || _d === void 0 ? void 0 : _d.labelAlign));
+};

package/esm/formGroup/utils/isTwoRowsStructure.d.ts

@@ -0,0 +1,3 @@
+import { TFormLayoutColumns } from "../../formLayout/types";
+import { ITotalState } from "../types";
+export declare const isTwoRowsStructure: (state: Partial<ITotalState>, mode: string, columns: TFormLayoutColumns, isMobile: boolean, isTablet: any) => boolean;

package/esm/formGroup/utils/isTwoRowsStructure.js

@@ -0,0 +1,25 @@
+export const isTwoRowsStructure = (state, mode, columns, isMobile, isTablet) => {
+    var _a, _b, _c, _d;
+    // const isTopAlignedVal = isTopAligned(st, undefined);
+    if (isMobile) {
+        return false;
+    }
+    if (isTablet && columns === 2) {
+        return false;
+    }
+    if (state.totalCount === 3 && mode === "edit" && ((_b = (_a = state.elements) === null || _a === void 0 ? void 0 : _a.label1) === null || _b === void 0 ? void 0 : _b.labelAlign) === "top") {
+        return true;
+    }
+    const label1 = (_c = state.elements) === null || _c === void 0 ? void 0 : _c.label1;
+    const label2 = (_d = state.elements) === null || _d === void 0 ? void 0 : _d.label2;
+    if (state.totalCount === 4 && (label1 === null || label1 === void 0 ? void 0 : label1.labelAlign) === undefined && (label2 === null || label2 === void 0 ? void 0 : label2.labelAlign) === undefined) {
+        return true;
+    }
+    if (state.totalCount === 4 && (label1 === null || label1 === void 0 ? void 0 : label1.labelAlign) === "top" && (label2 === null || label2 === void 0 ? void 0 : label2.labelAlign) === "top") {
+        return true;
+    }
+    if (state.totalCount === 4 && (label1 === null || label1 === void 0 ? void 0 : label1.labelAlign) === "left" && (label2 === null || label2 === void 0 ? void 0 : label2.labelAlign) === "left") {
+        return true;
+    }
+    return false;
+};

package/esm/formGroupItem/formGroupItem.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
+import "./formGroupItem.less";
+export interface IFormGroupItem extends Partial<IZenIdComponentProps> {
+    value?: string;
+    tooltip?: React.ReactNode;
+}
+export declare const FormGroupItem: FC<IFormGroupItem>;

package/esm/formGroupItem/formGroupItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TooltipInfo } from "../tooltipInfo/tooltipInfo";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useMode } from "../formGroup/hooks/useMode";
+export const FormGroupItem = ({ id, value, tooltip, className = "" }) => {
+    const mode = useMode();
+    const textClasses = classNames(["zen-field-label__text", mode === "review" ? "zen-field-label__text--review" : ""]);
+    return value ? _jsxs("div", { className: classNames(["zen-field-label", className]), children: [id && _jsx("label", { className: textClasses, htmlFor: id, children: value }), !id && _jsx("span", { className: textClasses, children: value }), _jsx(TooltipInfo, { className: classNames(["zen-field-label-tooltip"]), value: tooltip })] }) : null;
+};

package/esm/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/esm/formLayout/components/column/column.js

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

package/esm/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/esm/formLayout/components/columnTitle/formLayoutColumnTitle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+export const FormLayoutColumnTitle = ({ value, className = "" }) => _jsx("span", { className: classNames(["zen-form-layout-column-title", className]), children: value });

package/esm/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/esm/formLayout/components/customColumns.js

@@ -0,0 +1,33 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { OneColumnGrid } from "./oneColumnGrid";
+import { TwoColumnsGrid } from "./twoColumnsGrid";
+import { useComponents } from "../hooks/useComponents";
+import { getChildrenWithCustomColumns } from "../utils/getChildrenWithCustomColumns";
+import { useColumns } from "../hooks/useColumns";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+// 1. Check if columns exists
+// 2. If yes -> has more priority than columns
+// 3. FormSections outside of LayoutColumns are ignored
+export const CustomColumns = (_a) => {
+    var { children, className, title, secondary } = _a, stepperProps = __rest(_a, ["children", "className", "title", "secondary"]);
+    const columns = useColumns();
+    const isMobile = useMobile();
+    const ch = getChildrenWithCustomColumns(children);
+    const components = 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 _jsxs(_Fragment, { children: [isOneColumn && _jsx(OneColumnGrid, { className: className, components: components }), isTwoColumns && _jsx(TwoColumnsGrid, { className: className, components: components })] });
+};

package/esm/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/esm/formLayout/components/formLayoutSecondary.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const FormLayoutSecondary = ({ value, className = "" }) => _jsx("span", { className: classNames(["zen-form-layout-secondary", className]), children: value });

package/esm/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/esm/formLayout/components/formLayoutTitle.js

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

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

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

package/esm/formLayout/components/getLayoutColumns.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { FormSection } from "../../formSection/formSection";
+import { isCustomFormSection } from "../utils/isCustomFormSection";
+import { LayoutColumn } from "./layoutColumn/layoutColum";
+export const getLayoutColumns = (children) => {
+    if (!children) {
+        return [];
+    }
+    if (!Array.isArray(children)) {
+        return (isValidElement(children) && children.type === LayoutColumn) ? [children] : [_jsx(LayoutColumn, { children: children }, "column1")];
+    }
+    const layoutColumns = children.filter((child) => child.type === LayoutColumn && child.props.children).slice(0, 2);
+    if (layoutColumns.length) {
+        return layoutColumns;
+    }
+    const sections = children.filter((el) => el.type === FormSection || isCustomFormSection(el));
+    if (sections.length === 1) {
+        return [_jsx(LayoutColumn, { children: sections }, "column1")];
+    }
+    const columnOne = [];
+    const columnTwo = [];
+    sections.forEach((child, index) => {
+        if (index % 2 === 0) {
+            columnOne.push(child);
+        }
+        else {
+            columnTwo.push(child);
+        }
+    });
+    return [
+        _jsx(LayoutColumn, { children: columnOne }, "column1"),
+        _jsx(LayoutColumn, { children: columnTwo }, "column2")
+    ];
+};

package/esm/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/esm/formLayout/components/layoutColumn/layoutColum.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LayoutColumn = ({ children }) => _jsx("div", { children: children });

package/esm/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/esm/formLayout/components/oneColumnGrid.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { GridLayout } from "../../gridLayout/gridLayout";
+import { getStepperLayout } from "../hooks/getStepperLayout";
+import { useColumns } from "../hooks/useColumns";
+import { FormLayoutColumnTitle } from "./columnTitle/formLayoutColumnTitle";
+export const OneColumnGrid = ({ className, components }) => {
+    const isMobile = useMobile();
+    const columns = 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 && !((_a = el.props) === null || _a === void 0 ? void 0 : _a.value); });
+    if (isOneColumn && emptyColumnTitleIndx !== -1) {
+        components.splice(emptyColumnTitleIndx, 1);
+    }
+    const classes = classNames([className || "", isOneColumn ? "zen-form-layout--one-column" : ""]);
+    const stepperLayout = getStepperLayout({ components, className: classes, isMobile });
+    if (stepperLayout) {
+        return isOneColumn ? stepperLayout : null;
+    }
+    return isOneColumn ? _jsx(GridLayout, { className: classes, children: components }) : null;
+};

package/esm/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/esm/formLayout/components/twoColumnsGrid.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { GridLayout } from "../../gridLayout/gridLayout";
+import { getStepperLayout } from "../hooks/getStepperLayout";
+import { useColumns } from "../hooks/useColumns";
+import { useCustomColumns } from "./useCustomColumns";
+export const TwoColumnsGrid = ({ className, components }) => {
+    const isMobile = useMobile();
+    const columns = 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 = useCustomColumns({ components, firstColIndx, secondColIndx, className });
+    if (customColumns) {
+        return customColumns;
+    }
+    const isTwoColumns = columns === 2 && !isMobile;
+    const classes = classNames([className || "", isTwoColumns ? "zen-form-layout--two-columns" : ""]);
+    const stepperLayout = getStepperLayout({ components, className: classes, isMobile });
+    if (stepperLayout) {
+        return isTwoColumns ? stepperLayout : null;
+    }
+    return isTwoColumns ? _jsx(GridLayout, { className: classes, children: components }) : null;
+};

package/esm/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/esm/formLayout/components/useCustomColumns.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { FormSection } from "../../formSection/formSection";
+import { GridLayout } from "../../gridLayout/gridLayout";
+import { getStepperLayout } from "../hooks/getStepperLayout";
+import { useColumns } from "../hooks/useColumns";
+import { Column } from "./column/column";
+import { FormLayoutColumnTitle } from "./columnTitle/formLayoutColumnTitle";
+import { isCustomFormSection } from "../utils/isCustomFormSection";
+export const useCustomColumns = ({ components, firstColIndx, secondColIndx, className }) => {
+    const isMobile = useMobile();
+    const columns = useColumns();
+    const colOne = [];
+    const colTwo = [];
+    const result = components.filter((el) => el.type !== FormSection && !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.isValidElement(item) && item.type === 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.isValidElement(item) && item.type === 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 _jsx(Column, { grid: 644, children: el }, indx);
+        }
+        return el;
+    }));
+    const isTwoColumns = columns === 2 && !isMobile;
+    const stepperLayout = getStepperLayout({ components: componentsArr, className, isMobile });
+    if (stepperLayout) {
+        return isTwoColumns ? stepperLayout : null;
+    }
+    const isShown = columns === 2 && firstColIndx !== -1 && !isMobile;
+    return isShown ? _jsx(GridLayout, { className: className, children: componentsArr }) : null;
+};

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

@@ -0,0 +1,39 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { FormLayoutProvider } from "./utils/formLayoutProvider";
+import { getLayoutColumns } from "./components/getLayoutColumns";
+import { CustomColumns } from "./components/customColumns";
+import { LayoutColumn } from "./components/layoutColumn/layoutColum";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useLoading } from "./hooks/useLoading";
+import { useError } from "./hooks/useError";
+const hasCustomColumnsFn = (children) => {
+    if (!Array.isArray(children)) {
+        return isValidElement(children) && children.type === LayoutColumn;
+    }
+    return children.some((child) => isValidElement(child) && child.type === LayoutColumn);
+};
+// TODO: Margins/paddings/gaps and etc.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export 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 = getLayoutColumns(children);
+    const classes = classNames([className || "", "zen-form-layout"]);
+    const { loadingContent } = useLoading({ isLoading });
+    const { error } = useError({ isError, retry, isLoading });
+    const content = loadingContent ? loadingContent : error ? error : _jsx(_Fragment, { children: _jsx(CustomColumns, Object.assign({ className: classes, title: title, secondary: secondary }, stepperProps, { children: children }), "custom") });
+    return _jsx(FormLayoutProvider, { columns: hasCustomColumns ? layoutColumns.length : columns, mode: mode, sectionType: sectionType, labelAlign: labelAlign, hasCustomColumns: hasCustomColumns, children: content });
+};
+FormLayout.Column = LayoutColumn;

package/esm/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/esm/formLayout/hooks/getStepperLayout.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { FormStepper } from "../../formStepper/formStepper";
+import { FormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+import { GridLayout } from "../../gridLayout/gridLayout";
+export const getStepperLayout = (props) => {
+    var _a, _b;
+    const { components, className } = props;
+    const hasStepper = ((_a = components[0]) === null || _a === void 0 ? void 0 : _a.type) === FormStepper && ((_b = components[components.length - 1]) === null || _b === void 0 ? void 0 : _b.type) === 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 = classNames([className || "", "zen-form-layout--has-wrapper"]);
+    const wrapperClasses = classNames(["zen-form-layout-wrapper", props.isMobile ? "zen-form-layout-wrapper--mobile" : ""]);
+    return _jsxs("div", { className: wrapperClasses, children: [stepper, _jsx(GridLayout, { className: gridLayoutClasses, children: restComponents }), stepperButtons] });
+};

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

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

package/esm/formLayout/hooks/useColumns.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { FormLayoutContext } from "../utils/formLayoutProvider";
+export const useColumns = () => {
+    const { columns = 1 } = useContext(FormLayoutContext);
+    return columns;
+};

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