@elmeragroup/fuse 0.1.0-canary.2 → 0.1.0-canary.4

package/components/data-table/actions-column.d.ts

@@ -0,0 +1,50 @@
+import { DisplayColumnHelper } from "./data-table-source.js";
+import { ReactNode } from "react";
+//#region src/components/data-table/actions-column.d.ts
+/** The cell render context the actions column reads. */
+type ActionsCellContext<TData> = {
+  readonly row: {
+    readonly original: TData;
+  };
+};
+/**
+ * The display column `actionsColumn` builds. It reads only the row's data, so it needs no table
+ * feature.
+ */
+export type ActionsColumnDef<TData> = {
+  readonly id: "actions";
+  readonly enableSorting: false;
+  readonly enableHiding: false;
+  readonly header: () => ReactNode;
+  readonly cell: (context: ActionsCellContext<TData>) => ReactNode;
+};
+/** `DisplayColumnHelper` for `actionsColumn`. */
+export type ActionsColumnHelper<TData, TColumn> = DisplayColumnHelper<ActionsColumnDef<TData>, TColumn>;
+/** Options for `actionsColumn`. */
+export type ActionsColumnOptions<TData> = {
+  /**
+   * The row's own name, such as `(product) => product.name`. Fuse builds the trigger's localized
+   * accessible name from it ("Actions for 4K Ultra HD Monitor"), so no two triggers share a name.
+   */
+  getRowName: (row: TData) => string;
+  /**
+   * The menu items for a row: `DropdownMenu.Item`, including `variant="destructive"`, and
+   * `DropdownMenu.Separator`.
+   */
+  items: (row: TData) => ReactNode;
+};
+/**
+ * Build the row-actions column: `DataTable.RowActions` in each cell, right-aligned, with a
+ * per-row accessible name. The header names the column "Actions" for assistive technology without
+ * visible text, the column shrinks to the trigger, and sorting and hiding are disabled. Clicks in
+ * the open menu do not press a pressable row.
+ *
+ * @template TData - The row data type, inferred from the column helper.
+ * @template TColumn - The column definition type the helper returns.
+ * @param columnHelper - A column helper for the table.
+ * @param options - The row's name and its menu items.
+ * @returns A display column with the id `"actions"`.
+ */
+export declare function actionsColumn<TData, TColumn>(columnHelper: ActionsColumnHelper<TData, TColumn>, { getRowName, items }: ActionsColumnOptions<NoInfer<TData>>): TColumn;
+//#endregion
+//# sourceMappingURL=actions-column.d.ts.map

package/components/data-table/actions-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-column.d.ts","names":[],"sources":["../../../src/components/data-table/actions-column.tsx"],"mappings":";;;;KAMK,mBAAmB;WAAoB;aAAgB,UAAU;;;;;;;YAM1D,iBAAiB;WAClB;WACA;WACA;WACA,cAAc;WACd,OAAO,SAAS,mBAAmB,WAAW;;;YAI7C,oBAAoB,OAAO,WAAW,oBAAoB,iBAAiB,QAAQ;;YAGnF,qBAAqB;;;;;EAK/B,aAAa,KAAK;;;;;EAKlB,QAAQ,KAAK,UAAU;;;;;;;;;;;;;;wBAeT,cAAc,OAAO,SACnC,cAAc,oBAAoB,OAAO,YACvC,YAAY,SAAS,qBAAqB,QAAQ,UACnD"}

package/components/data-table/actions-column.js

@@ -0,0 +1,31 @@
+import { RowActionsCell, RowActionsHeader } from "./data-table-row-actions.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-table/actions-column.tsx
+/**
+* Build the row-actions column: `DataTable.RowActions` in each cell, right-aligned, with a
+* per-row accessible name. The header names the column "Actions" for assistive technology without
+* visible text, the column shrinks to the trigger, and sorting and hiding are disabled. Clicks in
+* the open menu do not press a pressable row.
+*
+* @template TData - The row data type, inferred from the column helper.
+* @template TColumn - The column definition type the helper returns.
+* @param columnHelper - A column helper for the table.
+* @param options - The row's name and its menu items.
+* @returns A display column with the id `"actions"`.
+*/
+function actionsColumn(columnHelper, { getRowName, items }) {
+	return columnHelper.display({
+		id: "actions",
+		enableSorting: false,
+		enableHiding: false,
+		header: () => /* @__PURE__ */ jsx(RowActionsHeader, {}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(RowActionsCell, {
+			name: getRowName(row.original),
+			children: items(row.original)
+		})
+	});
+}
+//#endregion
+export { actionsColumn };
+
+//# sourceMappingURL=actions-column.js.map

package/components/data-table/actions-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-column.js","names":[],"sources":["../../../src/components/data-table/actions-column.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { RowActionsCell, RowActionsHeader } from \"./data-table-row-actions\";\nimport type { DisplayColumnHelper } from \"./data-table-source\";\n\n/** The cell render context the actions column reads. */\ntype ActionsCellContext<TData> = { readonly row: { readonly original: TData } };\n\n/**\n * The display column `actionsColumn` builds. It reads only the row's data, so it needs no table\n * feature.\n */\nexport type ActionsColumnDef<TData> = {\n  readonly id: \"actions\";\n  readonly enableSorting: false;\n  readonly enableHiding: false;\n  readonly header: () => ReactNode;\n  readonly cell: (context: ActionsCellContext<TData>) => ReactNode;\n};\n\n/** `DisplayColumnHelper` for `actionsColumn`. */\nexport type ActionsColumnHelper<TData, TColumn> = DisplayColumnHelper<ActionsColumnDef<TData>, TColumn>;\n\n/** Options for `actionsColumn`. */\nexport type ActionsColumnOptions<TData> = {\n  /**\n   * The row's own name, such as `(product) => product.name`. Fuse builds the trigger's localized\n   * accessible name from it (\"Actions for 4K Ultra HD Monitor\"), so no two triggers share a name.\n   */\n  getRowName: (row: TData) => string;\n  /**\n   * The menu items for a row: `DropdownMenu.Item`, including `variant=\"destructive\"`, and\n   * `DropdownMenu.Separator`.\n   */\n  items: (row: TData) => ReactNode;\n};\n\n/**\n * Build the row-actions column: `DataTable.RowActions` in each cell, right-aligned, with a\n * per-row accessible name. The header names the column \"Actions\" for assistive technology without\n * visible text, the column shrinks to the trigger, and sorting and hiding are disabled. Clicks in\n * the open menu do not press a pressable row.\n *\n * @template TData - The row data type, inferred from the column helper.\n * @template TColumn - The column definition type the helper returns.\n * @param columnHelper - A column helper for the table.\n * @param options - The row's name and its menu items.\n * @returns A display column with the id `\"actions\"`.\n */\nexport function actionsColumn<TData, TColumn>(\n  columnHelper: ActionsColumnHelper<TData, TColumn>,\n  { getRowName, items }: ActionsColumnOptions<NoInfer<TData>>\n): TColumn {\n  return columnHelper.display({\n    id: \"actions\",\n    enableSorting: false,\n    enableHiding: false,\n    header: () => <RowActionsHeader />,\n    cell: ({ row }) => <RowActionsCell name={getRowName(row.original)}>{items(row.original)}</RowActionsCell>,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiDA,SAAgB,cACd,cACA,EAAE,YAAY,SACL;CACT,OAAO,aAAa,QAAQ;EAC1B,IAAI;EACJ,eAAe;EACf,cAAc;EACd,cAAc,oBAAC,kBAAD,CAAmB,CAAA;EACjC,OAAO,EAAE,UAAU,oBAAC,gBAAD;GAAgB,MAAM,WAAW,IAAI,QAAQ;GAAI,UAAA,MAAM,IAAI,QAAQ;EAAkB,CAAA;CAC1G,CAAC;AACH"}

