@eyesee/ui-components 0.6.0 → 0.8.0

package/dist/components/Button/Button.js

@@ -1,100 +1,101 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { useState as j, useRef as B } from "react";
-import c from "clsx";
-import { ChevronDownIcon as L } from "../icons-v2/ChevronDownIcon.js";
-import { ChevronUpIcon as R } from "../icons-v2/ChevronUpIcon.js";
-import S from "../../hooks/useClickOutside.js";
-import { ListItem as A } from "../ListItem/ListItem.js";
-import { DropdownList as E } from "../DropdownList/DropdownList.js";
-import { Tooltip as U } from "../Tooltip/Tooltip.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useState as L, useRef as R } from "react";
+import m from "clsx";
+import { ChevronDownIcon as S } from "../icons-v2/ChevronDownIcon.js";
+import { ChevronUpIcon as A } from "../icons-v2/ChevronUpIcon.js";
+import E from "../../hooks/useClickOutside.js";
+import { ListItem as U } from "../ListItem/ListItem.js";
+import { DropdownList as q } from "../DropdownList/DropdownList.js";
+import { Tooltip as z } from "../Tooltip/Tooltip.js";
 import e from "./Button.module.scss.js";
-const V = ({
+const Y = ({
   text: l,
-  options: r = [],
-  onClick: i = () => {
+  options: p = [],
+  onClick: u = () => {
   },
-  className: b,
-  iconSize: p = "m",
-  size: g = "md",
-  variant: w = "primary",
-  type: I = "fill",
-  pressed: u = !1,
+  className: w,
+  iconSize: f = "m",
+  size: v = "md",
+  variant: N = "primary",
+  type: O = "fill",
+  pressed: h = !1,
   icon: a = null,
-  tooltipContent: h = null,
-  tooltipTitle: v,
-  disabled: C = !1,
-  fullWidth: N = !1,
-  dropdownAlign: O = "start",
-  tooltipProps: y = { position: "bottom", variant: "light" },
-  ...x
+  tooltipContent: d = null,
+  tooltipTitle: g,
+  disabled: y = !1,
+  fullWidth: D = !1,
+  dropdownAlign: x = "start",
+  tooltipProps: k = { position: "bottom", variant: "light" },
+  dropdownCustomContent: s = null,
+  ...B
 }) => {
-  const [s, o] = j(!1), f = B(null);
-  S(f, () => o(!1));
-  const D = (t) => {
-    i(t), o(!1);
-  }, k = a && !l && r.length === 0, T = a && !l, W = !!h, d = /* @__PURE__ */ m(
+  const [o, i] = L(!1), b = R(null);
+  E(b, () => i(!1));
+  const T = (n) => {
+    u(n), i(!1);
+  }, t = p.length > 0 || !!s, W = a && !l && !t, j = a && !l, C = !!d, I = /* @__PURE__ */ c(
     "div",
     {
-      ref: f,
+      ref: b,
       "data-button-wrapper": !0,
-      className: c(e.wrapper, b, N && e.fullWidth),
-      ...x,
+      className: m(e.wrapper, w, D && e.fullWidth),
+      ...B,
       children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ c(
           "button",
           {
             type: "button",
-            className: c(
+            className: m(
               e.button,
-              e[g],
-              e[w],
-              e[I],
-              r.length > 0 && e.hasDropdown,
-              k && e.iconOnly,
-              T && e.isIcon,
-              u && e.pressed
+              e[v],
+              e[N],
+              e[O],
+              t && e.hasDropdown,
+              W && e.iconOnly,
+              j && e.isIcon,
+              h && e.pressed
             ),
-            onClick: () => r.length > 0 ? o((t) => !t) : i(),
-            "aria-expanded": s,
-            "aria-pressed": u,
+            onClick: () => t ? i((n) => !n) : u(),
+            "aria-expanded": o,
+            "aria-pressed": h,
             "aria-haspopup": "menu",
-            disabled: C,
+            disabled: y,
             children: [
-              /* @__PURE__ */ m(
+              /* @__PURE__ */ c(
                 "span",
                 {
-                  className: c(
+                  className: m(
                     e.buttonContent,
-                    r.length > 0 && e.buttonContentDropdown
+                    t && e.buttonContentDropdown
                   ),
                   children: [
-                    a && /* @__PURE__ */ n("span", { className: e.icon, children: a }),
-                    l && /* @__PURE__ */ n("span", { className: e.buttonText, children: l })
+                    a && /* @__PURE__ */ r("span", { className: e.icon, children: a }),
+                    l && /* @__PURE__ */ r("span", { className: e.buttonText, children: l })
                   ]
                 }
               ),
-              r.length > 0 && /* @__PURE__ */ n("span", { className: e.buttonArrow, children: s ? /* @__PURE__ */ n(R, { iconSize: p }) : /* @__PURE__ */ n(L, { iconSize: p }) })
+              t && /* @__PURE__ */ r("span", { className: e.buttonArrow, children: o ? /* @__PURE__ */ r(A, { iconSize: f }) : /* @__PURE__ */ r(S, { iconSize: f }) })
             ]
           }
         ),
-        s && r.length > 0 && /* @__PURE__ */ n(E, { align: O, children: r.map((t) => /* @__PURE__ */ n(
-          A,
+        o && t && /* @__PURE__ */ r(q, { align: x, children: s || p.map((n) => /* @__PURE__ */ r(
+          U,
           {
             role: "menuitem",
-            title: t.label,
-            controlItem: t == null ? void 0 : t.icon,
+            title: n.label,
+            controlItem: n == null ? void 0 : n.icon,
             horizontalSpacing: "xs",
             verticalSpacing: "none",
-            ...t,
-            onClick: () => D(t)
+            ...n,
+            onClick: () => T(n)
           },
-          t.value
+          n.value
         )) })
       ]
     }
   );
-  return W ? /* @__PURE__ */ n(U, { title: v, content: h, ...y, children: d }) : d;
+  return C ? /* @__PURE__ */ r(z, { title: g, content: d, ...k, children: I }) : I;
 };
 export {
-  V as Button
+  Y as Button
 };

package/dist/components/DropdownList/DropdownList.js

@@ -1,4 +1,4 @@
-import { jsx as g } from "react/jsx-runtime";
+import { jsx as u } from "react/jsx-runtime";
 import w from "clsx";
 import r from "./DropdownList.module.scss.js";
 const a = ({
@@ -13,12 +13,12 @@ const a = ({
   onLoadMore: t,
   style: d
 }) => {
-  const f = (u) => {
-    const l = u.currentTarget;
+  const f = (g) => {
+    const l = g.currentTarget;
     l.scrollHeight - l.scrollTop - l.clientHeight < 48 && (t == null || t());
   };
-  return /* @__PURE__ */ g(
-    "ul",
+  return /* @__PURE__ */ u(
+    "div",
     {
       ref: p,
       id: c,

package/dist/components/EllipsisTooltip/EllipsisTooltip.js

@@ -1,40 +1,40 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useRef as E, useState as h, useCallback as g, useLayoutEffect as x } from "react";
-import k from "clsx";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import c from "./EllipsisTooltip.module.scss.js";
-function y(t) {
+import { useRef as a, useState as E, useCallback as h, useLayoutEffect as g } from "react";
+import x from "clsx";
+import { Tooltip as W } from "../Tooltip/Tooltip.js";
+import k from "./EllipsisTooltip.module.scss.js";
+function v(t) {
   return t ? t.scrollWidth > t.clientWidth || t.scrollHeight > t.clientHeight : !1;
 }
 const j = ({
   children: t,
-  position: n = "top",
+  position: c = "top",
   variant: f = "light",
-  showArrow: m = !1,
-  className: p,
+  showArrow: n = !1,
+  className: u,
   wrapperStyle: s
 }) => {
-  const o = E(null), [a, u] = h(!1), i = g(() => {
-    const l = o.current;
-    u(!!l && !!t && y(l));
+  const i = a(null), [p, m] = E(!1), o = h(() => {
+    const l = i.current;
+    m(!!l && !!t && v(l));
   }, [t]);
-  x(() => {
-    i();
-  }, [i, s]);
-  const e = /* @__PURE__ */ r("div", { ref: o, className: k(c.wrapper, p), style: s, children: t });
-  return !a || !t ? e : /* @__PURE__ */ r(
-    v,
+  g(() => {
+    o();
+  }, [o, s]);
+  const e = /* @__PURE__ */ r("div", { ref: i, className: x(k.wrapper, u), style: s, children: t });
+  return !p || !t ? e : /* @__PURE__ */ r(
+    W,
     {
-      className: c.anchor,
+      fullWidth: !0,
       content: t,
-      position: n,
+      position: c,
       variant: f,
-      showArrow: m,
+      showArrow: n,
       children: e
     }
   );
 };
 export {
   j as EllipsisTooltip,
-  y as isEllipsisActive
+  v as isEllipsisActive
 };

package/dist/components/EllipsisTooltip/EllipsisTooltip.module.scss.js

@@ -1,9 +1,7 @@
-const r = "_anchor_dujlo_3", o = "_wrapper_dujlo_10", a = {
-  anchor: r,
-  wrapper: o
+const a = "_wrapper_ib6aa_3", p = {
+  wrapper: a
 };
 export {
-  r as anchor,
-  a as default,
-  o as wrapper
+  p as default,
+  a as wrapper
 };

package/dist/components/ImagePlaceholder/ImagePlaceholder.js

@@ -1,142 +1,171 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { useState as b } from "react";
-import i from "clsx";
-import { Checkbox as F } from "../Checkbox/Checkbox.js";
-import { tagPropsFromTag as R, badgePropsFromTag as z, pillPropsFromTag as _ } from "./utilsImgPh.js";
-import { ASPECT_RATIOS as N, TAG_TYPES as T, OVERLAYS as j, TEXT_POSITIONS as x, LINES as B } from "./constantsImgPh.js";
-import { ImageOffIcon as X } from "../icons-v2/ImageOffIcon.js";
-import { MoreIcon as Y } from "../icons-v2/MoreIcon.js";
-import { XIcon as D } from "../icons-v2/XIcon.js";
-import e from "./ImagePlaceholder.module.scss.js";
-import { Button as G } from "../Button/Button.js";
-import { EllipsisTooltip as V } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { DropdownList as W } from "../DropdownList/DropdownList.js";
-import { ListItem as q } from "../ListItem/ListItem.js";
-import { Tag as H } from "../Tag/Tag.js";
-import { Badge as J } from "../Badge/Badge.js";
-import { Pill as K } from "../Pill/Pill.js";
-const ho = ({
-  id: I,
-  url: k,
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as N } from "react";
+import t from "clsx";
+import { Checkbox as D } from "../Checkbox/Checkbox.js";
+import { Tooltip as G } from "../Tooltip/Tooltip.js";
+import { tagPropsFromTag as H, badgePropsFromTag as V, pillPropsFromTag as q } from "./utilsImgPh.js";
+import { ASPECT_RATIOS as x, TAG_TYPES as I, OVERLAYS as J, TEXT_POSITIONS as S, LINES as K } from "./constantsImgPh.js";
+import { ImageOffIcon as Q } from "../icons-v2/ImageOffIcon.js";
+import { MoreIcon as U } from "../icons-v2/MoreIcon.js";
+import { XIcon as Z } from "../icons-v2/XIcon.js";
+import o from "./ImagePlaceholder.module.scss.js";
+import { Button as $ } from "../Button/Button.js";
+import { EllipsisTooltip as oo } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DropdownList as eo } from "../DropdownList/DropdownList.js";
+import { ListItem as ro } from "../ListItem/ListItem.js";
+import { Tag as lo } from "../Tag/Tag.js";
+import { Badge as so } from "../Badge/Badge.js";
+import { Pill as io } from "../Pill/Pill.js";
+const Eo = ({
+  id: g,
+  url: E,
   text: a,
-  textPosition: t = x.inside,
-  tag: r,
+  textPosition: m = S.inside,
+  tag: l,
   overlay: s,
-  isChecked: v,
+  isChecked: w,
   onChecked: p,
   menu: d,
-  aspectRatio: S = N["1/1"],
-  lines: C = B[1],
-  disabled: m = !1,
-  onClose: E = () => {
+  aspectRatio: C = x["1/1"],
+  lines: P = K[1],
+  disabled: c = !1,
+  onClose: L = () => {
   },
-  imageAreaRef: g,
-  onImageAreaMouseEnter: P,
-  onImageAreaMouseLeave: w
+  tooltipContent: h,
+  tooltipTitle: y,
+  tooltipProps: A = { variant: "light", showArrow: !0, position: "bottom" },
+  imageAreaRef: M,
+  onImageAreaMouseEnter: O,
+  onImageAreaMouseLeave: B,
+  onClick: u,
+  selected: F = !1,
+  overlayDisplay: R = "always"
 }) => {
-  const [u, L] = b(!1), [n, A] = b(!1), h = () => {
-    switch (r == null ? void 0 : r.type) {
+  const [f, W] = N(!1), [n, z] = N(!1), v = () => {
+    switch (l == null ? void 0 : l.type) {
       case "pill":
-        return /* @__PURE__ */ o(K, { ..._(r) });
+        return /* @__PURE__ */ e(io, { ...q(l) });
       case "badge":
-        return /* @__PURE__ */ o(J, { ...z(r) });
+        return /* @__PURE__ */ e(so, { ...V(l) });
       case "tag":
-        return /* @__PURE__ */ o(H, { ...R(r) });
+        return /* @__PURE__ */ e(lo, { ...H(l) });
       default:
         return null;
     }
-  }, f = !a || t === x.outside ? "8px" : "8px 8px 0 0", y = Number(C), M = i(e.contentText, e.contentTextClamped), O = { WebkitLineClamp: y };
-  return /* @__PURE__ */ c("div", { className: i(e.imagePlaceholder, m && e.disabled), children: [
-    /* @__PURE__ */ c(
-      "div",
-      {
-        ref: g,
-        className: i(
-          e.imageArea,
-          s === "checkbox" && e.clickable,
-          s === "checkbox" && !n && e.checkboxSelectable
-        ),
-        style: { borderRadius: f },
-        onClick: s === "checkbox" && !n && !m ? p : void 0,
-        onMouseEnter: P,
-        onMouseLeave: w,
-        children: [
-          /* @__PURE__ */ o(
-            "div",
-            {
-              className: e.imageFrame,
-              style: { aspectRatio: N[S], borderRadius: f },
-              children: n ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
-                X,
-                {
-                  iconSize: "l",
-                  strokeColor: "var(--color--icon--disabled--default)"
-                }
-              ) }) : /* @__PURE__ */ o(
-                "img",
+  }, b = !a || m === S.outside ? "8px" : "8px 8px 0 0", _ = Number(P), j = t(o.contentText, o.contentTextClamped), X = { WebkitLineClamp: _ }, Y = !!h, T = !!u && !c, k = /* @__PURE__ */ i(
+    "div",
+    {
+      className: t(
+        o.imagePlaceholder,
+        c && o.disabled,
+        T && o.clickable,
+        F && o.selected,
+        R === "hover" && o.overlayHover
+      ),
+      onClick: T ? u : void 0,
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            ref: M,
+            className: t(
+              o.imageArea,
+              s === "checkbox" && o.clickable,
+              s === "checkbox" && !n && o.checkboxSelectable
+            ),
+            style: { borderRadius: b },
+            onClick: s === "checkbox" && !n && !c ? p : void 0,
+            onMouseEnter: O,
+            onMouseLeave: B,
+            children: [
+              /* @__PURE__ */ e(
+                "div",
                 {
-                  className: e.image,
-                  src: k,
-                  alt: a,
-                  onError: () => A(!0)
+                  className: o.imageFrame,
+                  style: { aspectRatio: x[C], borderRadius: b },
+                  children: n ? /* @__PURE__ */ e("div", { className: o.imageError, children: /* @__PURE__ */ e(
+                    Q,
+                    {
+                      iconSize: "l",
+                      strokeColor: "var(--color--icon--disabled--default)"
+                    }
+                  ) }) : /* @__PURE__ */ e(
+                    "img",
+                    {
+                      className: o.image,
+                      src: E,
+                      alt: a,
+                      onError: () => z(!0)
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          !a && T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: h() }) : null,
-          j.has(s) && /* @__PURE__ */ c("div", { className: e.overlay, onClick: (l) => l.stopPropagation(), children: [
-            s === "checkbox" && !n ? /* @__PURE__ */ o(
-              F,
-              {
-                checked: v,
-                onChange: p,
-                size: "lg",
-                disabled: m
-              }
-            ) : null,
-            s === "close" ? /* @__PURE__ */ o(
-              G,
+              ),
+              !a && I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ e("div", { className: o.tagInImage, children: v() }) : null,
+              J.has(s) && /* @__PURE__ */ i("div", { className: o.overlay, onClick: (r) => r.stopPropagation(), children: [
+                s === "checkbox" && !n ? /* @__PURE__ */ e(
+                  D,
+                  {
+                    checked: w,
+                    onChange: p,
+                    size: "lg",
+                    disabled: c
+                  }
+                ) : null,
+                s === "close" ? /* @__PURE__ */ e(
+                  $,
+                  {
+                    icon: /* @__PURE__ */ e(Z, {}),
+                    size: "xxs",
+                    variant: "fill",
+                    type: "neutral",
+                    onClick: L
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
+        a ? /* @__PURE__ */ i("div", { className: t(o.belowImage, o[m]), children: [
+          I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ e("div", { children: v() }) : null,
+          /* @__PURE__ */ i("div", { className: o.content, children: [
+            /* @__PURE__ */ e(
+              oo,
               {
-                icon: /* @__PURE__ */ o(D, {}),
-                size: "xxs",
-                variant: "fill",
-                type: "neutral",
-                onClick: E
+                position: "bottom",
+                showArrow: !0,
+                className: j,
+                wrapperStyle: X,
+                children: a
               }
-            ) : null
+            ),
+            d && /* @__PURE__ */ i("div", { className: o.menu, children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  onClick: (r) => {
+                    r.stopPropagation(), W(!f);
+                  },
+                  children: /* @__PURE__ */ e(U, {})
+                }
+              ),
+              f && /* @__PURE__ */ e(eo, { children: d.map((r) => /* @__PURE__ */ e(
+                ro,
+                {
+                  title: r == null ? void 0 : r.title,
+                  value: r == null ? void 0 : r.value,
+                  item: r
+                },
+                r == null ? void 0 : r.value
+              )) })
+            ] })
           ] })
-        ]
-      }
-    ),
-    a ? /* @__PURE__ */ c("div", { className: i(e.belowImage, e[t]), children: [
-      T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: h() }) : null,
-      /* @__PURE__ */ c("div", { className: e.content, children: [
-        /* @__PURE__ */ o(
-          V,
-          {
-            position: "bottom",
-            showArrow: !0,
-            className: M,
-            wrapperStyle: O,
-            children: a
-          }
-        ),
-        d && /* @__PURE__ */ c("div", { className: e.menu, children: [
-          /* @__PURE__ */ o("span", { onClick: () => L(!u), children: /* @__PURE__ */ o(Y, {}) }),
-          u && /* @__PURE__ */ o(W, { children: d.map((l) => /* @__PURE__ */ o(
-            q,
-            {
-              title: l == null ? void 0 : l.title,
-              value: l == null ? void 0 : l.value,
-              item: l
-            },
-            l == null ? void 0 : l.value
-          )) })
-        ] })
-      ] })
-    ] }) : null
-  ] }, I);
+        ] }) : null
+      ]
+    },
+    g
+  );
+  return Y ? /* @__PURE__ */ e(G, { title: y, content: h, ...A, fullWidth: !0, children: k }) : k;
 };
 export {
-  ho as default
+  Eo as default
 };

package/dist/components/ImagePlaceholder/ImagePlaceholder.module.scss.js

@@ -1,39 +1,43 @@
-const e = "_imagePlaceholder_64kms_3", t = "_disabled_64kms_9", _ = "_imageArea_64kms_15", a = "_clickable_64kms_24", m = "_checkboxSelectable_64kms_27", o = "_imageFrame_64kms_32", s = "_image_64kms_3", c = "_imageError_64kms_48", n = "_tagInImage_64kms_55", l = "_overlay_64kms_60", i = "_belowImage_64kms_65", g = "_inside_64kms_74", k = "_outside_64kms_78", r = "_content_64kms_82", d = "_contentText_64kms_88", b = "_contentTextClamped_64kms_102", x = "_menu_64kms_107", I = {
+const e = "_imagePlaceholder_kbkw0_3", t = "_selected_kbkw0_9", _ = "_clickable_kbkw0_13", o = "_disabled_kbkw0_16", a = "_overlayHover_kbkw0_22", c = "_overlay_kbkw0_22", n = "_imageArea_kbkw0_28", k = "_checkboxSelectable_kbkw0_40", l = "_imageFrame_kbkw0_45", b = "_image_kbkw0_3", s = "_imageError_kbkw0_61", i = "_tagInImage_kbkw0_68", m = "_belowImage_kbkw0_78", r = "_inside_kbkw0_87", g = "_outside_kbkw0_91", d = "_content_kbkw0_95", w = "_contentText_kbkw0_101", x = "_contentTextClamped_kbkw0_115", v = "_menu_kbkw0_120", I = {
   imagePlaceholder: e,
-  disabled: t,
-  imageArea: _,
-  clickable: a,
-  checkboxSelectable: m,
-  imageFrame: o,
-  image: s,
-  imageError: c,
-  tagInImage: n,
-  overlay: l,
-  belowImage: i,
-  inside: g,
-  outside: k,
-  content: r,
-  contentText: d,
-  contentTextClamped: b,
-  menu: x
+  selected: t,
+  clickable: _,
+  disabled: o,
+  overlayHover: a,
+  overlay: c,
+  imageArea: n,
+  checkboxSelectable: k,
+  imageFrame: l,
+  image: b,
+  imageError: s,
+  tagInImage: i,
+  belowImage: m,
+  inside: r,
+  outside: g,
+  content: d,
+  contentText: w,
+  contentTextClamped: x,
+  menu: v
 };
 export {
-  i as belowImage,
-  m as checkboxSelectable,
-  a as clickable,
-  r as content,
-  d as contentText,
-  b as contentTextClamped,
+  m as belowImage,
+  k as checkboxSelectable,
+  _ as clickable,
+  d as content,
+  w as contentText,
+  x as contentTextClamped,
   I as default,
-  t as disabled,
-  s as image,
-  _ as imageArea,
-  c as imageError,
-  o as imageFrame,
+  o as disabled,
+  b as image,
+  n as imageArea,
+  s as imageError,
+  l as imageFrame,
   e as imagePlaceholder,
-  g as inside,
-  x as menu,
-  k as outside,
-  l as overlay,
-  n as tagInImage
+  r as inside,
+  v as menu,
+  g as outside,
+  c as overlay,
+  a as overlayHover,
+  t as selected,
+  i as tagInImage
 };