@epam/ai-dial-ui-kit 0.15.0-dev.7 → 0.15.0

package/dist/components/New/AutocompleteTagInput/AutocompleteTagInput.js

@@ -0,0 +1,214 @@
+import { jsxs as ce, Fragment as me, jsx as c } from "react/jsx-runtime";
+import { useFloating as pe, autoUpdate as fe, offset as de, flip as ue, size as he, FloatingPortal as ge } from "@floating-ui/react";
+import { useId as we, useState as h, useMemo as ve, useCallback as xe } from "react";
+import { Input as Ie } from "../Input/Input.js";
+import { MenuItem as Te } from "../MenuItem/MenuItem.js";
+import { selectTagClassName as Se } from "../Select/MultiSelectTags.js";
+import { Tag as be } from "../Tag/Tag.js";
+import { useThemeScope as ye } from "../ThemeScope/ThemeScope.js";
+import { overlayGap as y, overlayListClassName as Ce, overlaySurfaceClassName as De } from "../constants/overlay.js";
+import { DIAL_KIT_CLASS as Me } from "../../../constants/public-class-names.js";
+import { MenuItemMark as Ae } from "../../../types/menu-item.js";
+import { ElementSize as F } from "../../../types/size.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { filterAutocompleteSuggestions as Ne } from "./utils.js";
+const ke = 5, Pe = ({
+  id: G,
+  value: C,
+  defaultValue: K,
+  suggestions: g,
+  maxSuggestions: D = ke,
+  openOnFocus: m = !1,
+  size: M = F.Standard,
+  labelProps: R,
+  placeholder: j,
+  caption: H,
+  error: V,
+  invalid: A = !1,
+  disabled: w = !1,
+  readOnly: v = !1,
+  ariaLabel: P,
+  tagListLabel: N = "Tags",
+  getRemoveTagLabel: X,
+  className: q,
+  fieldClassName: J,
+  tagClassName: Q,
+  listClassName: W,
+  onChange: k
+}) => {
+  const Y = we(), E = G || Y, x = `${E}-listbox`, Z = ye(), O = M === F.Small, I = C !== void 0, [ee, te] = h(
+    K ?? []
+  ), a = I ? C : ee, d = a.length > 0, p = !v && !w, [s, L] = h(""), [oe, u] = h(!1), [ae, l] = h(0), T = !s.trim(), n = ve(
+    () => Ne(
+      g,
+      s,
+      a,
+      // The list opened on focus is meant to show every choice.
+      m && T ? g.length : D
+    ),
+    [s, T, D, m, g, a]
+  ), r = oe && p && n.length > 0, i = Math.min(ae, n.length - 1), U = r && i >= 0, z = (e) => `${x}-option-${e}`, { refs: B, floatingStyles: re } = pe({
+    open: r,
+    placement: "bottom-start",
+    whileElementsMounted: fe,
+    middleware: [
+      de(y),
+      ue({ padding: y }),
+      he({
+        padding: y,
+        apply({ rects: e, availableHeight: t, elements: o }) {
+          o.floating.style.width = `${Math.round(e.reference.width)}px`, o.floating.style.maxHeight = `${Math.floor(t)}px`;
+        }
+      })
+    ]
+  }), S = xe(
+    (e) => {
+      I || te(e), k?.(e);
+    },
+    [I, k]
+  ), b = () => {
+    u(!1), l(0);
+  }, _ = () => {
+    !m || !p || (u(!0), l(T ? -1 : 0));
+  }, $ = (e) => {
+    const t = e.trim();
+    t && !a.includes(t) && S([...a, t]), L(""), m ? l(-1) : b();
+  }, le = (e) => S(a.filter((t) => t !== e)), se = (e) => {
+    const t = e ?? "", o = !!t.trim();
+    L(t), u(o || m), l(o ? 0 : -1);
+  }, ne = (e) => {
+    if (p)
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp": {
+          if (e.preventDefault(), !r) {
+            u(!0), l(0);
+            return;
+          }
+          const t = e.key === "ArrowDown" ? 1 : -1, o = i < 0 ? Math.min(-t, 0) : i;
+          l((o + t + n.length) % n.length);
+          return;
+        }
+        case "Enter":
+        case ",":
+          e.preventDefault(), $(U ? n[i].value : s);
+          return;
+        case "Escape":
+          r && e.preventDefault(), b();
+          return;
+        case "Backspace":
+          !s && d && (e.preventDefault(), S(a.slice(0, -1)));
+          return;
+      }
+  }, ie = (e) => e.preventDefault();
+  return /* @__PURE__ */ ce(me, { children: [
+    /* @__PURE__ */ c(
+      Ie,
+      {
+        id: E,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": r,
+        "aria-controls": x,
+        "aria-activedescendant": U ? z(i) : void 0,
+        "aria-invalid": A || void 0,
+        "aria-label": P,
+        size: M,
+        labelProps: R,
+        caption: H,
+        error: V,
+        invalid: A,
+        disabled: w,
+        readOnly: v,
+        value: s,
+        placeholder: d ? void 0 : j,
+        wrapperRef: B.setReference,
+        onChange: se,
+        onKeyDown: ne,
+        onFocus: _,
+        onClick: _,
+        onBlur: b,
+        containerClassName: f("w-full", q),
+        wrapperClassName: f(
+          d && [
+            "!h-auto flex-wrap gap-1 py-2",
+            O ? "min-h-[24px]" : "min-h-[40px]"
+          ],
+          J,
+          Me.autocompleteTagInput
+        ),
+        className: f(
+          "w-auto min-w-[100px] flex-1",
+          v && "cursor-default"
+        ),
+        children: d && /* @__PURE__ */ c(
+          "span",
+          {
+            role: "list",
+            "aria-label": N,
+            className: "flex min-w-0 flex-wrap items-center gap-1",
+            children: a.map((e) => /* @__PURE__ */ c(
+              be,
+              {
+                role: "listitem",
+                label: e,
+                className: f(
+                  Se,
+                  "min-w-0",
+                  Q
+                ),
+                disabled: w,
+                closable: p,
+                removeLabel: X?.(e),
+                onRemove: p ? () => le(e) : void 0
+              },
+              e
+            ))
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ c(ge, { children: /* @__PURE__ */ c(
+      "div",
+      {
+        ref: B.setFloating,
+        id: x,
+        role: "listbox",
+        "aria-label": N,
+        hidden: !r,
+        style: re,
+        className: f(
+          "z-floating overflow-y-auto",
+          De,
+          Ce,
+          !r && "hidden",
+          Z,
+          W
+        ),
+        children: r && n.map((e, t) => {
+          const o = t === i;
+          return /* @__PURE__ */ c(
+            Te,
+            {
+              id: z(t),
+              role: "option",
+              "aria-selected": o,
+              tabIndex: -1,
+              label: e.label,
+              description: e.description,
+              mark: Ae.Tint,
+              selected: o,
+              onMouseDown: ie,
+              onMouseEnter: () => l(t),
+              onClick: () => $(e.value)
+            },
+            e.value
+          );
+        })
+      }
+    ) })
+  ] });
+};
+export {
+  Pe as AutocompleteTagInput
+};

package/dist/components/New/AutocompleteTagInput/utils.js

@@ -0,0 +1,11 @@
+const m = (t, o, s, r) => {
+  const n = o.trim().toLowerCase(), i = new Set(s);
+  return t.filter(
+    ({ value: e, label: a, description: c }) => !i.has(e) && [a, e, c].some(
+      (l) => l?.toLowerCase().includes(n)
+    )
+  ).slice(0, Math.max(r, 0));
+};
+export {
+  m as filterAutocompleteSuggestions
+};

package/dist/components/New/Avatar/Avatar.js

@@ -0,0 +1,70 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { AvatarShape as d } from "../../../types/avatar.js";
+import { pickAvatarColor as w, extractInitials as I } from "../../../utils/avatar.js";
+import { mergeClasses as e } from "../../../utils/merge-classes.js";
+const N = {
+  [d.Circle]: "rounded-full",
+  [d.Square]: "rounded-md"
+}, E = ({
+  name: s,
+  initials: c,
+  src: r,
+  alt: t = "",
+  size: o = 32,
+  shape: f = d.Circle,
+  className: h,
+  textClassName: l,
+  onImageError: u
+}) => {
+  const [S, p] = C(), v = !!r && S !== r, i = t !== "", m = (n) => e(
+    "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
+    N[f],
+    n,
+    h,
+    b.avatar
+  );
+  if (v)
+    return /* @__PURE__ */ a(
+      "img",
+      {
+        src: r,
+        alt: t,
+        width: o,
+        height: o,
+        className: e(m(), "object-cover"),
+        onError: (n) => {
+          p(r), u?.(n);
+        }
+      }
+    );
+  const { background: g, foreground: A } = w(s);
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      role: i ? "img" : void 0,
+      "aria-label": i ? t : void 0,
+      "aria-hidden": i ? void 0 : !0,
+      className: m(e(g, A)),
+      style: {
+        width: o,
+        height: o,
+        fontSize: l ? void 0 : Math.round(o * 0.4)
+      },
+      children: /* @__PURE__ */ a(
+        "span",
+        {
+          className: e(
+            "leading-none",
+            l ?? "font-semibold"
+          ),
+          children: c ?? I(s)
+        }
+      )
+    }
+  );
+};
+export {
+  E as Avatar
+};

package/dist/components/New/Badge/Badge.js

@@ -0,0 +1,45 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as m } from "../../../constants/public-class-names.js";
+import { BadgeVariant as t, BadgeColor as e } from "../../../types/badge.js";
+import { mergeClasses as x } from "../../../utils/merge-classes.js";
+const b = {
+  [e.Blue]: "bg-blue text-blue",
+  [e.Green]: "bg-green-2 text-green-1",
+  [e.Violet]: "bg-violet-2 text-violet-1",
+  [e.Indigo]: "bg-violet-1 text-violet-2",
+  [e.Brown]: "bg-brown text-brown-2",
+  [e.Red]: "bg-red text-red"
+}, c = {
+  [t.Outlined]: "rounded-md border border-tertiary bg-layer-sunken text-secondary",
+  [t.Filled]: "rounded-full"
+}, p = {
+  [t.Outlined]: "dial-tiny-text",
+  [t.Filled]: "dial-caption-lead-semi-text"
+}, L = ({
+  label: n,
+  variant: r = t.Outlined,
+  color: d = e.Blue,
+  icon: l,
+  textClassName: o,
+  className: s,
+  ...a
+}) => /* @__PURE__ */ g(
+  "span",
+  {
+    ...a,
+    className: x(
+      "inline-flex h-6 w-fit shrink-0 items-center gap-1 whitespace-nowrap px-2",
+      c[r],
+      r === t.Filled && b[d],
+      s,
+      m.badge
+    ),
+    children: [
+      l && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
+      /* @__PURE__ */ i("span", { className: o ?? p[r], children: n })
+    ]
+  }
+);
+export {
+  L as Badge
+};

