@geotab/zenith 3.3.0 → 3.4.0-beta.0

package/dist/filtersBar/components/filtersBarPeriodPicker/getRangeOption.js

@@ -297,6 +297,30 @@ injectString("th", "Last 12 months", "12 \u0E40\u0E14\u0E37\u0E2D\u0E19\u0E17\u0
 injectString("tr", "Last 12 months", "Son 12 ay");
 injectString("zh-Hans", "Last 12 months", "\u6700\u8FD1 12 \u4E2A\u6708");
 injectString("zh-TW", "Last 12 months", "\u904E\u53BB 12 \u500B\u6708");
+injectString("cs", "Year to date", "Od za\u010D\xE1tku roku");
+injectString("da-DK", "Year to date", "\xC5r til dato");
+injectString("de", "Year to date", "Seit Jahresbeginn");
+injectString("en", "Year to date", "Year to date");
+injectString("es", "Year to date", "A\xF1o a la fecha");
+injectString("fi-FI", "Year to date", "Vuoden alusta");
+injectString("fr", "Year to date", "Cumul jusqu\u2019\xE0 ce jour");
+injectString("fr-FR", "Year to date", "L\u2019ann\xE9e pass\xE9e");
+injectString("hu-HU", "Year to date", "\xC9v a mai napig");
+injectString("id", "Year to date", "Tahun hingga saat ini");
+injectString("it", "Year to date", "Dall'inizio dell'anno");
+injectString("ja", "Year to date", "\u7D2F\u8A08");
+injectString("ko-KR", "Year to date", "\uC62C\uD574 \uD604\uC7AC\uAE4C\uC9C0");
+injectString("ms", "Year to date", "Tahun ini hingga tarikh ini");
+injectString("nb-NO", "Year to date", "\xC5r til dato");
+injectString("nl", "Year to date", "Jaar tot heden");
+injectString("pl", "Year to date", "Od pocz\u0105tku roku");
+injectString("pt-BR", "Year to date", "Acumulado no ano");
+injectString("sk-SK", "Year to date", "Rok od za\u010Diatku");
+injectString("sv", "Year to date", "\xC5r till dagens datum");
+injectString("th", "Year to date", "\u0E15\u0E49\u0E19\u0E1B\u0E35\u0E16\u0E36\u0E07\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19");
+injectString("tr", "Year to date", "Y\u0131lba\u015F\u0131ndan bug\xFCne kadar");
+injectString("zh-Hans", "Year to date", "\u5E74\u521D\u81F3\u4ECA");
+injectString("zh-TW", "Year to date", "\u5E74\u521D\u81F3\u4ECA");
 injectString("cs", "Custom", "Vlastn\xED");
 injectString("da-DK", "Custom", "Brugerdefineret");
 injectString("de", "Custom", "Individuell");
@@ -433,7 +457,8 @@ const options = {
   "ThisQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_QUARTER_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
   "LastQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_QUARTER_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
   "LastYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_YEAR_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_YEAR_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime)
+  "ThisYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_YEAR_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  "YearToDate": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_YEAR_TO_DATE_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime)
 };
 function getRangeOption(option, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) {
   if (typeof option === "string") {
@@ -449,7 +474,7 @@ function getRangeOption(option, translate, toLocalDateTime, firstDayOfWeek, toRe
   }, option);
 }
 exports.getRangeOption = getRangeOption;
-const getSecondaryLabelOptions = translate => ["ThisWeek", "NextWeek", "LastWeek", "ThisMonth", "LastMonth", "NextMonth", "LastThreeMonths", "LastYear", "ThisYear", "ThisQuarter", "LastQuarter", "LastTwelveMonths", translate("This week"), translate("Next week"), translate("Last week"), translate("This month"), translate("Last month"), translate("Next month"), translate("Last 3 months"), translate("Last year"), translate("This year"), translate("This quarter"), translate("Last quarter"), translate("Last 12 months")];
+const getSecondaryLabelOptions = translate => ["ThisWeek", "NextWeek", "LastWeek", "ThisMonth", "LastMonth", "NextMonth", "LastThreeMonths", "LastYear", "ThisYear", "ThisQuarter", "LastQuarter", "LastTwelveMonths", "YearToDate", translate("This week"), translate("Next week"), translate("Last week"), translate("This month"), translate("Last month"), translate("Next month"), translate("Last 3 months"), translate("Last year"), translate("This year"), translate("This quarter"), translate("Last quarter"), translate("Last 12 months"), translate("Year to date")];
 const getRangeOptionsArray = (initialOptions, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime, customLabel, isPrevRangeCustom, customGetRangeOptions) => {
   const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime)).filter(option => !!option);
   const hasCustomOption = customLabel || initialOptions.includes("Custom");
