@worknice/whiteboard 0.52.1 → 0.54.0

package/dist/presentation/RichList/types.d.ts

@@ -0,0 +1,347 @@
+import { type ReactNode } from "react";
+import { type Filter } from "../../controls/FilterModal";
+import { type PrimitiveValue } from "../../utils/tables";
+/**
+ * Column width. Use a number (pixels) or a percentage string such as `"30%"` if the
+ * track should grow or shrink with the list width.
+ */
+export type RichListSlotSize = number | `${number}%`;
+/**
+ * When a slot or text field is rendered, gated by `RichList`’s `compactBreakpoint`
+ * (measured on the list scope only via the same `ResizeObserver` as `compactSize`).
+ *
+ * - `always` — render at any list width (default for most positions).
+ * - `whenWide` — render only when list width is **above** `compactBreakpoint`.
+ * - `whenCompact` — render only when list width is **at or below** `compactBreakpoint`.
+ *
+ * Useful for moving the same logical content between positions across breakpoints
+ * (e.g. status line in a content slot when wide, in `mainSlot.secondary` when compact).
+ * `compactBreakpoint` is the **only** width guardrail in `RichList`.
+ */
+export type RichListLayoutVisibility = "always" | "whenWide" | "whenCompact";
+/**
+ * Width policy for a content slot column.
+ *
+ * - `"shrinkable"` (default) — column flex-shrinks with the row at its `size` /
+ *   `compactSize` cap.
+ * - `"fixed"` — column is locked to its `size` / `compactSize`; the trailing /
+ *   main columns shrink first.
+ *
+ */
+export type RichListColumnWidthMode = "shrinkable" | "fixed";
+/**
+ * One line of text (or rich content) inside `mainSlot`. Use the object form for search,
+ * filters, CSV, wide-only prefix/suffix adornments, etc.
+ *
+ * - **Function:** render only; no search, filter, or CSV unless you use the object form.
+ * - **Object:** add `value`, `label`, and other fields to hook into search, filters, and
+ *   export like a table column.
+ *
+ * Default handling for the object form is in `normalizeTextField` in `helpers.ts`
+ * (function form forces `globalFiltering: false` and `csvExport: false`).
+ */
+export type RichListTextField<Type> = ((row: Type) => ReactNode) | {
+    /**
+     * Long text is truncated with an ellipsis when space is tight.
+     * Use `prefixOnWide` / `suffixOnWide` for small extras beside the main line at
+     * wide widths only.
+     */
+    render: (row: Type) => ReactNode;
+    /**
+     * Optional content **before** the main line (e.g. icon). Hidden at compact widths
+     * (the same `ResizeObserver` signal as `compactSize` and `rowMainCompact`); use
+     * the `render` itself for content that should always render.
+     */
+    prefixOnWide?: (row: Type) => ReactNode;
+    /**
+     * Optional content **after** the main line (e.g. badge). Hidden at compact widths
+     * (same rule as `prefixOnWide`); use the `render` itself for content that should
+     * always render, or pair with a `whenCompact` content/trailing slot for swap.
+     */
+    suffixOnWide?: (row: Type) => ReactNode;
+    /**
+     * Value used for search, filters, and export. If you omit it, this line is
+     * for display only in those features. When set, search usually includes this
+     * field by default.
+     */
+    value?: (row: Type) => PrimitiveValue;
+    /**
+     * Label in filter and export UIs. Needed for some filter setups when you add
+     * `filter` options.
+     */
+    label?: string;
+    /**
+     * If set, this can appear in the Filters dialog.
+     * When it is the only filter and a single-select, the toolbar renders an inline
+     * `MenuButton` **without** a visible label (`filter.label` is still used in the Filters
+     * modal when open, and as `aria-label` on that menu trigger when non-empty).
+     */
+    filter?: Filter<Type>;
+    /**
+     * Whether the toolbar search can match this field.
+     * @default `true` when `value` is set, otherwise `false` (see `normalizeTextField`)
+     */
+    globalFiltering?: boolean;
+    /**
+     * Include this field in CSV export when the list has `csvFilename` set.
+     * @default `false`
+     */
+    csvExport?: boolean;
+    /**
+     * Hide / show this line based on `RichList`’s `compactBreakpoint`. Use
+     * `"whenCompact"` on `mainSlot.secondary` to surface a line only at compact
+     * widths (and pair with a `whenWide` content slot for the wide layout).
+     * @default `"always"`
+     */
+    layoutVisibility?: RichListLayoutVisibility;
+};
+/**
+ * Primary and optional secondary lines stacked in the row’s main column (same horizontal
+ * slot as the content columns to their right).
+ */
+export type RichListMainSlot<Type> = {
+    primary: RichListTextField<Type>;
+    secondary?: RichListTextField<Type>;
+    /**
+     * Max width of the **main slot** column (pixels), including primary and secondary lines.
+     * Omit to let the layout choose a width (see `RichListRow` / grid track fallback).
+     */
+    size?: number;
+};
+/**
+ * Common fields shared by leading, content (`contentSlots`), and trailing slots in
+ * their object form. Used directly by `RichListSlot` (leading/trailing) and extended
+ * by `RichListContentSlot` with the content-only display options.
+ */
+type RichListBaseSlotObject<Type> = {
+    /**
+     * Unique id for this column across leading, all content slots, and trailing.
+     */
+    id: string;
+    /**
+     * Cell content for a row.
+     */
+    render: (row: Type) => ReactNode;
+    /**
+     * Label in filters and export headers. Content slots additionally use this in the
+     * Display / column UI when toggleable.
+     */
+    label?: string;
+    /**
+     * Value for search, filters, and CSV. If omitted, this column is only visual in
+     * those features.
+     */
+    value?: (row: Type) => PrimitiveValue;
+    /**
+     * Alignment inside the column. Trailing often uses `end` (right in LTR);
+     * content columns sometimes use `center`.
+     * @default `"end"` for trailing, `"start"` for leading and content
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * Default max width for this column when the list is **wider** than
+     * `RichList`’s `compactBreakpoint` (default 1024px). Leading, content, and
+     * trailing can all set this.
+     */
+    size?: RichListSlotSize;
+    /**
+     * Tighter max width at/under `RichList`’s `compactBreakpoint` (default 1024px),
+     * if you set this. If omitted, `size` is used at compact too.
+     */
+    compactSize?: RichListSlotSize;
+    /**
+     * Column filter for the Filters dialog; use a clear `filter.label` where the modal applies.
+     * When this is the list’s only single-select filter, the toolbar renders a label-less
+     * inline `MenuButton` (same `filter.label` feeds `aria-label` when non-empty).
+     */
+    filter?: Filter<Type>;
+    /**
+     * When `true`, the toolbar search can match this column’s `value`.
+     * @default `true` when `value` is set, otherwise `false` (see `normalizeSlot`)
+     */
+    globalFiltering?: boolean;
+    /**
+     * Include in CSV when the list sets `csvFilename`.
+     * @default `false`
+     */
+    csvExport?: boolean;
+    /**
+     * Show / hide this whole column based on `RichList`’s `compactBreakpoint`. Combined
+     * with column visibility from the Display dialog (which always wins). Useful for
+     * surfacing the same logical content via different positions across breakpoints
+     * (e.g. content slot when wide; `mainSlot.secondary` when compact).
+     * @default `"always"`
+     */
+    layoutVisibility?: RichListLayoutVisibility;
+};
+/**
+ * A **leading** or **trailing** column. The row order is: leading, main slot (primary /
+ * optional secondary), content columns, trailing, then row actions.
+ *
+ * - **Function:** quick cell: `row => content`.
+ * - **Object:** full control with a stable `id` for filters and CSV.
+ *
+ * Content columns (`contentSlots`) use the wider `RichListContentSlot` shape, which
+ * adds `columnWidthMode`, `canToggleVisibility`, and `hiddenByDefault` — those
+ * options only have an effect on content columns and are deliberately excluded here.
+ *
+ * Default handling for the object form is in `normalizeSlot` in `helpers.ts` (function
+ * form sets: `align` `"end"` for trailing, `"start"` for leading; `globalFiltering: false`;
+ * `csvExport: false`; `layoutVisibility: "always"`).
+ */
+export type RichListSlot<Type> = ((row: Type) => ReactNode) | RichListBaseSlotObject<Type>;
+/**
+ * A **content** column (in `contentSlots`). Same shape as `RichListSlot` plus the
+ * content-only display options:
+ *
+ * - `columnWidthMode` — width-shrink policy (`"shrinkable"` or `"fixed"`). To drop
+ *   the column at/under `compactBreakpoint`, use `layoutVisibility: "whenWide"`.
+ * - `canToggleVisibility` / `hiddenByDefault` for the Display dialog.
+ *
+ * Default handling for the object form is in `normalizeSlot` in `helpers.ts` (function
+ * form sets: `layoutVisibility: "always"`; `columnWidthMode: "shrinkable"`;
+ * `align: "start"`; `globalFiltering: false`; `canToggleVisibility: false`;
+ * `hiddenByDefault: false`; `csvExport: false`).
+ */
+export type RichListContentSlot<Type> = ((row: Type) => ReactNode) | (RichListBaseSlotObject<Type> & {
+    /**
+     * Width-shrink policy for this column when sized.
+     *
+     * - `"shrinkable"` (default) — column shrinks with the row at its `size` /
+     *   `compactSize`.
+     * - `"fixed"` — column is locked to its `size` / `compactSize`; trailing and
+     *   main shrink first.
+     *
+     * @default `"shrinkable"`
+     */
+    columnWidthMode?: RichListColumnWidthMode;
+    /**
+     * If `true`, users can show or hide this column in Display settings. Requires a
+     * non-empty `label`.
+     * @default `false`
+     */
+    canToggleVisibility?: boolean;
+    /**
+     * If `true`, the column starts hidden. With `canToggleVisibility`, users can turn
+     * it on; without it, the column stays out of the visible-columns UI.
+     * @default `false`
+     */
+    hiddenByDefault?: boolean;
+});
+/**
+ * Internal shape after `normalizeTextField` in `helpers.ts`. Booleans are always set
+ * (no longer optional on the public object form).
+ */
+export type NormalizedTextField<Type> = {
+    id: string;
+    position: "primary" | "secondary";
+    label?: string;
+    value?: (row: Type) => PrimitiveValue;
+    render: (row: Type) => ReactNode;
+    prefixOnWide?: (row: Type) => ReactNode;
+    suffixOnWide?: (row: Type) => ReactNode;
+    filter?: Filter<Type>;
+    /**
+     * @default `false` for function `RichListTextField`; for object, `true` if `value` is
+     * set and `globalFiltering` is omitted, else the explicit `globalFiltering` value.
+     */
+    globalFiltering: boolean;
+    /** @default `false` (or `false` for function form). */
+    csvExport: boolean;
+    /** @default `"always"` */
+    layoutVisibility: RichListLayoutVisibility;
+};
+/**
+ * Internal shape after `normalizeSlot` in `helpers.ts`. See `RichListSlot` and
+ * `RichListContentSlot` for defaults on the public object; function slots always set
+ * `false` for the filtering/toggle/CSV flags.
+ */
+export type NormalizedSlot<Type> = {
+    id: string;
+    position: "leading" | "content" | "trailing";
+    /** Index within its position group (e.g. the i-th leading slot in the array). */
+    positionIndex?: number;
+    label?: string;
+    value?: (row: Type) => PrimitiveValue;
+    render: (row: Type) => ReactNode;
+    /** @default `"always"` */
+    layoutVisibility: RichListLayoutVisibility;
+    /** @default `"shrinkable"` (content-only knob; defaults to `"shrinkable"` for leading/trailing too). */
+    columnWidthMode: RichListColumnWidthMode;
+    /** @default from object or `"end"` (trailing) / `"start"` (leading, content). */
+    align: "start" | "center" | "end";
+    size?: RichListSlotSize;
+    compactSize?: RichListSlotSize;
+    filter?: Filter<Type>;
+    /**
+     * @default `false` for function `RichListSlot`; for object, `true` if `value` is set
+     * and `globalFiltering` is omitted, else the explicit `globalFiltering` value.
+     */
+    globalFiltering: boolean;
+    /**
+     * @default `true` only for content + explicit `true` on the object; otherwise `false`
+     * (including leading/trailing).
+     */
+    canToggleVisibility: boolean;
+    /** @default `false` if omitted on the object. */
+    hiddenByDefault: boolean;
+    /** @default `false` if omitted on the object. */
+    csvExport: boolean;
+};
+/**
+ * One action for a row: an icon in the action strip and/or an item in the “more” menu.
+ * Up to a fixed number of actions show as icons; the rest go in the menu so columns
+ * stay aligned.
+ */
+export type RichListRowAction<Type> = {
+    /** Stable id for the control. */
+    id: string;
+    /** Tooltip, menu text, and accessibility name. */
+    label: string;
+    /** @default (omitted) no icon (menu text / tooltip still from `label`). */
+    icon?: ReactNode;
+    /**
+     * If `true`, prefer showing this as an icon in the main strip (until the max number
+     * of icon slots is used). If `false`, it only appears in the overflow menu.
+     * @default `false` (falsy/omitted: overflow menu only)
+     */
+    alwaysVisible?: boolean;
+    onClick: (row: Type) => void;
+    /**
+     * If set, the action is not offered when this returns `false` for that row.
+     * @default (omitted) the action is always considered for the row.
+     */
+    predicate?: (row: Type) => boolean;
+};
+/**
+ * An action on the **selected** rows. Used with `bulkActions` on the list. The `render`
+ * function usually returns a panel (confirm, form, etc.) and receives the matching
+ * selected rows, a way to clear selection, and `onClose` when the panel is done.
+ */
+export type RichListBulkAction<Type> = {
+    /** Id for this bulk action. */
+    key: string;
+    /** Short label; the bar can show per-action row counts. */
+    label: string;
+    /** @default (omitted) no icon. */
+    icon?: ReactNode;
+    /**
+     * Panel to run the action: receives selected rows, `resetRowSelection`, and
+     * `onClose`.
+     */
+    render: (props: {
+        /** Selected rows this action runs on. */
+        rows: Array<Type>;
+        /** Clear selection (e.g. after success). */
+        resetRowSelection: () => void;
+        /** Close the action panel. */
+        onClose: () => void;
+    }) => ReactNode;
+    /**
+     * If set, this action only applies to selected rows that pass this test. It can be
+     * omitted from the bar if no selection matches.
+     * @default (omitted) all selected rows are eligible; no predicate filter.
+     */
+    predicate?: (row: Type) => boolean;
+};
+export {};