package/components/data-table/create-fuse-table-hook.d.ts

@@ -0,0 +1,119 @@
+import { NoComponents } from "./data-table-source.js";
+import { CurrencyCellProps, DateCellProps, DateTimeCellProps, NumberCellProps, RegisteredColumnToggleProps, RegisteredContentProps, RegisteredPaginationProps, RegisteredRowProps, RegisteredSortButtonProps, TextCellProps } from "./data-table-registered.js";
+import { ComponentType, ReactElement } from "react";
+import { AppReactTable, Column, CreateTableHookOptions, CreateTableHookResult, Row, RowData, TableFeatures, TableOptions, TableState } from "@tanstack/react-table";
+//#region src/components/data-table/create-fuse-table-hook.d.ts
+/** A registry of named components, as `createTableHook` accepts them. */
+type ComponentRegistry = Record<string, ComponentType<any>>;
+/**
+ * The app's table registry. A replacement `Row` must accept the props `table.Content` renders its
+ * default rows with, since the registered parts call it with only those.
+ */
+type TableRegistry<TFeatures extends TableFeatures> = ComponentRegistry & {
+  readonly Row?: ComponentType<RegisteredRowProps<Row<TFeatures, any>>>;
+};
+/**
+ * The app's registry wins by key, and a replaced Fuse component's props are gone. An intersection
+ * would overload the two and keep accepting the replaced props.
+ */
+type Merge<TFuse, TApp> = Omit<TFuse, keyof TApp> & TApp;
+/** Includes `TPart` exactly when `TFeatures` registers `TFeature`. */
+type WithFeature<TFeatures, TFeature extends string, TPart> = TFeature extends keyof TFeatures ? TPart : NoComponents;
+/**
+ * The table parts Fuse registers on the table `useFuseTable` returns. One registry serves every
+ * table the hook creates, so each part is generic over the row data and defaults it to `TData`, the
+ * row data of the table it is read from: `table.Content`'s row takeover receives `Row<TFeatures,
+ * TData>`, while `table.Row` takes any row it is given. `Pagination` and `ColumnToggle` appear only
+ * with their feature.
+ */
+export type FuseTableComponents<TFeatures extends TableFeatures, TData extends RowData = RowData> = {
+  /** The whole table, rendered through the registered header and cell wrappers. */
+  Content: <TRowData extends RowData = TData>(props: RegisteredContentProps<Row<TFeatures, TRowData>>) => ReactElement;
+  /** One row. It renders inside `Content`'s row takeover, which keeps it current. */
+  Row: <TRowData extends RowData = TData>(props: RegisteredRowProps<Row<TFeatures, TRowData>>) => ReactElement;
+} & WithFeature<TFeatures, "rowPaginationFeature", {
+  /** Rows-per-page select, page status and page buttons. */
+  Pagination: (props: RegisteredPaginationProps) => ReactElement;
+}> & WithFeature<TFeatures, "columnVisibilityFeature", {
+  /** The column visibility menu. */
+  ColumnToggle: <TRowData extends RowData = TData>(props: RegisteredColumnToggleProps<Column<TFeatures, TRowData, unknown>>) => ReactElement;
+}>;
+/** The header parts Fuse registers. `SortButton` appears only with `rowSortingFeature`. */
+export type FuseHeaderComponents<TFeatures extends TableFeatures> = WithFeature<TFeatures, "rowSortingFeature", {
+  /** The header's sort toggle. */
+  SortButton: (props: RegisteredSortButtonProps) => ReactElement;
+}>;
+/** The default cells Fuse registers. An app replaces one by registering its own under the key. */
+export type FuseCellComponents = {
+  /** The cell value as text. */
+  TextCell: (props: TextCellProps) => ReactElement;
+  /** A number, formatted for the locale. */
+  NumberCell: (props: NumberCellProps) => ReactElement;
+  /** An amount in a required currency, formatted for the locale. */
+  CurrencyCell: (props: CurrencyCellProps) => ReactElement;
+  /** A date, formatted for the locale. */
+  DateCell: (props: DateCellProps) => ReactElement;
+  /** A date and time, formatted for the locale. */
+  DateTimeCell: (props: DateTimeCellProps) => ReactElement;
+};
+/**
+ * Options for `createFuseTableHook`: every `createTableHook` option except the contexts, which
+ * Fuse owns.
+ */
+export type CreateFuseTableHookOptions<TFeatures extends TableFeatures, TTableComponents extends TableRegistry<TFeatures>, TCellComponents extends ComponentRegistry, THeaderComponents extends ComponentRegistry> = CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents> & {
+  /** Fuse owns the table context. */
+  readonly tableContext?: never;
+  /** Fuse owns the cell context. */
+  readonly cellContext?: never;
+  /** Fuse owns the header context. */
+  readonly headerContext?: never;
+};
+/** A table from `useAppTable` or `useTableContext`, with Fuse's parts defaulted to its row data. */
+type FuseAppTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends TableRegistry<TFeatures>, TCellComponents extends ComponentRegistry, THeaderComponents extends ComponentRegistry> = AppReactTable<TFeatures, TData, TSelected, Merge<FuseTableComponents<TFeatures, TData>, TTableComponents>, Merge<FuseCellComponents, TCellComponents>, Merge<FuseHeaderComponents<TFeatures>, THeaderComponents>>;
+/**
+ * What `createFuseTableHook` returns: `createTableHook`'s result over the merged registries.
+ * `useAppTable` and `useTableContext` default Fuse's table parts to the table's row data, which
+ * TanStack's result cannot express: it types the registry once, for every table.
+ */
+export type CreateFuseTableHookResult<TFeatures extends TableFeatures, TTableComponents extends TableRegistry<TFeatures>, TCellComponents extends ComponentRegistry, THeaderComponents extends ComponentRegistry> = Omit<CreateTableHookResult<TFeatures, Merge<FuseTableComponents<TFeatures>, TTableComponents>, Merge<FuseCellComponents, TCellComponents>, Merge<FuseHeaderComponents<TFeatures>, THeaderComponents>>, "useAppTable" | "useTableContext"> & {
+  /** `createTableHook`'s `useAppTable`, with Fuse's table parts defaulted to the table's row data. */
+  useAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">, selector?: (state: TableState<TFeatures>) => TSelected) => FuseAppTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+  /**
+   * `createTableHook`'s `useTableContext`, with Fuse's table parts defaulted to `TData`. Pass the
+   * row data type to type `table.Content`'s row takeover in a component that reads the table from
+   * context.
+   */
+  useTableContext: <TData extends RowData = RowData, TSelected = TableState<TFeatures>>() => FuseAppTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+};
+/**
+ * Bind an app's table features, default options and components into one `useFuseTable` hook, with
+ * Fuse's parts registered: `table.Content`, `table.Row`, `table.Pagination`,
+ * `table.ColumnToggle`, `header.SortButton` and the default cells `TextCell`, `NumberCell`,
+ * `CurrencyCell`, `DateCell` and `DateTimeCell`.
+ *
+ * It wraps TanStack's `createTableHook` and passes `features` and every default option through
+ * untouched; Fuse adds no features of its own. The app's components are registered after Fuse's,
+ * so registering `cellComponents: { NumberCell }` replaces Fuse's `NumberCell`, props included. A
+ * registered part appears in the types only when its feature is in `features`: `Pagination` needs
+ * `rowPaginationFeature`, `ColumnToggle` `columnVisibilityFeature` and `SortButton`
+ * `rowSortingFeature`. Render the registered table parts inside `<table.AppTable>`.
+ *
+ * @example
+ * ```tsx
+ * export const { useAppTable: useFuseTable, createAppColumnHelper } = createFuseTableHook({
+ *   features: tableFeatures({ rowPaginationFeature, rowSortingFeature }),
+ *   enableSortingRemoval: false,
+ *   cellComponents: { OrderIdCell },
+ * });
+ * ```
+ *
+ * @template TFeatures - The app's `tableFeatures({...})` object.
+ * @template TTableComponents - The app's table components.
+ * @template TCellComponents - The app's cell components.
+ * @template THeaderComponents - The app's header components.
+ * @param options - Features, default table options and the app's components.
+ * @returns TanStack's table hook result, typed with Fuse's parts merged under the app's.
+ */
+export declare function createFuseTableHook<TFeatures extends TableFeatures, const TTableComponents extends TableRegistry<TFeatures> = NoComponents, const TCellComponents extends ComponentRegistry = NoComponents, const THeaderComponents extends ComponentRegistry = NoComponents>(options: CreateFuseTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateFuseTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
+//#endregion
+//# sourceMappingURL=create-fuse-table-hook.d.ts.map

package/components/data-table/create-fuse-table-hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-fuse-table-hook.d.ts","names":[],"sources":["../../../src/components/data-table/create-fuse-table-hook.ts"],"mappings":";;;;;;KA8CK,oBAAoB,eAAe;;;;;KAMnC,cAAc,kBAAkB,iBAAiB;WAE3C,MAAM,cAAc,mBAAmB,IAAI;;;;;;KAOjD,MAAM,OAAO,QAAQ,KAAK,aAAa,QAAQ;;KAG/C,YAAY,WAAW,yBAAyB,SAAS,uBAAuB,YACjF,QACA;;;;;;;;YASQ,oBAAoB,kBAAkB,eAAe,cAAc,UAAU;;EAEvF,UAAU,iBAAiB,UAAU,OACnC,OAAO,uBAAuB,IAAI,WAAW,eAC1C;;EAEL,MAAM,iBAAiB,UAAU,OAC/B,OAAO,mBAAmB,IAAI,WAAW,eACtC;IACH,YACF;;EAIE,aAAa,OAAO,8BAA8B;KAGpD,YACE;;EAIE,eAAe,iBAAiB,UAAU,OACxC,OAAO,4BAA4B,OAAO,WAAW,wBAClD;;;YAKC,qBAAqB,kBAAkB,iBAAiB,YAClE;;EAIE,aAAa,OAAO,8BAA8B;;;YAK1C;;EAEV,WAAW,OAAO,kBAAkB;;EAEpC,aAAa,OAAO,oBAAoB;;EAExC,eAAe,OAAO,sBAAsB;;EAE5C,WAAW,OAAO,kBAAkB;;EAEpC,eAAe,OAAO,sBAAsB;;;;;;YAOlC,2BACV,kBAAkB,eAClB,yBAAyB,cAAc,YACvC,wBAAwB,mBACxB,0BAA0B,qBACxB,uBAAuB,WAAW,kBAAkB,iBAAiB;;WAE9D;;WAEA;;WAEA;;;KAIN,aACH,kBAAkB,eAClB,cAAc,SACd,WACA,yBAAyB,cAAc,YACvC,wBAAwB,mBACxB,0BAA0B,qBACxB,cACF,WACA,OACA,WACA,MAAM,oBAAoB,WAAW,QAAQ,mBAC7C,MAAM,oBAAoB,kBAC1B,MAAM,qBAAqB,YAAY;;;;;;YAQ7B,0BACV,kBAAkB,eAClB,yBAAyB,cAAc,YACvC,wBAAwB,mBACxB,0BAA0B,qBACxB,KACF,sBACE,WACA,MAAM,oBAAoB,YAAY,mBACtC,MAAM,oBAAoB,kBAC1B,MAAM,qBAAqB,YAAY;;EAKzC,cAAc,cAAc,SAAS,YAAY,WAAW,YAC1D,cAAc,KAAK,aAAa,WAAW,qBAC3C,YAAY,OAAO,WAAW,eAAe,cAC1C,aAAa,WAAW,OAAO,WAAW,kBAAkB,iBAAiB;;;;;;EAMlF,kBAAkB,cAAc,UAAU,SAAS,YAAY,WAAW,iBAAiB,aACzF,WACA,OACA,WACA,kBACA,iBACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAiEY,oBACd,kBAAkB,qBACZ,yBAAyB,cAAc,aAAa,oBACpD,wBAAwB,oBAAoB,oBAC5C,0BAA0B,oBAAoB,cAEpD,SAAS,2BAA2B,WAAW,kBAAkB,iBAAiB,qBACjF,0BAA0B,WAAW,kBAAkB,iBAAiB"}

package/components/data-table/create-fuse-table-hook.js

@@ -0,0 +1,76 @@
+"use client";
+import { fuseTableContexts } from "./data-table-contexts.js";
+import { CurrencyCell, DateCell, DateTimeCell, NumberCell, RegisteredColumnToggle, RegisteredContent, RegisteredPagination, RegisteredRow, RegisteredSortButton, TextCell } from "./data-table-registered.js";
+import { createTableHook } from "@tanstack/react-table";
+//#region src/components/data-table/create-fuse-table-hook.ts
+/**
+* Erased to the registry constraint: the parts are typed over every stock feature, which TypeScript
+* cannot compare with the app's `TFeatures`, so the factory retypes them with one cast.
+*/
+const FUSE_TABLE_COMPONENTS = {
+	Content: RegisteredContent,
+	Row: RegisteredRow,
+	Pagination: RegisteredPagination,
+	ColumnToggle: RegisteredColumnToggle
+};
+const FUSE_HEADER_COMPONENTS = { SortButton: RegisteredSortButton };
+const FUSE_CELL_COMPONENTS = {
+	TextCell,
+	NumberCell,
+	CurrencyCell,
+	DateCell,
+	DateTimeCell
+};
+/** Fuse's parts first, then the app's, so the app wins by key at runtime, as `Merge` describes. */
+function mergeRegistry(fuse, app) {
+	return {
+		...fuse,
+		...app ?? {}
+	};
+}
+/**
+* Bind an app's table features, default options and components into one `useFuseTable` hook, with
+* Fuse's parts registered: `table.Content`, `table.Row`, `table.Pagination`,
+* `table.ColumnToggle`, `header.SortButton` and the default cells `TextCell`, `NumberCell`,
+* `CurrencyCell`, `DateCell` and `DateTimeCell`.
+*
+* It wraps TanStack's `createTableHook` and passes `features` and every default option through
+* untouched; Fuse adds no features of its own. The app's components are registered after Fuse's,
+* so registering `cellComponents: { NumberCell }` replaces Fuse's `NumberCell`, props included. A
+* registered part appears in the types only when its feature is in `features`: `Pagination` needs
+* `rowPaginationFeature`, `ColumnToggle` `columnVisibilityFeature` and `SortButton`
+* `rowSortingFeature`. Render the registered table parts inside `<table.AppTable>`.
+*
+* @example
+* ```tsx
+* export const { useAppTable: useFuseTable, createAppColumnHelper } = createFuseTableHook({
+*   features: tableFeatures({ rowPaginationFeature, rowSortingFeature }),
+*   enableSortingRemoval: false,
+*   cellComponents: { OrderIdCell },
+* });
+* ```
+*
+* @template TFeatures - The app's `tableFeatures({...})` object.
+* @template TTableComponents - The app's table components.
+* @template TCellComponents - The app's cell components.
+* @template THeaderComponents - The app's header components.
+* @param options - Features, default table options and the app's components.
+* @returns TanStack's table hook result, typed with Fuse's parts merged under the app's.
+*/
+function createFuseTableHook(options) {
+	const fuseTableComponents = FUSE_TABLE_COMPONENTS;
+	const fuseHeaderComponents = FUSE_HEADER_COMPONENTS;
+	return createTableHook({
+		...options,
+		tableContext: fuseTableContexts.tableContext,
+		cellContext: fuseTableContexts.cellContext,
+		headerContext: fuseTableContexts.headerContext,
+		tableComponents: mergeRegistry(fuseTableComponents, options.tableComponents),
+		cellComponents: mergeRegistry(FUSE_CELL_COMPONENTS, options.cellComponents),
+		headerComponents: mergeRegistry(fuseHeaderComponents, options.headerComponents)
+	});
+}
+//#endregion
+export { createFuseTableHook };
+
+//# sourceMappingURL=create-fuse-table-hook.js.map

package/components/data-table/create-fuse-table-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-fuse-table-hook.js","names":[],"sources":["../../../src/components/data-table/create-fuse-table-hook.ts"],"sourcesContent":["\"use client\";\n\nimport type { ComponentType, ReactElement } from \"react\";\n\nimport { createTableHook } from \"@tanstack/react-table\";\nimport type {\n  AppReactTable,\n  Column,\n  CreateTableHookOptions,\n  CreateTableHookResult,\n  Row,\n  RowData,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from \"@tanstack/react-table\";\n\nimport { fuseTableContexts } from \"./data-table-contexts\";\nimport {\n  CurrencyCell,\n  DateCell,\n  DateTimeCell,\n  NumberCell,\n  RegisteredColumnToggle,\n  RegisteredContent,\n  RegisteredPagination,\n  RegisteredRow,\n  RegisteredSortButton,\n  TextCell,\n} from \"./data-table-registered\";\nimport type {\n  CurrencyCellProps,\n  DateCellProps,\n  DateTimeCellProps,\n  NumberCellProps,\n  RegisteredColumnToggleProps,\n  RegisteredContentProps,\n  RegisteredPaginationProps,\n  RegisteredRowProps,\n  RegisteredSortButtonProps,\n  TextCellProps,\n} from \"./data-table-registered\";\nimport type { NoComponents } from \"./data-table-source\";\n\n/** A registry of named components, as `createTableHook` accepts them. */\n// oxlint-disable-next-line typescript/no-explicit-any -- SAFETY: createTableHook's own registry constraint; a component's props are contravariant, so only `any` admits every component\ntype ComponentRegistry = Record<string, ComponentType<any>>;\n\n/**\n * The app's table registry. A replacement `Row` must accept the props `table.Content` renders its\n * default rows with, since the registered parts call it with only those.\n */\ntype TableRegistry<TFeatures extends TableFeatures> = ComponentRegistry & {\n  // oxlint-disable-next-line typescript/no-explicit-any -- SAFETY: the app's row data type is bound per column helper, not per hook, so the constraint admits a Row typed over any of them\n  readonly Row?: ComponentType<RegisteredRowProps<Row<TFeatures, any>>>;\n};\n\n/**\n * The app's registry wins by key, and a replaced Fuse component's props are gone. An intersection\n * would overload the two and keep accepting the replaced props.\n */\ntype Merge<TFuse, TApp> = Omit<TFuse, keyof TApp> & TApp;\n\n/** Includes `TPart` exactly when `TFeatures` registers `TFeature`. */\ntype WithFeature<TFeatures, TFeature extends string, TPart> = TFeature extends keyof TFeatures\n  ? TPart\n  : NoComponents;\n\n/**\n * The table parts Fuse registers on the table `useFuseTable` returns. One registry serves every\n * table the hook creates, so each part is generic over the row data and defaults it to `TData`, the\n * row data of the table it is read from: `table.Content`'s row takeover receives `Row<TFeatures,\n * TData>`, while `table.Row` takes any row it is given. `Pagination` and `ColumnToggle` appear only\n * with their feature.\n */\nexport type FuseTableComponents<TFeatures extends TableFeatures, TData extends RowData = RowData> = {\n  /** The whole table, rendered through the registered header and cell wrappers. */\n  Content: <TRowData extends RowData = TData>(\n    props: RegisteredContentProps<Row<TFeatures, TRowData>>\n  ) => ReactElement;\n  /** One row. It renders inside `Content`'s row takeover, which keeps it current. */\n  Row: <TRowData extends RowData = TData>(\n    props: RegisteredRowProps<Row<TFeatures, TRowData>>\n  ) => ReactElement;\n} & WithFeature<\n  TFeatures,\n  \"rowPaginationFeature\",\n  {\n    /** Rows-per-page select, page status and page buttons. */\n    Pagination: (props: RegisteredPaginationProps) => ReactElement;\n  }\n> &\n  WithFeature<\n    TFeatures,\n    \"columnVisibilityFeature\",\n    {\n      /** The column visibility menu. */\n      ColumnToggle: <TRowData extends RowData = TData>(\n        props: RegisteredColumnToggleProps<Column<TFeatures, TRowData, unknown>>\n      ) => ReactElement;\n    }\n  >;\n\n/** The header parts Fuse registers. `SortButton` appears only with `rowSortingFeature`. */\nexport type FuseHeaderComponents<TFeatures extends TableFeatures> = WithFeature<\n  TFeatures,\n  \"rowSortingFeature\",\n  {\n    /** The header's sort toggle. */\n    SortButton: (props: RegisteredSortButtonProps) => ReactElement;\n  }\n>;\n\n/** The default cells Fuse registers. An app replaces one by registering its own under the key. */\nexport type FuseCellComponents = {\n  /** The cell value as text. */\n  TextCell: (props: TextCellProps) => ReactElement;\n  /** A number, formatted for the locale. */\n  NumberCell: (props: NumberCellProps) => ReactElement;\n  /** An amount in a required currency, formatted for the locale. */\n  CurrencyCell: (props: CurrencyCellProps) => ReactElement;\n  /** A date, formatted for the locale. */\n  DateCell: (props: DateCellProps) => ReactElement;\n  /** A date and time, formatted for the locale. */\n  DateTimeCell: (props: DateTimeCellProps) => ReactElement;\n};\n\n/**\n * Options for `createFuseTableHook`: every `createTableHook` option except the contexts, which\n * Fuse owns.\n */\nexport type CreateFuseTableHookOptions<\n  TFeatures extends TableFeatures,\n  TTableComponents extends TableRegistry<TFeatures>,\n  TCellComponents extends ComponentRegistry,\n  THeaderComponents extends ComponentRegistry,\n> = CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents> & {\n  /** Fuse owns the table context. */\n  readonly tableContext?: never;\n  /** Fuse owns the cell context. */\n  readonly cellContext?: never;\n  /** Fuse owns the header context. */\n  readonly headerContext?: never;\n};\n\n/** A table from `useAppTable` or `useTableContext`, with Fuse's parts defaulted to its row data. */\ntype FuseAppTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TTableComponents extends TableRegistry<TFeatures>,\n  TCellComponents extends ComponentRegistry,\n  THeaderComponents extends ComponentRegistry,\n> = AppReactTable<\n  TFeatures,\n  TData,\n  TSelected,\n  Merge<FuseTableComponents<TFeatures, TData>, TTableComponents>,\n  Merge<FuseCellComponents, TCellComponents>,\n  Merge<FuseHeaderComponents<TFeatures>, THeaderComponents>\n>;\n\n/**\n * What `createFuseTableHook` returns: `createTableHook`'s result over the merged registries.\n * `useAppTable` and `useTableContext` default Fuse's table parts to the table's row data, which\n * TanStack's result cannot express: it types the registry once, for every table.\n */\nexport type CreateFuseTableHookResult<\n  TFeatures extends TableFeatures,\n  TTableComponents extends TableRegistry<TFeatures>,\n  TCellComponents extends ComponentRegistry,\n  THeaderComponents extends ComponentRegistry,\n> = Omit<\n  CreateTableHookResult<\n    TFeatures,\n    Merge<FuseTableComponents<TFeatures>, TTableComponents>,\n    Merge<FuseCellComponents, TCellComponents>,\n    Merge<FuseHeaderComponents<TFeatures>, THeaderComponents>\n  >,\n  \"useAppTable\" | \"useTableContext\"\n> & {\n  /** `createTableHook`'s `useAppTable`, with Fuse's table parts defaulted to the table's row data. */\n  useAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(\n    tableOptions: Omit<TableOptions<TFeatures, TData>, \"features\">,\n    selector?: (state: TableState<TFeatures>) => TSelected\n  ) => FuseAppTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;\n  /**\n   * `createTableHook`'s `useTableContext`, with Fuse's table parts defaulted to `TData`. Pass the\n   * row data type to type `table.Content`'s row takeover in a component that reads the table from\n   * context.\n   */\n  useTableContext: <TData extends RowData = RowData, TSelected = TableState<TFeatures>>() => FuseAppTable<\n    TFeatures,\n    TData,\n    TSelected,\n    TTableComponents,\n    TCellComponents,\n    THeaderComponents\n  >;\n};\n\n/**\n * Erased to the registry constraint: the parts are typed over every stock feature, which TypeScript\n * cannot compare with the app's `TFeatures`, so the factory retypes them with one cast.\n */\n// oxlint-disable-next-line anti-slop/no-known-value-widening -- deliberate erasure; see above\nconst FUSE_TABLE_COMPONENTS: ComponentRegistry = {\n  Content: RegisteredContent,\n  Row: RegisteredRow,\n  Pagination: RegisteredPagination,\n  ColumnToggle: RegisteredColumnToggle,\n};\n\nconst FUSE_HEADER_COMPONENTS = { SortButton: RegisteredSortButton };\n\nconst FUSE_CELL_COMPONENTS: FuseCellComponents = {\n  TextCell,\n  NumberCell,\n  CurrencyCell,\n  DateCell,\n  DateTimeCell,\n};\n\n/** Fuse's parts first, then the app's, so the app wins by key at runtime, as `Merge` describes. */\nfunction mergeRegistry<TFuse extends ComponentRegistry, TApp extends ComponentRegistry>(\n  fuse: TFuse,\n  app: TApp | undefined\n): Merge<TFuse, TApp> {\n  // SAFETY: an omitted registry option leaves `TApp` at its `NoComponents` default, which the\n  // empty registry is. Only explicit type arguments without the option break this.\n  return { ...fuse, ...(app ?? ({} as TApp)) };\n}\n\n/**\n * Bind an app's table features, default options and components into one `useFuseTable` hook, with\n * Fuse's parts registered: `table.Content`, `table.Row`, `table.Pagination`,\n * `table.ColumnToggle`, `header.SortButton` and the default cells `TextCell`, `NumberCell`,\n * `CurrencyCell`, `DateCell` and `DateTimeCell`.\n *\n * It wraps TanStack's `createTableHook` and passes `features` and every default option through\n * untouched; Fuse adds no features of its own. The app's components are registered after Fuse's,\n * so registering `cellComponents: { NumberCell }` replaces Fuse's `NumberCell`, props included. A\n * registered part appears in the types only when its feature is in `features`: `Pagination` needs\n * `rowPaginationFeature`, `ColumnToggle` `columnVisibilityFeature` and `SortButton`\n * `rowSortingFeature`. Render the registered table parts inside `<table.AppTable>`.\n *\n * @example\n * ```tsx\n * export const { useAppTable: useFuseTable, createAppColumnHelper } = createFuseTableHook({\n *   features: tableFeatures({ rowPaginationFeature, rowSortingFeature }),\n *   enableSortingRemoval: false,\n *   cellComponents: { OrderIdCell },\n * });\n * ```\n *\n * @template TFeatures - The app's `tableFeatures({...})` object.\n * @template TTableComponents - The app's table components.\n * @template TCellComponents - The app's cell components.\n * @template THeaderComponents - The app's header components.\n * @param options - Features, default table options and the app's components.\n * @returns TanStack's table hook result, typed with Fuse's parts merged under the app's.\n */\nexport function createFuseTableHook<\n  TFeatures extends TableFeatures,\n  const TTableComponents extends TableRegistry<TFeatures> = NoComponents,\n  const TCellComponents extends ComponentRegistry = NoComponents,\n  const THeaderComponents extends ComponentRegistry = NoComponents,\n>(\n  options: CreateFuseTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>\n): CreateFuseTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents> {\n  // SAFETY: Fuse's parts read the context table typed over every stock feature, and a registered\n  // part reads a feature's members only when its public type is present. The public type lists\n  // Pagination and ColumnToggle only with their feature and types rows and columns over the app's\n  // `TFeatures`, which TanStack's feature-mapped `Row` and `Column` keep TypeScript from relating\n  // to the stock features.\n  const fuseTableComponents = FUSE_TABLE_COMPONENTS as FuseTableComponents<TFeatures>;\n  // The header part's props name no feature, so it satisfies either branch of `WithFeature`.\n  const fuseHeaderComponents: FuseHeaderComponents<TFeatures> = FUSE_HEADER_COMPONENTS;\n  return createTableHook({\n    ...options,\n    tableContext: fuseTableContexts.tableContext,\n    cellContext: fuseTableContexts.cellContext,\n    headerContext: fuseTableContexts.headerContext,\n    tableComponents: mergeRegistry(fuseTableComponents, options.tableComponents),\n    cellComponents: mergeRegistry(FUSE_CELL_COMPONENTS, options.cellComponents),\n    headerComponents: mergeRegistry(fuseHeaderComponents, options.headerComponents),\n  });\n}\n"],"mappings":";;;;;;;;;AA8MA,MAAM,wBAA2C;CAC/C,SAAS;CACT,KAAK;CACL,YAAY;CACZ,cAAc;AAChB;AAEA,MAAM,yBAAyB,EAAE,YAAY,qBAAqB;AAElE,MAAM,uBAA2C;CAC/C;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAS,cACP,MACA,KACoB;CAGpB,OAAO;EAAE,GAAG;EAAM,GAAI,OAAQ,CAAC;CAAY;AAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,oBAMd,SAC4F;CAM5F,MAAM,sBAAsB;CAE5B,MAAM,uBAAwD;CAC9D,OAAO,gBAAgB;EACrB,GAAG;EACH,cAAc,kBAAkB;EAChC,aAAa,kBAAkB;EAC/B,eAAe,kBAAkB;EACjC,iBAAiB,cAAc,qBAAqB,QAAQ,eAAe;EAC3E,gBAAgB,cAAc,sBAAsB,QAAQ,cAAc;EAC1E,kBAAkB,cAAc,sBAAsB,QAAQ,gBAAgB;CAChF,CAAC;AACH"}

