@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/dist/formLayout/utils/isStaticElement.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStaticElement = void 0;
+const banner_1 = require("../../banner/banner");
+const formSection_1 = require("../../formSection/formSection");
+const formStepper_1 = require("../../formStepper/formStepper");
+const formStepperButtons_1 = require("../../formStepperButtons/formStepperButtons");
+const formLayoutSecondary_1 = require("../components/formLayoutSecondary");
+const formLayoutTitle_1 = require("../components/formLayoutTitle");
+const isStaticElement = (element) => {
+    if (element.type === formSection_1.FormSection && element.props.type === "modal") {
+        return true;
+    }
+    if (element.type === formStepper_1.FormStepper || element.type === formStepperButtons_1.FormStepperButtons || element.type === banner_1.Banner || element.type === formLayoutTitle_1.FormLayoutTitle || element.type === formLayoutSecondary_1.FormLayoutSecondary) {
+        return true;
+    }
+    return false;
+};
+exports.isStaticElement = isStaticElement;

package/dist/formSection/components/actions.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { IActions } from "../../card/components/actions";
+export interface IFormSectionActions extends IActions {
+}
+export declare const FormSectionActions: FC<IFormSectionActions>;

package/dist/formSection/components/actions.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionActions = void 0;
+const FormSectionActions = ({ children }) => children;
+exports.FormSectionActions = FormSectionActions;

package/dist/formSection/components/additional.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { IAdditionalSectionProps } from "./additionalSection";
+export interface IFormSectionAdditional extends IAdditionalSectionProps {
+}
+export declare const FormSectionAdditional: FC<IFormSectionAdditional>;

package/dist/formSection/components/additional.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionAdditional = void 0;
+const FormSectionAdditional = ({ children }) => children;
+exports.FormSectionAdditional = FormSectionAdditional;

package/dist/formSection/components/additionalSection.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import "./additionalSection.less";
+export interface IAdditionalSectionProps extends IZenComponentProps {
+    title: string;
+    titleOn?: string;
+    secondary?: string;
+}
+export declare const AdditionalSection: FC<IAdditionalSectionProps>;

package/dist/formSection/components/additionalSection.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdditionalSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const accordion_1 = require("../../accordion/accordion");
+const formSectionInner_1 = require("./formSectionInner");
+const useLabelAlign_1 = require("../../formGroup/hooks/useLabelAlign");
+const useMode_1 = require("../../formGroup/hooks/useMode");
+const AdditionalSection = ({ children, className, title, titleOn, secondary }) => {
+    const [opened, setOpened] = (0, react_1.useState)([]);
+    const labelAlign = (0, useLabelAlign_1.useLabelAlign)();
+    const id = (0, react_1.useId)();
+    const currentTitle = opened.includes(id) ? (titleOn || title) : title;
+    const mode = (0, useMode_1.useMode)();
+    const accordionItems = (0, react_1.useMemo)(() => [
+        {
+            id,
+            title: currentTitle,
+            content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [secondary && (0, jsx_runtime_1.jsx)("div", { className: "zen-additional-sub-section__secondary", children: secondary }), (0, jsx_runtime_1.jsx)(formSectionInner_1.FormSectionInner, { className: "zen-additional-sub-section__content", mode: mode, labelAlign: labelAlign, children: children })] })
+        }
+    ], [id, currentTitle, secondary, labelAlign, children, mode]);
+    const switchAccordion = (0, react_1.useCallback)((itemId) => {
+        if (itemId === opened[0]) {
+            setOpened([]);
+            return;
+        }
+        setOpened([itemId]);
+    }, [opened, setOpened]);
+    return ((0, jsx_runtime_1.jsx)(accordion_1.Accordion, { className: `zen-additional-sub-section ${className || ""}`, activeIds: opened, onItemClick: switchAccordion, data: accordionItems }));
+};
+exports.AdditionalSection = AdditionalSection;

