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

package/dist/components/New/Accordion/Accordion.js

@@ -1,82 +1,84 @@
-import { jsxs as i, Fragment as _, jsx as e } from "react/jsx-runtime";
-import { IconChevronRight as j } from "@tabler/icons-react";
-import { useState as A, useId as C } from "react";
-import { DIAL_KIT_ICON_STROKE as S } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
-import { resolveAccessibleName as O } from "../../../utils/accessible-name.js";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
-const F = ({
+import { jsxs as a, Fragment as A, jsx as e } from "react/jsx-runtime";
+import { IconChevronRight as S } from "@tabler/icons-react";
+import { useState as C, useId as E } from "react";
+import { DIAL_KIT_ICON_STROKE as j } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as L } from "../../../constants/icon.js";
+import { resolveAccessibleName as T } from "../../../utils/accessible-name.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as k } from "../../../constants/public-class-names.js";
+const Z = ({
   title: p,
   description: s,
   children: h,
-  expanded: l,
+  expanded: c,
   defaultExpanded: y = !1,
-  disabled: r,
+  disabled: n,
   nonCollapsible: o,
-  ariaLabel: v,
-  onToggle: I,
+  ariaLabel: I,
+  onToggle: v,
   className: g,
-  headerClassName: c,
+  headerClassName: l,
   contentClassName: N
 }) => {
-  const d = l !== void 0, [b, w] = A(y), t = o ? !0 : d ? l : b, m = C(), a = `accordion-header-${m}`, x = `accordion-content-${m}`, E = () => {
-    if (r) return;
+  const d = c !== void 0, [b, w] = C(y), t = o ? !0 : d ? c : b, m = E(), i = `accordion-header-${m}`, x = `accordion-content-${m}`, _ = () => {
+    if (n) return;
     const u = !t;
-    d || w(u), I?.(u);
-  }, f = /* @__PURE__ */ i(_, { children: [
-    /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-col", children: [
+    d || w(u), v?.(u);
+  }, f = /* @__PURE__ */ a(A, { children: [
+    /* @__PURE__ */ a("span", { className: "flex min-w-0 flex-col", children: [
       /* @__PURE__ */ e("span", { className: "truncate dial-body-text text-primary", children: p }),
       s ? /* @__PURE__ */ e("span", { className: "truncate dial-tiny-text text-secondary", children: s }) : null
     ] }),
     !o && // Caret at the leading edge; it turns a quarter turn to point down when open.
     /* @__PURE__ */ e(
-      j,
+      S,
       {
-        size: k.SM,
-        stroke: S,
+        size: L.SM,
+        stroke: j,
         "aria-hidden": "true",
-        className: n(
+        className: r(
           "shrink-0 text-secondary transition-transform motion-reduce:transition-none",
           t && "rotate-90"
         )
       }
     )
   ] });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: n(
+      className: r(
         "flex flex-col gap-3 py-3 overflow-hidden bg-transparent ",
-        g
+        g,
+        k.accordion
       ),
       children: [
         o ? /* @__PURE__ */ e(
           "div",
           {
-            id: a,
-            className: n(
+            id: i,
+            className: r(
               "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
-              c
+              l
             ),
             children: f
           }
         ) : /* @__PURE__ */ e(
           "button",
           {
-            id: a,
+            id: i,
             type: "button",
             "aria-expanded": t,
             "aria-controls": t ? x : void 0,
-            "aria-label": O(v),
-            disabled: r,
-            onClick: E,
-            className: n(
+            "aria-label": T(I),
+            disabled: n,
+            onClick: _,
+            className: r(
               "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
-              r ? "cursor-not-allowed opacity-75" : (
+              n ? "cursor-not-allowed opacity-75" : (
                 // Applied only to a header that can actually be operated.
                 "cursor-pointer hover:bg-control-accent-alpha-hover focus-visible:outline focus-visible:outline-focus"
               ),
-              c
+              l
             ),
             children: f
           }
@@ -86,8 +88,8 @@ const F = ({
           {
             id: x,
             role: "region",
-            "aria-labelledby": a,
-            className: n(
+            "aria-labelledby": i,
+            className: r(
               "px-4 dial-small-text text-primary",
               N
             ),
@@ -99,5 +101,5 @@ const F = ({
   );
 };
 export {
-  F as Accordion
+  Z as Accordion
 };

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
+};

package/dist/components/New/ButtonDropdown/ButtonDropdown.js

@@ -2,16 +2,17 @@ import { jsx as r } from "react/jsx-runtime";
 import { useState as s, useMemo as u } from "react";
 import { ButtonAppearance as d, ButtonVariant as c } from "../../../types/button.js";
 import { Button as f } from "../Button/Button.js";
-import { Dropdown as h } from "../Dropdown/Dropdown.js";
-import { getButtonChevron as B } from "./constants.js";
-const g = ({
+import { Dropdown as D } from "../Dropdown/Dropdown.js";
+import { getButtonChevron as h } from "./constants.js";
+import { DIAL_KIT_CLASS as l } from "../../../constants/public-class-names.js";
+const I = ({
   variant: n,
   appearance: t,
   items: e,
   ...p
 }) => {
-  const [o, a] = s(!1), i = u(() => B(o), [o]);
-  return /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(h, { items: e, onOpenChange: (m) => a(m), children: /* @__PURE__ */ r(
+  const [o, a] = s(!1), i = u(() => h(o), [o]);
+  return /* @__PURE__ */ r("div", { className: l.buttonDropdown, children: /* @__PURE__ */ r(D, { items: e, onOpenChange: (m) => a(m), children: /* @__PURE__ */ r(
     f,
     {
       ...p,
@@ -24,5 +25,5 @@ const g = ({
   ) }) });
 };
 export {
-  g as ButtonDropdown
+  I as ButtonDropdown
 };