@@ -737,7 +762,7 @@ const getDateRangeAdjustedStep = (translate, label) => {
   const periodDayAdjusted = ["Today", "Yesterday", translate("Today"), translate("Yesterday")];
   const periodSevenDaysAdjusted = ["ThisWeek", "NextWeek", "LastWeek", "LastSevenDays", translate("This week"), translate("Next week"), translate("Last week"), translate("Last 7 days")];
   const periodThirtyDaysAdjusted = ["LastThirtyDays", translate("Last 30 days")];
-  const yearAdjusted = ["LastYear", "ThisYear", "LastTwelveMonths", translate("Last 12 months"), translate("Last year"), translate("This year")];
+  const yearAdjusted = ["LastYear", "ThisYear", "LastTwelveMonths", "YearToDate", translate("Last 12 months"), translate("Last year"), translate("This year"), translate("Year to date")];
   const quarterAdjusted = ["ThisQuarter", "LastQuarter", translate("This quarter"), translate("Last quarter")];
   if (!label) {
     return exports.DEFAULT_STEP_OPTION;

package/dist/formField/components/formFieldAdditionalInfo.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+interface IFormFieldAdditionalInfoProps {
+    assistiveId?: string;
+    errorId: string;
+    driveTextClass?: string;
+    error?: string | null | undefined;
+    assistive?: string | null;
+    counter?: string | number | React.ReactElement;
+    showAdditionalInfo?: boolean;
+}
+export declare const FormFieldAdditionalInfo: FC<IFormFieldAdditionalInfoProps>;
+export {};

package/dist/formField/components/formFieldAdditionalInfo.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldAdditionalInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formFieldAssistiveError_1 = require("./formFieldAssistiveError");
+const formFieldCounter_1 = require("./formFieldCounter");
+const FormFieldAdditionalInfo = ({ assistiveId, errorId, driveTextClass, error, assistive, counter, showAdditionalInfo }) => showAdditionalInfo ?
+    (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)(formFieldAssistiveError_1.FormFieldAssistiveError, { assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, value: error, assistive: assistive }), (0, jsx_runtime_1.jsx)(formFieldCounter_1.FormFieldCounter, { value: counter })] })
+    : null;
+exports.FormFieldAdditionalInfo = FormFieldAdditionalInfo;

package/dist/formField/components/formFieldAssistiveError.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+interface IFormFieldAssistiveError {
+    assistiveId?: string;
+    errorId: string;
+    driveTextClass?: string;
+    value?: string | null | undefined;
+    assistive?: string | null;
+}
+export declare const FormFieldAssistiveError: FC<IFormFieldAssistiveError>;
+export {};

package/dist/formField/components/formFieldAssistiveError.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldAssistiveError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const formFieldError_1 = require("../../formFieldError/formFieldError");
+const FormFieldAssistiveError = ({ assistiveId, errorId, driveTextClass, value, assistive }) => (0, jsx_runtime_1.jsx)("div", { id: assistiveId || errorId, className: (0, classNames_1.classNames)([
+        "zen-form-field__text",
+        driveTextClass || "",
+        value ? "zen-form-field__text--error" : ""
+    ]), children: value ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: value }) : assistive });
+exports.FormFieldAssistiveError = FormFieldAssistiveError;

