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

package/dist/kongponents.es272.js

@@ -1,219 +1,132 @@
-/*!
-* tabbable 6.4.0
-* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
-*/
-var T = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert] *)", "textarea:not([inert]):not([inert] *)", "a[href]:not([inert]):not([inert] *)", "button:not([inert]):not([inert] *)", "[tabindex]:not(slot):not([inert]):not([inert] *)", "audio[controls]:not([inert]):not([inert] *)", "video[controls]:not([inert]):not([inert] *)", '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', "details>summary:first-of-type:not([inert]):not([inert] *)", "details:not([inert]):not([inert] *)"], v = /* @__PURE__ */ T.join(","), I = typeof Element > "u", d = I ? function() {
-} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector, b = !I && Element.prototype.getRootNode ? function(i) {
-  var t;
-  return i == null || (t = i.getRootNode) === null || t === void 0 ? void 0 : t.call(i);
-} : function(i) {
-  return i == null ? void 0 : i.ownerDocument;
-}, h = function(t, e) {
-  var r;
-  e === void 0 && (e = !0);
-  var a = t == null || (r = t.getAttribute) === null || r === void 0 ? void 0 : r.call(t, "inert"), l = a === "" || a === "true", n = l || e && t && // closest does not exist on shadow roots, so we fall back to a manual
-  // lookup upward, in case it is not defined.
-  (typeof t.closest == "function" ? t.closest("[inert]") : h(t.parentNode));
-  return n;
-}, x = function(t) {
-  var e, r = t == null || (e = t.getAttribute) === null || e === void 0 ? void 0 : e.call(t, "contenteditable");
-  return r === "" || r === "true";
-}, m = function(t, e, r) {
-  if (h(t))
-    return [];
-  var a = Array.prototype.slice.apply(t.querySelectorAll(v));
-  return e && d.call(t, v) && a.unshift(t), a = a.filter(r), a;
-}, g = function(t, e, r) {
-  for (var a = [], l = Array.from(t); l.length; ) {
-    var n = l.shift();
-    if (!h(n, !1))
-      if (n.tagName === "SLOT") {
-        var c = n.assignedElements(), o = c.length ? c : n.children, u = g(o, !0, r);
-        r.flatten ? a.push.apply(a, u) : a.push({
-          scopeParent: n,
-          candidates: u
-        });
-      } else {
-        var s = d.call(n, v);
-        s && r.filter(n) && (e || !t.includes(n)) && a.push(n);
-        var f = n.shadowRoot || // check for an undisclosed shadow
-        typeof r.getShadowRoot == "function" && r.getShadowRoot(n), A = !h(f, !1) && (!r.shadowRootFilter || r.shadowRootFilter(n));
-        if (f && A) {
-          var p = g(f === !0 ? n.children : f.children, !0, r);
-          r.flatten ? a.push.apply(a, p) : a.push({
-            scopeParent: n,
-            candidates: p
-          });
-        } else
-          l.unshift.apply(l, n.children);
-      }
-  }
-  return a;
-}, C = function(t) {
-  return !isNaN(parseInt(t.getAttribute("tabindex"), 10));
-}, N = function(t) {
-  if (!t)
-    throw new Error("No node provided");
-  return t.tabIndex < 0 && (/^(AUDIO|VIDEO|DETAILS)$/.test(t.tagName) || x(t)) && !C(t) ? 0 : t.tabIndex;
-}, O = function(t, e) {
-  var r = N(t);
-  return r < 0 && e && !C(t) ? 0 : r;
-}, k = function(t, e) {
-  return t.tabIndex === e.tabIndex ? t.documentOrder - e.documentOrder : t.tabIndex - e.tabIndex;
-}, R = function(t) {
-  return t.tagName === "INPUT";
-}, F = function(t) {
-  return R(t) && t.type === "hidden";
-}, D = function(t) {
-  var e = t.tagName === "DETAILS" && Array.prototype.slice.apply(t.children).some(function(r) {
-    return r.tagName === "SUMMARY";
-  });
-  return e;
-}, M = function(t, e) {
-  for (var r = 0; r < t.length; r++)
-    if (t[r].checked && t[r].form === e)
-      return t[r];
-}, P = function(t) {
-  if (!t.name)
-    return !0;
-  var e = t.form || b(t), r = function(c) {
-    return e.querySelectorAll('input[type="radio"][name="' + c + '"]');
-  }, a;
-  if (typeof window < "u" && typeof window.CSS < "u" && typeof window.CSS.escape == "function")
-    a = r(window.CSS.escape(t.name));
-  else
-    try {
-      a = r(t.name);
-    } catch (n) {
-      return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", n.message), !1;
-    }
-  var l = M(a, t.form);
-  return !l || l === t;
-}, L = function(t) {
-  return R(t) && t.type === "radio";
-}, V = function(t) {
-  return L(t) && !P(t);
-}, B = function(t) {
-  var e, r = t && b(t), a = (e = r) === null || e === void 0 ? void 0 : e.host, l = !1;
-  if (r && r !== t) {
-    var n, c, o;
-    for (l = !!((n = a) !== null && n !== void 0 && (c = n.ownerDocument) !== null && c !== void 0 && c.contains(a) || t != null && (o = t.ownerDocument) !== null && o !== void 0 && o.contains(t)); !l && a; ) {
-      var u, s, f;
-      r = b(a), a = (u = r) === null || u === void 0 ? void 0 : u.host, l = !!((s = a) !== null && s !== void 0 && (f = s.ownerDocument) !== null && f !== void 0 && f.contains(a));
-    }
-  }
-  return l;
-}, w = function(t) {
-  var e = t.getBoundingClientRect(), r = e.width, a = e.height;
-  return r === 0 && a === 0;
-}, q = function(t, e) {
-  var r = e.displayCheck, a = e.getShadowRoot;
-  if (r === "full-native" && "checkVisibility" in t) {
-    var l = t.checkVisibility({
-      // Checking opacity might be desirable for some use cases, but natively,
-      // opacity zero elements _are_ focusable and tabbable.
-      checkOpacity: !1,
-      opacityProperty: !1,
-      contentVisibilityAuto: !0,
-      visibilityProperty: !0,
-      // This is an alias for `visibilityProperty`. Contemporary browsers
-      // support both. However, this alias has wider browser support (Chrome
-      // >= 105 and Firefox >= 106, vs. Chrome >= 121 and Firefox >= 122), so
-      // we include it anyway.
-      checkVisibilityCSS: !0
-    });
-    return !l;
-  }
-  if (getComputedStyle(t).visibility === "hidden")
-    return !0;
-  var n = d.call(t, "details>summary:first-of-type"), c = n ? t.parentElement : t;
-  if (d.call(c, "details:not([open]) *"))
-    return !0;
-  if (!r || r === "full" || // full-native can run this branch when it falls through in case
-  // Element#checkVisibility is unsupported
-  r === "full-native" || r === "legacy-full") {
-    if (typeof a == "function") {
-      for (var o = t; t; ) {
-        var u = t.parentElement, s = b(t);
-        if (u && !u.shadowRoot && a(u) === !0)
-          return w(t);
-        t.assignedSlot ? t = t.assignedSlot : !u && s !== t.ownerDocument ? t = s.host : t = u;
-      }
-      t = o;
-    }
-    if (B(t))
-      return !t.getClientRects().length;
-    if (r !== "legacy-full")
-      return !0;
-  } else if (r === "non-zero-area")
-    return w(t);
-  return !1;
-}, U = function(t) {
-  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(t.tagName))
-    for (var e = t.parentElement; e; ) {
-      if (e.tagName === "FIELDSET" && e.disabled) {
-        for (var r = 0; r < e.children.length; r++) {
-          var a = e.children.item(r);
-          if (a.tagName === "LEGEND")
-            return d.call(e, "fieldset[disabled] *") ? !0 : !a.contains(t);
-        }
-        return !0;
-      }
-      e = e.parentElement;
-    }
-  return !1;
-}, y = function(t, e) {
-  return !(e.disabled || F(e) || q(e, t) || // For a details element with a summary, the summary element gets the focus
-  D(e) || U(e));
-}, S = function(t, e) {
-  return !(V(e) || N(e) < 0 || !y(t, e));
-}, j = function(t) {
-  var e = parseInt(t.getAttribute("tabindex"), 10);
-  return !!(isNaN(e) || e >= 0);
-}, E = function(t) {
-  var e = [], r = [];
-  return t.forEach(function(a, l) {
-    var n = !!a.scopeParent, c = n ? a.scopeParent : a, o = O(c, n), u = n ? E(a.candidates) : c;
-    o === 0 ? n ? e.push.apply(e, u) : e.push(c) : r.push({
-      documentOrder: l,
-      tabIndex: o,
-      item: a,
-      isScope: n,
-      content: u
-    });
-  }), r.sort(k).reduce(function(a, l) {
-    return l.isScope ? a.push.apply(a, l.content) : a.push(l.content), a;
-  }, []).concat(e);
-}, Z = function(t, e) {
-  e = e || {};
-  var r;
-  return e.getShadowRoot ? r = g([t], e.includeContainer, {
-    filter: S.bind(null, e),
-    flatten: !1,
-    getShadowRoot: e.getShadowRoot,
-    shadowRootFilter: j
-  }) : r = m(t, e.includeContainer, S.bind(null, e)), E(r);
-}, z = function(t, e) {
-  e = e || {};
-  var r;
-  return e.getShadowRoot ? r = g([t], e.includeContainer, {
-    filter: y.bind(null, e),
-    flatten: !0,
-    getShadowRoot: e.getShadowRoot
-  }) : r = m(t, e.includeContainer, y.bind(null, e)), r;
-}, G = function(t, e) {
-  if (e = e || {}, !t)
-    throw new Error("No node provided");
-  return d.call(t, v) === !1 ? !1 : S(e, t);
-}, W = /* @__PURE__ */ T.concat("iframe:not([inert]):not([inert] *)").join(","), X = function(t, e) {
-  if (e = e || {}, !t)
-    throw new Error("No node provided");
-  return d.call(t, W) === !1 ? !1 : y(e, t);
+const p = ["top", "right", "bottom", "left"], l = ["start", "end"], L = /* @__PURE__ */ p.reduce((t, e) => t.concat(e, e + "-" + l[0], e + "-" + l[1]), []), h = Math.min, x = Math.max, E = Math.round, R = Math.floor, T = (t) => ({
+  x: t,
+  y: t
+}), b = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+}, d = {
+  start: "end",
+  end: "start"
 };
