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

package/dist/components/New/SchemaRenderer/components/SchemaSection.js

@@ -0,0 +1,135 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as N, useId as k } from "react";
+import { IconChevronDown as b, IconAlertTriangle as y, IconCheck as g, IconTrash as v } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as a } from "../../constants/icon.js";
+import { DangerIconButton as _ } from "../../IconButton/IconButtonWrappers.js";
+import { InfoButton as w } from "../../InfoButton/InfoButton.js";
+import { DIAL_ICON_SIZE as o } from "../../../../constants/icon.js";
+import { DIAL_KIT_CLASS as z } from "../../../../constants/public-class-names.js";
+import { ElementSize as C } from "../../../../types/size.js";
+import { mergeClasses as t } from "../../../../utils/merge-classes.js";
+const R = ({
+  title: m,
+  description: p,
+  summary: l,
+  errorCount: n = 0,
+  level: x = 0,
+  children: f,
+  onRemove: c,
+  defaultExpanded: h = !0,
+  removeItemAriaLabel: u = "Remove item"
+}) => {
+  const [r, I] = N(h), d = k(), s = x === 0;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: t(
+        "flex flex-col border border-tertiary",
+        s ? "rounded-xl bg-layer-raised" : "rounded-lg",
+        z.schemaRendererSection
+      ),
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: t(
+              "flex items-center gap-2",
+              s ? "px-4 py-3" : "px-3 py-2"
+            ),
+            children: [
+              /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  "aria-expanded": r,
+                  "aria-controls": r ? d : void 0,
+                  onClick: () => I((S) => !S),
+                  className: "flex min-w-0 flex-1 items-center gap-2 rounded text-left text-primary focus-visible:outline focus-visible:outline-focus",
+                  children: [
+                    /* @__PURE__ */ e(
+                      b,
+                      {
+                        size: o.SM,
+                        stroke: a,
+                        "aria-hidden": "true",
+                        className: t(
+                          "shrink-0 text-secondary transition-transform",
+                          !r && "-rotate-90"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: t(
+                          "truncate",
+                          s ? "dial-small-semi-text" : "dial-small-text"
+                        ),
+                        children: m
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(w, { caption: p }),
+              l && /* @__PURE__ */ e("span", { className: "dial-tiny-text whitespace-nowrap text-secondary", children: l }),
+              n > 0 ? /* @__PURE__ */ i("span", { className: "flex items-center gap-1 whitespace-nowrap dial-tiny-text text-error", children: [
+                /* @__PURE__ */ e(
+                  y,
+                  {
+                    size: o.SM,
+                    stroke: a,
+                    "aria-hidden": "true",
+                    className: "shrink-0"
+                  }
+                ),
+                n,
+                " error",
+                n > 1 ? "s" : ""
+              ] }) : /* @__PURE__ */ e(
+                g,
+                {
+                  size: o.SM,
+                  stroke: a,
+                  "aria-hidden": "true",
+                  className: "shrink-0 text-success"
+                }
+              ),
+              c && /* @__PURE__ */ e(
+                _,
+                {
+                  size: C.Small,
+                  icon: /* @__PURE__ */ e(
+                    v,
+                    {
+                      size: o.SM,
+                      stroke: a,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  "aria-label": u,
+                  onClick: c,
+                  className: "shrink-0"
+                }
+              )
+            ]
+          }
+        ),
+        r && /* @__PURE__ */ e(
+          "div",
+          {
+            id: d,
+            className: t(
+              "border-t border-tertiary",
+              s ? "p-4" : "p-3"
+            ),
+            children: f
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  R as SchemaSection
+};

package/dist/components/New/SchemaRenderer/context.js

@@ -0,0 +1,17 @@
+import { createContext as c, useContext as u } from "react";
+const a = c(null), f = () => {
+  const e = u(a);
+  if (!e)
+    throw new Error("useSchemaContext must be used inside SchemaRenderer");
+  return e;
+}, m = (e, t = /* @__PURE__ */ new Set(), r = !1, n = !1) => {
+  if (!r || t.has(e)) return !0;
+  if (!n) return !1;
+  const s = e + ".";
+  return [...t].some((o) => o.startsWith(s));
+};
+export {
+  a as SchemaRendererContext,
+  m as isPathTouched,
+  f as useSchemaContext
+};

package/dist/components/New/Search/Search.js

@@ -39,9 +39,9 @@ const N = {
       placeholder: c,
       inputRef: u,
       wrapperClassName: L(
-        M.search,
         f && "dial-kit-input-borderless",
-        p
+        p,
+        M.search
       ),
       iconBefore: /* @__PURE__ */ o(
         h,

package/dist/components/New/SegmentedControl/SegmentedControl.js

@@ -53,9 +53,9 @@ const M = ({
       "aria-disabled": o || void 0,
       onKeyDown: N,
       className: u(
-        f.segmentedControl,
         _,
-        g
+        g,
+        f.segmentedControl
       ),
       children: l.map((e) => {
         const a = e.value === r, s = o || e.disabled;
@@ -76,11 +76,11 @@ const M = ({
             disabled: s,
             onClick: () => c(e.value),
             className: u(
-              f.segmentedControlItem,
               R,
               a ? U : L,
               s ? a ? D : h : a ? y : K,
-              p
+              p,
+              f.segmentedControlItem
             ),
             children: [
               e.icon,

package/dist/components/New/Select/CollapsedSelectTags.js

@@ -0,0 +1,127 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useRef as h, useState as P, useCallback as T, useLayoutEffect as d } from "react";
+import { getVisibleTagCount as y } from "../TagInput/utils.js";
+import { InteractiveTooltip as W } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { Tag as g } from "../Tag/Tag.js";
+import { TooltipPlacement as S } from "../../../types/tooltip.js";
+import { observeElementSize as $ } from "../../../utils/element-size-observer.js";
+import { mergeClasses as b } from "../../../utils/merge-classes.js";
+import { MultiSelectTags as c, selectTagClassName as w } from "./MultiSelectTags.js";
+const j = 8, A = (e) => e.stopPropagation(), E = (e) => {
+  e.key !== "Escape" && e.stopPropagation();
+}, V = ({
+  options: e,
+  selectedValues: r,
+  handleRemoveTag: a
+}) => {
+  const n = h(null), m = h(null), [v, C] = P(null), l = T(() => {
+    const t = n.current, s = m.current;
+    if (!t || !s) return;
+    const f = Array.from(
+      s.children,
+      (k) => k.offsetWidth
+    ), N = f.pop() ?? 0;
+    C(
+      y({
+        tagWidths: f,
+        overflowChipWidth: N,
+        availableWidth: t.clientWidth,
+        gap: j
+      })
+    );
+  }, []);
+  d(() => {
+    l();
+  }, [l, e, r]), d(() => {
+    const t = n.current;
+    return t ? $(t, l) : void 0;
+  }, [l]);
+  const p = v ?? r.length, x = r.slice(0, p), i = r.slice(p);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: n,
+      className: "relative flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
+      children: [
+        /* @__PURE__ */ o(
+          c,
+          {
+            options: e,
+            selectedValues: x,
+            handleRemoveTag: a,
+            tagClassName: "min-w-0"
+          }
+        ),
+        i.length > 0 && /* @__PURE__ */ o(
+          W,
+          {
+            asChild: !0,
+            placement: S.Bottom,
+            content: (
+              // The panel is portalled but still a React child of the field, so
+              // its clicks and keys would otherwise reach the dropdown trigger.
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "flex flex-wrap gap-2",
+                  onClick: A,
+                  onKeyDown: E,
+                  children: /* @__PURE__ */ o(
+                    c,
+                    {
+                      options: e,
+                      selectedValues: i,
+                      handleRemoveTag: a
+                    }
+                  )
+                }
+              )
+            ),
+            children: /* @__PURE__ */ o(
+              g,
+              {
+                label: `+${i.length}`,
+                role: "button",
+                tabIndex: 0,
+                "aria-haspopup": "true",
+                "aria-label": `${i.length} more selected: ${i.map((t) => e.find((s) => s.value === t)?.label ?? t).join(", ")}`,
+                title: "",
+                className: b(w, "shrink-0")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            ref: m,
+            "aria-hidden": "true",
+            inert: !0,
+            className: "pointer-events-none invisible absolute left-0 top-0 flex h-0 w-max gap-2 overflow-hidden",
+            children: [
+              /* @__PURE__ */ o(
+                c,
+                {
+                  options: e,
+                  selectedValues: r,
+                  handleRemoveTag: a,
+                  tagClassName: "shrink-0"
+                }
+              ),
+              /* @__PURE__ */ o(
+                g,
+                {
+                  label: `+${r.length}`,
+                  className: b(w, "shrink-0")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as CollapsedSelectTags
+};

package/dist/components/New/Select/MultiSelectTags.js

@@ -1,23 +1,26 @@
-import { jsx as l, Fragment as i } from "react/jsx-runtime";
-import { Tag as c } from "../Tag/Tag.js";
-const b = ({
+import { jsx as s, Fragment as m } from "react/jsx-runtime";
+import { mergeClasses as c } from "../../../utils/merge-classes.js";
+import { Tag as i } from "../Tag/Tag.js";
+const p = "h-[24px] max-w-full rounded-md border border-secondary bg-layer-sunken px-2", f = ({
   options: a,
   selectedValues: n,
-  handleRemoveTag: e
-}) => /* @__PURE__ */ l(i, { children: n.map((r) => {
-  const t = a.find((o) => o.value === r);
-  return /* @__PURE__ */ l(
-    c,
+  handleRemoveTag: o,
+  tagClassName: t
+}) => /* @__PURE__ */ s(m, { children: n.map((e) => {
+  const l = a.find((r) => r.value === e);
+  return /* @__PURE__ */ s(
+    i,
     {
-      label: t?.label ?? r,
-      closable: !!e,
-      onRemove: (o) => e?.(o, r),
-      icon: t?.icon,
-      className: "max-w-full border border-tertiary"
+      label: l?.label ?? e,
+      closable: !!o,
+      onRemove: (r) => o?.(r, e),
+      icon: l?.icon,
+      className: c(p, t)
     },
-    r
+    e
   );
 }) });
 export {
-  b as MultiSelectTags
+  f as MultiSelectTags,
+  p as selectTagClassName
 };