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

package/esm/formLayout/hooks/useComponents.js

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { FormSection } from "../../formSection/formSection";
+import { getAllowedComponents } from "../utils/getAllowedComponents";
+import { applyLayoutPosition as applyMobileLayoutPosition } from "../utils/applyLayoutPosition/applyLayoutPosition";
+import { getFormSection } from "../utils/getFormSection";
+import { FormSectionInner } from "../../formSection/components/formSectionInner";
+import { getComponentsWithClasses } from "../utils/getComponentsWithClasses";
+import { useColumns } from "./useColumns";
+import { useSectionType } from "../../formGroup/hooks/useSectionType";
+// 1. Check for FormStepper
+// 2. Check for Banner
+// 3. Rest logic
+export 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 = useMobile();
+    const columns = useColumns();
+    const type = useSectionType();
+    let content = null;
+    if (!children) {
+        return [];
+    }
+    if (children.type === FormSectionInner || children.type === FormSection) {
+        content = getFormSection(children);
+    }
+    else {
+        content = children;
+    }
+    const components = getAllowedComponents(content, title || "", secondary || "", type, columns, stepperProps);
+    const componentsArr = isMobile ? new Array(React.Children.count(components)) : React.Children.toArray(components);
+    if (isMobile) {
+        applyMobileLayoutPosition(components, componentsArr);
+    }
+    return getComponentsWithClasses(componentsArr, columns);
+};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Banner } from "../../banner/banner";
+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;
+    return {
+        // TODO: add translations
+        error: _jsx(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.") })
+    };
+};

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Header } from "../../header/header";
+import { IconEdit } from "../../icons/iconEdit";
+import { ButtonType } from "../../button/buttonType";
+import { IconDisk } from "../../icons/iconDisk";
+import { IconClose } from "../../icons/iconClose";
+import { useLanguage } from "../../utils/localization/useLanguage";
+export const useFormButtons = (props = {}) => {
+    const { onSave, onEdit, onCancel } = props;
+    const [mode, setMode] = useState(props.mode || "review");
+    const isReview = mode === "review";
+    const { translate } = useLanguage();
+    const saveButton = useMemo(() => _jsx(Header.Button, { important: true, icon: IconDisk, title: translate("Save"), onClick: (...args) => {
+            onSave === null || onSave === void 0 ? void 0 : onSave(...args);
+            setMode("review");
+        }, id: "form-save", type: ButtonType.Primary }, "form-save"), [onSave, translate]);
+    const editButton = useMemo(() => _jsx(Header.Button, { important: true, icon: IconEdit, title: translate("Edit"), onClick: () => {
+            onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+            setMode("edit");
+        }, id: "form-edit", type: ButtonType.Primary }, "form-edit"), [onEdit, translate]);
+    const cancelButton = useMemo(() => _jsx(Header.Button, { important: true, icon: IconClose, title: translate("Cancel"), onClick: () => {
+            setMode("review");
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        }, id: "form-cancel", type: ButtonType.Secondary }, "form-cancel"), [onCancel, translate]);
+    const buttons = useMemo(() => [
+        !isReview ? saveButton : null,
+        !isReview ? cancelButton : null,
+        isReview ? editButton : null
+    ].filter(el => !!el), [cancelButton, editButton, isReview, saveButton]);
+    return {
+        mode,
+        buttons
+    };
+};

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

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

package/esm/formLayout/hooks/useLayoutColumns.js

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Waiting } from "../../waiting/waiting";
+export const useLoading = (props) => {
+    if (!props.isLoading) {
+        return {
+            loadingContent: null
+        };
+    }
+    return {
+        loadingContent: _jsx(Waiting, { isLoading: true })
+    };
+};

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

package/esm/formLayout/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const applyGridPropsOneColumn: (element: any, indx: any, result: any) => void;

package/esm/formLayout/utils/applyGridPropsOneColumn.js

@@ -0,0 +1,14 @@
+import { cloneElement } from "react";
+export const applyGridPropsOneColumn = (element, indx, result) => {
+    const clone = cloneElement(element, {
+        gridLgStart: 3,
+        gridLg: 8,
+        gridMdStart: 2,
+        gridMd: 6,
+        gridSmStart: 1,
+        gridSm: 4,
+        key: indx
+    });
+    result.push(clone);
+    return;
+};

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

@@ -0,0 +1 @@
+export declare const applyGridPropsStatic: (element: any, indx: any, columns: any, result: any) => void;