package/dist/formSection/components/formSectionButton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { ICardButton } from "../../card/components/cardButton/cardButton";
+export interface IFormSectionButton extends ICardButton {
+}
+export declare const FormSectionButton: FC<IFormSectionButton>;

package/dist/formSection/components/formSectionButton.js

@@ -0,0 +1,21 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cardButton_1 = require("../../card/components/cardButton/cardButton");
+const FormSectionButton = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(cardButton_1.CardButton, Object.assign({}, props));
+};
+exports.FormSectionButton = FormSectionButton;

package/dist/formSection/components/formSectionCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { IFormSectionCard } from "../types";
+import "./formSectionCard.less";
+export declare const FormSectionCard: FC<Omit<IFormSectionCard, "type">>;

package/dist/formSection/components/formSectionCard.js

@@ -0,0 +1,53 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const card_1 = require("../../card/card");
+const react_2 = __importDefault(require("react"));
+const cardButton_1 = require("../../card/components/cardButton/cardButton");
+const formSection_1 = require("../formSection");
+const formSectionInner_1 = require("./formSectionInner");
+const useLoading_1 = require("../hooks/useLoading");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useError_1 = require("../hooks/useError");
+const formLayoutTitle_1 = require("../../formLayout/components/formLayoutTitle");
+const FormSectionCard = (_a) => {
+    var { labelAlign, header, children, className, title, mode, isError, isLoading, retry } = _a, cardProps = __rest(_a, ["labelAlign", "header", "children", "className", "title", "mode", "isError", "isLoading", "retry"]);
+    const actions = react_2.default.Children.toArray(children).filter((child) => child.type === formSection_1.FormSection.Actions);
+    const additional = react_2.default.Children.toArray(children).filter((child) => child.type === formSection_1.FormSection.Additional);
+    const content = react_2.default.Children.toArray(children).filter((child) => child.type !== formSection_1.FormSection.Actions && child.type !== formSection_1.FormSection.Additional);
+    const cardButtons = actions.length > 0 ? react_1.Children.toArray(actions[0].props.children)
+        .map((child, indx) => {
+        if (react_2.default.isValidElement(child) && child.type === formSection_1.FormSection.Button) {
+            const element = child;
+            return (0, jsx_runtime_1.jsx)(cardButton_1.CardButton, Object.assign({}, element.props), element.props.id || indx);
+        }
+        return child;
+    }) : [];
+    // TODO: tests
+    // 1. if both loading and error is true
+    // 2. loading only
+    // 3. error only
+    // 4. none
+    const { loadingContent } = (0, useLoading_1.useLoading)({ isLoading, type: "card" });
+    const { error } = (0, useError_1.useError)({ isError, isLoading, retry, type: "card" });
+    const contentClasses = (0, classNames_1.classNames)(["zen-form-section-card-content", loadingContent ? "zen-form-section-card-content--loading" : ""]);
+    // TODO: tests for header
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [header && (0, jsx_runtime_1.jsx)(formLayoutTitle_1.FormLayoutTitle, { className: className, value: header || "" }), (0, jsx_runtime_1.jsxs)(card_1.Card, Object.assign({ size: "L", autoHeight: true, title: title, className: className, cardContentClasses: contentClasses }, cardProps, { children: [actions.length > 0 && (0, jsx_runtime_1.jsx)(card_1.Card.Actions, { children: cardButtons }), loadingContent || error || (0, jsx_runtime_1.jsxs)(formSectionInner_1.FormSectionInner, { mode: mode, labelAlign: labelAlign, children: [content, additional.length > 0 && (0, jsx_runtime_1.jsx)(formSectionInner_1.FormSectionInner.Additional, Object.assign({}, additional[0].props, { children: additional[0].props.children }))] })] }))] });
+};
+exports.FormSectionCard = FormSectionCard;

