@hortiview/shared-components 0.0.4806 → 0.0.4870

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

@@ -1,13 +1,16 @@
-import { FieldValues, Path } from 'react-hook-form';
+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: string;
-    /** Determines if this input is mandatory. */
-    required?: boolean;
-    /** Custom text to show when the required field is not filled. */
-    requiredText?: string;
+    /**
+     * the rules for the picker
+     * @default undefined
+     * @example { required: { value: true, message: 'This field is required' } }
+     * @example { validate: (value) => value === 'admin' }
+     */
+    rules?: Omit<RegisterOptions<T, FieldPath<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> | undefined;
     /** ClassName */
     className?: string;
     /** Add the number of years to subtract from the current date as bottom of range */
@@ -23,14 +26,13 @@ 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 required - determines if the date input is required.
- * @param requiredText - text to be shown if the required date is not selected.
  * @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
  * @param locale - locale to be used for the date picker.
+ * @param rules - rules for the date picker. default _undefined_ example: _{ required: { value: true, message: 'This field is required' } }_
  *
  * @returns A JSX element that renders a date picker form input.
  */
-export declare const FormDatePicker: <T extends FieldValues>({ propertyName, label, required, requiredText, className, minRangeYear, maxRangeYear, locale, }: DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDatePicker: <T extends FieldValues>({ propertyName, label, className, minRangeYear, maxRangeYear, locale, rules, }: DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,15 +1,15 @@
-import { jsx as o } from "react/jsx-runtime";
-import { r as n, s as a, f as l } from "../../../react.esm-BeDwcQWb.js";
-import { FormDatePicker as s } from "./FormDatePicker.js";
-import { v as e, d as m, t as c, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
-const f = e.fn();
+import { jsx as n } from "react/jsx-runtime";
+import { r as s, s as a, f as m } from "../../../react.esm-BeDwcQWb.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();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),
   Controller: ({
     render: t
   }) => t({
     field: {
-      onChange: f
+      onChange: i
     }
   }),
   useFormContext: () => ({
@@ -39,18 +39,18 @@ e.mock("react-hook-form", () => ({
     getFieldState: e.fn().mockReturnValue({ invalid: !1 })
   })
 }));
-m("FormDatePicker Test", () => {
-  c("render FormDatePicker", () => {
-    n(
-      /* @__PURE__ */ o(s, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
+f("FormDatePicker Test", () => {
+  l("render FormDatePicker", () => {
+    s(
+      /* @__PURE__ */ n(c, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
     );
     const t = a.getByRole("textbox");
-    r(t).toBeInTheDocument(), r(t).toBeInstanceOf(HTMLInputElement), r(["7.8.2024", "8/7/2024"]).toContainEqual(t.value), r(a.getByText("user.date-of-birth")).toBeInTheDocument();
-  }), c("change FormDatePicker value", () => {
-    n(
-      /* @__PURE__ */ o(s, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
+    r(t).toBeInTheDocument(), r(t).toBeInstanceOf(HTMLInputElement), r(a.getByText("user.date-of-birth")).toBeInTheDocument();
+  }), l("change FormDatePicker value", () => {
+    s(
+      /* @__PURE__ */ n(c, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
     );
-    const t = a.getByRole("textbox");
-    l.change(t, { target: { value: "1.1.24" } });
+    const t = a.getByRole("textbox"), o = /* @__PURE__ */ new Date();
+    m.change(t, { target: { value: o } }), r(t.getAttribute("value")).toBe(o.toString());
   });
 });

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { FieldValues, Path } from 'react-hook-form';
+import { SelectProps } from '@element/react-components';
+import { FieldPath, FieldValues, Path, RegisterOptions } from 'react-hook-form';
 /**
  * a generic FormSelector property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
  */
-type FormSelectProps<T extends FieldValues> = {
+type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'className' | 'clearable' | 'disabled' | 'helperText' | 'helperTextPersistent' | 'hidden' | 'hoisted' | 'label' | 'menuMaxHeight' | 'multi' | 'multiSelect' | 'noOptionsMessage' | 'onChange' | 'options' | 'searchable' | 'textKey' | 'valid' | 'value' | 'valueKey' | 'variant'> & {
     /** the current character count */
     propertyName: Path<T>;
     /** the label of the select */
@@ -12,10 +13,6 @@ type FormSelectProps<T extends FieldValues> = {
     disabled?: boolean;
     /** if the select should be hidden */
     hidden?: boolean;
-    /** if the select is required */
-    required?: boolean;
-    /** the text which is shown if the select is required and not filled */
-    requiredText?: string;
     /** if true the select dropdown is rendered outside of the parent. Useful for when the select needs to render in a parent with "overflow: hidden" and the dropdown will cut on the component border. */
     hoisted?: boolean;
     /** the key of the value attribute of the select, default: value */
@@ -30,6 +27,13 @@ type FormSelectProps<T extends FieldValues> = {
     clearable?: boolean;
     /** a message if no options a present */
     noOptionsMessage?: string;
+    /**
+     * the rules for the picker
+     * @default undefined
+     * @example { required: { value: true, message: 'This field is required' } }
+     * @example { validate: (value) => value === 'admin' }
+     */
+    rules?: Omit<RegisterOptions<T, FieldPath<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> | undefined;
 };
 /**
  * the base option type of the selector, you can also use your own custom objects, by defining the {@link FormSelectProps} valueKey and textKey
@@ -50,12 +54,11 @@ export type FormSelectOption = {
  * @param options the options of the select
  * @param noOptionsMessage a message if no options a present
  * @param propertyName the name of the property in the form
- * @param required if the select is required
- * @param requiredText the text which is shown if the select is required and not filled
  * @param textKey the key of the text attribute of the select, default: text
  * @param valueKey the key of the value attribute of the select, default: value
+ * @param rules the rules for the select example _{ required: { value: true, message: 'This field is required' } }_
  *
  * @returns
  */
-export declare const FormSelect: <T extends FieldValues>({ propertyName, label, required, requiredText, options, multi, disabled, hoisted, hidden, valueKey, textKey, clearable, noOptionsMessage, }: FormSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormSelect: <T extends FieldValues>({ propertyName, label, options, multi, disabled, hoisted, hidden, valueKey, textKey, clearable, noOptionsMessage, rules, ...props }: FormSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,14 +1,16 @@
-import { jsx as a } from "react/jsx-runtime";
-import { r as s, s as r } from "../../../react.esm-BeDwcQWb.js";
+import { jsx as s } from "react/jsx-runtime";
+import { r as a, s as r } from "../../../react.esm-BeDwcQWb.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 i = e.fn();
+const m = e.fn();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),
-  Controller: ({ render: o }) => o({
+  Controller: ({
+    render: o
+  }) => o({
     field: {
       ref: void 0,
-      onChange: i,
+      onChange: m,
       value: "3"
     }
   }),
@@ -45,13 +47,12 @@ l("FormSelect Test", () => {
     { id: "3", value: "Afar", description: "" }
   ];
   u("render FormSelect", () => {
-    s(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ s(
         c,
         {
           label: "address.country",
-          required: !0,
-          requiredText: "required",
+          rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
           options: o,
           valueKey: "id",

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