package/esm/formLayout/utils/applyGridPropsStatic.js

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { cloneElement } from "react";
+import { FormStepper } from "../../formStepper/formStepper";
+import { FormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+export const applyGridPropsStatic = (element, indx, columns, result) => {
+    if (element.type === FormStepper || element.type === FormStepperButtons) {
+        result.push(cloneElement(element, {
+            // @ts-ignore
+            gridLgStart: 1,
+            gridLg: 12,
+            gridMdStart: 1,
+            gridMd: 8,
+            gridSmStart: 1,
+            gridSm: 4,
+            key: indx
+        }));
+        return;
+    }
+    if (columns === 1) {
+        result.push(cloneElement(element, {
+            // @ts-ignore
+            gridLgStart: 3,
+            gridLg: 7,
+            gridMdStart: 2,
+            gridMd: 6,
+            gridSmStart: 1,
+            gridSm: 4,
+            key: indx
+        }));
+        return;
+    }
+    result.push(cloneElement(element, {
+        // @ts-ignore
+        gridLgStart: 1,
+        gridLg: 12,
+        gridMdStart: 1,
+        gridMd: 8,
+        gridSmStart: 1,
+        gridSm: 4,
+        key: indx
+    }));
+};

package/esm/formLayout/utils/applyGridPropsTwoColumns/applyFirstColumn.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from "react";
+export declare const applyFirstColumn: (element: ReactElement, indx: any, result: any) => void;

package/esm/formLayout/utils/applyGridPropsTwoColumns/applyFirstColumn.js

@@ -0,0 +1,14 @@
+import { cloneElement } from "react";
+export const applyFirstColumn = (element, indx, result) => {
+    const clone = cloneElement(element, {
+        gridLgStart: 1,
+        gridLg: 6,
+        gridMdStart: 1,
+        gridMd: 4,
+        gridSmStart: 1,
+        gridSm: 4,
+        key: indx,
+        column: 1
+    });
+    result.push(clone);
+};

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

@@ -0,0 +1,2 @@
+import { ReactElement } from "react";
+export declare const applyGridPropsTwoColumns: (element: ReactElement, indx: number, result: React.ReactElement[], nonStaticIndex: number) => void;

package/esm/formLayout/utils/applyGridPropsTwoColumns/applyGridPropsTwoColumns.js

@@ -0,0 +1,20 @@
+import { applyFirstColumn } from "./applyFirstColumn";
+import { applySecondColumn } from "./applySecondColumn";
+export const applyGridPropsTwoColumns = (element, indx, result, nonStaticIndex) => {
+    const hasColumnProp = !!element.props.column;
+    if (hasColumnProp) {
+        if (element.props.column === 1) {
+            applyFirstColumn(element, indx, result);
+        }
+        if (element.props.column === 2) {
+            applySecondColumn(element, indx, result);
+        }
+        return;
+    }
+    if (nonStaticIndex % 2 === 0) {
+        applyFirstColumn(element, indx, result);
+    }
+    else if (nonStaticIndex % 2 === 1) {
+        applySecondColumn(element, indx, result);
+    }
+};

package/esm/formLayout/utils/applyGridPropsTwoColumns/applySecondColumn.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from "react";
+export declare const applySecondColumn: (element: ReactElement, indx: any, result: any) => void;

package/esm/formLayout/utils/applyGridPropsTwoColumns/applySecondColumn.js

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { cloneElement } from "react";
+export const applySecondColumn = (element, indx, result) => {
+    const clone = cloneElement(element, {
+        // @ts-ignore
+        gridLgStart: 7,
+        gridLg: 6,
+        gridMdStart: 5,
+        gridMd: 4,
+        gridSmStart: 1,
+        gridSm: 4,
+        key: indx,
+        column: 2
+    });
+    result.push(clone);
+};

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

@@ -0,0 +1 @@
+export declare const applyLayoutPosition: (components: any, result: any) => void;

package/esm/formLayout/utils/applyLayoutPosition/applyLayoutPosition.js

@@ -0,0 +1,114 @@
+import { FormStepper } from "../../../formStepper/formStepper";
+import { FormStepperButtons } from "../../../formStepperButtons/formStepperButtons";
+import { Banner } from "../../../banner/banner";
+import { FormLayoutTitle } from "../../components/formLayoutTitle";
+import { FormLayoutColumnTitle } from "../../components/columnTitle/formLayoutColumnTitle";
+const STATIC_COMPONENTS = [
+    FormStepper,
+    FormStepperButtons,
+    Banner,
+    FormLayoutTitle,
+    FormLayoutColumnTitle
+];
+const transform = (components) => {
+    const state = {};
+    // eslint-disable-next-line
+    // @ts-ignore
+    const movableComponents = components.filter((child) => !STATIC_COMPONENTS.includes(child.type));
+    // 1. Initialize state
+    components.forEach((child, index) => {
+        // eslint-disable-next-line
+        // @ts-ignore
+        if (STATIC_COMPONENTS.includes(child.type)) {
+            state[index] = {
+                value: child,
+                realPos: index,
+                oldPos: null,
+                newPos: null,
+                newRealPos: index
+            };
+            return;
+        }
+        // eslint-disable-next-line
+        // @ts-ignore
+        const layoutPosition = child.props.layoutPosition;
+        const newPositions = Object.values(state).map((field) => field.newPos);
+        let newPos;
+        if (layoutPosition !== undefined) {
+            newPos = layoutPosition < 0 ? 0 : layoutPosition > movableComponents.length - 1 ? movableComponents.length - 1 : layoutPosition;
+            // eslint-disable-next-line
+            if (newPositions.indexOf(newPos) !== -1) {
+                if (layoutPosition >= movableComponents.length - 1) {
+                    newPos = 0;
+                }
+                // eslint-disable-next-line
+                while (newPositions.indexOf(newPos) !== -1) {
+                    newPos++;
+                }
+            }
+        }
+        else {
+            newPos = null;
+        }
+        state[index] = {
+            value: child,
+            realPos: index,
+            oldPos: movableComponents.indexOf(child),
+            newPos: newPos,
+            newRealPos: null
+        };
+    });
+    // 2. Adjust positions
+    components.sort((a, b) => a.props.layoutPosition - b.props.layoutPosition).forEach((child, index) => {
+        // eslint-disable-next-line
+        // @ts-ignore
+        if (STATIC_COMPONENTS.includes(child.type)) {
+            return;
+        }
+        if (state[index].newPos !== null) {
+            return;
+        }
+        // eslint-disable-next-line
+        // @ts-ignore
+        const layoutPosition = child.props.layoutPosition;
+        const newPositions = Object.values(state).map((field) => field.newPos).filter((pos) => pos !== null);
+        let newPos = 0;
+        if (newPositions.indexOf(newPos) !== -1) {
+            if (layoutPosition >= movableComponents.length - 1) {
+                newPos = 0;
+            }
+            while (newPositions.indexOf(newPos) !== -1) {
+                newPos++;
+            }
+        }
+        state[index] = {
+            value: child,
+            realPos: index,
+            oldPos: movableComponents.indexOf(child),
+            newPos: newPos,
+            newRealPos: null
+        };
+    });
+    // 3. Update newRealPos
+    components.forEach((child) => {
+        // eslint-disable-next-line
+        // @ts-ignore
+        if (STATIC_COMPONENTS.includes(child.type)) {
+            return;
+        }
+        const index = components.indexOf(child);
+        const newPos = state[index].newPos;
+        const withOldPos = Object.values(state).find((field) => field.oldPos === newPos);
+        if (withOldPos) {
+            state[index].newRealPos = withOldPos.realPos;
+        }
+    });
+    return Object.values(state).sort((a, b) => a.newRealPos - b.newRealPos).map((el) => el.value);
+};
+// TODO: test with titles
+export const applyLayoutPosition = (components, result) => {
+    const state = transform(components);
+    result.length = 0;
+    result.push(...state);
+    return;
+};

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

@@ -0,0 +1 @@
+export declare const attachHeadings: (elements: React.ReactElement[], title?: string, secondary?: string) => (import("react/jsx-runtime").JSX.Element | null)[];

package/esm/formLayout/utils/attachHeadings.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Banner } from "../../banner/banner";
+import { FormLayoutSecondary } from "../components/formLayoutSecondary";
+import { FormLayoutTitle } from "../components/formLayoutTitle";
+export const attachHeadings = (elements, title, secondary) => {
+    if (!title && !secondary) {
+        return elements;
+    }
+    const elementsClone = [...elements];
+    const titleElement = title ? _jsx(FormLayoutTitle, { value: title }) : null;
+    const secondaryElement = secondary ? _jsx(FormLayoutSecondary, { value: secondary }) : null;
+    const bannerElement = elementsClone.find((el) => el.type === Banner);
+    const bannerIndex = elementsClone.indexOf(bannerElement);
+    if (bannerElement && bannerIndex === 0) {
+        if (titleElement) {
+            elementsClone.splice(bannerIndex + 1, 0, titleElement);
+        }
+        if (secondaryElement && titleElement) {
+            elementsClone.splice(bannerIndex + 2, 0, secondaryElement);
+        }
+        else if (secondaryElement) {
+            elementsClone.splice(bannerIndex + 1, 0, secondaryElement);
+        }
+        return elementsClone;
+    }
+    return [titleElement, secondaryElement, ...elements].filter((el) => el !== null);
+};

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

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

