@hortiview/shared-components 0.0.6403 → 0.0.6829

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

@@ -1,9 +1,10 @@
+import { TextfieldProps } from '@element/react-components';
 import { ReactNode } from 'react';
 import { FieldPath, FieldValues, Path, RegisterOptions } from 'react-hook-form';
 /**
  * a generic FormText property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
  */
-export type FormTextProps<T extends FieldValues> = {
+export type FormTextProps<T extends FieldValues> = TextfieldProps & {
     /** the path to the property, like Address.AddressLine1 */
     propertyName: Path<T>;
     /** the label of the Textbox */

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

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

package/dist/components/ListArea/ListArea.js

@@ -4,7 +4,7 @@ import { g as Hr } from "../../_commonjsHelpers-CT_km90n.js";
 import { _ as H, a as Tr, b as wr, c as w, d as Nr, e as Wr, f as h, h as N, j as B, k as Xr, l as zr, m as I, n as Yr, o as Zr, p as Jr, q as W, r as Qr, s as Or, t as Pr, u as kr, v as Vr } from "../../get-BRDhkfK0.js";
 import { useState as re, useMemo as k } from "react";
 import { SearchBar as ee } from "../SearchBar/SearchBar.js";
-import { g as ae, a as te, s as T } from "../../ListAreaService-BoNnFzrZ.js";
+import { g as ae, a as te, s as T } from "../../ListAreaService-DDlsV9UD.js";
 var ne = H;
 function se() {
   this.__data__ = new ne(), this.size = 0;

package/dist/components/ListArea/ListArea.test.js

@@ -2,7 +2,7 @@ import { jsx as r, Fragment as i } from "react/jsx-runtime";
 import { TypoButton as p } from "@element/react-components";
 import { r as s, s as a, f as u } from "../../react.esm-BBemCHUU.js";
 import { ListArea as c } from "./ListArea.js";
-import { g as h } from "../../ListAreaService-BoNnFzrZ.js";
+import { g as h } from "../../ListAreaService-DDlsV9UD.js";
 import { d as m, t as n, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 m("ListArea Test", () => {
   const o = [

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

@@ -26,7 +26,7 @@ export declare const getListedItems: (items: ListElement[], pathname: string, it
     select: boolean;
     primaryText: string;
     secondaryText: import("react/jsx-runtime").JSX.Element;
-    overlineText: string | undefined;
+    overlineText: import("react/jsx-runtime").JSX.Element;
     trailingBlock: string | number | boolean | JSX.Element | Iterable<import("react").ReactNode>;
     leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;
@@ -55,7 +55,7 @@ export declare const mapListElement: (element: ListElement, pathname: string | u
     select: boolean;
     primaryText: string;
     secondaryText: import("react/jsx-runtime").JSX.Element;
-    overlineText: string | undefined;
+    overlineText: import("react/jsx-runtime").JSX.Element;
     trailingBlock: string | number | boolean | JSX.Element | Iterable<import("react").ReactNode>;
     leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;

package/dist/components/ListArea/ListAreaService.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "@element/react-components";
 import "../Iconify/Iconify.js";
 import "../../enums/AvailableCustomIcons.js";
-import { g as s, a as i, m as a } from "../../ListAreaService-BoNnFzrZ.js";
+import { g as s, a as i, m as a } from "../../ListAreaService-DDlsV9UD.js";
 export {
   s as getGroupedItems,
   i as getListedItems,

package/dist/components/OverflowTooltip/OverflowTooltip.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+type OverflowTooltipProps = {
+    /**
+     * the id of the tooltip
+     */
+    id: string;
+    /**
+     * the full text to be displayed
+     */
+    text: string;
+    /**
+     * the children that will have the tooltip
+     */
+    children: JSX.Element;
+};
+/**
+ * A component that displays a tooltip when the text is overflowing.
+ * It can be wrapped around Element's Typography components (e.g. TypoDisplay).
+ * It clones the child element and adds the tooltip functionality.
+ *
+ * Hint: It was not written as a component that directly takes the Typography string as child,
+ * because then the OverflowTooltip would be nested within the Typography component and thus inherit the Typography styles.
+ * Furthermore, OverflowTooltip does not work on hovering ListArea items.
+ *
+ * @param id - the id of the tooltip
+ * @param text - the full text to be displayed
+ * @param children - the children that will have the tooltip
+ */
+export declare const OverflowTooltip: ({ id, text, children }: OverflowTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/OverflowTooltip/OverflowTooltip.js

@@ -0,0 +1,22 @@
+import { jsxs as m, Fragment as p, jsx as c } from "react/jsx-runtime";
+import { useState as h, useMemo as f, cloneElement as d } from "react";
+import { H as x } from "../../react-tooltip.min-BzHiZW8k.js";
+const a = ({ id: t, text: e, children: i }) => {
+  const [l, s] = h(""), n = f(
+    () => d(i, {
+      "data-tooltip-id": t,
+      onMouseEnter: ({ currentTarget: o }) => {
+        const r = o.clientWidth < o.scrollWidth || o.clientHeight < o.scrollHeight;
+        s(r ? e : "");
+      }
+    }),
+    [i, t, e]
+  );
+  return /* @__PURE__ */ m(p, { children: [
+    n,
+    /* @__PURE__ */ c(x, { id: t, noArrow: !0, place: "bottom", children: l })
+  ] });
+};
+export {
+  a as OverflowTooltip
+};

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

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

package/dist/components/OverflowTooltip/OverflowTooltip.test.js

@@ -0,0 +1,37 @@
+import { jsx as t } from "react/jsx-runtime";
+import { TypoDisplay as n } from "@element/react-components";
+import { r as i, s as e, w as s } from "../../react.esm-BBemCHUU.js";
+import { u as a } from "../../index-DfbRag7b.js";
+import { OverflowTooltip as c } from "./OverflowTooltip.js";
+import { d as u, t as p, g as r } from "../../vi.JYQecGiw-BbUbJcT8.js";
+u("OverflowTooltip Test", () => {
+  p("should render OverflowTooltip on hover", async () => {
+    Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+      configurable: !0,
+      value: 100
+    }), Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
+      configurable: !0,
+      value: 200
+    });
+    const l = a.setup(), o = "Block name that should be truncated with an ellipsis because it is very very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong";
+    i(
+      /* @__PURE__ */ t(c, { id: o, text: o, children: /* @__PURE__ */ t(n, { children: o }) })
+    ), r(e.getByText(o)).toBeInTheDocument(), l.hover(e.getByText(o)), await s(() => {
+      r(e.getByRole("tooltip")).toBeInTheDocument();
+    });
+  }), p("should not render OverflowTooltip on hover", async () => {
+    Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+      configurable: !0,
+      value: 200
+    }), Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
+      configurable: !0,
+      value: 200
+    });
+    const l = a.setup(), o = "Block name that should be truncated with an ellipsis because it is very very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong";
+    i(
+      /* @__PURE__ */ t(c, { id: o, text: o, children: /* @__PURE__ */ t(n, { children: o }) })
+    ), r(e.getByText(o)).toBeInTheDocument(), l.hover(e.getByText(o)), await s(() => {
+      r(e.queryByRole("tooltip")).not.toBeInTheDocument();
+    });
+  });
+});