@hortiview/shared-components 0.0.4730 → 0.0.4779

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

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { FieldValues, Path, PathValue, Validate, ValidationRule } from 'react-hook-form';
+/**
+ * a generic FormText property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
+ */
+type FormTextProps<T extends FieldValues> = {
+    /** the path to the property, like Address.AddressLine1 */
+    propertyName: Path<T>;
+    /** the label of the Textbox */
+    label: string;
+    /** the max character length */
+    maxLength?: number;
+    /** the min character length */
+    minLength?: number;
+    /** if the field is required */
+    required?: boolean;
+    /** the text which is shown if the field is required and not filled */
+    requiredText?: string;
+    /** a boolean to set a textarea or a textfield */
+    textarea?: boolean;
+    /** a boolean to disable the field/set to readonly */
+    disabled?: boolean;
+    /** a boolean to hide the field */
+    hidden?: boolean;
+    /** a pattern to validate the field */
+    pattern?: ValidationRule<RegExp>;
+    /** a placeholder text */
+    placeholder?: string;
+    /** the type of the input field */
+    type?: string;
+    /** a prefix text */
+    prefixText?: string;
+    /** the input mode of the field */
+    inputMode?: 'search' | 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | undefined;
+    trailingIcon?: ReactNode;
+    /**
+     * the trigger to validate the field. default is 'likeForm'
+     * @default 'likeForm'
+     * @example 'onBlur' or 'onChange'
+     */
+    trigger?: 'onBlur' | 'onChange' | 'likeForm';
+    /**
+     * a custom validation function or an object with multiple validation functions
+     */
+    validate?: Validate<PathValue<T, Path<T>>, T> | Record<string, Validate<PathValue<T, Path<T>>, T>>;
+};
+/**
+ * creates a Textfield which should be part of a form component.
+ * the field is wrapped by the react hook forms {@link Controller} component.
+ * @param disabled if the field is disabled
+ * @param hidden if the field should be hidden
+ * @param inputMode the input mode of the field @example 'search' or 'numeric'
+ * @param label the label of the field
+ * @param maxLength the max character length
+ * @param minLength the min character length
+ * @param pattern a pattern to validate the field @example /^[A-Za-z]+$/
+ * @param placeholder a placeholder text
+ * @param prefixText a prefix text
+ * @param propertyName the name of the property in the form
+ * @param required if the field is required
+ * @param requiredText the text which is shown if the field is required and not filled
+ * @param textarea if the field is a textarea
+ * @param trigger the trigger to validate the field. @default 'likeForm' @example 'onBlur' or 'onChange'
+ * @param validate a custom validation function or an object with multiple validation functions
+ * @param trailingIcon a trailing icon
+ * @returns a JSX element that renders a textfield form input
+ */
+export declare const FormText: <T extends FieldValues>(props: FormTextProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FormComponents/FormText/FormText.js

@@ -0,0 +1,108 @@
+import "../../../assets/FormText.css";
+import { jsx as t, Fragment as P, jsxs as R } from "react/jsx-runtime";
+import { Textfield as V } from "@element/react-components";
+import { useState as W } from "react";
+import { useFormContext as b, Controller as _ } from "react-hook-form";
+const w = "_formTextAreaHelperText_7ae2c_1", D = "_invalid_7ae2c_6", E = "_formText_7ae2c_1", G = "_formTextArea_7ae2c_1", s = {
+  formTextAreaHelperText: w,
+  invalid: D,
+  formText: E,
+  formTextArea: G
+}, J = ({
+  count: e,
+  maxCount: c,
+  required: r = !1,
+  requiredText: l = ""
+}) => /* @__PURE__ */ R("div", { className: s.formTextAreaHelperText, children: [
+  r ? /* @__PURE__ */ t("div", { children: l }) : /* @__PURE__ */ t("div", {}),
+  /* @__PURE__ */ t("div", { children: `${e}/${c}` })
+] }), p = (e) => e.textarea ? /* @__PURE__ */ t(K, { ...e }) : /* @__PURE__ */ t(O, { ...e }), K = (e) => /* @__PURE__ */ t("div", { className: s.formTextArea, children: /* @__PURE__ */ t(g, { ...e }) }), O = (e) => /* @__PURE__ */ t(g, { ...e }), g = ({
+  propertyName: e,
+  label: c,
+  maxLength: r,
+  minLength: l,
+  required: f = !1,
+  requiredText: m = "",
+  disabled: h = !1,
+  textarea: i = !1,
+  hidden: C = !1,
+  pattern: A,
+  placeholder: F,
+  type: H,
+  prefixText: S,
+  inputMode: $,
+  trailingIcon: B,
+  trigger: u = "likeForm",
+  validate: j
+}) => {
+  const {
+    control: x,
+    getFieldState: T,
+    formState: { errors: a },
+    trigger: d
+  } = b(), [k, z] = W(0), I = (n) => {
+    const o = n.target.value;
+    z(o?.length ?? 0);
+  }, M = () => {
+    if (a && a[e]) {
+      const n = a[e]?.message;
+      return n || "Invalid input";
+    }
+    return r && i ? /* @__PURE__ */ t(
+      J,
+      {
+        count: k,
+        maxCount: r,
+        required: f,
+        requiredText: m
+      }
+    ) : m;
+  };
+  return C ? /* @__PURE__ */ t(_, { name: e, control: x, render: () => /* @__PURE__ */ t(P, {}) }) : /* @__PURE__ */ t(
+    _,
+    {
+      name: e,
+      rules: {
+        required: f,
+        maxLength: r,
+        minLength: l,
+        pattern: A,
+        validate: j
+      },
+      control: x,
+      render: ({ field: { ref: n, ...o } }) => /* @__PURE__ */ t(
+        V,
+        {
+          ...o,
+          value: o.value ?? "",
+          type: H,
+          fullWidth: !0,
+          inputMode: $,
+          placeholder: F,
+          prefixText: S,
+          disabled: h,
+          helperText: M(),
+          helperTextPersistent: a !== void 0 || f || r !== void 0 && i,
+          label: c,
+          variant: "outlined",
+          maxlength: r,
+          minLength: l,
+          textarea: i,
+          noResize: !1,
+          onBlur: () => {
+            u === "onBlur" && d(e);
+          },
+          onChange: (v) => {
+            o.onChange(v), i && r !== void 0 && I(v), u === "onChange" && d(e);
+          },
+          valid: !T(e).invalid,
+          className: `${s.formText} ${T(e).invalid ? s.invalid : ""}`,
+          trailingIcon: B
+        }
+      )
+    }
+  );
+};
+export {
+  p as FormText
+};

package/dist/components/FormComponents/FormText/FormText.test.d.ts

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

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

@@ -0,0 +1,84 @@
+import { jsx as n } from "react/jsx-runtime";
+import { r as o, s as a, f as i } from "../../../react.esm-BeDwcQWb.js";
+import { FormText as s } from "./FormText.js";
+import { v as r, d as m, t as l, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+const d = r.fn();
+r.mock("react-hook-form", () => ({
+  ...r.importActual("react-hook-form"),
+  Controller: ({ render: e }) => e({
+    field: {
+      ref: void 0,
+      onChange: d,
+      value: "test"
+    }
+  }),
+  useFormContext: () => ({
+    watch: r.fn(),
+    control: {
+      register: r.fn(),
+      unregister: r.fn(),
+      getFieldState: r.fn(),
+      _names: {
+        array: new Set("test"),
+        mount: new Set("test"),
+        unMount: new Set("test"),
+        watch: new Set("test"),
+        focus: "test",
+        watchAll: !1
+      },
+      _subjects: {
+        watch: r.fn(),
+        array: r.fn(),
+        state: r.fn()
+      },
+      _getWatch: r.fn(),
+      _formValues: ["test"],
+      _defaultValues: ["test"]
+    },
+    formState: { errors: {} },
+    getFieldState: () => ({ invalid: !1 })
+  })
+}));
+m("FormText Test", () => {
+  l("render FormText and return single line text field", () => {
+    o(/* @__PURE__ */ n(s, { maxLength: 100, label: "address.line2", propertyName: "addressLine2" }));
+    const e = a.getByRole("textbox");
+    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLInputElement), t(e).toHaveAttribute("maxlength", "100"), t(a.getByText("address.line2")).toBeInTheDocument();
+  }), l("change value of single line text field", () => {
+    o(/* @__PURE__ */ n(s, { maxLength: 100, label: "address.line2", propertyName: "addressLine2" }));
+    const e = a.getByRole("textbox");
+    t(e).toHaveValue("test"), i.change(e, { target: { value: "test-change" } }), t(d).toHaveBeenCalled();
+  }), l("render FormText and return text area", () => {
+    o(
+      /* @__PURE__ */ n(
+        s,
+        {
+          maxLength: 200,
+          label: "address.line1",
+          propertyName: "addressLine1",
+          required: !0,
+          requiredText: "required",
+          textarea: !0
+        }
+      )
+    );
+    const e = a.getByRole("textbox");
+    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLTextAreaElement), t(e).toHaveAttribute("maxlength", "200"), t(a.getByText("address.line1")).toBeInTheDocument(), t(a.getByText("required")).toBeInTheDocument();
+  }), l("change value of text area", () => {
+    o(
+      /* @__PURE__ */ n(
+        s,
+        {
+          maxLength: 200,
+          label: "address.line1",
+          propertyName: "addressLine1",
+          required: !0,
+          requiredText: "required",
+          textarea: !0
+        }
+      )
+    );
+    const e = a.getByRole("textbox");
+    i.change(e, { target: { value: "test-change" } }), t(d).toHaveBeenCalled();
+  });
+});

