@nswds/app 1.54.7 → 1.55.0

package/dist/globals.css

@@ -1093,6 +1093,9 @@
   .-ml-1 {
     margin-left: calc(var(--spacing) * -1);
   }
+  .-ml-3 {
+    margin-left: calc(var(--spacing) * -3);
+  }
   .-ml-4 {
     margin-left: calc(var(--spacing) * -4);
   }
@@ -1267,6 +1270,9 @@
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -1498,12 +1504,24 @@
   .w-\[50vw\] {
     width: 50vw;
   }
+  .w-\[80px\] {
+    width: 80px;
+  }
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[160px\] {
+    width: 160px;
+  }
   .w-\[180px\] {
     width: 180px;
   }
+  .w-\[184px\] {
+    width: 184px;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
   .w-\[260px\] {
     width: 260px;
   }
@@ -1549,6 +1567,9 @@
   .max-w-60 {
     max-width: calc(var(--spacing) * 60);
   }
+  .max-w-\[500px\] {
+    max-width: 500px;
+  }
   .max-w-\[600px\] {
     max-width: 600px;
   }
@@ -1729,6 +1750,10 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-\[2px\] {
+    --tw-translate-y: 2px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-\[calc\(-50\%_-_2px\)\] {
     --tw-translate-y: calc(-50% - 2px);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2008,6 +2033,13 @@
   .gap-x-12 {
     column-gap: calc(var(--spacing) * 12);
   }
+  .space-x-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -2547,6 +2579,9 @@
   .bg-primary-500 {
     background-color: oklch(0.719602022988773 0.1609881523353869 242.17574150873253);
   }
+  .bg-primary-600 {
+    background-color: oklch(0.5751126532766045 0.2298336295034379 260.75633298199585);
+  }
   .bg-primary-800 {
     background-color: oklch(0.2899986864508513 0.11729574451023282 259.841936589881);
   }
@@ -3398,6 +3433,12 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-muted-foreground\/70 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
+    }
+  }
   .text-pink-500 {
     color: var(--color-pink-500);
   }
@@ -7295,6 +7336,16 @@
       color: var(--color-white);
     }
   }
+  .data-\[state\=open\]\:bg-accent {
+    &[data-state="open"] {
+      background-color: var(--accent);
+    }
+  }
+  .data-\[state\=open\]\:bg-muted {
+    &[data-state="open"] {
+      background-color: var(--muted);
+    }
+  }
   .data-\[state\=open\]\:bg-primary-800\/10 {
     &[data-state="open"] {
       background-color: color-mix(in oklab, oklch(0.2899986864508513 0.11729574451023282 259.841936589881) 10%, transparent);
@@ -8382,6 +8433,11 @@
       width: calc(var(--spacing) * 80);
     }
   }
+  .lg\:w-\[280px\] {
+    @media (width >= 64rem) {
+      width: 280px;
+    }
+  }
   .lg\:max-w-none {
     @media (width >= 64rem) {
       max-width: none;
@@ -8446,6 +8502,15 @@
       }
     }
   }
