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

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

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