+function k(t, e, n) {
+  return x(t, h(e, n));
+}
+function q(t, e) {
+  return typeof t == "function" ? t(e) : t;
+}
+function g(t) {
+  return t.split("-")[0];
+}
+function m(t) {
+  return t.split("-")[1];
+}
+function A(t) {
+  return t === "x" ? "y" : "x";
+}
+function P(t) {
+  return t === "y" ? "height" : "width";
+}
+const y = /* @__PURE__ */ new Set(["top", "bottom"]);
+function M(t) {
+  return y.has(g(t)) ? "y" : "x";
+}
+function O(t) {
+  return A(M(t));
+}
+function z(t, e, n) {
+  n === void 0 && (n = !1);
+  const r = m(t), i = O(t), o = P(i);
+  let c = i === "x" ? r === (n ? "end" : "start") ? "right" : "left" : r === "start" ? "bottom" : "top";
+  return e.reference[o] > e.floating[o] && (c = f(c)), [c, f(c)];
+}
+function B(t) {
+  const e = f(t);
+  return [s(t), e, s(e)];
+}
+function s(t) {
+  return t.replace(/start|end/g, (e) => d[e]);
+}
+const u = ["left", "right"], a = ["right", "left"], S = ["top", "bottom"], w = ["bottom", "top"];
+function j(t, e, n) {
+  switch (t) {
+    case "top":
+    case "bottom":
+      return n ? e ? a : u : e ? u : a;
+    case "left":
+    case "right":
+      return e ? S : w;
+    default:
+      return [];
+  }
+}
+function D(t, e, n, r) {
+  const i = m(t);
+  let o = j(g(t), n === "start", r);
+  return i && (o = o.map((c) => c + "-" + i), e && (o = o.concat(o.map(s)))), o;
+}
+function f(t) {
+  return t.replace(/left|right|bottom|top/g, (e) => b[e]);
+}
+function C(t) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...t
+  };
+}
+function F(t) {
+  return typeof t != "number" ? C(t) : {
+    top: t,
+    right: t,
+    bottom: t,
+    left: t
+  };
+}
+function G(t) {
+  const {
+    x: e,
+    y: n,
+    width: r,
+    height: i
+  } = t;
+  return {
+    width: r,
+    height: i,
+    top: n,
+    left: e,
+    right: e + r,
+    bottom: n + i,
+    x: e,
+    y: n
+  };
+}
 export {
-  z as focusable,
-  N as getTabIndex,
-  X as isFocusable,
-  G as isTabbable,
-  Z as tabbable
+  l as alignments,
+  k as clamp,
+  T as createCoords,
+  q as evaluate,
+  C as expandPaddingObject,
+  R as floor,
+  m as getAlignment,
+  O as getAlignmentAxis,
+  z as getAlignmentSides,
+  P as getAxisLength,
+  B as getExpandedPlacements,
+  s as getOppositeAlignmentPlacement,
+  A as getOppositeAxis,
+  D as getOppositeAxisPlacements,
+  f as getOppositePlacement,
+  F as getPaddingObject,
+  g as getSide,
+  M as getSideAxis,
+  x as max,
+  h as min,
+  L as placements,
+  G as rectToClientRect,
+  E as round,
+  p as sides
 };

