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

package/esm/formGroup/formGroup.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Children, useCallback } from "react";
+import { Row } from "./components/row";
+import { List } from "./components/list";
+import { FormGroupProvider } from "./utils/formGroupProvider";
+import { FormGroupToggle } from "./components/formGroupToggle";
+import { FormGroupList } from "./components/formGroupList";
+const isFormGroupList = (child) => React.Children.count(child) >= 1 && React.isValidElement(child) && child.type === FormGroupList;
+const isFormGroupToggle = (child) => React.Children.count(child) === 1 && React.isValidElement(child) && child.type === FormGroupToggle;
+// Max width for control and label in mobile - for better look
+// eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
+export const FormGroup = ({ label, children, tooltip, labelAlign }) => {
+    // TODO: add accessibility
+    // TODO: section align for both labels?
+    const Provider = useCallback(({ children: content, controller, label: labelProvider, labelAlign: labelAlignProvider, tooltip: tooltipProvider, toggle, onToggleChange }) => _jsx(FormGroupProvider, { label: labelProvider || label, labelAlign: labelAlignProvider || labelAlign, tooltip: tooltipProvider || tooltip, controller: controller, toggle: toggle, onToggleChange: onToggleChange, children: content }), [label, labelAlign, tooltip]);
+    if (!children) {
+        return null;
+    }
+    const numberOfChildren = React.Children.count(children);
+    if (numberOfChildren === 1 && (typeof children === "string" || typeof children === "number")) {
+        return _jsx(Provider, { children: _jsx(Row, { children: _jsx("span", { children: children }) }) });
+    }
+    // TODO: check for comments section
+    // TODO: check for Additional Section
+    // const isAllLabels = isAllChildrenLabels(children);
+    if (isFormGroupToggle(children)) {
+        return _jsx(Provider, { tooltip: children.props.tooltip, 
+            // TODO: do we need labelAlign here?
+            // labelAlign={children.props.labelAlign}
+            controller: children.props.controller, label: children.props.label, toggle: children.props.value, onToggleChange: children.props.onChange, children: _jsx(List, { children: children.props.children }) });
+    }
+    if (isFormGroupList(children)) {
+        return _jsx(Provider, { label: children.props.label, tooltip: children.props.tooltip, children: _jsx(List, { children: children.props.children }) });
+    }
+    // TODO: do we need it?
+    if (numberOfChildren > 2 && label) {
+        return _jsx(Provider, { children: _jsx(List, { children: children }) });
+    }
+    if (numberOfChildren > 2 && !label) {
+        return _jsx(Provider, { children: Children.map(children, (child, indx) => (_jsx(Row, { children: child }, child.key || indx))) });
+    }
+    return _jsx(Provider, { children: _jsx(Row, { children: children }) });
+};
+FormGroup.Toggle = FormGroupToggle;
+FormGroup.List = FormGroupList;

package/esm/formGroup/hooks/listHooks/useControlClasses.d.ts

@@ -0,0 +1,2 @@
+import { ITotalState } from "../../types";
+export declare const useControlClasses: (state: ITotalState[]) => void;

package/esm/formGroup/hooks/listHooks/useControlClasses.js