+  .lg\:space-x-8 {
+    @media (width >= 64rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
   .lg\:rounded-sm {
     @media (width >= 64rem) {
       border-radius: var(--radius-sm);
@@ -10568,6 +10633,11 @@
       pointer-events: none;
     }
   }
+  .\[\&_svg\]\:invisible {
+    & svg {
+      visibility: hidden;
+    }
+  }
   .\[\&_svg\]\:shrink-0 {
     & svg {
       flex-shrink: 0;

package/dist/index.cjs

@@ -56,6 +56,7 @@ var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactDayPicker = require('react-day-picker');
 var useEmblaCarousel = require('embla-carousel-react');
 var inputOtp = require('input-otp');
+var reactTable = require('@tanstack/react-table');
 var slugify = require('@sindresorhus/slugify');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
@@ -7871,7 +7872,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.54.4"};
+  version: "1.54.7"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -24149,6 +24150,319 @@ function SidebarMenuSubButton({
     }
   );
 }
+function DataTablePagination({ table }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground flex-1 text-sm", children: [
+      table.getFilteredSelectedRowModel().rows.length,
+      " of",
+      " ",
+      table.getFilteredRowModel().rows.length,
+      " row(s) selected."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 text-sm font-medium", children: "Rows per page" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Select,
+          {
+            value: `${table.getState().pagination.pageSize}`,
+            onValueChange: (value) => {
+              table.setPageSize(Number(value));
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { side: "top", children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button2,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "hidden p-0 lg:flex",
+            onClick: () => table.setPageIndex(0),
+            disabled: !table.getCanPreviousPage(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to first page" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_left, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button2,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "p-0",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to previous page" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_left, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button2,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "p-0",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to next page" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_right, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button2,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "hidden p-0 lg:flex",
+            onClick: () => table.setPageIndex(table.getPageCount() - 1),
+            disabled: !table.getCanNextPage(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_right, {})
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function DataTableFacetedFilter({
+  column,
+  title,
+  options
+}) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue());
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "outline", size: "sm", className: "border-dashed", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icons.add, {}),
+      title,
+      selectedValues?.size > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Separator4, { orientation: "vertical", className: "mx-2 h-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "soft", className: "hidden lg:block", children: selectedValues.size }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "soft", className: "rounded-sm px-1 font-normal", children: [
+          selectedValues.size,
+          " selected"
+        ] }) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          Badge,
+          {
+            variant: "soft",
+            className: "rounded-sm px-1 font-normal",
+            children: option.label
+          },
+          option.value
+        )) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No results found." }),
+        /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((option) => {
+          const isSelected = selectedValues.has(option.value);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            CommandItem,
+            {
+              onSelect: () => {
+                if (isSelected) {
+                  selectedValues.delete(option.value);
+                } else {
+                  selectedValues.add(option.value);
+                }
+                const filterValues = Array.from(selectedValues);
+                column?.setFilterValue(filterValues.length ? filterValues : void 0);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "border-grey-600 mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                      isSelected ? "bg-primary-600 border-primary-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { className: "text-white" })
+                  }
+                ),
+                option.icon && /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "text-muted-foreground mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
+                facets?.get(option.value) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs", children: facets.get(option.value) })
+              ]
+            },
+            option.value
+          );
+        }) }),
+        selectedValues.size > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CommandSeparator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            CommandItem,
+            {
+              onSelect: () => column?.setFilterValue(void 0),
+              className: "justify-center text-center",
+              children: "Clear filters"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function DataTableViewOptions({ table }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "outline", size: "sm", className: "nsw:ml-auto nsw:hidden nsw:lg:flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icons.tune, {}),
+      "View"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "nsw:w-[150px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+      table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenuCheckboxItem,
+          {
+            className: "nsw:capitalize",
+            checked: column.getIsVisible(),
+            onCheckedChange: (value) => column.toggleVisibility(!!value),
+            children: column.id
+          },
+          column.id
+        );
+      })
+    ] })
+  ] });
+}
+function DataTableToolbar({ search, toolbar, table }) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "search",
+          name: "global-filter",
+          placeholder: search?.placeholder ?? `Filter...`,
+          value: table.getState().globalFilter ?? "",
+          onChange: (event) => table.setGlobalFilter(event.target.value),
+          className: "h-10 w-[184px] lg:w-[280px]"
+        }
+      ),
+      toolbar && toolbar.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+        DataTableFacetedFilter,
+        {
+          column: table.getColumn(group.id),
+          title: group.title,
+          options: group.values
+        },
+        group.id
+      )),
+      isFiltered && /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", onClick: () => table.resetColumnFilters(), children: [
+        "Reset",
+        /* @__PURE__ */ jsxRuntime.jsx(Icons.close, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DataTableViewOptions, { table })
+  ] });
+}
+function DataTable({
+  search,
+  toolbar,
+  columns,
+  data
+}) {
+  const [rowSelection, setRowSelection] = React18__namespace.useState({});
+  const [columnVisibility, setColumnVisibility] = React18__namespace.useState({});
+  const [columnFilters, setColumnFilters] = React18__namespace.useState([]);
+  const [sorting, setSorting] = React18__namespace.useState([]);
+  const [globalFilter, setGlobalFilter] = React18__namespace.useState("");
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    state: {
+      globalFilter,
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: "includesString",
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getFacetedRowModel: reactTable.getFacetedRowModel(),
+    getFacetedUniqueValues: reactTable.getFacetedUniqueValues()
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DataTableToolbar, { table, search, toolbar }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          className: "relative",
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DataTablePagination, { table })
+  ] });
+}
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: title });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center space-x-2", className), children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", size: "sm", className: "data-[state=open]:bg-accent -ml-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+      column.getIsSorted() === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.south, {}) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.north, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.unfold_more, {})
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icons.south, { className: "text-muted-foreground/70 h-3.5 w-3.5" }),
+        "Asc"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icons.north, { className: "text-muted-foreground/70 h-3.5 w-3.5" }),
+        "Desc"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icons.eye_off, { className: "text-muted-foreground/70 h-3.5 w-3.5" }),
+        "Hide"
+      ] })
+    ] })
+  ] }) });
+}
 var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React18.useLayoutEffect : React18.useEffect;
 function useDisableToc() {
   const { setToc } = useToc();
@@ -24386,6 +24700,12 @@ exports.ContextMenuSub = ContextMenuSub;
 exports.ContextMenuSubContent = ContextMenuSubContent;
 exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
 exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.DataTable = DataTable;
+exports.DataTableColumnHeader = DataTableColumnHeader;
+exports.DataTableFacetedFilter = DataTableFacetedFilter;
+exports.DataTablePagination = DataTablePagination;
+exports.DataTableToolbar = DataTableToolbar;
+exports.DataTableViewOptions = DataTableViewOptions;
 exports.Description = Description3;
 exports.DescriptionDetails = DescriptionDetails;
 exports.DescriptionList = DescriptionList;