package/dist/presentation/Table.d.ts

@@ -1,9 +1,9 @@
 import type { SortingColumnDef } from "@tanstack/react-table";
 import { type ReactNode } from "react";
 import { type ZodTypeAny } from "zod";
+import { type Filter } from "../controls/FilterModal";
 import { type MenuButtonOption } from "../controls/MenuButton";
 import { type PrimitiveValue } from "../utils/tables";
-import { type Filter } from "./TableColumnFilterModal";
 type Grouping<Type> = {
     fn: (row: Type) => string;
     header: (row: Type) => ReactNode;

package/dist/presentation/Table.js

@@ -7,6 +7,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_6e4cc59c__ from "../controls/Disclosure.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_d56bff3f__ from "../controls/FilterModal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__ from "../controls/MenuButton.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__ from "../inputs/CheckboxInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_d1a6f32e__ from "../inputs/SelectInput.js";
@@ -19,7 +20,6 @@ import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__ from "./Table.module.js";
-import * as __WEBPACK_EXTERNAL_MODULE__TableColumnFilterModal_js_dd7b508a__ from "./TableColumnFilterModal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
 const selectColumnId = "_selectColumn";
 const actionsColumnId = "_actionsColumn";
@@ -582,7 +582,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                     })
                 ]
             }),
