@multiplatform.one/table 7.10.0 → 7.11.0

package/src/components/DataTableToolbar/index.tsx

@@ -11,7 +11,7 @@ import type { TableView } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 import { DataTableExport } from "../DataTableExport";
-import { DataTableFilterButton } from "../DataTableFilterButton";
+import { DataTableCardFilterButton, DataTableFilterButton } from "../DataTableFilterButton";
 
 export interface DataTableToolbarProps {
   // Search
@@ -49,6 +49,17 @@ export interface DataTableToolbarProps {
 }
 
 export function DataTableToolbar(props: DataTableToolbarProps) {
+  return <ToolbarLayout {...props} />;
+}
+
+export function DataTableCardToolbar(props: DataTableToolbarProps) {
+  return <ToolbarLayout {...props} cardLayout />;
+}
+
+function ToolbarLayout({
+  cardLayout = false,
+  ...props
+}: DataTableToolbarProps & { cardLayout?: boolean }) {
   const ctx = useDataTableState();
 
   const globalFilter = props.globalFilter ?? ctx?.state.globalFilter ?? "";
@@ -108,9 +119,105 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
   );
   const hasTrailing = showActionCluster || isFetching;
 
+  const viewPickerContent = showViewPicker && (
+    <DropdownMenu closeOnSelect placement="bottom-end">
+      <DropdownMenu.Trigger asChild>
+        <RovingFocusGroup.Item focusable asChild>
+          <Button
+            chromeless
+            size={controlSize}
+            iconAfter={<CaretDownIcon size={iconPx} />}
+            aria-label={t("Saved views")}
+            {...(cardLayout ? { minWidth: 0, maxWidth: "100%" as const } : {})}
+            aria-haspopup="menu"
+          >
+            {activeView?.name ?? t("Views")}
+          </Button>
+        </RovingFocusGroup.Item>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {views.map((view) => (
+          <DropdownMenu.CheckboxItem
+            key={view.id}
+            checked={view.id === activeViewId}
+            closeOnSelect
+            onSelect={() => onLoadView(view.id)}
+          >
+            {view.name}
+          </DropdownMenu.CheckboxItem>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+  const viewPicker =
+    cardLayout && showViewPicker ? (
+      <XStack minWidth={0} maxWidth="100%" flexBasis="auto" flexGrow={0} flexShrink={1}>
+        {viewPickerContent}
+      </XStack>
+    ) : (
+      viewPickerContent
+    );
+  const saveView = showSave && (
+    <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
+      <Popover.Trigger asChild>
+        <RovingFocusGroup.Item focusable asChild>
+          <Button
+            chromeless
+            size={controlSize}
+            icon={<FloppyDiskIcon size={iconPx} />}
+            aria-label={t("Save view")}
+          />
+        </RovingFocusGroup.Item>
+      </Popover.Trigger>
+      <Popover.Content
+        {...knobProps.elevatedSurface}
+        {...knobProps.borderRadius}
+        borderColor="$color6"
+        // LC-24: enter/exitStyle need a `transition` driver on the
+        // same element ({...string} spread set nothing).
+        transition={knobProps.transition}
+        enterStyle={{ x: 0, y: -10, opacity: 0 }}
+        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+        data-dismiss-class="compose"
+      >
+        <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={240}>
+          <Input
+            placeholder={t("View name")}
+            value={newViewName}
+            onChangeText={setNewViewName}
+            size={searchSize}
+            {...(compact === undefined ? {} : { compact })}
+            inputProps={{
+              "aria-label": t("View name"),
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.key === "Enter") handleSaveView();
+              },
+            }}
+          />
+          <XStack {...knobProps.gap} justifyContent="flex-end">
+            <Button size={controlSize} onPress={() => setShowSaveViewDialog(false)}>
+              {t("Cancel")}
+            </Button>
+            <Button
+              size={controlSize}
+              onPress={handleSaveView}
+              disabled={!newViewName.trim()}
+              disabledReason={t("Enter a view name")}
+            >
+              {t("Save")}
+            </Button>
+          </XStack>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+  const showSecondary = showViewPicker || showSave || enableExport || isFetching;
+
   return (
     <XStack
-      alignItems="center"
+      alignItems={cardLayout ? "stretch" : "center"}
+      flexDirection={cardLayout ? "column" : "row"}
+      {...(cardLayout ? { width: "100%" as const, minWidth: 0 } : {})}
       // LC-39: flush band — no painted panel, so no horizontal inset.
       paddingVertical={knobProps.panelPadding.padding}
       paddingHorizontal={0}
@@ -124,7 +231,12 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
       aria-busy={isFetching || undefined}
     >
       {enableGlobalSearch && (
-        <XStack flex={1} minWidth={160} maxWidth={searchMaxWidth} flexShrink={1}>
+        <XStack
+          flex={cardLayout ? undefined : 1}
+          minWidth={cardLayout ? 0 : 160}
+          maxWidth={cardLayout ? undefined : searchMaxWidth}
+          flexShrink={1}
+        >
           <SearchInput
             value={globalFilter}
             onChange={onGlobalFilterChange}
@@ -144,116 +256,83 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
         </XStack>
       )}
 
-      {hasTrailing && (
-        <XStack
-          alignItems="center"
-          {...knobProps.gap}
-          flexShrink={0}
-          marginInlineStart={enableGlobalSearch ? "auto" : 0}
-        >
-          {showActionCluster && (
+      {cardLayout ? (
+        <>
+          {(showFilterButton || customActions) && (
             <RovingFocusGroup orientation="horizontal" loop asChild>
-              <XStack alignItems="center" {...knobProps.gap}>
-                {showFilterButton && <DataTableFilterButton />}
-
-                {enableExport && <DataTableExport />}
-
+              <XStack
+                data-table-card-primary=""
+                width="100%"
+                minWidth={0}
+                alignItems="center"
+                flexWrap="nowrap"
+                {...knobProps.gap}
+              >
+                {showFilterButton && (
+                  <XStack flexShrink={0}>
+                    <DataTableCardFilterButton />
+                  </XStack>
+                )}
                 {customActions}
-
-                {showViewPicker && (
-                  <DropdownMenu closeOnSelect placement="bottom-end">
-                    <DropdownMenu.Trigger asChild>
-                      <RovingFocusGroup.Item focusable asChild>
-                        <Button
-                          chromeless
-                          size={controlSize}
-                          iconAfter={<CaretDownIcon size={iconPx} />}
-                          aria-label={t("Saved views")}
-                          aria-haspopup="menu"
-                        >
-                          {activeView?.name ?? t("Views")}
-                        </Button>
-                      </RovingFocusGroup.Item>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content>
-                      {views.map((view) => (
-                        <DropdownMenu.CheckboxItem
-                          key={view.id}
-                          checked={view.id === activeViewId}
-                          closeOnSelect
-                          onSelect={() => onLoadView(view.id)}
-                        >
-                          {view.name}
-                        </DropdownMenu.CheckboxItem>
-                      ))}
-                    </DropdownMenu.Content>
-                  </DropdownMenu>
+              </XStack>
+            </RovingFocusGroup>
+          )}
+          {showSecondary && (
+            <RovingFocusGroup orientation="horizontal" loop asChild>
+              <XStack
+                data-table-card-secondary=""
+                width="100%"
+                minWidth={0}
+                flexWrap="wrap"
+                alignItems="center"
+                {...knobProps.gap}
+              >
+                {enableExport && (
+                  <XStack maxWidth="100%" minWidth={0}>
+                    <DataTableExport />
+                  </XStack>
                 )}
-
-                {showSave && (
-                  <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
-                    <Popover.Trigger asChild>
-                      <RovingFocusGroup.Item focusable asChild>
-                        <Button
-                          chromeless
-                          size={controlSize}
-                          icon={<FloppyDiskIcon size={iconPx} />}
-                          aria-label={t("Save view")}
-                        />
-                      </RovingFocusGroup.Item>
-                    </Popover.Trigger>
-                    <Popover.Content
-                      {...knobProps.elevatedSurface}
-                      {...knobProps.borderRadius}
-                      borderColor="$color6"
-                      // LC-24: enter/exitStyle need a `transition` driver on the
-                      // same element ({...string} spread set nothing).
-                      transition={knobProps.transition}
-                      enterStyle={{ x: 0, y: -10, opacity: 0 }}
-                      exitStyle={{ x: 0, y: -10, opacity: 0 }}
-                      data-dismiss-class="compose"
-                    >
-                      <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={240}>
-                        <Input
-                          placeholder={t("View name")}
-                          value={newViewName}
-                          onChangeText={setNewViewName}
-                          size={searchSize}
-                          {...(compact === undefined ? {} : { compact })}
-                          inputProps={{
-                            "aria-label": t("View name"),
-                            onKeyDown: (e: React.KeyboardEvent) => {
-                              if (e.key === "Enter") handleSaveView();
-                            },
-                          }}
-                        />
-                        <XStack {...knobProps.gap} justifyContent="flex-end">
-                          <Button size={controlSize} onPress={() => setShowSaveViewDialog(false)}>
-                            {t("Cancel")}
-                          </Button>
-                          <Button
-                            size={controlSize}
-                            onPress={handleSaveView}
-                            disabled={!newViewName.trim()}
-                            disabledReason={t("Enter a view name")}
-                          >
-                            {t("Save")}
-                          </Button>
-                        </XStack>
-                      </YStack>
-                    </Popover.Content>
-                  </Popover>
+                {viewPicker}
+                {saveView}
+                {isFetching && (
+                  <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
+                    <Spinner size="small" />
+                  </XStack>
                 )}
               </XStack>
             </RovingFocusGroup>
           )}
+        </>
+      ) : (
+        hasTrailing && (
+          <XStack
+            alignItems="center"
+            {...knobProps.gap}
+            flexShrink={0}
+            marginInlineStart={enableGlobalSearch ? "auto" : 0}
+          >
+            {showActionCluster && (
+              <RovingFocusGroup orientation="horizontal" loop asChild>
+                <XStack alignItems="center" {...knobProps.gap}>
+                  {showFilterButton && <DataTableFilterButton />}
 
-          {isFetching && (
-            <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
-              <Spinner size="small" />
-            </XStack>
-          )}
-        </XStack>
+                  {enableExport && <DataTableExport />}
+
+                  {customActions}
+
+                  {viewPicker}
+                  {saveView}
+                </XStack>
+              </RovingFocusGroup>
+            )}
+
+            {isFetching && (
+              <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
+                <Spinner size="small" />
+              </XStack>
+            )}
+          </XStack>
+        )
       )}
     </XStack>
   );

package/src/hooks/useDataTable.spec.ts

@@ -111,3 +111,117 @@ describe("useDataTable controlledState adoption", () => {
     expect(result.current.state.filters).toEqual([]);
   });
 });
+
+describe("useDataTable column width normalization", () => {
+  type Row = (typeof data)[number];
+
+  it.each<[Partial<DataTableColumn<Row>>, number]>([
+    [{ width: 320 }, 320],
+    [{ width: 320, size: 90 }, 90],
+    [{ width: 320, minWidth: 200, maxWidth: 240 }, 240],
+    [{ width: 320, size: 90, minWidth: 200, minSize: 60, maxWidth: 80, maxSize: 100 }, 90],
+    [{ width: 320, size: 180, maxWidth: 140 }, 140],
+    [{ width: 125.5 }, 125.5],
+    [{ width: 0 }, 20],
+    [{ width: 0, minWidth: 0 }, 0],
+    [{ width: 320, size: 0, minSize: 0 }, 0],
+    [{ width: Number.NaN }, 150],
+    [{ width: Number.POSITIVE_INFINITY }, 150],
+    [{ width: -1 }, 150],
+    [{ minWidth: Number.NaN, maxWidth: -1 }, 150],
+  ])("resolves %j to %s through the real table", (sizing, expected) => {
+    const { result } = renderHook(() =>
+      useDataTable({ data, columns: [{ id: "name", accessorKey: "name", ...sizing }] }),
+    );
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(expected);
+  });
+
+  it("preserves input objects and normalizes grouped leaves without distributing group width", () => {
+    const leaf: DataTableColumn<Row> = { id: "name", accessorKey: "name", width: 320 };
+    const group: DataTableColumn<Row> = {
+      id: "group",
+      header: "Group",
+      width: 900,
+      columns: [leaf],
+    };
+    const plain: DataTableColumn<Row> = { id: "status", accessorKey: "status" };
+    Object.freeze(leaf);
+    Object.freeze(group.columns);
+    Object.freeze(group);
+    Object.freeze(plain);
+    const source = [group, plain];
+    Object.freeze(source);
+    const { result, rerender } = renderHook(() => useDataTable({ data, columns: source }));
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+    expect(leaf).not.toHaveProperty("size");
+    expect(group.columns?.[0]).toBe(leaf);
+    expect(result.current.table.options.columns[1]).toBe(plain);
+    const normalized = result.current.table.options.columns;
+    rerender();
+    expect(result.current.table.options.columns).toBe(normalized);
+  });
+
+  it("keeps sizing state ahead of updated declarations and resets to the current definition", () => {
+    const { result, rerender } = renderHook(
+      ({ width }) => useDataTable({ data, columns: [{ id: "name", accessorKey: "name", width }] }),
+      { initialProps: { width: 320 } },
+    );
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+    act(() => result.current.actions.setColumnSizing({ name: 210 }));
+    rerender({ width: 400 });
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(210);
+    act(() => result.current.actions.resetToDefault());
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(400);
+  });
+
+  it("loads existing view width state without renaming its persistence field", () => {
+    const { result } = renderHook(() =>
+      useDataTable({
+        data,
+        columns: [{ id: "name", accessorKey: "name", width: 320 }],
+        initialState: {
+          views: [
+            {
+              id: "saved",
+              name: "Saved",
+              columns: { name: { id: "name", visible: true, width: 205, order: 0 } },
+              filters: [],
+              sorting: [],
+              pagination: { pageIndex: 0, pageSize: 10 },
+            },
+          ],
+        },
+      }),
+    );
+    act(() => result.current.actions.loadView("saved"));
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(205);
+    expect(result.current.state.columnSizing).toEqual({ name: 205 });
+    act(() => result.current.actions.resetToDefault());
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+  });
+
+  it("preserves sorting/filter aliases and explicit overrides alongside width", () => {
+    const sortingFn = vi.fn(() => 0);
+    const { result } = renderHook(() =>
+      useDataTable({
+        data,
+        columns: [
+          { id: "name", accessorKey: "name", width: 320, sortable: false, filterable: false },
+          {
+            id: "status",
+            accessorKey: "status",
+            width: 90,
+            sortable: false,
+            enableSorting: true,
+            sortingFn,
+          },
+        ],
+      }),
+    );
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+    expect(result.current.table.getColumn("name")?.getCanSort()).toBe(false);
+    expect(result.current.table.getColumn("name")?.getCanFilter()).toBe(false);
+    expect(result.current.table.getColumn("status")?.getCanSort()).toBe(true);
+    expect(result.current.table.getColumn("status")?.columnDef.sortingFn).toBe(sortingFn);
+  });
+});

package/src/hooks/useDataTable.ts

@@ -170,6 +170,7 @@ export const createUrlStrategy = {
 
 import React, { useMemo, useState, useCallback, useEffect, useRef } from "react";
 import type {
+  DataTableColumn,
   DataTableData,
   DataTableField,
   DataTableInfiniteState,
@@ -200,6 +201,26 @@ import { useTableViews } from "./useTableViews";
 const moneySortingFn = (rowA: any, rowB: any, columnId: string): number =>
   moneyComparator(rowA.getValue(columnId), rowB.getValue(columnId));
 
+function normalizeColumnWidths<TData extends DataTableData>(
+  column: ColumnDef<TData>,
+): ColumnDef<TData> {
+  if ("columns" in column && column.columns) {
+    const children = column.columns.map(normalizeColumnWidths);
+    return children.some((child, index) => child !== column.columns?.[index])
+      ? { ...column, columns: children }
+      : column;
+  }
+  const { width, minWidth, maxWidth } = column as DataTableColumn<TData>;
+  const validWidth = (value: unknown): value is number =>
+    typeof value === "number" && Number.isFinite(value) && value >= 0;
+  const sizing = {
+    ...(column.size === undefined && validWidth(width) ? { size: width } : {}),
+    ...(column.minSize === undefined && validWidth(minWidth) ? { minSize: minWidth } : {}),
+    ...(column.maxSize === undefined && validWidth(maxWidth) ? { maxSize: maxWidth } : {}),
+  };
+  return Object.keys(sizing).length ? { ...column, ...sizing } : column;
+}
+
 export function useDataTable<TData extends DataTableData = DataTableData>({
   data = [],
   columns = [],
@@ -480,7 +501,8 @@ export function useDataTable<TData extends DataTableData = DataTableData>({
   // the column declined (Axiom 6 HONEST STATE). Explicit TanStack props win.
   const normalizedColumns = useMemo(
     () =>
-      columns.map((column) => {
+      columns.map((inputColumn) => {
+        const column = normalizeColumnWidths(inputColumn);
         const { sortable, filterable, field } = column as {
           sortable?: boolean;
           filterable?: boolean;

package/src/types.ts

@@ -181,13 +181,15 @@ export type DataTableColumn<TData extends DataTableData = DataTableData> = Colum
   searchable?: boolean;
   hidden?: boolean;
   /**
-   * Column width intent, in px. Read by the view-options width slider and by
-   * saved views; the RENDERED cell box comes from TanStack `size`. Under the
-   * default `columnLayout: "equal"` neither one survives, and declaring
-   * either warns (see `columnLayout`).
+   * Initial leaf-column size in px, mapped to TanStack `size` when absent.
+   * Finite nonnegative values only. Sizing state overrides the declaration,
+   * within min/max bounds. Unpinned equal-layout cells ignore sizes unless
+   * resizing is enabled (see `columnLayout`).
    */
   width?: number;
+  /** Alias for `minSize` when absent. Finite nonnegative px; canonical value wins. */
   minWidth?: number;
+  /** Alias for `maxSize` when absent. Finite nonnegative px; canonical value wins. */
   maxWidth?: number;
   /**
    * Text alignment override (DG-TBL-01).
@@ -565,15 +567,15 @@ export interface DataTableProps<TData extends DataTableData = DataTableData> {
   // Column Layout
   /**
    * How columns are sized and whether table scrolls horizontally.
-   * - 'equal': All columns equal width, no horizontal scroll (default)
-   * - 'auto': Content-based width, last column fills remainder, squishes if needed
-   * - 'scroll': Content-based width, horizontal scroll when content exceeds container
+   * - 'equal': Unpinned cells share available width (default).
+   * - 'auto': Native table layout on web; resolved sizes are table-layout inputs.
+   * - 'scroll': Fixed resolved sizes; horizontal overflow on web when needed.
    *
-   * Under 'equal' a PER-COLUMN WIDTH IS IGNORED. Every cell gets
-   * `flexGrow: 1, flexBasis: 0`, so a column's `width` / `size` never reaches
-   * the cell box and the render is identical to one that declared no widths.
-   * Use 'auto' or 'scroll' when the widths must hold, or turn on
-   * `enableColumnResizing`, which switches the cells to `flexBasis: "auto"`.
+   * Under 'equal', unpinned cells ignore `width` / `size` without resizing.
+   * Use 'scroll' for exact widths or enable `enableColumnResizing` for fixed
+   * resizable cells. Pinned cells always keep their resolved size so sticky
+   * offsets agree with their boxes. Unspecified sizes resolve to 150px in
+   * sized modes; content isn't measured and spare space needn't be filled.
    * Declaring a width under 'equal' emits the `[table] column-width-ignored`
    * dev warning rather than failing silently (MPO-236).
    */

package/types/components/DataTable/DataTableCardControls.d.ts

@@ -26,5 +26,8 @@ export interface DataTableCardControlsProps {
     /** Table-level disabled state (UX-011): controls render inert + LC-40 visible. */
     disabled?: boolean;
 }
+export declare function DataTableCardSortControl({ table, compact, disabled, contained, }: Pick<DataTableCardControlsProps, "table" | "compact" | "disabled"> & {
+    contained?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function DataTableCardControls({ table, enableSorting, enableFiltering, availableColumns, compact, disabled, }: DataTableCardControlsProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=DataTableCardControls.d.ts.map

package/types/components/DataTable/DataTableCardControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableCardControls.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableCardControls.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AASH,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAK5E,MAAM,WAAW,0BAA0B;IACzC,mDAAmD;IACnD,KAAK,EAAE,GAAG,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,KAAK,CAAC;QACvB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,mBAAmB,CAAC;QAC1B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;KACjC,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,aAAqB,EACrB,eAAuB,EACvB,gBAAqB,EACrB,OAAe,EACf,QAAgB,GACjB,EAAE,0BAA0B,kDA+F5B"}
+{"version":3,"file":"DataTableCardControls.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableCardControls.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AASH,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAK5E,MAAM,WAAW,0BAA0B;IACzC,mDAAmD;IACnD,KAAK,EAAE,GAAG,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,KAAK,CAAC;QACvB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,mBAAmB,CAAC;QAC1B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;KACjC,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,OAAe,EACf,QAAgB,EAChB,SAAiB,GAClB,EAAE,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,kDAqF9F;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,aAAqB,EACrB,eAAuB,EACvB,gBAAqB,EACrB,OAAe,EACf,QAAgB,GACjB,EAAE,0BAA0B,kDA6B5B"}

package/types/components/DataTable/DataTableRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRoot.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableRoot.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAcH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAajF,OAAO,KAAK,EAIV,cAAc,EAEf,MAAM,aAAa,CAAC;AAgDrB,MAAM,WAAW,kBAAkB,CACjC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CACvD,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACrF,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,eAAe,EACf,aAAa,EACb,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,WAAmB,EACnB,aAAmB,EACnB,WAAW,EACX,eAAuB,EACvB,gBAAwB,EACxB,aAAqB,EACrB,eAAsB,EACtB,gBAAgB,EAChB,aAAoB,EACpB,gBAAuB,EACvB,eAAe,EACf,cAAwB,EACxB,QAAQ,EACR,cAAc,EACd,sBAA6B,EAC7B,oBAA4B,EAC5B,oBAA4B,EAC5B,kBAAyB,EACzB,WAAmB,EACnB,YAAsB,EACtB,MAAe,EACf,oBAA4B,EAC5B,oBAAoB,EACpB,sBAA0B,EAC1B,kBAA0B,EAC1B,kBAAkB,EAClB,UAAU,EACV,mBAA2B,EAC3B,gBAAoB,EACpB,cAAsB,EACtB,wBAAgC,EAChC,UAAU,EACV,QAAQ,EACR,kBAA0B,EAC1B,cAAc,EAAE,kBAAkB,EAClC,WAAW,EACX,QAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,cAAsB,EACtB,UAAkB,EAClB,aAAqB,EACrB,OAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,aAAa,EAAE,cAAc,EAC7B,SAAS,EACT,IAAI,EACJ,OAAe,EACf,QAAgB,EAChB,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,2CA8kE3B"}
+{"version":3,"file":"DataTableRoot.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableRoot.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAcH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAajF,OAAO,KAAK,EAIV,cAAc,EAEf,MAAM,aAAa,CAAC;AAgDrB,MAAM,WAAW,kBAAkB,CACjC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CACvD,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACrF,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,eAAe,EACf,aAAa,EACb,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,WAAmB,EACnB,aAAmB,EACnB,WAAW,EACX,eAAuB,EACvB,gBAAwB,EACxB,aAAqB,EACrB,eAAsB,EACtB,gBAAgB,EAChB,aAAoB,EACpB,gBAAuB,EACvB,eAAe,EACf,cAAwB,EACxB,QAAQ,EACR,cAAc,EACd,sBAA6B,EAC7B,oBAA4B,EAC5B,oBAA4B,EAC5B,kBAAyB,EACzB,WAAmB,EACnB,YAAsB,EACtB,MAAe,EACf,oBAA4B,EAC5B,oBAAoB,EACpB,sBAA0B,EAC1B,kBAA0B,EAC1B,kBAAkB,EAClB,UAAU,EACV,mBAA2B,EAC3B,gBAAoB,EACpB,cAAsB,EACtB,wBAAgC,EAChC,UAAU,EACV,QAAQ,EACR,kBAA0B,EAC1B,cAAc,EAAE,kBAAkB,EAClC,WAAW,EACX,QAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,cAAsB,EACtB,UAAkB,EAClB,aAAqB,EACrB,OAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,aAAa,EAAE,cAAc,EAC7B,SAAS,EACT,IAAI,EACJ,OAAe,EACf,QAAgB,EAChB,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,2CAkpE3B"}

package/types/components/DataTableFilterButton/index.d.ts

@@ -12,5 +12,6 @@
  * applies immediately; outside click / Escape just closes. Chip presses
  * reopen this editor pre-filled via the context filterUi channel.
  */
-export declare function DataTableFilterButton(): import("react/jsx-runtime").JSX.Element | null;
+export declare function DataTableFilterButton(): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableCardFilterButton(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/types/components/DataTableFilterButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTableFilterButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AA+EH,wBAAgB,qBAAqB,mDA6UpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTableFilterButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AA+EH,wBAAgB,qBAAqB,4CAEpC;AAED,wBAAgB,yBAAyB,4CAExC"}

package/types/components/DataTableToolbar/index.d.ts

@@ -24,4 +24,5 @@ export interface DataTableToolbarProps {
     compact?: boolean;
 }
 export declare function DataTableToolbar(props: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableCardToolbar(props: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/types/components/DataTableToolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTableToolbar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,MAAM,WAAW,qBAAqB;IAEpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAG/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAiN5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTableToolbar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,MAAM,WAAW,qBAAqB;IAEpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAG/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAE5D;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,2CAEhE"}

package/types/hooks/useDataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDataTable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataTable.ts"],"names":[],"mappings":"AA0BA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACtC,YAAY,EAAE,CAAC,KACZ,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiID,eAAO,MAAM,iBAAiB;4BA9HkB,MAAM,KAAG,gBAAgB;mCAgIxC,GAAG,eAAe,MAAM;8BAE7B,GAAG,aAAa,GAAG,eAAe,MAAM;6BAzCnB,MAAM,KAAG,gBAAgB;uBA4CrD,gBAAgB;CACpC,CAAC;AAGF,OAAO,KAAK,EACV,aAAa,EAIb,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,UAAU,CAAC;AAwBlB,wBAAgB,YAAY,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,EAAE,EACxE,IAAS,EACT,OAAY,EACZ,YAAY,EACZ,eAAe,EACf,aAAa,EACb,WAAmB,EACnB,aAAmB,EACnB,WAAW,EACX,eAAuB,EACvB,gBAAwB,EACxB,aAAqB,EACrB,eAAsB,EACtB,gBAAgB,EAChB,aAAoB,EACpB,gBAAgB,EAAE,iBAAwB,EAC1C,cAAwB,EACxB,QAAQ,EACR,cAAc,EACd,sBAA6B,EAC7B,oBAAoB,EAAE,qBAA6B,EACnD,oBAA4B,EAC5B,kBAAyB,EACzB,WAAW,EAAE,YAAoB,EACjC,kBAA0B,EAC1B,UAAU,EACV,mBAA2B,EAC3B,cAAsB,EACtB,kBAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC3B,GAAE,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAC9B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC3B,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAwiBjC"}
+{"version":3,"file":"useDataTable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataTable.ts"],"names":[],"mappings":"AA0BA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACtC,YAAY,EAAE,CAAC,KACZ,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiID,eAAO,MAAM,iBAAiB;4BA9HkB,MAAM,KAAG,gBAAgB;mCAgIxC,GAAG,eAAe,MAAM;8BAE7B,GAAG,aAAa,GAAG,eAAe,MAAM;6BAzCnB,MAAM,KAAG,gBAAgB;uBA4CrD,gBAAgB;CACpC,CAAC;AAGF,OAAO,KAAK,EAEV,aAAa,EAIb,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,UAAU,CAAC;AA4ClB,wBAAgB,YAAY,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,EAAE,EACxE,IAAS,EACT,OAAY,EACZ,YAAY,EACZ,eAAe,EACf,aAAa,EACb,WAAmB,EACnB,aAAmB,EACnB,WAAW,EACX,eAAuB,EACvB,gBAAwB,EACxB,aAAqB,EACrB,eAAsB,EACtB,gBAAgB,EAChB,aAAoB,EACpB,gBAAgB,EAAE,iBAAwB,EAC1C,cAAwB,EACxB,QAAQ,EACR,cAAc,EACd,sBAA6B,EAC7B,oBAAoB,EAAE,qBAA6B,EACnD,oBAA4B,EAC5B,kBAAyB,EACzB,WAAW,EAAE,YAAoB,EACjC,kBAA0B,EAC1B,UAAU,EACV,mBAA2B,EAC3B,cAAsB,EACtB,kBAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC3B,GAAE,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAC9B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC3B,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAyiBjC"}