@apicurio/common-ui-components 1.0.4 → 1.0.6

package/dist/main.d.ts

@@ -1,2 +1,3 @@
 export * from "./common";
 export * from "./modals";
+export * from "./table";

package/dist/main.js

@@ -1,89 +1,90 @@
-import { jsx as t, jsxs as g } from "react/jsx-runtime";
-import f, { useState as u, useEffect as E } from "react";
-import { EmptyState as k, EmptyStateVariant as U, EmptyStateHeader as j, EmptyStateBody as B, Spinner as S, Alert as M, Dropdown as R, MenuToggle as N, DropdownList as V, Divider as O, DropdownItem as $, Select as H, SelectOption as W, TextInput as _, Button as w, TextArea as z, AboutModal as K, TextContent as G, Text as x, TextVariants as y, TextList as C, TextListItem as r, Modal as p, Progress as q } from "@patternfly/react-core";
-import { EllipsisVIcon as J } from "@patternfly/react-icons";
-const v = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e : e())() ? /* @__PURE__ */ t(f.Fragment, { children: n }) : /* @__PURE__ */ t(f.Fragment, {}), te = ({ collection: e, emptyState: n, emptyStateTitle: a, emptyStateMessage: i, children: c }) => {
-  const d = () => !e || e.length === 0, s = n || /* @__PURE__ */ g(k, { variant: U.xs, children: [
-    /* @__PURE__ */ t(j, { titleText: a || "None found", headingLevel: "h4" }),
-    /* @__PURE__ */ t(B, { children: i || "No items found." })
+import { jsx as t, jsxs as g, Fragment as ie } from "react/jsx-runtime";
+import y, { useState as v, useEffect as D, useRef as w, useCallback as L, useMemo as j, memo as V, forwardRef as E } from "react";
+import { EmptyState as re, EmptyStateVariant as be, EmptyStateHeader as oe, EmptyStateBody as pe, Spinner as A, Alert as Te, Dropdown as Se, MenuToggle as H, DropdownList as Ie, Divider as le, DropdownItem as ye, Select as G, SelectOption as K, TextInput as Ce, Button as X, TextArea as we, AboutModal as xe, TextContent as Ne, Text as Y, TextVariants as Z, TextList as ee, TextListItem as f, Modal as ae, Progress as Oe, EmptyStateIcon as Re, Pagination as _e, PaginationVariant as ke, Skeleton as Fe, SearchInput as Le, SelectList as $e, ToolbarItem as De, InputGroup as Ee, ToolbarToggleGroup as ze, ToolbarGroup as Pe, ToolbarFilter as Ae } from "@patternfly/react-core";
+import { EllipsisVIcon as He, FilterIcon as ce } from "@patternfly/react-icons";
+import { Tr as z, Td as q, Th as We, Table as Be, Thead as Me, Tbody as je, ActionsColumn as Ue } from "@patternfly/react-table";
+const C = ({ condition: e, children: n }) => (typeof e == "boolean" ? e : e()) ? /* @__PURE__ */ t(y.Fragment, { children: n }) : /* @__PURE__ */ t(y.Fragment, {}), nt = ({ collection: e, emptyState: n, emptyStateTitle: i, emptyStateMessage: r, children: c }) => {
+  const d = () => !e || e.length === 0, l = n || /* @__PURE__ */ g(re, { variant: be.xs, children: [
+    /* @__PURE__ */ t(oe, { titleText: i || "None found", headingLevel: "h4" }),
+    /* @__PURE__ */ t(pe, { children: r || "No items found." })
   ] });
-  return d() ? /* @__PURE__ */ t(f.Fragment, { children: s }) : /* @__PURE__ */ t(f.Fragment, { children: c });
-}, T = ({ isLoading: e, loadingComponent: n, children: a }) => {
-  const i = () => typeof e == "boolean" ? e : e(), c = n || /* @__PURE__ */ t(S, {});
-  return i() ? /* @__PURE__ */ t(f.Fragment, { children: c }) : /* @__PURE__ */ t(f.Fragment, { children: a });
-}, ne = ({ toolbar: e, alwaysShowToolbar: n, emptyState: a, filteredEmptyState: i, isLoading: c, isError: d, loadingComponent: s, errorComponent: m, isEmpty: l, isFiltered: o, children: h }) => {
-  const I = n || !l || o || d;
-  return m || (m = /* @__PURE__ */ t("div", { style: { padding: "15px", backgroundColor: "white" }, children: /* @__PURE__ */ t(M, { isInline: !0, variant: "danger", title: "Error: Something went wrong!", children: /* @__PURE__ */ t("p", { children: "Something went wrong with the action you attempted, but we're not sure what it was. Try reloading the page and hopef for a better result, or contact your admin to report the error." }) }) })), /* @__PURE__ */ g(f.Fragment, { children: [
-    /* @__PURE__ */ t(v, { condition: I, children: e }),
-    /* @__PURE__ */ g(T, { isLoading: c, loadingComponent: s, children: [
-      /* @__PURE__ */ t(v, { condition: !l && !d, children: h }),
-      /* @__PURE__ */ t(v, { condition: l && o && !d, children: i }),
-      /* @__PURE__ */ t(v, { condition: l && !o && !d, children: a }),
-      /* @__PURE__ */ t(v, { condition: d, children: m })
+  return d() ? /* @__PURE__ */ t(y.Fragment, { children: l }) : /* @__PURE__ */ t(y.Fragment, { children: c });
+}, P = ({ isLoading: e, loadingComponent: n, children: i }) => {
+  const r = () => typeof e == "boolean" ? e : e(), c = n || /* @__PURE__ */ t(A, {});
+  return r() ? /* @__PURE__ */ t(y.Fragment, { children: c }) : /* @__PURE__ */ t(y.Fragment, { children: i });
+}, it = ({ toolbar: e, alwaysShowToolbar: n, emptyState: i, filteredEmptyState: r, isLoading: c, isError: d, loadingComponent: l, errorComponent: o, isEmpty: a, isFiltered: s, children: h }) => {
+  const b = n || !a || s || d;
+  return o || (o = /* @__PURE__ */ t("div", { style: { padding: "15px", backgroundColor: "white" }, children: /* @__PURE__ */ t(Te, { isInline: !0, variant: "danger", title: "Error: Something went wrong!", children: /* @__PURE__ */ t("p", { children: "Something went wrong with the action you attempted, but we're not sure what it was. Try reloading the page and hopef for a better result, or contact your admin to report the error." }) }) })), /* @__PURE__ */ g(y.Fragment, { children: [
+    /* @__PURE__ */ t(C, { condition: b, children: e }),
+    /* @__PURE__ */ g(P, { isLoading: c, loadingComponent: l, children: [
+      /* @__PURE__ */ t(C, { condition: !a && !d, children: h }),
+      /* @__PURE__ */ t(C, { condition: a && s && !d, children: r }),
+      /* @__PURE__ */ t(C, { condition: a && !s && !d, children: i }),
+      /* @__PURE__ */ t(C, { condition: d, children: o })
     ] })
   ] });
-}, le = (e) => {
-  const [n, a] = u(!1), i = (l, o) => {
-    a(!1);
-    const h = o;
+}, rt = (e) => {
+  const [n, i] = v(!1), r = (a, s) => {
+    i(!1);
+    const h = s;
     h !== void 0 && h >= 0 ? e.onSelect(e.items[h]) : e.onSelect(void 0);
   }, c = () => {
-    a(!n);
-  }, d = (l) => {
-    let o;
-    return e.itemToTestId !== void 0 && (o = e.itemToTestId(l)), o;
-  }, s = e.popperProps || {
+    i(!n);
+  }, d = (a) => {
+    let s;
+    return e.itemToTestId !== void 0 && (s = e.itemToTestId(a)), s;
+  }, l = e.popperProps || {
     appendTo: e.menuAppendTo
   };
-  let m = /* @__PURE__ */ t(J, { title: e.label });
-  return e.isKebab || (m = /* @__PURE__ */ t(f.Fragment, { children: e.label })), /* @__PURE__ */ t(
-    R,
+  let o = /* @__PURE__ */ t(He, { title: e.label });
+  return e.isKebab || (o = /* @__PURE__ */ t(y.Fragment, { children: e.label })), /* @__PURE__ */ t(
+    Se,
     {
       isOpen: n,
-      onSelect: i,
-      onOpenChange: (l) => a(l),
-      toggle: (l) => /* @__PURE__ */ t(
-        N,
+      onSelect: r,
+      onOpenChange: (a) => i(a),
+      toggle: (a) => /* @__PURE__ */ t(
+        H,
         {
           "data-testid": e.testId,
-          ref: l,
+          ref: a,
           onClick: c,
           isExpanded: n,
           variant: e.isKebab ? "plain" : "default",
-          children: m
+          children: o
         }
       ),
       ouiaId: "ObjectDropdown",
-      popperProps: s,
+      popperProps: l,
       shouldFocusToggleOnSelect: !0,
-      children: /* @__PURE__ */ t(V, { children: e.items.map((l, o) => e.itemIsDivider && e.itemIsDivider(l) ? /* @__PURE__ */ t(O, { component: "li" }, `divider-${o}`) : /* @__PURE__ */ t(
-        $,
+      children: /* @__PURE__ */ t(Ie, { children: e.items.map((a, s) => e.itemIsDivider && e.itemIsDivider(a) ? /* @__PURE__ */ t(le, { component: "li" }, `divider-${s}`) : /* @__PURE__ */ t(
+        ye,
         {
-          value: o,
-          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(l) }),
-          children: e.itemToString(l)
+          value: s,
+          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(a) }),
+          children: e.itemToString(a)
         },
-        `action-${o}`
+        `action-${s}`
       )) })
     }
   );
-}, ie = (e) => {
-  var m;
-  const [n, a] = u(!1), i = (l, o) => {
-    a(!1), e.onSelect(e.items[o]);
+}, ot = (e) => {
+  var o;
+  const [n, i] = v(!1), r = (a, s) => {
+    i(!1), e.onSelect(e.items[s]);
   }, c = () => {
-    a(!n);
-  }, d = (l) => {
-    let o;
-    return e.itemToTestId !== void 0 && (o = e.itemToTestId(l)), o;
+    i(!n);
+  }, d = (a) => {
+    let s;
+    return e.itemToTestId !== void 0 && (s = e.itemToTestId(a)), s;
   };
   return /* @__PURE__ */ t(
-    H,
+    G,
     {
-      toggle: (l) => /* @__PURE__ */ t(
-        N,
+      toggle: (a) => /* @__PURE__ */ t(
+        H,
         {
-          ref: l,
+          ref: a,
           className: e.toggleClassname || "menu-toggle",
           onClick: c,
           "data-testid": e.testId,
@@ -92,87 +93,87 @@ const v = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
         }
       ),
       id: e.toggleId,
-      onSelect: i,
-      onOpenChange: a,
+      onSelect: r,
+      onOpenChange: i,
       isOpen: n,
-      children: (m = e.items) == null ? void 0 : m.map((l, o) => e.itemIsDivider && e.itemIsDivider(l) ? /* @__PURE__ */ t(O, {}, o) : /* @__PURE__ */ t(
-        W,
+      children: (o = e.items) == null ? void 0 : o.map((a, s) => e.itemIsDivider && e.itemIsDivider(a) ? /* @__PURE__ */ t(le, {}, s) : /* @__PURE__ */ t(
+        K,
         {
-          isSelected: l === e.value,
-          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(l) }),
-          value: o,
-          children: e.itemToString(l)
+          isSelected: a === e.value,
+          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(a) }),
+          value: s,
+          children: e.itemToString(a)
         },
-        o
+        s
       ))
     }
   );
-}, D = {
+}, de = {
   padding: "5px",
   minHeight: "128px",
   borderRight: 0,
   borderLeft: 0,
   borderBottom: "1px solid #666",
   backgroundColor: "rgb(240, 240, 240)"
-}, Q = {
-  ...D,
+}, Ve = {
+  ...de,
   color: "red",
   overflow: "auto"
-}, oe = (e) => {
-  const [n, a] = u(""), [i, c] = u(""), [d, s] = u(!1), [m, l] = u(), o = (b, P) => {
-    a(P);
-  }, h = () => n != null && n.trim().length > 0, I = () => m != null && m.trim().length > 0, L = () => {
-    s(!0), e.onUrlFetch(n).then((b) => {
-      l(void 0), c(b), s(!1), e.onChange(b, n);
-    }).catch((b) => {
-      l(b.message), s(!1);
+}, lt = (e) => {
+  const [n, i] = v(""), [r, c] = v(""), [d, l] = v(!1), [o, a] = v(), s = (p, O) => {
+    i(O);
+  }, h = () => n != null && n.trim().length > 0, b = () => o != null && o.trim().length > 0, x = () => {
+    l(!0), e.onUrlFetch(n).then((p) => {
+      a(void 0), c(p), l(!1), e.onChange(p, n);
+    }).catch((p) => {
+      a(p.message), l(!1);
     });
-  }, F = () => {
-    a(""), c(""), e.onChange(void 0, void 0);
-  }, A = /* @__PURE__ */ g("div", { className: "url-upload-loading", style: D, children: [
-    /* @__PURE__ */ t(S, { size: "md", className: "spinner", style: { marginRight: "5px" } }),
+  }, S = () => {
+    i(""), c(""), e.onChange(void 0, void 0);
+  }, N = /* @__PURE__ */ g("div", { className: "url-upload-loading", style: de, children: [
+    /* @__PURE__ */ t(A, { size: "md", className: "spinner", style: { marginRight: "5px" } }),
     /* @__PURE__ */ t("span", { className: "spinner-message", children: "Loading URL content" })
   ] });
   return /* @__PURE__ */ g("div", { className: "url-upload", "data-testid": e.testId, children: [
     /* @__PURE__ */ g("div", { className: "url-upload-flex", style: { display: "flex" }, children: [
       /* @__PURE__ */ t("div", { className: "url-upload-url", style: { flexGrow: 1 }, children: /* @__PURE__ */ t(
-        _,
+        Ce,
         {
           "data-testid": `${e.testId}-input`,
           value: n,
           type: "text",
           placeholder: e.urlPlaceholder,
           id: e.id,
-          onChange: o,
+          onChange: s,
           "aria-label": "url input"
         }
       ) }),
-      /* @__PURE__ */ t("div", { className: "url-fetch-button", children: /* @__PURE__ */ t(w, { "data-testid": `${e.testId}-fetch`, variant: "control", isDisabled: !h(), onClick: L, children: "Fetch" }) }),
-      /* @__PURE__ */ t("div", { className: "url-clear-button", children: /* @__PURE__ */ t(w, { "data-testid": `${e.testId}-clear`, variant: "control", isDisabled: !h(), onClick: F, children: "Clear" }) })
+      /* @__PURE__ */ t("div", { className: "url-fetch-button", children: /* @__PURE__ */ t(X, { "data-testid": `${e.testId}-fetch`, variant: "control", isDisabled: !h(), onClick: x, children: "Fetch" }) }),
+      /* @__PURE__ */ t("div", { className: "url-clear-button", children: /* @__PURE__ */ t(X, { "data-testid": `${e.testId}-clear`, variant: "control", isDisabled: !h(), onClick: S, children: "Clear" }) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "url-upload-preview", children: /* @__PURE__ */ g(T, { isLoading: d, loadingComponent: A, children: [
-      /* @__PURE__ */ t(v, { condition: I, children: /* @__PURE__ */ g("div", { className: "url-upload-error", style: Q, children: [
+    /* @__PURE__ */ t("div", { className: "url-upload-preview", children: /* @__PURE__ */ g(P, { isLoading: d, loadingComponent: N, children: [
+      /* @__PURE__ */ t(C, { condition: b, children: /* @__PURE__ */ g("div", { className: "url-upload-error", style: Ve, children: [
         /* @__PURE__ */ t("div", { children: "Error getting content from URL." }),
-        /* @__PURE__ */ t("div", { children: m })
+        /* @__PURE__ */ t("div", { children: o })
       ] }) }),
-      /* @__PURE__ */ t(v, { condition: !I(), children: /* @__PURE__ */ t(
-        z,
+      /* @__PURE__ */ t(C, { condition: !b(), children: /* @__PURE__ */ t(
+        we,
         {
           "data-testid": `${e.testId}-preview`,
           "aria-label": "url-content",
-          value: i,
+          value: r,
           readOnly: !0,
           style: { minHeight: "128px" }
         }
       ) })
     ] }) })
   ] });
-}, ae = (e) => {
-  const [n, a] = u(), [i, c] = u(), d = (s) => typeof s == "string" ? s : s === void 0 ? "" : s.toDateString();
-  return E(() => {
-    e.isOpen && (typeof e.frontendInfo == "function" ? e.frontendInfo().then(a) : a(e.frontendInfo), typeof e.backendInfo == "function" ? e.backendInfo().then(c) : c(e.backendInfo));
+}, at = (e) => {
+  const [n, i] = v(), [r, c] = v(), d = (l) => typeof l == "string" ? l : l === void 0 ? "" : l.toDateString();
+  return D(() => {
+    e.isOpen && (typeof e.frontendInfo == "function" ? e.frontendInfo().then(i) : i(e.frontendInfo), typeof e.backendInfo == "function" ? e.backendInfo().then(c) : c(e.backendInfo));
   }, [e.isOpen]), /* @__PURE__ */ t(
-    K,
+    xe,
     {
       className: "app-about-modal",
       isOpen: e.isOpen,
@@ -181,34 +182,34 @@ const v = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
       brandImageSrc: e.brandImageSrc,
       brandImageAlt: e.brandImageAlt,
       "aria-label": e.brandImageAlt,
-      children: /* @__PURE__ */ g(G, { className: "app-about-modal-content", style: { marginTop: "-25px" }, children: [
-        /* @__PURE__ */ t(x, { component: y.h2, children: "Web console info" }),
-        /* @__PURE__ */ t(T, { isLoading: n === void 0, children: /* @__PURE__ */ g(C, { component: "dl", children: [
-          /* @__PURE__ */ t(r, { component: "dt", children: "Project" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: /* @__PURE__ */ t("a", { href: n == null ? void 0 : n.url, target: "_blank", children: n == null ? void 0 : n.name }) }),
-          /* @__PURE__ */ t(r, { component: "dt", children: "Version" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: n == null ? void 0 : n.version }),
-          /* @__PURE__ */ t(r, { component: "dt", children: "Built on" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: d(n == null ? void 0 : n.builtOn) }),
-          /* @__PURE__ */ t(r, { component: "dt", children: "Digest" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: n == null ? void 0 : n.digest })
+      children: /* @__PURE__ */ g(Ne, { className: "app-about-modal-content", style: { marginTop: "-25px" }, children: [
+        /* @__PURE__ */ t(Y, { component: Z.h2, children: "Web console info" }),
+        /* @__PURE__ */ t(P, { isLoading: n === void 0, children: /* @__PURE__ */ g(ee, { component: "dl", children: [
+          /* @__PURE__ */ t(f, { component: "dt", children: "Project" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: /* @__PURE__ */ t("a", { href: n == null ? void 0 : n.url, target: "_blank", children: n == null ? void 0 : n.name }) }),
+          /* @__PURE__ */ t(f, { component: "dt", children: "Version" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: n == null ? void 0 : n.version }),
+          /* @__PURE__ */ t(f, { component: "dt", children: "Built on" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: d(n == null ? void 0 : n.builtOn) }),
+          /* @__PURE__ */ t(f, { component: "dt", children: "Digest" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: n == null ? void 0 : n.digest })
         ] }) }),
-        /* @__PURE__ */ t(x, { style: { marginTop: "40px" }, component: y.h2, children: e.backendLabel }),
-        /* @__PURE__ */ t(T, { isLoading: i === void 0, children: /* @__PURE__ */ g(C, { component: "dl", children: [
-          /* @__PURE__ */ t(r, { component: "dt", children: "Name" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: (i == null ? void 0 : i.name) || "" }),
-          /* @__PURE__ */ t(r, { component: "dt", children: "Description" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: (i == null ? void 0 : i.description) || "" }),
-          /* @__PURE__ */ t(r, { component: "dt", children: "Version" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: (i == null ? void 0 : i.version) || "" }),
-          /* @__PURE__ */ t(r, { component: "dt", children: "Built on" }),
-          /* @__PURE__ */ t(r, { component: "dd", children: d(i == null ? void 0 : i.builtOn) })
+        /* @__PURE__ */ t(Y, { style: { marginTop: "40px" }, component: Z.h2, children: e.backendLabel }),
+        /* @__PURE__ */ t(P, { isLoading: r === void 0, children: /* @__PURE__ */ g(ee, { component: "dl", children: [
+          /* @__PURE__ */ t(f, { component: "dt", children: "Name" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: (r == null ? void 0 : r.name) || "" }),
+          /* @__PURE__ */ t(f, { component: "dt", children: "Description" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: (r == null ? void 0 : r.description) || "" }),
+          /* @__PURE__ */ t(f, { component: "dt", children: "Version" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: (r == null ? void 0 : r.version) || "" }),
+          /* @__PURE__ */ t(f, { component: "dt", children: "Built on" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: d(r == null ? void 0 : r.builtOn) })
         ] }) })
       ] })
     }
   );
-}, de = (e) => /* @__PURE__ */ g(
-  p,
+}, ct = (e) => /* @__PURE__ */ g(
+  ae,
   {
     title: "Please Wait",
     variant: "small",
@@ -219,12 +220,12 @@ const v = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
     "aria-label": "please-wait-modal",
     style: { marginTop: "-15px" },
     children: [
-      /* @__PURE__ */ t(S, { size: "md", className: "spinner" }),
+      /* @__PURE__ */ t(A, { size: "md", className: "spinner" }),
       /* @__PURE__ */ t("span", { className: "message", style: { fontSize: "15px", color: "#333", marginLeft: "10px" }, children: e.message })
     ]
   }
-), re = (e) => /* @__PURE__ */ t(
-  p,
+), dt = (e) => /* @__PURE__ */ t(
+  ae,
   {
     title: e.title,
     variant: "small",
@@ -233,18 +234,506 @@ const v = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
     onClose: e.onClose,
     className: "progress pf-m-redhat-font",
     "aria-label": "progress-modal",
-    children: /* @__PURE__ */ t(q, { title: e.message, value: e.progress })
+    children: /* @__PURE__ */ t(Oe, { title: e.message, value: e.progress })
   }
 );
+function st() {
+  return /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(
+    oe,
+    {
+      titleText: "Loading",
+      headingLevel: "h4",
+      icon: /* @__PURE__ */ t(Re, { icon: A })
+    }
+  ) });
+}
+function ht({
+  itemCount: e,
+  page: n,
+  perPage: i,
+  isCompact: r = !1,
+  onChange: c,
+  variant: d = ke.top
+}) {
+  return /* @__PURE__ */ t(
+    _e,
+    {
+      itemCount: e,
+      page: n,
+      perPage: i,
+      onSetPage: (l, o) => c(o, i),
+      onPerPageSelect: (l, o) => c(1, o),
+      variant: d,
+      isCompact: r
+    }
+  );
+}
+function Ge(e, n) {
+  var i = w(null), r = w(null);
+  r.current = n;
+  var c = w(null);
+  D(function() {
+    d();
+  });
+  var d = L(function() {
+    var l = c.current, o = r.current, a = l || (o ? o instanceof Element ? o : o.current : null);
+    i.current && i.current.element === a && i.current.subscriber === e || (i.current && i.current.cleanup && i.current.cleanup(), i.current = {
+      element: a,
+      subscriber: e,
+      // Only calling the subscriber, if there's an actual element to report.
+      // Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.
+      cleanup: a ? e(a) : void 0
+    });
+  }, [e]);
+  return D(function() {
+    return function() {
+      i.current && i.current.cleanup && (i.current.cleanup(), i.current = null);
+    };
+  }, []), L(function(l) {
+    c.current = l, d();
+  }, [d]);
+}
+function te(e, n, i) {
+  return e[n] ? e[n][0] ? e[n][0][i] : (
+    // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
+    // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
+    // @ts-ignore
+    e[n][i]
+  ) : n === "contentBoxSize" ? e.contentRect[i === "inlineSize" ? "width" : "height"] : void 0;
+}
+function Ke(e) {
+  e === void 0 && (e = {});
+  var n = e.onResize, i = w(void 0);
+  i.current = n;
+  var r = e.round || Math.round, c = w(), d = v({
+    width: void 0,
+    height: void 0
+  }), l = d[0], o = d[1], a = w(!1);
+  D(function() {
+    return a.current = !1, function() {
+      a.current = !0;
+    };
+  }, []);
+  var s = w({
+    width: void 0,
+    height: void 0
+  }), h = Ge(L(function(b) {
+    return (!c.current || c.current.box !== e.box || c.current.round !== r) && (c.current = {
+      box: e.box,
+      round: r,
+      instance: new ResizeObserver(function(x) {
+        var S = x[0], N = e.box === "border-box" ? "borderBoxSize" : e.box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize", p = te(S, N, "inlineSize"), O = te(S, N, "blockSize"), T = p ? r(p) : void 0, _ = O ? r(O) : void 0;
+        if (s.current.width !== T || s.current.height !== _) {
+          var R = {
+            width: T,
+            height: _
+          };
+          s.current.width = T, s.current.height = _, i.current ? i.current(R) : a.current || o(R);
+        }
+      })
+    }), c.current.instance.observe(b, {
+      box: e.box
+    }), function() {
+      c.current && c.current.instance.unobserve(b);
+    };
+  }, [e.box, r]), e.ref);
+  return j(function() {
+    return {
+      ref: h,
+      width: l.width,
+      height: l.height
+    };
+  }, [h, l.width, l.height]);
+}
+function qe({ columns: e, rows: n, getTd: i = () => q }) {
+  const r = new Array(e).fill(0).map((d, l) => {
+    const o = i(l);
+    return /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(
+      Fe,
+      {
+        screenreaderText: l === 0 ? "Loading data" : void 0
+      }
+    ) }, `cell_${l}`);
+  }), c = new Array(n).fill(0).map((d, l) => /* @__PURE__ */ t(z, { children: r }, `row_${l}`));
+  return /* @__PURE__ */ t(ie, { children: c });
+}
+const ut = ({
+  ariaLabel: e,
+  minimumColumnWidth: n = 250,
+  columns: i,
+  data: r,
+  renderHeader: c,
+  renderCell: d,
+  renderActions: l,
+  isColumnSortable: o,
+  isRowDeleted: a,
+  isRowSelected: s,
+  expectedLength: h = 3,
+  onRowClick: b,
+  setActionCellOuiaId: x,
+  setRowOuiaId: S,
+  tableOuiaId: N,
+  children: p,
+  variant: O
+}) => {
+  const [T, _] = v(1e3);
+  let R;
+  const ue = ({ width: u }) => {
+    R && cancelAnimationFrame(R), u && (R = requestAnimationFrame(() => {
+      _(u);
+    }));
+  }, { ref: me } = Ke({ onResize: ue }), W = T >= 576, $ = L(
+    (u) => W && u !== 0 && u !== i.length - 1,
+    [i, W]
+  ), ge = j(() => i.map((u, m) => {
+    const I = E(
+      ({ children: k, ...F }, M) => /* @__PURE__ */ t(
+        se,
+        {
+          position: m,
+          tableWidth: T,
+          columnWidth: n,
+          canHide: $(m),
+          sort: o ? o(u) : void 0,
+          ...F,
+          ref: M,
+          children: k
+        }
+      )
+    );
+    return I.displayName = "ResponsiveThCurried", c({
+      Th: I,
+      key: `header_${u}`,
+      column: u,
+      colIndex: m
+    });
+  }), [
+    $,
+    i,
+    o,
+    n,
+    c,
+    T
+  ]), B = L(
+    (u) => {
+      const m = E(
+        ({ children: I, ...k }, F) => /* @__PURE__ */ t(
+          U,
+          {
+            position: u,
+            tableWidth: T,
+            columnWidth: n,
+            canHide: $(u),
+            ...k,
+            ref: F,
+            children: I
+          }
+        )
+      );
+      return m.displayName = "ResponsiveTdCurried", m;
+    },
+    [$, n, T]
+  ), fe = j(
+    () => i.map((u, m) => B(m)),
+    [i, B]
+  );
+  return /* @__PURE__ */ g(
+    Be,
+    {
+      "aria-label": e,
+      gridBreakPoint: "",
+      ref: me,
+      className: W ? "" : "pf-m-grid",
+      ouiaId: N,
+      variant: O,
+      children: [
+        /* @__PURE__ */ t(Me, { children: /* @__PURE__ */ t(z, { children: ge }) }),
+        /* @__PURE__ */ g(je, { children: [
+          r === void 0 && /* @__PURE__ */ t(
+            qe,
+            {
+              columns: i.length,
+              rows: h,
+              getTd: B
+            }
+          ),
+          r == null ? void 0 : r.map((u, m) => {
+            const I = a !== void 0 && a({ row: u, rowIndex: m }), k = s !== void 0 && s({ row: u, rowIndex: m }), F = !I && b ? () => b({ row: u, rowIndex: m }) : void 0, M = i.map((J, Q) => d({
+              Td: fe[Q],
+              key: `row_${m}_cell_${J}`,
+              column: J,
+              colIndex: Q,
+              rowIndex: m,
+              row: u
+            })), ve = !I && l && /* @__PURE__ */ t(
+              U,
+              {
+                position: i.length,
+                tableWidth: T,
+                columnWidth: n,
+                canHide: !1,
+                isActionCell: !0,
+                "data-testid": x ? x({ row: u, rowIndex: m }) : `actions-for-row-${m}`,
+                children: l({ rowIndex: m, row: u, ActionsColumn: Ue })
+              }
+            );
+            return /* @__PURE__ */ g(
+              he,
+              {
+                isDeleted: I,
+                isSelected: k,
+                onClick: F,
+                rowOuiaId: S == null ? void 0 : S({ row: u, rowIndex: m }),
+                children: [
+                  M,
+                  ve
+                ]
+              },
+              `row_${m}`
+            );
+          }),
+          (r == null ? void 0 : r.length) === 0 && /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(q, { colSpan: i.length, children: p }) })
+        ] })
+      ]
+    }
+  );
+}, se = V(
+  E((e, n) => {
+    const {
+      tableWidth: i,
+      columnWidth: r,
+      position: c,
+      canHide: d,
+      className: l = "",
+      children: o,
+      ...a
+    } = e, s = d && i < r * (c + 1) ? "pf-m-hidden" : "pf-m-visible";
+    return /* @__PURE__ */ t(
+      We,
+      {
+        ref: n,
+        className: `${s} ${l}`,
+        ...a,
+        children: o
+      }
+    );
+  })
+);
+se.displayName = "ResponsiveTh";
+const U = V(
+  E((e, n) => {
+    const {
+      tableWidth: i,
+      columnWidth: r,
+      position: c,
+      canHide: d,
+      className: l = "",
+      children: o,
+      ...a
+    } = e, s = d && i < r * (c + 1) ? "pf-m-hidden" : "pf-m-visible";
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: n,
+        className: `${s} ${l}`,
+        ...a,
+        children: o
+      }
+    );
+  })
+);
+U.displayName = "ResponsiveTd";
+const he = V(
+  ({ isDeleted: e, isSelected: n, onClick: i, children: r, rowOuiaId: c }) => /* @__PURE__ */ t(
+    z,
+    {
+      onRowClick: (d) => {
+        (d == null ? void 0 : d.target) instanceof HTMLElement && (["a", "button"].includes(d.target.tagName.toLowerCase()) || i && i());
+      },
+      ouiaId: c,
+      isRowSelected: n,
+      className: e ? "mas--ResponsiveTable__Tr--deleted" : void 0,
+      "data-testid": [n && "row-selected", e && "row-deleted"].filter((d) => !!d).join(" "),
+      role: "row",
+      children: r
+    }
+  )
+);
+he.displayName = "DeletableRow";
+const Je = ({ label: e, onSearch: n }) => {
+  const i = (r, c, d) => {
+    n(c);
+  };
+  return /* @__PURE__ */ t(
+    Le,
+    {
+      placeholder: `Filter by ${e}`,
+      onSearch: i
+    }
+  );
+};
+function ne({
+  options: e,
+  value: n,
+  onChange: i,
+  ouiaId: r
+}) {
+  const [c, d] = v(!1);
+  return /* @__PURE__ */ t(
+    G,
+    {
+      toggle: (o) => /* @__PURE__ */ t(
+        H,
+        {
+          ref: o,
+          onClick: () => d((a) => !a),
+          isExpanded: c,
+          variant: "plain",
+          children: /* @__PURE__ */ t(ce, {})
+        }
+      ),
+      "aria-label": "table:select_filter",
+      selected: n,
+      isOpen: c,
+      onSelect: (o, a) => {
+        i(a), d(!1);
+      },
+      ouiaId: r,
+      children: /* @__PURE__ */ t($e, { children: e.map((o, a) => /* @__PURE__ */ t(K, { value: o, children: o }, a)) })
+    }
+  );
+}
+function Qe({
+  label: e,
+  chips: n,
+  options: i,
+  onToggle: r
+}) {
+  const [c, d] = v(!1);
+  return /* @__PURE__ */ t(
+    G,
+    {
+      "aria-label": e,
+      onSelect: (l, o) => {
+        r(o);
+      },
+      selected: n,
+      isOpen: c,
+      toggle: (l) => /* @__PURE__ */ t(
+        H,
+        {
+          ref: l,
+          onClick: () => d((o) => !o),
+          isExpanded: c,
+          style: {
+            width: "200px"
+          },
+          children: `Filter by ${e}`
+        }
+      ),
+      children: Object.entries(i).map(([l, o]) => /* @__PURE__ */ t(K, { value: l, hasCheckbox: !0, children: o }, l))
+    }
+  );
+}
+function mt({ filters: e, breakpoint: n = "md" }) {
+  const i = Object.keys(e), [r, c] = v(i[0]), d = (l, o) => {
+    switch (o.type) {
+      case "search":
+        return /* @__PURE__ */ t(
+          Je,
+          {
+            onSearch: o.onSearch,
+            label: l,
+            validate: o.validate,
+            errorMessage: o.errorMessage
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ t(
+          Qe,
+          {
+            chips: o.chips,
+            options: o.options,
+            onToggle: o.onToggle,
+            label: l
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ g(ie, { children: [
+    /* @__PURE__ */ t(
+      De,
+      {
+        variant: "search-filter",
+        visibility: { default: "hidden", [n]: "visible" },
+        "data-testid": "large-viewport-toolbar",
+        children: /* @__PURE__ */ g(Ee, { children: [
+          i.length > 1 && /* @__PURE__ */ t(
+            ne,
+            {
+              options: i,
+              value: r,
+              onChange: c,
+              ouiaId: "chip-filter-selector-large-viewport"
+            }
+          ),
+          d(r, e[r])
+        ] })
+      }
+    ),
+    /* @__PURE__ */ t(
+      ze,
+      {
+        toggleIcon: /* @__PURE__ */ t(ce, {}),
+        breakpoint: n,
+        visibility: { default: "visible", [n]: "hidden" },
+        children: /* @__PURE__ */ g(Pe, { variant: "filter-group", children: [
+          i.length > 1 && /* @__PURE__ */ t(
+            ne,
+            {
+              options: i,
+              value: r,
+              onChange: c,
+              ouiaId: "chip-filter-selector-small-viewport"
+            }
+          ),
+          Object.entries(e).map(([l, o], a) => /* @__PURE__ */ t(
+            Ae,
+            {
+              chips: o.type === "checkbox" ? o.chips.map((s) => ({ key: s, node: o.options[s] })) : o.chips,
+              deleteChip: (s, h) => o.onRemoveChip(typeof h == "string" ? h : h.key),
+              deleteChipGroup: o.onRemoveGroup,
+              categoryName: l,
+              showToolbarItem: l === r,
+              children: l === r && d(l, o)
+            },
+            a
+          ))
+        ] })
+      }
+    )
+  ] });
+}
 export {
-  ae as AppAboutModal,
-  v as If,
-  te as IfNotEmpty,
-  T as IfNotLoading,
-  ne as ListWithToolbar,
-  le as ObjectDropdown,
-  ie as ObjectSelect,
-  de as PleaseWaitModal,
-  re as ProgressModal,
-  oe as UrlUpload
+  at as AppAboutModal,
+  mt as ChipFilter,
+  he as DeletableRow,
+  Qe as FilterCheckbox,
+  Je as FilterSearch,
+  ne as FilterSelector,
+  C as If,
+  nt as IfNotEmpty,
+  P as IfNotLoading,
+  it as ListWithToolbar,
+  st as Loading,
+  rt as ObjectDropdown,
+  ot as ObjectSelect,
+  ht as Pagination,
+  ct as PleaseWaitModal,
+  dt as ProgressModal,
+  ut as ResponsiveTable,
+  U as ResponsiveTd,
+  se as ResponsiveTh,
+  qe as TableSkeleton,
+  lt as UrlUpload
 };

package/dist/table/ChipFilter/index.d.ts

@@ -2,3 +2,4 @@ export * from "./ChipFilter";
 export type { FilterType } from "./types";
 export type { CheckboxType } from "./types";
 export type { SearchType } from "./types";
+export * from "./components";

package/dist/table/index.d.ts

@@ -1 +1,5 @@
+export * from "./Loading";
+export * from "./Pagination";
 export * from "./ResponsiveTable";
+export * from "./TableSkeleton";
+export * from "./ChipFilter";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apicurio/common-ui-components",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -19,10 +19,10 @@
     "@patternfly/react-core": "5.1.1",
     "@patternfly/react-icons": "5.1.1",
     "@patternfly/react-table": "5.1.1",
-    "luxon": "3.4.3",
+    "luxon": "3.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.18.0",
+    "react-router-dom": "6.20.0",
     "use-resize-observer": "9.1.0"
   },
   "devDependencies": {
@@ -32,23 +32,23 @@
     "@patternfly/react-icons": "5.1.1",
     "@patternfly/react-table": "5.1.1",
     "@types/luxon": "3.3.5",
-    "@types/node": "18.18.13",
+    "@types/node": "20.10.1",
     "@types/react": "18.2.39",
     "@types/react-dom": "18.2.17",
     "@typescript-eslint/eslint-plugin": "6.13.1",
-    "@typescript-eslint/parser": "6.0.0",
-    "@vitejs/plugin-react": "4.0.3",
-    "eslint": "8.45.0",
+    "@typescript-eslint/parser": "6.13.1",
+    "@vitejs/plugin-react": "4.2.0",
+    "eslint": "8.54.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.3",
-    "luxon": "3.4.3",
+    "eslint-plugin-react-refresh": "0.4.4",
+    "luxon": "3.4.4",
     "rimraf": "5.0.5",
-    "typescript": "5.0.2",
-    "vite": "4.4.5",
-    "vite-plugin-dts": "3.6.3",
+    "typescript": "5.3.2",
+    "vite": "5.0.4",
+    "vite-plugin-dts": "3.6.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.18.0",
+    "react-router-dom": "6.20.0",
     "use-resize-observer": "9.1.0"
   }
 }