@@ -0,0 +1,50 @@
+import { useColumns } from "../../../formLayout/hooks/useColumns";
+import { applyControlClasses } from "../../utils/applyControlClasses";
+import { getOneLabelOneControlClasses } from "../../utils/getControlListClasses/getOneLabelOneControlClasses";
+import { getZeroLabelOneControlClasses } from "../../utils/getControlListClasses/getZeroLabelOneControlClasses";
+import { getControlListClasses } from "../../utils/getControlListClasses/getControlListClasses";
+import { useMode } from "../useMode";
+export const useControlClasses = (state) => {
+    const columns = useColumns();
+    const mode = useMode();
+    // eslint-disable-next-line complexity
+    state.forEach((st) => {
+        if (st.custom) {
+            if (st.totalCount === 4) {
+                st.customControlClasses = getOneLabelOneControlClasses(st, columns, mode).controlClasses1;
+                return;
+            }
+            if (st.totalCount === 3 && st.labelsCount === 1 && !st.elements.label1 && st.elements.label2) {
+                st.customControlClasses = getZeroLabelOneControlClasses(columns).controlClasses1;
+                return;
+            }
+            if (st.totalCount === 3 && st.labelsCount === 1 && st.controlsCount === 2) {
+                st.customControlClasses = getOneLabelOneControlClasses(st, columns, mode).controlClasses1;
+                return;
+            }
+            if (st.totalCount === 2 && st.controlsCount === 1 && st.labelsCount === 1) {
+                st.customControlClasses = getOneLabelOneControlClasses(st, columns, mode).controlClasses1;
+                return;
+            }
+            if (st.totalCount === 2 && st.controlsCount === 2) {
+                st.customControlClasses = getZeroLabelOneControlClasses(columns).controlClasses1;
+                return;
+            }
+            if (st.totalCount === 1 && st.controlsCount === 1) {
+                st.customControlClasses = getZeroLabelOneControlClasses(columns).controlClasses1;
+                return;
+            }
+        }
+        const { controlClasses1, controlClasses2 } = getControlListClasses(st, columns, mode);
+        if (st.elements.control1 && controlClasses1) {
+            applyControlClasses(st.elements.control1, controlClasses1);
+            // TODO: simplify
+            // st.elements?.control1.value?.props.className = "";
+        }
+        if (st.elements.control2 && controlClasses2) {
+            applyControlClasses(st.elements.control2, controlClasses2);
+            // TODO: simplify
+            // st.elements?.control2.value?.props?.className = "";
+        }
+    });
+};

package/esm/formGroup/hooks/listHooks/useControls.d.ts

@@ -0,0 +1,2 @@
+import { ITotalState } from "../../types";
+export declare const useControls: (state: ITotalState[]) => void;

package/esm/formGroup/hooks/listHooks/useControls.js

@@ -0,0 +1,13 @@
+import { getControls } from "../../utils/getControls";
+export const useControls = (state) => {
+    state.forEach((st) => {
+        var _a, _b;
+        const { control1, control2 } = getControls(st.elements);
+        if (control1 && ((_a = st.elements.control1) === null || _a === void 0 ? void 0 : _a.value)) {
+            st.elements.control1.value = Object.assign({}, control1);
+        }
+        if (control2 && ((_b = st.elements.control2) === null || _b === void 0 ? void 0 : _b.value)) {
+            st.elements.control2.value = Object.assign({}, control2);
+        }
+    });
+};

package/esm/formGroup/hooks/listHooks/useElementsState.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ITotalState } from "../../types";
+export declare const useElementsState: (children: React.ReactNode) => ITotalState[];

package/esm/formGroup/hooks/listHooks/useElementsState.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { FormGroup } from "../../formGroup";
+import { initializeState } from "../../utils/initializeState";
+import { getEmptyState } from "../useElements";
+import { useMode } from "../useMode";
+import { CustomRow } from "../../components/customRow/customRow";
+import { hasWidthProp } from "../../utils/hasWidthProp";
+export const useElementsState = (children) => {
+    const mode = useMode();
+    const state = [];
+    if (!children) {
+        return state;
+    }
+    React.Children.forEach(children, (child) => {
+        if (child.type === FormGroup) {
+            const ch = hasWidthProp(child.props.children) && mode === "edit" ? _jsx(CustomRow, { children: child.props.children }) : child.props.children;
+            const st = initializeState(getEmptyState(), ch, mode, child.props.label, child.props.labelAlign, child.props.tooltip);
+            state.push(st);
+            return;
+        }
+        if ((typeof child === "string" || typeof child === "number")) {
+            const st = initializeState(getEmptyState(), _jsx("span", { children: child }), mode, undefined, undefined, undefined);
+            state.push(st);
+            return;
+        }
+        const st = initializeState(getEmptyState(), child, mode, child.props.label, child.props.labelAlign, child.props.tooltip);
+        state.push(st);
+    });
+    return state;
+};

package/esm/formGroup/hooks/listHooks/useLabelClasses.d.ts

@@ -0,0 +1,2 @@
+import { ITotalState } from "../../types";
+export declare const useLabelClasses: (state: ITotalState[]) => void;

package/esm/formGroup/hooks/listHooks/useLabelClasses.js

