@geotab/zenith 3.1.1-beta.2 → 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/dist/groupsFilter/groupsFilterInterfaces.d.ts

@@ -1,7 +1,8 @@
+import { IEntityWithId } from "../commonHelpers/entity";
 import { IFilterState as IFilterStateRaw, TFilterVal as TFilterValRaw, ITypedHash as ITypedHashRaw, IAdvancedEntitiesNavigatorDialog as IAdvancedEntitiesNavigatorDialogRaw, IGroupItem as IGroupItemRaw, IGroupsFilterTotalState as IGroupsFilterTotalStateRaw, FilterMenuStep, IGroupsFilterOptions as IGroupsFilterOptionsRaw, IGroupTree as IGroupTreeRaw, IColor as IColorRaw, IGroupsColorTree as IGroupsColorTreeRaw, INamedEntity as INamedEntityRaw, IGroup as IGroupRaw, ILinkedGroup as ILinkedGroupRaw, ILeafStateItem as ILeafStateItemRaw, RelationOperatorLocal as RelationOperator } from "../groupsFilterRaw/groupsFilterInterfaces";
-export interface IFilterState<T> extends IFilterStateRaw<T> {
+export interface IFilterState<T = IEntityWithId> extends IFilterStateRaw<T> {
 }
-export type TFilterVal<T> = TFilterValRaw<T>;
+export type TFilterVal<T = IEntityWithId> = TFilterValRaw<T>;
 export interface ITypedHash<T> extends ITypedHashRaw<T> {
 }
 export interface IAdvancedEntitiesNavigatorDialog extends IAdvancedEntitiesNavigatorDialogRaw {
@@ -25,5 +26,5 @@ export interface IGroup extends IGroupRaw {
 }
 export interface ILinkedGroup extends ILinkedGroupRaw {
 }
-export interface ILeafStateItem<T> extends ILeafStateItemRaw<T> {
+export interface ILeafStateItem<T = IEntityWithId> extends ILeafStateItemRaw<T> {
 }

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/esm/groupsFilter/groupsFilterInterfaces.d.ts

@@ -1,7 +1,8 @@
+import { IEntityWithId } from "../commonHelpers/entity";
 import { IFilterState as IFilterStateRaw, TFilterVal as TFilterValRaw, ITypedHash as ITypedHashRaw, IAdvancedEntitiesNavigatorDialog as IAdvancedEntitiesNavigatorDialogRaw, IGroupItem as IGroupItemRaw, IGroupsFilterTotalState as IGroupsFilterTotalStateRaw, FilterMenuStep, IGroupsFilterOptions as IGroupsFilterOptionsRaw, IGroupTree as IGroupTreeRaw, IColor as IColorRaw, IGroupsColorTree as IGroupsColorTreeRaw, INamedEntity as INamedEntityRaw, IGroup as IGroupRaw, ILinkedGroup as ILinkedGroupRaw, ILeafStateItem as ILeafStateItemRaw, RelationOperatorLocal as RelationOperator } from "../groupsFilterRaw/groupsFilterInterfaces";
-export interface IFilterState<T> extends IFilterStateRaw<T> {
+export interface IFilterState<T = IEntityWithId> extends IFilterStateRaw<T> {
 }
-export type TFilterVal<T> = TFilterValRaw<T>;
+export type TFilterVal<T = IEntityWithId> = TFilterValRaw<T>;
 export interface ITypedHash<T> extends ITypedHashRaw<T> {
 }
 export interface IAdvancedEntitiesNavigatorDialog extends IAdvancedEntitiesNavigatorDialogRaw {
@@ -25,5 +26,5 @@ export interface IGroup extends IGroupRaw {
 }
 export interface ILinkedGroup extends ILinkedGroupRaw {
 }
-export interface ILeafStateItem<T> extends ILeafStateItemRaw<T> {
+export interface ILeafStateItem<T = IEntityWithId> extends ILeafStateItemRaw<T> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "3.1.1-beta.2",
+  "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"
+ }
 }