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

package/dist/formField/formField.d.ts

@@ -1,17 +1,45 @@
-import React from "react";
+import React, { Ref, PropsWithChildren } from "react";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenGridItem } from "../commonHelpers/zenComponent";
+import { ILoadingBase } from "../commonHelpers/loading";
 import "./formField.less";
-export interface IFormField {
+export type TLabelAlign = "left" | "top";
+interface IFormFieldBase extends PropsWithChildren {
     className?: string;
     inputClassName?: string;
     error?: string;
     assistive?: string;
     counter?: string;
+    trailing?: string;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    width?: string | number;
 }
+export interface IFormFieldWithLabel extends IFormFieldBase, ILoadingBase {
+    label?: string;
+    labelAlign?: TLabelAlign;
+    tooltip?: React.ReactNode;
+    labelClassesName?: string;
+    controlClassesName?: string;
+    readOnlyValue?: string | React.ReactNode | ((content: React.ReactNode) => React.ReactNode);
+}
+export interface IFormField extends IFormFieldBase {
+}
+export type TFormField = Exclusive<IFormFieldWithLabel, IFormField>;
 export interface IFormFieldComponent {
     isError?: boolean;
+    isReadOnly?: boolean;
+    children?: React.ReactNode;
+    isLoadingError?: boolean;
+    bannerLabel?: string;
+    ref?: Ref<HTMLElement | null>;
 }
-export type TFormFieldComponentProps<T> = Omit<T, "isError"> & IFormField;
-export declare const FormField: <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>) => {
-    (props: TFormFieldComponentProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+export type TFormFieldComponentProps<T> = Omit<T, "isError"> & TFormField & IZenGridItem & IReactFormItemController;
+export declare const FormField: {
+    <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>): {
+        (props: TFormFieldComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Banner: React.FC<import("./components/formFieldBanner").IFormFieldBannerProps>;
 };
+export {};

package/dist/formField/formField.js

@@ -13,27 +13,80 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const formFieldError_1 = require("../formFieldError/formFieldError");
+const formFieldBanner_1 = require("./components/formFieldBanner");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const useBanner_1 = require("./hooks/useBanner");
+const useAssistive_1 = require("./hooks/useAssistive");
+const useTrailing_1 = require("./hooks/useTrailing");
+const useError_1 = require("./hooks/useError");
+const rangeRawLabelCheck_1 = require("./utils/rangeRawLabelCheck");
+const skeleton_1 = require("../skeleton/skeleton");
+const textareaRaw_1 = require("../textareaRaw/textareaRaw");
+const useSkeleton_1 = require("./hooks/useSkeleton");
+const useWidth_1 = require("./hooks/useWidth");
+const useDisabled_1 = require("./hooks/useDisabled");
+const useLoading_1 = require("./hooks/useLoading");
+const useReadonly_1 = require("./hooks/useReadonly");
+const formFieldWithLabel_1 = require("./components/formFieldWithLabel");
+const formFieldWithoutLabel_1 = require("./components/formFieldWithoutLabel");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const FormField = function formFieldInner(WrappedComponent) {
+const FormField = function FormFieldInner(WrappedComponent) {
+    // eslint-disable-next-line complexity
     const InnerFormField = (props) => {
-        const { className, inputClassName, error, assistive, counter } = props, rest = __rest(props, ["className", "inputClassName", "error", "assistive", "counter"]);
+        const isMobile = (0, useMobile_1.useMobile)();
+        const ref = props.ref;
+        const { id: assistiveId, assistive } = (0, useAssistive_1.useAssistive)(props);
+        const { id: trailingId, trailing } = (0, useTrailing_1.useTrailing)(props);
+        const { id: errorId, error, errorBanner } = (0, useError_1.useError)(props);
+        const { id: bannerId, banner: bannerComp } = (0, useBanner_1.useBanner)(props);
+        const disabledProps = (0, useDisabled_1.useDisabled)(props);
+        const _a = (0, useWidth_1.useWidth)(props), { hasCustomWidth } = _a, widthObj = __rest(_a, ["hasCustomWidth"]);
+        const skeletonProps = __rest((0, useSkeleton_1.useSkeleton)(props), []);
+        const isLoading = (0, useLoading_1.useLoading)(props, WrappedComponent.displayName);
+        const isReadonly = (0, useReadonly_1.useReadonly)(props);
+        // TODO: add tests
+        const banner = errorBanner || bannerComp;
+        const isInputContainerHidden = isReadonly && props.isError;
+        const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
         const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
-        const showAdditionalInfo = error || assistive || counter;
+        // TODO: Banner? Only it or assistive text?
+        const showAdditionalInfo = (error || assistive || counter) && !isReadonly;
         const componentClassName = (0, classNames_1.classNames)(["zen-form-field__input", inputClassName || ""]);
-        return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__input-container", children: (0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, { className: componentClassName, isError: !!error })) }), showAdditionalInfo ?
-                    (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+        const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
+        const localId = (0, react_1.useId)();
+        const id = props.id || localId;
+        const container = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [(0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), !hasCustomWidth && trailing && (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] }), showAdditionalInfo ?
+                    (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)("div", { id: assistiveId || errorId, className: (0, classNames_1.classNames)([
                                     "zen-form-field__text",
                                     driveTextClass || "",
                                     error ? "zen-form-field__text--error" : ""
                                 ]), children: error ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }) : assistive }), counter
-                                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__length", children: counter })
+                                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-form-field__length"]), children: counter })
                                 : ""] })
-                    : null] });
+                    : null, banner] }), [isInputContainerHidden, trailing, rest, disabledProps, isReadonly, id, componentClassName, ref, props.isError, error, ariaDescribedBy, hasCustomWidth, trailingId, showAdditionalInfo, assistiveId, errorId, driveTextClass, assistive, counter, banner]);
+        const classes = (0, classNames_1.classNames)([
+            "zen-form-field",
+            isMobile ? "zen-form-field--mobile" : "",
+            banner ? "zen-form-field--with-banner" : "",
+            !props.label ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
+            className || ""
+        ]);
+        if (isLoading) {
+            const height = WrappedComponent.displayName === textareaRaw_1.TextareaRaw.displayName ? 110 : 32;
+            return (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ className: classes, height: height }, skeletonProps));
+        }
+        // TODO: refactor?
+        if (props.label && (0, rangeRawLabelCheck_1.rangeRawLabelCheck)(WrappedComponent, props)) {
+            return (0, jsx_runtime_1.jsx)(formFieldWithLabel_1.FormFieldWithLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, props: props, id: id, container: container, trailing: trailing, trailingId: trailingId });
+        }
+        return (0, jsx_runtime_1.jsx)(formFieldWithoutLabel_1.FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId });
     };
     InnerFormField.displayName = "InnerFormField";
     return InnerFormField;
 };
 exports.FormField = FormField;
