@hortiview/shared-components 0.0.6504 → 0.0.6829

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();
+    });
+  });
+});