@epam/ai-dial-ui-kit 0.14.0-dev.7 → 0.14.0

package/dist/components/Grid/renderers/constants.js

@@ -0,0 +1,25 @@
+const n = "en-US", e = {
+  year: "numeric",
+  month: "numeric",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit"
+}, c = "text-primary", t = 40, i = {
+  minWidth: t,
+  width: t,
+  maxWidth: t
+}, o = {
+  cellClass: "ag-grid-no-checkbox",
+  ...i
+}, s = {
+  ...i
+};
+export {
+  s as CHECKBOX_COL_DEF,
+  e as DEFAULT_DATE_FORMAT_OPTIONS,
+  n as DEFAULT_LOCALE,
+  o as RADIO_BUTTON_COL_DEF,
+  i as SELECTION_COL_DEF,
+  c as dateCellBaseClassName
+};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import l from "classnames";
+const m = ({ icon: r, className: s }) => r ? /* @__PURE__ */ e("span", { className: l("flex-shrink-0", s), children: r }) : null;
+export {
+  m as DialIcon
+};

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import { ButtonAppearance as u } from "../../types/button.js";
+import { getButtonClassNames as b } from "../Button/utils.js";
+import { DialTooltip as f } from "../Tooltip/Tooltip.js";
+import { mergeClasses as p } from "../../utils/merge-classes.js";
+import { resolveAccessibleName as x } from "../../utils/accessible-name.js";
+import { ElementSize as a } from "../../types/size.js";
+const v = ({
+  variant: t,
+  appearance: n = u.Solid,
+  size: r = a.Standard,
+  className: s,
+  icon: m,
+  tooltipProps: o,
+  type: c = "button",
+  ...e
+}) => {
+  const d = p(
+    t && b(t, n),
+    r === a.Small ? "h-[24px] w-[24px]" : "h-[40px] w-[40px] dial-kit-enhanced-target",
+    "dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0 disabled:text-controls-secondary-disable",
+    s
+  ), l = /* @__PURE__ */ i(
+    "button",
+    {
+      ...e,
+      type: c,
+      className: d,
+      "aria-label": x(
+        e["aria-label"],
+        o?.tooltip
+      ),
+      children: m
+    }
+  );
+  return o ? /* @__PURE__ */ i(f, { ...o, children: l }) : l;
+};
+export {
+  v as DialIconButton
+};

package/dist/components/IconButton/IconButtonWrappers.js

@@ -0,0 +1,48 @@
+import { jsx as u } from "react/jsx-runtime";
+import { ButtonAppearance as t, ButtonVariant as o } from "../../types/button.js";
+import { DialIconButton as i } from "./IconButton.js";
+const n = (r, a) => ({ appearance: c, ...e }) => /* @__PURE__ */ u(
+  i,
+  {
+    ...e,
+    variant: r,
+    appearance: c || a
+  }
+), p = (r, a) => ({ variant: c, ...e }) => /* @__PURE__ */ u(
+  i,
+  {
+    ...e,
+    variant: c || a,
+    appearance: r
+  }
+), I = n(
+  o.Primary,
+  t.Solid
+), m = n(
+  o.Neutral,
+  t.Outlined
+), y = n(
+  o.Danger,
+  t.Outlined
+), d = n(
+  o.Secondary,
+  t.Ghost
+), h = n(
+  o.Tertiary,
+  t.Ghost
+), G = n(
+  o.Success,
+  t.Ghost
+), S = p(
+  t.Ghost,
+  o.Primary
+);
+export {
+  y as DialDangerIconButton,
+  S as DialGhostIconButton,
+  m as DialNeutralIconButton,
+  I as DialPrimaryIconButton,
+  d as DialSecondaryIconButton,
+  G as DialSuccessIconButton,
+  h as DialTertiaryIconButton
+};