@@ -0,0 +1,34 @@
+import { useColumns } from "../../../formLayout/hooks/useColumns";
+import { getLabelListClasses } from "../../utils/getLabelListClasses/getLabelListClasses";
+import { getOneLabelOneControlClasses } from "../../utils/getLabelListClasses/getOneLabelOneControlClasses";
+import { useMode } from "../useMode";
+export const useLabelClasses = (state) => {
+    const columns = useColumns();
+    const mode = useMode();
+    state.forEach((st) => {
+        let { labelClasses1, labelClasses2 } = getLabelListClasses(st, columns, mode);
+        labelClasses1 = `${labelClasses1} zen-form-group-list-label`;
+        labelClasses2 = `${labelClasses2} zen-form-group-list-label`;
+        if (st.custom) {
+            if (st.totalCount === 4) {
+                st.customLabelClasses = getOneLabelOneControlClasses(st, columns, mode).labelClasses1;
+                return;
+            }
+            if (st.totalCount === 3 && st.labelsCount === 1 && st.controlsCount === 2) {
+                st.customLabelClasses = getOneLabelOneControlClasses(st, columns, mode).labelClasses1;
+                return;
+            }
+            if (st.totalCount === 2 && st.controlsCount === 1 && st.labelsCount === 1) {
+                st.customLabelClasses = getOneLabelOneControlClasses(st, columns, mode).labelClasses1;
+                return;
+            }
+            return;
+        }
+        if (st.elements.label1 && labelClasses1) {
+            st.elements.label1.className = `${labelClasses1} ${st.elements.label1.className || ""}`;
+        }
+        if (st.elements.label2 && labelClasses2) {
+            st.elements.label2.className = `${labelClasses2} ${st.elements.label2.className || ""}`;
+        }
+    });
+};

package/esm/formGroup/hooks/listHooks/useStateToElements.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ITotalState } from "../../types";
+export declare const useStateToElements: (state: ITotalState[]) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];

package/esm/formGroup/hooks/listHooks/useStateToElements.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMobile } from "../../../commonHelpers/hooks/useMobile";
+import { useColumns } from "../../../formLayout/hooks/useColumns";
+import { useTablet } from "../../../gridLayout/hooks/useTablet";
+import { OneRow } from "../../components/oneRow";
+import { TwoRows } from "../../components/twoRows";
+import { isTwoRowsStructure } from "../../utils/isTwoRowsStructure";
+import { useMode } from "../useMode";
+export const useStateToElements = (state) => {
+    const result = [];
+    const mode = useMode();
+    const isMobile = useMobile();
+    const isTablet = useTablet();
+    const columns = useColumns();
+    state.forEach((st, indx) => {
+        if (isTwoRowsStructure(st, mode, columns, isMobile, isTablet)) {
+            result.push(_jsx(TwoRows, { state: st }, indx));
+            return;
+        }
+        result.push(_jsx(OneRow, { state: st }, indx));
+    });
+    return result;
+};

package/esm/formGroup/hooks/rowHooks/useControlClasses.d.ts

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

package/esm/formGroup/hooks/rowHooks/useControlClasses.js

@@ -0,0 +1,27 @@
+import { useColumns } from "../../../formLayout/hooks/useColumns";
+import { applyControlClasses } from "../../utils/applyControlClasses";
+import { getControlClasses } from "../../utils/getControlClasses/getControlClasses";
+import { getOneLabelOneControlClasses } from "../../utils/getControlClasses/getOneLabelOneControlClasses";
+import { getZeroLabelOneControlClasses } from "../../utils/getControlClasses/getZeroLabelOneControlClasses";
+import { applyCustomControlClasses } from "../../utils/applyCustomControlClasses";
+import { useLabelAlign } from "../useLabelAlign";
+import { useMode } from "../useMode";
+import { useSectionType } from "../useSectionType";
+// eslint-disable-next-line complexity
+export const useControlClasses = (state) => {
+    const type = useSectionType();
+    const mode = useMode();
+    const columns = useColumns();
+    const labelAlign = useLabelAlign();
+    if (state.custom || (mode === "review" && state.controlsCount > 1)) {
+        applyCustomControlClasses({ state, labelAlign, columns, getOneLabelOneControlClasses, getZeroLabelOneControlClasses });
+        return;
+    }
+    const { controlClasses1, controlClasses2 } = getControlClasses(state, columns, labelAlign, mode, type);
+    if (state.elements.control1 && controlClasses1) {
+        applyControlClasses(state.elements.control1, controlClasses1);
+    }
+    if (state.elements.control2 && controlClasses2) {
+        applyControlClasses(state.elements.control2, controlClasses2);
+    }
+};

