@wso2/am-core-ui 0.0.19 → 0.0.20

package/dist/LabelChips-7rA7_yre.js

@@ -0,0 +1,139 @@
+import { jsx as t, jsxs as Z } from "react/jsx-runtime";
+import { c as te } from "react/compiler-runtime";
+import { useState as D, useRef as N, useLayoutEffect as le } from "react";
+import { Box as u, Chip as G, Typography as k, Button as q, IconButton as ne, Tooltip as ie, Stack as re } from "@wso2/oxygen-ui";
+import { X as Y, Plus as se } from "@wso2/oxygen-ui-icons-react";
+import { n as J } from "./index-ByEInFlf.js";
+const Q = 10, ae = /^[a-zA-Z0-9]([a-zA-Z0-9._-]*[a-zA-Z0-9])?$/, oe = /^([a-zA-Z0-9]([a-zA-Z0-9._-]*[a-zA-Z0-9])?)?$/, H = 63;
+function ce(o) {
+  if (!o) return "Key is required";
+  if (o.length > H) return `Key must be at most ${H} characters`;
+  if (!ae.test(o)) return "Use letters, digits, '.', '_' or '-', starting and ending with a letter or digit";
+}
+function de(o) {
+  if (o.length > H) return `Value must be at most ${H} characters`;
+  if (!oe.test(o)) return "Use letters, digits, '.', '_' or '-', starting and ending with a letter or digit";
+}
+const be = (o) => {
+  const e = te(45), {
+    value: l,
+    onChange: d,
+    disabled: C,
+    hideTitle: $,
+    title: T,
+    description: I
+  } = o, r = C === void 0 ? !1 : C, n = $ === void 0 ? !1 : $, s = T === void 0 ? "Labels (Optional)" : T, f = I === void 0 ? "Attach key/value labels to organize and filter resources." : I, [c, v] = D(!1), [i, h] = D(""), [a, b] = D("");
+  let w;
+  e[0] !== l ? (w = Object.entries(l), e[0] = l, e[1] = w) : w = e[1];
+  const p = w;
+  let B;
+  e[2] !== i ? (B = i ? ce(i) : void 0, e[2] = i, e[3] = B) : B = e[3];
+  const z = B;
+  let P;
+  e[4] !== a ? (P = de(a), e[4] = a, e[5] = P) : P = e[5];
+  const R = P, O = i && Object.prototype.hasOwnProperty.call(l, i) ? "A label with this key already exists" : void 0, S = p.length >= Q, x = !i || !!z || !!R || !!O;
+  let V;
+  e[6] !== x || e[7] !== i || e[8] !== a || e[9] !== d || e[10] !== l ? (V = () => {
+    x || (d({
+      ...l,
+      [i]: a
+    }), h(""), b(""), v(!1));
+  }, e[6] = x, e[7] = i, e[8] = a, e[9] = d, e[10] = l, e[11] = V) : V = e[11];
+  const M = V;
+  let K;
+  e[12] !== d || e[13] !== l ? (K = (m) => {
+    const g = {
+      ...l
+    };
+    delete g[m], d(g);
+  }, e[12] = d, e[13] = l, e[14] = K) : K = e[14];
+  const U = K;
+  let X;
+  e[15] === Symbol.for("react.memo_cache_sentinel") ? (X = () => {
+    h(""), b(""), v(!1);
+  }, e[15] = X) : X = e[15];
+  const ee = X;
+  let A;
+  e[16] !== n || e[17] !== s ? (A = !n && /* @__PURE__ */ t(k, { variant: "h6", children: s }), e[16] = n, e[17] = s, e[18] = A) : A = e[18];
+  let y;
+  e[19] !== f ? (y = /* @__PURE__ */ t(k, { variant: "body2", children: f }), e[19] = f, e[20] = y) : y = e[20];
+  let E;
+  e[21] !== r || e[22] !== p || e[23] !== U ? (E = p.length > 0 && /* @__PURE__ */ t(u, { display: "flex", flexWrap: "wrap", gap: 1, children: p.map((m) => {
+    const [g, F] = m;
+    return /* @__PURE__ */ t(G, { label: F ? `${g}: ${F}` : g, size: "small", variant: "outlined", onDelete: r ? void 0 : () => U(g), deleteIcon: /* @__PURE__ */ t(Y, { size: 14 }) }, g);
+  }) }), e[21] = r, e[22] = p, e[23] = U, e[24] = E) : E = e[24];
+  let _;
+  e[25] !== r || e[26] !== O || e[27] !== M || e[28] !== x || e[29] !== c || e[30] !== z || e[31] !== i || e[32] !== a || e[33] !== R ? (_ = c && /* @__PURE__ */ Z(u, { display: "flex", gap: 1, alignItems: "flex-start", children: [
+    /* @__PURE__ */ t(J, { label: "Key", size: "small", value: i, onChange: (m) => h(m.target.value), placeholder: "e.g. env", error: !!z || !!O, helperText: z ?? O, disabled: r }),
+    /* @__PURE__ */ t(J, { label: "Value", size: "small", value: a, onChange: (m) => b(m.target.value), placeholder: "e.g. production", error: !!R, helperText: R, disabled: r }),
+    /* @__PURE__ */ Z(u, { display: "flex", gap: 0.5, mt: 2.5, children: [
+      /* @__PURE__ */ t(q, { variant: "contained", size: "small", onClick: M, disabled: r || x, children: "Add" }),
+      /* @__PURE__ */ t(ne, { size: "small", onClick: ee, title: "Cancel", children: /* @__PURE__ */ t(Y, { size: 18 }) })
+    ] })
+  ] }), e[25] = r, e[26] = O, e[27] = M, e[28] = x, e[29] = c, e[30] = z, e[31] = i, e[32] = a, e[33] = R, e[34] = _) : _ = e[34];
+  let L;
+  e[35] !== S || e[36] !== r || e[37] !== c ? (L = !c && !r && /* @__PURE__ */ t(u, { display: "flex", justifyContent: "flex-start", children: /* @__PURE__ */ t(q, { startIcon: /* @__PURE__ */ t(se, { fontSize: "small" }), variant: "outlined", color: "primary", size: "small", onClick: () => v(!0), disabled: S, title: S ? `At most ${Q} labels per resource` : void 0, children: "Add Label" }) }), e[35] = S, e[36] = r, e[37] = c, e[38] = L) : L = e[38];
+  let j;
+  return e[39] !== A || e[40] !== y || e[41] !== E || e[42] !== _ || e[43] !== L ? (j = /* @__PURE__ */ Z(u, { display: "flex", flexDirection: "column", gap: 1.5, width: "100%", children: [
+    A,
+    y,
+    E,
+    _,
+    L
+  ] }), e[39] = A, e[40] = y, e[41] = E, e[42] = _, e[43] = L, e[44] = j) : j = e[44], j;
+}, W = 4, fe = 46, xe = ({
+  labels: o,
+  size: e = "small"
+}) => {
+  const l = Object.entries(o ?? {}), d = N(null), C = N([]), [$, T] = D(l.length);
+  if (le(() => {
+    const n = d.current;
+    if (!n) return;
+    const s = () => {
+      const c = n.clientWidth;
+      if (c <= 0) return;
+      let v = 0, i = 0;
+      for (let h = 0; h < l.length; h++) {
+        const a = C.current[h]?.getBoundingClientRect().width ?? 0, b = i > 0 ? W : 0, p = l.length - (h + 1) > 0 ? fe + W : 0;
+        if (v + b + a + p > c && i > 0) break;
+        v += b + a, i += 1;
+      }
+      T(i || (l.length > 0 ? 1 : 0));
+    };
+    if (s(), typeof ResizeObserver > "u") return;
+    const f = new ResizeObserver(s);
+    return f.observe(n), () => f.disconnect();
+  }, [o]), l.length === 0) return null;
+  const I = l.slice(0, $), r = l.slice($);
+  return /* @__PURE__ */ Z(u, { ref: d, sx: {
+    display: "flex",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    gap: `${W}px`,
+    overflow: "hidden",
+    minWidth: 0,
+    flex: "1 1 0%"
+  }, children: [
+    /* @__PURE__ */ t(u, { "aria-hidden": !0, sx: {
+      position: "absolute",
+      top: -9999,
+      left: -9999,
+      visibility: "hidden",
+      display: "flex",
+      gap: `${W}px`,
+      pointerEvents: "none"
+    }, children: l.map(([n, s], f) => /* @__PURE__ */ t(u, { ref: (c) => {
+      C.current[f] = c;
+    }, children: /* @__PURE__ */ t(G, { label: s ? `${n}: ${s}` : n, size: e, variant: "outlined" }) }, n)) }),
+    I.map(([n, s]) => /* @__PURE__ */ t(G, { label: s ? `${n}: ${s}` : n, size: e, variant: "outlined", sx: {
+      flexShrink: 0
+    } }, n)),
+    r.length > 0 && /* @__PURE__ */ t(ie, { title: /* @__PURE__ */ t(re, { spacing: 0.25, children: r.map(([n, s]) => /* @__PURE__ */ t(k, { variant: "caption", children: s ? `${n}: ${s}` : n }, n)) }), placement: "top", children: /* @__PURE__ */ t(G, { label: `+${r.length}`, size: e, variant: "outlined", sx: {
+      flexShrink: 0
+    } }) })
+  ] });
+};
+export {
+  be as L,
+  xe as a
+};