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

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

@@ -1,633 +0,0 @@
-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