@devtron-labs/devtron-fe-common-lib 1.2.1 → 1.2.2-beta-2

package/dist/@common-rjsf-NJ6D4ODl.js

@@ -0,0 +1,571 @@
+import { j as n, J as A } from "./@vendor-RU8AW1bK.js";
+import E, { forwardRef as $ } from "react";
+import L, { getDefaultRegistry as k } from "@rjsf/core";
+import D from "@rjsf/validator-ajv8";
+import { T as y, c as H, a as J, d as w } from "./@code-editor-BsdZTvHu.js";
+import M, { components as O } from "react-select";
+import { getUiOptions as B, getTemplate as I, getSubmitButtonOptions as U, ADDITIONAL_PROPERTY_FLAG as P, errorId as W, englishStringTranslator as V, TranslatableString as q, titleId as K, canExpand as Y, deepEquals as z } from "@rjsf/utils";
+import { ReactComponent as G } from "./assets/ic-chevron-down.fc70d7a7.svg";
+import { ReactComponent as Q } from "./assets/ic-add.cfaa779b.svg";
+import { ReactComponent as X } from "./assets/ic-cross.01e03666.svg";
+import { ReactComponent as Z } from "./assets/ic-warning.10bcf8bd.svg";
+import './assets/@common-rjsf.css';const N = {
+  SELECT: "Please select an option",
+  INPUT: "Please enter an input",
+  OBJECT_KEY: "Please enter a value for the key"
+}, ee = "Key not available", Ee = {
+  "ui:submitButtonOptions": {
+    norender: !0
+  }
+}, b = ({
+  showLabel: t,
+  label: e,
+  required: s,
+  children: o,
+  id: r,
+  rawDescription: a,
+  shouldAlignCenter: i = !0
+}) => /* @__PURE__ */ n.jsxs(
+  "div",
+  {
+    className: t ? `display-grid dc__gap-12 rjsf-form-template__field ${i ? "flex-align-center" : ""}` : "",
+    children: [
+      t && /* @__PURE__ */ n.jsxs("label", { className: "cn-7 fs-13 lh-20 fw-4 flexbox mb-0", htmlFor: r, children: [
+        /* @__PURE__ */ n.jsx(y, { alwaysShowTippyOnHover: !!a, content: a, children: /* @__PURE__ */ n.jsx("span", { className: `dc__ellipsis-right ${a ? "text-underline-dashed-300" : ""}`, children: e || ee }) }),
+        s && /* @__PURE__ */ n.jsx("span", { className: "cr-5", children: " *" })
+      ] }),
+      o
+    ]
+  }
+), S = ({ label: t, canAdd: e, onAddClick: s, disabled: o, readonly: r, uiSchema: a, registry: i }) => {
+  const {
+    ButtonTemplates: { AddButton: c }
+  } = i.templates;
+  return e && /* @__PURE__ */ n.jsx(
+    c,
+    {
+      label: t,
+      onClick: s,
+      disabled: o || r,
+      uiSchema: a,
+      registry: i
+    }
+  );
+}, te = ({
+  canAdd: t,
+  className: e,
+  disabled: s,
+  idSchema: o,
+  uiSchema: r,
+  items: a,
+  onAddClick: i,
+  readonly: c,
+  registry: l,
+  required: d,
+  title: f
+}) => {
+  const p = B(r), u = I("ArrayFieldItemTemplate", l, p), m = p.title || f;
+  return /* @__PURE__ */ n.jsx("fieldset", { className: e, id: o.$id, children: a.length ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    a.map(({ key: j, ...x }, g) => {
+      const h = {
+        ...x.children,
+        props: {
+          ...x.children.props
+        }
+      };
+      return /* @__PURE__ */ n.jsx(u, { ...x, children: h }, j);
+    }),
+    /* @__PURE__ */ n.jsx(
+      S,
+      {
+        label: m,
+        canAdd: t,
+        onAddClick: i,
+        disabled: s,
+        readonly: c,
+        uiSchema: r,
+        registry: l
+      }
+    )
+  ] }) : /* @__PURE__ */ n.jsx(b, { label: m, required: d, showLabel: !0, id: o.$id, children: /* @__PURE__ */ n.jsx(
+    S,
+    {
+      label: m,
+      canAdd: t,
+      onAddClick: i,
+      disabled: s,
+      readonly: c,
+      uiSchema: r,
+      registry: l
+    }
+  ) }) });
+}, ne = ({
+  children: t,
+  disabled: e,
+  hasToolbar: s,
+  hasRemove: o,
+  index: r,
+  onDropIndexClick: a,
+  readonly: i,
+  registry: c,
+  uiSchema: l
+}) => {
+  const { RemoveButton: d } = c.templates.ButtonTemplates;
+  return /* @__PURE__ */ n.jsxs("div", { className: "dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center", children: [
+    t,
+    /* @__PURE__ */ n.jsx("div", { className: "dc__position-abs remove-btn__container", style: { right: "-28px", top: "9px" }, children: s && o && /* @__PURE__ */ n.jsx(
+      d,
+      {
+        disabled: e || i,
+        onClick: a(r),
+        uiSchema: l,
+        registry: c
+      }
+    ) })
+  ] });
+}, {
+  templates: { BaseInputTemplate: se }
+} = k(), oe = ({ placeholder: t, ...e }) => /* @__PURE__ */ n.jsx(
+  se,
+  {
+    placeholder: t || N.INPUT,
+    ...e,
+    className: "form__input cn-9 fs-13 lh-20 fw-4"
+  }
+), R = ({
+  label: t,
+  icon: e,
+  iconType: s,
+  registry: o,
+  uiSchema: r,
+  ...a
+}) => {
+  const i = `Add ${t}`;
+  return /* @__PURE__ */ n.jsx("div", { className: "flexbox flex-justify-start", children: /* @__PURE__ */ n.jsxs(
+    "button",
+    {
+      ...a,
+      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(Q, { className: "icon-dim-16 fcb-5" }),
+        /* @__PURE__ */ n.jsx(y, { placement: "right", content: i, children: /* @__PURE__ */ n.jsx("span", { className: "cb-5 fs-13 lh-34 dc__truncate", children: i }) })
+      ]
+    }
+  ) });
+}, re = ({ icon: t, iconType: e, registry: s, uiSchema: o, ...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(X, { className: "icon-dim-16 fcn-6" }) }), ae = ({ uiSchema: t }) => {
+  const { submitText: e, norender: s, props: o = {} } = U(t);
+  return s ? null : /* @__PURE__ */ n.jsx("div", { className: "flexbox flex-justify-end", children: /* @__PURE__ */ n.jsx("button", { type: "submit", ...o, className: `cta ${o.className || ""}`, children: e }) });
+}, T = ({
+  id: t,
+  title: e,
+  required: s,
+  description: o
+}) => /* @__PURE__ */ n.jsxs("legend", { className: "fs-13 fw-6 cn-9 lh-20 dc__no-border py-9 mb-0", id: t, children: [
+  /* @__PURE__ */ n.jsx(y, { alwaysShowTippyOnHover: !!o, content: o, children: /* @__PURE__ */ n.jsx("span", { className: `${o ? "text-underline-dashed-300" : ""}`, children: e }) }),
+  s && /* @__PURE__ */ n.jsx("span", { className: "cr-5", children: " *" })
+] }), ie = (t) => {
+  const {
+    id: e,
+    label: s,
+    children: o,
+    errors: r,
+    hidden: a,
+    required: i,
+    displayLabel: c,
+    registry: l,
+    uiSchema: d,
+    classNames: f,
+    schema: p,
+    rawDescription: u
+  } = t, m = B(d), j = I(
+    "WrapIfAdditionalTemplate",
+    l,
+    m
+  ), x = P in p, g = (c || p.type === "boolean") && !x, h = p.type === "array";
+  return a ? /* @__PURE__ */ n.jsx("div", { className: "hidden", children: o }) : (
+    // NOTE: need to override the margins of default rjsf css
+    /* @__PURE__ */ n.jsxs("div", { className: `${f} mb-0`, children: [
+      h && /* @__PURE__ */ n.jsx(
+        T,
+        {
+          id: e,
+          title: s,
+          required: i,
+          registry: l,
+          uiSchema: d,
+          schema: p,
+          description: u
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        b,
+        {
+          label: s,
+          showLabel: g,
+          id: e,
+          required: i,
+          rawDescription: u,
+          children: /* @__PURE__ */ n.jsx(j, { ...t, children: o })
+        }
+      ),
+      r
+    ] })
+  );
+}, le = ({ errors: t = [], idSchema: e }) => {
+  const s = W(e);
+  return t.length > 0 && /* @__PURE__ */ n.jsx("span", { className: "display-grid rjsf-form-template__field--error dc__gap-12", id: s, children: t.filter((o) => !!o).map((o, r) => /* @__PURE__ */ n.jsxs(E.Fragment, { children: [
+    /* @__PURE__ */ n.jsx("span", {}),
+    /* @__PURE__ */ n.jsxs("span", { className: "form__error", children: [
+      /* @__PURE__ */ n.jsx(Z, { className: "form__icon form__icon--error" }),
+      o
+    ] })
+  ] }, r)) });
+}, ce = (t, e) => {
+  switch (t) {
+    case q.NewStringDefault:
+      return "";
+    default:
+      return V(t, e);
+  }
+}, de = (t = {}) => ({
+  menuList: (e) => ({
+    ...e,
+    paddingTop: 0,
+    paddingBottom: 0,
+    cursor: "pointer"
+  }),
+  control: (e, s) => ({
+    ...e,
+    minHeight: "32px",
+    boxShadow: "none",
+    backgroundColor: "var(--N50)",
+    border: s.isFocused ? "1px solid var(--B500)" : "1px solid var(--N200)",
+    cursor: "pointer"
+  }),
+  option: (e, s) => ({
+    ...e,
+    color: "var(--N900)",
+    backgroundColor: s.isFocused ? "var(--N100)" : "white",
+    padding: "10px 12px",
+    cursor: "pointer"
+  }),
+  dropdownIndicator: (e, s) => ({
+    ...e,
+    color: "var(--N400)",
+    padding: "0 8px",
+    transition: "all .2s ease",
+    transform: s.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0deg)"
+  }),
+  valueContainer: (e, s) => ({
+    ...e,
+    padding: "0 8px",
+    fontWeight: "400",
+    color: s.selectProps.menuIsOpen ? "var(--N500)" : e.color
+  }),
+  loadingMessage: (e) => ({
+    ...e,
+    color: "var(--N600)"
+  }),
+  noOptionsMessage: (e) => ({
+    ...e,
+    color: "var(--N600)"
+  }),
+  multiValue: (e) => ({
+    ...e,
+    border: "1px solid var(--N200)",
+    borderRadius: "4px",
+    background: "white",
+    height: "28px",
+    marginRight: "8px",
+    padding: "2px",
+    fontSize: "12px"
+  }),
+  ...t
+}), $e = (t) => {
+  try {
+    const e = new URL(t).origin === window.location.origin;
+    return {
+      href: t,
+      target: e ? "_self" : "_blank",
+      rel: e ? void 0 : "external noreferrer",
+      url: t
+    };
+  } catch {
+    return {
+      href: t,
+      target: "_blank",
+      url: `${t} (Invalid URL)`
+    };
+  }
+}, Le = (t) => {
+  const e = typeof t;
+  switch (e) {
+    case "boolean":
+    case "string":
+    case "number":
+      return e;
+    case "object":
+      return Array.isArray(t) ? "array" : t === null ? "null" : e;
+    default:
+      return "null";
+  }
+}, v = (t) => {
+  if (!t)
+    return "";
+  const e = t.trim();
+  return e.match(/^\w+(\/\w+)*$/g) ? `/${e}` : e.match(/^\w+(\.\w+)*$/g) ? `/${e.replaceAll(/\./g, "/")}` : e;
+}, F = {
+  value: !1,
+  path: ""
+}, pe = (t) => {
+  if (!t)
+    return null;
+  const e = structuredClone(t);
+  return typeof e == "string" ? {
+    value: !0,
+    path: v(e)
+  } : typeof e != "object" ? structuredClone(F) : Object.hasOwn(e, "condition") && "condition" in e && Object.hasOwn(e, "value") && "value" in e ? {
+    value: e.condition,
+    path: v(e.value)
+  } : Object.hasOwn(e, "value") && "value" in e && Object.hasOwn(e, "path") && "path" in e ? {
+    value: e.value,
+    path: v(e.path)
+  } : structuredClone(F);
+}, me = ({
+  disabled: t,
+  formData: e,
+  idSchema: s,
+  onAddClick: o,
+  properties: r,
+  readonly: a,
+  registry: i,
+  required: c,
+  schema: l,
+  title: d,
+  uiSchema: f,
+  formContext: p
+}) => {
+  const u = !!l.additionalProperties, m = Y(l, f, e) && /* @__PURE__ */ n.jsx(
+    R,
+    {
+      label: d,
+      className: "object-property-expand",
+      onClick: o(l),
+      disabled: t || a,
+      uiSchema: f,
+      registry: i
+    }
+  ), j = r.filter((x) => {
+    const g = l.properties?.[x.name]?.hidden;
+    if (!g)
+      return !0;
+    try {
+      const h = pe(g);
+      if (!h.path)
+        throw new Error("Empty path property of hidden descriptor field");
+      if (!h.path.match(/^\/\w+(\/\w+)*$/g))
+        throw new Error("Provided path is not a valid JSON pointer");
+      const _ = A({
+        path: H(h.path),
+        json: p
+      })?.[0];
+      return !(_ === void 0 || z(h.value, _));
+    } catch {
+      return !0;
+    }
+  }).sort((x) => l.properties?.[x.name]?.type === "boolean" ? -1 : 1).map((x) => x.content);
+  return u ? r.length ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx(
+      b,
+      {
+        label: d,
+        required: c,
+        showLabel: !0,
+        id: s.$id,
+        shouldAlignCenter: !1,
+        children: /* @__PURE__ */ n.jsx("div", { children: j })
+      }
+    ),
+    m
+  ] }) : /* @__PURE__ */ n.jsx(b, { label: d, required: c, showLabel: !0, id: s.$id, children: m }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    j,
+    m
+  ] });
+}, ue = (t) => {
+  const { idSchema: e, registry: s, required: o, schema: r, title: a, uiSchema: i, description: c } = t, l = !!r.additionalProperties, d = a && !l;
+  return /* @__PURE__ */ n.jsxs("fieldset", { id: e.$id, children: [
+    d && /* @__PURE__ */ n.jsx(
+      T,
+      {
+        id: K(e),
+        title: a,
+        required: o,
+        schema: r,
+        uiSchema: i,
+        registry: s,
+        description: c
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        className: `${r.properties && !l && e.$id !== "root" ? "dc__border-left pl-12" : ""} flexbox-col dc__gap-8`,
+        children: /* @__PURE__ */ n.jsx(me, { ...t })
+      }
+    )
+  ] });
+}, he = ({
+  id: t,
+  disabled: e,
+  label: s,
+  onKeyChange: o,
+  onDropPropertyClick: r,
+  readonly: a,
+  schema: i,
+  children: c,
+  uiSchema: l,
+  registry: d
+}) => {
+  const { templates: f } = d, { RemoveButton: p } = f.ButtonTemplates, u = P in i;
+  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: `${t}-key`,
+        onBlur: (m) => o(m.target.value),
+        placeholder: N.OBJECT_KEY,
+        defaultValue: s
+      }
+    ) }),
+    /* @__PURE__ */ n.jsx("div", { children: c }),
+    /* @__PURE__ */ n.jsx("div", { className: "dc__position-abs remove-btn__container", style: { right: "-28px", top: "9px" }, children: /* @__PURE__ */ n.jsx(
+      p,
+      {
+        disabled: e || a,
+        onClick: r(s),
+        uiSchema: l,
+        registry: d
+      }
+    ) })
+  ] }) : c });
+}, fe = ({
+  id: t,
+  onChange: e,
+  value: s,
+  required: o,
+  disabled: r,
+  readonly: a,
+  autofocus: i,
+  onBlur: c,
+  onFocus: l
+}) => {
+  const d = (p, u) => {
+    const { id: m, checked: j } = p.target;
+    u === "blur" ? c(m, j) : u === "focus" && l(m, j);
+  }, f = typeof s > "u" ? !1 : s;
+  return /* @__PURE__ */ n.jsxs("div", { children: [
+    /* @__PURE__ */ n.jsx(
+      J,
+      {
+        selected: f,
+        onSelect: e,
+        id: t,
+        name: t,
+        required: o,
+        disabled: r || a,
+        autoFocus: i,
+        rootClassName: "w-32 mb-0 dc__height-inherit",
+        onBlur: (p) => d(p, "blur"),
+        onFocus: (p) => d(p, "focus")
+      }
+    ),
+    /* @__PURE__ */ n.jsx("span", { className: "dc__capitalize ml-8", children: f.toString() })
+  ] });
+}, C = de(), xe = ({ children: t, ...e }) => /* @__PURE__ */ n.jsx(O.MenuList, { ...e, children: Array.isArray(t) ? t.slice(0, 20) : t }), ge = (t) => /* @__PURE__ */ n.jsx(O.DropdownIndicator, { ...t, children: /* @__PURE__ */ n.jsx(G, { className: "icon-dim-20 icon-n5", "data-testid": "overview-project-edit-dropdown" }) }), je = (t) => {
+  const {
+    id: e,
+    multiple: s = !1,
+    options: o,
+    value: r,
+    disabled: a,
+    readonly: i,
+    autofocus: c = !1,
+    onChange: l,
+    onBlur: d,
+    onFocus: f,
+    placeholder: p
+  } = t, { enumOptions: u = [] } = o, m = s ? [] : "", j = (g) => {
+    l(s ? g.map((h) => h.value) : g.value);
+  }, x = (g) => s ? u.filter((h) => g.some((_) => w(_, h.value))) : u.find((h) => w(g, h.value));
+  return /* @__PURE__ */ n.jsx(
+    M,
+    {
+      id: e,
+      name: e,
+      isMulti: s,
+      value: typeof r > "u" ? m : x(r),
+      autoFocus: c,
+      onChange: j,
+      options: u,
+      onBlur: () => d(e, r),
+      onFocus: () => f(e, r),
+      placeholder: p || N.SELECT,
+      isDisabled: a || i,
+      styles: {
+        ...C,
+        control: (g) => ({
+          ...g,
+          ...C.control,
+          backgroundColor: "var(--N50)"
+        })
+      },
+      components: {
+        IndicatorSeparator: null,
+        DropdownIndicator: ge,
+        MenuList: xe
+      },
+      menuPlacement: "auto"
+    }
+  );
+}, _e = {
+  CheckboxWidget: fe,
+  SelectWidget: je
+}, be = {
+  ArrayFieldItemTemplate: ne,
+  ArrayFieldTemplate: te,
+  BaseInputTemplate: oe,
+  ButtonTemplates: { AddButton: R, RemoveButton: re, SubmitButton: ae },
+  FieldTemplate: ie,
+  FieldErrorTemplate: le,
+  ObjectFieldTemplate: ue,
+  TitleFieldTemplate: T,
+  WrapIfAdditionalTemplate: he
+}, ve = L, ye = D, ke = $((t, e) => /* @__PURE__ */ n.jsx(
+  ve,
+  {
+    noHtml5Validate: !0,
+    showErrorList: !1,
+    autoComplete: "off",
+    ...t,
+    className: `rjsf-form-template__container ${t.className || ""}`,
+    validator: ye,
+    templates: {
+      ...be,
+      ...t.templates
+    },
+    formContext: t.formData,
+    widgets: { ..._e, ...t.widgets },
+    translateString: ce,
+    ref: e
+  }
+));
+export {
+  Ee as H,
+  ke as R,
+  $e as a,
+  Le as g
+};