package/dist/components/InfoButton/InfoButton.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconInfoCircle as e } from "@tabler/icons-react";
+import { DialIconButton as m } from "../IconButton/IconButton.js";
+import { DialTooltip as l } from "../Tooltip/Tooltip.js";
+import { infoButtonClassName as n } from "./constants.js";
+import { DIAL_ICON_SIZE as f } from "../../constants/icon.js";
+const C = ({
+  caption: o,
+  onClick: i
+}) => {
+  if (!o) return null;
+  const t = /* @__PURE__ */ r(
+    m,
+    {
+      "aria-label": o,
+      className: n,
+      icon: /* @__PURE__ */ r(e, { size: f.SM }),
+      onClick: i
+    }
+  );
+  return o ? /* @__PURE__ */ r(
+    l,
+    {
+      tooltip: o,
+      triggerClassName: "flex justify-center items-center",
+      children: t
+    }
+  ) : t;
+};
+export {
+  C as DialInfoButton
+};

package/dist/components/InfoButton/constants.js

@@ -0,0 +1,4 @@
+const e = "w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active";
+export {
+  e as infoButtonClassName
+};

package/dist/components/Input/Button/InputButton.js

@@ -0,0 +1,37 @@
+import { jsx as o } from "react/jsx-runtime";
+import a from "classnames";
+import { DialIconButton as l } from "../../IconButton/IconButton.js";
+import { ElementSize as t } from "../../../types/size.js";
+import { inputButtonClassName as i } from "./constants.js";
+const f = ({
+  icon: m,
+  onClick: p,
+  disabled: n,
+  size: r = t.Standard,
+  className: e
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: a(
+      "border-l border-tertiary",
+      r === t.Standard ? "h-[40px] w-[44px]" : "h-[24px] w-[32px]"
+    ),
+    children: /* @__PURE__ */ o(
+      l,
+      {
+        className: a(
+          i,
+          r === t.Small && "p-1",
+          e
+        ),
+        icon: m,
+        onClick: p,
+        disabled: n,
+        size: r
+      }
+    )
+  }
+);
+export {
+  f as DialInputButton
+};

package/dist/components/Input/Button/constants.js

@@ -0,0 +1,4 @@
+const e = "bg-layer-4 flex items-center justify-center enabled:text-secondary enabled:hover:text-accent-primary enabled:active:bg-controls-accent-primary-alpha-active enabled:hover:bg-accent-primary-alpha enabled:active:text-accent-primary";
+export {
+  e as inputButtonClassName
+};

package/dist/components/Input/Input.js

