@nexub/react 7.5.0 → 7.7.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.5.0",
+  "version": "7.7.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Badge/Badge.d.ts

@@ -8,5 +8,14 @@ export declare const badgeVariants: (props?: ({
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
     tone?: ToneValue;
     leadingIcon?: React.ReactNode;
+    /**
+     * A status dot. Before the label when there is one; on its own (no children
+     * or count) it is just the dot: give it an `aria-label`, or it's decorative.
+     */
+    dot?: boolean;
+    /** A number to show. Above `max` it reads "99+"; screen readers get the full number. */
+    count?: number;
+    /** @default 99 */
+    max?: number;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/Badge.js

@@ -72,10 +72,37 @@ const toneClasses = {
     outline: "border-[color:light-dark(var(--color-palette-founderub-80),var(--color-palette-founderub-40))] text-[var(--color-founderub)]"
   }
 };
+const dotClasses = {
+  neutral: "bg-[var(--color-outline)]",
+  info: "bg-[var(--color-info)]",
+  success: "bg-[var(--color-success)]",
+  warning: "bg-[var(--color-warning)]",
+  danger: "bg-[var(--color-error)]",
+  leap: "bg-[var(--color-leap)]",
+  bookub: "bg-[var(--color-bookub)]",
+  payub: "bg-[var(--color-payub)]",
+  founderub: "bg-[var(--color-founderub)]"
+};
+const dotSizes = { sm: "size-1.5", md: "size-2", lg: "size-2.5" };
 const Badge = React.forwardRef(
-  ({ className, size, variant = "solid", tone = "neutral", leadingIcon, children, ...props }, ref) => {
+  ({ className, size, variant = "solid", tone = "neutral", leadingIcon, dot, count, max = 99, children, ...props }, ref) => {
     const resolvedVariant = variant ?? "solid";
     const toneStyle = toneClasses[tone][resolvedVariant];
+    const dotSize = dotSizes[size ?? "md"];
+    if (dot && children == null && count == null) {
+      const labelled = props["aria-label"] != null || props["aria-labelledby"] != null;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          role: labelled ? "img" : void 0,
+          "aria-hidden": labelled ? void 0 : true,
+          className: cn("inline-block shrink-0 rounded-full", dotSize, dotClasses[tone], className),
+          ...props
+        }
+      );
+    }
+    const capped = count != null && count > max;
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -83,8 +110,19 @@ const Badge = React.forwardRef(
         className: cn(badgeVariants({ size, variant: resolvedVariant }), toneStyle, className),
         ...props,
         children: [
+          dot && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("shrink-0 rounded-full", dotSize, resolvedVariant === "solid" ? "bg-current" : dotClasses[tone])
+            }
+          ),
           leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center", children: leadingIcon }),
-          children
+          children,
+          count != null && /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": capped || void 0, className: "nx-tick", children: capped ? `${max}+` : count }, count),
+            capped && /* @__PURE__ */ jsx("span", { className: "sr-only", children: count })
+          ] })
         ]
       }
     );

package/dist/components/Button/Button.d.ts

@@ -4,7 +4,7 @@ import type { ToneValue } from '@nexub/core';
 export type { ToneValue };
 export { toneTextClasses } from '../../utils/control.js';
 export declare const buttonVariants: (props?: ({
-    variant?: "accent" | "text" | "link" | "outline" | "primary" | "glass" | "ghost" | "subtle" | "filled" | "tonal" | "outlined" | "hero" | "secondary" | "destructive" | null | undefined;
+    variant?: "accent" | "text" | "link" | "outline" | "primary" | "glass" | "filled" | "tonal" | "outlined" | "hero" | "secondary" | "subtle" | "ghost" | "destructive" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import { Command } from 'cmdk';
 export interface CommandPaletteRootProps extends RadixDialog.DialogProps {
     className?: string;
     /** Accessible name of the dialog. @default 'Command palette' */
@@ -17,6 +18,36 @@ export interface CommandPaletteRootProps extends RadixDialog.DialogProps {
      * the page, e.g. `'k'` for Cmd+K / Ctrl+K. Off by default.
      */
     shortcut?: string;
+    /** The open page stack (ids of `CommandPalette.Page`s), deepest last. Empty = the root page. */
+    pages?: string[];
+    defaultPages?: string[];
+    onPagesChange?: (pages: string[]) => void;
+    /** Shows a loading row (e.g. while async results arrive) and hides `Empty`. */
+    loading?: boolean;
+    /**
+     * Opt-in recents: the last `recentLimit` items picked on the root page are
+     * kept in localStorage under this key and shown as a "Recent" group while
+     * the query is empty.
+     */
+    recentKey?: string;
+    /** @default 5 */
+    recentLimit?: number;
+}
+export interface CommandPaletteItemProps extends React.ComponentProps<typeof Command.Item> {
+    /** Opens this `CommandPalette.Page` (by id) when selected. */
+    page?: string;
+}
+export interface CommandPalettePageProps {
+    /** Pushed by `<CommandPalette.Item page="id">`. Leave out for the root page. */
+    id?: string;
+    /** Shown in the input's breadcrumb. Defaults to the id. */
+    title?: string;
+    children?: React.ReactNode;
+}
+/** Content shown only while this page is on top of the stack (no id: the root page). */
+declare function Page({ id, title, children }: CommandPalettePageProps): React.JSX.Element | null;
+declare namespace Page {
+    var displayName: string;
 }
 export declare const CommandPalette: {
     Root: React.ForwardRefExoticComponent<CommandPaletteRootProps & React.RefAttributes<HTMLDivElement>>;
@@ -55,19 +86,7 @@ export declare const CommandPalette: {
         value?: string;
         forceMount?: boolean;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<{
-        children?: React.ReactNode;
-    } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement>;
-    } & {
-        asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
-        disabled?: boolean;
-        onSelect?: (value: string) => void;
-        value?: string;
-        keywords?: string[];
-        forceMount?: boolean;
-    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<CommandPaletteItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Separator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
@@ -75,4 +94,6 @@ export declare const CommandPalette: {
     }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         alwaysRender?: boolean;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Page: typeof Page;
 };
+export {};

package/dist/components/CommandPalette/CommandPalette.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
-import { Command } from "cmdk";
+import { Command, useCommandState } from "cmdk";
 import { Search } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
@@ -10,15 +10,72 @@ import { overlaySurface, scrim } from "../../utils/surface.js";
 import { useClassScrollLock } from "../../hooks/useClassScrollLock.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { useMergedRefs } from "../../hooks/useMergedRefs.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+import { Badge } from "../Badge/Badge.js";
+import { Spinner } from "../Spinner/Spinner.js";
+const PaletteContext = React.createContext(null);
+const usePalette = () => React.useContext(PaletteContext);
+function readRecents(key) {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(key) ?? "[]");
+    return Array.isArray(parsed) ? parsed.filter((r) => typeof r?.value === "string" && typeof r?.label === "string") : [];
+  } catch {
+    return [];
+  }
+}
 const overlayClasses = cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim);
 function ClassLockOverlay() {
   useClassScrollLock();
   return /* @__PURE__ */ jsx("div", { "data-state": "open", className: overlayClasses });
 }
 const Root = React.forwardRef(
-  ({ children, label: labelProp, scrollLock = "style", shouldFilter, shortcut, open: openProp, defaultOpen, onOpenChange, ...props }, ref) => {
+  ({
+    children,
+    label: labelProp,
+    scrollLock = "style",
+    shouldFilter,
+    shortcut,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    pages: pagesProp,
+    defaultPages,
+    onPagesChange,
+    loading,
+    recentKey,
+    recentLimit = 5,
+    ...props
+  }, ref) => {
     const messages = useNexubMessages();
-    const [open = false, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });
+    const [pages = [], setPages] = useControllableState({ value: pagesProp, defaultValue: defaultPages, onChange: onPagesChange });
+    const [open = false, setOpenState] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });
+    const setOpen = (next) => {
+      setOpenState(next);
+      if (!next && pages.length) setPages([]);
+    };
+    const [titles, setTitles] = React.useState({});
+    const [recents, setRecents] = React.useState([]);
+    const handlers = React.useRef(/* @__PURE__ */ new Map()).current;
+    React.useEffect(() => setRecents(recentKey ? readRecents(recentKey) : []), [recentKey]);
+    const ctx = {
+      pages,
+      push: (page) => setPages([...pages, page]),
+      pop: () => setPages(pages.slice(0, -1)),
+      titles,
+      setTitle: (page, title) => setTitles((t) => t[page] === title ? t : { ...t, [page]: title }),
+      loading,
+      recents,
+      record: (recent) => {
+        if (!recentKey || pages.length) return;
+        const next = [recent, ...recents.filter((r) => r.value !== recent.value)].slice(0, recentLimit);
+        setRecents(next);
+        try {
+          localStorage.setItem(recentKey, JSON.stringify(next));
+        } catch {
+        }
+      },
+      handlers
+    };
     React.useEffect(() => {
       if (!shortcut) return;
       const onKeyDown = (e) => {
@@ -60,7 +117,7 @@ const Root = React.forwardRef(
                 shouldFilter,
                 loop: true,
                 className: "flex h-full w-full flex-col overflow-hidden text-[var(--color-on-surface)]",
-                children
+                children: /* @__PURE__ */ jsx(PaletteContext.Provider, { value: ctx, children })
               }
             )
           ]
@@ -70,31 +127,75 @@ const Root = React.forwardRef(
   }
 );
 Root.displayName = "CommandPalette.Root";
-const Input = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-[var(--color-outline-variant)] px-3", children: [
-  /* @__PURE__ */ jsx(Search, { size: "sm", className: "me-2 shrink-0 opacity-50", "aria-hidden": "true" }),
-  /* @__PURE__ */ jsx(
-    Command.Input,
+const Input = React.forwardRef(({ className, value: valueProp, onValueChange, onKeyDown, ...props }, ref) => {
+  const palette = usePalette();
+  const pages = palette?.pages ?? [];
+  const [value = "", setValue] = useControllableState({ value: valueProp, defaultValue: "", onChange: onValueChange });
+  const depth = pages.length;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) first.current = false;
+    else setValue("");
+  }, [depth]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 border-b border-[var(--color-outline-variant)] px-3", children: [
+    /* @__PURE__ */ jsx(Search, { size: "sm", className: "me-1 shrink-0 opacity-50", "aria-hidden": "true" }),
+    pages.map((page) => /* @__PURE__ */ jsx(Badge, { variant: "soft", size: "sm", className: "shrink-0", children: palette?.titles[page] ?? page }, page)),
+    /* @__PURE__ */ jsx(
+      Command.Input,
+      {
+        ref,
+        value,
+        onValueChange: setValue,
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (!e.defaultPrevented && e.key === "Backspace" && !e.currentTarget.value && depth) {
+            e.preventDefault();
+            palette?.pop();
+          }
+        },
+        className: cn(
+          "ms-1 flex h-control-xl w-full bg-transparent text-body-lg outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+});
+Input.displayName = "CommandPalette.Input";
+const List = React.forwardRef(({ className, children, ...props }, ref) => {
+  const palette = usePalette();
+  const messages = useNexubMessages();
+  const search = useCommandState((state) => state.search);
+  const showRecents = palette && !palette.loading && !palette.pages.length && !search && palette.recents.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Command.List,
     {
       ref,
-      className: cn(
-        "flex h-control-xl w-full bg-transparent text-body-lg outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
-        className
-      ),
-      ...props
+      className: cn("max-h-[400px] overflow-y-auto overflow-x-hidden p-2", className),
+      ...props,
+      children: [
+        palette?.loading && /* @__PURE__ */ jsxs(Command.Loading, { label: messages.loading, className: cn(itemClasses, "text-[var(--color-on-surface-muted)]"), children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }),
+          messages.loading
+        ] }),
+        showRecents && /* @__PURE__ */ jsx(Group, { heading: messages.recent, children: palette.recents.map((r) => /* @__PURE__ */ jsx(
+          Command.Item,
+          {
+            value: `recent:${r.value}`,
+            onSelect: () => palette.handlers.get(r.value)?.(r.value),
+            className: itemClasses,
+            children: r.label
+          },
+          r.value
+        )) }),
+        children
+      ]
     }
-  )
-] }));
-Input.displayName = "CommandPalette.Input";
-const List = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command.List,
-  {
-    ref,
-    className: cn("max-h-[400px] overflow-y-auto overflow-x-hidden p-2", className),
-    ...props
-  }
-));
+  );
+});
 List.displayName = "CommandPalette.List";
