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

package/dist/components/New/ConfirmationPopup/ConfirmationPopup.js

@@ -6,13 +6,13 @@ import { Popup as A } from "../Popup/Popup.js";
 import { Spinner as _ } from "../../Spinner/Spinner.js";
 import { ConfirmationPopupVariant as D } from "../../../types/confirmation-popup.js";
 import { PopupSize as F } from "../../../types/popup.js";
-import { mergeClasses as s } from "../../../utils/merge-classes.js";
-import { actionsBaseClassName as K, defaultCancelLabel as L, defaultConfirmLabel as T, variantConfig as t, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { actionsBaseClassName as K, defaultCancelLabel as L, defaultConfirmLabel as T, variantConfig as s, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
 import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
 const X = ({
   header: p,
-  description: e,
-  descriptionClassName: l,
+  description: a,
+  descriptionClassName: m,
   open: u = !1,
   confirmLabel: c = T,
   cancelLabel: C = L,
@@ -20,13 +20,13 @@ const X = ({
   disableConfirmButton: d = !1,
   className: N,
   confirmClassName: b,
-  onClose: n,
+  onClose: t,
   onConfirm: v,
-  onCancel: i,
-  children: a,
-  variant: m = D.Info,
+  onCancel: l,
+  children: e,
+  variant: n = D.Info,
   size: P = F.Sm,
-  footer: f,
+  footer: i,
   hideClose: S,
   ...B
 }) => {
@@ -35,45 +35,41 @@ const X = ({
       z,
       {
         label: C,
-        onClick: () => i ? i() : n?.()
+        onClick: () => l ? l() : t?.()
       }
     ),
     /* @__PURE__ */ r(
       j,
       {
-        variant: t[m].confirm.variant,
-        appearance: t[m].confirm.appearance,
+        variant: s[n].confirm.variant,
+        appearance: s[n].confirm.appearance,
         className: b,
         label: c,
         disabled: d,
         onClick: v
       }
     )
-  ] }), k = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(_, { size: 40 }) }) : a ?? (e ? /* @__PURE__ */ r(
+  ] }), k = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(_, { size: 40 }) }) : e ?? (a ? /* @__PURE__ */ r(
     "div",
     {
-      className: s(
+      className: f(
         q,
-        l
+        m
       ),
-      children: e
+      children: a
     }
-  ) : null), [a, e, o, l]);
+  ) : null), [e, a, o, m]);
   return /* @__PURE__ */ r(
     A,
     {
       ...B,
       open: u,
       header: p,
-      className: s(
-        t[m].container,
-        N,
-        w.confirmationPopup
-      ),
-      onClose: () => n?.(),
-      footer: f ?? h,
+      className: f(N, w.confirmationPopup),
+      onClose: () => t?.(),
+      footer: i ?? h,
       size: P,
-      hideClose: S ?? (!o && f === void 0),
+      hideClose: S ?? (!o && i === void 0),
       children: k()
     }
   );

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

@@ -1,24 +1,21 @@
-import { ButtonAppearance as a, ButtonVariant as r } from "../../../types/button.js";
-import { ConfirmationPopupVariant as e } from "../../../types/confirmation-popup.js";
-const t = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-paragraph-text px-6 pb-4", p = "px-6 py-4 h-[120px]", s = "Cancel", c = "Ok", l = {
-  [e.Info]: {
+import { ButtonAppearance as a, ButtonVariant as n } from "../../../types/button.js";
+import { ConfirmationPopupVariant as r } from "../../../types/confirmation-popup.js";
+const o = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-paragraph-text px-6 pb-4", p = "px-6 py-4 h-[120px]", s = "Cancel", c = "Ok", l = {
+  [r.Info]: {
     confirm: {
-      variant: r.Primary,
+      variant: n.Primary,
       appearance: a.Solid
     }
   },
-  [e.Danger]: {
-    // Utilities rather than the legacy `.dial-danger-popup` SCSS rule, which is
-    // scoped as `div .dial-danger-popup` and only lands by accident of nesting.
-    container: "border-t-4 border-error",
+  [r.Danger]: {
     confirm: {
-      variant: r.Danger,
+      variant: n.Danger,
       appearance: a.Solid
     }
   }
 };
 export {
-  t as actionsBaseClassName,
+  o as actionsBaseClassName,
   s as defaultCancelLabel,
   c as defaultConfirmLabel,
   i as descriptionBaseClassName,

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