@geotab/zenith 3.3.0 → 3.4.0-beta.0

package/esm/dataGrid/emptySearchList/emptySearchList.js

@@ -1,7 +1,14 @@
 import { injectString } from "../../utils/localization/translationsDictionary";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../commonHelpers/classNames/classNames";
-import { ImageNothingFound } from "../../images/imageNothingFound";
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from "../../emptyState/emptyState";
 import { useLanguage } from "../../utils/localization/useLanguage";
 injectString("cs", "Try adjusting your search or filter.", "Zkuste upravit sv\xE9 vyhled\xE1v\xE1n\xED nebo filtr.");
 injectString("da-DK", "Try adjusting your search or filter.", "Pr\xF8v at justere din s\xF8gning eller dit filter.");
@@ -27,29 +34,14 @@ injectString("th", "Try adjusting your search or filter.", "\u0E25\u0E2D\u0E07\u
 injectString("tr", "Try adjusting your search or filter.", "Araman\u0131z\u0131 veya filtrenizi ayarlamay\u0131 deneyin.");
 injectString("zh-Hans", "Try adjusting your search or filter.", "\u5C1D\u8BD5\u8C03\u6574\u60A8\u7684\u641C\u7D22\u6216\u7B5B\u9009\u6761\u4EF6\u3002");
 injectString("zh-TW", "Try adjusting your search or filter.", "\u8ACB\u5617\u8A66\u8ABF\u6574\u60A8\u7684\u641C\u5C0B\u6216\u7BE9\u9078\u689D\u4EF6\u3002");
-export const EmptySearchList = ({
-  className,
-  children,
-  description,
-  image
-}) => {
+export const EmptySearchList = _a => {
+  var props = __rest(_a, []);
   const {
     translate
   } = useLanguage();
-  return _jsxs("div", {
-    className: classNames(["zen-empty-list-search", className || ""]),
-    children: [image ? _jsx("div", {
-      className: "zen-empty-list-search__image",
-      children: image
-    }) : _jsx(ImageNothingFound, {
-      className: "zen-empty-list-search__image"
-    }), _jsx("h2", {
-      className: "zen-empty-list-search__header",
-      children: children
-    }), _jsx("div", {
-      className: "zen-empty-list-search__description",
-      children: description || translate("Try adjusting your search or filter.")
-    })]
-  });
+  return _jsx(EmptyState, Object.assign({}, props, {
+    description: props.description || translate("Try adjusting your search or filter."),
+    children: props.children
+  }));
 };
 EmptySearchList.translations = ["Try adjusting your search or filter."];

package/esm/dateInputRaw/dateInputRaw.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./dateInputRaw.less";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IDateInputRawDefault, TDateInputRaw } from "./types";
 import { IChipsParent } from "../chip/chip";
 export interface IDateInputRaw extends IDateInputRawDefault, IChipsParent {

package/esm/dateRangeRaw/dateRangeRaw.d.ts

@@ -2,7 +2,7 @@
 import "./dateRangeRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { TButton } from "../button/buttonType";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IChipsParent } from "../chip/chip";
 import { TDateRangeOption, IDateRangeValue, IDateRangeValueOptionalLabel } from "./utils/dateRangeUtils";
 import { TDateRangeRaw } from "./types";

package/esm/dateRangeRaw/utils/dateRangeUtils.d.ts

@@ -28,6 +28,7 @@ export declare const GET_NEXT_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime,
 export declare const GET_LAST_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_SEVEN_DAYS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_THIRTY_DAYS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_YEAR_TO_DATE_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_TWELVE_MONTHS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_THREE_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_QUARTER_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;

package/esm/dateRangeRaw/utils/dateRangeUtils.js

@@ -240,6 +240,30 @@ injectString("th", "Last 30 days", "30 \u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E1
 injectString("tr", "Last 30 days", "Son 30 g\xFCn");
 injectString("zh-Hans", "Last 30 days", "\u6700\u8FD1 30 \u5929");
 injectString("zh-TW", "Last 30 days", "\u904E\u53BB 30 \u5929");
+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", "Last 12 months", "Posledn\xEDch 12 m\u011Bs\xEDc\u016F");
 injectString("da-DK", "Last 12 months", "Sidste 12 m\xE5neder");
 injectString("de", "Last 12 months", "Letzte 12 Monate");
@@ -534,6 +558,19 @@ export const GET_LAST_THIRTY_DAYS_OPTION = (toLocalDateTime = defaultToLocalDate
     })
   };
 };
+export const GET_YEAR_TO_DATE_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
+  const startDate = new Date(getNewStartDate(toLocalDateTime).getFullYear(), 0, 1);
+  const endDate = getNewEndDate(toLocalDateTime);
+  const from = toReverseOffsetDateTime(startDate);
+  const to = toReverseOffsetDateTime(endDate);
+  return {
+    label: translate("Year to date"),
+    getRange: () => ({
+      from,
+      to
+    })
+  };
+};
 export const GET_LAST_TWELVE_MONTHS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
   const startDate = addMonths(getNewStartDate(toLocalDateTime), -12);
   const endDate = getNewEndDate(toLocalDateTime);

