@hortiview/shared-components 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.7.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.6.0...v1.7.0) (2025-05-06)
+
+### Features
+
+* remove negative margin from form select ([7f5cb03](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7f5cb0386ffc630af997ca008012f1749541ef08))
+* required text from checkbox changed in a danger border around the box ([9f112dd](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/9f112dd036abc9ade4dd37753c9cf7646365f18b))
+
 ## [1.6.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.5.0...v1.6.0) (2025-05-06)
 
 ### Features

package/dist/assets/FormCheckBox.css

@@ -0,0 +1 @@
+._invalid_1waaq_1 *[class*=mdc-checkbox__background]{border-color:var(--lmnt-theme-danger)!important}

package/dist/assets/FormSelect.css

@@ -1 +1 @@
-._invalidHelperText_ht9kd_1+*[class*=mdc-select-helper-text]{color:var(--lmnt-theme-danger)!important}._invalidBorder_ht9kd_5 *[class*=mdc-notched-outline]{border-color:var(--lmnt-theme-danger)!important}._invalidPlaceholder_ht9kd_9 *[class*=lmnt-select-label]{color:var(--lmnt-theme-danger)!important}._invalidDropdownIcon_ht9kd_13 *[class*=mdc-select__dropdown-icon]{fill:var(--lmnt-theme-danger)!important}._formSelectContainer_ht9kd_18{display:flex;flex-wrap:wrap;width:100%}._formSelectContainer_ht9kd_18 *[class*=mdc-select-helper-text]{color:var(--lmnt-helper-text-color)}._formSelectContainer_ht9kd_18 *[class*=lmnt__multi-value__label]{overflow:visible}._formSelect_ht9kd_18+*[class*=mdc-select-helper-text]{margin-bottom:-19.33px!important}._formSelect_ht9kd_18 *[class*=lmnt-select-menu]{z-index:2001}._multiText_ht9kd_44 *[class*=lmnt-select-value-container]{white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis;display:block!important;padding:1.125rem 0!important}._tooltip_ht9kd_53{z-index:42}._disabled_ht9kd_58+*[class*=mdc-select-helper-text]{color:var(--lmnt-theme-on-surface-disabled)}[id*=select-container][class*=top] [class*=mdc-menu-surface--open]{bottom:0}[id*=select-container][class*=bottom] [class*=mdc-menu-surface--open]{top:0}
+._invalidHelperText_1qcz0_1+*[class*=mdc-select-helper-text]{color:var(--lmnt-theme-danger)!important}._invalidBorder_1qcz0_5 *[class*=mdc-notched-outline]{border-color:var(--lmnt-theme-danger)!important}._invalidPlaceholder_1qcz0_9 *[class*=lmnt-select-label]{color:var(--lmnt-theme-danger)!important}._invalidDropdownIcon_1qcz0_13 *[class*=mdc-select__dropdown-icon]{fill:var(--lmnt-theme-danger)!important}._formSelectContainer_1qcz0_18{display:flex;flex-wrap:wrap;width:100%}._formSelectContainer_1qcz0_18 *[class*=mdc-select-helper-text]{color:var(--lmnt-helper-text-color)}._formSelectContainer_1qcz0_18 *[class*=lmnt__multi-value__label]{overflow:visible}._formSelect_1qcz0_18 *[class*=lmnt-select-menu]{z-index:2001}._multiText_1qcz0_40 *[class*=lmnt-select-value-container]{white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis;display:block!important;padding:1.125rem 0!important}._tooltip_1qcz0_49{z-index:42}._disabled_1qcz0_54+*[class*=mdc-select-helper-text]{color:var(--lmnt-theme-on-surface-disabled)}[id*=select-container][class*=top] [class*=mdc-menu-surface--open]{bottom:0}[id*=select-container][class*=bottom] [class*=mdc-menu-surface--open]{top:0}

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.js