package/dist/components/New/BottomSheet/BottomSheet.js

@@ -0,0 +1,128 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { useFloating as k, useRole as A, useDismiss as O, useInteractions as w, FloatingPortal as z, FloatingOverlay as D, FloatingFocusManager as T } from "@floating-ui/react";
+import { IconArrowLeft as j } from "@tabler/icons-react";
+import { useId as B } from "react";
+import { CloseButton as E } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
+import { GhostIconButton as P } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as G } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as R } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+import { ElementSize as U } from "../../../types/size.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+const te = ({
+  open: i,
+  onClose: a,
+  title: t,
+  ariaLabel: c,
+  onBack: s,
+  backAriaLabel: d = "Back",
+  closeAriaLabel: u = "Close",
+  closeOnOutsideClick: f = !0,
+  children: p,
+  className: h,
+  overlayClassName: b,
+  headerClassName: g,
+  style: x,
+  overlayStyle: I,
+  bodyClassName: S,
+  titleClassName: N,
+  portalId: v
+}) => {
+  const y = G(), l = `bottom-sheet-title-${B()}`, { refs: n, context: r } = k({
+    open: i,
+    onOpenChange: (_) => {
+      _ || a();
+    }
+  }), F = A(r, { role: "dialog" }), C = O(r, { outsidePress: f }), { getFloatingProps: L } = w([F, C]);
+  return i ? /* @__PURE__ */ e(z, { id: v, children: /* @__PURE__ */ e(
+    D,
+    {
+      lockScroll: !0,
+      style: I,
+      className: o(
+        "z-popup flex items-end bg-backdrop",
+        y,
+        b
+      ),
+      children: /* @__PURE__ */ e(T, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
+        "div",
+        {
+          ref: n.setFloating,
+          ...L(),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": t ? l : void 0,
+          "aria-label": t ? void 0 : c,
+          style: x,
+          className: o(
+            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
+            "animate-slideUp motion-reduce:animate-none",
+            h,
+            M.bottomSheet
+          ),
+          children: [
+            t && /* @__PURE__ */ m(
+              "div",
+              {
+                className: o(
+                  "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14",
+                  g
+                ),
+                children: [
+                  s && /* @__PURE__ */ e(
+                    P,
+                    {
+                      "aria-label": d,
+                      className: "absolute start-4",
+                      onClick: s,
+                      icon: /* @__PURE__ */ e(
+                        j,
+                        {
+                          size: R.LG,
+                          stroke: K,
+                          className: "rtl:-scale-x-100",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "h2",
+                    {
+                      id: l,
+                      className: o(
+                        "min-w-0 truncate text-primary",
+                        N ?? "dial-body-semi-text"
+                      ),
+                      children: t
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    E,
+                    {
+                      ariaLabel: u,
+                      onClose: a,
+                      size: U.Standard,
+                      className: "absolute end-4"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: o("min-h-0 overflow-y-auto", S),
+                children: p
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  ) }) : null;
+};
+export {
+  te as BottomSheet
+};

package/dist/components/New/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,159 @@
+import { jsx as a, jsxs as c, Fragment as x } from "react/jsx-runtime";
+import { IconDots as A } from "@tabler/icons-react";
+import { useMemo as u, useCallback as B } from "react";
+import { Dropdown as D } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as w } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DIAL_KIT_ICON_STROKE as F } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { BreadcrumbsSize as K } from "../../../types/breadcrumbs.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+import { listClassName as O, overflowButtonClassName as j, defaultSeparator as z, separatorClassName as g, sizeClassName as I, itemClassName as S, navClassName as R, DEFAULT_MAX_VISIBLE_ITEMS as V, MIN_VISIBLE_ITEMS as W, linkSegmentClassName as P, staticSegmentClassName as U, currentSegmentClassName as X, currentSizeClassName as Z, segmentClassName as $, segmentWidthClassName as q } from "./constants.js";
+const te = ({
+  items: s,
+  maxVisibleItems: k = V,
+  size: i = K.Small,
+  separator: f = z,
+  ariaLabel: _ = "Breadcrumb",
+  overflowAriaLabel: M = "Show hidden path segments",
+  className: E,
+  itemClassName: L
+}) => {
+  const m = Math.max(k, W), n = u(
+    () => s.length > m ? s.slice(1, -(m - 2)) : [],
+    [s, m]
+  ), T = u(
+    () => n.map((e, l) => ({
+      key: String(l),
+      label: e.label,
+      icon: e.icon
+    })),
+    [n]
+  ), v = B(
+    ({ key: e, domEvent: l }) => {
+      const r = n[Number(e)];
+      r && (r.onClick?.(l), !r.onClick && r.href && !l.defaultPrevented && (window.location.href = r.href));
+    },
+    [n]
+  );
+  if (s.length === 0) return null;
+  const d = s.slice(n.length + 1), C = (e, {
+    index: l,
+    isFirst: r,
+    isCurrent: t
+  }) => {
+    const N = !t && (!!e.href || !!e.onClick), h = o(
+      $,
+      N ? P : t ? o(X, Z[i]) : U,
+      L,
+      b.breadcrumbsItem
+    ), p = /* @__PURE__ */ c(x, { children: [
+      e.icon,
+      /* @__PURE__ */ a(w, { text: e.label })
+    ] });
+    return /* @__PURE__ */ c(
+      "li",
+      {
+        className: o(
+          S,
+          I[i],
+          q[t ? "last" : r ? "first" : "middle"]
+        ),
+        children: [
+          N ? e.href ? /* @__PURE__ */ a(
+            "a",
+            {
+              href: e.href,
+              onClick: e.onClick,
+              className: h,
+              children: p
+            }
+          ) : /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: e.onClick,
+              className: h,
+              children: p
+            }
+          ) : /* @__PURE__ */ a(
+            "span",
+            {
+              className: h,
+              "aria-current": t ? "page" : void 0,
+              children: p
+            }
+          ),
+          !t && /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
+        ]
+      },
+      `segment-${l}`
+    );
+  };
+  return /* @__PURE__ */ a(
+    "nav",
+    {
+      "aria-label": _,
+      className: o(
+        R,
+        E,
+        b.breadcrumbs
+      ),
+      children: /* @__PURE__ */ c("ol", { className: O, children: [
+        C(s[0], {
+          index: 0,
+          isFirst: !0,
+          isCurrent: s.length === 1
+        }),
+        n.length > 0 && /* @__PURE__ */ c(
+          "li",
+          {
+            className: o(
+              S,
+              I[i],
+              "shrink-0"
+            ),
+            children: [
+              /* @__PURE__ */ a(
+                D,
+                {
+                  items: T,
+                  onItemClick: v,
+                  placement: "bottom-start",
+                  matchReferenceWidth: !1,
+                  children: /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": M,
+                      className: j,
+                      children: /* @__PURE__ */ a(
+                        A,
+                        {
+                          size: y.SM,
+                          stroke: F,
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
+            ]
+          }
+        ),
+        d.map(
+          (e, l) => C(e, {
+            index: s.length - d.length + l,
+            isFirst: !1,
+            isCurrent: l === d.length - 1
+          })
+        )
+      ] })
+    }
+  );
+};
+export {
+  te as Breadcrumbs
+};

package/dist/components/New/Breadcrumbs/constants.js

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as i } from "../../../constants/icon.js";
+import { BreadcrumbsSize as e } from "../../../types/breadcrumbs.js";
+const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap", u = "flex min-w-0 items-center gap-2", d = {
+  [e.Small]: "dial-small-text",
+  [e.Heading]: "dial-h2-text"
+}, x = {
+  [e.Small]: "dial-small-semi-text",
+  [e.Heading]: "dial-h2-text"
+}, N = {
+  first: "shrink-0",
+  middle: "min-w-0 max-w-[30%] shrink",
+  last: "min-w-0 max-w-[51%] shrink"
+}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
+  s,
+  {
+    size: i.SM,
+    stroke: n,
+    "aria-hidden": "true",
+    className: "rtl:scale-x-[-1]"
+  }
+);
+export {
+  v as DEFAULT_MAX_VISIBLE_ITEMS,
+  w as MIN_VISIBLE_ITEMS,
+  S as currentSegmentClassName,
+  x as currentSizeClassName,
+  _ as defaultSeparator,
+  u as itemClassName,
+  C as linkSegmentClassName,
+  f as listClassName,
+  c as navClassName,
+  g as overflowButtonClassName,
+  p as segmentClassName,
+  N as segmentWidthClassName,
+  I as separatorClassName,
+  d as sizeClassName,
+  h as staticSegmentClassName
+};