package/esm/dropdownRaw/dropdownRaw.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./dropdownRaw.less";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { TDropdownRaw } from "./types";
 export declare const DropdownRaw: React.FC<TDropdownRaw & IFormFieldComponent>;
 export declare const TRANSLATIONS: string[];

package/esm/emptyState/emptyState.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import "./emptyState.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IEmptyState extends IZenComponentProps {
+    description?: string;
+    image?: ReactNode | React.FC;
+    children: ReactNode;
+}
+export declare const EmptyState: ({ className, children, description, image }: IEmptyState) => import("react/jsx-runtime").JSX.Element;

package/esm/emptyState/emptyState.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { ImageNothingFound } from "../images/imageNothingFound";
+import { useIcon } from "./hooks/useIcon";
+export const EmptyState = ({ className, children, description, image }) => {
+    const icon = useIcon(image);
+    return _jsxs("div", { className: classNames(["zen-empty-state", className || ""]), children: [icon
+                ? _jsx("div", { className: "zen-empty-state__image", children: icon })
+                : _jsx(ImageNothingFound, { className: "zen-empty-state__image" }), children && _jsx("h2", { className: "zen-empty-state__header", children: children }), description && _jsx("div", { className: "zen-empty-state__description", children: description })] });
+};

package/esm/emptyState/hooks/useIcon.d.ts

@@ -0,0 +1,2 @@
+import React, { ReactNode } from "react";
+export declare const useIcon: (icon: ReactNode | React.FC) => string | number | bigint | boolean | 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> | React.FunctionComponentElement<{}> | null | undefined;

package/esm/emptyState/hooks/useIcon.js

@@ -0,0 +1,10 @@
+import React from "react";
+export const useIcon = (icon) => {
+    const svgIcon = React.useMemo(() => {
+        if (typeof icon === "function") {
+            return React.createElement(icon, {});
+        }
+        return icon;
+    }, [icon]);
+    return svgIcon;
+};

package/esm/filtersBar/components/filtersBarPeriodPicker/getRangeOption.d.ts

@@ -24,6 +24,7 @@ declare const options: {
     LastQuarter: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
     LastYear: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
     ThisYear: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    YearToDate: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
 };
 export type TDateRangeName = keyof typeof options | "Custom";
 export declare function getRangeOption(option: TDateRangeOption, translate: (s: string) => string, toLocalDateTime?: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date): IDateRangeOptionId | undefined;

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

@@ -1,5 +1,5 @@
 import { injectString } from "../../../utils/localization/translationsDictionary";
-import { GET_LAST_MONTH_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_WEEK_OPTION, GET_NEXT_MONTH_OPTION, GET_NEXT_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_THIS_WEEK_OPTION, GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_THIS_YEAR_OPTION, GET_LAST_YEAR_OPTION } from "../../../dateRange/dateRangeUtils";
+import { GET_LAST_MONTH_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_YEAR_TO_DATE_OPTION, GET_LAST_WEEK_OPTION, GET_NEXT_MONTH_OPTION, GET_NEXT_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_THIS_WEEK_OPTION, GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_THIS_YEAR_OPTION, GET_LAST_YEAR_OPTION } from "../../../dateRange/dateRangeUtils";
 import { CUSTOM_CALENDAR_ID } from "../../../dateRangeInner/dateRangeInner";
 injectString("cs", "This week", "Tento t\xFDden");
 injectString("da-DK", "This week", "Denne uge");
@@ -289,6 +289,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");
@@ -425,7 +449,8 @@ const options = {
   "ThisQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
   "LastQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
   "LastYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime)
+  "ThisYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  "YearToDate": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_YEAR_TO_DATE_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime)
 };
 export function getRangeOption(option, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) {
   if (typeof option === "string") {
@@ -440,7 +465,7 @@ export function getRangeOption(option, translate, toLocalDateTime, firstDayOfWee
     id: option.label
   }, option);
 }
-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")];
 export 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");
@@ -725,7 +750,7 @@ export 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 DEFAULT_STEP_OPTION;

package/esm/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/esm/formField/components/formFieldAdditionalInfo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormFieldAssistiveError } from "./formFieldAssistiveError";
+import { FormFieldCounter } from "./formFieldCounter";
+export const FormFieldAdditionalInfo = ({ assistiveId, errorId, driveTextClass, error, assistive, counter, showAdditionalInfo }) => showAdditionalInfo ?
+    _jsxs("div", { className: "zen-form-field__secondary", children: [_jsx(FormFieldAssistiveError, { assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, value: error, assistive: assistive }), _jsx(FormFieldCounter, { value: counter })] })
+    : null;

