@alexgorbatchev/shadcn 0.0.36 → 0.0.38

package/README.md

@@ -306,7 +306,7 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, `fill`, and `sortColumnIds`; a `fill` column takes the width the sized columns leave, and `sortColumnIds` names other columns the header sorts with its own buttons so its `aria-sort` reports them. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Set `columnResizeMode: "onChange"` so columns follow the pointer while dragging; TanStack's default `"onEnd"` resizes only on release. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
 
-Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
+Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, listed in its `options` or, when they depend on runtime data, in the `options` prop of `DataGridFilters` and `DataGridFilterSummary` keyed by column ID, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
 
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 

package/dist/components/data-grid/DataGrid.d.ts

@@ -25,7 +25,8 @@ interface IDataGridOptionsFilter {
     variant: "options";
     /** Names the filter; defaults to the column label. */
     label?: string;
-    options: readonly ILabelValue[];
+    /** Choices known where the column is defined; the filter controls' `options` prop supplies choices known later. */
+    options?: readonly ILabelValue[];
     /** Allows choosing several options; a single choice still writes a one-value array. Defaults to true. */
     multiple?: boolean;
 }
@@ -87,6 +88,13 @@ interface IDataGridControlProps<T extends RowData> {
     /** Names the control; each control documents its default. */
     label?: string;
 }
+/** Options-filter choices by column ID, for choices that depend on data the column definitions cannot hold. */
+type DataGridFilterOptions = Readonly<Record<string, readonly ILabelValue[]>>;
+/** Props of a control that edits or describes column filters. */
+interface IDataGridFilterControlProps<T extends RowData> extends IDataGridControlProps<T> {
+    /** Replaces the choices of the options filters it names; other filters keep their column's `meta.filter.options`. */
+    options?: DataGridFilterOptions;
+}
 type DataGridRow<T extends RowData> = Row<DataGridFeatures, T>;
 type DataGridColumn<T extends RowData> = Column<DataGridFeatures, T, CellData>;
 declare function getDataGridColumnLabel<T extends RowData>(column: DataGridColumn<T>): string;
@@ -129,4 +137,4 @@ declare function DataGridPagination<T extends RowData>({ table }: {
     table: DataGridTable<T>;
 }): ReactElement;
 export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridColumns, DataGridFilter, DataGridHeaderRows, DataGridPagination, dataGridFeatures, getDataGridColumnLabel, };
-export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, IDataGridControlProps, IDataGridOptionsFilter, IDataGridRangeFilter, };
+export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, IDataGridControlProps, DataGridFilterOptions, IDataGridFilterControlProps, IDataGridOptionsFilter, IDataGridRangeFilter, };

package/dist/components/data-grid/DataGridFilterSummary.d.ts

@@ -1,8 +1,9 @@
 import { type RowData } from "@tanstack/react-table";
 import type { ReactElement } from "react";
-import type { IDataGridControlProps } from "./DataGrid.js";
+import type { IDataGridFilterControlProps } from "./DataGrid.js";
 /**
  * Lists the active filters of columns whose `meta.filter` describes one, each with a button that removes it, followed by
- * Clear filters. Renders nothing while no such filter is active. `label` names the list.
+ * Clear filters. Renders nothing while no such filter is active. `label` names the list; `options` supplies the
+ * options-filter choices given to `DataGridFilters`, so the summary names them the same way.
  */
-export declare function DataGridFilterSummary<T extends RowData>({ table, label, }: IDataGridControlProps<T>): ReactElement;
+export declare function DataGridFilterSummary<T extends RowData>({ table, label, options, }: IDataGridFilterControlProps<T>): ReactElement;

package/dist/components/data-grid/DataGridFilters.d.ts

@@ -1,9 +1,10 @@
 import { type RowData } from "@tanstack/react-table";
 import { type ReactElement } from "react";
-import type { IDataGridControlProps } from "./DataGrid.js";
+import type { IDataGridFilterControlProps } from "./DataGrid.js";
 /**
  * Edits the filters of every column whose `meta.filter` describes one, hidden columns included. Filters combine with
  * each other and with the global filter; each control suggests only values the other filters leave. The trigger counts
- * the active column filters, and Clear filters removes them all. `label` titles the trigger and popover.
+ * the active column filters, and Clear filters removes them all. `label` titles the trigger and popover; `options`
+ * supplies options-filter choices that depend on runtime data.
  */
-export declare function DataGridFilters<T extends RowData>({ table, label, }: IDataGridControlProps<T>): ReactElement;
+export declare function DataGridFilters<T extends RowData>({ table, label, options, }: IDataGridFilterControlProps<T>): ReactElement;

package/dist/components/data-grid/describeDataGridFilter.d.ts

