@hortiview/shared-components 0.0.5696 → 0.0.5871

package/dist/assets/FormDatePicker.css

@@ -1 +1 @@
-._datePickerContainer_gkrp1_1{width:100%}._invalid_gkrp1_5+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{color:var(--lmnt-theme-danger)!important}._fromPickerText_gkrp1_9+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{margin-bottom:-19.33px!important}._datePickerCalendar_gkrp1_13{z-index:101}
+._datePickerContainer_73m8g_1{width:100%}._invalid_73m8g_5+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{color:var(--lmnt-theme-danger)!important}._fromPickerText_73m8g_9+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{margin-bottom:-19.33px!important}._datePickerCalendar_73m8g_13{z-index:101}._trailingContent_73m8g_17{text-align:right}

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.d.ts

@@ -2,8 +2,10 @@ import { FieldPath, FieldValues, Path, RegisterOptions } from 'react-hook-form';
 type DatePickerProps<T extends FieldValues> = {
     /** Name of the property that this date picker represents. */
     propertyName: Path<T>;
-    /** Label to be displayed with the date picker. */
+    /** Label to be displayed at the date picker input field. */
     label: string;
+    /** Label to be displayed as close button text. */
+    closeLabel: string;
     /**
      * the rules for the picker
      * @default undefined
@@ -26,6 +28,7 @@ type DatePickerProps<T extends FieldValues> = {
  *
  * @param propertyName - the name of the property this date picker maps to in the form.
  * @param label - label displayed along with the date picker.
+ * @param closeLabel - label displayed as close button text.
  * @param className - class name to be passed if provided.
  * @param minRangeYear - number of years to subtract from the current date as bottom of range
  * @param maxRangeYear - number of years to add to the current date as top of range
@@ -34,5 +37,5 @@ type DatePickerProps<T extends FieldValues> = {
  *
  * @returns A JSX element that renders a date picker form input.
  */
-export declare const FormDatePicker: <T extends FieldValues>({ propertyName, label, className, minRangeYear, maxRangeYear, locale, rules, }: DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDatePicker: <T extends FieldValues>({ propertyName, label, closeLabel, className, minRangeYear, maxRangeYear, locale, rules, }: DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as s, s as a, f as m } from "../../../react.esm-C0LtovhP.js";
+import { r as s, s as o, f as m } from "../../../react.esm-C0LtovhP.js";
 import { FormDatePicker as c } from "./FormDatePicker.js";
 import { v as e, d as f, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const i = e.fn();
@@ -42,15 +42,15 @@ e.mock("react-hook-form", () => ({
 f("FormDatePicker Test", () => {
   l("render FormDatePicker", () => {
     s(
-      /* @__PURE__ */ n(c, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
+      /* @__PURE__ */ n(c, { propertyName: "birthday", label: "user.date-of-birth", closeLabel: "close", maxRangeYear: 0 })
     );
-    const t = a.getByRole("textbox");
-    r(t).toBeInTheDocument(), r(t).toBeInstanceOf(HTMLInputElement), r(a.getByText("user.date-of-birth")).toBeInTheDocument();
+    const t = o.getByRole("textbox");
+    r(t).toBeInTheDocument(), r(t).toBeInstanceOf(HTMLInputElement), r(o.getByText("user.date-of-birth")).toBeInTheDocument(), r(o.getByText("close")).toBeInTheDocument();
   }), l("change FormDatePicker value", () => {
     s(
-      /* @__PURE__ */ n(c, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
+      /* @__PURE__ */ n(c, { propertyName: "birthday", label: "user.date-of-birth", closeLabel: "close", maxRangeYear: 0 })
     );
-    const t = a.getByRole("textbox"), o = /* @__PURE__ */ new Date();
-    m.change(t, { target: { value: o } }), r(t.getAttribute("value")).toBe(o.toString());
+    const t = o.getByRole("textbox"), a = /* @__PURE__ */ new Date();
+    m.change(t, { target: { value: a } }), r(t.getAttribute("value")).toBe(a.toString());
   });
 });

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