+exports.FormField.Banner = formFieldBanner_1.FormFieldBanner;

package/dist/formField/hooks/useAssistive.d.ts

@@ -0,0 +1,12 @@
+interface IUseAssistiveProps {
+    assistive?: string;
+    isReadOnly?: boolean;
+}
+export declare const useAssistive: (props: IUseAssistiveProps) => {
+    id: string;
+    assistive: null;
+} | {
+    id: string;
+    assistive: string;
+};
+export {};

package/dist/formField/hooks/useAssistive.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAssistive = void 0;
+const react_1 = require("react");
+const useAssistive = (props) => {
+    const assistiveId = (0, react_1.useId)();
+    if (!props.assistive || props.isReadOnly) {
+        return {
+            id: "",
+            assistive: null
+        };
+    }
+    return {
+        id: assistiveId,
+        assistive: props.assistive
+    };
+};
+exports.useAssistive = useAssistive;

package/dist/formField/hooks/useBanner.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useBanner: (props: any) => {
+    id: string;
+    banner: null;
+} | {
+    id: string;
+    banner: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+};

package/dist/formField/hooks/useBanner.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBanner = void 0;
+const react_1 = require("react");
+const getFormFieldBanner_1 = require("../utils/getFormFieldBanner");
+const useBanner = (props) => {
+    const bannerId = (0, react_1.useId)();
+    if (!props.children) {
+        return {
+            id: "",
+            banner: null
+        };
+    }
+    let formFieldBanner = (0, getFormFieldBanner_1.getFormFieldBanner)(props.children);
+    if (!formFieldBanner) {
+        return {
+            id: "",
+            banner: null
+        };
+    }
+    formFieldBanner = (0, react_1.cloneElement)(formFieldBanner, { id: bannerId });
+    return {
+        id: bannerId,
+        banner: formFieldBanner
+    };
+};
+exports.useBanner = useBanner;

package/dist/formField/hooks/useDisabled.d.ts

@@ -0,0 +1,15 @@
+import { ILoadingBase } from "../../commonHelpers/loading";
+export declare const useDisabled: (props: {
+    controller?: {
+        disabled?: boolean;
+    };
+    disabled?: boolean;
+} & Partial<ILoadingBase>) => {
+    controller: {
+        disabled?: boolean | undefined;
+    } | undefined;
+    disabled: boolean | undefined;
+} | {
+    controller?: undefined;
+    disabled?: undefined;
+};