package/components/data-table/data-table-cells.d.ts

@@ -0,0 +1,64 @@
+import { DateFormatOptions, DateTimeFormatOptions, NumberFormatOptions } from "./data-table-format.js";
+import { ReactElement } from "react";
+//#region src/components/data-table/data-table-cells.d.ts
+type CellClassName = {
+  /** Extra classes, merged last through `cn`. */
+  className?: string;
+};
+/** Props for `DataTable.Text`. */
+export type DataTableTextProps = CellClassName & {
+  /** The text to render. */
+  value: string;
+};
+/** Props for `DataTable.Number`. */
+export type DataTableNumberProps = CellClassName & NumberFormatOptions & {
+  /** The number to format for the active locale. */
+  value: number;
+};
+/** Props for `DataTable.Currency`. */
+export type DataTableCurrencyProps = CellClassName & NumberFormatOptions & {
+  /** The amount to format for the active locale. */
+  value: number;
+  /** The ISO 4217 currency code, such as `"NOK"`. Required: there is no sensible default. */
+  currency: string;
+};
+/** Props for `DataTable.Date`. */
+export type DataTableDateProps = CellClassName & DateFormatOptions & {
+  /** The date to format for the active locale. */
+  value: Date;
+};
+/** Props for `DataTable.DateTime`. */
+export type DataTableDateTimeProps = CellClassName & DateTimeFormatOptions & {
+  /** The date and time to format for the active locale. */
+  value: Date;
+};
+/** A text cell. */
+export declare function DataTableText({ value, className }: DataTableTextProps): ReactElement;
+export declare namespace DataTableText {
+  var displayName: string;
+}
+/** A number cell, formatted for the active locale with tabular figures. */
+export declare function DataTableNumber({ value, className, ...options }: DataTableNumberProps): ReactElement;
+export declare namespace DataTableNumber {
+  var displayName: string;
+}
+/** An amount in a currency, formatted for the active locale with tabular figures. */
+export declare function DataTableCurrency({ value, currency, className, ...options }: DataTableCurrencyProps): ReactElement;
+export declare namespace DataTableCurrency {
+  var displayName: string;
+}
+/** A date, formatted for the active locale. `dateStyle` defaults to `"medium"`. */
+export declare function DataTableDate({ value, className, dateStyle, ...options }: DataTableDateProps): ReactElement;
+export declare namespace DataTableDate {
+  var displayName: string;
+}
+/**
+ * A date and time, formatted for the active locale. `dateStyle` defaults to `"medium"` and
+ * `timeStyle` to `"short"`.
+ */
+export declare function DataTableDateTime({ value, className, dateStyle, timeStyle, ...options }: DataTableDateTimeProps): ReactElement;
+export declare namespace DataTableDateTime {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=data-table-cells.d.ts.map

package/components/data-table/data-table-cells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cells.d.ts","names":[],"sources":["../../../src/components/data-table/data-table-cells.tsx"],"mappings":";;;KAYK;;EAEH;;;YAIU,qBAAqB;;EAE/B;;;YAIU,uBAAuB,gBACjC;;EAEE;;;YAIQ,yBAAyB,gBACnC;;EAEE;;EAEA;;;YAIQ,qBAAqB,gBAC/B;;EAEE,OAAO;;;YAIC,yBAAyB,gBACnC;;EAEE,OAAO;;;wBAIK,gBAAgB,OAAO,aAAa,qBAAqB;yBAAzD;MAAA;;;wBASA,kBAAkB,OAAO,cAAc,WAAW,uBAAuB;yBAAzE;MAAA;;;wBAUA,oBACd,OACA,UACA,cACG,WACF,yBAAyB;yBALZ;MAAA;;;wBAeA,gBACd,OACA,WACA,cACG,WACF,qBAAqB;yBALR;MAAA;;;;;;wBAkBA,oBACd,OACA,WACA,WACA,cACG,WACF,yBAAyB;yBANZ;MAAA"}

package/components/data-table/data-table-cells.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../../styles/cn.js";
+import { useLocale } from "../../intl/locale-context.js";
+import { dataTableVariants } from "./data-table-variants.js";
+import { formatCurrencyCell, formatDateCell, formatNumberCell } from "./data-table-format.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-table/data-table-cells.tsx
+const { cellNumber } = dataTableVariants();
+/** A text cell. */
+function DataTableText({ value, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-text",
+		className,
+		children: value
+	});
+}
+/** A number cell, formatted for the active locale with tabular figures. */
+function DataTableNumber({ value, className, ...options }) {
+	const { locale } = useLocale();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-number",
+		className: cn(cellNumber(), className),
+		children: formatNumberCell(locale, value, options)
+	});
+}
+/** An amount in a currency, formatted for the active locale with tabular figures. */
+function DataTableCurrency({ value, currency, className, ...options }) {
+	const { locale } = useLocale();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-currency",
+		className: cn(cellNumber(), className),
+		children: formatCurrencyCell(locale, value, currency, options)
+	});
+}
+/** A date, formatted for the active locale. `dateStyle` defaults to `"medium"`. */
+function DataTableDate({ value, className, dateStyle = "medium", ...options }) {
+	const { locale } = useLocale();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-date",
+		className,
+		children: formatDateCell(locale, value, {
+			dateStyle,
+			...options
+		})
+	});
+}
+/**
+* A date and time, formatted for the active locale. `dateStyle` defaults to `"medium"` and
+* `timeStyle` to `"short"`.
+*/
+function DataTableDateTime({ value, className, dateStyle = "medium", timeStyle = "short", ...options }) {
+	const { locale } = useLocale();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-date-time",
+		className,
+		children: formatDateCell(locale, value, {
+			dateStyle,
+			timeStyle,
+			...options
+		})
+	});
+}
+DataTableText.displayName = "DataTable.Text";
+DataTableNumber.displayName = "DataTable.Number";
+DataTableCurrency.displayName = "DataTable.Currency";
+DataTableDate.displayName = "DataTable.Date";
+DataTableDateTime.displayName = "DataTable.DateTime";
+//#endregion
+export { DataTableCurrency, DataTableDate, DataTableDateTime, DataTableNumber, DataTableText };
+
+//# sourceMappingURL=data-table-cells.js.map