-            isFilterModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__TableColumnFilterModal_js_dd7b508a__["default"], {
+            isFilterModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_d56bff3f__["default"], {
                 onClose: ()=>setIsFilterModalOpen(false),
                 filterableColumns: filterableColumns,
                 currentFilters: tableState.columnFilters,

package/dist/presentation/Table.module.js

@@ -22,16 +22,6 @@ const Table_module_rslib_entry_ = {
     filterSelectMenus: "filterSelectMenus-rQe_dQ",
     filterBarSearchReset: "filterBarSearchReset-zMZpkF",
     filterBarSearchResetContent: "filterBarSearchResetContent-h8b3qb",
-    filterExpandersContainer: "filterExpandersContainer-yRLNvU",
-    filterExpanderRow: "filterExpanderRow-_O4wQh",
-    filterExpanderHighlight: "filterExpanderHighlight-HU8LI2",
-    filterExpanderLabel: "filterExpanderLabel-z0kGvW",
-    filterExpanderIcon: "filterExpanderIcon-XmmWLH",
-    filterExpander: "filterExpander-AzrkVe",
-    filterExpanderWrapper: "filterExpanderWrapper-wfxkbS",
-    filterBooleanFieldWrapper: "filterBooleanFieldWrapper-UkqZhF",
-    filterOptions: "filterOptions-c2gDM9",
-    filterButton: "filterButton-K5yTnY",
     downloadLink: "downloadLink-DxebfL"
 };
 export { Table_module_rslib_entry_ as default };

package/dist/presentation/Table_module.css

@@ -142,67 +142,7 @@
   }
 }
 