package/dist/formField/hooks/useDisabled.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisabled = void 0;
+const loading_1 = require("../../commonHelpers/loading");
+const useDisabled = (props) => {
+    const controller = props.controller;
+    let disabled = props.disabled;
+    if ((0, loading_1.hasErrorProps)(props)) {
+        if (controller) {
+            controller.disabled = true;
+        }
+        else {
+            disabled = true;
+        }
+        return {
+            controller,
+            disabled
+        };
+    }
+    return {};
+};
+exports.useDisabled = useDisabled;

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

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { IReactFormItemController } from "../../commonHelpers/zenComponent";
+import { IFormFieldComponent, TFormField } from "../formField";
+import { Exclusive } from "../../commonHelpers/types/exclusive";
+import { IFormFieldBannerProps } from "../components/formFieldBanner";
+export type TErrorType = "text" | "banner";
+interface IUseErrorBase {
+    id: string;
+}
+interface IUseErrorText extends IUseErrorBase {
+    error: string | undefined | null;
+}
+interface IUseErrorBanner extends IUseErrorBase {
+    errorBanner: ReactElement<IFormFieldBannerProps> | null;
+}
+export type TUseError = Exclusive<IUseErrorText, IUseErrorBanner>;
+export declare const useError: (props: Partial<IReactFormItemController> & Partial<TFormField> & Pick<IFormFieldComponent, "bannerLabel">) => TUseError;
+export {};