package/components/data-table/data-table-cells.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cells.js","names":[],"sources":["../../../src/components/data-table/data-table-cells.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactElement } from \"react\";\n\nimport { useLocale } from \"../../intl/locale-context\";\nimport { cn } from \"../../styles/cn\";\nimport { formatCurrencyCell, formatDateCell, formatNumberCell } from \"./data-table-format\";\nimport type { DateFormatOptions, DateTimeFormatOptions, NumberFormatOptions } from \"./data-table-format\";\nimport { dataTableVariants } from \"./data-table-variants\";\n\nconst { cellNumber } = dataTableVariants();\n\ntype CellClassName = {\n  /** Extra classes, merged last through `cn`. */\n  className?: string;\n};\n\n/** Props for `DataTable.Text`. */\nexport type DataTableTextProps = CellClassName & {\n  /** The text to render. */\n  value: string;\n};\n\n/** Props for `DataTable.Number`. */\nexport type DataTableNumberProps = CellClassName &\n  NumberFormatOptions & {\n    /** The number to format for the active locale. */\n    value: number;\n  };\n\n/** Props for `DataTable.Currency`. */\nexport type DataTableCurrencyProps = CellClassName &\n  NumberFormatOptions & {\n    /** The amount to format for the active locale. */\n    value: number;\n    /** The ISO 4217 currency code, such as `\"NOK\"`. Required: there is no sensible default. */\n    currency: string;\n  };\n\n/** Props for `DataTable.Date`. */\nexport type DataTableDateProps = CellClassName &\n  DateFormatOptions & {\n    /** The date to format for the active locale. */\n    value: Date;\n  };\n\n/** Props for `DataTable.DateTime`. */\nexport type DataTableDateTimeProps = CellClassName &\n  DateTimeFormatOptions & {\n    /** The date and time to format for the active locale. */\n    value: Date;\n  };\n\n/** A text cell. */\nexport function DataTableText({ value, className }: DataTableTextProps): ReactElement {\n  return (\n    <span data-slot=\"data-table-text\" className={className}>\n      {value}\n    </span>\n  );\n}\n\n/** A number cell, formatted for the active locale with tabular figures. */\nexport function DataTableNumber({ value, className, ...options }: DataTableNumberProps): ReactElement {\n  const { locale } = useLocale();\n  return (\n    <span data-slot=\"data-table-number\" className={cn(cellNumber(), className)}>\n      {formatNumberCell(locale, value, options)}\n    </span>\n  );\n}\n\n/** An amount in a currency, formatted for the active locale with tabular figures. */\nexport function DataTableCurrency({\n  value,\n  currency,\n  className,\n  ...options\n}: DataTableCurrencyProps): ReactElement {\n  const { locale } = useLocale();\n  return (\n    <span data-slot=\"data-table-currency\" className={cn(cellNumber(), className)}>\n      {formatCurrencyCell(locale, value, currency, options)}\n    </span>\n  );\n}\n\n/** A date, formatted for the active locale. `dateStyle` defaults to `\"medium\"`. */\nexport function DataTableDate({\n  value,\n  className,\n  dateStyle = \"medium\",\n  ...options\n}: DataTableDateProps): ReactElement {\n  const { locale } = useLocale();\n  return (\n    <span data-slot=\"data-table-date\" className={className}>\n      {formatDateCell(locale, value, { dateStyle, ...options })}\n    </span>\n  );\n}\n\n/**\n * A date and time, formatted for the active locale. `dateStyle` defaults to `\"medium\"` and\n * `timeStyle` to `\"short\"`.\n */\nexport function DataTableDateTime({\n  value,\n  className,\n  dateStyle = \"medium\",\n  timeStyle = \"short\",\n  ...options\n}: DataTableDateTimeProps): ReactElement {\n  const { locale } = useLocale();\n  return (\n    <span data-slot=\"data-table-date-time\" className={className}>\n      {formatDateCell(locale, value, { dateStyle, timeStyle, ...options })}\n    </span>\n  );\n}\n\nDataTableText.displayName = \"DataTable.Text\";\nDataTableNumber.displayName = \"DataTable.Number\";\nDataTableCurrency.displayName = \"DataTable.Currency\";\nDataTableDate.displayName = \"DataTable.Date\";\nDataTableDateTime.displayName = \"DataTable.DateTime\";\n"],"mappings":";;;;;;;AAUA,MAAM,EAAE,eAAe,kBAAkB;;AA4CzC,SAAgB,cAAc,EAAE,OAAO,aAA+C;CACpF,OACE,oBAAC,QAAD;EAAM,aAAU;EAA6B;EAC1C,UAAA;CACG,CAAA;AAEV;;AAGA,SAAgB,gBAAgB,EAAE,OAAO,WAAW,GAAG,WAA+C;CACpG,MAAM,EAAE,WAAW,UAAU;CAC7B,OACE,oBAAC,QAAD;EAAM,aAAU;EAAoB,WAAW,GAAG,WAAW,GAAG,SAAS;EACtE,UAAA,iBAAiB,QAAQ,OAAO,OAAO;CACpC,CAAA;AAEV;;AAGA,SAAgB,kBAAkB,EAChC,OACA,UACA,WACA,GAAG,WACoC;CACvC,MAAM,EAAE,WAAW,UAAU;CAC7B,OACE,oBAAC,QAAD;EAAM,aAAU;EAAsB,WAAW,GAAG,WAAW,GAAG,SAAS;EACxE,UAAA,mBAAmB,QAAQ,OAAO,UAAU,OAAO;CAChD,CAAA;AAEV;;AAGA,SAAgB,cAAc,EAC5B,OACA,WACA,YAAY,UACZ,GAAG,WACgC;CACnC,MAAM,EAAE,WAAW,UAAU;CAC7B,OACE,oBAAC,QAAD;EAAM,aAAU;EAA6B;EAC1C,UAAA,eAAe,QAAQ,OAAO;GAAE;GAAW,GAAG;EAAQ,CAAC;CACpD,CAAA;AAEV;;;;;AAMA,SAAgB,kBAAkB,EAChC,OACA,WACA,YAAY,UACZ,YAAY,SACZ,GAAG,WACoC;CACvC,MAAM,EAAE,WAAW,UAAU;CAC7B,OACE,oBAAC,QAAD;EAAM,aAAU;EAAkC;EAC/C,UAAA,eAAe,QAAQ,OAAO;GAAE;GAAW;GAAW,GAAG;EAAQ,CAAC;CAC/D,CAAA;AAEV;AAEA,cAAc,cAAc;AAC5B,gBAAgB,cAAc;AAC9B,kBAAkB,cAAc;AAChC,cAAc,cAAc;AAC5B,kBAAkB,cAAc"}