package/dist/formSection/components/formSectionDefault.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { IFormSectionDefault } from "../types";
+export declare const FormSectionDefault: FC<IFormSectionDefault>;

package/dist/formSection/components/formSectionDefault.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.FormSectionDefault = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const formSection_1 = require("../formSection");
+const formSectionDefaultTitle_1 = require("./formSectionDefaultTitle");
+const formSectionInner_1 = require("./formSectionInner");
+const FormSectionDefault = ({ labelAlign, children, className, mode, type, title }) => {
+    const content = react_1.default.Children.toArray(children).filter((child) => child.type !== formSection_1.FormSection.Actions && child.type !== formSection_1.FormSection.Additional);
+    const additional = react_1.default.Children.toArray(children).filter((child) => child.type === formSection_1.FormSection.Additional);
+    return (0, jsx_runtime_1.jsxs)(formSectionInner_1.FormSectionInner, { type: type, labelAlign: labelAlign, className: className, mode: mode, children: [title && (0, jsx_runtime_1.jsx)(formSectionDefaultTitle_1.FormSectionDefaultTitle, { grid: 1284, children: title }), content, additional.length > 0 && (() => {
+                const additionalProps = additional[0].props;
+                return (0, jsx_runtime_1.jsx)(formSectionInner_1.FormSectionInner.Additional, Object.assign({}, additionalProps, { children: additionalProps.children }));
+            })()] });
+};
+exports.FormSectionDefault = FormSectionDefault;

package/dist/formSection/components/formSectionDefaultTitle.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { IZenGridItem, IZenComponentProps } from "../../commonHelpers/zenComponent";
+import "./formSectionDefaultTitle.less";
+interface IFormSectionDefaultTitle extends IZenGridItem, IZenComponentProps {
+}
+export declare const FormSectionDefaultTitle: FC<IFormSectionDefaultTitle>;
+export {};

package/dist/formSection/components/formSectionDefaultTitle.js

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

package/dist/formSection/components/formSectionInner.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./formSectionInner.less";
+import { IAdditionalSectionProps } from "./additionalSection";
+import { IFormContentProps } from "../types";
+export declare const FormSectionInner: FC<IFormContentProps> & {
+    Additional: FC<IAdditionalSectionProps>;
+};

package/dist/formSection/components/formSectionInner.js

@@ -0,0 +1,59 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionInner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useGridClasses_1 = require("../../gridLayout/hooks/useGridClasses");
+const gridLayoutProvider_1 = require("../../gridLayout/utils/gridLayoutProvider");
+const formSectionProvider_1 = require("../utils/formSectionProvider");
+const getClassName_1 = require("../utils/getClassName");
+const additionalSection_1 = require("./additionalSection");
+const types_1 = require("../types");
+const useColumns_1 = require("../../formLayout/hooks/useColumns");
+const formGroup_1 = require("../../formGroup/formGroup");
+// TODO: on/off labels?
+// eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
+const FormSectionInner = (_a) => {
+    var { children, type, className, labelAlign = "left", mode = "edit" } = _a, rest = __rest(_a, ["children", "type", "className", "labelAlign", "mode"]);
+    const childrenArr = (0, react_1.useMemo)(() => [], []);
+    const { screen } = (0, react_1.useContext)(gridLayoutProvider_1.GridLayoutContext);
+    const columns = (0, useColumns_1.useColumns)();
+    const componentClassNames = (0, react_1.useMemo)(() => (0, getClassName_1.getClassNames)(columns, screen, type, className), [columns, screen, type, className]);
+    const childrenInitial = react_1.Children.map(children, (child) => {
+        if (!child) {
+            return null;
+        }
+        if (child.type === additionalSection_1.AdditionalSection) {
+            // TODO: should only be rendered at the end of the form section?
+            const additionalSection = (0, react_1.cloneElement)(child, Object.assign(Object.assign({}, rest), { gridLgStart: 1, gridMdStart: 1, gridSmStart: 1, 
+                // TODO: is this reliable?
+                gridLg: 12 }));
+            return additionalSection;
+        }
+        if (child.type === formGroup_1.FormGroup) {
+            return child;
+        }
+        const component = (0, jsx_runtime_1.jsx)(formGroup_1.FormGroup, { children: child });
+        return component;
+    });
+    (0, useGridClasses_1.useGridClasses)(childrenInitial, childrenArr, {
+        desktop: columns === 1 ? 8 : 6,
+        tablet: columns === 1 ? 6 : 4,
+        mobile: 4
+    });
+    return (0, jsx_runtime_1.jsx)(formSectionProvider_1.FormSectionProvider, { labelAlign: labelAlign, mode: mode, type: type, children: (0, jsx_runtime_1.jsx)("div", { className: componentClassNames, children: childrenArr }) });
+};
+exports.FormSectionInner = FormSectionInner;
+exports.FormSectionInner.Additional = additionalSection_1.AdditionalSection;
+exports.FormSectionInner.displayName = types_1.FORM_SECTION;