package/dist/formField/components/formFieldCounter.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface IFormFieldCounterProps {
+    value?: string | number | React.ReactElement;
+}
+export declare const FormFieldCounter: FC<IFormFieldCounterProps>;
+export {};

package/dist/formField/components/formFieldCounter.js

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

package/dist/formField/components/formFieldLoading.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Skeleton } from "../../skeleton/skeleton";
+import { TFormFieldComponentProps } from "../formField";
+export declare const DEFAULT_HEIGHT = 32;
+export declare const TEXTAREA_HEIGHT = 110;
+interface IFormFieldLoadingProps<T> {
+    skeletonProps?: Partial<React.ComponentProps<typeof Skeleton>>;
+    props: TFormFieldComponentProps<T>;
+    wrapperComponent: React.FC<T>;
+}
+export declare const FormFieldLoading: <T>({ skeletonProps, props, wrapperComponent }: IFormFieldLoadingProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/formField/components/formFieldLoading.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldLoading = exports.TEXTAREA_HEIGHT = exports.DEFAULT_HEIGHT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skeleton_1 = require("../../skeleton/skeleton");
+const textareaRaw_1 = require("../../textareaRaw/textareaRaw");
+const useFormFieldProps_1 = require("../hooks/useFormFieldProps");
+exports.DEFAULT_HEIGHT = 32;
+exports.TEXTAREA_HEIGHT = 110;
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+const FormFieldLoading = ({ skeletonProps, props, wrapperComponent }) => {
+    const { classes } = (0, useFormFieldProps_1.useFormFieldProps)(props, wrapperComponent);
+    const height = wrapperComponent.displayName === textareaRaw_1.TextareaRaw.displayName ? exports.TEXTAREA_HEIGHT : exports.DEFAULT_HEIGHT;
+    return (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ className: classes, height: height }, skeletonProps));
+};
+exports.FormFieldLoading = FormFieldLoading;

package/dist/formField/components/formFieldWithLabel.d.ts

@@ -1,11 +1,8 @@
-export declare const FormFieldWithLabel: ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId, showAdditionalInfo }: {
-    hasCustomWidth: any;
-    classes: any;
-    widthObj: any;
-    props: any;
-    id: any;
-    container: any;
-    trailing: any;
-    trailingId: any;
-    showAdditionalInfo: any;
-}) => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import { TFormFieldComponentProps } from "../formField";
+interface IFormFieldWithLabelProps<T> {
+    props: TFormFieldComponentProps<T>;
+    wrapperComponent: React.FC<T>;
+}
+export declare const FormFieldWithLabel: <T>({ props, wrapperComponent }: IFormFieldWithLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/formField/components/formFieldWithLabel.js

@@ -2,12 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldWithLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const formGroupItem_1 = require("../../formGroupItem/formGroupItem");
 const trailingComponent_1 = require("./trailingComponent");
-const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId, showAdditionalInfo }) => {
+const useContainer_1 = require("../hooks/useContainer");
+const formSectionProvider_1 = require("../../formSection/utils/formSectionProvider");
+const useFormFieldProps_1 = require("../hooks/useFormFieldProps");
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+const FormFieldWithLabel = ({ props, wrapperComponent }) => {
+    const { id, hasCustomWidth, widthObj, trailingId, trailing, showAdditionalInfo, classes } = (0, useFormFieldProps_1.useFormFieldProps)(props, wrapperComponent);
+    const container = (0, useContainer_1.useContainer)(props, wrapperComponent);
+    const labelClasses = (0, classNames_1.classNames)([props.labelClassesName || "", props.labelAlign === "top" ? "zen-form-field-label--top" : ""]);
+    const { isFormSection } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);
+    // Form component
+    if (isFormSection) {
+        if (!hasCustomWidth) {
+            return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] });
+        }
+        return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
+    }
+    // Standalone component
     if (!hasCustomWidth) {
-        return (0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] });
+        return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] });
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
+    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { style: widthObj, className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
 };
 exports.FormFieldWithLabel = FormFieldWithLabel;