package/components/data-table/data-table-column-toggle.d.ts

@@ -0,0 +1,28 @@
+import { ButtonProps } from "../button/button.js";
+import { ColumnToggleSource, VisibilityColumnSource } from "./data-table-source.js";
+import { DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+//#region src/components/data-table/data-table-column-toggle.d.ts
+/** Props for `DataTable.ColumnToggle`. */
+export type DataTableColumnToggleProps<TColumn extends VisibilityColumnSource> = Omit<ComponentProps<typeof DropdownMenuTrigger>, "children" | "render"> & {
+  /** The trigger button's look. Defaults to `"outline"`. */
+  variant?: ButtonProps["variant"];
+  /** The table, from `useTable` with `columnVisibilityFeature`. */
+  table: ColumnToggleSource<TColumn>;
+  /**
+   * A column's menu label. Defaults to the column id. Fuse reads no `columnDef.meta` field, since
+   * augmenting TanStack's global `ColumnMeta` would clash with an app's own declaration.
+   */
+  getLabel?: (column: TColumn) => ReactNode;
+  /** The trigger's visible text. Defaults to the locale dictionary. */
+  label?: string;
+};
+/**
+ * A menu of checkbox items that shows and hides every column whose `getCanHide()` is true.
+ */
+export declare function DataTableColumnToggle<TColumn extends VisibilityColumnSource>({ table, getLabel, label, variant, ...props }: DataTableColumnToggleProps<TColumn>): ReactElement;
+export declare namespace DataTableColumnToggle {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=data-table-column-toggle.d.ts.map

package/components/data-table/data-table-column-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-toggle.d.ts","names":[],"sources":["../../../src/components/data-table/data-table-column-toggle.tsx"],"mappings":";;;;;;YAkBY,2BAA2B,gBAAgB,0BAA0B,KAC/E,sBAAsB;;EAItB,UAAU;;EAEV,OAAO,mBAAmB;;;;;EAK1B,YAAY,QAAQ,YAAY;;EAEhC;;;;;wBAMc,sBAAsB,gBAAgB,0BACpD,OACA,UACA,OACA,YACG,SACF,2BAA2B,WAAW;yBANzB;MAAA"}

package/components/data-table/data-table-column-toggle.js

@@ -0,0 +1,40 @@
+"use client";
+import { useLocalizedStrings } from "../../hooks/use-localized-strings.js";
+import { Button } from "../button/button.js";
+import { DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuRoot, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { dataTableStrings } from "./intl/index.js";
+import { SlidersHorizontal } from "../../icons/generated/sliders-horizontal.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-table/data-table-column-toggle.tsx
+/**
+* A menu of checkbox items that shows and hides every column whose `getCanHide()` is true.
+*/
+function DataTableColumnToggle({ table, getLabel, label, variant = "outline", ...props }) {
+	const strings = useLocalizedStrings(dataTableStrings);
+	return /* @__PURE__ */ jsxs(DropdownMenuRoot, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		"data-slot": "data-table-column-toggle",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size: "sm"
+		}),
+		...props,
+		children: [/* @__PURE__ */ jsx(SlidersHorizontal, {
+			"aria-hidden": "true",
+			"data-icon": "inline-start"
+		}), label ?? strings.format("columns")]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		children: table.getAllLeafColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+			checked: column.getIsVisible(),
+			onCheckedChange: (checked) => {
+				column.toggleVisibility(checked);
+			},
+			children: getLabel?.(column) ?? column.id
+		}, column.id))
+	})] });
+}
+DataTableColumnToggle.displayName = "DataTable.ColumnToggle";
+//#endregion
+export { DataTableColumnToggle };
+
+//# sourceMappingURL=data-table-column-toggle.js.map