package/esm/formGroup/hooks/rowHooks/useControls.d.ts

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

package/esm/formGroup/hooks/rowHooks/useControls.js

@@ -0,0 +1,11 @@
+import { getControls } from "../../utils/getControls";
+export const useControls = (state) => {
+    var _a, _b;
+    const { control1, control2 } = getControls(state.elements);
+    if (control1 && ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value)) {
+        state.elements.control1.value = Object.assign({}, control1);
+    }
+    if (control2 && ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value)) {
+        state.elements.control2.value = Object.assign({}, control2);
+    }
+};

package/esm/formGroup/hooks/rowHooks/useInitializeState.d.ts

@@ -0,0 +1,3 @@
+import { IElementsState } from "../../types";
+import React from "react";
+export declare const useInitializeState: (initState: IElementsState, children: React.ReactNode) => import("../../types").ITotalState;

package/esm/formGroup/hooks/rowHooks/useInitializeState.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { FormGroupContext } from "../../utils/formGroupProvider";
+import { useLabelAlign } from "../useLabelAlign";
+import { useMode } from "../useMode";
+import { initializeState } from "../../utils/initializeState";
+export const useInitializeState = (initState, children) => {
+    const mode = useMode();
+    const labelAlign = useLabelAlign();
+    const { label, tooltip } = useContext(FormGroupContext);
+    return initializeState(initState, children, mode, label || "", labelAlign, tooltip);
+};

package/esm/formGroup/hooks/rowHooks/useLabelClasses.d.ts

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

package/esm/formGroup/hooks/rowHooks/useLabelClasses.js

@@ -0,0 +1,24 @@
+import { useColumns } from "../../../formLayout/hooks/useColumns";
+import { applyCustomLabelClasses } from "../../utils/applyCustomLabelClasses";
+import { getLabelClasses } from "../../utils/getLabelClasses/getLabelClasses";
+import { getOneLabelOneControlClasses } from "../../utils/getLabelClasses/getOneLabelOneControlClasses";
+import { useLabelAlign } from "../useLabelAlign";
+import { useMode } from "../useMode";
+import { useSectionType } from "../useSectionType";
+export const useLabelClasses = (state) => {
+    const type = useSectionType();
+    const mode = useMode();
+    const columns = useColumns();
+    const labelAlign = useLabelAlign();
+    if (state.custom) {
+        applyCustomLabelClasses({ state, labelAlign, columns, getOneLabelOneControlClasses });
+        return;
+    }
+    const { labelClasses1, labelClasses2 } = getLabelClasses(state, columns, labelAlign, mode, type);
+    if (state.elements.label1 && labelClasses1) {
+        state.elements.label1.className = `${labelClasses1} ${state.elements.label1.className || ""}`;
+    }
+    if (state.elements.label2 && labelClasses2) {
+        state.elements.label2.className = `${labelClasses2} ${state.elements.label2.className || ""}`;
+    }
+};

package/esm/formGroup/hooks/useCustomRow.d.ts

@@ -0,0 +1,4 @@
+import { ITotalState } from "../types";
+export declare const useCustomRowElements: (state: ITotalState) => {
+    customControl: any;
+};