@@ -1,45 +1,44 @@
-import { jsx as o, jsxs as C } from "react/jsx-runtime";
-import { C as p } from "../../../index.es-BvrQnJ3j.js";
-import { G as x } from "../../../index.es-DntoATwO.js";
-import { a as d } from "../../../index.es-CF_xy2ns.js";
-import { useFormContext as l, Controller as u } from "react-hook-form";
-const v = ({
-  propertyName: e,
-  label: n,
-  validate: s,
+import { jsx as r } from "react/jsx-runtime";
+import { C as d } from "../../../index.es-BvrQnJ3j.js";
+import { G as h } from "../../../index.es-DntoATwO.js";
+import { useFormContext as C, Controller as u } from "react-hook-form";
+import '../../../assets/FormCheckBox.css';const v = "_invalid_1waaq_1", x = {
+  invalid: v
+}, b = ({
+  propertyName: n,
+  label: e,
+  validate: t,
   required: a,
   onChange: c,
-  disabled: m
+  disabled: i
 }) => {
-  const { control: h } = l();
-  return /* @__PURE__ */ o(
+  const { control: s } = C();
+  return /* @__PURE__ */ r(
     u,
     {
-      name: e,
-      control: h,
+      name: n,
+      control: s,
       rules: {
         required: a,
-        validate: s
+        validate: t
       },
-      render: ({ field: r, fieldState: t }) => /* @__PURE__ */ C(x, { direction: "vertical", gap: "none", children: [
-        /* @__PURE__ */ o(
-          p,
-          {
-            "data-testid": `checkbox-${e}`,
-            ...r,
-            label: n,
-            onChange: (...i) => {
-              r.onChange(...i), c?.();
-            },
-            checked: r.value,
-            disabled: m
-          }
-        ),
-        t.error && /* @__PURE__ */ o(d, { "data-testid": "checkbox-error-message", themeColor: "error", children: t.error.message })
-      ] })
+      render: ({ field: o, fieldState: l }) => /* @__PURE__ */ r(h, { direction: "vertical", gap: "none", children: /* @__PURE__ */ r(
+        d,
+        {
+          "data-testid": `checkbox-${n}`,
+          ...o,
+          className: l.error ? x.invalid : "",
+          label: e,
+          onChange: (...m) => {
+            o.onChange(...m), c?.();
+          },
+          checked: o.value,
+          disabled: i
+        }
+      ) })
     }
   );
 };
 export {
-  v as FormCheckBox
+  b as FormCheckBox
 };

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as s, s as t, f as h } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as r, f as h } from "../../../react.esm-CX1WJ2Pp.js";
 import { FormCheckBox as n } from "./FormCheckBox.js";
-import { v as e, d as m, t as c, g as r } from "../../../vi.CjhMlMwf-BCJNwXvu.js";
+import { v as e, d as m, t as c, g as o } from "../../../vi.CjhMlMwf-BCJNwXvu.js";
 const l = e.fn();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),
   Controller: ({
-    render: o
-  }) => o({
+    render: t
+  }) => t({
     field: {
       onChange: l
     },
@@ -41,12 +41,16 @@ e.mock("react-hook-form", () => ({
 }));
 m("FormCheckBox Test", () => {
   c("render FormCheckBox", () => {
-    s(/* @__PURE__ */ a(n, { propertyName: "hasValue", label: "user.hasValue" })), r(t.getByText("user.hasValue")).toBeInTheDocument(), r(t.getByText("error")).toBeInTheDocument(), r(t.getByRole("checkbox")).toBeInTheDocument();
+    s(/* @__PURE__ */ a(n, { propertyName: "hasValue", label: "user.hasValue" })), o(r.getByText("user.hasValue")).toBeInTheDocument(), o(r.getByRole("checkbox")).toBeInTheDocument();
+    const t = document.querySelector('div[class*="invalid"]');
+    o(t).toBeInTheDocument();
   }), c("render FormCheckBox click", () => {
-    s(/* @__PURE__ */ a(n, { propertyName: "hasValue", label: "user.hasValue", onChange: l }));
-    const o = t.getByRole("checkbox");
-    h.click(o), r(l).toHaveBeenCalled();
+    s(
+      /* @__PURE__ */ a(n, { propertyName: "hasValue", label: "user.hasValue", onChange: l })
+    );
+    const t = r.getByRole("checkbox");
+    h.click(t), o(l).toHaveBeenCalled();
   }), c("should render checkbox with correct data-testid", () => {
-    s(/* @__PURE__ */ a(n, { propertyName: "hasValue", label: "user.hasValue" })), r(t.getByTestId("checkbox-hasValue")).toBeInTheDocument();
+    s(/* @__PURE__ */ a(n, { propertyName: "hasValue", label: "user.hasValue" })), o(r.getByTestId("checkbox-hasValue")).toBeInTheDocument();
   });
 });

package/dist/components/FormComponents/FormSelect/FormSelect.js

@@ -1,13 +1,13 @@
-import { jsx as o, Fragment as k, jsxs as z } from "react/jsx-runtime";
-import { g as _ } from "../../../get-DFv1gXfq.js";
+import { jsx as o, Fragment as g, jsxs as k } from "react/jsx-runtime";
+import { g as x } from "../../../get-DFv1gXfq.js";
 import { i as G } from "../../../isArray-Dub1wGJM.js";
-import { useMemo as C } from "react";
-import { useFormContext as J, Controller as $ } from "react-hook-form";
+import { useMemo as z } from "react";
+import { useFormContext as J, Controller as C } from "react-hook-form";
 import { M as L } from "../../../react-tooltip.min-DSY6KDqS.js";
 import { useHelperText as O } from "../../../hooks/useHelperText.js";
 import { Select as Q } from "../../Select/Select.js";
 import { SelectTooltipText as R } from "./SelectTooltipText.js";
-import '../../../assets/FormSelect.css';const U = "_invalidHelperText_ht9kd_1", W = "_invalidBorder_ht9kd_5", X = "_invalidPlaceholder_ht9kd_9", Y = "_invalidDropdownIcon_ht9kd_13", Z = "_formSelectContainer_ht9kd_18", N = "_formSelect_ht9kd_18", y = "_multiText_ht9kd_44", K = "_tooltip_ht9kd_53", tt = "_disabled_ht9kd_58", e = {
+import '../../../assets/FormSelect.css';const U = "_invalidHelperText_1qcz0_1", W = "_invalidBorder_1qcz0_5", X = "_invalidPlaceholder_1qcz0_9", Y = "_invalidDropdownIcon_1qcz0_13", Z = "_formSelectContainer_1qcz0_18", N = "_formSelect_1qcz0_18", y = "_multiText_1qcz0_40", K = "_tooltip_1qcz0_49", ee = "_disabled_1qcz0_54", t = {
   invalidHelperText: U,
   invalidBorder: W,
   invalidPlaceholder: X,
@@ -16,100 +16,100 @@ import '../../../assets/FormSelect.css';const U = "_invalidHelperText_ht9kd_1",
   formSelect: N,
   multiText: y,
   tooltip: K,
-  disabled: tt
-}, ft = ({
+  disabled: ee
+}, fe = ({
   propertyName: i,
   label: s,
   options: r,
-  multi: d = !1,
-  disabled: x = !1,
-  hoisted: H = !1,
-  hidden: I = !1,
+  multi: a = !1,
+  disabled: h = !1,
+  hoisted: $ = !1,
+  hidden: H = !1,
   valueKey: n = "value",
   textKey: u = "text",
-  clearable: w = !1,
-  searchable: D = !0,
+  clearable: I = !1,
+  searchable: w = !0,
   noOptionsMessage: T = "",
   rules: f,
-  menuPosition: P = "auto",
+  menuPosition: D = "auto",
   ...l
 }) => {
   const {
     control: v,
-    getFieldState: B,
-    formState: { errors: S, isValidating: p }
-  } = J(), F = C(
-    () => !p && _(S, i) !== void 0,
-    [S, i, p]
-  ), b = C(
+    getFieldState: P,
+    formState: { errors: S, isValidating: q }
+  } = J(), B = z(
+    () => !q && x(S, i) !== void 0,
+    [S, i, q]
+  ), F = z(
     () => f?.required?.message,
     [f]
-  ), { helperText: M, helperTextPersistent: j } = O({
+  ), { helperText: b, helperTextPersistent: M } = O({
     propertyName: i,
     helperText: l.helperText,
-    requiredText: b,
+    requiredText: F,
     hasCharacterCount: !1
   });
-  return I ? /* @__PURE__ */ o($, { name: i, control: v, render: () => /* @__PURE__ */ o(k, {}) }) : /* @__PURE__ */ o(
+  return H ? /* @__PURE__ */ o(C, { name: i, control: v, render: () => /* @__PURE__ */ o(g, {}) }) : /* @__PURE__ */ o(
     "div",
     {
       "data-testid": "form-select-container",
-      className: e.formSelectContainer,
+      className: t.formSelectContainer,
       "data-tooltip-id": s,
       children: /* @__PURE__ */ o(
-        $,
+        C,
         {
           name: i,
           rules: f,
           control: v,
-          render: ({ field: { ref: et, onChange: m, value: g, ...q } }) => {
-            let h = r;
-            G(r) && _(r[0], "options") !== void 0 && (h = r.flatMap((t) => _(t, "options") ?? []));
-            const a = d ? h?.filter(
-              (t) => g?.includes(t[n])
-            ) : h?.find((t) => t[n] === g), A = d && l.multiDisplayType === "text" && l.fixedHeightInput, c = B(i).invalid, E = `
-          ${e.formSelect} 
-          ${c ? e.invalidHelperText : ""} 
-          ${c ? e.invalidDropdownIcon : ""}  
-          ${c ? e.invalidBorder : ""} 
-          ${c ? e.invalidPlaceholder : ""}  
-          ${A ? e.multiText : ""} 
-          ${x ? e.disabled : ""}`;
-            return /* @__PURE__ */ z(k, { children: [
+          render: ({ field: { ref: te, onChange: m, value: p, ...j } }) => {
+            let _ = r;
+            G(r) && x(r[0], "options") !== void 0 && (_ = r.flatMap((e) => x(e, "options") ?? []));
+            const d = a ? _?.filter(
+              (e) => p?.includes(e[n])
+            ) : _?.find((e) => e[n] === p), A = a && l.multiDisplayType === "text" && l.fixedHeightInput, c = P(i).invalid, E = `
+          ${t.formSelect} 
+          ${c ? t.invalidHelperText : ""} 
+          ${c ? t.invalidDropdownIcon : ""}  
+          ${c ? t.invalidBorder : ""} 
+          ${c ? t.invalidPlaceholder : ""}  
+          ${A ? t.multiText : ""} 
+          ${h ? t.disabled : ""}`;
+            return /* @__PURE__ */ k(g, { children: [
               /* @__PURE__ */ o(
                 Q,
                 {
-                  ...q,
+                  ...j,
                   ...l,
-                  value: a ?? [],
+                  value: d ?? [],
                   label: s,
                   variant: "outlined",
-                  helperText: M,
-                  helperTextPersistent: j,
+                  helperText: b,
+                  helperTextPersistent: M,
                   options: r,
-                  valid: !F,
+                  valid: !B,
                   "data-testid": l["data-testid"] ?? `select-${i}`,
-                  multiSelect: !r?.length && T ? !1 : d,
+                  multiSelect: !r?.length && T ? !1 : a,
                   className: E,
-                  disabled: x,
+                  disabled: h,
                   valueKey: n,
                   textKey: u,
-                  onChange: (t) => {
-                    if (t == null) {
-                      m(t);
+                  onChange: (e) => {
+                    if (e == null) {
+                      m(e);
                       return;
                     }
-                    if (d) {
-                      m(t.map((V) => V[n]));
+                    if (a) {
+                      m(e.map((V) => V[n]));
                       return;
                     }
-                    m(t[n]), l?.onChange?.(t);
+                    m(e[n]), l?.onChange?.(e);
                   },
-                  hoisted: H,
+                  hoisted: $,
                   noOptionsMessage: T,
-                  searchable: D,
-                  clearable: w,
-                  menuPosition: P
+                  searchable: w,
+                  clearable: I,
+                  menuPosition: D
                 }
               ),
               /* @__PURE__ */ o(
@@ -119,9 +119,9 @@ import '../../../assets/FormSelect.css';const U = "_invalidHelperText_ht9kd_1",
                   noArrow: !0,
                   place: "bottom",
                   delayShow: 420,
-                  className: e.tooltip,
-                  hidden: !a || a.length === 0 || !l.fixedHeightInput,
-                  children: /* @__PURE__ */ o(R, { value: a, textKey: u, valueKey: n })
+                  className: t.tooltip,
+                  hidden: !d || d.length === 0 || !l.fixedHeightInput,
+                  children: /* @__PURE__ */ o(R, { value: d, textKey: u, valueKey: n })
                 }
               )
             ] });
@@ -132,5 +132,5 @@ import '../../../assets/FormSelect.css';const U = "_invalidHelperText_ht9kd_1",
   );
 };
 export {
-  ft as FormSelect
+  fe as FormSelect
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",