package/dist/formField/components/formFieldWithoutLabel.d.ts

@@ -1,9 +1,8 @@
-export declare const FormFieldWithoutLabel: ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId, showAdditionalInfo }: {
-    hasCustomWidth: any;
-    classes: any;
-    widthObj: any;
-    container: any;
-    trailing: any;
-    trailingId: any;
-    showAdditionalInfo: any;
-}) => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import { TFormFieldComponentProps } from "../formField";
+interface IFormFieldWithoutLabelProps<T> {
+    props: TFormFieldComponentProps<T>;
+    wrapperComponent: React.FC<T>;
+}
+export declare const FormFieldWithoutLabel: <T>({ props, wrapperComponent }: IFormFieldWithoutLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/formField/components/formFieldWithoutLabel.js

@@ -3,7 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldWithoutLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const trailingComponent_1 = require("./trailingComponent");
-const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId, showAdditionalInfo }) => {
+const useContainer_1 = require("../hooks/useContainer");
+const useFormFieldProps_1 = require("../hooks/useFormFieldProps");
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+const FormFieldWithoutLabel = ({ props, wrapperComponent }) => {
+    const { hasCustomWidth, widthObj, trailing, trailingId, showAdditionalInfo, classes } = (0, useFormFieldProps_1.useFormFieldProps)(props, wrapperComponent);
+    const container = (0, useContainer_1.useContainer)(props, wrapperComponent);
     if (!hasCustomWidth) {
         return (0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container });
     }

package/dist/formField/components/isOldFormFieldComponent.d.ts

@@ -0,0 +1,2 @@
+export declare const OLD_FORM_FIELD_COMPONENTS: string[];
+export declare const isOldFormFieldComponent: (component?: React.FC) => boolean;

package/dist/formField/components/isOldFormFieldComponent.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOldFormFieldComponent = exports.OLD_FORM_FIELD_COMPONENTS = void 0;
+exports.OLD_FORM_FIELD_COMPONENTS = [
+    "SearchInputRaw",
+    "SelectRaw",
+    "StepperRaw",
+    "TextAreaInput",
+    "TextInputRaw"
+];
+const isOldFormFieldComponent = (component) => exports.OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.displayName) || "") || exports.OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.name) || "");
+exports.isOldFormFieldComponent = isOldFormFieldComponent;

package/dist/formField/components/trailingComponent.d.ts

@@ -1,8 +1,9 @@
 import { FC } from "react";
 interface ITrailingComponentProps {
     id: string;
-    value: string;
+    value?: string | null;
     hasAdditionalInfo: boolean;
+    hasCustomWidth?: boolean;
 }
 export declare const TrailingComponent: FC<ITrailingComponentProps>;
 export {};

package/dist/formField/components/trailingComponent.js

