@epam/ai-dial-ui-kit 0.16.0-dev.45 → 0.16.0-dev.46

package/dist/components/Grid/Grid.js

@@ -1,333 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { themeBalham as Ne, colorSchemeLight as ge } from "../../node_modules/ag-grid-community/dist/package/main.esm.js";
-import { AgGridReact as be } from "../../node_modules/ag-grid-react/dist/package/index.esm.js";
-import Q from "classnames";
-import { useState as ye, useId as Ee, useRef as Y, useMemo as h, useCallback as l, useEffect as E } from "react";
-import { DialDropdown as R } from "../Dropdown/Dropdown.js";
-import { DialEllipsisTooltip as De } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { RADIO_BUTTON_COL_DEF as Ae, CHECKBOX_COL_DEF as Te } from "./renderers/constants.js";
-import { DialNoDataContent as Ge } from "../NoDataContent/NoDataContent.js";
-import { DialRadioButton as ve } from "../RadioButton/RadioButton.js";
-import { GridSelectionMode as z } from "../../models/selection-mode.js";
-import { DropdownTrigger as w } from "../../types/dropdown.js";
-import { IconZoomCancel as Oe } from "@tabler/icons-react";
-import { GRID_THEME_COLORS as x, SelectionEventSourceType as p, checkboxClass as I, ROW_HEIGHT as ee, gridBaseClassName as ze } from "./constants.js";
-import { ariaDescription as re } from "../Checkbox/constants.js";
-import { useIsMobileScreen as xe } from "../../hooks/use-is-mobile-screen.js";
-import { useIsTabletScreen as _e } from "../../hooks/use-is-tablet-screen.js";
-import { debounceFn as ke } from "../../utils/debounce.js";
-import { registerAgGridModulesOnce as He } from "../../utils/grid-registration.js";
-import { baseColumnComparator as Le, omitUndefined as Fe } from "../../utils/grid-comparators.js";
-const or = ({
-  columnDefs: D,
-  rowData: f,
-  additionalGridOptions: _,
-  getContextMenuItems: C,
-  className: te,
-  ariaLabel: oe = "Data grid",
-  wrapCustomCellRenderers: m = !0,
-  disabledRowIds: c,
-  selectedRowIds: n,
-  onSelectionChange: k,
-  onGridApiChange: ne,
-  getRowId: i = (t) => String(t.id ?? JSON.stringify(t)),
-  alternateOddRowColors: H = !1,
-  filterPlaceholder: L = "Enter value",
-  emptyStateIcon: F,
-  emptyStateTitle: W = "No results found",
-  emptyStateDescription: B = "Sorry, we couldn't find any results for your search.",
-  loading: P = !1,
-  wrapperBorder: $ = !0,
-  withoutHeaderBorders: ie = !1,
-  allowDisabledContextMenu: N = !1,
-  selectionMode: d
-}) => {
-  He();
-  const [t, se] = ye(), ae = Ee(), g = xe(), b = _e(), A = Y(/* @__PURE__ */ new Set()), U = Y(
-    void 0
-  ), le = h(
-    () => ({
-      ...x,
-      oddRowBackgroundColor: H ? x.oddRowBackgroundColor : x.backgroundColor,
-      wrapperBorder: $
-    }),
-    [H, $]
-  ), ce = l((e) => {
-    e.api.sizeColumnsToFit();
-  }, []), T = l(
-    (e) => {
-      if (e.data) {
-        const r = i(e.data), o = c?.has(r) ?? !1, u = o && !N, a = e.value == null ? "" : String(e.value), v = C?.(e.data) ?? [];
-        return /* @__PURE__ */ s(
-          R,
-          {
-            trigger: [w.ContextMenu],
-            items: v,
-            anchorToMouse: !0,
-            matchReferenceWidth: !0,
-            className: "w-full",
-            disabled: u,
-            children: /* @__PURE__ */ s("span", { className: "block min-w-0 h-full max-w-full", children: /* @__PURE__ */ s(
-              De,
-              {
-                text: a,
-                className: "max-w-full h-full",
-                hideTooltip: o
-              }
-            ) })
-          }
-        );
-      }
-    },
-    [C, c, i, N]
-  ), y = l(
-    (e) => e === p.API || e === p.ROW_DATA_CHANGED,
-    []
-  ), j = l(
-    (e) => {
-      if (!t)
-        return;
-      const o = (e.selectedNodes || []).map((a) => a.data), u = new Set(o.map(i));
-      A.current = u, U.current = e.source, y(e.source) || k?.(u, o);
-    },
-    [t, i, y, k]
-  ), ue = h(() => ke(
-    (e) => j?.(e),
-    100
-  ), [j]), q = l(
-    (e) => {
-      if (!e.data) return null;
-      const r = i(e.data), o = e.node.isSelected(), u = c?.has(r), a = `row-select-${r}`;
-      return /* @__PURE__ */ s("div", { className: "size-6 flex items-center justify-center", children: /* @__PURE__ */ s(
-        ve,
-        {
-          className: "size-[18px]",
-          inputId: a,
-          checked: o,
-          disabled: u,
-          name: "gridradiobutton",
-          value: "selected",
-          onChange: () => {
-            u || (e.node.setSelected(
-              !0,
-              !0,
-              p.CHECKBOX_SELECTED
-            ), e.api.refreshCells({ columns: [e.column?.getColId()] }));
-          }
-        }
-      ) });
-    },
-    [i, c]
-  ), S = l(() => {
-    const e = "dial-row-select", r = "dial-row-select-visible";
-    return g || b || n && n.size > 0 ? `${e} ${r}` : !n || n.size === 0 ? e : `${e} ${r}`;
-  }, [g, b, n]), K = l(() => g || b ? S() : !n || n.size === 0 ? "dial-row-not-select-header" : S(), [S, g, b, n]), fe = h(() => {
-    if (d === z.SINGLE)
-      return {
-        ...Ae,
-        cellRenderer: q
-      };
-    if (d === z.MULTIPLE)
-      return {
-        ...Te,
-        headerClass: () => K(),
-        cellClass: (e) => {
-          const r = e.data ? i(e.data) : null;
-          let o = S();
-          return r && c?.has(r) && (o += " opacity-50 pointer-events-none"), o;
-        }
-      };
-  }, [
-    d,
-    q,
-    K,
-    i,
-    S,
-    c
-  ]), X = l(
-    (e) => {
-      const r = typeof m == "function" ? m(e) : !!m;
-      if (!e.cellRenderer)
-        return { ...e, cellRenderer: T };
-      if (!r)
-        return e;
-      const o = e.cellRenderer;
-      return { ...e, cellRenderer: (a) => {
-        const v = a.data ? C?.(a.data) ?? [] : [];
-        let O = null;
-        typeof o == "function" ? O = /* @__PURE__ */ s(o, { ...a }) : O = T(a);
-        const V = a.data ? i(a.data) : null, Z = V ? c?.has(V) : !1;
-        return /* @__PURE__ */ s(
-          R,
-          {
-            trigger: [w.ContextMenu],
-            items: v,
-            anchorToMouse: !0,
-            matchReferenceWidth: !0,
-            className: Q(
-              "size-full",
-              Z && "!cursor-not-allowed opacity-75"
-            ),
-            disabled: Z && !N,
-            children: /* @__PURE__ */ s("span", { className: "block min-w-0 max-w-full flex-1", children: O })
-          }
-        );
-      } };
-    },
-    [
-      c,
-      C,
-      i,
-      T,
-      m,
-      N
-    ]
-  ), J = h(
-    () => m ? (D ?? []).map(X) : D ?? [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      D,
-      m,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      m ? X : null
-    ]
-  ), { defaultColDef: M, ...me } = _ ?? {}, de = h(
-    () => ({
-      minWidth: 150,
-      resizable: !0,
-      sortable: !0,
-      floatingFilter: !0,
-      filter: "agTextColumnFilter",
-      filterParams: {
-        filterPlaceholder: L,
-        buttons: ["reset"]
-      },
-      comparator: Le,
-      ...Fe(M)
-    }),
-    [L, M]
-  ), he = (e) => {
-    const r = document.querySelector(I);
-    r && r.setAttribute("aria-description", re);
-    const o = J.map((u) => ({
-      ...u,
-      sort: void 0
-    }));
-    e.api.updateGridOptions({ columnDefs: o, rowData: f }), e.api.sizeColumnsToFit(), se(e.api), _?.onGridReady?.(e), ne?.(e.api);
-  };
-  E(() => {
-    t && f && t.setGridOption("rowData", f);
-  }, [t, f]);
-  const pe = l(
-    () => /* @__PURE__ */ s(
-      Ge,
-      {
-        title: W,
-        description: B,
-        containerClassName: "gap-3",
-        titleClassName: "mt-2 !text-lg",
-        icon: F || /* @__PURE__ */ s(
-          Oe,
-          {
-            size: 100,
-            stroke: 0.5,
-            className: "text-secondary"
-          }
-        )
-      }
-    ),
-    [W, B, F]
-  ), Se = h(() => {
-    if (d)
-      return {
-        mode: d === z.SINGLE ? "singleRow" : "multiRow",
-        isRowSelectable: (e) => {
-          const r = e.data ? i(e.data) : null;
-          return r ? !c?.has(r) : !0;
-        }
-      };
-  }, [c, i, d]);
-  E(() => {
-    t && f && A.current.size && A.current.forEach((e) => {
-      const r = t.getRowNode(e);
-      r && !r.isSelected() && r.setSelected(!0, !1, p.API);
-    });
-  }, [t, f]), E(() => {
-    t && n && (t.deselectAll("all", p.API), n.forEach((e) => {
-      const r = t.getRowNode(e);
-      r && !r.isSelected() && r.setSelected(!0, !1, p.API);
-    }));
-  }, [t, n]);
-  const Ce = l(
-    (e) => e.data ? i(e.data) : "",
-    [i]
-  ), G = l(() => {
-    document.querySelectorAll(`.ag-row ${I}`).forEach((e) => {
-      e.setAttribute("aria-description", re);
-    });
-  }, []);
-  return E(() => {
-    const e = y(
-      U.current
-    );
-    if (t && n?.size && e) {
-      const r = Array.from(n)[0];
-      if (r) {
-        const o = t.getRowNode(r);
-        o && t.ensureNodeVisible(o);
-      }
-    }
-  }, [t, y, n]), /* @__PURE__ */ s(
-    "div",
-    {
-      className: Q(
-        ze,
-        te,
-        d && "with-selection-column",
-        ie && "dial-without-header-borders"
-      ),
-      "aria-label": oe,
-      role: "region",
-      "aria-busy": P,
-      children: /* @__PURE__ */ s(
-        "div",
-        {
-          className: "h-full overflow-x-auto",
-          role: "table",
-          "aria-describedby": ae,
-          children: /* @__PURE__ */ s(
-            be,
-            {
-              rowModelType: "clientSide",
-              headerHeight: ee,
-              rowHeight: ee,
-              cellSelection: !1,
-              theme: Ne.withPart(ge).withParams({ ...le }),
-              autoSizeStrategy: { type: "fitGridWidth" },
-              columnDefs: J,
-              defaultColDef: de,
-              selectionColumnDef: fe,
-              onGridSizeChanged: ce,
-              onGridReady: he,
-              loading: P,
-              suppressCellFocus: !0,
-              suppressDragLeaveHidesColumns: !0,
-              noRowsOverlayComponent: pe,
-              rowData: f,
-              rowSelection: Se,
-              onSelectionChanged: ue,
-              getRowId: Ce,
-              onRowDataUpdated: G,
-              onBodyScroll: G,
-              onFirstDataRendered: G,
-              ...me
-            }
-          )
-        }
-      )
-    }
-  );
-};
-export {
-  or as DialGrid
-};