@@ -1,8 +1,9 @@
+import type { ILabelValue } from "../../options/types.js";
 import type { DataGridColumnFilter } from "./DataGrid.js";
 /**
- * Describes a filter value in a few words: `120–128`, `≥ 120`, or `≤ 128` for a range, and the chosen option labels for
- * options. Values without a matching option read as themselves. Returns an empty string for a value that filters
- * nothing.
+ * Describes a filter value in a few words: `120–128`, `≥ 120`, or `≤ 128` for a range, and the labels of the chosen
+ * `options` for an options filter. Values without a matching option read as themselves. Returns an empty string for a
+ * value that filters nothing.
  */
-declare function describeDataGridFilter(filter: DataGridColumnFilter, value: unknown, locale?: string): string;
+declare function describeDataGridFilter(filter: DataGridColumnFilter, value: unknown, options: readonly ILabelValue[]): string;
 export { describeDataGridFilter };

package/dist/components/data-grid/getDataGridFilterOptions.d.ts

@@ -0,0 +1,6 @@
+import type { RowData } from "@tanstack/react-table";
+import type { ILabelValue } from "../../options/types.js";
+import type { DataGridColumn, DataGridFilterOptions } from "./DataGrid.js";
+/** A column's options-filter choices: those the controls were given for it, else its own. */
+declare function getDataGridFilterOptions<T extends RowData>(column: DataGridColumn<T>, options: DataGridFilterOptions | undefined): readonly ILabelValue[];
+export { getDataGridFilterOptions };

package/dist/components/data-grid/index.d.ts

@@ -1,5 +1,5 @@
 export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures, } from "./DataGrid.js";
-export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, IDataGridControlProps, IDataGridOptionsFilter, IDataGridRangeFilter, } from "./DataGrid.js";
+export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, IDataGridControlProps, DataGridFilterOptions, IDataGridFilterControlProps, IDataGridOptionsFilter, IDataGridRangeFilter, } from "./DataGrid.js";
 export { DataGridColumnOptions } from "./DataGridColumnOptions.js";
 export { DataGridFilters } from "./DataGridFilters.js";
 export { DataGridFilterSummary } from "./DataGridFilterSummary.js";

package/dist/components/data-grid/index.js

@@ -174,6 +174,13 @@ function getDataGridFilterLabel(column) {
   return column.columnDef.meta?.filter?.label ?? getDataGridColumnLabel(column);
 }
 