package/esm/formGroup/hooks/useCustomRow.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, cloneElement } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { FormGroupItem } from "../../formGroupItem/formGroupItem";
+import { CustomRow } from "../components/customRow/customRow";
+import { useMode } from "./useMode";
+// eslint-disable-next-line complexity
+export const useCustomRowElements = (state) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+    const id1 = useId();
+    const id2 = useId();
+    const mode = useMode();
+    let control1;
+    let control2;
+    if (mode === "review") {
+        let customControl;
+        if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
+            control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        }
+        if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
+            control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        }
+        if (state.controlsCount === 2 && state.labelsCount === 2) {
+            customControl = _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_d = (_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.props.id) || id1, value: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.value, tooltip: (_f = state.elements.label1) === null || _f === void 0 ? void 0 : _f.tooltip, className: classNames(["zen-field-label--custom-width", ((_g = state.elements.label1) === null || _g === void 0 ? void 0 : _g.className) || "", state.customLabelClasses || ""]) }), _jsx(CustomRow, { className: state.customControlClasses, children: control1 }), _jsx(FormGroupItem, { id: ((_j = (_h = state.elements.control2) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.props.id) || id2, value: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.value, tooltip: (_l = state.elements.label2) === null || _l === void 0 ? void 0 : _l.tooltip, className: classNames(["zen-field-label--custom-width", ((_m = state.elements.label2) === null || _m === void 0 ? void 0 : _m.className) || ""]) }), _jsx(CustomRow, { className: state.customControlClasses, children: control2 })] });
+            return {
+                customControl
+            };
+        }
+        if (state.controlsCount > 1) {
+            customControl = _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_p = (_o = state.elements.control1) === null || _o === void 0 ? void 0 : _o.value) === null || _p === void 0 ? void 0 : _p.props.id) || id1, value: (_q = state.elements.label1) === null || _q === void 0 ? void 0 : _q.value, tooltip: (_r = state.elements.label1) === null || _r === void 0 ? void 0 : _r.tooltip, className: classNames(["zen-field-label--custom-width", ((_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.className) || "", state.customLabelClasses || ""]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, control2] })] });
+            return {
+                customControl
+            };
+        }
+    }
+    if (state.custom && state.totalCount === 4 && ((_t = state.elements.control1) === null || _t === void 0 ? void 0 : _t.value) && ((_u = state.elements.control2) === null || _u === void 0 ? void 0 : _u.value)) {
+        control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        const customControl = _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_v = state.elements.label1) === null || _v === void 0 ? void 0 : _v.value, tooltip: (_w = state.elements.label1) === null || _w === void 0 ? void 0 : _w.tooltip, className: classNames([((_x = state.elements.label1) === null || _x === void 0 ? void 0 : _x.className) || "", "zen-field-label--custom-width", state.customLabelClasses || ""]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, _jsx(FormGroupItem, { id: state.elements.control2.value.props.id || id2, value: (_y = state.elements.label2) === null || _y === void 0 ? void 0 : _y.value, tooltip: (_z = state.elements.label2) === null || _z === void 0 ? void 0 : _z.tooltip, className: classNames([((_0 = state.elements.label2) === null || _0 === void 0 ? void 0 : _0.className) || "", "zen-field-label--custom-width"]) }), control2] })] });
+        return {
+            customControl
+        };
+    }
+    if (state.custom && state.totalCount === 3 && state.labelsCount === 1 && !state.elements.label1 && ((_1 = state.elements.control1) === null || _1 === void 0 ? void 0 : _1.value) && ((_2 = state.elements.control2) === null || _2 === void 0 ? void 0 : _2.value)) {
+        control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        const customControl = _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, _jsx(FormGroupItem, { id: state.elements.control2.value.props.id || id2, value: (_3 = state.elements.label2) === null || _3 === void 0 ? void 0 : _3.value, tooltip: (_4 = state.elements.label2) === null || _4 === void 0 ? void 0 : _4.tooltip, className: classNames([((_5 = state.elements.label2) === null || _5 === void 0 ? void 0 : _5.className) || "", "zen-field-label--custom-width"]) }), control2] });
+        return {
+            customControl
+        };
+    }
+    if (state.custom && state.totalCount === 3 && state.labelsCount === 1 && state.controlsCount === 2 && ((_6 = state.elements.control1) === null || _6 === void 0 ? void 0 : _6.value) && ((_7 = state.elements.control2) === null || _7 === void 0 ? void 0 : _7.value)) {
+        control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        const customControl = _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_8 = state.elements.label1) === null || _8 === void 0 ? void 0 : _8.value, tooltip: (_9 = state.elements.label1) === null || _9 === void 0 ? void 0 : _9.tooltip, className: classNames(["zen-field-label--custom-width", ((_10 = state.elements.label1) === null || _10 === void 0 ? void 0 : _10.className) || "", state.customLabelClasses || ""]) }), _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, control2] })] });
+        return {
+            customControl
+        };
+    }
+    if (state.custom && state.totalCount === 2 && state.controlsCount === 2 && ((_11 = state.elements.control1) === null || _11 === void 0 ? void 0 : _11.value) && ((_12 = state.elements.control2) === null || _12 === void 0 ? void 0 : _12.value)) {
+        control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        const customControl = _jsxs(CustomRow, { className: state.customControlClasses, children: [control1, control2] });
+        return {
+            customControl
+        };
+    }
+    if (state.custom && state.totalCount === 2 && state.labelsCount === 1 && ((_13 = state.elements.control1) === null || _13 === void 0 ? void 0 : _13.value)) {
+        control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        const customControl = _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_14 = state.elements.label1) === null || _14 === void 0 ? void 0 : _14.value, tooltip: (_15 = state.elements.label1) === null || _15 === void 0 ? void 0 : _15.tooltip, className: classNames(["zen-field-label--custom-width", ((_16 = state.elements.label1) === null || _16 === void 0 ? void 0 : _16.className) || "", state.customLabelClasses || ""]) }), _jsx(CustomRow, { className: state.customControlClasses, children: control1 })] });
+        return {
+            customControl
+        };
+    }
+    if (state.custom && state.totalCount === 1 && state.controlsCount === 1) {
+        if ((_17 = state.elements.control1) === null || _17 === void 0 ? void 0 : _17.value) {
+            control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        }
+        else if ((_18 = state.elements.control2) === null || _18 === void 0 ? void 0 : _18.value) {
+            control1 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        }
+        const customControl = _jsx(CustomRow, { className: state.customControlClasses, children: control1 });
+        return {
+            customControl
+        };
+    }
+    return { customControl: null };
+};