package/components/data-table/data-table-column-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-toggle.js","names":[],"sources":["../../../src/components/data-table/data-table-column-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\n\nimport { useLocalizedStrings } from \"../../hooks/use-localized-strings\";\nimport { SlidersHorizontal } from \"../../icons/generated/sliders-horizontal\";\nimport { Button } from \"../button/button\";\nimport type { ButtonProps } from \"../button/button\";\nimport {\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\";\nimport type { ColumnToggleSource, VisibilityColumnSource } from \"./data-table-source\";\nimport { dataTableStrings } from \"./intl\";\n\n/** Props for `DataTable.ColumnToggle`. */\nexport type DataTableColumnToggleProps<TColumn extends VisibilityColumnSource> = Omit<\n  ComponentProps<typeof DropdownMenuTrigger>,\n  \"children\" | \"render\"\n> & {\n  /** The trigger button's look. Defaults to `\"outline\"`. */\n  variant?: ButtonProps[\"variant\"];\n  /** The table, from `useTable` with `columnVisibilityFeature`. */\n  table: ColumnToggleSource<TColumn>;\n  /**\n   * A column's menu label. Defaults to the column id. Fuse reads no `columnDef.meta` field, since\n   * augmenting TanStack's global `ColumnMeta` would clash with an app's own declaration.\n   */\n  getLabel?: (column: TColumn) => ReactNode;\n  /** The trigger's visible text. Defaults to the locale dictionary. */\n  label?: string;\n};\n\n/**\n * A menu of checkbox items that shows and hides every column whose `getCanHide()` is true.\n */\nexport function DataTableColumnToggle<TColumn extends VisibilityColumnSource>({\n  table,\n  getLabel,\n  label,\n  variant = \"outline\",\n  ...props\n}: DataTableColumnToggleProps<TColumn>): ReactElement {\n  const strings = useLocalizedStrings(dataTableStrings);\n  return (\n    <DropdownMenuRoot>\n      <DropdownMenuTrigger\n        data-slot=\"data-table-column-toggle\"\n        render={<Button variant={variant} size=\"sm\" />}\n        {...props}>\n        <SlidersHorizontal aria-hidden=\"true\" data-icon=\"inline-start\" />\n        {label ?? strings.format(\"columns\")}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {table\n          .getAllLeafColumns()\n          .filter((column) => column.getCanHide())\n          .map((column) => (\n            <DropdownMenuCheckboxItem\n              key={column.id}\n              checked={column.getIsVisible()}\n              onCheckedChange={(checked) => {\n                column.toggleVisibility(checked);\n              }}>\n              {getLabel?.(column) ?? column.id}\n            </DropdownMenuCheckboxItem>\n          ))}\n      </DropdownMenuContent>\n    </DropdownMenuRoot>\n  );\n}\n\nDataTableColumnToggle.displayName = \"DataTable.ColumnToggle\";\n"],"mappings":";;;;;;;;;;;AAsCA,SAAgB,sBAA8D,EAC5E,OACA,UACA,OACA,UAAU,WACV,GAAG,SACiD;CACpD,MAAM,UAAU,oBAAoB,gBAAgB;CACpD,OACE,qBAAC,kBAAD,EAAA,UAAA,CACE,qBAAC,qBAAD;EACE,aAAU;EACV,QAAQ,oBAAC,QAAD;GAAiB;GAAS,MAAK;EAAM,CAAA;EAC7C,GAAI;EAHN,UAAA,CAIE,oBAAC,mBAAD;GAAmB,eAAY;GAAO,aAAU;EAAgB,CAAA,GAC/D,SAAS,QAAQ,OAAO,SAAS,CACf;CACrB,CAAA,GAAA,oBAAC,qBAAD;EAAqB,OAAM;EACxB,UAAA,MACE,kBAAkB,CAAC,CACnB,QAAQ,WAAW,OAAO,WAAW,CAAC,CAAC,CACvC,KAAK,WACJ,oBAAC,0BAAD;GAEE,SAAS,OAAO,aAAa;GAC7B,kBAAkB,YAAY;IAC5B,OAAO,iBAAiB,OAAO;GACjC;GACC,UAAA,WAAW,MAAM,KAAK,OAAO;EACN,GANnB,OAAO,EAMY,CAC3B;CACgB,CAAA,CACL,EAAA,CAAA;AAEtB;AAEA,sBAAsB,cAAc"}