-const Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Empty = React.forwardRef(({ className, ...props }, ref) => usePalette()?.loading ? null : /* @__PURE__ */ jsx(
   Command.Empty,
   {
     ref,
@@ -106,6 +207,11 @@ const Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Empty.displayName = "CommandPalette.Empty";
+const itemClasses = cn(
+  "relative flex cursor-default select-none items-center gap-2 rounded-shape-container px-3 py-2.5 text-body-sm outline-none",
+  "aria-selected:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
+  "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--color-text-disabled)]"
+);
 const Group = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command.Group,
   {
@@ -119,20 +225,37 @@ const Group = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Group.displayName = "CommandPalette.Group";
-const Item = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command.Item,
-  {
-    ref,
-    className: cn(
-      // Concentric: overlay 24px − 8px padding = 16px.
-      "relative flex cursor-default select-none items-center gap-2 rounded-shape-container px-3 py-2.5 text-body-sm outline-none",
-      "aria-selected:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
-      "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--color-text-disabled)]",
-      className
-    ),
-    ...props
+const Item = React.forwardRef(
+  ({ className, page, onSelect, ...props }, ref) => {
+    const palette = usePalette();
+    const local = React.useRef(null);
+    const select = (value) => {
+      onSelect?.(value);
+      if (page) palette?.push(page);
+      palette?.record({ value, label: local.current?.textContent?.trim() ?? value });
+    };
+    const selectRef = React.useRef(select);
+    selectRef.current = select;
+    React.useEffect(() => {
+      const value = local.current?.getAttribute("data-value");
+      if (!palette || !value) return;
+      const run = (v) => selectRef.current(v);
+      palette.handlers.set(value, run);
+      return () => {
+        if (palette.handlers.get(value) === run) palette.handlers.delete(value);
+      };
+    });
+    return /* @__PURE__ */ jsx(
+      Command.Item,
+      {
+        ref: useMergedRefs(ref, local),
+        onSelect: select,
+        className: cn(itemClasses, className),
+        ...props
+      }
+    );
   }
-));
+);
 Item.displayName = "CommandPalette.Item";
 const Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command.Separator,
@@ -143,7 +266,18 @@ const Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 Separator.displayName = "CommandPalette.Separator";
-const CommandPalette = { Root, Input, List, Empty, Group, Item, Separator };
+function Page({ id, title, children }) {
+  const palette = usePalette();
+  const setTitle = palette?.setTitle;
+  useIsomorphicLayoutEffect(() => {
+    if (id && title) setTitle?.(id, title);
+  }, [id, title]);
+  const pages = palette?.pages ?? [];
+  const active = id ? pages[pages.length - 1] === id : pages.length === 0;
+  return active ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+Page.displayName = "CommandPalette.Page";
+const CommandPalette = { Root, Input, List, Empty, Group, Item, Separator, Page };
 export {
   CommandPalette
 };

package/dist/components/CommandPalette/index.d.ts

@@ -1,2 +1,2 @@
 export { CommandPalette } from './CommandPalette.js';
-export type { CommandPaletteRootProps } from './CommandPalette.js';
+export type { CommandPaletteRootProps, CommandPaletteItemProps, CommandPalettePageProps } from './CommandPalette.js';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState, type ExpandedState } from '@tanstack/react-table';
+import { type ColumnDef, type SortingState, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState, type ExpandedState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Horizontal alignment of the header and cells. Use 'end' for numbers. @default 'start' */
@@ -75,6 +75,20 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     pagination?: {
         pageSize?: number;
     };
+    /** Controlled sort (with `enableSorting`): `[{ id: 'name', desc: false }]`. */
+    sort?: SortingState;
+    onSortChange?: (sort: SortingState) => void;
+    /** Rows arrive sorted (server-side): headers still toggle `sort`, but rows aren't reordered. */
+    manualSort?: boolean;
+    /** Controlled page, zero-based. Turns pagination on. */
+    page?: number;
+    /** Rows per page; overrides `pagination.pageSize`. Turns pagination on. @default 20 */
+    pageSize?: number;
+    onPageChange?: (page: number) => void;
+    /** `data` is the current page only (server-side); set `rowCount` for the page count. Turns pagination on. */
+    manualPagination?: boolean;
+    /** Total rows across all pages, with `manualPagination`. */
+    rowCount?: number;
     /**
      * Nested rows (a tree table): return a row's children. The first column gets
      * an expand toggle and indents each level. Sorting sorts within each level.
@@ -96,4 +110,4 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     /** Shown in a full-width row when there are no rows. @default messages.noResults */
     emptyState?: React.ReactNode;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, loading, emptyState, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination: paginationProp, sort, onSortChange, manualSort, page, pageSize: pageSizeProp, onPageChange, manualPagination, rowCount, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, loading, emptyState, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;