package/dist/formSection/components/formSectionModal.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { IFormSectionModal } from "../types";
+export declare const FormSectionModal: FC<IFormSectionModal>;

package/dist/formSection/components/formSectionModal.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const modal_1 = require("../../modal/modal");
+const formSectionDefault_1 = require("./formSectionDefault");
+// TODO: readonly mode?
+const FormSectionModal = (props) => (0, jsx_runtime_1.jsxs)(modal_1.Modal, { className: "zen-form-section-modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, children: [(0, jsx_runtime_1.jsx)(formSectionDefault_1.FormSectionDefault, { type: "modal", labelAlign: props.labelAlign, className: props.className, children: props.children }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: props.onCancel, children: "Cancel" }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: props.onConfirm, children: "Confirm" })] });
+exports.FormSectionModal = FormSectionModal;

package/dist/formSection/formSection.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { IFormSectionActions } from "./components/actions";
+import { IFormSectionAdditional } from "./components/additional";
+import { IFormSectionButton } from "./components/formSectionButton";
+import { TFormSection } from "./types";
+export declare const FormSection: FC<TFormSection> & {
+    Actions: FC<IFormSectionActions>;
+} & {
+    Additional: FC<IFormSectionAdditional>;
+} & {
+    Button: FC<IFormSectionButton>;
+};

package/dist/formSection/formSection.js

@@ -0,0 +1,48 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const actions_1 = require("./components/actions");
+const additional_1 = require("./components/additional");
+const formSectionButton_1 = require("./components/formSectionButton");
+const formSectionDefault_1 = require("./components/formSectionDefault");
+const formSectionCard_1 = require("./components/formSectionCard");
+const formSectionModal_1 = require("./components/formSectionModal");
+const isModalSection_1 = require("./utils/isModalSection");
+const useMode_1 = require("../formGroup/hooks/useMode");
+const useSectionType_1 = require("../formGroup/hooks/useSectionType");
+const useLabelAlign_1 = require("../formGroup/hooks/useLabelAlign");
+// TODO: modal interface
+// isOpen, onClose, title, actions?
+// TODO: separate component?
+// TODO: add exclusive interface
+// TODO: better types for 3 elements?
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const FormSection = (props) => {
+    const mode = (0, useMode_1.useMode)(props.mode);
+    const type = (0, useSectionType_1.useSectionType)(props.type);
+    const labelAlign = (0, useLabelAlign_1.useLabelAlign)(props.labelAlign);
+    if (type === "card") {
+        const _a = props, { className } = _a, cardProps = __rest(_a, ["className"]);
+        return (0, jsx_runtime_1.jsx)(formSectionCard_1.FormSectionCard, Object.assign({ mode: mode, labelAlign: labelAlign, className: className }, cardProps, { children: props.children }));
+    }
+    if ((0, isModalSection_1.isModalSection)(props)) {
+        return (0, jsx_runtime_1.jsx)(formSectionModal_1.FormSectionModal, { type: "modal", isOpen: props.isOpen, onClose: props.onClose, title: props.title, labelAlign: labelAlign, className: props.className, onConfirm: props.onConfirm, onCancel: props.onCancel, children: props.children });
+    }
+    return (0, jsx_runtime_1.jsx)(formSectionDefault_1.FormSectionDefault, { mode: mode, title: props.title, labelAlign: labelAlign, className: props.className, children: props.children });
+};
+exports.FormSection = FormSection;
+exports.FormSection.Actions = actions_1.FormSectionActions;
+exports.FormSection.Additional = additional_1.FormSectionAdditional;
+exports.FormSection.Button = formSectionButton_1.FormSectionButton;

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

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

package/dist/formSection/hooks/useError.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const banner_1 = require("../../banner/banner");
+const card_1 = require("../../card/card");
+const loading_1 = require("../../commonHelpers/loading");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const useError = (props) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    if (!(0, loading_1.hasErrorProps)(props)) {
+        return {
+            error: null
+        };
+    }
+    const action = props.retry ? {
+        text: translate("Reload"),
+        onClick: props.retry
+    } : undefined;
+    if (props.type === "card") {
+        return {
+            // TODO: add translations
+            error: (0, jsx_runtime_1.jsx)(card_1.Card.Content, { children: (0, jsx_runtime_1.jsx)(banner_1.Banner, { className: "zen-form-section-error-banner", action: action, multiline: true, header: translate("Failed to load section"), type: "error", children: translate("Please reload this section to try again. If the issue persists, contact Support.") }) })
+        };
+    }
+    return {
+        // TODO: add translations
+        // TODO: should be support it for non-card?
+        error: (0, jsx_runtime_1.jsx)(banner_1.Banner, { multiline: true, header: translate("Failed to load section"), type: "error", children: translate("Please reload this section to try again. If the issue persists, contact Support.") })
+    };
+};
+exports.useError = useError;

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

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

package/dist/formSection/hooks/useLoading.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const card_1 = require("../../card/card");
+const skeleton_1 = require("../../skeleton/skeleton");
+const useLoading = (props) => {
+    if (!props.isLoading) {
+        return {
+            loadingContent: null
+        };
+    }
+    if (props.type === "card") {
+        return {
+            loadingContent: (0, jsx_runtime_1.jsxs)(card_1.Card.Content, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 32 }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 32 }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 32 })] })
+        };
+    }
+    return {
+        loadingContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 32 }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 32 }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 32 })] })
+    };
+};
+exports.useLoading = useLoading;

package/dist/formSection/types.d.ts

@@ -0,0 +1,35 @@
+import { ICard } from "../card/card";
+import { ILoadingBase } from "../commonHelpers/loading";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IZenComponentProps, IZenFormLayoutItem } from "../commonHelpers/zenComponent";
+import { TLabelAlign } from "../formField/formField";
+import { TFormLayoutMode } from "../formLayout/types";
+export declare const FORM_SECTION = "FORM_SECTION";
+export type TFormSectionMode = TFormLayoutMode;
+export interface IFormContentProps extends IZenComponentProps {
+    labelAlign?: TLabelAlign;
+    mode?: TFormSectionMode;
+    type?: TFormSectionType;
+}
+export type TFormSectionType = "inline" | "card" | "modal" | undefined;
+export interface IFormSectionBase extends IZenComponentProps, IZenFormLayoutItem, ILoadingBase {
+    labelAlign?: TLabelAlign;
+    type?: TFormSectionType;
+    mode?: TFormSectionMode;
+    title?: string;
+}
+export interface IFormSectionDefault extends IFormSectionBase {
+    type?: "inline" | undefined;
+}
+export interface IFormSectionCard extends IFormSectionBase, Pick<ICard, "icon" | "secondary" | "tooltip" | "link"> {
+    type?: "card" | undefined;
+    header?: string;
+}
+export interface IFormSectionModal extends IFormSectionBase {
+    type?: "modal" | undefined;
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export type TFormSection = Exclusive<IFormSectionCard, IFormSectionBase> & Exclusive<IFormSectionModal, IFormSectionBase> & Exclusive<IFormSectionDefault, IFormSectionBase>;

package/dist/formSection/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FORM_SECTION = void 0;
+exports.FORM_SECTION = "FORM_SECTION";

package/dist/formSection/utils/formSectionProvider.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from "react";
+import { TFormSectionMode, TFormSectionType } from "../types";
+import { TLabelAlign } from "../../formField/formField";
+export interface IFormSectionProviderProps extends PropsWithChildren {
+    isFormSection?: boolean;
+    labelAlign?: TLabelAlign;
+    mode?: TFormSectionMode;
+    type: TFormSectionType;
+}
+export declare const FormSectionContext: import("react").Context<IFormSectionProviderProps>;
+export declare const FormSectionProvider: FC<IFormSectionProviderProps>;

package/dist/formSection/utils/formSectionProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionProvider = exports.FormSectionContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.FormSectionContext = (0, react_1.createContext)({
+    labelAlign: undefined,
+    mode: undefined,
+    type: undefined,
+    isFormSection: false
+});
+const FormSectionProvider = ({ children, labelAlign = "left", mode = undefined, type = "card" }) => (0, jsx_runtime_1.jsx)(exports.FormSectionContext.Provider, { value: { labelAlign, mode, type, isFormSection: true }, children: children });
+exports.FormSectionProvider = FormSectionProvider;

package/dist/formSection/utils/getClassName.d.ts

@@ -0,0 +1,4 @@
+import { TFormLayoutColumns } from "../../formLayout/types";
+import { TGridScreen } from "../../gridLayout/utils/gridLayoutProvider";
+import { TFormSectionType } from "../types";
+export declare const getClassNames: (columns: TFormLayoutColumns, screen: TGridScreen, type: TFormSectionType, className?: string) => string;

package/dist/formSection/utils/getClassName.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClassNames = void 0;
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const getClassNames = (columns, screen, type, className = "") => (0, classNames_1.classNames)([
+    "zen-form-section",
+    `zen-form-section--${screen}`,
+    className,
+    columns === 1 ? "zen-form-section--one-column" : "zen-form-section--two-column",
+    type === "modal" ? "zen-form-section--modal" : ""
+]);
+exports.getClassNames = getClassNames;

package/dist/formSection/utils/isFormSection.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const isFormSection: (element: unknown) => element is import("react").FC<import("../types").IFormContentProps> & {
+    Additional: import("react").FC<import("../components/additionalSection").IAdditionalSectionProps>;
+};

package/dist/formSection/utils/isFormSection.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFormSection = void 0;
+const isFormSection = (element) => !!(element && typeof element === "object" && "type" in element && element.type.displayName === "FORM_SECTION");
+exports.isFormSection = isFormSection;

package/dist/formSection/utils/isModalSection.d.ts

@@ -0,0 +1,2 @@
+import { IFormSectionModal } from "../types";
+export declare const isModalSection: (props: unknown) => props is IFormSectionModal;

package/dist/formSection/utils/isModalSection.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isModalSection = void 0;
+const isModalSection = (props) => (typeof props === "object" &&
+    props !== null &&
+    "type" in props &&
+    props.type === "modal");
+exports.isModalSection = isModalSection;

package/dist/formStepper/formStepper.js

@@ -38,6 +38,6 @@ const FormStepper = ({ steps, onStepClicked, className = "", current, errors, se
     const isOptionalStep = isCompactMode && ((_a = adjustedSteps[activeStepIndex]) === null || _a === void 0 ? void 0 : _a.optional);
     const stepNumber = current === exports.STEPPER_LAST_STEP ? adjustedSteps.length : activeStepIndex + 1;
     const stepLabel = current === exports.STEPPER_LAST_STEP ? (_b = adjustedSteps[activeStepIndex - 1]) === null || _b === void 0 ? void 0 : _b.label : (_c = adjustedSteps[activeStepIndex]) === null || _c === void 0 ? void 0 : _c.label;
-    return (0, jsx_runtime_1.jsxs)("div", { className: `zen-form-stepper ${className}`, role: "tablist", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => ((0, jsx_runtime_1.jsx)(formStep_1.FormStep, { id: step.id, label: step.label, isFirst: step.id === steps[0].id, value: indx + 1, onClick: isStepperNonClickable ? false : () => onStepClickedHandler(step.id), isError: errors === null || errors === void 0 ? void 0 : errors.includes(step.id), isCurrent: current === step.id, isComplete: indx < activeStepIndex, optional: step.optional, compact: isCompactMode }, step.id))) }), isCompactMode && (0, jsx_runtime_1.jsxs)("label", { className: "zen-form-stepper__mobile-labels", children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(stepNumber)).replace("{1}", String(adjustedSteps.length)) }), (0, jsx_runtime_1.jsx)("span", { title: stepLabel, className: "zen-form-stepper__mobile-label", children: stepLabel }), (0, jsx_runtime_1.jsx)("span", { title: translate("Optional"), className: `zen-form-stepper__mobile-secondary-label ${isOptionalStep ? "zen-form-stepper__mobile-secondary-label--visible" : ""}`, children: translate("Optional") })] })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: `zen-form-stepper ${isMobile ? "zen-form-stepper--mobile" : ""} ${className}`, role: "tablist", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => ((0, jsx_runtime_1.jsx)(formStep_1.FormStep, { id: step.id, label: step.label, isFirst: step.id === steps[0].id, value: indx + 1, onClick: isStepperNonClickable ? false : () => onStepClickedHandler(step.id), isError: errors === null || errors === void 0 ? void 0 : errors.includes(step.id), isCurrent: current === step.id, isComplete: indx < activeStepIndex, optional: step.optional, compact: isCompactMode }, step.id))) }), isCompactMode && (0, jsx_runtime_1.jsxs)("label", { className: "zen-form-stepper__mobile-labels", children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(stepNumber)).replace("{1}", String(adjustedSteps.length)) }), (0, jsx_runtime_1.jsx)("span", { title: stepLabel, className: "zen-form-stepper__mobile-label", children: stepLabel }), (0, jsx_runtime_1.jsx)("span", { title: translate("Optional"), className: `zen-form-stepper__mobile-secondary-label ${isOptionalStep ? "zen-form-stepper__mobile-secondary-label--visible" : ""}`, children: translate("Optional") })] })] });
 };
 exports.FormStepper = FormStepper;

package/dist/formStepper/hooks/useFormStepper.d.ts

@@ -0,0 +1,6 @@
+import { IFormStepper } from "../formStepper";
+import { IFormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+export interface IUseFormStepperProps extends Omit<IFormStepper, "current" | "setCurrent">, Omit<IFormStepperButtons, "current" | "setCurrent"> {
+    initialStep?: string;
+}
+export declare const useFormStepper: ({ initialStep, steps, ...rest }: IUseFormStepperProps) => IFormStepper & IFormStepperButtons;

package/dist/formStepper/hooks/useFormStepper.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormStepper = void 0;
+const react_1 = require("react");
+// TODO: add tests
+const useFormStepper = (_a) => {
+    var { initialStep, steps } = _a, rest = __rest(_a, ["initialStep", "steps"]);
+    const [current, setCurrent] = (0, react_1.useState)(initialStep || steps[0].id);
+    return Object.assign(Object.assign({}, rest), { steps,
+        current,
+        setCurrent });
+};
+exports.useFormStepper = useFormStepper;