package/dist/components/HashTabView/HashTabView.js

@@ -1,50 +1,58 @@
-import { jsx as a, jsxs as d, Fragment as I } from "react/jsx-runtime";
-import { Elevation as N, Group as o, TabBar as b, Tab as x, Padding as y } from "@element/react-components";
-import { useState as k, useEffect as w } from "react";
-import { s as t } from "../../HashTabView.module-BY0tbl3B.js";
-import { u as $ } from "../../useBreakpoint-DyAmuka7.js";
-const g = (n, r, i) => !i || !r || !n ? 0 : n.findIndex((c) => `#${c.hash}` === r) ?? 0, F = ({
+import "../../assets/HashTabView.css";
+import { jsx as r, jsxs as d, Fragment as w } from "react/jsx-runtime";
+import { Elevation as T, Group as o, TabBar as C, Tab as k, Padding as A } from "@element/react-components";
+import { useState as I, useEffect as L } from "react";
+import { a as N } from "../../useBreakpoint-DROHPVxO.js";
+const x = "_elevation_1rcw6_1", y = "_themeBackground_1rcw6_6", W = "_tabBar_1rcw6_10", $ = "_tabWrapper_1rcw6_16", j = "_tabButton_1rcw6_20", E = "_childContainer_1rcw6_24", z = "_childContainerLg_1rcw6_28", a = {
+  elevation: x,
+  themeBackground: y,
+  tabBar: W,
+  tabWrapper: $,
+  tabButton: j,
+  childContainer: E,
+  childContainerLg: z
+}, _ = (n, t, c) => !c || !t || !n ? 0 : n.findIndex((i) => `#${i.hash}` === t) ?? 0, q = ({
   tabs: n,
-  hasHash: r = !0,
-  hash: i = "",
-  clusterAlign: c = "start",
-  hasClusteredTabs: f,
-  children: s,
+  hasHash: t = !0,
+  hash: c = "",
+  clusterAlign: i = "start",
+  hasClusteredTabs: g,
+  children: l,
   verticalGap: h = "none",
-  elevation: v = 0,
-  backgroundColor: T = "themeBackground",
-  onChange: A
+  elevation: B = 0,
+  backgroundColor: v = "themeBackground",
+  onChange: b
 }) => {
-  const [m, p] = k(g(n, i, r)), { isLg: l } = $();
-  w(() => {
-    const e = g(n, i, r);
+  const [m, p] = I(_(n, c, t)), { isLg: s } = N();
+  L(() => {
+    const e = _(n, c, t);
     p(e);
-  }, [i, n, r]);
-  const B = (e) => {
+  }, [c, n, t]);
+  const f = (e) => {
     const u = n[e].hash;
-    u != null && r && (window.location.hash = u), p(e), A?.(e);
+    u != null && t && (window.location.hash = u), p(e), b?.(e);
   };
-  return /* @__PURE__ */ a(
-    N,
+  return /* @__PURE__ */ r(
+    T,
     {
-      elevation: v,
-      className: `${t.elevation} ${T === "none" ? "" : t.themeBackground}`,
+      elevation: B,
+      className: `${a.elevation} ${v === "none" ? "" : a.themeBackground}`,
       children: /* @__PURE__ */ d(o, { direction: "vertical", gap: h, secondaryAlign: "stretch", children: [
-        /* @__PURE__ */ d(o, { direction: l ? "horizontal" : "vertical", className: t.tabWrapper, children: [
-          /* @__PURE__ */ a(
-            b,
+        /* @__PURE__ */ d(o, { direction: s ? "horizontal" : "vertical", className: a.tabWrapper, children: [
+          /* @__PURE__ */ r(
+            C,
             {
-              className: t.tabBar,
-              clustered: l ? f : !1,
-              clusterAlign: c,
+              className: a.tabBar,
+              clustered: s ? g : !1,
+              clusterAlign: i,
               variant: "surface",
               activeTabIndex: m,
-              onTabActivated: B,
-              children: n.map((e) => /* @__PURE__ */ a(
-                x,
+              onTabActivated: f,
+              children: n.map((e) => /* @__PURE__ */ r(
+                k,
                 {
                   icon: e.leadingIcon,
-                  className: s ? t.tabButton : "",
+                  className: l ? a.tabButton : "",
                   children: /* @__PURE__ */ d(o, { gap: "dense", children: [
                     e.title,
                     e.trailingIcon
@@ -54,14 +62,14 @@ const g = (n, r, i) => !i || !r || !n ? 0 : n.findIndex((c) => `#${c.hash}` ===
               ))
             }
           ),
-          s ? /* @__PURE__ */ a(
-            y,
+          l ? /* @__PURE__ */ r(
+            A,
             {
               variant: "dense",
-              className: l ? t.childContainer : t.childContainerLg,
-              children: /* @__PURE__ */ a(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: s })
+              className: s ? a.childContainer : a.childContainerLg,
+              children: /* @__PURE__ */ r(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: l })
             }
-          ) : /* @__PURE__ */ a(I, {})
+          ) : /* @__PURE__ */ r(w, {})
         ] }),
         n[m]?.component
       ] })
@@ -69,5 +77,5 @@ const g = (n, r, i) => !i || !r || !n ? 0 : n.findIndex((c) => `#${c.hash}` ===
   );
 };
 export {
-  F as HashTabView
+  q as HashTabView
 };

package/dist/components/HeaderFilter/HeaderFilter.js

@@ -1,25 +1,27 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { TypoBody as n, Select as d } from "@element/react-components";
-import { BasicHeading as l } from "../BasicHeading/BasicHeading.js";
-import { s as m } from "../../HeaderFilter.module-DiBmulr5.js";
-const h = ({
+import "../../assets/HeaderFilter.css";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { TypoBody as a, Select as s } from "@element/react-components";
+import { BasicHeading as c } from "../BasicHeading/BasicHeading.js";
+const d = "_filterSelect_923nc_1", m = {
+  filterSelect: d
+}, h = ({
   heading: r,
   filterByText: e,
-  setFilter: o,
-  filterValue: a,
-  filterOptions: i
-}) => /* @__PURE__ */ s(l, { "data-testid": "HeaderContainer", heading: r, children: [
-  e && /* @__PURE__ */ t(n, { level: 2, children: e }),
+  setFilter: i,
+  filterValue: l,
+  filterOptions: o
+}) => /* @__PURE__ */ n(c, { "data-testid": "HeaderContainer", heading: r, children: [
+  e && /* @__PURE__ */ t(a, { level: 2, children: e }),
   /* @__PURE__ */ t(
-    d,
+    s,
     {
       "data-testid": "Select",
       dense: !0,
       className: m.filterSelect,
       variant: "outlined",
-      onChange: o,
-      value: a,
-      options: i
+      onChange: i,
+      value: l,
+      options: o
     }
   )
 ] });

package/dist/components/Iconify/Iconify.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconProps } from '@element/react-components';
 import { AvailableCustomIcons } from '../../enums/AvailableCustomIcons';
 export type IconifyProps = {

package/dist/components/ListArea/ListArea.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LinkProps } from '../../types/internal/ReactRouterTypes';
 import { ListElement } from '../../types/ListElement';
 type ListAreaProps = {