package/dist/kongponents.es273.js

@@ -1,182 +1,91 @@
-import { defineComponent as $, ref as u, computed as D, watch as L, onMounted as T, onBeforeMount as H, openBlock as c, createElementBlock as h, createVNode as o, withCtx as r, unref as f, createBlock as g, withModifiers as v, createSlots as K, createCommentVNode as N, createElementVNode as w, Fragment as P, renderList as z, createTextVNode as C, toDisplayString as E, nextTick as U } from "vue";
-import { debounce as q } from "./kongponents.es166.js";
-import A from "./kongponents.es175.js";
-import J from "./kongponents.es199.js";
-import R from "./kongponents.es268.js";
-import p from "./kongponents.es32.js";
-import F from "./kongponents.es36.js";
-import O from "./kongponents.es43.js";
-import j from "./kongponents.es44.js";
-import G from "./kongponents.es48.js";
-import Q from "./kongponents.es24.js";
-/* empty css                 */
-import W from "./kongponents.es50.js";
-const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, me = /* @__PURE__ */ $({
-  __name: "ColumnVisibilityMenu",
+import { defineComponent as x, useTemplateRef as _, openBlock as i, createElementBlock as r, Fragment as m, renderList as v, createBlock as u, withCtx as f, renderSlot as g, createElementVNode as S, toDisplayString as k, createTextVNode as h, createCommentVNode as B } from "vue";
+import E from "./kongponents.es203.js";
+const K = { ref: "itemsContainer" }, L = {
+  key: 1,
+  class: "select-group",
+  "data-propagate-clicks": "false"
+}, $ = { class: "select-group-title" }, V = { class: "select-item-description" }, A = ".select-item button:not(:disabled)", D = '.select-item[aria-selected="true"] button:not(:disabled)', q = /* @__PURE__ */ x({
+  __name: "KSelectItems",
   props: {
-    columns: {},
-    tableId: {},
-    visibilityPreferences: {},
-    disabled: { type: Boolean }
+    items: { default: () => [] },
+    itemCreationEnabled: { type: Boolean },
+    filterString: { default: "" },
+    itemCreationValid: { type: Boolean, default: !0 }
   },
-  emits: ["update"],
-  setup(a, { emit: V }) {
-    const x = V, y = u(!1), s = u({}), d = u(!1), n = u(), i = u(""), b = () => {
-      s.value = a.columns.reduce((e, t) => (e[t.key] = a.visibilityPreferences[t.key] === void 0 ? !0 : a.visibilityPreferences[t.key], e), {}), d.value = !1;
-    }, I = q((e) => {
-      i.value = e, n.value && m(n.value);
-    }, 500), k = D(() => i.value ? a.columns.filter((e) => (e.label ? e.label : e.key).toLowerCase().includes(i.value.toLowerCase())) : a.columns), S = () => {
-      x("update", JSON.parse(JSON.stringify(s.value))), d.value = !1, i.value = "";
-    }, B = (e) => {
-      y.value = e, e && n.value && U(() => {
-        n.value && m(n.value);
-      }), !e && d.value && b(), e || (i.value = "");
-    }, m = (e) => {
-      if (!(e.scrollHeight > e.clientHeight)) {
-        e.classList.remove("is-bottom-overflowing");
+  emits: ["selected", "add-item"],
+  setup(d, { expose: b, emit: y }) {
+    const I = y, p = (t) => "items" in t && Array.isArray(t.items), w = (t) => I("selected", t), C = _("itemsContainer"), T = (t) => {
+      var s, a;
+      const n = C.value;
+      if (!n)
         return;
+      const e = n.querySelectorAll(A);
+      if (!(e != null && e.length))
+        return;
+      const o = n.querySelector(D);
+      if (o) {
+        const l = [...e].indexOf(o);
+        (s = e[t === "down" ? l + 1 : l - 1]) == null || s.focus();
+      } else
+        (a = e[t === "down" ? 0 : e.length - 1]) == null || a.focus();
+    }, c = ({ target: t, key: n }) => {
+      var e;
+      if (n === "ArrowDown" || n === "ArrowUp") {
+        const o = (e = C.value) == null ? void 0 : e.querySelectorAll(A);
+        if (o != null && o.length) {
+          const s = [...o].indexOf(t), a = n === "ArrowDown" ? s + 1 : s - 1, l = o[a];
+          l == null || l.focus();
+        }
       }
-      const l = e.scrollHeight < e.clientHeight + e.scrollTop + 1;
-      e.classList.toggle("is-bottom-overflowing", !l);
     };
-    return L(() => a.visibilityPreferences, () => {
-      b();
-    }, { immediate: !0 }), T(() => {
-      n.value && (n.value.addEventListener("scroll", (e) => {
-        const t = e.currentTarget;
-        m(t);
-      }), m(n.value));
-    }), H(() => {
-      b();
-    }), (e, t) => (c(), h("div", X, [
-      o(O, {
-        "data-testid": "table-column-visibility-menu",
-        disabled: a.disabled,
-        "kpop-attributes": { placement: "bottom-end" },
-        onToggleDropdown: B
-      }, {
-        items: r(() => [
-          i.value || k.value.length > 5 ? (c(), g(G, {
-            key: 0,
-            modelValue: i.value,
-            "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
-            modelModifiers: { trim: !0 },
-            autocapitalize: "off",
-            autocomplete: "off",
-            autocorrect: "off",
-            class: "search-input",
-            "data-testid": "search-input",
-            name: "column-search",
-            placeholder: "Search columns",
-            spellcheck: "false",
-            type: "search",
-            onClick: t[2] || (t[2] = v(() => {
-            }, ["stop"])),
-            onInput: f(I)
-          }, K({
-            before: r(() => [
-              o(f(J), { decorative: "" })
+    return b({ setFocus: T }), (t, n) => (i(), r("div", K, [
+      (i(!0), r(m, null, v(d.items, (e, o) => (i(), r(m, {
+        key: p(e) ? `${e.key || e.label}-group` : e.key || e.value || o
+      }, [
+        p(e) ? (i(), r("div", L, [
+          S("span", $, k(e.label), 1),
+          (i(!0), r(m, null, v(e.items, (s) => (i(), u(E, {
+            key: s.key,
+            item: s,
+            onKeydown: c,
+            onSelected: w
+          }, {
+            content: f(() => [
+              g(t.$slots, "content", { item: s }, void 0, !0)
             ]),
             _: 2
-          }, [
-            i.value ? {
-              name: "after",
-              fn: r(() => [
-                o(p, {
-                  appearance: "tertiary",
-                  "aria-label": "Clear search",
-                  class: "clear-search",
-                  "data-testid": "clear-search-button",
-                  icon: "",
-                  size: "small",
-                  onClick: t[0] || (t[0] = v(() => i.value = "", ["stop"]))
-                }, {
-                  default: r(() => [
-                    o(f(A), { decorative: "" })
-                  ]),
-                  _: 1
-                })
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["modelValue", "onInput"])) : N("", !0),
-          w("div", {
-            ref_key: "menuItemsRef",
-            ref: n,
-            class: "menu-items-wrapper"
-          }, [
-            (c(!0), h(P, null, z(k.value, (l) => (c(), g(j, {
-              key: l.key,
-              class: "column-visibility-menu-item",
-              "data-testid": `column-visibility-menu-item-${l.key}`,
-              onClick: v(() => {
-                s.value[l.key] = !s.value[l.key], d.value = !0;
-              }, ["stop"])
-            }, {
-              default: r(() => [
-                o(F, {
-                  modelValue: s.value[l.key],
-                  "onUpdate:modelValue": (M) => s.value[l.key] = M,
-                  "aria-labelledby": `${a.tableId}-${l.key}-visibility-checkbox-label`,
-                  "data-testid": `column-visibility-checkbox-${l.key}`
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "aria-labelledby", "data-testid"]),
-                o(W, {
-                  id: `${a.tableId}-${l.key}-visibility-checkbox-label`,
-                  class: "visibility-checkbox-label",
-                  title: l.label
-                }, {
-                  default: r(() => [
-                    C(E(l.label), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["id", "title"])
-              ]),
-              _: 2
-            }, 1032, ["data-testid", "onClick"]))), 128))
-          ], 512),
-          w("div", Y, [
-            o(p, {
-              appearance: "tertiary",
-              class: "apply-button",
-              "data-testid": "apply-button",
-              onClick: S
-            }, {
-              default: r(() => [...t[3] || (t[3] = [
-                C(" Apply ", -1)
-              ])]),
-              _: 1
-            })
+          }, 1032, ["item"]))), 128))
+        ])) : (i(), u(E, {
+          key: 0,
+          item: e,
+          onKeydown: c,
+          onSelected: w
+        }, {
+          content: f(() => [
+            g(t.$slots, "content", { item: e }, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["item"]))
+      ], 64))), 128)),
+      d.itemCreationEnabled ? (i(), u(E, {
+        key: "select-add-item",
+        class: "select-add-item",
+        "data-testid": "select-add-item",
+        item: { label: `${d.filterString} (Add new value)`, value: "add_item", disabled: !d.itemCreationValid },
+        onKeydown: c,
+        onSelected: n[0] || (n[0] = (e) => t.$emit("add-item"))
+      }, {
+        content: f(() => [
+          S("div", V, [
+            h(k(d.filterString) + " ", 1),
+            n[1] || (n[1] = S("span", { class: "select-item-new-indicator" }, "(Add new value)", -1))
           ])
         ]),
-        default: r(() => [
-          o(Q, {
-            placement: "bottom-end",
-            text: y.value ? void 0 : "Show/Hide Columns"
-          }, {
-            default: r(() => [
-              o(p, {
-                appearance: "tertiary",
-                "aria-label": "Show/Hide Columns",
-                class: "menu-button",
-                "data-testid": "column-visibility-menu-button",
-                disabled: a.disabled,
-                icon: "",
-                size: "large"
-              }, {
-                default: r(() => [
-                  o(f(R), { decorative: "" })
-                ]),
-                _: 1
-              }, 8, ["disabled"])
-            ]),
-            _: 1
-          }, 8, ["text"])
-        ]),
         _: 1
-      }, 8, ["disabled"])
-    ]));
+      }, 8, ["item"])) : B("", !0)
+    ], 512));
   }
 });
 export {
-  me as default
+  q as default
 };