@devtron-labs/devtron-fe-common-lib 1.22.0-beta-9 → 1.22.0-beta-11

package/dist/@common-rjsf-C-XA6_6d.js

@@ -0,0 +1,592 @@
+import { j as n, be as $, bf as W, bg as J, bh as K, bi as B, bj as V, aP as v, bk as q, bl as Y, aR as G, aQ as z, bm as Q, bn as X, b as Z, bo as ee } from "./@vendor-CIlxgD4r.js";
+import te, { useState as ne, useEffect as se, forwardRef as ae, useMemo as E } from "react";
+import { T as O, j as w, c as T, b as N, S as re, i as oe, g as le, a as ie, d as R, e as ce } from "./@code-editor-3oNEo5OH.js";
+import { ReactComponent as de } from "./assets/ic-add.cfaa779b.svg";
+import { ReactComponent as ue } from "./assets/ic-warning.ecf7ff97.svg";
+import { ReactComponent as me } from "./assets/ic-cross.01e03666.svg";
+import './assets/@common-rjsf.css';const F = {
+  SELECT: "Please select an option",
+  INPUT: "Please enter an input",
+  OBJECT_KEY: "Please enter a value for the key"
+}, pe = "Key not available", Me = {
+  "ui:submitButtonOptions": {
+    norender: !0
+  }
+}, L = "rjsf-form-select-portal-target", fe = ({
+  children: e,
+  disabled: t,
+  hasToolbar: a,
+  hasRemove: s,
+  onRemoveItem: r,
+  readonly: i,
+  registry: o,
+  uiSchema: l
+}) => {
+  const { RemoveButton: c } = o.templates.ButtonTemplates;
+  return /* @__PURE__ */ n.jsxs("div", { className: "dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center", children: [
+    e,
+    /* @__PURE__ */ n.jsx("div", { className: "dc__position-abs remove-btn__container", style: { right: "-28px", top: "9px" }, children: a && s && /* @__PURE__ */ n.jsx(
+      c,
+      {
+        disabled: t || i,
+        onClick: r,
+        uiSchema: l,
+        registry: o
+      }
+    ) })
+  ] });
+}, S = ({
+  showLabel: e,
+  label: t,
+  required: a,
+  children: s,
+  id: r,
+  rawDescription: i,
+  shouldAlignCenter: o = !0
+}) => /* @__PURE__ */ n.jsxs(
+  "div",
+  {
+    className: e ? `display-grid dc__gap-12 rjsf-form-template__field ${o ? "" : "rjsf-form-template__field--align-top"}` : "",
+    children: [
+      e && /* @__PURE__ */ n.jsxs("label", { className: "cn-7 fs-13 lh-20 fw-4 flexbox mb-0", htmlFor: r, children: [
+        /* @__PURE__ */ n.jsx(O, { alwaysShowTippyOnHover: !!i, content: i, children: /* @__PURE__ */ n.jsx("span", { className: `dc__ellipsis-right ${i ? "dc__underline-dotted" : ""}`, children: t || pe }) }),
+        a && /* @__PURE__ */ n.jsx("span", { className: "cr-5", children: " *" })
+      ] }),
+      s
+    ]
+  }
+), A = ({ label: e, canAdd: t, onAddClick: a, disabled: s, readonly: r, uiSchema: i, registry: o }) => {
+  const {
+    ButtonTemplates: { AddButton: l }
+  } = o.templates;
+  return t && /* @__PURE__ */ n.jsx(
+    l,
+    {
+      label: e,
+      onClick: a,
+      disabled: s || r,
+      uiSchema: i,
+      registry: o
+    }
+  );
+}, he = ({
+  canAdd: e,
+  className: t,
+  disabled: a,
+  fieldPathId: s,
+  uiSchema: r,
+  items: i,
+  onAddClick: o,
+  readonly: l,
+  registry: c,
+  required: d,
+  title: p
+}) => {
+  const u = $(r).title || p;
+  return /* @__PURE__ */ n.jsx("fieldset", { className: t, id: s.$id, children: i.length ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    i,
+    /* @__PURE__ */ n.jsx(
+      A,
+      {
+        label: u,
+        canAdd: e,
+        onAddClick: o,
+        disabled: a,
+        readonly: l,
+        uiSchema: r,
+        registry: c
+      }
+    )
+  ] }) : /* @__PURE__ */ n.jsx(S, { label: u, required: d, showLabel: !0, id: s.$id, children: /* @__PURE__ */ n.jsx(
+    A,
+    {
+      label: u,
+      canAdd: e,
+      onAddClick: o,
+      disabled: a,
+      readonly: l,
+      uiSchema: r,
+      registry: c
+    }
+  ) }) });
+}, {
+  templates: { BaseInputTemplate: _e }
+} = W(), xe = ({ placeholder: e, ...t }) => {
+  const { schema: a } = t;
+  return /* @__PURE__ */ n.jsx(
+    _e,
+    {
+      placeholder: a.placeholder || e || F.INPUT,
+      ...t,
+      className: "form__input cn-9 fs-13 lh-20 fw-4"
+    }
+  );
+}, U = ({
+  label: e,
+  icon: t,
+  iconType: a,
+  registry: s,
+  uiSchema: r,
+  ...i
+}) => {
+  const o = `Add ${e}`;
+  return /* @__PURE__ */ n.jsx("div", { className: "flexbox flex-justify-start", children: /* @__PURE__ */ n.jsxs(
+    "button",
+    {
+      ...i,
+      type: "button",
+      className: "dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor dc__mxw-250",
+      title: "Add",
+      children: [
+        /* @__PURE__ */ n.jsx(de, { className: "icon-dim-16 fcb-5" }),
+        /* @__PURE__ */ n.jsx(O, { placement: "right", content: o, children: /* @__PURE__ */ n.jsx("span", { className: "cb-5 fs-13 lh-34 dc__truncate", children: o }) })
+      ]
+    }
+  ) });
+}, je = ({ icon: e, iconType: t, registry: a, uiSchema: s, ...r }) => /* @__PURE__ */ n.jsx("button", { ...r, type: "button", className: "dc__outline-none-imp p-0 dc__transparent flex cursor", title: "Remove", children: /* @__PURE__ */ n.jsx(me, { className: "icon-dim-16 fcn-6" }) }), be = ({ uiSchema: e }) => {
+  const { submitText: t, norender: a, props: s = {} } = J(e);
+  return a ? null : /* @__PURE__ */ n.jsx("div", { className: "flexbox flex-justify-end", children: /* @__PURE__ */ n.jsx("button", { type: "submit", ...s, className: `cta ${s.className || ""}`, children: t }) });
+}, P = ({
+  id: e,
+  title: t,
+  required: a,
+  description: s
+}) => /* @__PURE__ */ n.jsxs("legend", { className: "fs-13 fw-6 cn-9 lh-20 dc__no-border pb-9 mb-0", id: e, children: [
+  /* @__PURE__ */ n.jsx(O, { alwaysShowTippyOnHover: !!s, content: s, children: /* @__PURE__ */ n.jsx("span", { className: `${s ? "dc__underline-dotted" : ""}`, children: t }) }),
+  a && /* @__PURE__ */ n.jsx("span", { className: "cr-5", children: " *" })
+] }), ge = (e) => {
+  const {
+    id: t,
+    label: a,
+    children: s,
+    errors: r,
+    hidden: i,
+    required: o,
+    displayLabel: l,
+    registry: c,
+    uiSchema: d,
+    classNames: p,
+    schema: m,
+    rawDescription: u
+  } = e, f = $(d), h = K(
+    "WrapIfAdditionalTemplate",
+    c,
+    f
+  ), x = B in m, _ = (l || m.type === "boolean") && !x, j = m.type === "array";
+  return i ? /* @__PURE__ */ n.jsx("div", { className: "hidden", children: s }) : (
+    // NOTE: need to override the margins of default rjsf css
+    /* @__PURE__ */ n.jsxs("div", { className: `${p} mb-0`, children: [
+      j && /* @__PURE__ */ n.jsx(
+        P,
+        {
+          id: t,
+          title: a,
+          required: o,
+          registry: c,
+          uiSchema: d,
+          schema: m,
+          description: u
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        S,
+        {
+          label: a,
+          showLabel: _,
+          id: t,
+          required: o,
+          rawDescription: u,
+          children: /* @__PURE__ */ n.jsx(h, { ...e, children: s })
+        }
+      ),
+      r
+    ] })
+  );
+}, ye = ({ errors: e = [], fieldPathId: t }) => {
+  const a = V(t);
+  return e.length > 0 && /* @__PURE__ */ n.jsx("span", { className: "display-grid rjsf-form-template__field--error dc__gap-12", id: a, children: e.filter((s) => !!s).map((s, r) => /* @__PURE__ */ n.jsxs(te.Fragment, { children: [
+    /* @__PURE__ */ n.jsx("span", {}),
+    /* @__PURE__ */ n.jsxs("span", { className: "form__error", children: [
+      /* @__PURE__ */ n.jsx(ue, { className: "form__icon form__icon--error" }),
+      s
+    ] })
+  ] }, r)) });
+}, ve = (e, t) => {
+  switch (e) {
+    case Y.NewStringDefault:
+      return "";
+    default:
+      return q(e, t);
+  }
+}, We = (e) => {
+  try {
+    const t = new URL(e).origin === window.location.origin;
+    return {
+      href: e,
+      target: t ? "_self" : "_blank",
+      rel: t ? void 0 : "external noreferrer",
+      url: e
+    };
+  } catch {
+    return {
+      href: e,
+      target: "_blank",
+      url: `${e} (Invalid URL)`
+    };
+  }
+}, Je = (e) => {
+  const t = typeof e;
+  switch (t) {
+    case "boolean":
+    case "string":
+    case "number":
+      return t;
+    case "object":
+      return Array.isArray(e) ? "array" : e === null ? "null" : t;
+    default:
+      return "null";
+  }
+}, y = (e) => {
+  if (!e)
+    return "";
+  const t = e.trim(), s = (/^\/.+$/g.test(t) ? t : `/${t}`).replaceAll(/\./g, "/");
+  return /(\/(([^/~])|(~[01]))*)/g.test(s) ? s : "";
+}, I = {
+  value: !1,
+  path: ""
+}, Te = (e) => {
+  if (!e)
+    return null;
+  const t = structuredClone(e);
+  return typeof t == "string" ? {
+    value: !0,
+    path: y(t)
+  } : typeof t != "object" ? structuredClone(I) : Object.hasOwn(t, "condition") && "condition" in t && Object.hasOwn(t, "value") && "value" in t ? {
+    value: t.condition,
+    path: y(t.value)
+  } : Object.hasOwn(t, "value") && "value" in t && Object.hasOwn(t, "path") && "path" in t ? {
+    value: t.value,
+    path: y(t.path)
+  } : structuredClone(I);
+}, k = (e, t, a) => {
+  e && (e.type === "object" && e.properties && typeof e.properties == "object" && Object.entries(e.properties).forEach(([s, r]) => {
+    k(r, `${t}/${s}`, a);
+  }), (e.type === "boolean" || e.type === "string" || e.type === "number" || e.type === "integer") && (a[t] = y(e.updatePath ?? t)));
+}, Se = (e) => {
+  const t = {};
+  return k(e, "", t), t;
+}, H = (e, t, a) => {
+  if (t >= a.length)
+    return e;
+  const s = a[t];
+  if (t === a.length - 1) {
+    const r = structuredClone(e);
+    return delete r[s], r;
+  }
+  if (e[s] && (e[s] = H(e[s], t + 1, a)), Object.keys(e[s] ?? {}).length === 0) {
+    const r = structuredClone(e);
+    return delete r[s], r;
+  }
+  return e;
+}, we = (e, t) => {
+  if (!e || typeof e != "object" || Array.isArray(e))
+    throw new Error("Invalid object");
+  if (!t || !t.startsWith("/"))
+    throw new Error("Invalid path");
+  const a = t.split("/").slice(1);
+  return H(e, 0, a);
+}, D = ({
+  formState: e,
+  formData: t,
+  schemaPathToUpdatePathMap: a
+}) => {
+  let s = structuredClone(e);
+  return s && (Object.entries(a).forEach(([r, i]) => {
+    if (r === i || !i)
+      return;
+    const o = v({
+      json: t,
+      path: T(r),
+      resultType: "value",
+      wrap: !1
+    });
+    o === void 0 ? s = we(s, r) : s = w([N(r, o), s]);
+    const l = v({
+      json: e,
+      path: T(r),
+      resultType: "value",
+      wrap: !1
+    });
+    l !== void 0 && (s = w([N(i, l), s]));
+  }), t && s ? G(t, z(t, s), !1, !1).newDocument : s);
+}, Ne = ({ formData: e, schemaPathToUpdatePathMap: t }) => w([
+  ...Object.entries(t).map(([a, s]) => {
+    if (a === s || !s)
+      return {};
+    const r = v({
+      json: e,
+      path: T(s),
+      resultType: "value",
+      wrap: !1
+    });
+    return r === void 0 ? {} : N(a, r);
+  }),
+  structuredClone(e)
+]), Oe = ({
+  disabled: e,
+  formData: t,
+  fieldPathId: a,
+  onAddProperty: s,
+  properties: r,
+  readonly: i,
+  registry: o,
+  required: l,
+  schema: c,
+  title: d,
+  uiSchema: p
+}) => {
+  const m = !!c.additionalProperties, u = X(c, p, t) && /* @__PURE__ */ n.jsx(
+    U,
+    {
+      label: d,
+      className: "object-property-expand",
+      onClick: s,
+      disabled: e || i,
+      uiSchema: p,
+      registry: o
+    }
+  ), f = r.filter((h) => {
+    const x = c.properties?.[h.name]?.hidden;
+    if (!x)
+      return !0;
+    try {
+      const _ = Te(x);
+      if (!_.path)
+        throw new Error("Empty path property of hidden descriptor field");
+      const j = v({
+        path: T(_.path),
+        json: o.formContext,
+        resultType: "value",
+        wrap: !1
+      });
+      return !(j === void 0 || Z(_.value, j));
+    } catch {
+      return !0;
+    }
+  }).map((h) => h.content);
+  return m ? r.length ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx(
+      S,
+      {
+        label: d,
+        required: l,
+        showLabel: !0,
+        id: a.$id,
+        shouldAlignCenter: !1,
+        children: /* @__PURE__ */ n.jsx("div", { children: f })
+      }
+    ),
+    u
+  ] }) : /* @__PURE__ */ n.jsx(S, { label: d, required: l, showLabel: !0, id: a.$id, children: u }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    f,
+    u
+  ] });
+}, Fe = (e) => {
+  const { fieldPathId: t, registry: a, required: s, schema: r, title: i, uiSchema: o, description: l } = e, c = !!r.additionalProperties, d = i && !c;
+  return /* @__PURE__ */ n.jsxs("fieldset", { id: t.$id, children: [
+    d && /* @__PURE__ */ n.jsx(
+      P,
+      {
+        id: Q(t),
+        title: i,
+        required: s,
+        schema: r,
+        uiSchema: o,
+        registry: a,
+        description: l
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        className: `${r.properties && !c && t.$id !== "root" ? "dc__border-left pl-12" : ""} ${t.$id === "root" ? "dc__separated-flexbox dc__separated-flexbox--vertical" : "flexbox-col dc__gap-8"}`,
+        children: /* @__PURE__ */ n.jsx(Oe, { ...e })
+      }
+    )
+  ] });
+}, Pe = ({
+  id: e,
+  disabled: t,
+  label: a,
+  onKeyRename: s,
+  onRemoveProperty: r,
+  readonly: i,
+  schema: o,
+  children: l,
+  uiSchema: c,
+  registry: d
+}) => {
+  const { templates: p } = d, { RemoveButton: m } = p.ButtonTemplates, u = B in o;
+  return /* @__PURE__ */ n.jsx(n.Fragment, { children: u ? /* @__PURE__ */ n.jsxs("div", { className: "dc__position-rel rjsf-form-template__additional-fields display-grid dc__gap-8 flex-align-center", children: [
+    /* @__PURE__ */ n.jsx("div", { children: /* @__PURE__ */ n.jsx(
+      "input",
+      {
+        type: "text",
+        className: "form__input cn-9 fs-13 lh-20 fw-4",
+        id: `${e}-key`,
+        onBlur: (f) => s(f.target.value),
+        placeholder: F.OBJECT_KEY,
+        defaultValue: a
+      }
+    ) }),
+    /* @__PURE__ */ n.jsx("div", { children: l }),
+    /* @__PURE__ */ n.jsx("div", { className: "dc__position-abs remove-btn__container", style: { right: "-28px", top: "9px" }, children: /* @__PURE__ */ n.jsx(
+      m,
+      {
+        disabled: t || i,
+        onClick: r,
+        uiSchema: c,
+        registry: d
+      }
+    ) })
+  ] }) : l });
+}, Ce = ({
+  id: e,
+  onChange: t,
+  value: a,
+  disabled: s,
+  readonly: r,
+  autofocus: i
+}) => {
+  const o = oe(a) ? !1 : a, l = () => {
+    t(!o);
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: "flexbox dc__align-items-center dc__gap-8", children: [
+    /* @__PURE__ */ n.jsx(
+      re,
+      {
+        name: e,
+        ariaLabel: e,
+        onChange: l,
+        isChecked: o,
+        autoFocus: i,
+        isDisabled: s || r
+      }
+    ),
+    /* @__PURE__ */ n.jsx("span", { className: "dc__capitalize", children: o.toString() })
+  ] });
+}, Ee = (e) => {
+  const {
+    id: t,
+    multiple: a = !1,
+    options: s,
+    value: r,
+    disabled: i,
+    readonly: o,
+    autofocus: l = !1,
+    onChange: c,
+    onBlur: d,
+    onFocus: p,
+    placeholder: m,
+    schema: u
+  } = e, { enumOptions: f = [] } = s, h = a ? [] : null, x = (b) => {
+    c(a ? b.map((g) => g.value) : b.value);
+  }, [_, j] = ne();
+  se(() => {
+    j(le(8));
+  }, []);
+  const C = (b) => a ? f.filter((g) => b.some((M) => R(M, g.value))) : f.find((g) => R(b, g.value));
+  return /* @__PURE__ */ n.jsx(
+    ie,
+    {
+      inputId: `devtron-rjsf-select__${t}`,
+      name: t,
+      isMulti: a,
+      value: typeof r > "u" ? h : C(r),
+      autoFocus: l,
+      onChange: x,
+      options: f,
+      onBlur: () => d(t, r),
+      onFocus: () => p(t, r),
+      placeholder: u.placeholder || m || F.SELECT,
+      isDisabled: i || o,
+      menuPortalTarget: document.getElementById(L),
+      menuPosition: "fixed"
+    },
+    _
+  );
+}, Re = {
+  CheckboxWidget: Ce,
+  SelectWidget: Ee
+}, Ae = {
+  ArrayFieldItemTemplate: fe,
+  ArrayFieldTemplate: he,
+  BaseInputTemplate: xe,
+  ButtonTemplates: { AddButton: U, RemoveButton: je, SubmitButton: be },
+  FieldTemplate: ge,
+  FieldErrorTemplate: ye,
+  ObjectFieldTemplate: Fe,
+  TitleFieldTemplate: P,
+  WrapIfAdditionalTemplate: Pe
+}, Ie = ee, De = ce, Ke = ae((e, t) => {
+  const { schemaPathToUpdatePathMap: a, isUpdatePathKeywordPresent: s } = E(() => {
+    const l = Se(e.schema);
+    return {
+      schemaPathToUpdatePathMap: l,
+      isUpdatePathKeywordPresent: Object.entries(l).some(([c, d]) => c !== d)
+    };
+  }, [e.schema]), r = E(() => s ? Ne({ formData: e.formData ?? {}, schemaPathToUpdatePathMap: a }) : e.formData, [e.formData, a, s]), i = (l) => {
+    if (!e.onChange)
+      return;
+    const c = D({
+      formState: l.formData,
+      formData: e.formData,
+      schemaPathToUpdatePathMap: a
+    });
+    e.onChange({ ...l, formData: c });
+  }, o = (l, c) => {
+    if (!e.onSubmit)
+      return;
+    const d = D({
+      formState: l.formData,
+      formData: e.formData,
+      schemaPathToUpdatePathMap: a
+    });
+    e.onSubmit?.({ ...l, formData: d }, c);
+  };
+  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx(
+      Ie,
+      {
+        noHtml5Validate: !0,
+        showErrorList: !1,
+        autoComplete: "off",
+        ...e,
+        formData: r,
+        ...s ? {
+          onChange: i,
+          onSubmit: o
+        } : {},
+        className: `rjsf-form-template__container ${e.className || ""}`,
+        validator: De,
+        templates: {
+          ...Ae,
+          ...e.templates
+        },
+        formContext: r,
+        widgets: { ...Re, ...e.widgets },
+        translateString: ve,
+        ref: t
+      }
+    ),
+    /* @__PURE__ */ n.jsx("div", { id: L })
+  ] });
+});
+export {
+  Me as H,
+  Ke as R,
+  We as a,
+  Se as b,
+  y as c,
+  Je as g
+};