package/esm/formGroup/hooks/useElements.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ITotalState, IElementsState } from "../types";
+export declare const getEmptyState: () => IElementsState;
+export declare const useElements: (children: React.ReactNode) => ITotalState;

package/esm/formGroup/hooks/useElements.js

@@ -0,0 +1,19 @@
+import { useControls } from "./rowHooks/useControls";
+import { useControlClasses } from "./rowHooks/useControlClasses";
+import { useLabelClasses } from "./rowHooks/useLabelClasses";
+import { useInitializeState } from "./rowHooks/useInitializeState";
+export const getEmptyState = () => ({
+    control1: null,
+    control2: null,
+    label1: null,
+    label2: null
+});
+export const useElements = (children) => {
+    const state = useInitializeState(getEmptyState(), children);
+    // apply classes
+    useLabelClasses(state);
+    useControlClasses(state);
+    // apply readonly, className (cloneElement)
+    useControls(state);
+    return state;
+};

package/esm/formGroup/hooks/useLabelAlign.d.ts

@@ -0,0 +1,2 @@
+import { TLabelAlign } from "../../formField/formField";
+export declare const useLabelAlign: (labelAlign?: TLabelAlign) => TLabelAlign;

package/esm/formGroup/hooks/useLabelAlign.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { FormLayoutContext } from "../../formLayout/utils/formLayoutProvider";
+import { FormSectionContext } from "../../formSection/utils/formSectionProvider";
+import { FormGroupContext } from "../utils/formGroupProvider";
+export const useLabelAlign = (labelAlign) => {
+    const { labelAlign: labelSectionAlign } = useContext(FormSectionContext);
+    const { labelAlign: layoutLabelAlign } = useContext(FormLayoutContext);
+    const { labelAlign: labelFormLabelAlign } = useContext(FormGroupContext);
+    return labelAlign || labelFormLabelAlign || labelSectionAlign || layoutLabelAlign || "left";
+};

package/esm/formGroup/hooks/useMode.d.ts

@@ -0,0 +1,2 @@
+import { TFormSectionMode } from "../../formSection/types";
+export declare const useMode: (mode?: TFormSectionMode) => TFormSectionMode;

package/esm/formGroup/hooks/useMode.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { FormLayoutContext } from "../../formLayout/utils/formLayoutProvider";
+import { FormSectionContext } from "../../formSection/utils/formSectionProvider";
+export const useMode = (mode) => {
+    const { mode: layoutMode } = useContext(FormLayoutContext);
+    const { mode: sectionMode } = useContext(FormSectionContext);
+    return mode || sectionMode || layoutMode || "edit";
+};

package/esm/formGroup/hooks/useRowElements.d.ts

