@blakesteve/roster 5.4.0 → 5.6.0

package/dist/components/molecules/Pagination/Pagination.js

@@ -0,0 +1,247 @@
+"use client";
+import { jsxs as u, Fragment as I, jsx as e } from "react/jsx-runtime";
+import { useId as et, useState as X, useRef as rt, useMemo as st } from "react";
+import { cn as x } from "../../../lib/utils.js";
+import { Button as at } from "../../atoms/Button/Button.js";
+import { buttonVariants as nt } from "../../atoms/Button/button-variants.js";
+import { selectTriggerVariants as it } from "../../atoms/Select/select-variants.js";
+import { clampPage as lt, pageItems as ot } from "./page-items.js";
+const ct = {
+  nav: "Pagination",
+  page: (t) => `Page ${t}`,
+  number: (t) => String(t),
+  previous: "Previous",
+  next: "Next",
+  previousPage: (t) => t === null ? "Previous page" : `Previous page (${t})`,
+  nextPage: (t) => t === null ? "Next page" : `Next page (${t})`,
+  firstPage: (t) => t === null ? "First page" : `First page (${t})`,
+  lastPage: (t) => t === null ? "Last page" : `Last page (${t})`,
+  gap: "…",
+  picker: "Page",
+  of: (t) => `of ${t}`,
+  status: (t, i) => `Page ${t} of ${i}`
+};
+function dt({ href: t, className: i, children: c, onClick: o, ...p }) {
+  return /* @__PURE__ */ e(
+    "a",
+    {
+      href: t,
+      className: i,
+      onClick: o,
+      "aria-label": p["aria-label"],
+      "aria-current": p["aria-current"],
+      "aria-disabled": p["aria-disabled"],
+      children: c
+    }
+  );
+}
+const ut = "rst:h-11 rst:min-w-11 rst:px-2", pt = "rst:cursor-not-allowed rst:opacity-50", ft = "rst:forced-colors:border-2 rst:forced-colors:underline rst:forced-colors:decoration-2 rst:forced-colors:underline-offset-4", Y = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0 }, j = ({ dir: t, double: i = !1 }) => /* @__PURE__ */ e("svg", { ...Y, className: "rst:shrink-0", children: t === "left" ? i ? /* @__PURE__ */ e("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" }) : /* @__PURE__ */ e("path", { d: "m15 18-6-6 6-6" }) : i ? /* @__PURE__ */ e("path", { d: "m13 17 5-5-5-5M6 17l5-5-5-5" }) : /* @__PURE__ */ e("path", { d: "m9 18 6-6-6-6" }) });
+function mt({
+  id: t,
+  describedBy: i,
+  page: c,
+  pageCount: o,
+  number: p,
+  onCommit: P
+}) {
+  const [d, N] = X(null), f = rt(!1), v = d && d.page === c ? d.value : null, y = (l) => {
+    N(null), l !== c && P(l);
+  }, $ = st(
+    () => Array.from({ length: o }, (l, m) => /* @__PURE__ */ e("option", { value: m + 1, children: p(m + 1) }, m + 1)),
+    [o, p]
+  );
+  return /* @__PURE__ */ e(
+    "select",
+    {
+      id: t,
+      value: v ?? c,
+      "aria-describedby": i,
+      disabled: o < 1,
+      onKeyDown: (l) => {
+        if (l.key === "Enter") {
+          v !== null && (l.preventDefault(), y(v));
+          return;
+        }
+        if (l.key === "Escape") {
+          N(null);
+          return;
+        }
+        f.current = !0, setTimeout(() => {
+          f.current = !1;
+        }, 0);
+      },
+      onChange: (l) => {
+        const m = Number(l.currentTarget.value);
+        f.current ? N({ page: c, value: m }) : y(m);
+      },
+      onBlur: () => {
+        v !== null && y(v);
+      },
+      className: x(
+        it({ variant: "outline" }),
+        /* 16px: iOS zooms the page into a select whose text is smaller. */
+        "rst:h-11 rst:w-auto rst:min-w-16 rst:appearance-none rst:pl-3 rst:pr-8 rst:text-base rst:tabular-nums"
+      ),
+      "data-pagination-picker": "",
+      children: $
+    }
+  );
+}
+function kt({
+  page: t,
+  pageCount: i,
+  onPageChange: c,
+  getPageHref: o,
+  linkComponent: p,
+  navigate: P,
+  layout: d = "auto",
+  siblings: N = 1,
+  edges: f = !0,
+  align: v = "center",
+  variant: y = "ghost",
+  announce: $ = !0,
+  labels: l,
+  className: m
+}) {
+  const a = { ...ct, ...l }, h = Number.isFinite(i) ? Math.max(0, Math.floor(i)) : 0, n = lt(t, h), S = et(), Z = p ?? dt, [T, H] = X({ page: n, text: "" });
+  T.page !== n && H({ page: n, text: $ ? a.status(n, h) : "" });
+  const D = (r) => {
+    r !== Math.floor(t) && c?.(r);
+  }, w = (r, s, k, F) => {
+    const g = r === "page" && s === n, L = s === null, q = x(ut, L && pt, g && ft, F.className), J = r === "page" ? `page-${s}` : r;
+    if (o) {
+      const Q = o(s ?? n);
+      return /* @__PURE__ */ e(
+        Z,
+        {
+          href: Q,
+          to: Q,
+          className: x(nt({ variant: g ? "solid" : y, colorScheme: g ? "primary" : "neutral" }), q),
+          "aria-label": F.label,
+          "aria-current": g ? "page" : void 0,
+          "aria-disabled": L ? !0 : void 0,
+          onClick: (b) => {
+            if (L) {
+              b.preventDefault();
+              return;
+            }
+            !b.defaultPrevented && b.button === 0 && !b.metaKey && !b.ctrlKey && !b.shiftKey && !b.altKey && s !== null && D(s);
+          },
+          children: k
+        },
+        J
+      );
+    }
+    return /* @__PURE__ */ e(
+      at,
+      {
+        type: "button",
+        variant: g ? "solid" : y,
+        colorScheme: g ? "primary" : "neutral",
+        className: q,
+        "aria-label": F.label,
+        "aria-current": g ? "page" : void 0,
+        "aria-disabled": L || void 0,
+        onClick: () => {
+          s !== null && D(s);
+        },
+        children: k
+      },
+      J
+    );
+  }, B = n > 1 ? n - 1 : null, K = n < h ? n + 1 : null, R = n > 1 ? 1 : null, O = n < h ? h : null, M = (r) => w(
+    "previous",
+    B,
+    /* @__PURE__ */ u(I, { children: [
+      /* @__PURE__ */ e(j, { dir: "left" }),
+      r && /* @__PURE__ */ e("span", { className: "rst:hidden rst:pr-1 rst:@[36rem]:inline", children: a.previous })
+    ] }),
+    { label: a.previousPage(B) }
+  ), A = (r) => w(
+    "next",
+    K,
+    /* @__PURE__ */ u(I, { children: [
+      r && /* @__PURE__ */ e("span", { className: "rst:hidden rst:pl-1 rst:@[36rem]:inline", children: a.next }),
+      /* @__PURE__ */ e(j, { dir: "right" })
+    ] }),
+    { label: a.nextPage(K) }
+  ), V = (r) => w("first", R, /* @__PURE__ */ e(j, { dir: "left", double: !0 }), {
+    label: a.firstPage(R),
+    className: r ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
+  }), _ = (r) => w("last", O, /* @__PURE__ */ e(j, { dir: "right", double: !0 }), {
+    label: a.lastPage(O),
+    className: r ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
+  }), C = "rst:flex rst:flex-wrap rst:items-center rst:gap-1", E = { start: "rst:justify-start", center: "rst:justify-center", end: "rst:justify-end" }[v], z = (r) => /* @__PURE__ */ u("div", { className: x(C, E, r), "data-pagination-layout": "pages", children: [
+    M(!0),
+    ot(n, h, N).map(
+      (s) => typeof s == "number" ? w("page", s, a.number(s), { label: a.page(s) }) : /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "rst:inline-flex rst:h-11 rst:w-11 rst:items-center rst:justify-center rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: a.gap }, s)
+    ),
+    A(!0)
+  ] }), G = `${S}-picker`, U = `${S}-of`, W = (r) => /* @__PURE__ */ u("div", { className: x(C, E, r), "data-pagination-layout": "compact", children: [
+    f && V(!0),
+    M(!1),
+    /* @__PURE__ */ u("div", { className: "rst:flex rst:items-center rst:gap-2 rst:px-1 rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", children: [
+      /* @__PURE__ */ e("label", { htmlFor: G, children: a.picker }),
+      /* @__PURE__ */ u("span", { className: "rst:relative rst:inline-flex", children: [
+        /* @__PURE__ */ e(
+          mt,
+          {
+            id: G,
+            describedBy: U,
+            page: n,
+            pageCount: h,
+            number: a.number,
+            onCommit: (s) => {
+              if (o) {
+                c?.(s);
+                const k = o(s);
+                P ? P(k) : window.location.assign(k);
+              } else D(s);
+            }
+          }
+        ),
+        /* @__PURE__ */ e("svg", { ...Y, width: 16, height: 16, className: "rst:pointer-events-none rst:absolute rst:right-2.5 rst:top-1/2 rst:-translate-y-1/2 rst:text-gray-500 rst:dark:text-gray-400", children: /* @__PURE__ */ e("path", { d: "m6 9 6 6 6-6" }) })
+      ] }),
+      /* @__PURE__ */ e("span", { id: U, className: "rst:tabular-nums", children: a.of(h) })
+    ] }),
+    A(!1),
+    f && _(!0)
+  ] }), tt = /* @__PURE__ */ u("div", { className: x(C, E), "data-pagination-layout": "arrows", children: [
+    f && V(!1),
+    M(!1),
+    A(!1),
+    f && _(!1)
+  ] });
+  return (
+    /* A query container sizes itself as if it were empty across, so it takes
+       the full width it's given; in a slot that sizes to its content (an
+       `ml-auto` box, an `auto` grid column) it would be 0 wide. There it
+       falls back to 18rem, which is the compact form. The arrows need no
+       queries, and size to fit, to sit in a row beside something else. */
+    /* @__PURE__ */ u(
+      "nav",
+      {
+        "aria-label": a.nav,
+        className: x(
+          "rst:font-ui",
+          d === "arrows" ? "rst:w-fit" : "rst:@container rst:w-full rst:[contain-intrinsic-inline-size:18rem]",
+          m
+        ),
+        "data-pagination": "",
+        children: [
+          d === "pages" && z(),
+          d === "compact" && W(),
+          d === "arrows" && tt,
+          d === "auto" && /* @__PURE__ */ u(I, { children: [
+            z("rst:hidden rst:@[28rem]:flex"),
+            W("rst:@[28rem]:hidden")
+          ] }),
+          $ && /* @__PURE__ */ e("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "rst:sr-only", "data-pagination-live": "", children: T.text })
+        ]
+      }
+    )
+  );
+}
+export {
+  kt as Pagination
+};

package/dist/components/molecules/Pagination/page-items.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(e,a,s=1){const t=Number.isFinite(a)?Math.max(0,Math.floor(a)):0,n=Number.isFinite(s)?Math.max(0,Math.floor(s)):1,c=g(e,t),o=2*n+5,r=(h,u)=>Array.from({length:u-h+1},(d,f)=>h+f);if(t<=o)return r(1,t);const i=Math.max(c-n,1),m=Math.min(c+n,t),M=i>3,l=m<t-2;return M?l?[1,"gap-start",...r(i,m),"gap-end",t]:[1,"gap-start",...r(t-(o-3),t)]:[...r(1,o-2),"gap-end",t]}const g=(e,a)=>Math.min(Math.max(1,Math.floor(e)||1),Math.max(1,Number.isFinite(a)?Math.floor(a):1));exports.clampPage=g;exports.pageItems=p;

package/dist/components/molecules/Pagination/page-items.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Which page numbers a numbered pager shows, and where it skips.
+ *
+ * Always the same number of slots once there are more pages than fit: the
+ * first page, the last, the current one with `siblings` on each side, and a
+ * gap marker on each side, which becomes a page number itself near either
+ * end. A pager whose width doesn't change as you page through is one whose
+ * buttons don't move out from under the pointer.
+ */
+export type PageItem = number | "gap-start" | "gap-end";
+export declare function pageItems(page: number, pageCount: number, siblings?: number): PageItem[];
+/** `page` brought into 1 to `pageCount`. */
+export declare const clampPage: (page: number, pageCount: number) => number;

package/dist/components/molecules/Pagination/page-items.js

@@ -0,0 +1,11 @@
+function x(r, a, s = 1) {
+  const t = Number.isFinite(a) ? Math.max(0, Math.floor(a)) : 0, o = Number.isFinite(s) ? Math.max(0, Math.floor(s)) : 1, c = l(r, t), e = 2 * o + 5, n = (m, g) => Array.from({ length: g - m + 1 }, (p, u) => m + u);
+  if (t <= e) return n(1, t);
+  const i = Math.max(c - o, 1), h = Math.min(c + o, t), M = i > 3, f = h < t - 2;
+  return M ? f ? [1, "gap-start", ...n(i, h), "gap-end", t] : [1, "gap-start", ...n(t - (e - 3), t)] : [...n(1, e - 2), "gap-end", t];
+}
+const l = (r, a) => Math.min(Math.max(1, Math.floor(r) || 1), Math.max(1, Number.isFinite(a) ? Math.floor(a) : 1));
+export {
+  l as clampPage,
+  x as pageItems
+};

package/dist/components/organisms/DataTable/DataTable.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),r=require("@tanstack/react-table"),n=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),o=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),c=require("../../../lib/utils.cjs"),i=require("../../atoms/Button/Button.cjs"),a=require("../Table/Table.cjs"),C=r.tableFeatures({rowSortingFeature:r.rowSortingFeature,rowPaginationFeature:r.rowPaginationFeature,sortedRowModel:r.createSortedRowModel(),paginatedRowModel:r.createPaginatedRowModel(),sortFns:r.sortFns});function S({columns:g,data:d,className:u,tableClassName:x,paginationClassName:m,variant:f="default",size:j="md",hoverable:p=!1}){const[b,h]=w.useState([]),t=r.useTable({features:C,data:d,columns:g,onSortingChange:h,state:{sorting:b},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxs("div",{className:c.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",u),children:[e.jsxs(a.Table,{variant:f,size:j,hoverable:p,className:x,children:[e.jsx(a.TableHeader,{children:t.getHeaderGroups().map(l=>e.jsx(a.TableRow,{children:l.headers.map(s=>e.jsx(a.TableHead,{children:s.isPlaceholder?null:e.jsxs("div",{className:c.cn("rst:flex rst:items-center rst:gap-2 rst:transition-opacity",s.column.getCanSort()&&"rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"),onClick:s.column.getToggleSortingHandler(),children:[r.flexRender(s.column.columnDef.header,s.getContext()),s.column.getCanSort()&&e.jsx("span",{className:"rst:w-4 rst:flex rst:justify-center rst:text-primary-500",children:s.column.getIsSorted()==="asc"?e.jsx(n.FontAwesomeIcon,{icon:o.faCaretUp}):s.column.getIsSorted()==="desc"?e.jsx(n.FontAwesomeIcon,{icon:o.faCaretDown}):null})]})},s.id))},l.id))}),e.jsx(a.TableBody,{children:t.getRowModel().rows?.length?t.getRowModel().rows.map(l=>e.jsx(a.TableRow,{children:l.getAllCells().map(s=>e.jsx(a.TableCell,{children:r.flexRender(s.column.columnDef.cell,s.getContext())},s.id))},l.id)):e.jsx(a.TableRow,{children:e.jsx(a.TableCell,{colSpan:g.length,className:"rst:h-24 rst:text-center rst:text-gray-500 rst:dark:text-gray-400 rst:italic",children:"No results found."})})})]}),e.jsxs("div",{className:c.cn("rst:flex rst:flex-col rst:sm:flex-row rst:items-center rst:justify-between rst:gap-4 rst:px-2",m),children:[e.jsxs("div",{className:"rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400",children:["Page"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.state.pagination.pageIndex+1})," ","of"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.getPageCount()})]}),e.jsxs("div",{className:"rst:flex rst:items-center rst:space-x-2",children:[e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.setPageIndex(0),disabled:!t.getCanPreviousPage(),"aria-label":"Go to first page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAnglesLeft})}),e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.previousPage(),disabled:!t.getCanPreviousPage(),"aria-label":"Go to previous page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAngleLeft})}),e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.nextPage(),disabled:!t.getCanNextPage(),"aria-label":"Go to next page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAngleRight})}),e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.setPageIndex(t.getPageCount()-1),disabled:!t.getCanNextPage(),"aria-label":"Go to last page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAnglesRight})})]})]})]})}exports.DataTable=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),a=require("@tanstack/react-table"),c=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),g=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),l=require("../../../lib/utils.cjs"),h=require("../../molecules/Pagination/Pagination.cjs"),r=require("../Table/Table.cjs"),T=a.tableFeatures({rowSortingFeature:a.rowSortingFeature,rowPaginationFeature:a.rowPaginationFeature,sortedRowModel:a.createSortedRowModel(),paginatedRowModel:a.createPaginatedRowModel(),sortFns:a.sortFns});function C({columns:i,data:d,className:u,tableClassName:x,paginationClassName:m,variant:p="default",size:f="md",hoverable:j=!1,paginationLabels:o}){const[w,b]=y.useState([]),s=a.useTable({features:T,data:d,columns:i,onSortingChange:b,state:{sorting:w},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxs("div",{className:l.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",u),children:[e.jsxs(r.Table,{variant:p,size:f,hoverable:j,className:x,children:[e.jsx(r.TableHeader,{children:s.getHeaderGroups().map(n=>e.jsx(r.TableRow,{children:n.headers.map(t=>e.jsx(r.TableHead,{children:t.isPlaceholder?null:e.jsxs("div",{className:l.cn("rst:flex rst:items-center rst:gap-2 rst:transition-opacity",t.column.getCanSort()&&"rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"),onClick:t.column.getToggleSortingHandler(),children:[a.flexRender(t.column.columnDef.header,t.getContext()),t.column.getCanSort()&&e.jsx("span",{className:"rst:w-4 rst:flex rst:justify-center rst:text-primary-500",children:t.column.getIsSorted()==="asc"?e.jsx(c.FontAwesomeIcon,{icon:g.faCaretUp}):t.column.getIsSorted()==="desc"?e.jsx(c.FontAwesomeIcon,{icon:g.faCaretDown}):null})]})},t.id))},n.id))}),e.jsx(r.TableBody,{children:s.getRowModel().rows?.length?s.getRowModel().rows.map(n=>e.jsx(r.TableRow,{children:n.getAllCells().map(t=>e.jsx(r.TableCell,{children:a.flexRender(t.column.columnDef.cell,t.getContext())},t.id))},n.id)):e.jsx(r.TableRow,{children:e.jsx(r.TableCell,{colSpan:i.length,className:"rst:h-24 rst:text-center rst:text-gray-500 rst:dark:text-gray-400 rst:italic",children:"No results found."})})})]}),e.jsxs("div",{className:l.cn("rst:flex rst:flex-col rst:sm:flex-row rst:items-center rst:justify-between rst:gap-4 rst:px-2",m),children:[e.jsx("div",{className:"rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400",children:o?.status?o.status(s.state.pagination.pageIndex+1,s.getPageCount()):e.jsxs(e.Fragment,{children:["Page"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:s.state.pagination.pageIndex+1})," ","of"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:s.getPageCount()})]})}),e.jsx(h.Pagination,{layout:"arrows",align:"end",variant:"outline",page:s.state.pagination.pageIndex+1,pageCount:s.getPageCount(),onPageChange:n=>s.setPageIndex(n-1),labels:o})]})]})}exports.DataTable=C;

