@hortiview/shared-components 0.0.5859 → 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/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.5859",
+  "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>",