@geotab/zenith 3.2.0-beta.0 → 3.2.0-beta.1

package/dist/dateRangeInner/dateRangeInner.js

@@ -32,7 +32,6 @@ injectString("th", "Custom", "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E40\u0E2D\u0E07")
 injectString("tr", "Custom", "\xD6zel");
 injectString("zh-Hans", "Custom", "\u5B9A\u5236");
 injectString("zh-TW", "Custom", "\u81EA\u8A02");
-const radioGroup_1 = require("../radioGroup/radioGroup");
 const dateInputInner_1 = require("../dateInputInner/dateInputInner");
 const react_1 = require("react");
 const useLanguage_1 = require("../utils/localization/useLanguage");
@@ -42,6 +41,7 @@ const iconChevronRight_1 = require("../icons/iconChevronRight");
 const dateRange_1 = require("../dateRange/dateRange");
 const normalizeDates_1 = require("../filtersBar/components/filtersBarPeriodPicker/normalizeDates");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const radioGroupRaw_1 = require("../radioGroupRaw/radioGroupRaw");
 exports.CUSTOM_CALENDAR_ID = "Custom";
 const DateRangeInner = ({
   id,
@@ -139,7 +139,7 @@ const DateRangeInner = ({
   const isMobileCalendar = isMobileView && showMobileCalendar;
   const memoizedRadioGroup = (0, react_1.useMemo)(() => {
     if (!isMobileView || !showMobileCalendar) {
-      return (0, jsx_runtime_1.jsx)(radioGroup_1.RadioGroup
+      return (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw
       // className when there is a custom property in mobile view
       , {
         // className when there is a custom property in mobile view

package/dist/filters/components/filtersSidePanelDropdown.js

@@ -19,11 +19,11 @@ const dropdown_1 = require("../../dropdown/dropdown");
 const filtersHelper_1 = require("../filtersHelper");
 const filtersChip_1 = require("./filtersChip");
 const skeleton_1 = require("../../skeleton/skeleton");
-const radioGroup_1 = require("../../radioGroup/radioGroup");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const skeletonList_1 = require("../../skeletonList/skeletonList");
 const groupsHelper_1 = require("../../groupsFilterRaw/groupsHelper");
 const dropdownHelper_1 = require("../../dropdownRaw/dropdownHelper");
+const radioGroupRaw_1 = require("../../radioGroupRaw/radioGroupRaw");
 const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }) => {
     const simpleViewLimit = 7;
     const _a = elemProps, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, dataItems, isLoading, classNamePopup } = _a, otherProps = __rest(_a, ["id", "name", "state", "onChange", "defaultState", "fetchState", "dataItems", "isLoading", "classNamePopup"]);
@@ -73,7 +73,7 @@ const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }
         return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
     }
     if (componentType === "radio" && dropdownDataRef.current) {
-        const dropdownRadioGroup = (0, jsx_runtime_1.jsx)(radioGroup_1.RadioGroup, { direction: "vertical", size: "small", id: `${id}-side-panel-dropdown-radio-group`, className: "zen-side-panel-radio-group__filter-item", items: dropdownDataRef.current.map((item) => ({
+        const dropdownRadioGroup = (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw, { direction: "vertical", size: "small", id: `${id}-side-panel-dropdown-radio-group`, className: "zen-side-panel-radio-group__filter-item", items: dropdownDataRef.current.map((item) => ({
                 id: `${id}_radio-group-item_${item.id}`,
                 value: item.id,
                 children: (0, jsx_runtime_1.jsx)("span", { children: (0, groupsHelper_1.getGroupDescription)(item, translate) })

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersBarSidePanelRadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const radioGroup_1 = require("../../../../radioGroup/radioGroup");
 const useUniqueId_1 = require("../../../../commonHelpers/useUniqueId");
+const radioGroupRaw_1 = require("../../../../radioGroupRaw/radioGroupRaw");
 const FiltersBarSidePanelRadioGroup = (props) => {
     const name = (0, useUniqueId_1.useUniqueId)();
-    return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroup_1.RadioGroup, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
+    return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
 };
 exports.FiltersBarSidePanelRadioGroup = FiltersBarSidePanelRadioGroup;

package/dist/formField/formField.js

@@ -34,12 +34,24 @@ 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) || "");
 // 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);
@@ -74,6 +86,8 @@ 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",
+            !isOldFormFieldComponent(WrappedComponent) ? "zen-form-field--new-component" : "",
+            isFormSection ? "zen-form-field--form-item" : "",
             className || ""
         ]);
         if (isLoading) {

package/dist/index.css

@@ -5792,6 +5792,9 @@
 .zen-form-field * {
   box-sizing: border-box;
 }
+.zen-form-field--new-component {
+  display: inline-flex;
+}
 .zen-form-field--with-banner {
   gap: 8px;
 }
@@ -5816,12 +5819,12 @@
 .zen-form-field__input-container--with-trailing {
   gap: 8px;
 }
-.zen-form-field__input-container .zen-radio {
-  padding: 0 16px 12px 0;
-}
 .zen-form-field__input-container--review {
   grid-template-columns: max-content max-content;
 }
+.zen-form-field.zen-form-field--form-item .zen-radio {
+  padding: 0 16px 12px 0;
+}
 .zen-form-field__trailing-text {
   display: flex;
   align-items: center;

package/esm/dateRangeInner/dateRangeInner.js

@@ -1,6 +1,5 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { RadioGroup } from "../radioGroup/radioGroup";
 import { DateInputInner } from "../dateInputInner/dateInputInner";
 import { useCallback, useContext, useMemo } from "react";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -10,6 +9,7 @@ import { IconChevronRight } from "../icons/iconChevronRight";
 import { parseLabel } from "../dateRange/dateRange";
 import { normalizeDates } from "../filtersBar/components/filtersBarPeriodPicker/normalizeDates";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { RadioGroupRaw } from "../radioGroupRaw/radioGroupRaw";
 injectString("cs", "Custom", "Vlastn\xED");
 injectString("da-DK", "Custom", "Brugerdefineret");
 injectString("de", "Custom", "Individuell");
@@ -131,7 +131,7 @@ export const DateRangeInner = ({
   const isMobileCalendar = isMobileView && showMobileCalendar;
   const memoizedRadioGroup = useMemo(() => {
     if (!isMobileView || !showMobileCalendar) {
-      return _jsx(RadioGroup
+      return _jsx(RadioGroupRaw
       // className when there is a custom property in mobile view
       , {
         // className when there is a custom property in mobile view

package/esm/filters/components/filtersSidePanelDropdown.js

@@ -16,11 +16,11 @@ import { Dropdown } from "../../dropdown/dropdown";
 import { getDropdownStateType, prepareDefaultDropdownState } from "../filtersHelper";
 import { FiltersChip } from "./filtersChip";
 import { Skeleton } from "../../skeleton/skeleton";
-import { RadioGroup } from "../../radioGroup/radioGroup";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { SkeletonList } from "../../skeletonList/skeletonList";
 import { getGroupDescription } from "../../groupsFilterRaw/groupsHelper";
 import { sortDropdownItemArray } from "../../dropdownRaw/dropdownHelper";
+import { RadioGroupRaw } from "../../radioGroupRaw/radioGroupRaw";
 export const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }) => {
     const simpleViewLimit = 7;
     const _a = elemProps, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, dataItems, isLoading, classNamePopup } = _a, otherProps = __rest(_a, ["id", "name", "state", "onChange", "defaultState", "fetchState", "dataItems", "isLoading", "classNamePopup"]);
@@ -70,7 +70,7 @@ export const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateC
         return _jsx("div", { className: classNames(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
     }
     if (componentType === "radio" && dropdownDataRef.current) {
-        const dropdownRadioGroup = _jsx(RadioGroup, { direction: "vertical", size: "small", id: `${id}-side-panel-dropdown-radio-group`, className: "zen-side-panel-radio-group__filter-item", items: dropdownDataRef.current.map((item) => ({
+        const dropdownRadioGroup = _jsx(RadioGroupRaw, { direction: "vertical", size: "small", id: `${id}-side-panel-dropdown-radio-group`, className: "zen-side-panel-radio-group__filter-item", items: dropdownDataRef.current.map((item) => ({
                 id: `${id}_radio-group-item_${item.id}`,
                 value: item.id,
                 children: _jsx("span", { children: getGroupDescription(item, translate) })

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RadioGroup } from "../../../../radioGroup/radioGroup";
 import { useUniqueId } from "../../../../commonHelpers/useUniqueId";
+import { RadioGroupRaw } from "../../../../radioGroupRaw/radioGroupRaw";
 export const FiltersBarSidePanelRadioGroup = (props) => {
     const name = useUniqueId();
-    return _jsx("div", { className: "zen-side-panel-radio-group", children: _jsx(RadioGroup, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
+    return _jsx("div", { className: "zen-side-panel-radio-group", children: _jsx(RadioGroupRaw, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
 };

package/esm/formField/formField.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId, useMemo } from "react";
+import { useId, useMemo, useContext } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { FormFieldError } from "../formFieldError/formFieldError";
@@ -31,12 +31,24 @@ import { useReadonly } from "./hooks/useReadonly";
 import { FormFieldWithLabel } from "./components/formFieldWithLabel";
 import { FormFieldWithoutLabel } from "./components/formFieldWithoutLabel";
 import { TrailingComponent } from "./components/trailingComponent";
+import { FormSectionContext } from "../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) || "");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const FormField = function FormFieldInner(WrappedComponent) {
     // eslint-disable-next-line complexity
     const InnerFormField = (props) => {
         const isMobile = useMobile();
         const ref = props.ref;
+        const { isFormSection } = useContext(FormSectionContext);
         const { id: assistiveId, assistive } = useAssistive(props);
         const { id: trailingId, trailing } = useTrailing(props);
         const { id: errorId, error, errorBanner } = useError(props);
@@ -71,6 +83,8 @@ 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",
+            !isOldFormFieldComponent(WrappedComponent) ? "zen-form-field--new-component" : "",
+            isFormSection ? "zen-form-field--form-item" : "",
             className || ""
         ]);
         if (isLoading) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "3.2.0-beta.0",
+  "version": "3.2.0-beta.1",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
@@ -11,6 +11,9 @@
     "**/react-chartjs/dateAdapter.ts",
     "**/react-chartjs/dateAdapter.js"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "test": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest",
     "start": "npm run storybook --loglevel verbose",
@@ -104,8 +107,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }