@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/views/CollectionView/CollectionTableView.es.js

@@ -0,0 +1,149 @@
+"use client";
+import { cls } from "../../util/cls.es.js";
+import { VirtualTable } from "../../components/VirtualTable/VirtualTable.es.js";
+import { DefaultCellRenderer } from "./DefaultCellRenderer.es.js";
+import { getValueInPath } from "./utils.es.js";
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/CollectionView/CollectionTableView.tsx
+var DEFAULT_COLUMN_WIDTHS = {
+	string: 200,
+	number: 140,
+	date: 160,
+	boolean: 120,
+	array: 200,
+	map: 200,
+	reference: 200,
+	relation: 200,
+	geopoint: 180
+};
+var FALLBACK_COLUMN_WIDTH = 200;
+var SIZE_TO_ROW_HEIGHT = {
+	xs: 36,
+	s: 44,
+	m: 52,
+	l: 64,
+	xl: 80
+};
+var SORTABLE_TYPES = /* @__PURE__ */ new Set([
+	"string",
+	"number",
+	"date"
+]);
+var VIEW_SIZE_TO_RENDERER_SIZE = {
+	xs: "tiny",
+	s: "small",
+	m: "medium",
+	l: "large",
+	xl: "large"
+};
+/**
+* Headless table view that wraps {@link VirtualTable}.
+*
+* Converts property configurations into virtual table columns and wires up
+* sorting, pagination, and cell rendering without coupling to any data layer.
+*
+* @group Collection View
+*/
+function CollectionTableView({ dataController, properties, propertiesOrder, displayedColumnIds, onRowClick, cellRenderer, size = "m", emptyComponent, hoverRow = true, className, onColumnResize, onColumnsOrderChange }) {
+	const columns = useMemo(() => {
+		const order = propertiesOrder ?? Object.keys(properties);
+		return (displayedColumnIds ? order.filter((key) => displayedColumnIds.includes(key)) : order.filter((key) => {
+			const prop = properties[key];
+			return prop && !prop.hideFromCollection;
+		})).map((key) => {
+			const prop = properties[key];
+			if (!prop) return null;
+			return {
+				key,
+				width: prop.columnWidth || DEFAULT_COLUMN_WIDTHS[prop.type] || FALLBACK_COLUMN_WIDTH,
+				title: prop.name,
+				sortable: SORTABLE_TYPES.has(prop.type),
+				resizable: true
+			};
+		}).filter((col) => col !== null);
+	}, [
+		properties,
+		propertiesOrder,
+		displayedColumnIds
+	]);
+	const rowHeight = SIZE_TO_ROW_HEIGHT[size];
+	const rendererSize = VIEW_SIZE_TO_RENDERER_SIZE[size];
+	const tableCellRenderer = useCallback((params) => {
+		if (!params.rowData) return null;
+		const propertyConfig = properties[params.column.key];
+		if (!propertyConfig) return null;
+		const value = getValueInPath(params.rowData, params.column.key);
+		const cellProps = {
+			row: params.rowData,
+			propertyKey: params.column.key,
+			property: propertyConfig,
+			value,
+			size: rendererSize,
+			width: params.width
+		};
+		if (cellRenderer) {
+			const custom = cellRenderer(cellProps);
+			if (custom !== void 0) return /* @__PURE__ */ jsx("div", {
+				className: "flex items-center h-full px-1 overflow-hidden",
+				children: custom
+			});
+		}
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex items-center h-full px-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx(DefaultCellRenderer, { ...cellProps })
+		});
+	}, [
+		properties,
+		cellRenderer,
+		rendererSize
+	]);
+	const handleRowClick = useCallback(({ rowData }) => {
+		onRowClick?.(rowData);
+	}, [onRowClick]);
+	const handleEndReached = useCallback(() => {
+		if (dataController.paginationEnabled && !dataController.noMoreToLoad) {
+			const currentCount = dataController.itemCount ?? dataController.pageSize ?? 50;
+			const pageSize = dataController.pageSize ?? 50;
+			dataController.setItemCount?.(currentCount + pageSize);
+		}
+	}, [
+		dataController.paginationEnabled,
+		dataController.noMoreToLoad,
+		dataController.itemCount,
+		dataController.pageSize,
+		dataController.setItemCount
+	]);
+	const handleColumnResize = useCallback((params) => {
+		onColumnResize?.({
+			key: params.key,
+			width: params.width
+		});
+	}, [onColumnResize]);
+	const handleColumnsOrderChange = useCallback((newColumns) => {
+		onColumnsOrderChange?.(newColumns.map((col) => col.key));
+	}, [onColumnsOrderChange]);
+	return /* @__PURE__ */ jsx(VirtualTable, {
+		data: dataController.data,
+		columns,
+		cellRenderer: tableCellRenderer,
+		rowHeight,
+		sortBy: dataController.sortBy,
+		onSortByUpdate: dataController.setSortBy,
+		onRowClick: handleRowClick,
+		onEndReached: handleEndReached,
+		onColumnResize: handleColumnResize,
+		onColumnsOrderChange: handleColumnsOrderChange,
+		loading: dataController.loading,
+		emptyComponent,
+		error: dataController.error,
+		hoverRow,
+		className: cls("h-full", className),
+		onScroll: dataController.onScroll,
+		initialScroll: dataController.initialScroll
+	});
+}
+//#endregion
+export { CollectionTableView };
+
+//# sourceMappingURL=CollectionTableView.es.js.map