@@ -0,0 +1,120 @@
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { useRef as F, useEffect as K } from "react";
+import { useMergeRefs as V } from "@floating-ui/react";
+import { DialErrorText as M, DialCaptionText as S } from "../CaptionText/CaptionText.js";
+import { DialIcon as g } from "../Icon/Icon.js";
+import { DialLabel as W } from "../Label/Label.js";
+import { DialTooltip as _ } from "../Tooltip/Tooltip.js";
+import { mergeClasses as w } from "../../utils/merge-classes.js";
+import { DialInputButton as $ } from "./Button/InputButton.js";
+import { handleKeyDown as k } from "./utils.js";
+const X = ({
+  labelProps: c,
+  error: r,
+  caption: n,
+  id: u,
+  containerClassName: f,
+  ...p
+}) => /* @__PURE__ */ v("div", { className: w("flex flex-col gap-y-3", f), children: [
+  c && /* @__PURE__ */ e(W, { ...c, htmlFor: u }),
+  /* @__PURE__ */ e(x, { id: u, ...p }),
+  /* @__PURE__ */ e(M, { text: r }),
+  !r && /* @__PURE__ */ e(S, { text: n })
+] }), x = ({
+  invalid: c,
+  disabled: r,
+  prefix: n,
+  className: u,
+  postfix: f,
+  iconBefore: p,
+  iconAfter: C,
+  wrapperClassName: I,
+  type: a,
+  inputRef: E,
+  value: h,
+  tooltipText: T,
+  min: i,
+  onChange: b,
+  max: s,
+  inputButtonProps: m,
+  ...j
+}) => {
+  const N = F(null), L = V([E, N]), d = a === "number" || i !== void 0 || s !== void 0;
+  K(() => {
+    const o = N.current;
+    if (!o || !d || r) return;
+    const t = (l) => {
+      l.preventDefault();
+    };
+    return o.addEventListener("wheel", t, { passive: !1 }), () => {
+      o.removeEventListener("wheel", t);
+    };
+  }, [r, d, a]);
+  const R = (o) => {
+    k(o, a, i, s);
+  }, y = (o) => {
+    const t = o.currentTarget.value;
+    if (d && t !== "") {
+      const l = parseFloat(t);
+      if (isNaN(l) && t !== "-" && t !== "." || !isNaN(l) && (i !== void 0 && l < +i || s !== void 0 && l > +s))
+        return;
+    }
+    b?.(t || void 0);
+  }, D = () => /* @__PURE__ */ v(
+    "div",
+    {
+      className: w(
+        "dial-input flex flex-row items-center gap-x-2 justify-between py-2",
+        c && "dial-input-error",
+        r && "dial-input-disable",
+        !n && "pl-3",
+        !m && "pr-3",
+        I
+      ),
+      "aria-label": "input-container",
+      children: [
+        n && /* @__PURE__ */ e("div", { className: "border-r border-tertiary", children: /* @__PURE__ */ e(
+          x,
+          {
+            wrapperClassName: "!rounded-r-none",
+            className: "truncate",
+            value: n,
+            disabled: !0,
+            id: `${n}_textBefore`
+          }
+        ) }),
+        /* @__PURE__ */ e(g, { icon: p }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: L,
+            type: a,
+            autoComplete: a === "password" ? "new-password" : "off",
+            value: h ?? "",
+            className: w(
+              "border-0 bg-transparent w-full truncate",
+              r && "cursor-not-allowed",
+              u
+            ),
+            onChange: y,
+            onKeyDown: R,
+            min: i,
+            disabled: r,
+            max: s,
+            ...j
+          }
+        ),
+        f && /* @__PURE__ */ v("p", { className: "text-secondary dial-small-text", children: [
+          " ",
+          f
+        ] }),
+        /* @__PURE__ */ e(g, { icon: C }),
+        m && /* @__PURE__ */ e($, { ...m, disabled: r })
+      ]
+    }
+  );
+  return r && a !== "password" ? /* @__PURE__ */ e(_, { tooltip: T || h, children: D() }) : D();
+};
+export {
+  X as DialInput
+};

package/dist/components/Input/utils.js

@@ -0,0 +1,37 @@
+const s = [
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Backspace",
+  "Delete",
+  "Tab",
+  "Enter",
+  "Escape",
+  "Home",
+  "End",
+  "Insert"
+], l = (r, u, e, t) => {
+  if ((u === "number" || e !== void 0 || t !== void 0) && !s.includes(r.key) && !(r.ctrlKey || r.metaKey) && !(r.key === "-" && (r.currentTarget.selectionStart ?? 0) === 0 && !r.currentTarget.value.includes("-")) && !(r.key === "." && u === "number" && !r.currentTarget.value.includes("."))) {
+    if (!/^[0-9]$/.test(r.key)) {
+      r.preventDefault();
+      return;
+    }
+    if (e !== void 0 || t !== void 0) {
+      const i = r.currentTarget.value, c = r.currentTarget.selectionStart || 0, o = i.slice(0, c) + r.key + i.slice(c), n = parseFloat(o);
+      if (!isNaN(n)) {
+        if (e !== void 0 && n < +e) {
+          r.preventDefault();
+          return;
+        }
+        if (t !== void 0 && n > +t) {
+          r.preventDefault();
+          return;
+        }
+      }
+    }
+  }
+};
+export {
+  l as handleKeyDown
+};

package/dist/components/InputPopup/InputPopup.js