package/dist/components/Grid/constants.js

@@ -1,33 +0,0 @@
-const o = "h-full w-full", e = ".ag-checkbox-input", t = {
-  accentColor: "var(--bg-control-accent, var(--bg-accent-primary, #3664E2))",
-  backgroundColor: "var(--bg-layer-raised, var(--bg-layer-3, #1D2439))",
-  oddRowBackgroundColor: "var(--bg-layer-sunken, var(--bg-layer-2, #161B2D))",
-  // The row tint has to stay translucent: the row it paints carries body text
-  // and a checkbox filled with `accentColor`, so an opaque accent hides both.
-  // `--bg-accent-primary-alpha` is the tint every other 1.0 control hovers
-  // with; the controls' `*-alpha-active` token this used to read is the
-  // pressed-state fill, which themes do define opaque.
-  selectedRowBackgroundColor: "var(--bg-accent-primary-alpha, #7DA4FF26)",
-  borderColor: "var(--bg-layer-4, #242C42)",
-  rowBorder: "1px solid var(--stroke-tertiary, var(--stroke-primary, #696E7C))",
-  rowHoverColor: "var(--bg-accent-primary-alpha, #7DA4FF26)",
-  borderRadius: 3,
-  browserColorScheme: "dark",
-  chromeBackgroundColor: "var(--bg-layer-1, #0C101D)",
-  foregroundColor: "var(--text-primary, #EEF1F7)",
-  headerFontSize: 14,
-  headerFontWeight: 600,
-  headerTextColor: "var(--text-secondary, #9FA6BD)",
-  spacing: 4,
-  wrapperBorderRadius: 3,
-  fontSize: 14,
-  fontFamily: "var(--theme-font, var(--font-inter))"
-}, c = 40;
-var a = /* @__PURE__ */ ((r) => (r.API = "api", r.ROW_DATA_CHANGED = "rowDataChanged", r.CHECKBOX_SELECTED = "checkboxSelected", r))(a || {});
-export {
-  t as GRID_THEME_COLORS,
-  c as ROW_HEIGHT,
-  a as SelectionEventSourceType,
-  e as checkboxClass,
-  o as gridBaseClassName
-};

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

@@ -1,27 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import f from "classnames";
-import { useMemo as c } from "react";
-import { DialEllipsisTooltip as T } from "../../EllipsisTooltip/EllipsisTooltip.js";
-import { DEFAULT_LOCALE as d, DEFAULT_DATE_FORMAT_OPTIONS as p, dateCellBaseClassName as D } from "./constants.js";
-import { convertToDate as A } from "../../../utils/grid-date.js";
-const _ = ({
-  value: s,
-  locale: r = d,
-  options: o = p,
-  emptyPlaceholder: m,
-  className: n,
-  hideTooltip: l = !1
-}) => {
-  const t = A(s), a = c(() => t ? new Intl.DateTimeFormat(r, o).format(t) : m, [t, m, r, o]), i = t ? t.toISOString() : void 0;
-  return /* @__PURE__ */ e(
-    T,
-    {
-      text: i ? /* @__PURE__ */ e("time", { dateTime: i, children: a }) : /* @__PURE__ */ e("span", { children: a }),
-      className: f(D, n),
-      hideTooltip: l
-    }
-  );
-};
-export {
-  _ as DialDateCellRenderer
-};

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

@@ -1,25 +0,0 @@
-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/InputPopup/InputPopup.js

@@ -1,174 +0,0 @@
-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 d 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: u,
-  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(
-                d,
-                {
-                  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-hidden border-none p-0 dial-small-text text-primary placeholder:text-secondary",
-                    u
-                  ),
-                  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(
-                      d,
-                      {
-                        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: u, children: p }) : /* @__PURE__ */ i("span", { className: "text-secondary", children: o }) })
-                ] }),
-                !l && /* @__PURE__ */ i("div", { className: "shrink-0", children: /* @__PURE__ */ i(
-                  r,
-                  {
-                    icon: /* @__PURE__ */ i(
-                      d,
-                      {
-                        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

@@ -1,65 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { EDITOR_THEMES_CONFIG as c } from "../../constants/editor.js";
-import * as m from "@monaco-editor/react";
-const p = ({
-  value: o,
-  onChange: a,
-  onValidateJSON: r,
-  options: i,
-  currentTheme: e,
-  themesConfig: s = c
-}) => {
-  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
-          }
-        }
-      ]
-    });
-  }
-  const { Editor: l } = m;
-  return /* @__PURE__ */ u(
-    l,
-    {
-      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

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