@@ -2,7 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TrailingComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TrailingComponent = ({ id, value, hasAdditionalInfo }) => {
+const TrailingComponent = ({ id, value, hasAdditionalInfo, hasCustomWidth }) => {
+    if (hasCustomWidth) {
+        return null;
+    }
+    if (!value) {
+        return null;
+    }
     if (hasAdditionalInfo) {
         return (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__trailing-wrapper", children: (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: id, children: value }) });
     }

package/dist/formField/formField.d.ts

@@ -1,39 +1,22 @@
-import React, { Ref, PropsWithChildren } from "react";
-import { Exclusive } from "../commonHelpers/types/exclusive";
+import React from "react";
 import { IReactFormItemController, IZenGridItem } from "../commonHelpers/zenComponent";
-import { ILoadingBase } from "../commonHelpers/loading";
+import { IFormFieldComponent, TFormField } from "./types";
 import "./formField.less";
-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>;
-}
+/**
+ * Use cases:
+ * As form component / as standalone component
+ *  1 with label
+ *  2 without label
+ *  3 with banner
+ *  4 with assistive text
+ *  5 with error
+ *  6 with trailing text
+ *  7 with loading state
+ *  8 loading error (banner)
+ *  9 with custom width
+ *  10 exceptions (RangeRaw)
+ *  11 with counter
+ */
 export type TFormFieldComponentProps<T> = Omit<T, "isError"> & TFormField & IZenGridItem & IReactFormItemController;
 export declare const FormField: {
     <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>): {
@@ -42,4 +25,3 @@ export declare const FormField: {
     };
     Banner: React.FC<import("./components/formFieldBanner").IFormFieldBannerProps>;
 };
-export {};

package/dist/formField/formField.js

@@ -13,92 +13,25 @@ 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");
-const trailingComponent_1 = require("./components/trailingComponent");
-const formSectionProvider_1 = require("../formSection/utils/formSectionProvider");
-const OLD_FORM_FIELD_COMPONENTS = [
-    "SearchInputRaw",
-    "SelectRaw",
-    "StepperRaw",
-    "TextAreaInput",
-    "TextInputRaw"
-];
-const isOldFormFieldComponent = (component) => 
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.displayName) || "") || OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.name) || "");
+const formFieldLoading_1 = require("./components/formFieldLoading");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const FormField = function FormFieldInner(WrappedComponent) {
-    // eslint-disable-next-line complexity
     const InnerFormField = (props) => {
-        const isMobile = (0, useMobile_1.useMobile)();
-        const ref = props.ref;
-        const { isFormSection } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);
-        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");
-        // TODO: Banner? Only it or assistive text?
-        const showAdditionalInfo = (error || assistive || counter) && !isReadonly;
-        const componentClassName = (0, classNames_1.classNames)(["zen-form-field__input", inputClassName || ""]);
-        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.jsxs)("div", { 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 })), 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: (0, classNames_1.classNames)(["zen-form-field__length"]), children: counter })
-                                                : ""] })
-                                    : null] }), !hasCustomWidth && trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), 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",
-            !isOldFormFieldComponent(WrappedComponent) ? "zen-form-field--new-component" : "",
-            isFormSection ? "zen-form-field--form-item" : "",
-            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));
+            return (0, jsx_runtime_1.jsx)(formFieldLoading_1.FormFieldLoading, { props: props, wrapperComponent: WrappedComponent, skeletonProps: 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, showAdditionalInfo: !!showAdditionalInfo });
+            return (0, jsx_runtime_1.jsx)(formFieldWithLabel_1.FormFieldWithLabel, { props: props, wrapperComponent: WrappedComponent });
         }
-        return (0, jsx_runtime_1.jsx)(formFieldWithoutLabel_1.FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId, showAdditionalInfo: !!showAdditionalInfo });
+        return (0, jsx_runtime_1.jsx)(formFieldWithoutLabel_1.FormFieldWithoutLabel, { props: props, wrapperComponent: WrappedComponent });
     };
     InnerFormField.displayName = "InnerFormField";
     return InnerFormField;

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