package/dist/components/organisms/DataTable/DataTable.d.ts

@@ -1,4 +1,5 @@
 import { ColumnDef, RowData } from '@tanstack/react-table';
+import { PaginationLabels } from '../../molecules/Pagination/Pagination';
 import { TableProps } from '../Table/Table';
 /**
  * The feature set DataTable registers: sorting and pagination, plus the row
@@ -43,6 +44,12 @@ export interface DataTableProps<TData extends RowData> {
     variant?: TableProps["variant"];
     size?: TableProps["size"];
     hoverable?: boolean;
+    /**
+     * Replaces the pager's words; see Pagination's `labels`. `status` also
+     * replaces the "Page N of M" line beside it. ("No results found." is
+     * DataTable's own and isn't covered.)
+     */
+    paginationLabels?: Partial<PaginationLabels>;
 }
-export declare function DataTable<TData extends RowData>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends RowData>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, paginationLabels, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/DataTable/DataTable.js

@@ -1,38 +1,39 @@
 "use client";
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as P } from "react";
-import { useTable as w, flexRender as g, tableFeatures as y, sortFns as v, rowPaginationFeature as N, rowSortingFeature as R, createPaginatedRowModel as T, createSortedRowModel as k } from "@tanstack/react-table";
-import { FontAwesomeIcon as o } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faCaretUp as I, faCaretDown as A, faAnglesLeft as F, faAngleLeft as M, faAngleRight as z, faAnglesRight as j } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { cn as l } from "../../../lib/utils.js";
-import { Button as n } from "../../atoms/Button/Button.js";
-import { Table as D, TableHeader as G, TableRow as i, TableHead as H, TableBody as B, TableCell as d } from "../Table/Table.js";
-const L = /* @__PURE__ */ y({
+import { jsxs as s, jsx as t, Fragment as S } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { useTable as N, flexRender as c, tableFeatures as P, sortFns as T, rowPaginationFeature as I, rowSortingFeature as R, createPaginatedRowModel as F, createSortedRowModel as v } from "@tanstack/react-table";
+import { FontAwesomeIcon as g } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faCaretUp as M, faCaretDown as k } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { cn as o } from "../../../lib/utils.js";
+import { Pagination as j } from "../../molecules/Pagination/Pagination.js";
+import { Table as D, TableHeader as H, TableRow as l, TableHead as A, TableBody as z, TableCell as d } from "../Table/Table.js";
+const B = /* @__PURE__ */ P({
   rowSortingFeature: R,
-  rowPaginationFeature: N,
-  sortedRowModel: k(),
-  paginatedRowModel: T(),
+  rowPaginationFeature: I,
+  sortedRowModel: v(),
+  paginatedRowModel: F(),
   // The whole built-in registry, not a subset: DataTable is generic over
   // consumer data, so auto sort detection has to be able to reach any of them.
-  sortFns: v
+  sortFns: T
 });
-function W({
-  columns: c,
+function V({
+  columns: i,
   data: m,
   className: u,
-  tableClassName: f,
-  paginationClassName: p,
+  tableClassName: p,
+  paginationClassName: f,
   variant: x = "default",
   size: h = "md",
-  hoverable: b = !1
+  hoverable: w = !1,
+  paginationLabels: n
 }) {
-  const [C, S] = P([]), t = w({
-    features: L,
+  const [y, C] = b([]), r = N({
+    features: B,
     data: m,
-    columns: c,
-    onSortingChange: S,
+    columns: i,
+    onSortingChange: C,
     state: {
-      sorting: C
+      sorting: y
     },
     initialState: {
       pagination: {
@@ -41,41 +42,41 @@ function W({
       }
     }
   });
-  return /* @__PURE__ */ a("div", { className: l("rst:font-ui rst:flex rst:flex-col rst:gap-4", u), children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ s("div", { className: o("rst:font-ui rst:flex rst:flex-col rst:gap-4", u), children: [
+    /* @__PURE__ */ s(
       D,
       {
         variant: x,
         size: h,
-        hoverable: b,
-        className: f,
+        hoverable: w,
+        className: p,
         children: [
-          /* @__PURE__ */ e(G, { children: t.getHeaderGroups().map((s) => /* @__PURE__ */ e(i, { children: s.headers.map((r) => /* @__PURE__ */ e(H, { children: r.isPlaceholder ? null : /* @__PURE__ */ a(
+          /* @__PURE__ */ t(H, { children: r.getHeaderGroups().map((a) => /* @__PURE__ */ t(l, { children: a.headers.map((e) => /* @__PURE__ */ t(A, { children: e.isPlaceholder ? null : /* @__PURE__ */ s(
             "div",
             {
-              className: l(
+              className: o(
                 "rst:flex rst:items-center rst:gap-2 rst:transition-opacity",
-                r.column.getCanSort() && "rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"
+                e.column.getCanSort() && "rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"
               ),
-              onClick: r.column.getToggleSortingHandler(),
+              onClick: e.column.getToggleSortingHandler(),
               children: [
-                g(
-                  r.column.columnDef.header,
-                  r.getContext()
+                c(
+                  e.column.columnDef.header,
+                  e.getContext()
                 ),
-                r.column.getCanSort() && /* @__PURE__ */ e("span", { className: "rst:w-4 rst:flex rst:justify-center rst:text-primary-500", children: r.column.getIsSorted() === "asc" ? /* @__PURE__ */ e(o, { icon: I }) : r.column.getIsSorted() === "desc" ? /* @__PURE__ */ e(o, { icon: A }) : null })
+                e.column.getCanSort() && /* @__PURE__ */ t("span", { className: "rst:w-4 rst:flex rst:justify-center rst:text-primary-500", children: e.column.getIsSorted() === "asc" ? /* @__PURE__ */ t(g, { icon: M }) : e.column.getIsSorted() === "desc" ? /* @__PURE__ */ t(g, { icon: k }) : null })
               ]
             }
-          ) }, r.id)) }, s.id)) }),
-          /* @__PURE__ */ e(B, { children: t.getRowModel().rows?.length ? (
+          ) }, e.id)) }, a.id)) }),
+          /* @__PURE__ */ t(z, { children: r.getRowModel().rows?.length ? (
             // No data-state on the row: row selection is not one of the
             // registered features, and v8's getIsSelected() was always false
             // here, so React omitted the attribute anyway.
-            t.getRowModel().rows.map((s) => /* @__PURE__ */ e(i, { children: s.getAllCells().map((r) => /* @__PURE__ */ e(d, { children: g(r.column.columnDef.cell, r.getContext()) }, r.id)) }, s.id))
-          ) : /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
+            r.getRowModel().rows.map((a) => /* @__PURE__ */ t(l, { children: a.getAllCells().map((e) => /* @__PURE__ */ t(d, { children: c(e.column.columnDef.cell, e.getContext()) }, e.id)) }, a.id))
+          ) : /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(
             d,
             {
-              colSpan: c.length,
+              colSpan: i.length,
               className: "rst:h-24 rst:text-center rst:text-gray-500 rst:dark:text-gray-400 rst:italic",
               children: "No results found."
             }
@@ -83,78 +84,40 @@ function W({
         ]
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ s(
       "div",
       {
-        className: l(
+        className: o(
           "rst:flex rst:flex-col rst:sm:flex-row rst:items-center rst:justify-between rst:gap-4 rst:px-2",
-          p
+          f
         ),
         children: [
-          /* @__PURE__ */ a("div", { className: "rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400", children: [
+          /* @__PURE__ */ t("div", { className: "rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400", children: n?.status ? n.status(r.state.pagination.pageIndex + 1, r.getPageCount()) : /* @__PURE__ */ s(S, { children: [
             "Page",
             " ",
-            /* @__PURE__ */ e("strong", { className: "rst:text-gray-900 rst:dark:text-gray-100", children: t.state.pagination.pageIndex + 1 }),
+            /* @__PURE__ */ t("strong", { className: "rst:text-gray-900 rst:dark:text-gray-100", children: r.state.pagination.pageIndex + 1 }),
             " ",
             "of",
             " ",
-            /* @__PURE__ */ e("strong", { className: "rst:text-gray-900 rst:dark:text-gray-100", children: t.getPageCount() })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "rst:flex rst:items-center rst:space-x-2", children: [
-            /* @__PURE__ */ e(
-              n,
-              {
-                variant: "outline",
-                colorScheme: "neutral",
-                size: "sm",
-                onClick: () => t.setPageIndex(0),
-                disabled: !t.getCanPreviousPage(),
-                "aria-label": "Go to first page",
-                children: /* @__PURE__ */ e(o, { icon: F })
-              }
-            ),
-            /* @__PURE__ */ e(
-              n,
-              {
-                variant: "outline",
-                colorScheme: "neutral",
-                size: "sm",
-                onClick: () => t.previousPage(),
-                disabled: !t.getCanPreviousPage(),
-                "aria-label": "Go to previous page",
-                children: /* @__PURE__ */ e(o, { icon: M })
-              }
-            ),
-            /* @__PURE__ */ e(
-              n,
-              {
-                variant: "outline",
-                colorScheme: "neutral",
-                size: "sm",
-                onClick: () => t.nextPage(),
-                disabled: !t.getCanNextPage(),
-                "aria-label": "Go to next page",
-                children: /* @__PURE__ */ e(o, { icon: z })
-              }
-            ),
-            /* @__PURE__ */ e(
-              n,
-              {
-                variant: "outline",
-                colorScheme: "neutral",
-                size: "sm",
-                onClick: () => t.setPageIndex(t.getPageCount() - 1),
-                disabled: !t.getCanNextPage(),
-                "aria-label": "Go to last page",
-                children: /* @__PURE__ */ e(o, { icon: j })
-              }
-            )
-          ] })
+            /* @__PURE__ */ t("strong", { className: "rst:text-gray-900 rst:dark:text-gray-100", children: r.getPageCount() })
+          ] }) }),
+          /* @__PURE__ */ t(
+            j,
+            {
+              layout: "arrows",
+              align: "end",
+              variant: "outline",
+              page: r.state.pagination.pageIndex + 1,
+              pageCount: r.getPageCount(),
+              onPageChange: (a) => r.setPageIndex(a - 1),
+              labels: n
+            }
+          )
         ]
       }
     )
   ] });
 }
 export {
-  W as DataTable
+  V as DataTable
 };

package/dist/components/organisms/ModerationQueue/ModerationQueue.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),z=require("../../../lib/utils.cjs"),xe=require("../../atoms/Button/Button.cjs"),Oe=require("../../atoms/Card/Card.cjs"),he=require("../../atoms/Spinner/Spinner.cjs"),Pe=require("../../atoms/Textarea/Textarea.cjs"),Z=require("../../molecules/Alert/Alert.cjs"),ze=require("../../molecules/EmptyState/EmptyState.cjs"),De=require("../../molecules/RadioGroup/RadioGroup.cjs"),He=require("./queue-actions.cjs"),pe={primary:{colorScheme:"primary",variant:"solid"},success:{colorScheme:"success",variant:"solid"},danger:{colorScheme:"error",variant:"soft"},neutral:{colorScheme:"neutral",variant:"outline"}},Ke={edit:He.editAction},R=o=>o.edit?o:null,Qe=o=>o===0?"None left.":`${o} left.`,Ge=o=>Math.min(6,Math.max(1,o)),We=o=>o instanceof Error&&o.message?o.message:"Something went wrong.";function B(o,f){const p={...o};return delete p[f],p}function _({busy:o=!1,blocked:f=!1,onClick:p,children:j,className:v,...y}){const g=o||f;return n.jsx(xe.Button,{size:"lg",...y,"aria-disabled":g||void 0,"aria-busy":o||void 0,startIcon:o?n.jsx(he.Spinner,{size:"sm",variant:"current"}):void 0,className:z.cn(f&&!o&&"rst:cursor-not-allowed rst:opacity-50",v),onClick:T=>{if(g){T.preventDefault();return}p?.(T)},children:j})}function Je({label:o,hideLabel:f=!1,headingLevel:p=2,itemHeadingLevel:j,items:v,getKey:y,itemLabel:g,renderMeta:T,renderContent:ve,actions:D,status:ee="ready",error:be,onRetry:te,empty:re={title:"Nothing waiting"},density:ne="comfortable",footer:ye,className:Se}){const je=typeof D=="function"?D(Ke):D,N=a.useId(),q=a.useRef(null),k=v.map(y),E=a.useRef(new Map);E.current=new Map(v.map((e,t)=>[k[t],e]));const[H,qe]=a.useState({}),$=a.useRef({}),se=e=>{$.current=e($.current),qe($.current)},[oe,F]=a.useState({}),[ce,ke]=a.useState({}),x=a.useRef({}),h=(e,t)=>{x.current=t?{...x.current,[e]:t}:B(x.current,e),ke(x.current)},[K,$e]=a.useState({text:"",n:0}),Q=a.useRef([]),w=a.useRef(null),ie=a.useCallback(e=>{Q.current.push(e),!w.current&&(w.current=setTimeout(()=>{w.current=null;const t=Q.current.join(" ");Q.current=[],$e(r=>({text:t,n:r.n+1}))},0))},[]);a.useLayoutEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]);const[Re,Ne]=a.useState(0),G=a.useRef(null),S=a.useCallback(e=>{G.current=e,Ne(t=>t+1)},[]),ae=a.useCallback(e=>{const t=q.current;if(!t)return null;const r="key"in e?CSS.escape(e.key):"";switch(e.kind){case"item":return t.querySelector(`[data-queue-item="${r}"]`);case"empty":return t.querySelector("[data-queue-empty]");case"trigger":return t.querySelector(`[data-queue-item="${r}"] [data-queue-action="${CSS.escape(e.actionId)}"]`);case"step":return t.querySelector(`[data-queue-item="${r}"] [data-queue-step]`)}},[]);a.useLayoutEffect(()=>{const e=G.current;if(!e)return;G.current=null,(ae(e)??q.current?.querySelector("[data-queue-item]")??q.current?.querySelector("[data-queue-empty]"))?.focus()},[Re,ae]);const W=a.useRef(null),we=e=>()=>{W.current=e},Ce=e=>{e.relatedTarget&&!q.current?.contains(e.relatedTarget)&&(W.current=null)},A=e=>{if(W.current!==e)return!1;const t=document.activeElement;return!t||t===document.body?!0:q.current?.contains(t)?!!t.closest(`[data-queue-item="${CSS.escape(e)}"]`):!1},C=a.useRef(null),M=(e,t)=>{C.current=t,h(e.key,{...e,open:!1})},le=a.useRef(k),J=a.useRef(new Map),[,Ie]=a.useState(0),U=a.useRef(new Set),ue=(e,t,r)=>{const c=t.indexOf(e),d=t.slice(c+1).find(i=>r.has(i));if(d)return{kind:"item",key:d};const s=t.slice(0,c).reverse().find(i=>r.has(i));return s?{kind:"item",key:s}:{kind:"empty"}};a.useLayoutEffect(()=>{const e=le.current;le.current=k;const t=new Set(k),r=J.current;J.current=new Map;const c=[];let d=!1;for(const[s,i]of r){const l=t.has(s);c.push(i.announce??i.sentence),l||(d=!0),U.current.delete(s);const u=l?{kind:"trigger",key:s,actionId:i.actionId}:e.includes(s)?ue(s,e,t):null,m=x.current[s];if(m?.surface)M(m,u??{kind:"empty"});else{const I=A(s);m&&h(s,null),u&&I&&S(u)}}for(const s of e.filter(i=>!t.has(i))){if(r.has(s))continue;F(m=>s in m?B(m,s):m);const i=ue(s,e,t),l=C.current;if(l&&"key"in l&&l.key===s&&(C.current=i),$.current[s]){U.current.add(s),A(s)&&S(i);continue}const u=x.current[s];if(u&&!(u.surface&&!u.open))if(c.push(`${u.label} was decided elsewhere.`),d=!0,u.surface)M(u,i);else{const m=A(s);h(s,null),m&&S(i)}else!u&&A(s)&&S(i)}c.length&&ie(`${c.join(" ")}${d?` ${Qe(k.length)}`:""}`)});const L=async(e,t,r,c)=>{const d=E.current.get(e)??t,s=g(d),i=r.edit?R(r).run:r.run;se(l=>({...l,[e]:r.id})),F(l=>B(l,e));try{const l=await i(d,c);J.current.set(e,{actionId:r.id,sentence:`${r.done??r.label}: ${s}.`,announce:l?l.announce:void 0}),Ie(u=>u+1)}catch(l){const u=We(l);ie(`${r.label} didn't go through for ${s}. ${u}`);const m=x.current[e];U.current.delete(e)?m?.surface?M(m,{kind:"empty"}):m&&h(e,null):m?h(e,{...m,error:u}):F(I=>({...I,[e]:u}))}finally{se(l=>B(l,e))}},Be=(e,t)=>{const r=y(e),c=R(t);if(!t.confirm&&!t.reason&&!c){L(r,e,t,{});return}F(d=>B(d,r)),h(r,{key:r,label:g(e),item:e,action:t,draft:c?c.edit.initial(e):void 0,reason:{},surface:!!c?.edit.surface,open:!0}),c?.edit.surface||S({kind:"step",key:r})},V=e=>{const t=x.current[e];if(!t||$.current[e])return;const r={kind:"trigger",key:e,actionId:t.action.id};t.surface?M(t,r):(h(e,null),S(r))},Te=e=>{const t=x.current[e];!t||$.current[e]||ge(t,E.current.get(e)??t.item)||(t.action.edit?L(e,t.item,t.action,{draft:t.draft}):t.action.reason?L(e,t.item,t.action,{reason:Ue(t.reason)}):L(e,t.item,t.action,{}))},Ee=e=>{const t=C.current;C.current=null,h(e,null),t&&S(t)},Fe=`h${p}`,de=j??Ge(p+1),Ae=`h${de}`,X=`${N}-label`,fe=(e,t)=>{const{action:r}=e,c=R(r),d=E.current.get(e.key)??e.item,s=!!H[e.key],i=ge(e,d),l=`${N}-step-${t}-message`,u=n.jsx(_,{...pe[r.tone??"neutral"],busy:s,blocked:!!i,"aria-describedby":i?l:void 0,onClick:()=>Te(e.key),"data-queue-submit":"",children:c?c.edit.submitLabel:r.label}),m=n.jsx(_,{variant:"ghost",colorScheme:"neutral",blocked:s,onClick:()=>V(e.key),children:"Cancel"}),I=n.jsxs(n.Fragment,{children:[r.reason&&n.jsx(Ve,{id:`${N}-step-${t}`,step:r.reason,value:e.reason,disabled:s,onChange:Y=>h(e.key,{...x.current[e.key],reason:Y})}),c&&n.jsx(c.edit.Form,{item:d,value:e.draft,onChange:Y=>h(e.key,{...x.current[e.key],draft:Y})}),i&&n.jsx("p",{id:l,className:"rst:text-sm rst:text-error-600 rst:dark:text-error-400","data-queue-validation":"",children:i}),e.error&&n.jsx(Z.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:e.error})]});return{submitButton:u,cancelButton:m,fields:I}},Me=(e,t)=>{const{submitButton:r,cancelButton:c,fields:d}=fe(e,t),s=`${N}-step-${t}-prompt`,i=R(e.action),l=e.action.confirm?.prompt??e.action.reason?.prompt??i?.edit.title;return n.jsxs("div",{role:"group","aria-labelledby":s,tabIndex:-1,"data-queue-step":"",onKeyDown:u=>{u.key==="Escape"&&(u.stopPropagation(),V(e.key))},className:"rst:flex rst:flex-col rst:gap-3 rst:rounded-lg rst:border rst:border-[var(--roster-card-border)] rst:p-4 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:[n.jsx("p",{id:s,className:"rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:l}),i?.edit.description&&n.jsx("p",{className:"rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:i.edit.description}),d,n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:gap-2",children:[r,c]})]})},Le=(e,t)=>{const r=H[t];return n.jsx("div",{role:"group","aria-label":`Decide: ${g(e)}`,className:"rst:flex rst:flex-wrap rst:gap-2",children:je.filter(c=>!c.hidden?.(e)).map(c=>n.jsx(_,{...pe[c.tone??"neutral"],"data-queue-action":c.id,busy:r===c.id,blocked:!!r&&r!==c.id,onClick:()=>Be(e,c),children:c.label},c.id))})},b=Object.values(ce).find(e=>e.surface)??null,O=b?R(b.action):null,me=O?.edit.surface,P=b?fe(b,-1):null;return n.jsxs("section",{ref:q,"aria-labelledby":X,onBlur:Ce,className:z.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",Se),children:[n.jsx(Fe,{id:X,className:z.cn("rst:text-lg rst:font-semibold rst:text-[var(--roster-control-text)]",f&&"rst:sr-only"),children:o}),n.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-queue-live":"","data-queue-live-n":K.n,children:[K.text,K.n%2?" ":""]}),ee==="loading"?n.jsx("div",{className:"rst:flex rst:justify-center rst:py-12","aria-busy":"true",children:n.jsx(he.Spinner,{size:"lg",label:`Loading ${o}`})}):ee==="error"?n.jsx(Z.Alert,{colorScheme:"error",children:n.jsxs("div",{className:"rst:flex rst:flex-col rst:items-start rst:gap-3",children:[n.jsx("div",{children:be??"The queue couldn't load."}),te&&n.jsx(xe.Button,{size:"lg",variant:"outline",colorScheme:"neutral",onClick:te,children:"Retry"})]})}):v.length===0?n.jsx(ze.EmptyState,{title:re.title,description:re.description,headingLevel:de,tabIndex:-1,"data-queue-empty":"",className:"rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"}):n.jsx("ul",{role:"list","aria-labelledby":X,className:"rst:m-0 rst:flex rst:list-none rst:flex-col rst:gap-3 rst:p-0",children:v.map((e,t)=>{const r=k[t],c=`${N}-item-${t}`,d=T?.(e),s=ce[r];return n.jsx("li",{children:n.jsx("article",{"data-queue-item":r,tabIndex:-1,"aria-labelledby":c,onFocus:we(r),className:"rst:rounded-xl rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:n.jsx(Oe.Card,{padding:ne==="compact"?"sm":"md",children:n.jsxs("div",{className:z.cn("rst:flex rst:flex-col",ne==="compact"?"rst:gap-3":"rst:gap-4"),children:[n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:items-baseline rst:gap-x-3 rst:gap-y-1",children:[n.jsx(Ae,{id:c,className:"rst:text-base rst:font-semibold",children:g(e)}),d&&n.jsx("div",{className:"rst:flex rst:flex-wrap rst:items-center rst:gap-2 rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:d})]}),n.jsx("div",{className:"rst:min-w-0",children:ve(e)}),oe[r]&&n.jsx(Z.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:oe[r]}),s&&!s.surface?Me(s,t):Le(e,r)]})})})},r)})}),ye,me&&b&&O&&P&&n.jsx(me,{open:b.open,title:O.edit.title,description:O.edit.description,busy:!!H[b.key],onCancel:()=>V(b.key),onAfterClose:()=>Ee(b.key),submitButton:P.submitButton,cancelButton:P.cancelButton,children:n.jsx("div",{className:"rst:flex rst:flex-col rst:gap-4",children:P.fields})})]})}function ge(o,f){const p=R(o.action);if(p)return p.edit.validate?.(o.draft,f);if(o.action.reason){if(o.action.reason.required&&!o.reason.value)return"Pick a reason.";if(o.action.reason.note==="required"&&!o.reason.note?.trim())return"Add a note."}}function Ue(o){const f=o.note?.trim();return{...o.value?{value:o.value}:{},...f?{note:f}:{}}}function Ve({id:o,step:f,value:p,disabled:j,onChange:v}){const y=f.note??"optional";return n.jsxs(n.Fragment,{children:[f.options&&f.options.length>0&&n.jsx(De.RadioGroup,{label:f.required?"Reason":"Reason (optional)",options:f.options,value:p.value??"",onChange:g=>v({...p,value:g}),disabled:j}),y!=="none"&&n.jsx(Pe.Textarea,{id:`${o}-note`,label:f.noteLabel??(y==="required"?"Note":"Note (optional)"),rows:3,value:p.note??"",onChange:g=>v({...p,note:g.target.value}),disabled:j})]})}exports.ModerationQueue=Je;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),P=require("../../../lib/utils.cjs"),ge=require("../../atoms/Button/Button.cjs"),Le=require("../../atoms/Card/Card.cjs"),Oe=require("../../atoms/Spinner/Spinner.cjs"),Pe=require("../../atoms/Textarea/Textarea.cjs"),Y=require("../../molecules/Alert/Alert.cjs"),ze=require("../../molecules/EmptyState/EmptyState.cjs"),De=require("../../molecules/RadioGroup/RadioGroup.cjs"),He=require("./queue-actions.cjs"),me={primary:{colorScheme:"primary",variant:"solid"},success:{colorScheme:"success",variant:"solid"},danger:{colorScheme:"error",variant:"soft"},neutral:{colorScheme:"neutral",variant:"outline"}},Ke={edit:He.editAction},R=c=>c.edit?c:null,Qe=c=>c===0?"None left.":`${c} left.`,Ge=c=>Math.min(6,Math.max(1,c)),We=c=>c instanceof Error&&c.message?c.message:"Something went wrong.";function B(c,d){const p={...c};return delete p[d],p}function Z({busy:c=!1,blocked:d=!1,onClick:p,children:j,className:v,...y}){return n.jsx(ge.Button,{size:"lg",...y,isLoading:c,"aria-disabled":d||void 0,className:P.cn(d&&!c&&"rst:cursor-not-allowed rst:opacity-50",v),onClick:g=>{if(d){g.preventDefault();return}p?.(g)},children:j})}function Je({label:c,hideLabel:d=!1,headingLevel:p=2,itemHeadingLevel:j,items:v,getKey:y,itemLabel:g,renderMeta:xe,renderContent:he,actions:z,status:_="ready",error:ve,onRetry:ee,empty:te={title:"Nothing waiting"},density:re="comfortable",footer:be,className:ye}){const Se=typeof z=="function"?z(Ke):z,N=a.useId(),q=a.useRef(null),k=v.map(y),T=a.useRef(new Map);T.current=new Map(v.map((e,t)=>[k[t],e]));const[D,je]=a.useState({}),$=a.useRef({}),ne=e=>{$.current=e($.current),je($.current)},[se,E]=a.useState({}),[oe,qe]=a.useState({}),x=a.useRef({}),h=(e,t)=>{x.current=t?{...x.current,[e]:t}:B(x.current,e),qe(x.current)},[H,ke]=a.useState({text:"",n:0}),K=a.useRef([]),w=a.useRef(null),ce=a.useCallback(e=>{K.current.push(e),!w.current&&(w.current=setTimeout(()=>{w.current=null;const t=K.current.join(" ");K.current=[],ke(r=>({text:t,n:r.n+1}))},0))},[]);a.useLayoutEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]);const[$e,Re]=a.useState(0),Q=a.useRef(null),S=a.useCallback(e=>{Q.current=e,Re(t=>t+1)},[]),ie=a.useCallback(e=>{const t=q.current;if(!t)return null;const r="key"in e?CSS.escape(e.key):"";switch(e.kind){case"item":return t.querySelector(`[data-queue-item="${r}"]`);case"empty":return t.querySelector("[data-queue-empty]");case"trigger":return t.querySelector(`[data-queue-item="${r}"] [data-queue-action="${CSS.escape(e.actionId)}"]`);case"step":return t.querySelector(`[data-queue-item="${r}"] [data-queue-step]`)}},[]);a.useLayoutEffect(()=>{const e=Q.current;if(!e)return;Q.current=null,(ie(e)??q.current?.querySelector("[data-queue-item]")??q.current?.querySelector("[data-queue-empty]"))?.focus()},[$e,ie]);const G=a.useRef(null),Ne=e=>()=>{G.current=e},we=e=>{e.relatedTarget&&!q.current?.contains(e.relatedTarget)&&(G.current=null)},F=e=>{if(G.current!==e)return!1;const t=document.activeElement;return!t||t===document.body?!0:q.current?.contains(t)?!!t.closest(`[data-queue-item="${CSS.escape(e)}"]`):!1},C=a.useRef(null),A=(e,t)=>{C.current=t,h(e.key,{...e,open:!1})},ae=a.useRef(k),W=a.useRef(new Map),[,Ce]=a.useState(0),J=a.useRef(new Set),ue=(e,t,r)=>{const o=t.indexOf(e),f=t.slice(o+1).find(i=>r.has(i));if(f)return{kind:"item",key:f};const s=t.slice(0,o).reverse().find(i=>r.has(i));return s?{kind:"item",key:s}:{kind:"empty"}};a.useLayoutEffect(()=>{const e=ae.current;ae.current=k;const t=new Set(k),r=W.current;W.current=new Map;const o=[];let f=!1;for(const[s,i]of r){const u=t.has(s);o.push(i.announce??i.sentence),u||(f=!0),J.current.delete(s);const l=u?{kind:"trigger",key:s,actionId:i.actionId}:e.includes(s)?ue(s,e,t):null,m=x.current[s];if(m?.surface)A(m,l??{kind:"empty"});else{const I=F(s);m&&h(s,null),l&&I&&S(l)}}for(const s of e.filter(i=>!t.has(i))){if(r.has(s))continue;E(m=>s in m?B(m,s):m);const i=ue(s,e,t),u=C.current;if(u&&"key"in u&&u.key===s&&(C.current=i),$.current[s]){J.current.add(s),F(s)&&S(i);continue}const l=x.current[s];if(l&&!(l.surface&&!l.open))if(o.push(`${l.label} was decided elsewhere.`),f=!0,l.surface)A(l,i);else{const m=F(s);h(s,null),m&&S(i)}else!l&&F(s)&&S(i)}o.length&&ce(`${o.join(" ")}${f?` ${Qe(k.length)}`:""}`)});const M=async(e,t,r,o)=>{const f=T.current.get(e)??t,s=g(f),i=r.edit?R(r).run:r.run;ne(u=>({...u,[e]:r.id})),E(u=>B(u,e));try{const u=await i(f,o);W.current.set(e,{actionId:r.id,sentence:`${r.done??r.label}: ${s}.`,announce:u?u.announce:void 0}),Ce(l=>l+1)}catch(u){const l=We(u);ce(`${r.label} didn't go through for ${s}. ${l}`);const m=x.current[e];J.current.delete(e)?m?.surface?A(m,{kind:"empty"}):m&&h(e,null):m?h(e,{...m,error:l}):E(I=>({...I,[e]:l}))}finally{ne(u=>B(u,e))}},Ie=(e,t)=>{const r=y(e),o=R(t);if(!t.confirm&&!t.reason&&!o){M(r,e,t,{});return}E(f=>B(f,r)),h(r,{key:r,label:g(e),item:e,action:t,draft:o?o.edit.initial(e):void 0,reason:{},surface:!!o?.edit.surface,open:!0}),o?.edit.surface||S({kind:"step",key:r})},U=e=>{const t=x.current[e];if(!t||$.current[e])return;const r={kind:"trigger",key:e,actionId:t.action.id};t.surface?A(t,r):(h(e,null),S(r))},Be=e=>{const t=x.current[e];!t||$.current[e]||pe(t,T.current.get(e)??t.item)||(t.action.edit?M(e,t.item,t.action,{draft:t.draft}):t.action.reason?M(e,t.item,t.action,{reason:Ue(t.reason)}):M(e,t.item,t.action,{}))},Te=e=>{const t=C.current;C.current=null,h(e,null),t&&S(t)},Ee=`h${p}`,le=j??Ge(p+1),Fe=`h${le}`,V=`${N}-label`,de=(e,t)=>{const{action:r}=e,o=R(r),f=T.current.get(e.key)??e.item,s=!!D[e.key],i=pe(e,f),u=`${N}-step-${t}-message`,l=n.jsx(Z,{...me[r.tone??"neutral"],busy:s,blocked:!!i,"aria-describedby":i?u:void 0,onClick:()=>Be(e.key),"data-queue-submit":"",children:o?o.edit.submitLabel:r.label}),m=n.jsx(Z,{variant:"ghost",colorScheme:"neutral",blocked:s,onClick:()=>U(e.key),children:"Cancel"}),I=n.jsxs(n.Fragment,{children:[r.reason&&n.jsx(Ve,{id:`${N}-step-${t}`,step:r.reason,value:e.reason,disabled:s,onChange:X=>h(e.key,{...x.current[e.key],reason:X})}),o&&n.jsx(o.edit.Form,{item:f,value:e.draft,onChange:X=>h(e.key,{...x.current[e.key],draft:X})}),i&&n.jsx("p",{id:u,className:"rst:text-sm rst:text-error-600 rst:dark:text-error-400","data-queue-validation":"",children:i}),e.error&&n.jsx(Y.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:e.error})]});return{submitButton:l,cancelButton:m,fields:I}},Ae=(e,t)=>{const{submitButton:r,cancelButton:o,fields:f}=de(e,t),s=`${N}-step-${t}-prompt`,i=R(e.action),u=e.action.confirm?.prompt??e.action.reason?.prompt??i?.edit.title;return n.jsxs("div",{role:"group","aria-labelledby":s,tabIndex:-1,"data-queue-step":"",onKeyDown:l=>{l.key==="Escape"&&(l.stopPropagation(),U(e.key))},className:"rst:flex rst:flex-col rst:gap-3 rst:rounded-lg rst:border rst:border-[var(--roster-card-border)] rst:p-4 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:[n.jsx("p",{id:s,className:"rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:u}),i?.edit.description&&n.jsx("p",{className:"rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:i.edit.description}),f,n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:gap-2",children:[r,o]})]})},Me=(e,t)=>{const r=D[t];return n.jsx("div",{role:"group","aria-label":`Decide: ${g(e)}`,className:"rst:flex rst:flex-wrap rst:gap-2",children:Se.filter(o=>!o.hidden?.(e)).map(o=>n.jsx(Z,{...me[o.tone??"neutral"],"data-queue-action":o.id,busy:r===o.id,blocked:!!r&&r!==o.id,onClick:()=>Ie(e,o),children:o.label},o.id))})},b=Object.values(oe).find(e=>e.surface)??null,L=b?R(b.action):null,fe=L?.edit.surface,O=b?de(b,-1):null;return n.jsxs("section",{ref:q,"aria-labelledby":V,onBlur:we,className:P.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",ye),children:[n.jsx(Ee,{id:V,className:P.cn("rst:text-lg rst:font-semibold rst:text-[var(--roster-control-text)]",d&&"rst:sr-only"),children:c}),n.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-queue-live":"","data-queue-live-n":H.n,children:[H.text,H.n%2?" ":""]}),_==="loading"?n.jsx("div",{className:"rst:flex rst:justify-center rst:py-12","aria-busy":"true",children:n.jsx(Oe.Spinner,{size:"lg",label:`Loading ${c}`})}):_==="error"?n.jsx(Y.Alert,{colorScheme:"error",children:n.jsxs("div",{className:"rst:flex rst:flex-col rst:items-start rst:gap-3",children:[n.jsx("div",{children:ve??"The queue couldn't load."}),ee&&n.jsx(ge.Button,{size:"lg",variant:"outline",colorScheme:"neutral",onClick:ee,children:"Retry"})]})}):v.length===0?n.jsx(ze.EmptyState,{title:te.title,description:te.description,headingLevel:le,tabIndex:-1,"data-queue-empty":"",className:"rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"}):n.jsx("ul",{role:"list","aria-labelledby":V,className:"rst:m-0 rst:flex rst:list-none rst:flex-col rst:gap-3 rst:p-0",children:v.map((e,t)=>{const r=k[t],o=`${N}-item-${t}`,f=xe?.(e),s=oe[r];return n.jsx("li",{children:n.jsx("article",{"data-queue-item":r,tabIndex:-1,"aria-labelledby":o,onFocus:Ne(r),className:"rst:rounded-xl rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:n.jsx(Le.Card,{padding:re==="compact"?"sm":"md",children:n.jsxs("div",{className:P.cn("rst:flex rst:flex-col",re==="compact"?"rst:gap-3":"rst:gap-4"),children:[n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:items-baseline rst:gap-x-3 rst:gap-y-1",children:[n.jsx(Fe,{id:o,className:"rst:text-base rst:font-semibold",children:g(e)}),f&&n.jsx("div",{className:"rst:flex rst:flex-wrap rst:items-center rst:gap-2 rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:f})]}),n.jsx("div",{className:"rst:min-w-0",children:he(e)}),se[r]&&n.jsx(Y.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:se[r]}),s&&!s.surface?Ae(s,t):Me(e,r)]})})})},r)})}),be,fe&&b&&L&&O&&n.jsx(fe,{open:b.open,title:L.edit.title,description:L.edit.description,busy:!!D[b.key],onCancel:()=>U(b.key),onAfterClose:()=>Te(b.key),submitButton:O.submitButton,cancelButton:O.cancelButton,children:n.jsx("div",{className:"rst:flex rst:flex-col rst:gap-4",children:O.fields})})]})}function pe(c,d){const p=R(c.action);if(p)return p.edit.validate?.(c.draft,d);if(c.action.reason){if(c.action.reason.required&&!c.reason.value)return"Pick a reason.";if(c.action.reason.note==="required"&&!c.reason.note?.trim())return"Add a note."}}function Ue(c){const d=c.note?.trim();return{...c.value?{value:c.value}:{},...d?{note:d}:{}}}function Ve({id:c,step:d,value:p,disabled:j,onChange:v}){const y=d.note??"optional";return n.jsxs(n.Fragment,{children:[d.options&&d.options.length>0&&n.jsx(De.RadioGroup,{label:d.required?"Reason":"Reason (optional)",options:d.options,value:p.value??"",onChange:g=>v({...p,value:g}),disabled:j}),y!=="none"&&n.jsx(Pe.Textarea,{id:`${c}-note`,label:d.noteLabel??(y==="required"?"Note":"Note (optional)"),rows:3,value:p.note??"",onChange:g=>v({...p,note:g.target.value}),disabled:j})]})}exports.ModerationQueue=Je;