package/esm/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/esm/formField/components/formFieldAssistiveError.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { FormFieldError } from "../../formFieldError/formFieldError";
+export const FormFieldAssistiveError = ({ assistiveId, errorId, driveTextClass, value, assistive }) => _jsx("div", { id: assistiveId || errorId, className: classNames([
+        "zen-form-field__text",
+        driveTextClass || "",
+        value ? "zen-form-field__text--error" : ""
+    ]), children: value ? _jsx(FormFieldError, { error: value }) : assistive });

package/esm/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/esm/formField/components/formFieldCounter.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const FormFieldCounter = ({ value }) => value ? _jsx("div", { className: classNames(["zen-form-field__length"]), children: value }) : null;

package/esm/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/esm/formField/components/formFieldLoading.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../../skeleton/skeleton";
+import { TextareaRaw } from "../../textareaRaw/textareaRaw";
+import { useFormFieldProps } from "../hooks/useFormFieldProps";
+export const DEFAULT_HEIGHT = 32;
+export const TEXTAREA_HEIGHT = 110;
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const FormFieldLoading = ({ skeletonProps, props, wrapperComponent }) => {
+    const { classes } = useFormFieldProps(props, wrapperComponent);
+    const height = wrapperComponent.displayName === TextareaRaw.displayName ? TEXTAREA_HEIGHT : DEFAULT_HEIGHT;
+    return _jsx(Skeleton, Object.assign({ className: classes, height: height }, skeletonProps));
+};

package/esm/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/esm/formField/components/formFieldWithLabel.js

@@ -1,9 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
 import { FormGroupItem } from "../../formGroupItem/formGroupItem";
 import { TrailingComponent } from "./trailingComponent";
-export const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId, showAdditionalInfo }) => {
+import { useContainer } from "../hooks/useContainer";
+import { FormSectionContext } from "../../formSection/utils/formSectionProvider";
+import { useFormFieldProps } from "../hooks/useFormFieldProps";
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const FormFieldWithLabel = ({ props, wrapperComponent }) => {
+    const { id, hasCustomWidth, widthObj, trailingId, trailing, showAdditionalInfo, classes } = useFormFieldProps(props, wrapperComponent);
+    const container = useContainer(props, wrapperComponent);
+    const labelClasses = classNames([props.labelClassesName || "", props.labelAlign === "top" ? "zen-form-field-label--top" : ""]);
+    const { isFormSection } = useContext(FormSectionContext);
+    // Form component
+    if (isFormSection) {
+        if (!hasCustomWidth) {
+            return _jsxs("div", { className: classes, children: [props.label && _jsx(FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] });
+        }
+        return _jsxs("div", { style: { display: "flex" }, children: [_jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] }), trailing && _jsx(TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
+    }
+    // Standalone component
     if (!hasCustomWidth) {
-        return _jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] });
+        return _jsxs("div", { className: classes, children: [props.label && _jsx(FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] });
     }
-    return _jsxs("div", { style: { display: "flex" }, children: [_jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] }), trailing && _jsx(TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
+    return _jsxs("div", { style: { display: "flex" }, children: [_jsxs("div", { className: classes, children: [props.label && _jsx(FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { style: widthObj, className: props.controlClassesName, children: container })] }), trailing && _jsx(TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
 };

package/esm/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/esm/formField/components/formFieldWithoutLabel.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrailingComponent } from "./trailingComponent";
-export const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId, showAdditionalInfo }) => {
+import { useContainer } from "../hooks/useContainer";
+import { useFormFieldProps } from "../hooks/useFormFieldProps";
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const FormFieldWithoutLabel = ({ props, wrapperComponent }) => {
+    const { hasCustomWidth, widthObj, trailing, trailingId, showAdditionalInfo, classes } = useFormFieldProps(props, wrapperComponent);
+    const container = useContainer(props, wrapperComponent);
     if (!hasCustomWidth) {
         return _jsx("div", { className: classes, style: widthObj, children: container });
     }

package/esm/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/esm/formField/components/isOldFormFieldComponent.js

@@ -0,0 +1,8 @@
+export const OLD_FORM_FIELD_COMPONENTS = [
+    "SearchInputRaw",
+    "SelectRaw",
+    "StepperRaw",
+    "TextAreaInput",
+    "TextInputRaw"
+];
+export const isOldFormFieldComponent = (component) => 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) || "");

package/esm/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/esm/formField/components/trailingComponent.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TrailingComponent = ({ id, value, hasAdditionalInfo }) => {
+export const TrailingComponent = ({ id, value, hasAdditionalInfo, hasCustomWidth }) => {
+    if (hasCustomWidth) {
+        return null;
+    }
+    if (!value) {
+        return null;
+    }
     if (hasAdditionalInfo) {
         return _jsx("div", { className: "zen-form-field__trailing-wrapper", children: _jsx("span", { className: "zen-form-field__trailing-text", id: id, children: value }) });
     }

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