@@ -0,0 +1,14 @@
+import { ITotalState } from "../types";
+export declare const useRowElements: (state: ITotalState) => {
+    customControl: any;
+    control1?: undefined;
+    control2?: undefined;
+    id1?: undefined;
+    id2?: undefined;
+} | {
+    control1: any;
+    control2: any;
+    id1: string;
+    id2: string;
+    customControl?: undefined;
+};

package/esm/formGroup/hooks/useRowElements.js

@@ -0,0 +1,20 @@
+import { useId, cloneElement } from "react";
+import { useCustomRowElements } from "./useCustomRow";
+export const useRowElements = (state) => {
+    var _a, _b;
+    const id1 = useId();
+    const id2 = useId();
+    let control1;
+    let control2;
+    const { customControl } = useCustomRowElements(state);
+    if (customControl) {
+        return { customControl };
+    }
+    if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
+        control1 = cloneElement(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+    }
+    if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
+        control2 = cloneElement(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+    }
+    return { control1, control2, id1, id2 };
+};

package/esm/formGroup/hooks/useSectionType.d.ts

@@ -0,0 +1,2 @@
+import { TFormSectionType } from "../../formSection/types";
+export declare const useSectionType: (type?: TFormSectionType) => TFormSectionType;

package/esm/formGroup/hooks/useSectionType.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { FormSectionContext } from "../../formSection/utils/formSectionProvider";
+import { FormLayoutContext } from "../../formLayout/utils/formLayoutProvider";
+export const useSectionType = (type) => {
+    const { type: formSectionType } = useContext(FormSectionContext);
+    const { sectionType } = useContext(FormLayoutContext);
+    return type || sectionType || formSectionType || "card";
+};

package/esm/formGroup/hooks/useToggle.d.ts

@@ -0,0 +1 @@
+export declare const useToggle: (result: any) => import("react/jsx-runtime").JSX.Element;

package/esm/formGroup/hooks/useToggle.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormGroupContext } from "../utils/formGroupProvider";
+import { useFormFieldValues } from "../../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { ListToggle } from "../components/listToggle/listToggle";
+import { useMode } from "./useMode";
+import { ReviewTextControl } from "../components/reviewTextControl";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { getListClasses } from "../utils/getListClasses";
+import { useColumns } from "../../formLayout/hooks/useColumns";
+export const useToggle = (result) => {
+    const { controller, toggle, onToggleChange } = useContext(FormGroupContext);
+    const { value = false } = useFormFieldValues(controller, { value: toggle, onChange: onToggleChange });
+    const hasToggle = (controller !== undefined) || (toggle !== undefined && onToggleChange !== undefined);
+    const mode = useMode();
+    const columns = useColumns();
+    const { translate } = useLanguage();
+    // TODO: accessibility: do we need id here?
+    return _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [hasToggle && _jsx(ListToggle, {}), hasToggle && !value && mode === "review" ? _jsx(ReviewTextControl, { secondary: true, className: classNames([getListClasses("left", columns, true)]), value: translate("Sub-options are not active.") }) : null, hasToggle && value ? result : value === undefined ? result : null] }), !hasToggle && result] });
+};

package/esm/formGroup/hooks/useToggleList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface IUseToggleListProps {
+    children: React.ReactNode;
+}
+export declare const useToggleList: ({ children }: IUseToggleListProps) => {
+    toggleList: import("react/jsx-runtime").JSX.Element;
+    id: string;
+};
+export {};

package/esm/formGroup/hooks/useToggleList.js

@@ -0,0 +1,20 @@
+import { useId } from "react";
+import { useToggle } from "./useToggle";
+import { useStateToElements } from "./listHooks/useStateToElements";
+import { useLabelClasses } from "./listHooks/useLabelClasses";
+import { useElementsState } from "./listHooks/useElementsState";
+import { useControlClasses } from "./listHooks/useControlClasses";
+import { useControls } from "./listHooks/useControls";
+export const useToggleList = ({ children }) => {
+    const state = useElementsState(children);
+    // apply classes
+    useControlClasses(state);
+    useLabelClasses(state);
+    // apply readonly, cloneElement
+    useControls(state);
+    const id = useId();
+    const content = useStateToElements(state);
+    const toggleList = useToggle(content);
+    // TODO: make accessible: link id and label
+    return { toggleList, id };
+};