package/dist/views/CollectionView/CollectionTableView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionTableView.es.js","names":[],"sources":["../../../src/views/CollectionView/CollectionTableView.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { VirtualTable } from \"../../components/VirtualTable/VirtualTable\";\nimport type { VirtualTableColumn, CellRendererParams, OnVirtualTableColumnResizeParams } from \"../../components/VirtualTable/VirtualTableProps\";\nimport { DefaultCellRenderer } from \"./DefaultCellRenderer\";\nimport { cls } from \"../../util\";\nimport type {\n    CollectionPropertyConfig,\n    CollectionDataController,\n    CellRendererOverride,\n    CollectionViewSize,\n    CollectionSelectionController,\n    CellRendererProps,\n} from \"./CollectionViewTypes\";\n\nimport { getValueInPath } from \"./utils\";\n\nconst DEFAULT_COLUMN_WIDTHS: Record<string, number> = {\n    string: 200,\n    number: 140,\n    date: 160,\n    boolean: 120,\n    array: 200,\n    map: 200,\n    reference: 200,\n    relation: 200,\n    geopoint: 180,\n};\nconst FALLBACK_COLUMN_WIDTH = 200;\n\nconst SIZE_TO_ROW_HEIGHT: Record<CollectionViewSize, number> = {\n    xs: 36,\n    s: 44,\n    m: 52,\n    l: 64,\n    xl: 80,\n};\n\nconst SORTABLE_TYPES = new Set([\"string\", \"number\", \"date\"]);\n\ntype RendererSize = \"tiny\" | \"small\" | \"medium\" | \"large\";\n\nconst VIEW_SIZE_TO_RENDERER_SIZE: Record<CollectionViewSize, RendererSize> = {\n    xs: \"tiny\",\n    s: \"small\",\n    m: \"medium\",\n    l: \"large\",\n    xl: \"large\",\n};\n\n/**\n * Props for the {@link CollectionTableView} component.\n * @group Collection View\n */\nexport type CollectionTableViewProps<T = Record<string, unknown>> = {\n    dataController: CollectionDataController<T>;\n    properties: Record<string, CollectionPropertyConfig>;\n    propertiesOrder?: string[];\n    displayedColumnIds?: string[];\n    idProperty?: string;\n    titleProperty?: string;\n    onRowClick?: (row: T) => void;\n    cellRenderer?: CellRendererOverride<T>;\n    size?: CollectionViewSize;\n    selectionEnabled?: boolean;\n    selectionController?: CollectionSelectionController<T>;\n    highlightedItems?: T[];\n    emptyComponent?: React.ReactNode;\n    hoverRow?: boolean;\n    className?: string;\n    onColumnResize?: (params: { key: string; width: number }) => void;\n    onColumnsOrderChange?: (keys: string[]) => void;\n};\n\n/**\n * Headless table view that wraps {@link VirtualTable}.\n *\n * Converts property configurations into virtual table columns and wires up\n * sorting, pagination, and cell rendering without coupling to any data layer.\n *\n * @group Collection View\n */\nexport function CollectionTableView<T extends Record<string, unknown> = Record<string, unknown>>({\n    dataController,\n    properties,\n    propertiesOrder,\n    displayedColumnIds,\n    onRowClick,\n    cellRenderer,\n    size = \"m\",\n    emptyComponent,\n    hoverRow = true,\n    className,\n    onColumnResize,\n    onColumnsOrderChange,\n}: CollectionTableViewProps<T>) {\n    // ── Build columns ────────────────────────────────────────────────\n    const columns = useMemo<VirtualTableColumn[]>(() => {\n        const order = propertiesOrder ?? Object.keys(properties);\n        const filteredKeys = displayedColumnIds\n            ? order.filter((key) => displayedColumnIds.includes(key))\n            : order.filter((key) => {\n                  const prop = properties[key];\n                  return prop && !prop.hideFromCollection;\n              });\n\n        return filteredKeys\n            .map((key): VirtualTableColumn | null => {\n                const prop = properties[key];\n                if (!prop) return null;\n                return {\n                    key,\n                    width: prop.columnWidth || DEFAULT_COLUMN_WIDTHS[prop.type] || FALLBACK_COLUMN_WIDTH,\n                    title: prop.name,\n                    sortable: SORTABLE_TYPES.has(prop.type),\n                    resizable: true,\n                };\n            })\n            .filter((col): col is VirtualTableColumn => col !== null);\n    }, [properties, propertiesOrder, displayedColumnIds]);\n\n    // ── Row height ───────────────────────────────────────────────────\n    const rowHeight = SIZE_TO_ROW_HEIGHT[size];\n    const rendererSize = VIEW_SIZE_TO_RENDERER_SIZE[size];\n\n    // ── Cell renderer ────────────────────────────────────────────────\n    const tableCellRenderer = useCallback(\n        (params: CellRendererParams<Record<string, unknown>>): React.ReactNode => {\n            if (!params.rowData) return null;\n\n            const propertyConfig = properties[params.column.key];\n            if (!propertyConfig) return null;\n\n            const value = getValueInPath(\n                params.rowData,\n                params.column.key\n            );\n\n            const cellProps: CellRendererProps<T> = {\n                row: params.rowData as T,\n                propertyKey: params.column.key,\n                property: propertyConfig,\n                value,\n                size: rendererSize,\n                width: params.width,\n            };\n\n            // Try custom renderer first\n            if (cellRenderer) {\n                const custom = cellRenderer(cellProps);\n                if (custom !== undefined) {\n                    return (\n                        <div className=\"flex items-center h-full px-1 overflow-hidden\">\n                            {custom}\n                        </div>\n                    );\n                }\n            }\n\n            return (\n                <div className=\"flex items-center h-full px-1 overflow-hidden\">\n                    <DefaultCellRenderer {...cellProps} />\n                </div>\n            );\n        },\n        [properties, cellRenderer, rendererSize]\n    );\n\n    // ── Row click ────────────────────────────────────────────────────\n    const handleRowClick = useCallback(\n        ({ rowData }: { rowData: Record<string, unknown> }) => {\n            onRowClick?.(rowData as T);\n        },\n        [onRowClick]\n    );\n\n    // ── Pagination ──────────────────────────────────────────────────\n    const handleEndReached = useCallback(() => {\n        if (dataController.paginationEnabled && !dataController.noMoreToLoad) {\n            const currentCount = dataController.itemCount ?? dataController.pageSize ?? 50;\n            const pageSize = dataController.pageSize ?? 50;\n            dataController.setItemCount?.(currentCount + pageSize);\n        }\n    }, [\n        dataController.paginationEnabled,\n        dataController.noMoreToLoad,\n        dataController.itemCount,\n        dataController.pageSize,\n        dataController.setItemCount,\n    ]);\n\n    // ── Column resize ───────────────────────────────────────────────\n    const handleColumnResize = useCallback(\n        (params: OnVirtualTableColumnResizeParams) => {\n            onColumnResize?.({ key: params.key, width: params.width });\n        },\n        [onColumnResize]\n    );\n\n    // ── Column reorder ──────────────────────────────────────────────\n    const handleColumnsOrderChange = useCallback(\n        (newColumns: VirtualTableColumn[]) => {\n            onColumnsOrderChange?.(newColumns.map((col) => col.key));\n        },\n        [onColumnsOrderChange]\n    );\n\n    return (\n        <VirtualTable\n            data={dataController.data}\n            columns={columns}\n            cellRenderer={tableCellRenderer}\n            rowHeight={rowHeight}\n            sortBy={dataController.sortBy}\n            onSortByUpdate={dataController.setSortBy}\n            onRowClick={handleRowClick}\n            onEndReached={handleEndReached}\n            onColumnResize={handleColumnResize}\n            onColumnsOrderChange={handleColumnsOrderChange}\n            loading={dataController.loading}\n            emptyComponent={emptyComponent}\n            error={dataController.error}\n            hoverRow={hoverRow}\n            className={cls(\"h-full\", className)}\n            onScroll={dataController.onScroll}\n            initialScroll={dataController.initialScroll}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/views/CollectionView/CollectionView.es.js

@@ -0,0 +1,197 @@
+import { cls } from "../../util/cls.es.js";
+import { Typography } from "../../components/Typography.es.js";
+import { CollectionViewToolbar } from "./CollectionViewToolbar.es.js";
+import { CollectionTableView } from "./CollectionTableView.es.js";
+import { CollectionCardView } from "./CollectionCardView.es.js";
+import { CollectionListView } from "./CollectionListView.es.js";
+import { CollectionKanbanView } from "./CollectionKanbanView.es.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/CollectionView/CollectionView.tsx
+var DEFAULT_ENABLED_VIEWS = [
+	"list",
+	"table",
+	"cards",
+	"kanban"
+];
+/**
+* A data-agnostic collection view component that orchestrates table, card,
+* list, and kanban views — driven entirely by props.
+*
+* Zero imports from any entity or data layer. This component lives in
+* `@rebasepro/ui` and can be used with any data source.
+*
+* @example
+* ```tsx
+* import { CollectionView } from "@rebasepro/ui";
+*
+* <CollectionView
+*     dataController={{ data: myRows, loading: false, noMoreToLoad: true }}
+*     properties={{
+*         name: { type: "string", name: "Name" },
+*         email: { type: "string", name: "Email" },
+*     }}
+*     title="Contacts"
+*     onRowClick={(row) => openDetail(row.id)}
+* />
+* ```
+*
+* @group Collection View
+*/
+function CollectionView({ dataController, properties, propertiesOrder, displayedColumnIds, idProperty = "id", titleProperty, title, viewMode: viewModeProp, defaultViewMode = "list", enabledViews = DEFAULT_ENABLED_VIEWS, onViewModeChange: onViewModeChangeProp, size: sizeProp, defaultSize = "m", onSizeChange: onSizeChangeProp, kanbanProperty: kanbanPropertyProp, kanbanPropertyOptions, onKanbanPropertyChange: onKanbanPropertyChangeProp, onRowClick, onRowCreate, canCreate = true, selectionEnabled, selectionController, highlightedItems, onMultipleDelete, cellRenderer, emptyComponent, customViews, toolbarActionsStart, toolbarActionsEnd, hideToolbar, hoverRow = true, onColumnResize, onColumnsOrderChange, className }) {
+	const [internalViewMode, setInternalViewMode] = useState(defaultViewMode);
+	const viewMode = viewModeProp ?? internalViewMode;
+	const onViewModeChange = useCallback((mode) => {
+		setInternalViewMode(mode);
+		onViewModeChangeProp?.(mode);
+	}, [onViewModeChangeProp]);
+	const [internalSize, setInternalSize] = useState(defaultSize);
+	const size = sizeProp ?? internalSize;
+	const onSizeChange = useCallback((s) => {
+		setInternalSize(s);
+		onSizeChangeProp?.(s);
+	}, [onSizeChangeProp]);
+	const [internalKanbanProperty, setInternalKanbanProperty] = useState(kanbanPropertyProp);
+	const kanbanProperty = kanbanPropertyProp ?? internalKanbanProperty;
+	const onKanbanPropertyChange = useCallback((property) => {
+		setInternalKanbanProperty(property);
+		onKanbanPropertyChangeProp?.(property);
+	}, [onKanbanPropertyChangeProp]);
+	const resolvedKanbanProperty = useMemo(() => {
+		if (kanbanProperty) return kanbanProperty;
+		const order = propertiesOrder ?? Object.keys(properties);
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && prop.enum) return key;
+		}
+	}, [
+		kanbanProperty,
+		properties,
+		propertiesOrder
+	]);
+	const resolvedKanbanPropertyOptions = useMemo(() => {
+		if (kanbanPropertyOptions) return kanbanPropertyOptions;
+		const options = [];
+		const order = propertiesOrder ?? Object.keys(properties);
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && prop.enum) options.push({
+				key,
+				label: prop.name
+			});
+		}
+		return options;
+	}, [
+		kanbanPropertyOptions,
+		properties,
+		propertiesOrder
+	]);
+	const sharedProps = {
+		dataController,
+		properties,
+		propertiesOrder,
+		idProperty,
+		titleProperty,
+		onRowClick,
+		cellRenderer,
+		selectionEnabled,
+		selectionController,
+		highlightedItems,
+		emptyComponent
+	};
+	const customViewEntries = useMemo(() => {
+		if (!customViews) return [];
+		return Object.entries(customViews).filter(([key]) => !DEFAULT_ENABLED_VIEWS.includes(key)).map(([key, entry]) => {
+			const isBare = typeof entry === "function";
+			return {
+				key,
+				name: isBare ? key : entry.name ?? key,
+				icon: isBare ? void 0 : entry.icon,
+				Component: isBare ? entry : entry.Component
+			};
+		});
+	}, [customViews]);
+	function renderView() {
+		const custom = customViewEntries.find((entry) => entry.key === viewMode);
+		if (custom) {
+			const { Component } = custom;
+			return /* @__PURE__ */ jsx(Component, {
+				...sharedProps,
+				onRowCreate: canCreate ? onRowCreate : void 0,
+				canCreate,
+				size
+			});
+		}
+		switch (viewMode) {
+			case "table": return /* @__PURE__ */ jsx(CollectionTableView, {
+				...sharedProps,
+				displayedColumnIds,
+				size,
+				hoverRow,
+				onColumnResize,
+				onColumnsOrderChange
+			});
+			case "cards": return /* @__PURE__ */ jsx(CollectionCardView, {
+				...sharedProps,
+				size
+			});
+			case "kanban": return resolvedKanbanProperty ? /* @__PURE__ */ jsx(CollectionKanbanView, {
+				...sharedProps,
+				kanbanProperty: resolvedKanbanProperty,
+				onRowCreate: canCreate ? onRowCreate : void 0
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center p-8",
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					color: "secondary",
+					children: "No enum property available for kanban grouping."
+				})
+			});
+			default: return /* @__PURE__ */ jsx(CollectionListView, {
+				...sharedProps,
+				size
+			});
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("overflow-hidden h-full w-full rounded-md flex flex-col", "bg-surface-sheet", className),
+		children: [
+			dataController.error && dataController.data.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 flex-shrink-0",
+				children: /* @__PURE__ */ jsxs(Typography, {
+					variant: "body2",
+					className: "text-red-700 dark:text-red-300 flex-1",
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "Warning:" }),
+						" ",
+						dataController.error.message || "Failed to update data."
+					]
+				})
+			}),
+			!hideToolbar && /* @__PURE__ */ jsx(CollectionViewToolbar, {
+				viewMode,
+				onViewModeChange: enabledViews.length > 1 ? onViewModeChange : void 0,
+				enabledViews,
+				customViews: customViewEntries,
+				size,
+				onSizeChange,
+				searchString: dataController.searchString,
+				onSearchChange: dataController.setSearchString,
+				loading: dataController.loading,
+				actionsStart: toolbarActionsStart,
+				actionsEnd: toolbarActionsEnd,
+				kanbanPropertyOptions: viewMode === "kanban" ? resolvedKanbanPropertyOptions : void 0,
+				selectedKanbanProperty: resolvedKanbanProperty,
+				onKanbanPropertyChange
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-hidden",
+				children: renderView()
+			})
+		]
+	});
+}
+//#endregion
+export { CollectionView };
+
+//# sourceMappingURL=CollectionView.es.js.map