@@ -0,0 +1,174 @@
+import { jsxs as e, Fragment as m, jsx as i } from "react/jsx-runtime";
+import { createPortal as A } from "react-dom";
+import c from "classnames";
+import { useCallback as M } from "react";
+import { DialTooltip as P } from "../Tooltip/Tooltip.js";
+import { DialErrorText as N } from "../CaptionText/CaptionText.js";
+import { DialAutocompleteInputValue as _ } from "../AutocompleteInput/AutocompleteInputValue.js";
+import u from "../../assets/icons/open-popup.svg.js";
+import { DialIcon as r } from "../Icon/Icon.js";
+import { BASE_ICON_SIZE as a } from "../../constants/icon.js";
+const U = ({
+  children: S,
+  open: k,
+  disabled: l = !1,
+  selectedValue: t,
+  valueClassName: d,
+  inputClassName: f,
+  onOpen: h,
+  elementId: x,
+  errorText: s,
+  invalid: g,
+  emptyValueText: w,
+  placeholder: o,
+  editable: I = !1,
+  onValueChange: y,
+  collapseTagOverflow: j = !1,
+  iconBefore: n
+}) => {
+  const b = Array.isArray(t) && t.length > 0, C = typeof t == "string" && !!t.trim(), p = b || C ? t : o ? void 0 : w, v = l ? void 0 : h, D = M(
+    (E) => {
+      y?.(E.target.value);
+    },
+    [y]
+  );
+  return /* @__PURE__ */ e(m, { children: [
+    b ? /* @__PURE__ */ i("div", { className: "w-full", onClick: v, children: /* @__PURE__ */ e(
+      "div",
+      {
+        className: c(
+          "dial-input px-3 py-2 flex flex-row items-center gap-x-2 w-full justify-between cursor-pointer",
+          l && "dial-input-disable"
+        ),
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex flex-row items-center gap-x-2 flex-1 min-w-0", children: [
+            n && /* @__PURE__ */ i(r, { icon: n }),
+            /* @__PURE__ */ i(
+              _,
+              {
+                placeholder: o,
+                selectedItems: p,
+                collapseTagOverflow: j
+              }
+            )
+          ] }),
+          !l && /* @__PURE__ */ i("div", { className: "ml-1", children: /* @__PURE__ */ i(
+            r,
+            {
+              icon: /* @__PURE__ */ i(
+                u,
+                {
+                  role: "img",
+                  width: a,
+                  height: a
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ) }) : I ? /* @__PURE__ */ e(m, { children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: c(
+            "dial-input px-3 py-2 dial-input-field flex flex-row items-center gap-x-2 w-full justify-between",
+            f,
+            l && "dial-input-disable",
+            (s || g) && "dial-input-error"
+          ),
+          children: [
+            /* @__PURE__ */ e("div", { className: "flex flex-row items-center gap-x-2 flex-1 min-w-0", children: [
+              n && /* @__PURE__ */ i(r, { icon: n }),
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  type: "text",
+                  className: c(
+                    "flex-1 min-w-0 bg-transparent outline-none border-none p-0 dial-small-text text-primary placeholder:text-secondary",
+                    d
+                  ),
+                  value: typeof t == "string" ? t : "",
+                  placeholder: o || w,
+                  onChange: D,
+                  disabled: l,
+                  id: x,
+                  "aria-label": "input-popup-field"
+                }
+              )
+            ] }),
+            !l && /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                className: "shrink-0 cursor-pointer bg-transparent border-none p-0 ml-1",
+                onClick: h,
+                "aria-label": "open-popup",
+                children: /* @__PURE__ */ i(
+                  r,
+                  {
+                    icon: /* @__PURE__ */ i(
+                      u,
+                      {
+                        role: "img",
+                        width: a,
+                        height: a
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ i(N, { text: s })
+    ] }) : /* @__PURE__ */ e(m, { children: [
+      /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          className: "w-full",
+          onClick: v,
+          "aria-label": "open-popup",
+          id: x,
+          children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: c(
+                "dial-input px-3 py-2 dial-input-field flex flex-row items-center gap-x-2 w-full justify-between cursor-pointer",
+                f,
+                l && "dial-input-disable",
+                (s || g) && "dial-input-error"
+              ),
+              children: [
+                /* @__PURE__ */ e("div", { className: "flex flex-row items-center gap-x-2 flex-1 min-w-0", children: [
+                  n && /* @__PURE__ */ i(r, { icon: n }),
+                  /* @__PURE__ */ i(P, { tooltip: p == null ? void 0 : String(p), children: p || !o ? /* @__PURE__ */ i("span", { className: d, children: p }) : /* @__PURE__ */ i("span", { className: "text-secondary", children: o }) })
+                ] }),
+                !l && /* @__PURE__ */ i("div", { className: "shrink-0", children: /* @__PURE__ */ i(
+                  r,
+                  {
+                    icon: /* @__PURE__ */ i(
+                      u,
+                      {
+                        role: "img",
+                        width: a,
+                        height: a
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ i(N, { text: s })
+    ] }),
+    k && A(S, document.body)
+  ] });
+};
+export {
+  U as DialInputPopup
+};

package/dist/components/JsonEditor/JsonEditor.js

@@ -0,0 +1,64 @@
+import { jsx as l } from "react/jsx-runtime";
+import { EDITOR_THEMES_CONFIG as u } from "../../constants/editor.js";
+import { Editor as c } from "@monaco-editor/react";
+const p = ({
+  value: o,
+  onChange: a,
+  onValidateJSON: r,
+  options: i,
+  currentTheme: e,
+  themesConfig: s = u
+}) => {
+  function n(t) {
+    t?.editor?.defineTheme(
+      e,
+      s[e]
+    ), t.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: !0,
+      enableSchemaRequest: !1,
+      schemas: [
+        {
+          uri: "http://custom-schema/object-required.json",
+          fileMatch: ["*"],
+          schema: {
+            type: "object",
+            description: "Top-level value must be an object",
+            additionalProperties: !0
+          }
+        }
+      ]
+    });
+  }
+  return /* @__PURE__ */ l(
+    c,
+    {
+      beforeMount: n,
+      height: "100%",
+      defaultLanguage: "json",
+      value: o,
+      onChange: a,
+      theme: e,
+      onValidate: r,
+      options: {
+        minimap: { enabled: !1 },
+        formatOnType: !0,
+        formatOnPaste: !0,
+        selectOnLineNumbers: !1,
+        automaticLayout: !0,
+        scrollBeyondLastLine: !1,
+        wordWrap: "on",
+        smoothScrolling: !0,
+        overviewRulerLanes: 0,
+        scrollbar: {
+          horizontal: "hidden",
+          verticalScrollbarSize: 4,
+          verticalSliderSize: 4
+        },
+        ...i ?? {}
+      }
+    }
+  );
+};
+export {
+  p as DialJsonEditor
+};

package/dist/components/JsonEditor/lazy.js

@@ -0,0 +1,4 @@
+const o = () => import("./JsonEditor.js");
+export {
+  o as LazyDialJsonEditor
+};

package/dist/components/Label/Label.js

@@ -0,0 +1,27 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { mergeClasses as m } from "../../utils/merge-classes.js";
+import { DialInfoButton as o } from "../InfoButton/InfoButton.js";
+const f = ({
+  label: e,
+  required: r,
+  className: s,
+  caption: n,
+  ...a
+}) => e ? /* @__PURE__ */ i(
+  "label",
+  {
+    ...a,
+    className: m(
+      "dial-tiny-text text-secondary flex items-center gap-1",
+      s
+    ),
+    children: [
+      typeof e == "string" ? /* @__PURE__ */ t("span", { className: "min-h-4", children: e }) : e,
+      r && /* @__PURE__ */ t("span", { className: "text-accent-primary", children: "*" }),
+      /* @__PURE__ */ t(o, { caption: n })
+    ]
+  }
+) : null;
+export {
+  f as DialLabel
+};

package/dist/components/LabelledText/LabelledText.js

@@ -0,0 +1,37 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { DialTooltip as o } from "../Tooltip/Tooltip.js";
+import { mergeClasses as x } from "../../utils/merge-classes.js";
+const d = ({
+  label: l,
+  text: r,
+  tooltip: m,
+  children: e,
+  postfix: a,
+  className: s
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: x(
+      "flex flex-col",
+      e ? "" : "max-w-[200px]",
+      s
+    ),
+    children: [
+      l && /* @__PURE__ */ i("label", { className: "dial-tiny-text mb-2 text-secondary", children: l }),
+      e || /* @__PURE__ */ t("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ i(
+          o,
+          {
+            triggerClassName: "text-primary flex-1 min-w-0",
+            tooltip: m || r,
+            children: r
+          }
+        ),
+        a || null
+      ] })
+    ]
+  }
+);
+export {
+  d as DialLabelledText
+};