@hortiview/shared-components 0.0.4806 → 0.0.4991

package/README.md

@@ -14,7 +14,7 @@ This is a shared component library. It should used in the HortiView platform and
 
 ## Prerequisites
 
-This library is based in Bayers element component library. To use it properly you need to install this package first. 
+This library is based in Bayers element component library. To use it properly you need to install this package first.
 To get access to this restricted package please contact your Bayer contact person.
 
 After you gain access use `yarn add @element/react-components @element/themes` or `npm i @element/react-components @element/themes` to add the package to your solution.
@@ -23,13 +23,14 @@ After you gain access use `yarn add @element/react-components @element/themes` o
 
 For the best experience use [react-router](https://reactrouter.com/en/main) in your solution, because some of the component rely on properties like pathname, hash or components like `Link` out of `react-router`.
 
-Additionally the library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.  
+Additionally the library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.
 
 ## Available packages:
 
 1. [BaseView](#baseview)
 1. [BasicHeading](#basicheading)
 1. [BlockView](#blockview)
+1. [ContextMenu](#contextmenu)
 1. [DeleteModal](#deletemodal)
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
@@ -42,6 +43,7 @@ Additionally the library provides form components using [react-hook-form](https:
    1. [FormText](#formtext)
 1. [HashTabView](#hashtabview)
 1. [HeaderFilter](#headerfilter)
+1. [InfoGroup](#infogroup)
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
 1. [ScrollBar](#scrollbar)
@@ -120,6 +122,31 @@ const blocks: BlockDto = [
 <BlockView blocks={blocks} columns={1} rows={1} />;
 ```
 
+### ContextMenu
+
+This is a component to render a menu button, that opens several action-points in a context-menu
+
+```typescript
+import { ContextMenu } from '@hortiview/shared-components';
+
+const actions = [
+  {
+    primaryText: 'Edit',
+    secondaryText: 'Open the edit dialog',
+    onClick: () => openEdit(param),
+    leadingBlock: 'edit',
+  },
+  {
+    primaryText: 'Delete',
+    secondaryText: 'Delete the item'
+    onClick: deleteItem,
+    leadingBlock: 'delete',
+  },
+];
+
+<ContextMenu actions={actions} />;
+```
+
 ### DeleteModal
 
 A modal to confirm a deletion.
@@ -390,6 +417,49 @@ const [filterValue, setFilterValue] = useState<string>();
 />;
 ```
 
+### InfoGroup
+
+Renders a section with several informations rendered next to each other (or below for mobile view)
+
+```typescript
+import { InfoGroup } from '@hortiview/shared-components';
+
+const fields: FieldItem[] = [
+  { label: 'FieldTitle', value: 'Value' },
+  { label: 'AnotherFieldTitle', value: 'ValueButInPrimaryColor', themeColor: 'primary' },
+  //render a component below the label
+  { label: 'StatusBadge', variant: 'embedded', component: <LabelBadge label='redLabel' themeColor='red'>}
+  //render a complex component without label
+  { label: 'ComplexComponent', component: <ComplexComponent />}
+]
+
+<InfoGroup fields={fields} />
+```
+
+You can also render a multiline section, that receives an array if FieldItem-Arrays instead of a single FieldItem-Array
+```typescript
+import { InfoGroup } from '@hortiview/shared-components';
+
+const multiLineFields: FieldItem[][] = [
+  [
+    { label: 'FieldTitle', value: 'Value' },
+    { label: 'AnotherFieldTitle', value: 'ValueButInPrimaryColor', themeColor: 'primary' }
+  ],
+  [
+    { label: 'LongField', value: 'VeryLongValueThatNeedsToBeDisplayedInANewLine'}
+  ],
+  [
+    { label: 'ComplexComponent', component: <ComplexComponent />},
+    { label: 'FieldTitle2', value: 'Value2' },
+    { label: 'FieldTitle3', value: 'Value3' },
+    { label: 'FieldTitle4', value: 'Value4' },
+  ]  
+]
+
+<InfoGroup fields={multiLineFields} />
+
+```
+
 ### Iconify
 
 Provides some custom icons based on the elements Icon API. Currently supported:

package/dist/ListAreaService-8vnw7uAP.js

@@ -0,0 +1,68 @@
+import "./assets/ListAreaService.css";
+import { jsx as l } from "react/jsx-runtime";
+import { TypoButton as b, TypoSubtitle as k, TypoBody as L, Icon as x } from "@element/react-components";
+import { Iconify as C } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as E } from "./enums/AvailableCustomIcons.js";
+const N = "_fullWidth_1y0ty_1", W = "_mainElevation_1y0ty_5", $ = "_searchbar_1y0ty_11", j = "_roundedBottom_1y0ty_19", S = "_list_1y0ty_24", w = "_listItem_1y0ty_52", A = "_trailingIcon_1y0ty_56", G = "_groupedListItem_1y0ty_68", u = {
+  fullWidth: N,
+  mainElevation: W,
+  searchbar: $,
+  roundedBottom: j,
+  list: S,
+  listItem: w,
+  trailingIcon: A,
+  groupedListItem: G
+}, J = (t, i, n, r) => {
+  const s = t.reduce((e, a) => {
+    const { groupName: o, ...m } = a;
+    return !o || typeof o != "string" || (e[o] || (e[o] = {
+      groupName: /* @__PURE__ */ l(b, { children: o }),
+      id: o,
+      items: []
+    }), e[o].items = [
+      ...e[o].items,
+      _(m, i, n, !0, r)
+    ]), e;
+  }, {});
+  return Object.values(s);
+}, K = (t, i, n, r) => t.map((s) => _(s, i, n, !1, r)), _ = (t, i, n, r, s) => {
+  const {
+    title: e,
+    subTitle: a,
+    route: o,
+    value: m,
+    noNavigation: d,
+    disabled: g,
+    icon: I,
+    iconType: y,
+    trailingIcon: v,
+    trailingIconType: f,
+    actionButton: T,
+    onClick: h,
+    customTitle: p
+  } = t, c = i === o;
+  return {
+    select: c,
+    primaryText: p ?? /* @__PURE__ */ l(k, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: e }),
+    secondaryText: a && !p ? /* @__PURE__ */ l(L, { level: 2, themeColor: c ? "primary" : void 0, children: a }) : void 0,
+    overlineText: t.overlineTitle,
+    trailingBlock: T ?? v ?? /* @__PURE__ */ l(x, { icon: "arrow_right" }),
+    leadingBlock: O(I),
+    nonInteractive: g,
+    value: m,
+    componentProps: {
+      leadingBlockType: y ?? "icon",
+      trailingBlockType: f ?? "icon",
+      className: `${y === "avatar" ? "" : u.listItem} ${n} ${r ? u.groupedListItem : ""}`,
+      onClick: (P, B) => h?.(B),
+      tag: d ? void 0 : s ?? "a",
+      to: d ? void 0 : o
+    }
+  };
+}, O = (t) => typeof t == "string" && t in E ? /* @__PURE__ */ l(C, { icon: t }) : t;
+export {
+  K as a,
+  J as g,
+  _ as m,
+  u as s
+};

package/dist/assets/ContextMenu.css

@@ -0,0 +1 @@
+._menu_1rfel_1{width:15.875rem}

package/dist/assets/InfoGroup.css

@@ -0,0 +1 @@
+._container_7ypbj_1{width:100%;padding:0;@media only screen and (max-width: 838px){padding-top:.5rem}}._dividerContainer_7ypbj_10{width:100%;padding:0rem 1rem;margin:-1rem 0rem}._mainGroup_7ypbj_16{border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._row_7ypbj_21{min-height:5.5vh;padding:1rem}._row_7ypbj_21 input:not([type=checkbox]){@media only screen and (max-width: 839px){height:80%}}._row_7ypbj_21 input{padding-top:.2rem;border:none;color:#000!important;font-size:1.2rem;margin-top:1rem!important;@media only screen and (min-width: 839px){margin-top:1.5rem!important}}._row_7ypbj_21 label{font-size:1.2rem}:before{border:none!important}._component_7ypbj_51{width:95%!important;background-color:var(--lmnt-theme-on-primary);padding-left:.4rem!important;justify-content:flex-end;min-height:3rem;height:4vh;align-items:center;text-align:center;display:flex;border-radius:.5rem;box-shadow:0 .125rem .25rem #00000040;padding:1rem;margin-right:1rem;@media only screen and (max-width: 839px){margin-bottom:1.6rem!important;margin-left:1rem}}._component_7ypbj_51>div{display:flex;justify-content:space-between;width:100%}._component_7ypbj_51>div label{font-size:1rem;color:#00000061;font-weight:500}._componentContainer_7ypbj_84{width:100%!important;@media only screen and (max-width: 839px){margin-top:1rem;margin-bottom:-.5rem}}._field_7ypbj_92{width:100%;padding:0rem .5rem;align-self:center;display:flex;flex-direction:column}

package/dist/assets/ListAreaService.css

@@ -1 +1 @@
-._fullWidth_1l0qh_1{width:100%}._mainElevation_1l0qh_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1l0qh_11 div{border:none}._searchbar_1l0qh_11 button{margin-right:.5rem}._roundedBottom_1l0qh_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._list_1l0qh_24{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1l0qh_24::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1l0qh_24::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1l0qh_24::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_1l0qh_48{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1l0qh_48 i:not(._trailingIcon_1l0qh_52){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1l0qh_48 i._trailingIcon_1l0qh_52{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1l0qh_48 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1l0qh_64{height:4.5rem!important}
+._fullWidth_1y0ty_1{width:100%}._mainElevation_1y0ty_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1y0ty_11 div{border:none}._searchbar_1y0ty_11 button{margin-right:.5rem}._roundedBottom_1y0ty_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._list_1y0ty_24{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1y0ty_24 [class*=mdc-list-item__overline-text]{margin-bottom:-1.5rem}._list_1y0ty_24::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1y0ty_24::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1y0ty_24::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_1y0ty_52{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1y0ty_52 i:not(._trailingIcon_1y0ty_56){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1y0ty_52 i._trailingIcon_1y0ty_56{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1y0ty_52 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1y0ty_68{height:4.5rem!important}

package/dist/components/BaseView/BaseView.test.js

@@ -1,7 +1,7 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
 import { u as l } from "../../useBreakpoint-DROHPVxO.js";
 import { BaseView as r } from "./BaseView.js";
-import { r as i, s as e, f as p } from "../../react.esm-BeDwcQWb.js";
+import { r as i, s as e, f as p } from "../../react.esm-C0LtovhP.js";
 import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
 u("BaseView Test", () => {
   m(() => {

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -1,7 +1,7 @@
 import { jsx as o, Fragment as c } from "react/jsx-runtime";
 import { Button as g } from "@element/react-components";
 import { BasicHeading as a } from "./BasicHeading.js";
-import { r as i, s as n } from "../../react.esm-BeDwcQWb.js";
+import { r as i, s as n } from "../../react.esm-C0LtovhP.js";
 import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {

package/dist/components/BlockView/BlockView.test.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { r as s, s as o, f as n } from "../../react.esm-BeDwcQWb.js";
+import { r as s, s as o, f as n } from "../../react.esm-C0LtovhP.js";
 import { BlockView as r } from "./BlockView.js";
 import { d as B, v as a, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 B("BlockView Test", () => {

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,27 @@
+import { ListItemProps } from '@element/react-components';
+type ContextMenuProps = {
+    /**
+     * If not null, the menu will be open
+     */
+    triggerOpen?: boolean | null;
+    /**
+     * List of actions to display in the context menu as ListItems
+     * @see ListItemProps
+     */
+    actions: ListItemProps[];
+};
+/**
+ *
+ * @param {boolean} triggerOpen indicates if the menu should be open
+ * @param {ListItemProps[]} actions list of actions to display in the context menu as ListItems
+ * @recommended `primaryText`, `onClick`, `leadingBlock`
+ * @requires `ListItemProps` from `@element/react-components`
+ * @example const actions = [
+ *  { primaryText: 'Open', onClick: () => openSomeModal(), leadingBlock: 'add' },
+ *  { primaryText: 'Delete', onClick: () => DeleteSomeThing(), leadingBlock: 'delete_outline'},
+ *  { primaryText: 'Edit', onClick: () => EditSomeThing(), leadingBlock: 'edit'},
+ * ];
+ * @returns a context menu with the given actions as ListItems
+ */
+export declare const ContextMenu: ({ triggerOpen, actions }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,40 @@
+import "../../assets/ContextMenu.css";
+import { jsx as n } from "react/jsx-runtime";
+import { Menu as c, IconButton as m, List as r, ListItem as d } from "@element/react-components";
+import { useState as f, useCallback as s, useEffect as p } from "react";
+const y = "_menu_1rfel_1", B = {
+  menu: y
+}, k = ({ triggerOpen: o = null, actions: l }) => {
+  const [e, t] = f(!1), i = s(() => {
+    t(!e);
+  }, [e]), u = s(() => {
+    t(!1);
+  }, []);
+  return p(() => {
+    t(o !== null ? o : !1);
+  }, [o]), /* @__PURE__ */ n(
+    c,
+    {
+      className: B.menu,
+      "data-testid": "selectionmenu",
+      open: e,
+      surfaceOnly: !0,
+      hoistToBody: !0,
+      onClose: u,
+      trigger: /* @__PURE__ */ n(
+        m,
+        {
+          variant: e ? "filled-primary" : void 0,
+          "data-testid": "openButton",
+          icon: "more_vert",
+          onClick: i
+        }
+      ),
+      children: /* @__PURE__ */ n(r, { children: l.map((a) => /* @__PURE__ */ n(d, { ...a, leadingBlockType: "icon", "data-testid": "listItemButton" })) })
+    },
+    "selectionmenu"
+  );
+};
+export {
+  k as ContextMenu
+};

package/dist/components/ContextMenu/ContextMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -0,0 +1,22 @@
+import { jsx as d } from "react/jsx-runtime";
+import { r, s as n, f as o, w as a } from "../../react.esm-C0LtovhP.js";
+import { ContextMenu as u } from "./ContextMenu.js";
+import { v as m, d as C, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+const T = m.fn(), l = m.fn(), i = m.fn(), p = [
+  { primaryText: "Open", onClick: T, leadingBlock: "add" },
+  { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline" },
+  { primaryText: "Edit", onClick: l, leadingBlock: "edit" }
+];
+C("ContextMenu Test", () => {
+  B("render ContextMenu and open it", () => {
+    r(/* @__PURE__ */ d(u, { actions: p }));
+    const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
+    e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open"));
+    const s = n.getAllByTestId("listItemButton");
+    e(s.length).toBe(3), e(n.getByText("Open")).toBeInTheDocument(), e(n.getByText("Delete")).toBeInTheDocument(), e(n.getByText("Edit")).toBeInTheDocument(), o.click(s[0]), e(T).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(l).not.toHaveBeenCalled(), o.click(s[1]), e(i).toHaveBeenCalled(), o.click(s[2]), e(l).toHaveBeenCalled();
+  }), B("render contextMenu and close it", () => {
+    r(/* @__PURE__ */ d(u, { actions: p }));
+    const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
+    e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open")), o.click(c), a(() => e(t).not.toHaveClass("mdc-menu-surface--open"));
+  });
+});

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as c, s as e } from "../../react.esm-BeDwcQWb.js";
+import { r as c, s as e } from "../../react.esm-C0LtovhP.js";
 import { DeleteModal as b } from "./DeleteModal.js";
 import { d as B, t as a, v as o, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 B("DeleteModal Test", () => {

package/dist/components/Disclaimer/Disclaimer.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { r, s as t } from "../../react.esm-BeDwcQWb.js";
+import { r, s as t } from "../../react.esm-C0LtovhP.js";
 import { Disclaimer as s } from "./Disclaimer.js";
 import { d as i, t as m, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 i("Disclaimer test", () => {

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { r as s, s as d } from "../../react.esm-BeDwcQWb.js";
+import { r as s, s as d } from "../../react.esm-C0LtovhP.js";
 import { EmptyView as n } from "./EmptyView.js";
 import { d as i, t as r, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 i("EmptyView", () => {

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

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { r as n, s as t, f as m } from "../../../react.esm-BeDwcQWb.js";
+import { r as n, s as t, f as m } from "../../../react.esm-C0LtovhP.js";
 import { FormCheckBox as c } from "./FormCheckBox.js";
 import { v as e, d as h, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const a = e.fn();

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-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();
 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/FormRadio/FormRadio.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as s, s as t, f as m } from "../../../react.esm-BeDwcQWb.js";
+import { r as s, s as t, f as m } from "../../../react.esm-C0LtovhP.js";
 import { FormRadio as l } from "./FormRadio.js";
 import { v as e, d as c, t as i, g as o } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const a = e.fn();