package/dist/formField/hooks/useError.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useFormField_1 = require("../../commonHelpers/hooks/useFormField");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const formFieldBanner_1 = require("../components/formFieldBanner");
+const loading_1 = require("../../commonHelpers/loading");
+const useError = (props) => {
+    var _a, _b, _c, _d;
+    const errorId = (0, react_1.useId)();
+    const { fieldState } = (0, useFormField_1.useFormField)(props.controller);
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    if ((0, loading_1.hasErrorProps)(props)) {
+        const action = props.retry ? {
+            text: translate("Reload"),
+            onClick: props.retry
+        } : undefined;
+        return {
+            id: errorId,
+            errorBanner: (0, jsx_runtime_1.jsx)(formFieldBanner_1.FormFieldBanner, { multiline: false, action: action, type: "error", children: translate("Failed to load {0}").replace("{0}", props.bannerLabel || "") })
+        };
+    }
+    if ((!props.error && !((_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message)) || props.isReadOnly) {
+        if (props.isReadOnly) {
+            return {
+                id: "",
+                error: null
+            };
+        }
+        if (!((_b = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _b === void 0 ? void 0 : _b.message) && ((_c = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _c === void 0 ? void 0 : _c.type) === "required") {
+            return {
+                id: errorId,
+                error: translate("This field is required.")
+            };
+        }
+        return {
+            id: "",
+            error: null
+        };
+    }
+    const error = ((_d = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.error;
+    return {
+        id: error ? errorId : "",
+        error
+    };
+};
+exports.useError = useError;

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

@@ -0,0 +1,2 @@
+import { TFormFieldComponentProps } from "../formField";
+export declare const useLoading: <T>(props: TFormFieldComponentProps<T>, displayName?: string) => boolean;

package/dist/formField/hooks/useLoading.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoading = void 0;
+const COMPONENTS_WITH_OWN_LOADING = ["DropdownRaw"];
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+const useLoading = (props, displayName) => {
+    let isLoading = false;
+    if (COMPONENTS_WITH_OWN_LOADING.includes(displayName || "") && props.isReadOnly && props.isLoading) {
+        isLoading = true;
+    }
+    else if (!COMPONENTS_WITH_OWN_LOADING.includes(displayName || "") && props.isLoading) {
+        isLoading = true;
+    }
+    else {
+        isLoading = false;
+    }
+    return isLoading;
+};
+exports.useLoading = useLoading;

package/dist/formField/hooks/useReadonly.d.ts

@@ -0,0 +1 @@
+export declare const useReadonly: (props: any) => any;

package/dist/formField/hooks/useReadonly.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReadonly = void 0;
+const useMode_1 = require("../../formGroup/hooks/useMode");
+// TODO: add to documentation?
+const useReadonly = (props) => {
+    const mode = (0, useMode_1.useMode)();
+    return props.isReadOnly !== undefined ? props.isReadOnly : mode === "review";
+};
+exports.useReadonly = useReadonly;

package/dist/formField/hooks/useSkeleton.d.ts

@@ -0,0 +1,3 @@
+import { ISkeleton } from "../../skeleton/skeleton";
+import { TFormFieldComponentProps } from "../formField";
+export declare const useSkeleton: <T>(props: TFormFieldComponentProps<T>) => ISkeleton;

package/dist/formField/hooks/useSkeleton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSkeleton = void 0;
+const react_1 = require("react");
+const formFieldSkeleton_1 = require("../components/formFieldSkeleton");
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+const useSkeleton = (props) => {
+    var _a;
+    return ((_a = react_1.Children
+        .toArray(props.children)
+        .find(child => child.type && child.type === formFieldSkeleton_1.FormFieldSkeleton)) === null || _a === void 0 ? void 0 : _a.props) || {};
+};
+exports.useSkeleton = useSkeleton;

package/dist/formField/hooks/useTrailing.d.ts

@@ -0,0 +1,12 @@
+interface IUseTrailingProps {
+    trailing?: string;
+    isReadOnly?: boolean;
+}
+export declare const useTrailing: (props: IUseTrailingProps) => {
+    id: string;
+    trailing: null;
+} | {
+    id: string;
+    trailing: string;
+};
+export {};

package/dist/formField/hooks/useTrailing.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrailing = void 0;
+const react_1 = require("react");
+const useTrailing = (props) => {
+    const trailingId = (0, react_1.useId)();
+    if (!props.trailing) {
+        return {
+            id: "",
+            trailing: null
+        };
+    }
+    return {
+        id: trailingId,
+        trailing: props.trailing
+    };
+};
+exports.useTrailing = useTrailing;

package/dist/formField/hooks/useWidth.d.ts

@@ -0,0 +1,8 @@
+import { IFormField } from "../formField";
+export declare const useWidth: (props: IFormField) => {
+    width: string | number;
+    hasCustomWidth: boolean;
+} | {
+    hasCustomWidth: boolean;
+    width?: undefined;
+};

package/dist/formField/hooks/useWidth.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidth = void 0;
+const useWidth = (props) => {
+    const { width, isReadOnly } = props;
+    if (width && !isReadOnly) {
+        return { width, hasCustomWidth: true };
+    }
+    return { hasCustomWidth: false };
+};
+exports.useWidth = useWidth;

package/dist/formField/utils/getFormFieldBanner.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const getFormFieldBanner: (children?: React.ReactNode) => string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;

package/dist/formField/utils/getFormFieldBanner.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormFieldBanner = void 0;
+const react_1 = __importDefault(require("react"));
+const formFieldBanner_1 = require("../components/formFieldBanner");
+const getFormFieldBanner = (children) => {
+    if (!children) {
+        return null;
+    }
+    return react_1.default.Children.toArray(children).find((child) => {
+        if (!react_1.default.isValidElement(child)) {
+            return false;
+        }
+        return child.type === formFieldBanner_1.FormFieldBanner;
+    });
+};
+exports.getFormFieldBanner = getFormFieldBanner;

package/dist/formField/utils/rangeRawLabelCheck.d.ts

@@ -0,0 +1 @@
+export declare const rangeRawLabelCheck: (component: any, props: any) => boolean;

package/dist/formField/utils/rangeRawLabelCheck.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rangeRawLabelCheck = void 0;
+const rangeRawLabelCheck = (component, props) => {
+    if (component.name !== "RangeRaw") {
+        return true;
+    }
+    const { label, title } = props;
+    if (label && title) {
+        return true;
+    }
+    return false;
+};
+exports.rangeRawLabelCheck = rangeRawLabelCheck;

package/dist/formGroup/components/customRow/customRow.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./customRow.less";
+export interface ICustomRowProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const CustomRow: FC<ICustomRowProps>;

package/dist/formGroup/components/customRow/customRow.js

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

package/dist/formGroup/components/formGroupList.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+import { IFormFieldWithLabel } from "../../formField/formField";
+export interface IFormGroupList extends PropsWithChildren, Required<Pick<IFormFieldWithLabel, "label">>, Pick<IFormFieldWithLabel, "tooltip"> {
+}
+export declare const FormGroupList: FC<IFormGroupList>;

package/dist/formGroup/components/formGroupList.js

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

package/dist/formGroup/components/formGroupToggle.d.ts

@@ -0,0 +1,15 @@
+import { FC, PropsWithChildren } from "react";
+import { IReactFormItemController } from "../../commonHelpers/zenComponent";
+import { IFormFieldWithLabel } from "../../formField/formField";
+import { Exclusive } from "../../commonHelpers/types/exclusive";
+interface IFormGroupToggleBase extends Required<Pick<IFormFieldWithLabel, "label">>, Pick<IFormFieldWithLabel, "tooltip">, PropsWithChildren {
+}
+interface IFormGroupToggleWithController extends Required<IReactFormItemController>, IFormGroupToggleBase {
+}
+interface IFormGroupToggleDefault extends Partial<IReactFormItemController>, IFormGroupToggleBase {
+    value: boolean;
+    onChange: (val: boolean) => void;
+}
+export type TFormGroupToggle = Exclusive<IFormGroupToggleWithController, IFormGroupToggleDefault>;
+export declare const FormGroupToggle: FC<TFormGroupToggle>;
+export {};

package/dist/formGroup/components/formGroupToggle.js

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

package/dist/formGroup/components/list.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+import { IReactFormItemController } from "../../commonHelpers/zenComponent";
+import "./list.less";
+export interface IListProps extends PropsWithChildren, IReactFormItemController {
+}
+export declare const List: FC<IListProps>;

package/dist/formGroup/components/list.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getListClasses_1 = require("../utils/getListClasses");
+const formGroupItem_1 = require("../../formGroupItem/formGroupItem");
+const useColumns_1 = require("../../formLayout/hooks/useColumns");
+const formGroupProvider_1 = require("../utils/formGroupProvider");
+const useToggleList_1 = require("../hooks/useToggleList");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const List = ({ children }) => {
+    const { label, tooltip, labelAlign } = (0, react_1.useContext)(formGroupProvider_1.FormGroupContext);
+    const columns = (0, useColumns_1.useColumns)();
+    const { toggleList } = (0, useToggleList_1.useToggleList)({ children });
+    // TODO: classes without toggle?
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { tooltip: tooltip, value: label, className: (0, classNames_1.classNames)([(0, getListClasses_1.getListClasses)(labelAlign, columns, true), "zen-form-list-label"]) }), toggleList] });
+};
+exports.List = List;

package/dist/formGroup/components/listToggle/listToggle.d.ts

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

package/dist/formGroup/components/listToggle/listToggle.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useColumns_1 = require("../../../formLayout/hooks/useColumns");
+const toggleButton_1 = require("../../../toggleButton/toggleButton");
+const useMode_1 = require("../../hooks/useMode");
+const getToggleClasses_1 = require("../../utils/getToggleClasses");
+const reviewListToggle_1 = require("../reviewListToggle/reviewListToggle");
+const useFormFieldValues_1 = require("../../../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const formGroupProvider_1 = require("../../utils/formGroupProvider");
+const ListToggle = () => {
+    const { controller, toggle, onToggleChange, labelAlign } = (0, react_1.useContext)(formGroupProvider_1.FormGroupContext);
+    const { value = false, onChange } = (0, useFormFieldValues_1.useFormFieldValues)(controller, { value: toggle, onChange: onToggleChange });
+    const mode = (0, useMode_1.useMode)();
+    const columns = (0, useColumns_1.useColumns)();
+    const toggleAttributes = (0, react_1.useMemo)(() => controller !== undefined ? {
+        controller
+    } : {
+        checked: toggle,
+        onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value)
+    }, [controller, toggle, onChange, value]);
+    if (mode === "edit") {
+        return (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, Object.assign({}, toggleAttributes, { className: (0, getToggleClasses_1.getToggleClasses)(columns, labelAlign) }));
+    }
+    return (0, jsx_runtime_1.jsx)(reviewListToggle_1.ReviewListToggle, { value: value, className: (0, getToggleClasses_1.getToggleClasses)(columns, labelAlign) });
+};
+exports.ListToggle = ListToggle;

package/dist/formGroup/components/oneRow.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { IRow } from "../types";
+interface IOneRow extends IRow {
+}
+export declare const OneRow: FC<IOneRow>;
+export {};

package/dist/formGroup/components/oneRow.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formGroupItem_1 = require("../../formGroupItem/formGroupItem");
+const useRowElements_1 = require("../hooks/useRowElements");
+const OneRow = ({ state }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { control1, control2, id1, id2, customControl } = (0, useRowElements_1.useRowElements)(state);
+    if (customControl) {
+        return customControl;
+    }
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || id2, value: (_h = state.elements.label2) === null || _h === void 0 ? void 0 : _h.value, tooltip: (_j = state.elements.label2) === null || _j === void 0 ? void 0 : _j.tooltip, className: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control2] });
+};
+exports.OneRow = OneRow;