package/dist/views/CollectionView/CollectionView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionView.es.js","names":[],"sources":["../../../src/views/CollectionView/CollectionView.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { cls } from \"../../util\";\nimport { Typography } from \"../../components/Typography\";\nimport { CollectionViewToolbar } from \"./CollectionViewToolbar\";\nimport { CollectionTableView } from \"./CollectionTableView\";\nimport { CollectionCardView } from \"./CollectionCardView\";\nimport { CollectionListView } from \"./CollectionListView\";\nimport { CollectionKanbanView } from \"./CollectionKanbanView\";\nimport type {\n    CollectionViewMode,\n    CollectionViewSize,\n    CollectionPropertyConfig,\n    CollectionDataController,\n    CellRendererOverride,\n    CollectionCustomViewEntry,\n    CollectionSelectionController,\n    KanbanPropertyOption\n} from \"./CollectionViewTypes\";\n\n/**\n * Props for the headless {@link CollectionView} component.\n *\n * This component is data-agnostic — it renders collection data based on\n * property configurations and callbacks, with ZERO coupling to any entity\n * or data layer.\n *\n * @group Collection View\n */\nexport interface CollectionViewProps<T = Record<string, unknown>> {\n    // ── Data ──────────────────────────────────────────────────────────\n\n    /**\n     * Data controller providing rows, loading state, pagination,\n     * filter/sort/search state and setters.\n     */\n    dataController: CollectionDataController<T>;\n\n    /**\n     * Property definitions keyed by property key.\n     * Drives column rendering, cell formatting, and filter UI.\n     */\n    properties: Record<string, CollectionPropertyConfig>;\n\n    /**\n     * Display order of properties. If omitted, uses Object.keys(properties).\n     */\n    propertiesOrder?: string[];\n\n    /**\n     * Subset of property keys to actually display as columns.\n     * If omitted, all non-hidden properties are shown.\n     */\n    displayedColumnIds?: string[];\n\n    // ── Identity ──────────────────────────────────────────────────────\n\n    /** Property key used as row identifier. Default: \"id\" */\n    idProperty?: string;\n\n    /** Property key used as the display title in card/list views */\n    titleProperty?: string;\n\n    // ── View configuration ────────────────────────────────────────────\n\n    /** Title displayed above the collection. `false` to hide. */\n    title?: string | false;\n\n    /** Controlled view mode. If omitted, internal state is used. */\n    viewMode?: CollectionViewMode;\n\n    /** Default view mode when uncontrolled. Default: \"list\" */\n    defaultViewMode?: CollectionViewMode;\n\n    /** Which view modes are available in the toggle */\n    enabledViews?: CollectionViewMode[];\n\n    /** Callback when view mode changes */\n    onViewModeChange?: (mode: CollectionViewMode) => void;\n\n    // ── Size ──────────────────────────────────────────────────────────\n\n    /** Controlled size. If omitted, internal state is used. */\n    size?: CollectionViewSize;\n\n    /** Default size. Default: \"m\" */\n    defaultSize?: CollectionViewSize;\n\n    /** Callback when size changes */\n    onSizeChange?: (size: CollectionViewSize) => void;\n\n    // ── Kanban ─────────────────────────────────────────────────────────\n\n    /** Property key for kanban column grouping */\n    kanbanProperty?: string;\n\n    /** Available kanban property options (shown in view toggle) */\n    kanbanPropertyOptions?: KanbanPropertyOption[];\n\n    /** Callback when kanban column property changes */\n    onKanbanPropertyChange?: (property: string) => void;\n\n    // ── Interactions ──────────────────────────────────────────────────\n\n    /** Called when a row is clicked */\n    onRowClick?: (row: T) => void;\n\n    /** Called when the \"create\" button is clicked */\n    onRowCreate?: (defaults?: Record<string, unknown>) => void;\n\n    /** Whether creation is allowed (shows the + button) */\n    canCreate?: boolean;\n\n    // ── Selection ─────────────────────────────────────────────────────\n\n    /** Enable row selection checkboxes */\n    selectionEnabled?: boolean;\n\n    /** Selection controller */\n    selectionController?: CollectionSelectionController<T>;\n\n    /** Highlighted items (e.g. recently clicked) */\n    highlightedItems?: T[];\n\n    /** Callback for bulk delete */\n    onMultipleDelete?: (rows: T[]) => void;\n\n    // ── Custom rendering ──────────────────────────────────────────────\n\n    /**\n     * Custom cell renderer override. Return undefined to use default.\n     * This is how the connected wrapper injects PropertyPreview.\n     */\n    cellRenderer?: CellRendererOverride<T>;\n\n    /** Custom empty state component */\n    emptyComponent?: React.ReactNode;\n\n    /**\n     * Additional ways to render these rows, keyed by view mode. A key here can\n     * be named by `viewMode`, `defaultViewMode` and `enabledViews`, and gets\n     * its own entry in the view switcher.\n     *\n     * A custom view is another rendering of the *same* `dataController`, so it\n     * inherits the toolbar's search, the loading state and selection. A\n     * component that fetches its own data does not want to be a view mode —\n     * the toolbar above it would be describing a query it does not render.\n     *\n     * @example\n     * ```tsx\n     * <CollectionView\n     *     customViews={{ map: { name: \"Map\", Component: MapView } }}\n     *     enabledViews={[\"table\", \"map\"]}\n     *     defaultViewMode=\"map\"\n     * />\n     * ```\n     */\n    customViews?: Record<string, CollectionCustomViewEntry<T>>;\n\n    // ── Toolbar ───────────────────────────────────────────────────────\n\n    /** Actions rendered at the start (left) of the toolbar */\n    toolbarActionsStart?: React.ReactNode;\n\n    /** Actions rendered at the end (right) of the toolbar */\n    toolbarActionsEnd?: React.ReactNode;\n\n    /** Hide the built-in toolbar entirely */\n    hideToolbar?: boolean;\n\n    // ── Table-specific ────────────────────────────────────────────────\n\n    /** Enable row hover highlight in table view */\n    hoverRow?: boolean;\n\n    /** Callback when table columns are resized */\n    onColumnResize?: (params: { key: string; width: number }) => void;\n\n    /** Callback when table columns are reordered */\n    onColumnsOrderChange?: (keys: string[]) => void;\n\n    // ── Style ─────────────────────────────────────────────────────────\n\n    /** CSS class for the outer container */\n    className?: string;\n}\n\nconst DEFAULT_ENABLED_VIEWS: CollectionViewMode[] = [\"list\", \"table\", \"cards\", \"kanban\"];\n\n/**\n * A data-agnostic collection view component that orchestrates table, card,\n * list, and kanban views — driven entirely by props.\n *\n * Zero imports from any entity or data layer. This component lives in\n * `@rebasepro/ui` and can be used with any data source.\n *\n * @example\n * ```tsx\n * import { CollectionView } from \"@rebasepro/ui\";\n *\n * <CollectionView\n *     dataController={{ data: myRows, loading: false, noMoreToLoad: true }}\n *     properties={{\n *         name: { type: \"string\", name: \"Name\" },\n *         email: { type: \"string\", name: \"Email\" },\n *     }}\n *     title=\"Contacts\"\n *     onRowClick={(row) => openDetail(row.id)}\n * />\n * ```\n *\n * @group Collection View\n */\nexport function CollectionView<T extends Record<string, unknown> = Record<string, unknown>>({\n    dataController,\n    properties,\n    propertiesOrder,\n    displayedColumnIds,\n    idProperty = \"id\",\n    titleProperty,\n    title,\n    viewMode: viewModeProp,\n    defaultViewMode = \"list\",\n    enabledViews = DEFAULT_ENABLED_VIEWS,\n    onViewModeChange: onViewModeChangeProp,\n    size: sizeProp,\n    defaultSize = \"m\",\n    onSizeChange: onSizeChangeProp,\n    kanbanProperty: kanbanPropertyProp,\n    kanbanPropertyOptions,\n    onKanbanPropertyChange: onKanbanPropertyChangeProp,\n    onRowClick,\n    onRowCreate,\n    canCreate = true,\n    selectionEnabled,\n    selectionController,\n    highlightedItems,\n    onMultipleDelete,\n    cellRenderer,\n    emptyComponent,\n    customViews,\n    toolbarActionsStart,\n    toolbarActionsEnd,\n    hideToolbar,\n    hoverRow = true,\n    onColumnResize,\n    onColumnsOrderChange,\n    className\n}: CollectionViewProps<T>) {\n\n    // ── View mode state (uncontrolled with controlled override) ───────\n\n    const [internalViewMode, setInternalViewMode] = useState<CollectionViewMode>(defaultViewMode);\n    const viewMode = viewModeProp ?? internalViewMode;\n\n    const onViewModeChange = useCallback((mode: CollectionViewMode) => {\n        setInternalViewMode(mode);\n        onViewModeChangeProp?.(mode);\n    }, [onViewModeChangeProp]);\n\n    // ── Size state (uncontrolled with controlled override) ────────────\n\n    const [internalSize, setInternalSize] = useState<CollectionViewSize>(defaultSize);\n    const size = sizeProp ?? internalSize;\n\n    const onSizeChange = useCallback((s: CollectionViewSize) => {\n        setInternalSize(s);\n        onSizeChangeProp?.(s);\n    }, [onSizeChangeProp]);\n\n    // ── Kanban property state ─────────────────────────────────────────\n\n    const [internalKanbanProperty, setInternalKanbanProperty] = useState<string | undefined>(kanbanPropertyProp);\n    const kanbanProperty = kanbanPropertyProp ?? internalKanbanProperty;\n\n    const onKanbanPropertyChange = useCallback((property: string) => {\n        setInternalKanbanProperty(property);\n        onKanbanPropertyChangeProp?.(property);\n    }, [onKanbanPropertyChangeProp]);\n\n    // Auto-detect kanban property if not provided\n    const resolvedKanbanProperty = useMemo(() => {\n        if (kanbanProperty) return kanbanProperty;\n        // Find first enum property\n        const order = propertiesOrder ?? Object.keys(properties);\n        for (const key of order) {\n            const prop = properties[key];\n            if (prop && prop.type === \"string\" && prop.enum) {\n                return key;\n            }\n        }\n        return undefined;\n    }, [kanbanProperty, properties, propertiesOrder]);\n\n    // Build kanban property options from properties if not provided\n    const resolvedKanbanPropertyOptions = useMemo((): KanbanPropertyOption[] => {\n        if (kanbanPropertyOptions) return kanbanPropertyOptions;\n        const options: KanbanPropertyOption[] = [];\n        const order = propertiesOrder ?? Object.keys(properties);\n        for (const key of order) {\n            const prop = properties[key];\n            if (prop && prop.type === \"string\" && prop.enum) {\n                options.push({ key, label: prop.name });\n            }\n        }\n        return options;\n    }, [kanbanPropertyOptions, properties, propertiesOrder]);\n\n    // ── Render ────────────────────────────────────────────────────────\n\n    const sharedProps = {\n        dataController,\n        properties,\n        propertiesOrder,\n        idProperty,\n        titleProperty,\n        onRowClick,\n        cellRenderer,\n        selectionEnabled,\n        selectionController,\n        highlightedItems,\n        emptyComponent,\n    };\n\n    // Resolved once so both the switcher and the render path agree. A custom\n    // view keyed as a built-in is ignored rather than allowed to shadow it —\n    // the switch below checks the built-ins first, so honouring such a key\n    // here would put the switcher and the canvas out of step.\n    const customViewEntries = useMemo(() => {\n        if (!customViews) return [];\n        return Object.entries(customViews)\n            .filter(([key]) => !DEFAULT_ENABLED_VIEWS.includes(key))\n            .map(([key, entry]) => {\n                const isBare = typeof entry === \"function\";\n                return {\n                    key,\n                    name: isBare ? key : (entry.name ?? key),\n                    icon: isBare ? undefined : entry.icon,\n                    Component: isBare ? entry : entry.Component\n                };\n            });\n    }, [customViews]);\n\n    function renderView() {\n        const custom = customViewEntries.find((entry) => entry.key === viewMode);\n        if (custom) {\n            const { Component } = custom;\n            return (\n                <Component\n                    {...sharedProps}\n                    onRowCreate={canCreate ? onRowCreate : undefined}\n                    canCreate={canCreate}\n                    size={size}\n                />\n            );\n        }\n\n        switch (viewMode) {\n            case \"table\":\n                return (\n                    <CollectionTableView<T>\n                        {...sharedProps}\n                        displayedColumnIds={displayedColumnIds}\n                        size={size}\n                        hoverRow={hoverRow}\n                        onColumnResize={onColumnResize}\n                        onColumnsOrderChange={onColumnsOrderChange}\n                    />\n                );\n            case \"cards\":\n                return (\n                    <CollectionCardView<T>\n                        {...sharedProps}\n                        size={size}\n                    />\n                );\n            case \"kanban\":\n                return resolvedKanbanProperty ? (\n                    <CollectionKanbanView<T>\n                        {...sharedProps}\n                        kanbanProperty={resolvedKanbanProperty}\n                        // `canCreate` is documented as \"whether creation is\n                        // allowed (shows the + button)\" and was destructured\n                        // and read nowhere, so the button showed regardless.\n                        // The kanban view draws its add affordance exactly when\n                        // it has a callback, so withholding the callback is\n                        // what the prop means.\n                        onRowCreate={canCreate ? onRowCreate : undefined}\n                    />\n                ) : (\n                    <div className=\"flex items-center justify-center p-8\">\n                        <Typography variant=\"body2\" color=\"secondary\">\n                            No enum property available for kanban grouping.\n                        </Typography>\n                    </div>\n                );\n            case \"list\":\n            default:\n                return (\n                    <CollectionListView<T>\n                        {...sharedProps}\n                        size={size}\n                    />\n                );\n        }\n    }\n\n    return (\n        <div\n            className={cls(\n                \"overflow-hidden h-full w-full rounded-md flex flex-col\",\n                \"bg-surface-sheet\",\n                className\n            )}\n        >\n            {/* Error banner */}\n            {dataController.error && dataController.data.length > 0 && (\n                <div className=\"flex items-center gap-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 flex-shrink-0\">\n                    <Typography variant=\"body2\" className=\"text-red-700 dark:text-red-300 flex-1\">\n                        <strong>Warning:</strong> {dataController.error.message || \"Failed to update data.\"}\n                    </Typography>\n                </div>\n            )}\n\n            {/* Toolbar */}\n            {!hideToolbar && (\n                <CollectionViewToolbar\n                    viewMode={viewMode}\n                    onViewModeChange={enabledViews.length > 1 ? onViewModeChange : undefined}\n                    enabledViews={enabledViews}\n                    customViews={customViewEntries}\n                    size={size}\n                    onSizeChange={onSizeChange}\n                    searchString={dataController.searchString}\n                    onSearchChange={dataController.setSearchString}\n                    loading={dataController.loading}\n                    actionsStart={toolbarActionsStart}\n                    actionsEnd={toolbarActionsEnd}\n                    kanbanPropertyOptions={viewMode === \"kanban\" ? resolvedKanbanPropertyOptions : undefined}\n                    selectedKanbanProperty={resolvedKanbanProperty}\n                    onKanbanPropertyChange={onKanbanPropertyChange}\n                />\n            )}\n\n            {/* View */}\n            <div className=\"flex-1 overflow-hidden\">\n                {renderView()}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/views/CollectionView/CollectionViewToolbar.es.js

@@ -0,0 +1,155 @@
+"use client";
+import { cls } from "../../util/cls.es.js";
+import { iconSize } from "../../icons/Icon.es.js";
+import { Typography } from "../../components/Typography.es.js";
+import { IconButton } from "../../components/IconButton.es.js";
+import { SearchBar } from "../../components/SearchBar.es.js";
+import { Select, SelectItem } from "../../components/Select.es.js";
+import { Popover } from "../../components/Popover.es.js";
+import { ToggleButtonGroup } from "../../components/ToggleButtonGroup.es.js";
+import { useCallback, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Kanban, LayoutGrid, LayoutList, Settings2, Table2 } from "lucide-react";
+//#region src/views/CollectionView/CollectionViewToolbar.tsx
+var VIEW_MODE_ICONS = {
+	list: /* @__PURE__ */ jsx(LayoutList, { size: iconSize.small }),
+	table: /* @__PURE__ */ jsx(Table2, { size: iconSize.small }),
+	cards: /* @__PURE__ */ jsx(LayoutGrid, { size: iconSize.small }),
+	kanban: /* @__PURE__ */ jsx(Kanban, { size: iconSize.small })
+};
+var VIEW_MODE_LABELS = {
+	list: "List",
+	table: "Table",
+	cards: "Cards",
+	kanban: "Board"
+};
+var SIZE_LABELS = {
+	xs: "Extra Small",
+	s: "Small",
+	m: "Medium",
+	l: "Large",
+	xl: "Extra Large"
+};
+/**
+* Toolbar for the headless CollectionView.
+*
+* Renders a search bar, view mode toggle (popover with toggle button group),
+* optional size selector, optional kanban property selector, and action slots.
+*
+* @group Collection View
+*/
+function CollectionViewToolbar({ viewMode, onViewModeChange, enabledViews = [
+	"list",
+	"table",
+	"cards",
+	"kanban"
+], customViews, size = "m", onSizeChange, searchString, onSearchChange, loading, actionsStart, actionsEnd, compact, kanbanPropertyOptions, selectedKanbanProperty, onKanbanPropertyChange }) {
+	const [popoverOpen, setPopoverOpen] = useState(false);
+	const viewLabelId = useId();
+	const viewOptions = enabledViews.map((mode) => {
+		const custom = customViews?.find((entry) => entry.key === mode);
+		return {
+			value: mode,
+			label: VIEW_MODE_LABELS[mode] ?? custom?.name ?? mode,
+			icon: VIEW_MODE_ICONS[mode] ?? custom?.icon ?? /* @__PURE__ */ jsx(LayoutList, { size: iconSize.small })
+		};
+	});
+	const handleViewModeChange = useCallback((mode) => {
+		onViewModeChange?.(mode);
+	}, [onViewModeChange]);
+	const handleSizeChange = useCallback((value) => {
+		onSizeChange?.(value);
+	}, [onSizeChange]);
+	const handleKanbanPropertyChange = useCallback((value) => {
+		onKanbanPropertyChange?.(value);
+	}, [onKanbanPropertyChange]);
+	const showViewToggle = onViewModeChange && enabledViews.length > 1;
+	const showSizeSelector = onSizeChange && viewMode !== "kanban";
+	const showKanbanSelector = kanbanPropertyOptions && kanbanPropertyOptions.length > 0 && viewMode === "kanban" && onKanbanPropertyChange;
+	const showPopover = showViewToggle || showSizeSelector || showKanbanSelector;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("flex items-center gap-2 px-2 flex-shrink-0", "border-b border-hairline", compact ? "py-0.5 gap-1" : "py-1"),
+		children: [
+			actionsStart,
+			onSearchChange && /* @__PURE__ */ jsx(SearchBar, {
+				onTextSearch: onSearchChange,
+				size: "small",
+				initialValue: searchString,
+				loading,
+				expandable: true
+			}),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			actionsEnd,
+			showPopover && /* @__PURE__ */ jsx(Popover, {
+				open: popoverOpen,
+				onOpenChange: setPopoverOpen,
+				side: "bottom",
+				align: "end",
+				trigger: /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "View settings",
+					size: "small",
+					onClick: () => setPopoverOpen((prev) => !prev),
+					children: /* @__PURE__ */ jsx(Settings2, { size: iconSize.small })
+				}),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "p-3 min-w-[200px] flex flex-col gap-3",
+					children: [
+						showViewToggle && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								id: viewLabelId,
+								variant: "caption",
+								color: "secondary",
+								className: "font-medium uppercase tracking-wider",
+								children: "View"
+							}), /* @__PURE__ */ jsx(ToggleButtonGroup, {
+								"aria-labelledby": viewLabelId,
+								value: viewMode,
+								onValueChange: handleViewModeChange,
+								options: viewOptions
+							})]
+						}),
+						showSizeSelector && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "font-medium uppercase tracking-wider",
+								children: "Size"
+							}), /* @__PURE__ */ jsx(Select, {
+								value: size,
+								onValueChange: handleSizeChange,
+								size: "small",
+								children: Object.keys(SIZE_LABELS).map((sizeKey) => /* @__PURE__ */ jsx(SelectItem, {
+									value: sizeKey,
+									children: SIZE_LABELS[sizeKey]
+								}, sizeKey))
+							})]
+						}),
+						showKanbanSelector && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "font-medium uppercase tracking-wider",
+								children: "Group by"
+							}), /* @__PURE__ */ jsx(Select, {
+								value: selectedKanbanProperty,
+								onValueChange: handleKanbanPropertyChange,
+								size: "small",
+								children: kanbanPropertyOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+									value: option.key,
+									children: option.label
+								}, option.key))
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { CollectionViewToolbar };
+
+//# sourceMappingURL=CollectionViewToolbar.es.js.map

package/dist/views/CollectionView/CollectionViewToolbar.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionViewToolbar.es.js","names":[],"sources":["../../../src/views/CollectionView/CollectionViewToolbar.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useId, useState } from \"react\";\nimport { LayoutList, Table2, LayoutGrid, Kanban, Settings2 } from \"lucide-react\";\nimport { iconSize } from \"../../icons/Icon\";\nimport { SearchBar } from \"../../components/SearchBar\";\nimport { Popover } from \"../../components/Popover\";\nimport { ToggleButtonGroup } from \"../../components/ToggleButtonGroup\";\nimport type { ToggleButtonOption } from \"../../components/ToggleButtonGroup\";\nimport { Typography } from \"../../components/Typography\";\nimport { Select, SelectItem } from \"../../components/Select\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { cls } from \"../../util\";\nimport type { CollectionViewMode, CollectionViewSize, KanbanPropertyOption } from \"./CollectionViewTypes\";\n\n/**\n * Props for the {@link CollectionViewToolbar} component.\n * @group Collection View\n */\nexport type CollectionViewToolbarProps = {\n    viewMode: CollectionViewMode;\n    onViewModeChange?: (mode: CollectionViewMode) => void;\n    enabledViews?: CollectionViewMode[];\n    /**\n     * Custom view modes, supplying the label and icon for their switcher\n     * entries. Without these an `enabledViews` key outside the four built-ins\n     * has no label and no icon to draw.\n     */\n    customViews?: { key: string, name: string, icon?: React.ReactNode }[];\n    size?: CollectionViewSize;\n    onSizeChange?: (size: CollectionViewSize) => void;\n    searchString?: string;\n    onSearchChange?: (search?: string) => void;\n    loading?: boolean;\n    actionsStart?: React.ReactNode;\n    actionsEnd?: React.ReactNode;\n    compact?: boolean;\n    kanbanPropertyOptions?: KanbanPropertyOption[];\n    selectedKanbanProperty?: string;\n    onKanbanPropertyChange?: (property: string) => void;\n};\n\nconst VIEW_MODE_ICONS: Record<string, React.ReactNode> = {\n    list: <LayoutList size={iconSize.small} />,\n    table: <Table2 size={iconSize.small} />,\n    cards: <LayoutGrid size={iconSize.small} />,\n    kanban: <Kanban size={iconSize.small} />,\n};\n\nconst VIEW_MODE_LABELS: Record<string, string> = {\n    list: \"List\",\n    table: \"Table\",\n    cards: \"Cards\",\n    kanban: \"Board\",\n};\n\nconst SIZE_LABELS: Record<CollectionViewSize, string> = {\n    xs: \"Extra Small\",\n    s: \"Small\",\n    m: \"Medium\",\n    l: \"Large\",\n    xl: \"Extra Large\",\n};\n\n/**\n * Toolbar for the headless CollectionView.\n *\n * Renders a search bar, view mode toggle (popover with toggle button group),\n * optional size selector, optional kanban property selector, and action slots.\n *\n * @group Collection View\n */\nexport function CollectionViewToolbar({\n    viewMode,\n    onViewModeChange,\n    enabledViews = [\"list\", \"table\", \"cards\", \"kanban\"],\n    customViews,\n    size = \"m\",\n    onSizeChange,\n    searchString,\n    onSearchChange,\n    loading,\n    actionsStart,\n    actionsEnd,\n    compact,\n    kanbanPropertyOptions,\n    selectedKanbanProperty,\n    onKanbanPropertyChange,\n}: CollectionViewToolbarProps) {\n    const [popoverOpen, setPopoverOpen] = useState(false);\n    const viewLabelId = useId();\n\n    // A key outside the four built-ins takes its label and icon from the\n    // custom view that declared it; without one it falls back to the key\n    // itself and the list glyph, so an entry is never blank.\n    const viewOptions: ToggleButtonOption<CollectionViewMode>[] = enabledViews.map((mode) => {\n        const custom = customViews?.find((entry) => entry.key === mode);\n        return {\n            value: mode,\n            label: VIEW_MODE_LABELS[mode] ?? custom?.name ?? mode,\n            icon: VIEW_MODE_ICONS[mode] ?? custom?.icon ?? <LayoutList size={iconSize.small} />,\n        };\n    });\n\n    const handleViewModeChange = useCallback(\n        (mode: CollectionViewMode) => {\n            onViewModeChange?.(mode);\n        },\n        [onViewModeChange]\n    );\n\n    const handleSizeChange = useCallback(\n        (value: string) => {\n            onSizeChange?.(value as CollectionViewSize);\n        },\n        [onSizeChange]\n    );\n\n    const handleKanbanPropertyChange = useCallback(\n        (value: string) => {\n            onKanbanPropertyChange?.(value);\n        },\n        [onKanbanPropertyChange]\n    );\n\n    const showViewToggle = onViewModeChange && enabledViews.length > 1;\n    const showSizeSelector = onSizeChange && viewMode !== \"kanban\";\n    const showKanbanSelector =\n        kanbanPropertyOptions &&\n        kanbanPropertyOptions.length > 0 &&\n        viewMode === \"kanban\" &&\n        onKanbanPropertyChange;\n    const showPopover = showViewToggle || showSizeSelector || showKanbanSelector;\n\n    return (\n        <div\n            className={cls(\n                \"flex items-center gap-2 px-2 flex-shrink-0\",\n                \"border-b border-hairline\",\n                compact ? \"py-0.5 gap-1\" : \"py-1\"\n            )}\n        >\n            {actionsStart}\n\n            {onSearchChange && (\n                <SearchBar\n                    onTextSearch={onSearchChange}\n                    size=\"small\"\n                    initialValue={searchString}\n                    loading={loading}\n                    expandable\n                />\n            )}\n\n            <div className=\"flex-1\" />\n\n            {actionsEnd}\n\n            {showPopover && (\n                <Popover\n                    open={popoverOpen}\n                    onOpenChange={setPopoverOpen}\n                    side=\"bottom\"\n                    align=\"end\"\n                    trigger={\n                        <IconButton\n                            aria-label=\"View settings\"\n                            size=\"small\"\n                            onClick={() => setPopoverOpen((prev) => !prev)}\n                        >\n                            <Settings2 size={iconSize.small} />\n                        </IconButton>\n                    }\n                >\n                    <div className=\"p-3 min-w-[200px] flex flex-col gap-3\">\n                        {showViewToggle && (\n                            <div className=\"flex flex-col gap-1\">\n                                <Typography\n                                    id={viewLabelId}\n                                    variant=\"caption\"\n                                    color=\"secondary\"\n                                    className=\"font-medium uppercase tracking-wider\"\n                                >\n                                    View\n                                </Typography>\n                                <ToggleButtonGroup<CollectionViewMode>\n                                    aria-labelledby={viewLabelId}\n                                    value={viewMode}\n                                    onValueChange={handleViewModeChange}\n                                    options={viewOptions}\n                                />\n                            </div>\n                        )}\n\n                        {showSizeSelector && (\n                            <div className=\"flex flex-col gap-1\">\n                                <Typography\n                                    variant=\"caption\"\n                                    color=\"secondary\"\n                                    className=\"font-medium uppercase tracking-wider\"\n                                >\n                                    Size\n                                </Typography>\n                                <Select\n                                    value={size}\n                                    onValueChange={handleSizeChange}\n                                    size=\"small\"\n                                >\n                                    {(Object.keys(SIZE_LABELS) as CollectionViewSize[]).map(\n                                        (sizeKey) => (\n                                            <SelectItem key={sizeKey} value={sizeKey}>\n                                                {SIZE_LABELS[sizeKey]}\n                                            </SelectItem>\n                                        )\n                                    )}\n                                </Select>\n                            </div>\n                        )}\n\n                        {showKanbanSelector && (\n                            <div className=\"flex flex-col gap-1\">\n                                <Typography\n                                    variant=\"caption\"\n                                    color=\"secondary\"\n                                    className=\"font-medium uppercase tracking-wider\"\n                                >\n                                    Group by\n                                </Typography>\n                                <Select\n                                    value={selectedKanbanProperty}\n                                    onValueChange={handleKanbanPropertyChange}\n                                    size=\"small\"\n                                >\n                                    {kanbanPropertyOptions.map((option) => (\n                                        <SelectItem key={option.key} value={option.key}>\n                                            {option.label}\n                                        </SelectItem>\n                                    ))}\n                                </Select>\n                            </div>\n                        )}\n                    </div>\n                </Popover>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}