@hortiview/shared-components 0.0.5635 → 0.0.5859

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.js

@@ -1,83 +1,89 @@
 import "../../../assets/FormDatePicker.css";
-import { jsx as s } from "react/jsx-runtime";
-import { Datepicker as D } from "@element/react-components";
-import { useMemo as t } from "react";
-import { useFormContext as S, Controller as q } from "react-hook-form";
-import { g as F } from "../../../get-Dyz8NMrE.js";
-const w = "_datePickerContainer_gkrp1_1", H = "_invalid_gkrp1_5", Q = "_fromPickerText_gkrp1_9", Y = "_datePickerCalendar_gkrp1_13", c = {
-  datePickerContainer: w,
+import { jsx as d } from "react/jsx-runtime";
+import { Datepicker as h } from "@element/react-components";
+import { g as v } from "../../../get-Dyz8NMrE.js";
+import { useMemo as n } from "react";
+import { useFormContext as q, Controller as F } from "react-hook-form";
+const Y = "_datePickerContainer_gkrp1_1", H = "_invalid_gkrp1_5", M = "_fromPickerText_gkrp1_9", Q = "_datePickerCalendar_gkrp1_13", s = {
+  datePickerContainer: Y,
   invalid: H,
-  fromPickerText: Q,
-  datePickerCalendar: Y
-}, M = ({
-  propertyName: e,
-  label: f,
-  className: P,
-  minRangeYear: d,
-  maxRangeYear: l,
-  locale: g,
-  rules: i
+  fromPickerText: M,
+  datePickerCalendar: Q
+}, O = ({
+  propertyName: t,
+  label: u,
+  className: g,
+  minRangeYear: l,
+  maxRangeYear: m,
+  locale: x,
+  rules: o
 }) => {
   const {
-    control: x,
-    formState: { errors: r, isValidating: m }
-  } = S(), k = t(
-    () => i?.required?.value,
-    [i]
-  ), u = t(
-    () => i?.required?.message,
-    [i]
-  ), _ = t(
-    () => (/* @__PURE__ */ new Date()).getFullYear() - (d ?? 95),
-    [d]
-  ), C = t(
-    () => (/* @__PURE__ */ new Date()).getFullYear() + (l ?? 15),
+    control: _,
+    formState: { errors: r, isValidating: f }
+  } = q(), k = n(
+    () => o?.required?.value,
+    [o]
+  ), P = n(
+    () => o?.required?.message,
+    [o]
+  ), p = n(
+    () => (/* @__PURE__ */ new Date()).getFullYear() - (l ?? 95),
     [l]
-  ), n = t(
-    () => !m && F(r, e) !== void 0,
-    [r, e, m]
-  ), p = t(() => ({
-    valid: !n,
-    helperTextPersistent: n || k,
+  ), C = n(
+    () => (/* @__PURE__ */ new Date()).getFullYear() + (m ?? 15),
+    [m]
+  ), c = n(
+    () => !f && v(r, t) !== void 0,
+    [r, t, f]
+  ), T = n(() => ({
+    valid: !c,
+    helperTextPersistent: c || k,
     helperText: (() => {
-      if (r && r[e]) {
-        const a = r[e]?.message;
-        return a || "Invalid input";
+      if (r && r[t]) {
+        const i = r[t]?.message;
+        return i || "Invalid input";
       }
-      return u;
+      return P;
     })(),
-    className: `${c.fromPickerText} ${n ? c.invalid : ""}`
-  }), [r, u, e, k, n]);
-  return /* @__PURE__ */ s(
-    q,
+    className: `${s.fromPickerText} ${c ? s.invalid : ""}`
+  }), [r, P, t, k, c]);
+  return /* @__PURE__ */ d(
+    F,
     {
-      name: e,
-      rules: i,
-      control: x,
-      render: ({ field: { ref: v, onChange: a, value: T, ...h } }) => /* @__PURE__ */ s("div", { className: c.datePickerContainer, children: /* @__PURE__ */ s(
-        D,
+      name: t,
+      rules: o,
+      control: _,
+      render: ({ field: { ref: D, onChange: i, value: a, ...S } }) => /* @__PURE__ */ d("div", { className: s.datePickerContainer, children: /* @__PURE__ */ d(
+        h,
         {
-          ...h,
-          className: P ?? "",
-          value: T,
+          ...S,
+          className: g ?? "",
+          value: a,
           variant: "outlined",
-          label: f,
-          format: (o) => o ? o.toLocaleDateString(g ?? "en") : "",
+          label: u,
+          format: (e) => e ? e.toLocaleDateString(x ?? "en") : "",
           disableClearing: !0,
-          onSelect: (o) => {
-            a(o);
+          onSelect: (e) => {
+            i(e);
+          },
+          onSelectMonth: (e) => {
+            a && (e.setDate(a.getDate()), i(e));
+          },
+          onSelectYear: (e) => {
+            a && (e.setDate(a.getDate()), i(e));
           },
           hoisted: !0,
-          calendarProps: { hoisted: !0, className: c.datePickerCalendar },
-          minQuickSelectYear: _,
+          calendarProps: { hoisted: !0, className: s.datePickerCalendar },
+          minQuickSelectYear: p,
           maxQuickSelectYear: C,
           readOnly: !0,
-          textfieldProps: p
+          textfieldProps: T
         }
       ) })
     }
   );
 };
 export {
-  M as FormDatePicker
+  O as FormDatePicker
 };

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

@@ -1,85 +1,88 @@
 import "../../../assets/FormSelect.css";
-import { jsx as i, Fragment as I } from "react/jsx-runtime";
+import { jsx as l, Fragment as O } from "react/jsx-runtime";
 import { Select as P } from "@element/react-components";
-import { g as V } from "../../../get-Dyz8NMrE.js";
-import { useMemo as m } from "react";
-import { useFormContext as k, Controller as _ } from "react-hook-form";
-const w = "_invalid_1vo1h_1", z = "_formSelect_1vo1h_5", A = "_formSelectContainer_1vo1h_9", d = {
+import { g as d } from "../../../get-Dyz8NMrE.js";
+import { useMemo as u } from "react";
+import { useFormContext as V, Controller as g } from "react-hook-form";
+import { isArray as k } from "lodash";
+const w = "_invalid_1vo1h_1", z = "_formSelect_1vo1h_5", B = "_formSelectContainer_1vo1h_9", S = {
   invalid: w,
   formSelect: z,
-  formSelectContainer: A
-}, Q = ({
+  formSelectContainer: B
+}, W = ({
   propertyName: r,
-  label: g,
-  options: s,
-  multi: l = !1,
-  disabled: h = !1,
-  hoisted: v = !1,
-  hidden: C = !1,
-  valueKey: t = "value",
-  textKey: q = "text",
-  clearable: T = !1,
-  noOptionsMessage: F = "",
-  rules: n,
-  ...H
+  label: h,
+  options: t,
+  multi: s = !1,
+  disabled: C = !1,
+  hoisted: p = !1,
+  hidden: q = !1,
+  valueKey: n = "value",
+  textKey: T = "text",
+  clearable: F = !1,
+  noOptionsMessage: M = "",
+  rules: i,
+  ...b
 }) => {
   const {
-    control: u,
-    formState: { errors: o, isValidating: S }
-  } = k(), c = m(
-    () => !S && V(o, r) !== void 0,
-    [o, r, S]
-  ), M = m(
-    () => n?.required?.value,
-    [n]
-  ), $ = m(
-    () => n?.required?.message,
-    [n]
-  ), b = () => {
+    control: v,
+    formState: { errors: o, isValidating: x }
+  } = V(), a = u(
+    () => !x && d(o, r) !== void 0,
+    [o, r, x]
+  ), H = u(
+    () => i?.required?.value,
+    [i]
+  ), $ = u(
+    () => i?.required?.message,
+    [i]
+  ), j = () => {
     if (o && o[r]) {
-      const a = o[r]?.message;
-      return a || "Invalid input";
+      const f = o[r]?.message;
+      return f || "Invalid input";
     }
     return $;
   };
-  return C ? /* @__PURE__ */ i(_, { name: r, control: u, render: () => /* @__PURE__ */ i(I, {}) }) : /* @__PURE__ */ i("div", { className: d.formSelectContainer, children: /* @__PURE__ */ i(
-    _,
+  return q ? /* @__PURE__ */ l(g, { name: r, control: v, render: () => /* @__PURE__ */ l(O, {}) }) : /* @__PURE__ */ l("div", { className: S.formSelectContainer, children: /* @__PURE__ */ l(
+    g,
     {
       name: r,
-      rules: n,
-      control: u,
-      render: ({ field: { ref: a, onChange: f, value: x, ...j } }) => {
-        const p = l ? s?.filter(
-          (e) => x?.includes(e[t])
-        ) : s?.find((e) => e[t] === x);
-        return /* @__PURE__ */ i(
+      rules: i,
+      control: v,
+      render: ({ field: { ref: f, onChange: m, value: _, ...A } }) => {
+        let c = t;
+        k(t) && d(t[0], "options") !== void 0 && (c = t.flatMap((e) => d(e, "options") ?? []));
+        const E = s ? c?.filter(
+          (e) => _?.includes(e[n])
+        ) : c?.find((e) => e[n] === _);
+        return /* @__PURE__ */ l(
           P,
           {
-            ...j,
-            ...H,
-            value: p,
-            label: g,
+            ...A,
+            ...b,
+            value: E,
+            label: h,
             variant: "outlined",
-            helperText: b(),
-            helperTextPersistent: M || c,
-            options: s,
-            valid: !c,
-            multiSelect: l,
-            className: `${d.formSelect} ${c ? d.invalid : ""}`,
-            disabled: h,
-            valueKey: t,
-            textKey: q,
+            helperText: j(),
+            helperTextPersistent: H || a,
+            options: t,
+            valid: !a,
+            multiSelect: s,
+            className: `${S.formSelect} ${a ? S.invalid : ""}`,
+            disabled: C,
+            valueKey: n,
+            textKey: T,
             onChange: (e) => {
               if (e == null)
-                return f(e);
-              if (l)
-                return f(e.map((E) => E[t]));
-              f(e[t]);
+                return m(e);
+              if (s)
+                return m(e.map((I) => I[n]));
+              m(e[n]);
             },
-            hoisted: v,
-            noOptionsMessage: F,
+            hoisted: p,
+            noOptionsMessage: M,
             searchable: !0,
-            clearable: T,
+            clearable: F,
             menuMaxHeight: "15rem"
           }
         );
@@ -88,5 +91,5 @@ const w = "_invalid_1vo1h_1", z = "_formSelect_1vo1h_5", A = "_formSelectContain
   ) });
 };
 export {
-  Q as FormSelect
+  W as FormSelect
 };

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

@@ -1,24 +1,24 @@
-import { jsx as s } from "react/jsx-runtime";
-import { r as a, s as r } from "../../../react.esm-C0LtovhP.js";
-import { FormSelect as c } from "./FormSelect.js";
-import { v as e, d as l, t as u, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
-const m = e.fn();
-e.mock("react-hook-form", () => ({
-  ...e.importActual("react-hook-form"),
+import { jsx as u } from "react/jsx-runtime";
+import { r as l, s as t, f as i } from "../../../react.esm-C0LtovhP.js";
+import { FormSelect as m } from "./FormSelect.js";
+import { v as n, d as g, t as d, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+const p = n.fn();
+n.mock("react-hook-form", () => ({
+  ...n.importActual("react-hook-form"),
   Controller: ({
-    render: o
-  }) => o({
+    render: r
+  }) => r({
     field: {
       ref: void 0,
-      onChange: m,
+      onChange: p,
       value: "3"
     }
   }),
   useFormContext: () => ({
     control: {
-      register: e.fn(),
-      unregister: e.fn(),
-      getFieldState: e.fn(),
+      register: n.fn(),
+      unregister: n.fn(),
+      getFieldState: n.fn(),
       _names: {
         array: new Set("test"),
         mount: new Set("test"),
@@ -28,11 +28,11 @@ e.mock("react-hook-form", () => ({
         watchAll: !1
       },
       _subjects: {
-        watch: e.fn(),
-        array: e.fn(),
-        state: e.fn()
+        watch: n.fn(),
+        array: n.fn(),
+        state: n.fn()
       },
-      _getWatch: e.fn(),
+      _getWatch: n.fn(),
       _formValues: ["test"],
       _defaultValues: ["test"]
     },
@@ -40,27 +40,63 @@ e.mock("react-hook-form", () => ({
     getFieldState: () => ({ invalid: !1 })
   })
 }));
-l("FormSelect Test", () => {
-  const o = [
+g("FormSelect Test", () => {
+  const r = [
     { id: "1", value: "Germany", description: "" },
     { id: "2", value: "France", description: "" },
     { id: "3", value: "Afar", description: "" }
+  ], f = [
+    {
+      groupValue: "Europe",
+      groupName: "Europe",
+      options: [
+        { id: "1", value: "Germany", description: "" },
+        { id: "2", value: "France", description: "" }
+      ]
+    },
+    {
+      groupValue: "Africa",
+      groupName: "Africa",
+      options: [{ id: "3", value: "Afar", description: "" }]
+    }
   ];
-  u("render FormSelect", () => {
-    a(
-      /* @__PURE__ */ s(
-        c,
+  d("render FormSelect", () => {
+    l(
+      /* @__PURE__ */ u(
+        m,
+        {
+          label: "address.country",
+          rules: { required: { value: !0, message: "required" } },
+          propertyName: "countryId",
+          options: r,
+          valueKey: "id",
+          textKey: "value"
+        }
+      )
+    );
+    const o = t.getByRole("combobox");
+    e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument();
+  }), d("render grouped FormSelect and click on option", () => {
+    l(
+      /* @__PURE__ */ u(
+        m,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: o,
+          options: f,
           valueKey: "id",
           textKey: "value"
         }
       )
     );
-    const n = r.getByRole("combobox");
-    t(n).toBeInTheDocument(), t(n).toBeInstanceOf(HTMLInputElement), t(r.getByText("address.country")).toBeInTheDocument(), t(r.getByText("Afar")).toBeInTheDocument(), t(r.getByText("required")).toBeInTheDocument();
+    const o = t.getByRole("combobox");
+    e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), i.mouseDown(o);
+    const s = t.getByText("Africa");
+    e(s).toBeInTheDocument(), e(s.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
+    const c = t.getByText("Europe");
+    e(c).toBeInTheDocument(), e(c.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
+    const a = t.getByText("France");
+    e(a).toBeInTheDocument(), e(a.parentElement?.parentElement).not.toBeInstanceOf(HTMLHeadingElement), e(t.getByText("Germany")).toBeInTheDocument(), e(t.getAllByText("Afar")).toHaveLength(2), i.click(a), e(p).toBeCalledWith("2");
   });
 });

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": "0.0.5635",
+  "version": "0.0.5859",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",