package/components/data-table/data-table-contexts.d.ts

@@ -0,0 +1,14 @@
+import { StockFeatures } from "@tanstack/react-table";
+//#region src/components/data-table/data-table-contexts.d.ts
+/**
+ * Fuse's own table, header and cell contexts, passed to every `createTableHook` call Fuse makes.
+ * They isolate the registered parts from an app that also calls `createTableHook` with TanStack's
+ * shared default contexts. One module-level set is enough: a nested Fuse table's provider shadows
+ * the outer one, which is right for the parts rendered inside it.
+ *
+ * The hooks are typed with every stock feature. A registered part reads a feature's members only
+ * when its public type is present, which the factory ties to that feature being registered.
+ */
+export declare const fuseTableContexts: import("@tanstack/react-table").TableHookContexts<StockFeatures, import("@tanstack/react-table").RowData>;
+//#endregion
+//# sourceMappingURL=data-table-contexts.d.ts.map

package/components/data-table/data-table-contexts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-contexts.d.ts","names":[],"sources":["../../../src/components/data-table/data-table-contexts.ts"],"mappings":";;;;;;;;;;;qBAca,mDAAiB,kBAAA,+CAAA"}

package/components/data-table/data-table-contexts.js

@@ -0,0 +1,17 @@
+"use client";
+import { createTableHookContexts } from "@tanstack/react-table";
+//#region src/components/data-table/data-table-contexts.ts
+/**
+* Fuse's own table, header and cell contexts, passed to every `createTableHook` call Fuse makes.
+* They isolate the registered parts from an app that also calls `createTableHook` with TanStack's
+* shared default contexts. One module-level set is enough: a nested Fuse table's provider shadows
+* the outer one, which is right for the parts rendered inside it.
+*
+* The hooks are typed with every stock feature. A registered part reads a feature's members only
+* when its public type is present, which the factory ties to that feature being registered.
+*/
+const fuseTableContexts = createTableHookContexts();
+//#endregion
+export { fuseTableContexts };
+
+//# sourceMappingURL=data-table-contexts.js.map

package/components/data-table/data-table-contexts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-contexts.js","names":[],"sources":["../../../src/components/data-table/data-table-contexts.ts"],"sourcesContent":["\"use client\";\n\nimport { createTableHookContexts } from \"@tanstack/react-table\";\nimport type { StockFeatures } from \"@tanstack/react-table\";\n\n/**\n * Fuse's own table, header and cell contexts, passed to every `createTableHook` call Fuse makes.\n * They isolate the registered parts from an app that also calls `createTableHook` with TanStack's\n * shared default contexts. One module-level set is enough: a nested Fuse table's provider shadows\n * the outer one, which is right for the parts rendered inside it.\n *\n * The hooks are typed with every stock feature. A registered part reads a feature's members only\n * when its public type is present, which the factory ties to that feature being registered.\n */\nexport const fuseTableContexts = createTableHookContexts<StockFeatures>();\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,oBAAoB,wBAAuC"}