@kong/kongponents 9.50.0 → 9.50.1-pr.3074.7f7a22c.0

package/dist/kongponents.es275.js

@@ -1,66 +1,47 @@
-import { defineComponent as d, openBlock as a, createBlock as i, withCtx as e, createVNode as o, unref as r, Transition as l, createElementBlock as s, toDisplayString as c, createCommentVNode as u, renderSlot as m } from "vue";
-import b from "./kongponents.es24.js";
-/* empty css                 */
-import p from "./kongponents.es43.js";
-import f from "./kongponents.es32.js";
-import k from "./kongponents.es214.js";
-const g = {
-  key: 0,
-  class: "bulk-actions-dropdown-trigger-count"
-}, D = /* @__PURE__ */ d({
-  __name: "BulkActionsDropdown",
+import { defineComponent as r, openBlock as c, createElementBlock as u, createElementVNode as l, withKeys as s, withModifiers as n, normalizeClass as v, renderSlot as w, createTextVNode as b, toDisplayString as f } from "vue";
+const k = ["aria-selected", "data-testid"], y = { class: "select-item-container" }, $ = ["disabled", "value"], h = { class: "select-item-label" }, K = /* @__PURE__ */ r({
+  __name: "KSelectItem",
   props: {
-    disabled: { type: Boolean },
-    count: { default: "" },
-    buttonLabel: { default: "" }
+    item: {}
   },
-  setup(t) {
-    return (n, w) => (a(), i(p, {
-      class: "bulk-actions-dropdown",
-      "data-testid": "bulk-actions-dropdown",
-      disabled: t.disabled,
-      "kpop-attributes": { placement: "bottom-end" }
-    }, {
-      items: e(() => [
-        m(n.$slots, "items", {}, void 0, !0)
-      ]),
-      default: e(() => [
-        o(b, {
-          placement: "bottom-end",
-          text: "Selected Row Actions"
-        }, {
-          default: e(() => [
-            o(f, {
-              appearance: "secondary",
-              "aria-label": t.buttonLabel,
-              class: "bulk-actions-dropdown-trigger",
-              "data-testid": "bulk-actions-dropdown-trigger",
-              disabled: t.disabled,
-              icon: "",
-              size: "large"
-            }, {
-              default: e(() => [
-                o(r(k), {
-                  class: "more-icon",
-                  decorative: ""
-                }),
-                o(l, { name: "kongponents-fade-transition" }, {
-                  default: e(() => [
-                    t.count ? (a(), s("span", g, c(t.count), 1)) : u("", !0)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "disabled"])
-          ]),
-          _: 1
-        })
-      ]),
-      _: 3
-    }, 8, ["disabled"]));
+  emits: ["selected", "arrow-down", "arrow-up"],
+  setup(e, { emit: o }) {
+    const a = o, d = (t) => {
+      if (e.item.disabled) {
+        t.stopPropagation();
+        return;
+      }
+      a("selected", e.item);
+    };
+    return (t, i) => (c(), u("div", {
+      key: e.item.key,
+      "aria-selected": e.item.selected,
+      class: "select-item",
+      "data-testid": `select-item-${e.item.value}`,
+      role: "option"
+    }, [
+      l("div", y, [
+        l("button", {
+          class: v({ selected: e.item.selected }),
+          disabled: e.item.disabled === !0 ? !0 : void 0,
+          type: "button",
+          value: e.item.value,
+          onClick: d,
+          onKeydown: [
+            i[0] || (i[0] = s(n((m) => t.$emit("arrow-down"), ["prevent"]), ["down"])),
+            i[1] || (i[1] = s(n((m) => t.$emit("arrow-up"), ["prevent"]), ["up"]))
+          ]
+        }, [
+          l("span", h, [
+            w(t.$slots, "content", {}, () => [
+              b(f(e.item.label), 1)
+            ], !0)
+          ])
+        ], 42, $)
+      ])
+    ], 8, k));
   }
 });
 export {
-  D as default
+  K as default
 };

package/dist/kongponents.es277.js

@@ -1,372 +1,87 @@
-import { evaluate as V, getSideAxis as E, getSide as D, clamp as X, getOppositePlacement as J, getExpandedPlacements as K, getOppositeAxisPlacements as N, getAlignmentSides as G, placements as Y, getAlignment as T, getPaddingObject as Q, rectToClientRect as q, getOppositeAxis as U, getOppositeAlignmentPlacement as W, getAlignmentAxis as Z, getAxisLength as ee } from "./kongponents.es278.js";
-function z(t, i, m) {
-  let {
-    reference: n,
-    floating: e
-  } = t;
-  const l = E(i), r = Z(i), s = ee(r), y = D(i), v = l === "y", d = n.x + n.width / 2 - e.width / 2, a = n.y + n.height / 2 - e.height / 2, c = n[s] / 2 - e[s] / 2;
-  let o;
-  switch (y) {
-    case "top":
-      o = {
-        x: d,
-        y: n.y - e.height
-      };
-      break;
-    case "bottom":
-      o = {
-        x: d,
-        y: n.y + n.height
-      };
-      break;
-    case "right":
-      o = {
-        x: n.x + n.width,
-        y: a
-      };
-      break;
-    case "left":
-      o = {
-        x: n.x - e.width,
-        y: a
-      };
-      break;
-    default:
-      o = {
-        x: n.x,
-        y: n.y
-      };
-  }
-  switch (T(i)) {
-    case "start":
-      o[r] -= c * (m && v ? -1 : 1);
-      break;
-    case "end":
-      o[r] += c * (m && v ? -1 : 1);
-      break;
-  }
-  return o;
-}
-const ie = async (t, i, m) => {
-  const {
-    placement: n = "bottom",
-    strategy: e = "absolute",
-    middleware: l = [],
-    platform: r
-  } = m, s = l.filter(Boolean), y = await (r.isRTL == null ? void 0 : r.isRTL(i));
-  let v = await r.getElementRects({
-    reference: t,
-    floating: i,
-    strategy: e
-  }), {
-    x: d,
-    y: a
-  } = z(v, n, y), c = n, o = {}, x = 0;
-  for (let h = 0; h < s.length; h++) {
-    const {
-      name: w,
-      fn: u
-    } = s[h], {
-      x: f,
-      y: A,
-      data: P,
-      reset: g
-    } = await u({
-      x: d,
-      y: a,
-      initialPlacement: n,
-      placement: c,
-      strategy: e,
-      middlewareData: o,
-      rects: v,
-      platform: r,
-      elements: {
-        reference: t,
-        floating: i
-      }
-    });
-    d = f ?? d, a = A ?? a, o = {
-      ...o,
-      [w]: {
-        ...o[w],
-        ...P
-      }
-    }, g && x <= 50 && (x++, typeof g == "object" && (g.placement && (c = g.placement), g.rects && (v = g.rects === !0 ? await r.getElementRects({
-      reference: t,
-      floating: i,
-      strategy: e
-    }) : g.rects), {
-      x: d,
-      y: a
-    } = z(v, c, y)), h = -1);
-  }
-  return {
-    x: d,
-    y: a,
-    placement: c,
-    strategy: e,
-    middlewareData: o
-  };
-};
-async function I(t, i) {
-  var m;
-  i === void 0 && (i = {});
-  const {
-    x: n,
-    y: e,
-    platform: l,
-    rects: r,
-    elements: s,
-    strategy: y
-  } = t, {
-    boundary: v = "clippingAncestors",
-    rootBoundary: d = "viewport",
-    elementContext: a = "floating",
-    altBoundary: c = !1,
-    padding: o = 0
-  } = V(i, t), x = Q(o), w = s[c ? a === "floating" ? "reference" : "floating" : a], u = q(await l.getClippingRect({
-    element: (m = await (l.isElement == null ? void 0 : l.isElement(w))) == null || m ? w : w.contextElement || await (l.getDocumentElement == null ? void 0 : l.getDocumentElement(s.floating)),
-    boundary: v,
-    rootBoundary: d,
-    strategy: y
-  })), f = a === "floating" ? {
-    x: n,
-    y: e,
-    width: r.floating.width,
-    height: r.floating.height
-  } : r.reference, A = await (l.getOffsetParent == null ? void 0 : l.getOffsetParent(s.floating)), P = await (l.isElement == null ? void 0 : l.isElement(A)) ? await (l.getScale == null ? void 0 : l.getScale(A)) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  }, g = q(l.convertOffsetParentRelativeRectToViewportRelativeRect ? await l.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements: s,
-    rect: f,
-    offsetParent: A,
-    strategy: y
-  }) : f);
-  return {
-    top: (u.top - g.top + x.top) / P.y,
-    bottom: (g.bottom - u.bottom + x.bottom) / P.y,
-    left: (u.left - g.left + x.left) / P.x,
-    right: (g.right - u.right + x.right) / P.x
-  };
-}
-function te(t, i, m) {
-  return (t ? [...m.filter((e) => T(e) === t), ...m.filter((e) => T(e) !== t)] : m.filter((e) => D(e) === e)).filter((e) => t ? T(e) === t || (i ? W(e) !== e : !1) : !0);
-}
-const le = function(t) {
-  return t === void 0 && (t = {}), {
-    name: "autoPlacement",
-    options: t,
-    async fn(i) {
-      var m, n, e;
-      const {
-        rects: l,
-        middlewareData: r,
-        placement: s,
-        platform: y,
-        elements: v
-      } = i, {
-        crossAxis: d = !1,
-        alignment: a,
-        allowedPlacements: c = Y,
-        autoAlignment: o = !0,
-        ...x
-      } = V(t, i), h = a !== void 0 || c === Y ? te(a || null, o, c) : c, w = await I(i, x), u = ((m = r.autoPlacement) == null ? void 0 : m.index) || 0, f = h[u];
-      if (f == null)
-        return {};
-      const A = G(f, l, await (y.isRTL == null ? void 0 : y.isRTL(v.floating)));
-      if (s !== f)
-        return {
-          reset: {
-            placement: h[0]
-          }
-        };
-      const P = [w[D(f)], w[A[0]], w[A[1]]], g = [...((n = r.autoPlacement) == null ? void 0 : n.overflows) || [], {
-        placement: f,
-        overflows: P
-      }], L = h[u + 1];
-      if (L)
-        return {
-          data: {
-            index: u + 1,
-            overflows: g
-          },
-          reset: {
-            placement: L
-          }
-        };
-      const B = g.map((p) => {
-        const O = T(p.placement);
-        return [p.placement, O && d ? (
-          // Check along the mainAxis and main crossAxis side.
-          p.overflows.slice(0, 2).reduce(($, j) => $ + j, 0)
-        ) : (
-          // Check only the mainAxis.
-          p.overflows[0]
-        ), p.overflows];
-      }).sort((p, O) => p[1] - O[1]), R = ((e = B.filter((p) => p[2].slice(
-        0,
-        // Aligned placements should not check their opposite crossAxis
-        // side.
-        T(p[0]) ? 2 : 3
-      ).every((O) => O <= 0))[0]) == null ? void 0 : e[0]) || B[0][0];
-      return R !== s ? {
-        data: {
-          index: u + 1,
-          overflows: g
-        },
-        reset: {
-          placement: R
+import { defineComponent as K, useTemplateRef as $, openBlock as o, createElementBlock as r, Fragment as c, renderList as C, createBlock as m, withCtx as u, renderSlot as E, createElementVNode as f, toDisplayString as g, createTextVNode as h, createCommentVNode as x } from "vue";
+import p from "./kongponents.es188.js";
+const T = {
+  ref: "itemsContainer",
+  "aria-live": "polite",
+  class: "multiselect-items-container"
+}, V = {
+  key: 1,
+  class: "multiselect-group"
+}, _ = { class: "multiselect-group-title" }, L = { class: "select-item-description" }, A = ".multiselect-item button:not(:disabled)", M = /* @__PURE__ */ K({
+  __name: "KMultiselectItems",
+  props: {
+    items: { default: () => [] },
+    itemCreationEnabled: { type: Boolean },
+    filterString: { default: "" },
+    itemCreationValid: { type: Boolean, default: !0 }
+  },
+  emits: ["selected", "add-item"],
+  setup(s, { expose: k, emit: b }) {
+    const y = b, v = (t) => "items" in t && Array.isArray(t.items), w = (t) => y("selected", t), S = $("itemsContainer"), I = (t) => {
+      var i;
+      const n = S.value;
+      if (!n)
+        return;
+      const e = n.querySelectorAll(A);
+      (i = e[t === "down" ? 0 : e.length - 1]) == null || i.focus();
+    }, a = ({ target: t, key: n }) => {
+      var e;
+      if (n === "ArrowDown" || n === "ArrowUp") {
+        const i = (e = S.value) == null ? void 0 : e.querySelectorAll(A);
+        if (i != null && i.length) {
+          const l = [...i].indexOf(t), B = n === "ArrowDown" ? l + 1 : l - 1, d = i[B];
+          d == null || d.focus();
         }
-      } : {};
-    }
-  };
-}, oe = function(t) {
-  return t === void 0 && (t = {}), {
-    name: "flip",
-    options: t,
-    async fn(i) {
-      var m, n;
-      const {
-        placement: e,
-        middlewareData: l,
-        rects: r,
-        initialPlacement: s,
-        platform: y,
-        elements: v
-      } = i, {
-        mainAxis: d = !0,
-        crossAxis: a = !0,
-        fallbackPlacements: c,
-        fallbackStrategy: o = "bestFit",
-        fallbackAxisSideDirection: x = "none",
-        flipAlignment: h = !0,
-        ...w
-      } = V(t, i);
-      if ((m = l.arrow) != null && m.alignmentOffset)
-        return {};
-      const u = D(e), f = E(s), A = D(s) === s, P = await (y.isRTL == null ? void 0 : y.isRTL(v.floating)), g = c || (A || !h ? [J(s)] : K(s)), L = x !== "none";
-      !c && L && g.push(...N(s, h, x, P));
-      const B = [s, ...g], M = await I(i, w), R = [];
-      let p = ((n = l.flip) == null ? void 0 : n.overflows) || [];
-      if (d && R.push(M[u]), a) {
-        const k = G(e, r, P);
-        R.push(M[k[0]], M[k[1]]);
       }
-      if (p = [...p, {
-        placement: e,
-        overflows: R
-      }], !R.every((k) => k <= 0)) {
-        var O, $;
-        const k = (((O = l.flip) == null ? void 0 : O.index) || 0) + 1, _ = B[k];
-        if (_ && (!(a === "alignment" ? f !== E(_) : !1) || // We leave the current main axis only if every placement on that axis
-        // overflows the main axis.
-        p.every((b) => E(b.placement) === f ? b.overflows[0] > 0 : !0)))
-          return {
-            data: {
-              index: k,
-              overflows: p
-            },
-            reset: {
-              placement: _
-            }
-          };
-        let F = ($ = p.filter((C) => C.overflows[0] <= 0).sort((C, b) => C.overflows[1] - b.overflows[1])[0]) == null ? void 0 : $.placement;
-        if (!F)
-          switch (o) {
-            case "bestFit": {
-              var j;
-              const C = (j = p.filter((b) => {
-                if (L) {
-                  const S = E(b.placement);
-                  return S === f || // Create a bias to the `y` side axis due to horizontal
-                  // reading directions favoring greater width.
-                  S === "y";
-                }
-                return !0;
-              }).map((b) => [b.placement, b.overflows.filter((S) => S > 0).reduce((S, H) => S + H, 0)]).sort((b, S) => b[1] - S[1])[0]) == null ? void 0 : j[0];
-              C && (F = C);
-              break;
-            }
-            case "initialPlacement":
-              F = s;
-              break;
-          }
-        if (e !== F)
-          return {
-            reset: {
-              placement: F
-            }
-          };
-      }
-      return {};
-    }
-  };
-}, ae = function(t) {
-  return t === void 0 && (t = {}), {
-    name: "shift",
-    options: t,
-    async fn(i) {
-      const {
-        x: m,
-        y: n,
-        placement: e
-      } = i, {
-        mainAxis: l = !0,
-        crossAxis: r = !1,
-        limiter: s = {
-          fn: (w) => {
-            let {
-              x: u,
-              y: f
-            } = w;
-            return {
-              x: u,
-              y: f
-            };
-          }
-        },
-        ...y
-      } = V(t, i), v = {
-        x: m,
-        y: n
-      }, d = await I(i, y), a = E(D(e)), c = U(a);
-      let o = v[c], x = v[a];
-      if (l) {
-        const w = c === "y" ? "top" : "left", u = c === "y" ? "bottom" : "right", f = o + d[w], A = o - d[u];
-        o = X(f, o, A);
-      }
-      if (r) {
-        const w = a === "y" ? "top" : "left", u = a === "y" ? "bottom" : "right", f = x + d[w], A = x - d[u];
-        x = X(f, x, A);
-      }
-      const h = s.fn({
-        ...i,
-        [c]: o,
-        [a]: x
-      });
-      return {
-        ...h,
-        data: {
-          x: h.x - m,
-          y: h.y - n,
-          enabled: {
-            [c]: l,
-            [a]: r
-          }
-        }
-      };
-    }
-  };
-};
+    };
+    return k({ setFocus: I }), (t, n) => (o(), r("div", T, [
+      (o(!0), r(c, null, C(s.items, (e, i) => (o(), r(c, {
+        key: v(e) ? `${e.key || e.label}-group` : e.key || e.value || i
+      }, [
+        v(e) ? (o(), r("div", V, [
+          f("span", _, g(e.label), 1),
+          (o(!0), r(c, null, C(e.items, (l) => (o(), m(p, {
+            key: l.key,
+            item: l,
+            onKeydown: a,
+            onSelected: w
+          }, {
+            content: u(() => [
+              E(t.$slots, "content", { item: l }, void 0, !0)
+            ]),
+            _: 2
+          }, 1032, ["item"]))), 128))
+        ])) : (o(), m(p, {
+          key: 0,
+          item: e,
+          onKeydown: a,
+          onSelected: w
+        }, {
+          content: u(() => [
+            E(t.$slots, "content", { item: e }, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["item"]))
+      ], 64))), 128)),
+      s.itemCreationEnabled ? (o(), m(p, {
+        key: "multiselect-add-item",
+        class: "multiselect-add-item",
+        "data-testid": "multiselect-add-item",
+        item: { label: `${s.filterString} (Add new value)`, value: "add_item", disabled: !s.itemCreationValid },
+        onKeydown: a,
+        onSelected: n[0] || (n[0] = (e) => t.$emit("add-item"))
+      }, {
+        content: u(() => [
+          f("div", L, [
+            h(g(s.filterString) + " ", 1),
+            n[1] || (n[1] = f("span", { class: "select-item-new-indicator" }, "(Add new value)", -1))
+          ])
+        ]),
+        _: 1
+      }, 8, ["item"])) : x("", !0)
+    ], 512));
+  }
+});
 export {
-  le as autoPlacement,
-  ie as computePosition,
-  I as detectOverflow,
-  oe as flip,
-  q as rectToClientRect,
-  ae as shift
+  M as default
 };

package/dist/kongponents.es279.js

@@ -1,7 +1,43 @@
-function n(t) {
-  var e = typeof t;
-  return t != null && (e == "object" || e == "function");
-}
+import { defineComponent as r, openBlock as c, createElementBlock as u, createElementVNode as l, withKeys as s, withModifiers as n, normalizeClass as v, renderSlot as w, createTextVNode as b, toDisplayString as f } from "vue";
+const k = ["aria-selected", "data-testid"], y = { class: "multiselect-item-container" }, $ = ["disabled", "value"], h = { class: "multiselect-item-label" }, K = /* @__PURE__ */ r({
+  __name: "KMultiselectItem",
+  props: {
+    item: {}
+  },
+  emits: ["selected", "arrow-down", "arrow-up"],
+  setup(e, { emit: a }) {
+    const d = a, o = () => {
+      e.item.disabled || d("selected", e.item);
+    };
+    return (i, t) => (c(), u("div", {
+      key: e.item.key || e.item.value,
+      "aria-selected": e.item.selected,
+      class: "multiselect-item",
+      "data-testid": `multiselect-item-${e.item.value}`,
+      role: "option"
+    }, [
+      l("div", y, [
+        l("button", {
+          class: v({ selected: e.item.selected }),
+          disabled: e.item.disabled === !0 ? !0 : void 0,
+          type: "button",
+          value: e.item.value,
+          onClick: o,
+          onKeydown: [
+            t[0] || (t[0] = s(n((m) => i.$emit("arrow-down"), ["prevent"]), ["down"])),
+            t[1] || (t[1] = s(n((m) => i.$emit("arrow-up"), ["prevent"]), ["up"]))
+          ]
+        }, [
+          l("span", h, [
+            w(i.$slots, "content", {}, () => [
+              b(f(e.item.label), 1)
+            ], !0)
+          ])
+        ], 42, $)
+      ])
+    ], 8, k));
+  }
+});
 export {
-  n as default
+  K as default
 };

package/dist/kongponents.es281.js

@@ -1,22 +1,7 @@
-import n from "./kongponents.es325.js";
-import f from "./kongponents.es279.js";
-import o from "./kongponents.es301.js";
-var s = NaN, m = /^[-+]0x[0-9a-f]+$/i, p = /^0b[01]+$/i, e = /^0o[0-7]+$/i, b = parseInt;
-function O(r) {
-  if (typeof r == "number")
-    return r;
-  if (o(r))
-    return s;
-  if (f(r)) {
-    var t = typeof r.valueOf == "function" ? r.valueOf() : r;
-    r = f(t) ? t + "" : t;
-  }
-  if (typeof r != "string")
-    return r === 0 ? r : +r;
-  r = n(r);
-  var i = p.test(r);
-  return i || e.test(r) ? b(r.slice(2), i ? 2 : 8) : m.test(r) ? s : +r;
+function n(t) {
+  var e = typeof t;
+  return t != null && (e == "object" || e == "function");
 }
 export {
-  O as default
+  n as default
 };

package/dist/kongponents.es282.js

@@ -1,6 +1,7 @@
-function t(n, f) {
-  return n === f || n !== n && f !== f;
-}
+import o from "./kongponents.es300.js";
+var t = function() {
+  return o.Date.now();
+};
 export {
   t as default
 };