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

package/dist/components/Popup/Popup.js

@@ -0,0 +1,110 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useFloating as M, useRole as S, useDismiss as R, useInteractions as j, FloatingPortal as B, FloatingOverlay as L, FloatingFocusManager as T } from "@floating-ui/react";
+import i from "classnames";
+import { useRef as _ } from "react";
+import { DialCloseButton as A } from "../CloseButton/CloseButton.js";
+import { DialTooltip as E } from "../Tooltip/Tooltip.js";
+import { PopupSize as G } from "../../types/popup.js";
+import { popupHeaderClassName as H, popupDividerClassName as c, popupSizeClassMap as O, overlayBaseClassName as Z } from "./constants.js";
+import { mergeClasses as k } from "../../utils/merge-classes.js";
+import { DIAL_ICON_SIZE as q } from "../../constants/icon.js";
+const oe = ({
+  open: s = !1,
+  header: r,
+  portalId: f,
+  className: g,
+  overlayClassName: h,
+  titleClassName: N,
+  headerClassName: v,
+  dividers: x = !0,
+  dividerFooter: C = !0,
+  children: F,
+  footer: l,
+  onClose: t,
+  size: y = G.Md,
+  hideClose: D = !1,
+  closeOnOutsideClick: I = !0,
+  preventKeyboardOnOpen: n = !1
+}) => {
+  const p = _(null), { refs: m, context: a } = M({
+    open: s,
+    onOpenChange: (o) => {
+      o || t?.(null);
+    }
+  }), b = S(a, { role: "dialog" }), P = R(a, { outsidePress: I }), { getFloatingProps: w } = j([b, P]);
+  if (!s) return null;
+  const d = typeof r == "string" ? "dial-popup-heading" : void 0, z = (o) => o ? typeof o == "string" ? /* @__PURE__ */ e(
+    "h3",
+    {
+      id: d,
+      className: i(
+        "flex-1 min-w-0 mr-3 truncate dial-h3-text text-primary",
+        N
+      ),
+      children: /* @__PURE__ */ e(E, { tooltip: o, children: o })
+    }
+  ) : o : /* @__PURE__ */ e("span", {});
+  return /* @__PURE__ */ e(B, { id: f, children: /* @__PURE__ */ e(
+    L,
+    {
+      className: i(Z, h),
+      children: /* @__PURE__ */ e(
+        T,
+        {
+          context: a,
+          initialFocus: n ? p : m.floating,
+          children: /* @__PURE__ */ u(
+            "div",
+            {
+              ref: m.setFloating,
+              ...w(),
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": d,
+              className: i(
+                "dial-popup",
+                O[y],
+                x && c,
+                g
+              ),
+              children: [
+                n && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    ref: p,
+                    tabIndex: -1,
+                    "aria-hidden": !0,
+                    className: "absolute size-px -m-px overflow-hidden opacity-0 pointer-events-none"
+                  }
+                ),
+                /* @__PURE__ */ u(
+                  "div",
+                  {
+                    className: k(H, v),
+                    children: [
+                      z(r),
+                      !D && /* @__PURE__ */ e(
+                        A,
+                        {
+                          size: q.SM,
+                          ariaLabel: "Close dialog",
+                          onClose: (o) => t?.(o)
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e("div", { className: "grow overflow-auto", "aria-label": "popup-description", children: F }),
+                C && !l && /* @__PURE__ */ e("div", { className: c }),
+                l
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+export {
+  oe as DialPopup
+};

package/dist/components/Popup/constants.js

@@ -0,0 +1,12 @@
+import { PopupSize as e } from "../../types/popup.js";
+const s = "z-[52] flex items-center justify-center bg-blackout md:p-4", i = "divide-tertiary divide-y", o = "flex flex-row justify-between py-4 px-6 items-center", t = {
+  [e.Sm]: "dial-sm-popup",
+  [e.Md]: "dial-md-popup",
+  [e.Lg]: "dial-lg-popup"
+};
+export {
+  s as overlayBaseClassName,
+  i as popupDividerClassName,
+  o as popupHeaderClassName,
+  t as popupSizeClassMap
+};

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,58 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { useId as w } from "react";
+import { Label as y } from "../New/Label/Label.js";
+import { ElementSize as f } from "../../types/size.js";
+import { resolveAccessibleName as I } from "../../utils/accessible-name.js";
+import { mergeClasses as M } from "../../utils/merge-classes.js";
+const A = ({
+  value: o,
+  max: s = 100,
+  size: u = f.Standard,
+  labelProps: e,
+  valueLabel: i,
+  id: h,
+  className: b,
+  "aria-label": p,
+  ...g
+}) => {
+  const x = w(), t = h ?? x, l = !!e?.label, n = l ? e?.id ?? `${t}-label` : void 0, a = s > 0 ? s : 0, v = Number.isFinite(o) ? o : 0, d = Math.min(Math.max(v, 0), a), N = a > 0 ? d / a * 100 : 0, c = /* @__PURE__ */ r(
+    "div",
+    {
+      ...g,
+      id: t,
+      role: "progressbar",
+      "aria-valuenow": d,
+      "aria-valuemin": 0,
+      "aria-valuemax": a,
+      "aria-labelledby": n,
+      "aria-label": I(
+        p,
+        l ? void 0 : "Progress"
+      ),
+      className: M(
+        "w-full overflow-hidden rounded-full bg-control-disable-primary",
+        u === f.Small ? "h-1" : "h-2",
+        b
+      ),
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          style: { width: `${N}%` },
+          className: "h-full rounded-full bg-control-accent transition-[width] duration-300 motion-reduce:transition-none"
+        }
+      )
+    }
+  );
+  return !l && !i ? c : /* @__PURE__ */ m("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ m("div", { className: "flex items-baseline gap-2", children: [
+      e && /* @__PURE__ */ r(y, { ...e, id: n }),
+      i && // `ml-auto` rather than `justify-between` so the readout still sits
+      // at the end when there is no label beside it.
+      /* @__PURE__ */ r("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: i })
+    ] }),
+    c
+  ] });
+};
+export {
+  A as ProgressBar
+};

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,103 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import a from "classnames";
+const F = ({
+  name: d,
+  value: i,
+  label: s,
+  description: l,
+  checked: o = !1,
+  inputId: c,
+  className: f,
+  labelClassName: N,
+  disabled: e,
+  onChange: u,
+  descriptionClassName: y,
+  containerClassName: h,
+  caption: r,
+  oneLineCaption: n = !1
+}) => {
+  const x = `${c}-desc`, p = a(
+    "dial-small-text cursor-pointer py-[1px]",
+    e ? "text-secondary" : "text-primary",
+    N,
+    e && "cursor-not-allowed"
+  ), w = a(
+    "cursor-pointer dial-input-radio",
+    !!s && "mr-2",
+    f,
+    e && "!cursor-not-allowed"
+  ), g = a(
+    "flex flex-col",
+    !!l && "mb-2",
+    e && "cursor-not-allowed",
+    h
+  ), C = a(
+    "dial-tiny-text mt-2 ml-[26px] text-secondary",
+    y,
+    e && "cursor-not-allowed"
+  ), v = (j) => {
+    e || j.target.checked && u?.(i);
+  };
+  return /* @__PURE__ */ m("div", { className: g, children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: a(
+          "flex flex-row",
+          (!r || n) && "items-center"
+        ),
+        children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "radio",
+              id: c,
+              name: d,
+              value: i,
+              checked: o,
+              disabled: e,
+              "aria-describedby": o && l ? x : void 0,
+              className: w,
+              onChange: v
+            }
+          ),
+          (s || r) && /* @__PURE__ */ m(
+            "div",
+            {
+              className: a(
+                "flex",
+                n ? "flex-1 flex-row items-center gap-2" : "flex-col gap-1"
+              ),
+              children: [
+                s && /* @__PURE__ */ t(
+                  "label",
+                  {
+                    className: p,
+                    htmlFor: c,
+                    "aria-describedby": r ? "caption" : "",
+                    children: s
+                  }
+                ),
+                r && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    id: "caption",
+                    className: a(
+                      "dial-tiny-text text-secondary",
+                      n && "ml-auto"
+                    ),
+                    children: r
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    o && l && /* @__PURE__ */ t("div", { id: x, className: C, children: l })
+  ] });
+};
+export {
+  F as DialRadioButton
+};

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,92 @@
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { DialFormItem as j } from "../FormItem/FormItem.js";
+import { DialRadioButton as v } from "../RadioButton/RadioButton.js";
+import { mergeClasses as a } from "../../utils/merge-classes.js";
+import { selectedContentClassName as $, orientationClassMap as k, optionsWrapperBaseClassName as F } from "./constants.js";
+const y = ({
+  fieldTitle: n,
+  radioClassName: p,
+  containerClassName: o,
+  selectedItemClassName: t,
+  selectedLabelClassName: d,
+  radioGroupClassName: N,
+  inputContainerClassName: h,
+  selectedInputContainerClassName: C,
+  groupLabelClassName: i,
+  formItemChildrenClassName: f,
+  labelClassName: r,
+  disabled: c,
+  elementId: m,
+  radioButtons: x,
+  activeRadioButton: l,
+  orientation: b,
+  labelDescription: u,
+  onChange: D
+}) => /* @__PURE__ */ s(
+  j,
+  {
+    id: m,
+    label: n,
+    labelClassName: i || r,
+    description: u,
+    className: o,
+    childrenClassName: f,
+    children: /* @__PURE__ */ s(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": n,
+        "aria-disabled": c || void 0,
+        className: a(
+          F,
+          k[b],
+          N
+        ),
+        children: x.map((e) => /* @__PURE__ */ g(
+          "div",
+          {
+            className: a(
+              "flex flex-col",
+              h,
+              e.id === l && C
+            ),
+            children: [
+              /* @__PURE__ */ s(
+                v,
+                {
+                  name: m,
+                  value: e.id,
+                  inputId: `${m}-${e.id}`,
+                  disabled: c,
+                  className: p,
+                  labelClassName: a(
+                    r,
+                    e.id === l && d
+                  ),
+                  label: e.name,
+                  caption: e.caption,
+                  checked: e.id === l,
+                  onChange: () => D(e.id)
+                }
+              ),
+              e.id === l && e.content ? /* @__PURE__ */ s(
+                "div",
+                {
+                  className: a(
+                    $,
+                    t
+                  ),
+                  children: e.content
+                }
+              ) : null
+            ]
+          },
+          e.id
+        ))
+      }
+    )
+  }
+);
+export {
+  y as DialRadioGroup
+};

package/dist/components/RadioGroup/constants.js

@@ -0,0 +1,10 @@
+import { RadioGroupOrientation as o } from "../../types/radio-group.js";
+const t = "flex", a = "pb-1 mt-2", s = {
+  [o.Column]: "flex-col gap-y-2",
+  [o.Row]: "flex-row gap-x-4"
+};
+export {
+  t as optionsWrapperBaseClassName,
+  s as orientationClassMap,
+  a as selectedContentClassName
+};

package/dist/components/RadioGroupPopupField/RadioGroupPopupField.js

@@ -0,0 +1,101 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import B from "classnames";
+import { useState as S, useCallback as l } from "react";
+import { DialNeutralButton as w, DialPrimaryButton as z } from "../Button/ButtonWrappers.js";
+import { DialLabel as A } from "../Label/Label.js";
+import { DialInputPopup as F } from "../InputPopup/InputPopup.js";
+import { DialPopup as L } from "../Popup/Popup.js";
+import { DialRadioGroup as M } from "../RadioGroup/RadioGroup.js";
+import { PopupSize as q } from "../../types/popup.js";
+import { RadioGroupOrientation as E } from "../../types/radio-group.js";
+const _ = ({
+  label: c,
+  htmlFor: f,
+  disabled: a,
+  selectedValue: d,
+  radioButtons: i,
+  customInputValue: x,
+  valueClassName: C,
+  inputClassName: D,
+  emptyValueText: N,
+  placeholder: P,
+  onClose: p,
+  header: h,
+  portalId: y,
+  onApply: t,
+  onCancel: n,
+  cancelButtonTitle: O = "Cancel",
+  applyButtonTitle: b = "Apply",
+  isValid: v,
+  selectedRadioValue: R,
+  onChangeRadioField: g,
+  id: j,
+  size: k = q.Md
+}) => {
+  const [r, m] = S(!1), G = l(() => {
+    a || m(!0);
+  }, [a]), o = l(() => {
+    m(!1), p?.();
+  }, [p]), s = l(() => {
+    n?.(), o();
+  }, [n, o]), I = l(() => {
+    t(), o();
+  }, [t, o]);
+  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ e(A, { label: c, htmlFor: f }),
+    /* @__PURE__ */ e(
+      F,
+      {
+        disabled: a,
+        open: r,
+        selectedValue: x ?? i.find((V) => V.id === d)?.name,
+        valueClassName: C,
+        inputClassName: B(D, "py-2", "px-3"),
+        emptyValueText: N,
+        placeholder: P,
+        onOpen: G,
+        children: /* @__PURE__ */ e(
+          L,
+          {
+            open: r,
+            onClose: s,
+            header: h,
+            portalId: y,
+            size: k,
+            footer: /* @__PURE__ */ u("div", { className: "flex flex-row items-center justify-end gap-2 px-6 py-4", children: [
+              /* @__PURE__ */ e(
+                w,
+                {
+                  label: O,
+                  onClick: s
+                }
+              ),
+              /* @__PURE__ */ e(
+                z,
+                {
+                  label: b,
+                  onClick: I,
+                  disabled: !v
+                }
+              )
+            ] }),
+            children: /* @__PURE__ */ e("div", { className: "px-6 py-4", children: /* @__PURE__ */ e(
+              M,
+              {
+                radioButtons: i,
+                labelClassName: "dial-small-text",
+                activeRadioButton: R,
+                onChange: g,
+                elementId: j,
+                orientation: E.Column
+              }
+            ) })
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  _ as DialRadioGroupPopupField
+};

package/dist/components/RemoveButton/RemoveButton.js

@@ -0,0 +1,30 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IconTrashX as m } from "@tabler/icons-react";
+import "react";
+import { BASE_ICON_PROPS as e } from "../../constants/icon.js";
+import { ButtonAppearance as n } from "../../types/button.js";
+import { DialDangerIconButton as p } from "../IconButton/IconButtonWrappers.js";
+import { DialDangerButton as i } from "../Button/ButtonWrappers.js";
+const I = ({
+  iconClassName: r,
+  label: t,
+  ...a
+}) => t ? /* @__PURE__ */ o(
+  i,
+  {
+    ...a,
+    label: t,
+    appearance: n.Ghost,
+    iconBefore: /* @__PURE__ */ o(m, { ...e, className: r || "" })
+  }
+) : /* @__PURE__ */ o(
+  p,
+  {
+    ...a,
+    appearance: n.Ghost,
+    icon: /* @__PURE__ */ o(m, { ...e, className: r || "" })
+  }
+);
+export {
+  I as DialRemoveButton
+};

package/dist/components/ResizableContainer/ConditionalResizableContainer.js

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+import { DialResizableContainer as e } from "./ResizableContainer.js";
+const l = ({ enabled: i = !0, children: r, ...o }) => i ? /* @__PURE__ */ t(e, { ...o, children: r }) : r;
+export {
+  l as DialConditionalResizableContainer
+};

package/dist/components/ResizableContainer/ResizableContainer.js

@@ -0,0 +1,79 @@
+import { jsx as s } from "react/jsx-runtime";
+import { ResizableContainerSide as R } from "../../types/resizable-container.js";
+import { Resizable as H } from "../../node_modules/re-resizable/lib/index.js";
+import { useState as v, useRef as L, useCallback as b, useMemo as _ } from "react";
+import { ResizeHandle as j } from "./components/ResizeHandle.js";
+const E = ({
+  children: C,
+  minWidth: n,
+  maxWidth: l,
+  width: a,
+  defaultWidth: S,
+  onResizeStop: d,
+  onResize: f,
+  side: o = R.Right,
+  resizeHandlerClassName: c,
+  resizeHandler: h
+}) => {
+  const [u, g] = v(!1), [x, y] = v(S), t = a !== void 0, r = t ? a : x, z = L(null), p = b(() => {
+    g(!0);
+  }, []), m = b(() => {
+    g(!1);
+    const e = z.current?.resizable?.getBoundingClientRect(), i = e ? Math.round(e.width) : n;
+    t || y(i), d?.(i);
+  }, [d, t, n]), I = _(() => {
+    const e = o === R.Left, i = /* @__PURE__ */ s(
+      j,
+      {
+        side: o,
+        isResizing: u,
+        customHandler: h,
+        handlerClassName: c
+      }
+    );
+    return {
+      size: t ? { width: r, height: "100%" } : void 0,
+      defaultSize: t ? void 0 : { width: r, height: "100%" },
+      minWidth: n,
+      maxWidth: l,
+      enable: {
+        left: e,
+        right: !e
+      },
+      handleClasses: {
+        right: "group",
+        left: "group"
+      },
+      handleStyles: {
+        right: { right: "-8px", zIndex: 10 },
+        left: { left: 0, zIndex: 10 }
+      },
+      handleComponent: {
+        left: e ? i : void 0,
+        right: e ? void 0 : i
+      },
+      onResizeStart: p,
+      onResize: (k, B, w) => {
+        const M = Math.round(w.offsetWidth);
+        f?.(M);
+      },
+      onResizeStop: m
+    };
+  }, [
+    o,
+    t,
+    r,
+    n,
+    l,
+    h,
+    c,
+    u,
+    p,
+    m,
+    f
+  ]);
+  return /* @__PURE__ */ s(H, { ref: z, ...I, children: /* @__PURE__ */ s("div", { className: "group flex size-full flex-col bg-layer-3 divide-y divide-tertiary transition-all", children: C }) });
+};
+export {
+  E as DialResizableContainer
+};

package/dist/components/ResizableContainer/components/ResizeHandle.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import "react";
+import { ResizeIcon as n } from "./ResizeIcon.js";
+const u = ({
+  side: s,
+  isResizing: o,
+  customHandler: e,
+  handlerClassName: t
+}) => {
+  const i = a(
+    "invisible h-full w-0.5 group-hover:visible bg-accent-primary text-accent-primary cursor-col-resize transition-opacity",
+    o && "visible",
+    t
+  ), c = /* @__PURE__ */ r(n, { side: s, className: i });
+  return e ? /* @__PURE__ */ r("div", { className: i, children: e }) : c;
+};
+export {
+  u as ResizeHandle
+};

package/dist/components/ResizableContainer/components/ResizeIcon.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ResizableContainerSide as t } from "../../../types/resizable-container.js";
+import { IconChevronLeft as i, IconChevronRight as s } from "@tabler/icons-react";
+import c from "classnames";
+const p = ({ side: r, className: n }) => {
+  const o = r === t.Left;
+  return /* @__PURE__ */ e("div", { className: n, children: /* @__PURE__ */ e(o ? i : s, { className: c("h-full", o && "-ml-6") }) });
+};
+export {
+  p as ResizeIcon
+};