@televet/kibble-ui 4.0.0-beta.39 → 4.0.0-beta.4

package/dist/patterns/ConversationCard/index.es.js

@@ -0,0 +1,633 @@
+import { x as e } from "../../chunks/chunks/vendor-CBMqSZOw.js";
+import A, { useMemo as H, useState as M, useCallback as S } from "react";
+import { T as y, W as g, A as B, a as z, N as W, I as T, B as k, M as w, b as P, C as R, S as D } from "../../chunks/components/index-DPP6HXLU.js";
+import { f as O, h as E } from "../../chunks/chunks/date-Aao49x6J.js";
+import { F as x, D as v, V as F, B as p, aS as $, aT as V } from "../../chunks/chunks/chakra-BnJq9Kzm.js";
+const L = ({
+  date: t,
+  timeFormat: s = "h:mma",
+  dateFormat: a = "M/d/yy",
+  shouldTodayDisplayTimeOnly: n = !0,
+  tooltipLabel: r,
+  textProps: o
+}) => {
+  const c = H(
+    () => O(
+      t,
+      E(t) && n ? s : a
+    ),
+    [t, a, n, s]
+  );
+  return /* @__PURE__ */ e.jsx(y, { disabled: !r, label: r || "", children: /* @__PURE__ */ e.jsx(
+    g,
+    {
+      className: "Timestamp",
+      "data-testid": "kibble-timestamp",
+      variant: "subtle",
+      size: "xs",
+      textTransform: "lowercase",
+      ...o,
+      children: c
+    }
+  ) });
+}, U = ({
+  avatars: t,
+  max: s = 1,
+  onAvatarGroupClick: a,
+  tooltipLabel: n
+}) => /* @__PURE__ */ e.jsx(y, { label: n || "", disabled: !n?.length, children: /* @__PURE__ */ e.jsx(
+  x,
+  {
+    className: "ConversationCard__AvatarGroup",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    children: s && t.length > s ? /* @__PURE__ */ e.jsx(
+      B,
+      {
+        onClick: (r) => {
+          r.stopPropagation(), a && a(r);
+        },
+        cursor: "pointer",
+        name: t.length.toString(),
+        showTooltip: !1
+      }
+    ) : /* @__PURE__ */ e.jsx(e.Fragment, { children: t.map((r) => r) })
+  }
+) }), Y = ({
+  avatarGroupProps: t,
+  timestampProps: s,
+  isHoveringCard: a,
+  isCardPinned: n,
+  title: r,
+  showNotificationIndicator: o,
+  subtitle: c
+}) => /* @__PURE__ */ e.jsxs(
+  v,
+  {
+    className: "ConversationCard__Header",
+    "data-testid": "kibble-conversation-card-header",
+    justify: "space-between",
+    align: "flex-start",
+    children: [
+      /* @__PURE__ */ e.jsxs(
+        v,
+        {
+          className: "ConversationCard__Header--Left",
+          "data-testid": "kibble-conversation-card-header-left",
+          cursor: "pointer",
+          children: [
+            t && /* @__PURE__ */ e.jsx(
+              U,
+              {
+                ...t,
+                tooltipLabel: t?.tooltipLabel || r
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              F,
+              {
+                className: "ConversationCard__HeaderText",
+                "data-testid": "kibble-conversation-card-header-text",
+                justify: "center",
+                align: "left",
+                gap: "0",
+                children: [
+                  /* @__PURE__ */ e.jsx(
+                    z,
+                    {
+                      className: "ConversationCard__HeaderText--Title",
+                      "data-testid": "kibble-conversation-card-header-title",
+                      size: "sm",
+                      truncated: !0,
+                      children: r
+                    }
+                  ),
+                  c && /* @__PURE__ */ e.jsx(
+                    g,
+                    {
+                      className: "ConversationCard__HeaderText--Subtitle",
+                      "data-testid": "kibble-conversation-card-header-subtitle",
+                      as: "p",
+                      size: "sm",
+                      variant: "subtle",
+                      truncated: !0,
+                      children: c
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(
+        v,
+        {
+          className: "ConversationCard__Header--Right",
+          "data-testid": "kibble-conversation-card-header-right",
+          visibility: a ? "hidden" : "visible",
+          align: "center",
+          gap: 1,
+          children: [
+            /* @__PURE__ */ e.jsx(L, { ...s }),
+            o && /* @__PURE__ */ e.jsx(
+              p,
+              {
+                as: "span",
+                className: "ConversationCard__HeaderNotificationCounter",
+                "data-testid": "conversation-card-unread-indicator",
+                children: /* @__PURE__ */ e.jsx(W, { size: "xs" })
+              }
+            ),
+            n && /* @__PURE__ */ e.jsx(x, { "data-testid": "conversation-card-pinned-icon", children: /* @__PURE__ */ e.jsx(T, { size: "md", variant: "info", name: "pin" }) })
+          ]
+        }
+      )
+    ]
+  }
+), q = ({
+  overlayProps: t,
+  pinProps: s,
+  headerMenuProps: a,
+  isHovering: n,
+  setIsHovering: r
+}) => {
+  const { isOpenInOverlay: o, onOpenInOverlay: c } = t || {}, { isPinned: d, onTogglePin: m } = s || {}, { listProps: u } = a || {}, C = d ? "pinCancel" : "pin";
+  return /* @__PURE__ */ e.jsxs(
+    v,
+    {
+      className: "ConversationCard__Menu",
+      "data-testid": "kibble-conversation-card-menu",
+      gap: 1,
+      children: [
+        t && /* @__PURE__ */ e.jsx(
+          k,
+          {
+            className: "ConversationCard__OverlayButton",
+            "data-testid": "conversation-card-overlay-icon-button",
+            variant: "secondarySubtle",
+            borderRadius: "sm",
+            ...o && { active: !0 },
+            onClick: () => {
+              c && c(), n && r(!1);
+            },
+            iconName: "popup",
+            size: "sm"
+          }
+        ),
+        s && /* @__PURE__ */ e.jsx(
+          k,
+          {
+            className: "ConversationCard__PinButton",
+            "data-testid": "conversation-card-pin-toggle-icon-button",
+            variant: d ? "secondarySubtleDestructive" : "secondarySubtle",
+            borderRadius: "sm",
+            onClick: () => {
+              m && m(!d), n && r(!1);
+            },
+            iconName: C,
+            size: "sm"
+          }
+        ),
+        a && /* @__PURE__ */ e.jsx(
+          w,
+          {
+            buttonProps: a.buttonProps || {
+              variant: "secondarySubtle",
+              size: "sm",
+              borderRadius: "sm",
+              iconName: "dotsVertical",
+              hideCaret: !0,
+              padding: 0
+            },
+            closeOnSelect: !1,
+            lazyMount: !0,
+            ...a,
+            listProps: {
+              ...u,
+              menuItems: [
+                ...s ? [
+                  {
+                    "data-testid": "conversation-card-pin-toggle-dropdown-button",
+                    label: `${d ? "Unpin" : "Pin"} Conversation`,
+                    value: "PinConversation",
+                    variant: d ? "danger" : "default",
+                    leftElement: /* @__PURE__ */ e.jsx(
+                      T,
+                      {
+                        size: "md",
+                        variant: d ? "danger" : "default",
+                        name: C
+                      }
+                    ),
+                    onSelect: () => {
+                      m && m(!d);
+                    }
+                  }
+                ] : [],
+                ...u?.menuItems || []
+              ]
+            }
+          }
+        )
+      ]
+    }
+  );
+}, J = ({
+  tags: t
+}) => /* @__PURE__ */ e.jsx(p, { className: "ConversationCard__Tags", mt: 3, children: /* @__PURE__ */ e.jsx($, { gap: "6px", children: t.map((s) => {
+  const { tooltipContent: a, ...n } = s;
+  let r = /* @__PURE__ */ e.jsx(P, { ...n, size: "sm", textTransform: "capitalize" });
+  return a && (r = /* @__PURE__ */ e.jsx(y, { label: a, placement: "top", children: /* @__PURE__ */ e.jsx(p, { children: r }) })), /* @__PURE__ */ e.jsx(V, { children: r }, s.label);
+}) }) }), K = ({
+  iconProps: t,
+  content: s,
+  contentProps: a
+}) => {
+  const n = typeof s == "string" ? /* @__PURE__ */ e.jsx(
+    g,
+    {
+      className: "ConversationCard__FooterMessage",
+      "data-testid": "kibble-conversation-card-footer-message",
+      as: "p",
+      size: "sm",
+      variant: "subtle",
+      ...a,
+      ...t && { ml: 1 },
+      children: s
+    }
+  ) : s;
+  return /* @__PURE__ */ e.jsxs(
+    x,
+    {
+      className: "ConversationCard__Footer",
+      "data-testid": "kibble-conversation-card-footer",
+      mt: 3,
+      alignItems: "center",
+      children: [
+        t && /* @__PURE__ */ e.jsx(T, { size: "sm", variant: "subtle", ...t }),
+        n
+      ]
+    }
+  );
+}, Q = ({
+  contentMenu: t,
+  content: s,
+  contentProps: a
+}) => {
+  const n = typeof s == "string" ? /* @__PURE__ */ e.jsx(
+    g,
+    {
+      className: "ConversationCard__Content",
+      "data-testid": "kibble-conversation-card-content",
+      truncated: !0,
+      size: "sm",
+      ...a,
+      children: s
+    }
+  ) : s;
+  return /* @__PURE__ */ e.jsxs(
+    v,
+    {
+      className: "ConversationCard__ContentContainer",
+      "data-testid": "kibble-conversation-card-content-container",
+      mt: 3,
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        n,
+        t && /* @__PURE__ */ e.jsx(
+          p,
+          {
+            className: "ConversationCard__ContentMenu",
+            "data-testid": "kibble-conversation-card-content-menu",
+            ml: "auto",
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}, se = ({
+  allowHoverActions: t = !0,
+  avatarGroupProps: s,
+  content: a,
+  contentProps: n,
+  contentMenu: r,
+  footerProps: o,
+  headerMenuProps: c,
+  headerProps: d,
+  active: m,
+  onClick: u,
+  overlayProps: C,
+  pinProps: f,
+  shouldPreservePosition: j = !1,
+  showNotificationIndicator: h,
+  tags: i
+}) => {
+  const { isPinned: l } = f || {}, [b, _] = M(!1);
+  return /* @__PURE__ */ e.jsxs(
+    R,
+    {
+      className: "ConversationCard",
+      id: "conversation-card-item",
+      "data-testid": "kibble-conversation-card",
+      interactive: !0,
+      active: m,
+      size: "sm",
+      fullWidth: !0,
+      onClick: () => {
+        u && u();
+      },
+      bg: h || m || b ? "background.default" : "background.alphaContrast.pressed",
+      onMouseEnter: () => {
+        t && _(!0);
+      },
+      onMouseLeave: () => _(!1),
+      pos: "relative",
+      css: { overflowAnchor: j ? "auto" : "none" },
+      children: [
+        b && /* @__PURE__ */ e.jsx(
+          p,
+          {
+            className: "ConversationCard__Menu--Container",
+            "data-testid": "kibble-conversation-card-menu-container",
+            pos: "absolute",
+            top: 2,
+            zIndex: "banner",
+            right: 2,
+            bg: "background",
+            borderRadius: "md",
+            onClick: (I) => I.stopPropagation(),
+            children: /* @__PURE__ */ e.jsx(
+              q,
+              {
+                overlayProps: C,
+                pinProps: f,
+                headerMenuProps: c,
+                isHovering: b,
+                setIsHovering: _
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          Y,
+          {
+            avatarGroupProps: s,
+            isHoveringCard: b,
+            isCardPinned: l,
+            showNotificationIndicator: h,
+            ...d
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          Q,
+          {
+            content: a,
+            contentProps: n,
+            contentMenu: r
+          }
+        ),
+        !!i?.length && /* @__PURE__ */ e.jsx(J, { tags: i }),
+        o && /* @__PURE__ */ e.jsx(K, { ...o })
+      ]
+    }
+  );
+}, ne = ({
+  type: t = "Client",
+  ...s
+}) => {
+  const {
+    name: a,
+    tooltipProps: n = { placement: "top", ...s.tooltipProps },
+    onClick: r
+  } = s, o = {
+    variant: "outlineYellow",
+    tooltipProps: {
+      ...n,
+      label: n?.label || `${a} (Test Client)`
+    }
+  }, c = {
+    iconName: "cellphone",
+    tooltipProps: {
+      ...n,
+      label: n?.label || `Text messages sent from ${a || "unknown number"}`
+    }
+  }, u = {
+    Automated: {
+      iconName: "robot",
+      backgroundColor: "background.primary",
+      hideBorder: !0,
+      color: "text.contrast",
+      size: "sm",
+      showTooltip: !1,
+      cursor: "default"
+    },
+    Client: {},
+    Clinic: {
+      variant: "outlineAccent",
+      name: a || "Sys"
+    },
+    SMS: c,
+    TestClient: o
+  };
+  return /* @__PURE__ */ e.jsx(
+    B,
+    {
+      className: "StyledAvatar",
+      "data-testid": `kibble-styled-avatar-${t}`,
+      onClick: (C) => {
+        C.stopPropagation(), r && r(C);
+      },
+      ...s,
+      ...u[t]
+    }
+  );
+}, re = [
+  "Client",
+  "SMS",
+  "TestClient",
+  "Automated",
+  "Clinic"
+];
+var N = /* @__PURE__ */ ((t) => (t.Inactive = "Inactive", t.Deleted = "Deleted", t))(N || {});
+const X = {
+  size: "sm",
+  variant: "secondarySubtle",
+  iconName: "plus",
+  text: "Add",
+  hideCaret: !0
+}, oe = ({
+  title: t,
+  menuProps: s,
+  tags: a,
+  canBeDeleted: n = !1,
+  onClearAll: r,
+  onRemoveTag: o,
+  onDelete: c,
+  hasError: d = !1,
+  errorText: m = "This field contains an error",
+  displayTagsInGroups: u,
+  loading: C = !1
+}) => {
+  const f = S(
+    (i) => {
+      o && o(i, a);
+    },
+    [o, a]
+  ), j = A.useMemo(() => {
+    if (!u)
+      return [];
+    const i = {};
+    for (const l of a) {
+      const b = l.groupLabel || "-";
+      i[b] || (i[b] = []), i[b].push(l);
+    }
+    return Object.entries(i).map(([l, b]) => ({
+      groupLabel: l,
+      tags: b
+    }));
+  }, [a, u]), h = S(
+    (i) => i.map((l) => {
+      const b = l.label.includes(N.Inactive) || l.label.includes(N.Deleted);
+      return /* @__PURE__ */ e.jsx(
+        P,
+        {
+          className: "TagBlock__Tag",
+          "data-testid": "kibble-tag-block-tag",
+          mr: 1,
+          mb: 1,
+          label: l.label,
+          onClose: () => f(l.value),
+          closeButtonDisplay: "always",
+          fontWeight: "normal",
+          color: b ? "text.placeholder" : "text",
+          size: "md"
+        },
+        l.value
+      );
+    }),
+    [f]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    p,
+    {
+      className: "TagBlock",
+      "data-testid": "kibble-tag-block",
+      position: "relative",
+      mb: 3,
+      py: 2,
+      pl: 4,
+      pr: 2,
+      bg: "background.subtle",
+      borderRadius: "lg",
+      boxShadow: d ? "0 0 0 2px var(--chakra-colors-border-danger)" : "",
+      border: "1px",
+      borderColor: "border",
+      overflow: C ? "hidden" : void 0,
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          x,
+          {
+            className: "TagBlock__ButtonContainer",
+            "data-testid": "kibble-tag-block-button-container",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ e.jsxs(v, { gap: 1, minH: 10, children: [
+                t && /* @__PURE__ */ e.jsx(g, { className: "TagBlock__Title", mr: 2, fontWeight: "bold", children: t }),
+                /* @__PURE__ */ e.jsx(
+                  w,
+                  {
+                    "data-testid": "kibble-tag-block-menu",
+                    ...s,
+                    buttonProps: s?.buttonProps || X
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  k,
+                  {
+                    className: "TagBlock__Button--ClearAll",
+                    "data-testid": "kibble-tag-block-clear-all-button",
+                    size: "sm",
+                    iconName: "arrowCircle",
+                    variant: "ghostNeutral",
+                    onClick: r,
+                    disabled: a.length <= 0,
+                    children: "Clear All"
+                  }
+                )
+              ] }),
+              n && /* @__PURE__ */ e.jsx(p, { children: /* @__PURE__ */ e.jsx(
+                k,
+                {
+                  className: "TagBlock__Button--Delete",
+                  "data-testid": "kibble-tag-block-delete-button",
+                  iconName: "trashcan",
+                  variant: "ghostNeutral",
+                  onClick: c,
+                  justifySelf: "flex-end"
+                }
+              ) })
+            ]
+          }
+        ),
+        !!a.length && /* @__PURE__ */ e.jsx(
+          x,
+          {
+            className: "TagBlock__TagContainer",
+            "data-testid": "kibble-tag-block-tag-container",
+            mt: 2,
+            pb: 1,
+            alignContent: "space-between",
+            flexWrap: "wrap",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            children: u && j.length ? /* @__PURE__ */ e.jsx(x, { direction: "column", children: j.map(({ groupLabel: i, tags: l }) => /* @__PURE__ */ e.jsxs(p, { mb: 2, children: [
+              /* @__PURE__ */ e.jsx(
+                p,
+                {
+                  className: "TagBlock__GroupTitle",
+                  "data-testid": "kibble-tag-block-group-title",
+                  children: /* @__PURE__ */ e.jsx(z, { size: "xs", pb: 2, children: i })
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                x,
+                {
+                  alignContent: "space-between",
+                  flexWrap: "wrap",
+                  justifyContent: "flex-start",
+                  alignItems: "flex-start",
+                  children: h(l)
+                }
+              )
+            ] }, i)) }) : h(a)
+          }
+        ),
+        C && /* @__PURE__ */ e.jsx(D, { fullScreen: !0 }),
+        d && /* @__PURE__ */ e.jsx(
+          g,
+          {
+            className: "TagBlock__Error",
+            "data-testid": "kibble-tag-block-error",
+            mt: 2,
+            size: "xs",
+            as: "p",
+            variant: "danger",
+            children: m
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  se as ConversationCard,
+  ne as S,
+  oe as T,
+  N as a,
+  L as b,
+  re as s
+};
+//# sourceMappingURL=index.es.js.map