@@ -0,0 +1,2 @@
+import { TFormFieldComponentProps } from "../formField";
+export declare const useContainer: <T>(props: TFormFieldComponentProps<T>, wrapperComponent: React.FC<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/formField/hooks/useContainer.js

@@ -0,0 +1,47 @@
+"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.useContainer = 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 formFieldAdditionalInfo_1 = require("../components/formFieldAdditionalInfo");
+const trailingComponent_1 = require("../components/trailingComponent");
+const useAssistive_1 = require("./useAssistive");
+const useBanner_1 = require("./useBanner");
+const useDisabled_1 = require("./useDisabled");
+const useError_1 = require("./useError");
+const useReadonly_1 = require("./useReadonly");
+const useWidth_1 = require("./useWidth");
+const useFormFieldProps_1 = require("./useFormFieldProps");
+// eslint-disable-next-line
+const useContainer = (props, wrapperComponent) => {
+    const { id, wrapperComponent: WrappedComponent, trailing, trailingId, showAdditionalInfo } = (0, useFormFieldProps_1.useFormFieldProps)(props, wrapperComponent);
+    const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
+    const { id: errorId, error, errorBanner } = (0, useError_1.useError)(props);
+    const { id: bannerId, banner: bannerComp } = (0, useBanner_1.useBanner)(props);
+    const { id: assistiveId, assistive } = (0, useAssistive_1.useAssistive)(props);
+    const disabledProps = (0, useDisabled_1.useDisabled)(props);
+    const componentClassName = (0, classNames_1.classNames)(["zen-form-field__input", inputClassName || ""]);
+    const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
+    const isReadonly = (0, useReadonly_1.useReadonly)(props);
+    const { hasCustomWidth } = (0, useWidth_1.useWidth)(props);
+    const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
+    const isInputContainerHidden = isReadonly && props.isError;
+    const ref = props.ref;
+    const banner = errorBanner || bannerComp;
+    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.jsxs)("div", { 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 })), (0, jsx_runtime_1.jsx)(formFieldAdditionalInfo_1.FormFieldAdditionalInfo, { assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isReadonly, isInputContainerHidden, trailing, WrappedComponent, rest, disabledProps, id, componentClassName, ref, props.isError, error, ariaDescribedBy, assistiveId, errorId, driveTextClass, assistive, counter, showAdditionalInfo, hasCustomWidth, trailingId, banner]);
+    return container;
+};
+exports.useContainer = useContainer;

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

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { IReactFormItemController } from "../../commonHelpers/zenComponent";
-import { IFormFieldComponent, TFormField } from "../formField";
+import { IFormFieldComponent, TFormField } from "../types";
 import { Exclusive } from "../../commonHelpers/types/exclusive";
 import { IFormFieldBannerProps } from "../components/formFieldBanner";
 export type TErrorType = "text" | "banner";

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

@@ -0,0 +1,2 @@
+import { TFormFieldComponentProps } from "../formField";
+export declare const useFormFieldClasses: <T>(props: TFormFieldComponentProps<T>, component: React.FC<T>) => string;

package/dist/formField/hooks/useFormFieldClasses.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldClasses = void 0;
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const formSectionProvider_1 = require("../../formSection/utils/formSectionProvider");
+const isOldFormFieldComponent_1 = require("../components/isOldFormFieldComponent");
+const useBanner_1 = require("./useBanner");
+const useError_1 = require("./useError");
+const rangeRawLabelCheck_1 = require("../utils/rangeRawLabelCheck");
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+const useFormFieldClasses = (props, component) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const { isFormSection } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);
+    const { banner: bannerComp } = (0, useBanner_1.useBanner)(props);
+    const { errorBanner } = (0, useError_1.useError)(props);
+    const banner = errorBanner || bannerComp;
+    const classes = (0, classNames_1.classNames)([
+        "zen-form-field",
+        isMobile ? "zen-form-field--mobile" : "",
+        banner ? "zen-form-field--with-banner" : "",
+        (!props.label || !(0, rangeRawLabelCheck_1.rangeRawLabelCheck)(component, props)) ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
+        !(0, isOldFormFieldComponent_1.isOldFormFieldComponent)(component) ? "zen-form-field--new-component" : "",
+        isFormSection ? "zen-form-field--form-item" : "",
+        props.className || ""
+    ]);
+    return classes;
+};
+exports.useFormFieldClasses = useFormFieldClasses;

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

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { TFormFieldComponentProps } from "../formField";
+export declare const useFormFieldProps: <T>(props: TFormFieldComponentProps<T>, wrapperComponent: FC<T>) => {
+    id: string;
+    wrapperComponent: FC<T>;
+    props: TFormFieldComponentProps<T>;
+    hasCustomWidth: boolean;
+    widthObj: {
+        width: string | number;
+    } | {
+        width?: undefined;
+    };
+    trailingId: string;
+    trailing: string | undefined;
+    showAdditionalInfo: boolean;
+    classes: string;
+};