package/esm/formLayout/utils/attachSeparators.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from "../../divider/divider";
+import { FormSection } from "../../formSection/formSection";
+import { isCustomFormSection } from "./isCustomFormSection";
+export const attachSeparators = (components, type, columns) => {
+    if (type !== "inline" || columns !== 1) {
+        return components;
+    }
+    const isSection = (el) => el.type === FormSection || isCustomFormSection(el);
+    const elements = components.filter(isSection);
+    if (elements.length <= 1) {
+        return components;
+    }
+    const result = [];
+    components.forEach((el, indx, arr) => {
+        if (indx === arr.length - 1) {
+            result.push(el);
+            return;
+        }
+        if (!(isSection(el) && arr[indx + 1] && isSection(arr[indx + 1]))) {
+            result.push(el);
+            return;
+        }
+        result.push(el);
+        result.push(_jsx(Divider, { className: "zen-form-separator" }));
+    });
+    return result;
+};

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

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { IFormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+export declare const attachStepper: (components: ReactElement | ReactElement[], stepperProps: Partial<IFormStepperButtons>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | (string | number | bigint | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element)[];

package/esm/formLayout/utils/attachStepper.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { FormStepper } from "../../formStepper/formStepper";
+import { FormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+import { hasStepper } from "./hasStepper";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { Banner } from "../../banner/banner";
+export const attachStepper = (components, stepperProps) => {
+    var _a;
+    if (!hasStepper(stepperProps)) {
+        return components;
+    }
+    const isFirstComponentBanner = ((_a = components[0]) === null || _a === void 0 ? void 0 : _a.type) === Banner;
+    const stepperClasses = classNames([...stepperProps.className || [], "zen-form-layout-stepper", isFirstComponentBanner ? "zen-form-layout-stepper--with-banner" : ""]);
+    const stepperButtonsClasses = classNames([...stepperProps.className || [], "zen-form-layout-stepper-buttons"]);
+    const stepper = _jsx(FormStepper, Object.assign({}, stepperProps, { className: stepperClasses }));
+    const stepperButtons = _jsx(FormStepperButtons, Object.assign({}, stepperProps, { className: stepperButtonsClasses }));
+    return [stepper, ...Children.toArray(components), stepperButtons];
+};

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

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from "react";
+import { IFormLayout } from "../types";
+export interface IFormLayoutProviderProps extends Pick<IFormLayout, "columns" | "mode" | "sectionType" | "labelAlign">, PropsWithChildren {
+    hasCustomColumns?: boolean;
+}
+export declare const FormLayoutContext: import("react").Context<IFormLayoutProviderProps>;
+export declare const FormLayoutProvider: FC<IFormLayoutProviderProps>;

package/esm/formLayout/utils/formLayoutProvider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+export const FormLayoutContext = createContext({
+    columns: 1,
+    mode: undefined,
+    sectionType: undefined,
+    labelAlign: undefined,
+    hasCustomColumns: false
+});
+export const FormLayoutProvider = ({ children, columns, mode, sectionType, labelAlign, hasCustomColumns }) => (_jsx(FormLayoutContext.Provider, { value: { columns, mode, sectionType, labelAlign, hasCustomColumns }, children: children }));

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { IFormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+import { IFormStepper } from "../../formStepper/formStepper";
+import { TFormSectionType } from "../../formSection/types";
+import { TFormLayoutColumns } from "../types";
+export declare const getAllowedComponents: (children: React.ReactNode, title: string, secondary: string, type: TFormSectionType, columns: TFormLayoutColumns, stepperProps: Partial<IFormStepperButtons> & Partial<IFormStepper>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/esm/formLayout/utils/getAllowedComponents.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { getFilteredComponents } from "./getFilteredComponents";
+import { attachStepper } from "./attachStepper";
+import { attachHeadings } from "./attachHeadings";
+import { attachSeparators } from "./attachSeparators";
+export const getAllowedComponents = (children, title, secondary, type, columns, stepperProps) => {
+    if (!children) {
+        return [];
+    }
+    let allowedComponents = React.Children.toArray(children).filter((child) => getFilteredComponents(child));
+    allowedComponents = attachSeparators(allowedComponents, type, columns);
+    allowedComponents = attachHeadings(allowedComponents, title, secondary);
+    allowedComponents = attachStepper(allowedComponents, stepperProps);
+    return allowedComponents;
+};

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

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare const getChildrenWithCustomColumns: (children: React.ReactElement) => ReactNode[];

package/esm/formLayout/utils/getChildrenWithCustomColumns.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { FormSectionInner } from "../../formSection/components/formSectionInner";
+import { FormSection } from "../../formSection/formSection";
+import { LayoutColumn } from "../components/layoutColumn/layoutColum";
+import { FormLayoutColumnTitle } from "../components/columnTitle/formLayoutColumnTitle";
+// eslint-disable-next-line complexity
+export const getChildrenWithCustomColumns = (children) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    let numberOfColumns = 0;
+    if (!Array.isArray(children)) {
+        return (isValidElement(children) && children.type === LayoutColumn) ? [children.props.children] : [children];
+    }
+    let filtered = children.filter((child) => {
+        if (child.type !== LayoutColumn) {
+            return true;
+        }
+        if (child.type === LayoutColumn && !child.props.children) {
+            return false;
+        }
+        if (child.type === LayoutColumn && numberOfColumns < 2) {
+            numberOfColumns += 1;
+            return true;
+        }
+        return false;
+    });
+    if (numberOfColumns === 2) {
+        filtered = filtered.filter((child) => child.type !== FormSection && child.type !== FormSectionInner);
+    }
+    const indexOfFirstColumn = filtered.findIndex((child) => child.type === LayoutColumn);
+    let indexOfSecondColumn = filtered.findIndex((child, index) => child.type === LayoutColumn && index > indexOfFirstColumn);
+    const firstColumnTittle = indexOfFirstColumn !== -1 ? (_b = (_a = filtered[indexOfFirstColumn]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.title : null;
+    const secondColumnTittle = indexOfSecondColumn !== -1 ? (_d = (_c = filtered[indexOfSecondColumn]) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.title : null;
+    let childrenOfFirstColumn = indexOfFirstColumn !== -1 ? (_f = (_e = filtered[indexOfFirstColumn]) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.children : null;
+    let childrenOfSecondColumn = indexOfSecondColumn !== -1 ? (_h = (_g = filtered[indexOfSecondColumn]) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.children : null;
+    if (childrenOfFirstColumn) {
+        childrenOfFirstColumn = Children.toArray(childrenOfFirstColumn).map((child) => {
+            const clone = cloneElement(child, {
+                key: child.key + "1",
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                column: 1
+            });
+            return clone;
+        });
+        const title = ((_k = (_j = filtered[indexOfFirstColumn]) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.title) || "";
+        if ((firstColumnTittle || secondColumnTittle) && Array.isArray(childrenOfFirstColumn)) {
+            childrenOfFirstColumn.unshift(_jsx(FormLayoutColumnTitle, { column: 1, value: title }, "column-1-title"));
+        }
+    }
+    if (childrenOfSecondColumn) {
+        childrenOfSecondColumn = Children.toArray(childrenOfSecondColumn).map((child) => {
+            const clone = cloneElement(child, {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                column: 2,
+                key: child.key + "2"
+            });
+            return clone;
+        });
+        const title = ((_m = (_l = filtered[indexOfSecondColumn]) === null || _l === void 0 ? void 0 : _l.props) === null || _m === void 0 ? void 0 : _m.title) || "";
+        if ((firstColumnTittle || secondColumnTittle) && Array.isArray(childrenOfSecondColumn)) {
+            childrenOfSecondColumn.unshift(_jsx(FormLayoutColumnTitle, { column: 2, value: title }, "column-2-title"));
+        }
+    }
+    indexOfFirstColumn !== -1 && filtered.splice(indexOfFirstColumn, 1, ...childrenOfFirstColumn);
+    indexOfSecondColumn = filtered.findIndex((child) => child.type === LayoutColumn);
+    indexOfSecondColumn !== -1 && filtered.splice(indexOfSecondColumn, 1, ...childrenOfSecondColumn);
+    return filtered;
+};