@epam/ai-dial-ui-kit 0.16.0-dev.67 → 0.16.0-dev.69

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

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

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

@@ -1,41 +1,60 @@
 import { jsx as t } from "react/jsx-runtime";
-import { IconChevronRight as s } from "@tabler/icons-react";
+import { IconChevronRight as i } 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 { DIAL_ICON_SIZE as a } 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 = {
+const d = {
+  [e.Small]: "w-full overflow-hidden",
+  [e.Tiny]: "w-full",
+  [e.Heading]: "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", x = {
   [e.Small]: "dial-small-text",
+  [e.Tiny]: "dial-tiny-text",
   [e.Heading]: "dial-h2-text"
-}, x = {
+}, h = {
   [e.Small]: "dial-small-semi-text",
+  [e.Tiny]: "dial-tiny-semi-text",
   [e.Heading]: "dial-h2-text"
-}, N = {
+}, s = {
   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-xs 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-xs 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,
+}, S = {
+  [e.Small]: s,
+  [e.Tiny]: {
+    first: "shrink-0",
+    middle: "min-w-12 shrink-[1000]",
+    last: "min-w-0 shrink"
+  },
+  [e.Heading]: s
+}, g = {
+  [e.Small]: "rounded-xs focus-visible:outline-offset-2",
+  [e.Tiny]: "rounded focus-visible:outline-offset-1",
+  [e.Heading]: "rounded-xs focus-visible:outline-offset-2"
+}, w = "flex min-w-0 flex-1 items-center gap-1 transition-colors", N = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-focus", p = "cursor-default text-primary", C = "cursor-default text-secondary", v = "inline-flex flex-none items-center leading-none text-secondary", I = "dial-kit-minimum-target flex shrink-0 items-center text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-focus", y = 3, k = 4, T = /* @__PURE__ */ t(
+  i,
   {
-    size: i.SM,
+    size: a.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,
+  k as DEFAULT_MAX_VISIBLE_ITEMS,
+  y as MIN_VISIBLE_ITEMS,
+  p as currentSegmentClassName,
+  h as currentSizeClassName,
+  T as defaultSeparator,
+  g as focusRingClassName,
   u as itemClassName,
-  C as linkSegmentClassName,
+  N 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
+  d as navClassName,
+  I as overflowButtonClassName,
+  w as segmentClassName,
+  S as segmentWidthClassName,
+  v as separatorClassName,
+  x as sizeClassName,
+  C as staticSegmentClassName
 };