@geotab/zenith 3.1.1-beta.3 → 3.1.1-beta.4

package/dist/formField/formField.d.ts

@@ -7,6 +7,7 @@ export type TLabelAlign = "left" | "top";
 interface IFormFieldBase extends PropsWithChildren {
     className?: string;
     inputClassName?: string;
+    wrapperClassName?: string;
     error?: string;
     assistive?: string;
     counter?: string;

package/dist/formField/formField.js

@@ -33,6 +33,7 @@ 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 useClasses_1 = require("./hooks/useClasses");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const FormField = function FormFieldInner(WrappedComponent) {
     // eslint-disable-next-line complexity
@@ -51,11 +52,12 @@ const FormField = function FormFieldInner(WrappedComponent) {
         // TODO: add tests
         const banner = errorBanner || bannerComp;
         const isInputContainerHidden = isReadonly && props.isError;
-        const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
+        const { inputClassName, counter } = props, rest = __rest(props, ["inputClassName", "counter"]);
         const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
+        const { componentClasses, wrapperClasses } = (0, useClasses_1.useClasses)(props, WrappedComponent);
         // 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 componentClassName = (0, classNames_1.classNames)(["zen-form-field__input", componentClasses || ""]);
         const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
         const localId = (0, react_1.useId)();
         const id = props.id || localId;
@@ -73,7 +75,7 @@ const FormField = function FormFieldInner(WrappedComponent) {
             isMobile ? "zen-form-field--mobile" : "",
             banner ? "zen-form-field--with-banner" : "",
             !props.label ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
-            className || ""
+            wrapperClasses || ""
         ]);
         if (isLoading) {
             const height = WrappedComponent.displayName === textareaRaw_1.TextareaRaw.displayName ? 110 : 32;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { TFormFieldComponentProps } from "../formField";
+interface IUseClasses {
+    wrapperClasses?: string;
+    componentClasses?: string;
+}
+export declare const useClasses: <T>(props: TFormFieldComponentProps<T>, wrapperComponent: React.FC<T>) => IUseClasses;
+export {};

package/dist/formField/hooks/useClasses.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClasses = void 0;
+const oldFormFieldComponents = [
+    "SearchInputRaw",
+    "SelectRaw",
+    "StepperRaw",
+    "TextAreaInput",
+    "TextInputRaw"
+];
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+const useClasses = (props, wrapperComponent) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (oldFormFieldComponents.includes((wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.displayName) || "") || oldFormFieldComponents.includes((wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.name) || "")) {
+        return {
+            wrapperClasses: props.wrapperClassName || props.className || "",
+            componentClasses: props.inputClassName || ""
+        };
+    }
+    return {
+        wrapperClasses: props.wrapperClassName || "",
+        componentClasses: props.inputClassName || props.className || ""
+    };
+};
+exports.useClasses = useClasses;

package/esm/formField/formField.d.ts

@@ -7,6 +7,7 @@ export type TLabelAlign = "left" | "top";
 interface IFormFieldBase extends PropsWithChildren {
     className?: string;
     inputClassName?: string;
+    wrapperClassName?: string;
     error?: string;
     assistive?: string;
     counter?: string;

package/esm/formField/formField.js

@@ -30,6 +30,7 @@ import { useLoading } from "./hooks/useLoading";
 import { useReadonly } from "./hooks/useReadonly";
 import { FormFieldWithLabel } from "./components/formFieldWithLabel";
 import { FormFieldWithoutLabel } from "./components/formFieldWithoutLabel";
+import { useClasses } from "./hooks/useClasses";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const FormField = function FormFieldInner(WrappedComponent) {
     // eslint-disable-next-line complexity
@@ -48,11 +49,12 @@ export const FormField = function FormFieldInner(WrappedComponent) {
         // TODO: add tests
         const banner = errorBanner || bannerComp;
         const isInputContainerHidden = isReadonly && props.isError;
-        const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
+        const { inputClassName, counter } = props, rest = __rest(props, ["inputClassName", "counter"]);
         const driveTextClass = useDriveClassName("zen-form-field__text");
+        const { componentClasses, wrapperClasses } = useClasses(props, WrappedComponent);
         // TODO: Banner? Only it or assistive text?
         const showAdditionalInfo = (error || assistive || counter) && !isReadonly;
-        const componentClassName = classNames(["zen-form-field__input", inputClassName || ""]);
+        const componentClassName = classNames(["zen-form-field__input", componentClasses || ""]);
         const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
         const localId = useId();
         const id = props.id || localId;
@@ -70,7 +72,7 @@ export const FormField = function FormFieldInner(WrappedComponent) {
             isMobile ? "zen-form-field--mobile" : "",
             banner ? "zen-form-field--with-banner" : "",
             !props.label ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
-            className || ""
+            wrapperClasses || ""
         ]);
         if (isLoading) {
             const height = WrappedComponent.displayName === TextareaRaw.displayName ? 110 : 32;

package/esm/formField/hooks/useClasses.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TFormFieldComponentProps } from "../formField";
+interface IUseClasses {
+    wrapperClasses?: string;
+    componentClasses?: string;
+}
+export declare const useClasses: <T>(props: TFormFieldComponentProps<T>, wrapperComponent: React.FC<T>) => IUseClasses;
+export {};

package/esm/formField/hooks/useClasses.js

@@ -0,0 +1,21 @@
+const oldFormFieldComponents = [
+    "SearchInputRaw",
+    "SelectRaw",
+    "StepperRaw",
+    "TextAreaInput",
+    "TextInputRaw"
+];
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const useClasses = (props, wrapperComponent) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (oldFormFieldComponents.includes((wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.displayName) || "") || oldFormFieldComponents.includes((wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.name) || "")) {
+        return {
+            wrapperClasses: props.wrapperClassName || props.className || "",
+            componentClasses: props.inputClassName || ""
+        };
+    }
+    return {
+        wrapperClasses: props.wrapperClassName || "",
+        componentClasses: props.inputClassName || props.className || ""
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "3.1.1-beta.3",
+  "version": "3.1.1-beta.4",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
@@ -99,6 +99,6 @@
     ]
   },
   "publishConfig": {
-    "access": "public"
-  }
+   "access": "public"
+ }
 }