-.filterExpandersContainer-yRLNvU {
-  flex-direction: column;
-  width: 100%;
-  display: flex;
-}
-
-.filterExpandersContainer-yRLNvU > :not(:first-child) {
-  border-top: solid var(--size-n5) var(--color-grey-t08);
-}
-
-.filterExpanderRow-_O4wQh {
-  width: 100%;
-  padding: var(--size-00);
-  align-items: center;
-  gap: var(--size-n2);
-  cursor: pointer;
-  text-align: left;
-  background: none;
-  border: none;
-  outline: none;
-  display: flex;
-}
-
-.filterExpanderHighlight-HU8LI2 .filterExpanderLabel-z0kGvW {
-  font: var(--font-regular-bold);
-}
-
-.filterExpanderLabel-z0kGvW {
-  min-width: 0;
-  font: var(--font-label);
-  flex: 1;
-}
-
-.filterExpanderIcon-XmmWLH {
-  transition: transform .15s;
-}
-
-.filterExpander-AzrkVe[open] .filterExpanderRow-_O4wQh {
-  padding-bottom: var(--size-n2);
-}
-
-.filterExpander-AzrkVe[open] .filterExpanderIcon-XmmWLH {
-  transform: rotate(90deg);
-}
-
-.filterExpanderWrapper-wfxkbS {
-  padding: 0 var(--size-00) var(--size-p1);
-  padding-inline-start: calc(var(--size-p1)  + 15px + var(--size-n2));
-}
-
-.filterBooleanFieldWrapper-UkqZhF {
-  padding: var(--size-00) var(--size-00) var(--size-p1);
-}
-
-.filterOptions-c2gDM9 {
-  gap: var(--size-n2);
-  flex-direction: column;
-  display: flex;
-}
-
-.filterButton-K5yTnY, .downloadLink-DxebfL {
+.downloadLink-DxebfL {
   justify-content: flex-end;
   gap: var(--size-00);
   align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.52.1",
+  "version": "0.54.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.35.1"
+    "@worknice/utils": "^0.37.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",