+// src/components/data-grid/getDataGridFilterOptions.ts
+var NO_OPTIONS = [];
+function getDataGridFilterOptions(column, options) {
+  const filter = column.columnDef.meta?.filter;
+  return options?.[column.id] ?? (filter?.variant === "options" ? filter.options : undefined) ?? NO_OPTIONS;
+}
+
 // src/components/data-grid/readDataGridOptionValues.ts
 var NO_VALUES = [];
 function readDataGridOptionValues(value) {
@@ -250,12 +257,13 @@ function DataGridRangeFilterControl({
 function DataGridOptionsFilterControl({
   column,
   filter,
+  options,
   label
 }) {
   const labelId = useId();
   const anchor = useComboboxAnchor2();
   const counts = column.getFacetedUniqueValues();
-  const selected = readDataGridOptionValues(column.getFilterValue()).map((value) => filter.options.find((option) => option.value === value) ?? { label: value, value });
+  const selected = readDataGridOptionValues(column.getFilterValue()).map((value) => options.find((option) => option.value === value) ?? { label: value, value });
   const update = (next) => column.setFilterValue(next.length ? next.map((option) => option.value) : undefined);
   const content = /* @__PURE__ */ jsxs2(Fragment, {
     children: [
@@ -289,7 +297,7 @@ function DataGridOptionsFilterControl({
         children: label
       }),
       filter.multiple === false ? /* @__PURE__ */ jsxs2(Combobox2, {
-        items: filter.options,
+        items: options,
         value: selected[0] ?? null,
         onValueChange: (option) => update(option ? [option] : []),
         itemToStringLabel: (option) => option.label,
@@ -306,25 +314,25 @@ function DataGridOptionsFilterControl({
           })
         ]
       }) : /* @__PURE__ */ jsxs2(Combobox2, {
-        items: filter.options,
+        items: options,
         multiple: true,
         value: selected,
-        onValueChange: (options) => update(options),
+        onValueChange: (chosen) => update(chosen),
         itemToStringLabel: (option) => option.label,
         isItemEqualToValue: (option, value) => option.value === value.value,
         children: [
           /* @__PURE__ */ jsx2(ComboboxChips2, {
             ref: anchor,
             children: /* @__PURE__ */ jsx2(ComboboxValue2, {
-              children: (options) => /* @__PURE__ */ jsxs2(Fragment, {
+              children: (chosen) => /* @__PURE__ */ jsxs2(Fragment, {
                 children: [
-                  options.map((option) => /* @__PURE__ */ jsx2(ComboboxChip2, {
+                  chosen.map((option) => /* @__PURE__ */ jsx2(ComboboxChip2, {
                     removeLabel: `Remove ${option.label}`,
                     children: option.label
                   }, option.value)),
                   /* @__PURE__ */ jsx2(ComboboxChipsInput2, {
                     "aria-labelledby": labelId,
-                    placeholder: options.length ? undefined : "Any"
+                    placeholder: chosen.length ? undefined : "Any"
                   })
                 ]
               })
@@ -341,7 +349,8 @@ function DataGridOptionsFilterControl({
 }
 function DataGridFilters({
   table,
-  label = "Filters"
+  label = "Filters",
+  options
 }) {
   return /* @__PURE__ */ jsxs2(Popover2, {
     children: [
@@ -399,6 +408,7 @@ function DataGridFilters({
                       }, column.id) : /* @__PURE__ */ jsx2(DataGridOptionsFilterControl, {
                         column,
                         filter,
+                        options: getDataGridFilterOptions(column, options),
                         label: name
                       }, column.id);
                     })
@@ -424,11 +434,11 @@ import { Subscribe as Subscribe3 } from "@tanstack/react-table";
 import { XIcon } from "lucide-react";
 
 // src/components/data-grid/describeDataGridFilter.ts
-function describeDataGridFilter(filter, value, locale) {
+function describeDataGridFilter(filter, value, options) {
   if (filter.variant === "options") {
-    return readDataGridOptionValues(value).map((item) => filter.options.find((option) => option.value === item)?.label ?? item).join(", ");
+    return readDataGridOptionValues(value).map((item) => options.find((option) => option.value === item)?.label ?? item).join(", ");
   }
-  const formatter = new Intl.NumberFormat(locale, filter.format);
+  const formatter = new Intl.NumberFormat(undefined, filter.format);
   const [min, max] = readDataGridRange(value);
   if (min !== null && max !== null)
     return `${formatter.format(Math.min(min, max))}–${formatter.format(Math.max(min, max))}`;
@@ -443,14 +453,15 @@ function describeDataGridFilter(filter, value, locale) {
 import { jsx as jsx3, jsxs as jsxs3, Fragment as Fragment2 } from "react/jsx-runtime";
 function DataGridFilterSummary({
   table,
-  label = "Active filters"
+  label = "Active filters",
+  options
 }) {
   return /* @__PURE__ */ jsx3(Subscribe3, {
     source: table.atoms.columnFilters,
     children: () => {
       const active = table.getAllLeafColumns().flatMap((column) => {
         const filter = column.columnDef.meta?.filter;
-        const description = filter ? describeDataGridFilter(filter, column.getFilterValue()) : "";
+        const description = filter ? describeDataGridFilter(filter, column.getFilterValue(), getDataGridFilterOptions(column, options)) : "";
         return description ? [{ column, description, name: getDataGridFilterLabel(column) }] : [];
       });
       return /* @__PURE__ */ jsx3(Fragment2, {

package/dist/theme.css

@@ -10,6 +10,11 @@
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
   --color-primary-foreground: var(--primary-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
@@ -104,6 +109,11 @@
     --success-foreground: #00210f;
     --warning: #ffb224;
     --warning-foreground: #231500;
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
     --border: #353b44;
     --input: #6f7783;
     --ring: #ff5cd6;
@@ -138,6 +148,11 @@
     --success-foreground: #00210f;
     --warning: #ffb224;
     --warning-foreground: #231500;
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
     --border: #353b44;
     --input: #6f7783;
     --ring: #ff5cd6;
@@ -172,6 +187,11 @@
     --success-foreground: #ffffff;
     --warning: #a35400;
     --warning-foreground: #ffffff;
+    --chart-1: #2a78d6;
+    --chart-2: #eb6834;
+    --chart-3: #1baf7a;
+    --chart-4: #eda100;
+    --chart-5: #e87ba4;
     --border: #c7ccd4;
     --input: #747c88;
     --ring: #b8168c;

package/llms/components/data-display/DataGridFilters.md

@@ -36,3 +36,16 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     render: () => (<FilteredDataGridExample recordings={fixture_gridRecordings} initialFilters={[{ id: "genre", value: ["Polka"] }]}/>)
 }
 ```
+
+### RuntimeOptions
+
+```tsx
+{
+    render: () => (<FilteredDataGridExample recordings={fixture_gridRecordings} options={{
+            genre: [
+                { label: "Deep house", value: "House" },
+                { label: "Peak-time techno", value: "Techno" },
+            ],
+        }}/>)
+}
+```

package/llms/setup.md

@@ -306,7 +306,7 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, `fill`, and `sortColumnIds`; a `fill` column takes the width the sized columns leave, and `sortColumnIds` names other columns the header sorts with its own buttons so its `aria-sort` reports them. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Set `columnResizeMode: "onChange"` so columns follow the pointer while dragging; TanStack's default `"onEnd"` resizes only on release. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
 
-Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
+Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, listed in its `options` or, when they depend on runtime data, in the `options` prop of `DataGridFilters` and `DataGridFilterSummary` keyed by column ID, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
 
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {