npm - @m5kdev/web-ui - Versions diffs - 0.8.6 → 0.8.8 - Mend

@m5kdev/web-ui 0.8.6 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (780) hide show

package/dist/src/modules/table/components/NuqsTable.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NuqsTable.mjs","names":["Button","Table","TableHeader","TableRow","TableBody","TableCell"],"sources":["../../../../../src/modules/table/components/NuqsTable.tsx"],"sourcesContent":["import { Checkbox, Popover, PopoverContent, PopoverTrigger } from \"@heroui/react\";\r\nimport type { QueryFilters } from \"@m5kdev/commons/modules/schemas/query.schema\";\r\nimport type { FilterMethods } from \"@m5kdev/commons/modules/table/filter.types\";\r\nimport type { TableParams } from \"@m5kdev/frontend/modules/table/hooks/useNuqsTable\";\r\nimport type { ColumnDef } from \"@tanstack/react-table\";\r\nimport {\r\n type ColumnOrderState,\r\n type ExpandedState,\r\n flexRender,\r\n getCoreRowModel,\r\n getExpandedRowModel,\r\n getGroupedRowModel,\r\n getPaginationRowModel,\r\n type Table as ReactTable,\r\n useReactTable,\r\n type VisibilityState,\r\n} from \"@tanstack/react-table\";\r\nimport { ChevronDown, ChevronRight, ChevronUp } from \"lucide-react\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport {\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableHead,\r\n TableHeader,\r\n TableRow,\r\n} from \"../../../components/ui/table\";\r\nimport { ColumnOrderAndVisibility } from \"./ColumnOrderAndVisibility\";\r\nimport { TableFiltering } from \"./TableFiltering\";\r\nimport { TableGroupBy } from \"./TableGroupBy\";\r\nimport { TablePagination } from \"./TablePagination\";\r\nimport type { ColumnDataType, ColumnItem } from \"./table.types\";\r\n\r\nfunction getStorageKey(columnIds: string[]): string {\r\n const sortedIds = [...columnIds].sort().join(\",\");\r\n return `table-column-layout-${sortedIds}`;\r\n}\r\n\r\nfunction loadLayoutFromStorage(\r\n columnIds: string[]\r\n): { order: string[]; visibility: Record<string, boolean> } \| null {\r\n if (typeof window === \"undefined\") return null;\r\n try {\r\n const key = getStorageKey(columnIds);\r\n const stored = localStorage.getItem(key);\r\n if (!stored) return null;\r\n const parsed = JSON.parse(stored) as { order: string[]; visibility: Record<string, boolean> };\r\n return parsed;\r\n } catch {\r\n return null;\r\n }\r\n}\r\n\r\nfunction saveLayoutToStorage(\r\n columnIds: string[],\r\n order: string[],\r\n visibility: Record<string, boolean>\r\n): void {\r\n if (typeof window === \"undefined\") return;\r\n try {\r\n const key = getStorageKey(columnIds);\r\n localStorage.setItem(key, JSON.stringify({ order, visibility }));\r\n } catch {\r\n // Ignore storage errors\r\n }\r\n}\r\n\r\nexport type NuqsTableColumn<T> = ColumnDef<T> & {\r\n visible?: boolean;\r\n type?: ColumnDataType;\r\n options?: { label: string; value: string }[];\r\n endColumnId?: string;\r\n groupable?: boolean;\r\n};\r\n\r\ntype NuqsTableParams<T> = {\r\n data: T[];\r\n total?: number;\r\n columns: NuqsTableColumn<T>[];\r\n tableProps: TableParams;\r\n singleFilter?: boolean;\r\n filterMethods?: Partial<FilterMethods>;\r\n};\r\n\r\nfunction applyOrder(prev: ColumnItem[], nextOrder: string[]): ColumnItem[] {\r\n const byId = new Map(prev.map((i) => [i.id, i]));\r\n const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean) as ColumnItem[];\r\n // append any newly added columns (if any appear later)\r\n for (const item of prev) if (!nextOrder.includes(item.id)) ordered.push(item);\r\n return ordered;\r\n}\r\n\r\nfunction applyVisibility(prev: ColumnItem[], visibility: VisibilityState): ColumnItem[] {\r\n return prev.map((column) => ({\r\n ...column,\r\n visibility: visibility[String(column.id)] ?? column.visibility,\r\n }));\r\n}\r\n\r\nexport const NuqsTable = <T,>({\r\n data,\r\n total,\r\n columns,\r\n tableProps,\r\n singleFilter = false,\r\n filterMethods,\r\n}: NuqsTableParams<T>) => {\r\n const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);\r\n console.log(\"data\", data);\r\n // const columnsWithId = useMemo(() => {\r\n // const idColumn: NuqsTableColumn<T> = {\r\n // id: \"__row_id\",\r\n // accessorKey: \"id\",\r\n // header: \"\",\r\n // enableSorting: false,\r\n // enableHiding: false,\r\n // visible: false,\r\n // };\r\n // return [idColumn, ...columns];\r\n // }, [columns]);\r\n\r\n const initialLayout = useMemo(() => {\r\n const defaultLayout = columns.map((column) => ({\r\n id: String(column.id),\r\n label: column.header as string,\r\n visibility: column.visible !== undefined ? column.visible : true,\r\n options: column.options ?? [],\r\n type: column.type ?? undefined,\r\n }));\r\n\r\n const saved = loadLayoutFromStorage(columnIds);\r\n if (!saved) return defaultLayout;\r\n\r\n // Merge saved layout with default layout\r\n const savedById = new Map<string, { order: number; visibility: boolean }>();\r\n saved.order.forEach((id, index) => {\r\n savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });\r\n });\r\n\r\n const merged: ColumnItem[] = [];\r\n const processedIds = new Set<string>();\r\n\r\n // Add columns in saved order\r\n saved.order.forEach((id) => {\r\n const defaultCol = defaultLayout.find((col) => col.id === id);\r\n if (defaultCol) {\r\n merged.push({\r\n ...defaultCol,\r\n visibility: saved.visibility[id] ?? defaultCol.visibility,\r\n });\r\n processedIds.add(id);\r\n }\r\n });\r\n\r\n // Add any new columns that weren't in saved layout\r\n defaultLayout.forEach((col) => {\r\n if (!processedIds.has(col.id)) {\r\n merged.push(col);\r\n }\r\n });\r\n\r\n return merged;\r\n }, [columns, columnIds]);\r\n\r\n const [layout, setLayout] = useState<ColumnItem[]>(initialLayout);\r\n\r\n // Sync layout when columns change\r\n useEffect(() => {\r\n setLayout(initialLayout);\r\n }, [initialLayout]);\r\n\r\n // Save to localStorage whenever layout changes\r\n useEffect(() => {\r\n const order = layout.map((col) => col.id);\r\n const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));\r\n saveLayoutToStorage(columnIds, order, visibility);\r\n }, [layout, columnIds]);\r\n\r\n const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);\r\n const columnVisibility = useMemo(\r\n () => Object.fromEntries(layout.map((column) => [column.id, column.visibility])),\r\n [layout]\r\n );\r\n\r\n const {\r\n limit = 10,\r\n page = 1,\r\n sorting,\r\n setSorting,\r\n setPagination,\r\n pagination,\r\n rowSelection,\r\n setRowSelection,\r\n setFilters,\r\n filters,\r\n grouping,\r\n setGrouping,\r\n } = tableProps;\r\n\r\n const isGrouped = grouping.length > 0;\r\n const [expanded, setExpanded] = useState<ExpandedState>({});\r\n\r\n // Redirect back if we're on an empty page (past the last page)\r\n useEffect(() => {\r\n if (!isGrouped && data.length === 0 && page > 1 && total !== undefined) {\r\n setPagination?.({ pageIndex: page - 2, pageSize: limit });\r\n }\r\n }, [data.length, page, limit, total, setPagination, isGrouped]);\r\n\r\n // When grouped, TanStack handles pagination client-side; otherwise use server total\r\n const serverPageCount =\r\n total !== undefined\r\n ? Math.ceil(total / limit) \|\| 1\r\n : data.length === limit\r\n ? page + 1\r\n : Math.max(page, Math.ceil(data.length / limit));\r\n\r\n const table = useReactTable({\r\n data,\r\n columns,\r\n getRowId: (row) => String((row as { id: string \| number }).id),\r\n manualSorting: true,\r\n manualPagination: !isGrouped,\r\n state: { pagination, sorting, rowSelection, columnOrder, columnVisibility, grouping, expanded },\r\n ...(isGrouped ? {} : { pageCount: serverPageCount }),\r\n manualFiltering: true,\r\n enableGrouping: true,\r\n groupedColumnMode: false,\r\n autoResetExpanded: false,\r\n onSortingChange: setSorting,\r\n onPaginationChange: setPagination,\r\n onRowSelectionChange: setRowSelection,\r\n onGroupingChange: setGrouping,\r\n onExpandedChange: setExpanded,\r\n getCoreRowModel: getCoreRowModel(),\r\n getGroupedRowModel: getGroupedRowModel(),\r\n getExpandedRowModel: getExpandedRowModel(),\r\n getPaginationRowModel: getPaginationRowModel(),\r\n onColumnOrderChange: (updater) => {\r\n setLayout((prev) =>\r\n applyOrder(prev, typeof updater === \"function\" ? updater(prev.map((i) => i.id)) : updater)\r\n );\r\n },\r\n onColumnVisibilityChange: (updater) => {\r\n setLayout((prev) =>\r\n applyVisibility(\r\n prev,\r\n typeof updater === \"function\"\r\n ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))\r\n : updater\r\n )\r\n );\r\n },\r\n }) as ReactTable<T>;\r\n\r\n const onChangeOrder = (order: ColumnOrderState) => {\r\n setLayout((prev) => applyOrder(prev, order));\r\n };\r\n const onChangeVisibility = (visibility: VisibilityState) => {\r\n setLayout((prev) => applyVisibility(prev, visibility));\r\n };\r\n\r\n const onFiltersChange = (filters: QueryFilters) => {\r\n setFilters?.(filters);\r\n };\r\n\r\n const filterableColumns = useMemo(() => {\r\n const baseColumns = columns\r\n .filter((column) => Boolean(column.type))\r\n .map((column) => ({\r\n id: String(column.id),\r\n label: String(column.header),\r\n type: column.type,\r\n options: column.options ?? [],\r\n endColumnId: column.endColumnId,\r\n periodStartColumnId: null,\r\n periodEndColumnId: null,\r\n }));\r\n\r\n // Add Period pseudo-columns for date columns with endColumnId\r\n const periodColumns = columns\r\n .filter((column) => column.type === \"date\" && column.endColumnId)\r\n .map((column) => ({\r\n id: `${String(column.id)}__period`,\r\n label: \"Period\",\r\n type: \"date\" as ColumnDataType,\r\n options: [],\r\n endColumnId: null,\r\n periodStartColumnId: String(column.id),\r\n periodEndColumnId: column.endColumnId,\r\n }));\r\n\r\n return [...baseColumns, ...periodColumns];\r\n }, [columns]);\r\n\r\n const groupableColumns = useMemo(\r\n () =>\r\n columns\r\n .filter((col) => col.groupable)\r\n .map((col) => ({ id: String(col.id), label: String(col.header) })),\r\n [columns]\r\n );\r\n\r\n const hasGrouping = grouping.length > 0;\r\n\r\n const [isFiltersOpen, setIsFiltersOpen] = useState(false);\r\n const [isColumnsOpen, setIsColumnsOpen] = useState(false);\r\n const [isGroupByOpen, setIsGroupByOpen] = useState(false);\r\n\r\n return (\r\n <>\r\n <div className=\"flex w-full items-center gap-2 justify-end\">\r\n <Popover\r\n placement=\"bottom\"\r\n isOpen={isFiltersOpen}\r\n onOpenChange={setIsFiltersOpen}\r\n portalContainer={document.body}\r\n >\r\n <PopoverTrigger>\r\n <Button variant=\"outline\" size=\"sm\">\r\n <div className=\"flex items-center gap-2\">\r\n Filters\r\n <ChevronDown className=\"h-4 w-4\" />\r\n </div>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent>\r\n <TableFiltering\r\n columns={filterableColumns}\r\n onFiltersChange={onFiltersChange}\r\n filters={filters ?? []}\r\n onClose={() => setIsFiltersOpen(false)}\r\n singleFilter={singleFilter}\r\n filterMethods={filterMethods}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n {groupableColumns.length > 0 && (\r\n <Popover\r\n placement=\"bottom\"\r\n isOpen={isGroupByOpen}\r\n onOpenChange={setIsGroupByOpen}\r\n portalContainer={document.body}\r\n >\r\n <PopoverTrigger>\r\n <Button variant={hasGrouping ? \"secondary\" : \"outline\"} size=\"sm\">\r\n <div className=\"flex items-center gap-2\">\r\n {hasGrouping\r\n ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(\" → \")}`\r\n : \"Group by\"}\r\n <ChevronDown className=\"h-4 w-4\" />\r\n </div>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent>\r\n <TableGroupBy\r\n columns={groupableColumns}\r\n activeGrouping={grouping}\r\n onGroupingChange={(columnIds) => {\r\n setGrouping(columnIds);\r\n setExpanded({});\r\n setPagination?.({ pageIndex: 0, pageSize: limit });\r\n }}\r\n onClose={() => setIsGroupByOpen(false)}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n )}\r\n <Popover\r\n placement=\"bottom\"\r\n isOpen={isColumnsOpen}\r\n onOpenChange={setIsColumnsOpen}\r\n portalContainer={document.body}\r\n >\r\n <PopoverTrigger>\r\n <Button variant=\"outline\" size=\"sm\">\r\n <div className=\"flex items-center gap-2\">\r\n Columns\r\n <ChevronDown className=\"h-4 w-4\" />\r\n </div>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent>\r\n <ColumnOrderAndVisibility\r\n layout={layout}\r\n onChangeOrder={onChangeOrder}\r\n onChangeVisibility={onChangeVisibility}\r\n onClose={() => setIsColumnsOpen(false)}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n </div>\r\n <Table>\r\n <TableHeader>\r\n <TableRow>\r\n <TableHead>\r\n <Checkbox\r\n isSelected={table.getIsAllRowsSelected()}\r\n onValueChange={(checked) => {\r\n table.toggleAllRowsSelected(checked);\r\n }}\r\n />\r\n </TableHead>\r\n {table.getHeaderGroups()[0].headers.map((header) => (\r\n <TableHead\r\n onClick={\r\n header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined\r\n }\r\n key={header.id}\r\n >\r\n {flexRender(header.column.columnDef.header, header.getContext())}\r\n {header.column.getCanSort() && (\r\n <>\r\n {header.column.getIsSorted() === \"asc\" && (\r\n <ChevronUp className=\"h-4 w-4 inline ml-1\" />\r\n )}\r\n {header.column.getIsSorted() === \"desc\" && (\r\n <ChevronDown className=\"h-4 w-4 inline ml-1\" />\r\n )}\r\n </>\r\n )}\r\n </TableHead>\r\n ))}\r\n </TableRow>\r\n </TableHeader>\r\n <TableBody>\r\n {table.getRowModel().rows.map((row) => {\r\n if (row.getIsGrouped()) {\r\n return (\r\n <TableRow\r\n key={row.id}\r\n className=\"bg-muted/40 font-medium cursor-pointer hover:bg-muted/60\"\r\n onClick={() => row.toggleExpanded()}\r\n >\r\n <TableCell />\r\n {row.getVisibleCells().map((cell) => {\r\n if (cell.getIsGrouped()) {\r\n return (\r\n <TableCell key={cell.id}>\r\n <span className=\"flex items-center gap-1.5\">\r\n {row.getIsExpanded() ? (\r\n <ChevronDown className=\"h-4 w-4 shrink-0\" />\r\n ) : (\r\n <ChevronRight className=\"h-4 w-4 shrink-0\" />\r\n )}\r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n <span className=\"text-muted-foreground font-normal ml-1\">\r\n ({row.subRows.length})\r\n </span>\r\n </span>\r\n </TableCell>\r\n );\r\n }\r\n if (cell.getIsAggregated()) {\r\n return (\r\n <TableCell key={cell.id}>\r\n {flexRender(\r\n cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,\r\n cell.getContext()\r\n )}\r\n </TableCell>\r\n );\r\n }\r\n return <TableCell key={cell.id} />;\r\n })}\r\n </TableRow>\r\n );\r\n }\r\n\r\n return (\r\n <TableRow key={row.id}>\r\n <TableCell>\r\n <Checkbox\r\n isSelected={row.getIsSelected()}\r\n onValueChange={(checked) => {\r\n row.toggleSelected(checked);\r\n }}\r\n />\r\n </TableCell>\r\n {row.getVisibleCells().map((cell) => (\r\n <TableCell key={cell.id}>\r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n </TableCell>\r\n ))}\r\n </TableRow>\r\n );\r\n })}\r\n </TableBody>\r\n </Table>\r\n <TablePagination\r\n pageCount={\r\n isGrouped\r\n ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) \|\| 1\r\n : serverPageCount\r\n }\r\n page={isGrouped ? table.getState().pagination.pageIndex + 1 : page}\r\n limit={limit}\r\n setPagination={setPagination}\r\n />\r\n </>\r\n );\r\n};\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"NuqsTable.mjs","names":["Button","Table","TableHeader","TableRow","TableBody","TableCell"],"sources":["../../../../../src/modules/table/components/NuqsTable.tsx"],"sourcesContent":["import { Checkbox, Input, Popover, PopoverContent, PopoverTrigger } from \"@heroui/react\";\r\nimport type { QueryFilters } from \"@m5kdev/commons/modules/schemas/query.schema\";\r\nimport type { FilterMethods } from \"@m5kdev/commons/modules/table/filter.types\";\r\nimport type { TableParams } from \"@m5kdev/frontend/modules/table/hooks/useNuqsTable\";\r\nimport type { ColumnDef } from \"@tanstack/react-table\";\r\nimport {\r\n type ColumnOrderState,\r\n type ExpandedState,\r\n flexRender,\r\n getCoreRowModel,\r\n getExpandedRowModel,\r\n getGroupedRowModel,\r\n getPaginationRowModel,\r\n type Table as ReactTable,\r\n useReactTable,\r\n type VisibilityState,\r\n} from \"@tanstack/react-table\";\r\nimport { ChevronDown, ChevronRight, ChevronUp, Search } from \"lucide-react\";\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport {\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableHead,\r\n TableHeader,\r\n TableRow,\r\n} from \"../../../components/ui/table\";\r\nimport { ColumnOrderAndVisibility } from \"./ColumnOrderAndVisibility\";\r\nimport { TableFiltering } from \"./TableFiltering\";\r\nimport { TableGroupBy } from \"./TableGroupBy\";\r\nimport { TablePagination } from \"./TablePagination\";\r\nimport type { ColumnDataType, ColumnItem } from \"./table.types\";\r\n\r\nfunction getStorageKey(columnIds: string[]): string {\r\n const sortedIds = [...columnIds].sort().join(\",\");\r\n return `table-column-layout-${sortedIds}`;\r\n}\r\n\r\nfunction loadLayoutFromStorage(\r\n columnIds: string[]\r\n): { order: string[]; visibility: Record<string, boolean> } \| null {\r\n if (typeof window === \"undefined\") return null;\r\n try {\r\n const key = getStorageKey(columnIds);\r\n const stored = localStorage.getItem(key);\r\n if (!stored) return null;\r\n const parsed = JSON.parse(stored) as { order: string[]; visibility: Record<string, boolean> };\r\n return parsed;\r\n } catch {\r\n return null;\r\n }\r\n}\r\n\r\nfunction saveLayoutToStorage(\r\n columnIds: string[],\r\n order: string[],\r\n visibility: Record<string, boolean>\r\n): void {\r\n if (typeof window === \"undefined\") return;\r\n try {\r\n const key = getStorageKey(columnIds);\r\n localStorage.setItem(key, JSON.stringify({ order, visibility }));\r\n } catch {\r\n // Ignore storage errors\r\n }\r\n}\r\n\r\nexport type NuqsTableColumn<T> = ColumnDef<T> & {\r\n visible?: boolean;\r\n type?: ColumnDataType;\r\n options?: { label: string; value: string }[];\r\n endColumnId?: string;\r\n groupable?: boolean;\r\n};\r\n\r\ntype NuqsTableParams<T> = {\r\n data: T[];\r\n total?: number;\r\n columns: NuqsTableColumn<T>[];\r\n tableProps: TableParams;\r\n /** When true, shows URL-synced global search; enable only if the list API applies `q` server-side. */\r\n showGlobalSearch?: boolean;\r\n singleFilter?: boolean;\r\n filterMethods?: Partial<FilterMethods>;\r\n};\r\n\r\nfunction applyOrder(prev: ColumnItem[], nextOrder: string[]): ColumnItem[] {\r\n const byId = new Map(prev.map((i) => [i.id, i]));\r\n const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean) as ColumnItem[];\r\n // append any newly added columns (if any appear later)\r\n for (const item of prev) if (!nextOrder.includes(item.id)) ordered.push(item);\r\n return ordered;\r\n}\r\n\r\nfunction applyVisibility(prev: ColumnItem[], visibility: VisibilityState): ColumnItem[] {\r\n return prev.map((column) => ({\r\n ...column,\r\n visibility: visibility[String(column.id)] ?? column.visibility,\r\n }));\r\n}\r\n\r\nexport const NuqsTable = <T,>({\r\n data,\r\n total,\r\n columns,\r\n tableProps,\r\n showGlobalSearch = false,\r\n singleFilter = false,\r\n filterMethods,\r\n}: NuqsTableParams<T>) => {\r\n const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);\r\n // const columnsWithId = useMemo(() => {\r\n // const idColumn: NuqsTableColumn<T> = {\r\n // id: \"__row_id\",\r\n // accessorKey: \"id\",\r\n // header: \"\",\r\n // enableSorting: false,\r\n // enableHiding: false,\r\n // visible: false,\r\n // };\r\n // return [idColumn, ...columns];\r\n // }, [columns]);\r\n\r\n const initialLayout = useMemo(() => {\r\n const defaultLayout = columns.map((column) => ({\r\n id: String(column.id),\r\n label: column.header as string,\r\n visibility: column.visible !== undefined ? column.visible : true,\r\n options: column.options ?? [],\r\n type: column.type ?? undefined,\r\n }));\r\n\r\n const saved = loadLayoutFromStorage(columnIds);\r\n if (!saved) return defaultLayout;\r\n\r\n // Merge saved layout with default layout\r\n const savedById = new Map<string, { order: number; visibility: boolean }>();\r\n saved.order.forEach((id, index) => {\r\n savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });\r\n });\r\n\r\n const merged: ColumnItem[] = [];\r\n const processedIds = new Set<string>();\r\n\r\n // Add columns in saved order\r\n saved.order.forEach((id) => {\r\n const defaultCol = defaultLayout.find((col) => col.id === id);\r\n if (defaultCol) {\r\n merged.push({\r\n ...defaultCol,\r\n visibility: saved.visibility[id] ?? defaultCol.visibility,\r\n });\r\n processedIds.add(id);\r\n }\r\n });\r\n\r\n // Add any new columns that weren't in saved layout\r\n defaultLayout.forEach((col) => {\r\n if (!processedIds.has(col.id)) {\r\n merged.push(col);\r\n }\r\n });\r\n\r\n return merged;\r\n }, [columns, columnIds]);\r\n\r\n const [layout, setLayout] = useState<ColumnItem[]>(initialLayout);\r\n\r\n // Sync layout when columns change\r\n useEffect(() => {\r\n setLayout(initialLayout);\r\n }, [initialLayout]);\r\n\r\n // Save to localStorage whenever layout changes\r\n useEffect(() => {\r\n const order = layout.map((col) => col.id);\r\n const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));\r\n saveLayoutToStorage(columnIds, order, visibility);\r\n }, [layout, columnIds]);\r\n\r\n const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);\r\n const columnVisibility = useMemo(\r\n () => Object.fromEntries(layout.map((column) => [column.id, column.visibility])),\r\n [layout]\r\n );\r\n\r\n const {\r\n limit = 10,\r\n page = 1,\r\n sorting,\r\n setSorting,\r\n setPagination,\r\n pagination,\r\n rowSelection,\r\n setRowSelection,\r\n setFilters,\r\n filters,\r\n grouping,\r\n setGrouping,\r\n q,\r\n setQ,\r\n } = tableProps;\r\n\r\n const skipFirstGlobalSearchPageReset = useRef(true);\r\n // biome-ignore lint/correctness/useExhaustiveDependencies: reset page when `q` changes (incl. back/forward)\r\n useEffect(() => {\r\n if (!showGlobalSearch) return;\r\n if (skipFirstGlobalSearchPageReset.current) {\r\n skipFirstGlobalSearchPageReset.current = false;\r\n return;\r\n }\r\n setPagination?.({ pageIndex: 0, pageSize: limit });\r\n }, [showGlobalSearch, q, limit, setPagination]);\r\n\r\n const isGrouped = grouping.length > 0;\r\n const [expanded, setExpanded] = useState<ExpandedState>({});\r\n\r\n // Redirect back if we're on an empty page (past the last page)\r\n useEffect(() => {\r\n if (!isGrouped && data.length === 0 && page > 1 && total !== undefined) {\r\n setPagination?.({ pageIndex: page - 2, pageSize: limit });\r\n }\r\n }, [data.length, page, limit, total, setPagination, isGrouped]);\r\n\r\n // When grouped, TanStack handles pagination client-side; otherwise use server total\r\n const serverPageCount =\r\n total !== undefined\r\n ? Math.ceil(total / limit) \|\| 1\r\n : data.length === limit\r\n ? page + 1\r\n : Math.max(page, Math.ceil(data.length / limit));\r\n\r\n const table = useReactTable({\r\n data,\r\n columns,\r\n getRowId: (row) => String((row as { id: string \| number }).id),\r\n manualSorting: true,\r\n manualPagination: !isGrouped,\r\n state: { pagination, sorting, rowSelection, columnOrder, columnVisibility, grouping, expanded },\r\n ...(isGrouped ? {} : { pageCount: serverPageCount }),\r\n manualFiltering: true,\r\n enableGrouping: true,\r\n groupedColumnMode: false,\r\n autoResetExpanded: false,\r\n onSortingChange: setSorting,\r\n onPaginationChange: setPagination,\r\n onRowSelectionChange: setRowSelection,\r\n onGroupingChange: setGrouping,\r\n onExpandedChange: setExpanded,\r\n getCoreRowModel: getCoreRowModel(),\r\n getGroupedRowModel: getGroupedRowModel(),\r\n getExpandedRowModel: getExpandedRowModel(),\r\n getPaginationRowModel: getPaginationRowModel(),\r\n onColumnOrderChange: (updater) => {\r\n setLayout((prev) =>\r\n applyOrder(prev, typeof updater === \"function\" ? updater(prev.map((i) => i.id)) : updater)\r\n );\r\n },\r\n onColumnVisibilityChange: (updater) => {\r\n setLayout((prev) =>\r\n applyVisibility(\r\n prev,\r\n typeof updater === \"function\"\r\n ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))\r\n : updater\r\n )\r\n );\r\n },\r\n }) as ReactTable<T>;\r\n\r\n const onChangeOrder = (order: ColumnOrderState) => {\r\n setLayout((prev) => applyOrder(prev, order));\r\n };\r\n const onChangeVisibility = (visibility: VisibilityState) => {\r\n setLayout((prev) => applyVisibility(prev, visibility));\r\n };\r\n\r\n const onFiltersChange = (filters: QueryFilters) => {\r\n setFilters?.(filters);\r\n };\r\n\r\n const filterableColumns = useMemo(() => {\r\n const baseColumns = columns\r\n .filter((column) => Boolean(column.type))\r\n .map((column) => ({\r\n id: String(column.id),\r\n label: String(column.header),\r\n type: column.type,\r\n options: column.options ?? [],\r\n endColumnId: column.endColumnId,\r\n periodStartColumnId: null,\r\n periodEndColumnId: null,\r\n }));\r\n\r\n // Add Period pseudo-columns for date columns with endColumnId\r\n const periodColumns = columns\r\n .filter((column) => column.type === \"date\" && column.endColumnId)\r\n .map((column) => ({\r\n id: `${String(column.id)}__period`,\r\n label: \"Period\",\r\n type: \"date\" as ColumnDataType,\r\n options: [],\r\n endColumnId: null,\r\n periodStartColumnId: String(column.id),\r\n periodEndColumnId: column.endColumnId,\r\n }));\r\n\r\n return [...baseColumns, ...periodColumns];\r\n }, [columns]);\r\n\r\n const groupableColumns = useMemo(\r\n () =>\r\n columns\r\n .filter((col) => col.groupable)\r\n .map((col) => ({ id: String(col.id), label: String(col.header) })),\r\n [columns]\r\n );\r\n\r\n const hasGrouping = grouping.length > 0;\r\n\r\n const [isFiltersOpen, setIsFiltersOpen] = useState(false);\r\n const [isColumnsOpen, setIsColumnsOpen] = useState(false);\r\n const [isGroupByOpen, setIsGroupByOpen] = useState(false);\r\n\r\n return (\r\n <>\r\n <div className=\"flex w-full flex-wrap items-center justify-between gap-2\">\r\n <div className=\"flex min-w-0 flex-1 items-center\">\r\n {showGlobalSearch ? (\r\n <Input\r\n size=\"sm\"\r\n className=\"max-w-xs\"\r\n placeholder=\"Search…\"\r\n value={q ?? \"\"}\r\n onValueChange={(v) => {\r\n setQ?.(v === \"\" ? null : v);\r\n }}\r\n startContent={<Search className=\"h-4 w-4 shrink-0 text-default-400\" aria-hidden />}\r\n aria-label=\"Search table\"\r\n />\r\n ) : null}\r\n </div>\r\n <div className=\"flex shrink-0 items-center gap-2\">\r\n <Popover\r\n placement=\"bottom\"\r\n isOpen={isFiltersOpen}\r\n onOpenChange={setIsFiltersOpen}\r\n portalContainer={document.body}\r\n >\r\n <PopoverTrigger>\r\n <Button variant=\"outline\" size=\"sm\">\r\n <div className=\"flex items-center gap-2\">\r\n Filters\r\n <ChevronDown className=\"h-4 w-4\" />\r\n </div>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent>\r\n <TableFiltering\r\n columns={filterableColumns}\r\n onFiltersChange={onFiltersChange}\r\n filters={filters ?? []}\r\n onClose={() => setIsFiltersOpen(false)}\r\n singleFilter={singleFilter}\r\n filterMethods={filterMethods}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n {groupableColumns.length > 0 && (\r\n <Popover\r\n placement=\"bottom\"\r\n isOpen={isGroupByOpen}\r\n onOpenChange={setIsGroupByOpen}\r\n portalContainer={document.body}\r\n >\r\n <PopoverTrigger>\r\n <Button variant={hasGrouping ? \"secondary\" : \"outline\"} size=\"sm\">\r\n <div className=\"flex items-center gap-2\">\r\n {hasGrouping\r\n ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(\" → \")}`\r\n : \"Group by\"}\r\n <ChevronDown className=\"h-4 w-4\" />\r\n </div>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent>\r\n <TableGroupBy\r\n columns={groupableColumns}\r\n activeGrouping={grouping}\r\n onGroupingChange={(columnIds) => {\r\n setGrouping(columnIds);\r\n setExpanded({});\r\n setPagination?.({ pageIndex: 0, pageSize: limit });\r\n }}\r\n onClose={() => setIsGroupByOpen(false)}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n )}\r\n <Popover\r\n placement=\"bottom\"\r\n isOpen={isColumnsOpen}\r\n onOpenChange={setIsColumnsOpen}\r\n portalContainer={document.body}\r\n >\r\n <PopoverTrigger>\r\n <Button variant=\"outline\" size=\"sm\">\r\n <div className=\"flex items-center gap-2\">\r\n Columns\r\n <ChevronDown className=\"h-4 w-4\" />\r\n </div>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent>\r\n <ColumnOrderAndVisibility\r\n layout={layout}\r\n onChangeOrder={onChangeOrder}\r\n onChangeVisibility={onChangeVisibility}\r\n onClose={() => setIsColumnsOpen(false)}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n </div>\r\n </div>\r\n <Table>\r\n <TableHeader>\r\n <TableRow>\r\n <TableHead>\r\n <Checkbox\r\n isSelected={table.getIsAllRowsSelected()}\r\n onValueChange={(checked) => {\r\n table.toggleAllRowsSelected(checked);\r\n }}\r\n />\r\n </TableHead>\r\n {table.getHeaderGroups()[0].headers.map((header) => (\r\n <TableHead\r\n onClick={\r\n header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined\r\n }\r\n key={header.id}\r\n >\r\n {flexRender(header.column.columnDef.header, header.getContext())}\r\n {header.column.getCanSort() && (\r\n <>\r\n {header.column.getIsSorted() === \"asc\" && (\r\n <ChevronUp className=\"h-4 w-4 inline ml-1\" />\r\n )}\r\n {header.column.getIsSorted() === \"desc\" && (\r\n <ChevronDown className=\"h-4 w-4 inline ml-1\" />\r\n )}\r\n </>\r\n )}\r\n </TableHead>\r\n ))}\r\n </TableRow>\r\n </TableHeader>\r\n <TableBody>\r\n {table.getRowModel().rows.map((row) => {\r\n if (row.getIsGrouped()) {\r\n return (\r\n <TableRow\r\n key={row.id}\r\n className=\"bg-muted/40 font-medium cursor-pointer hover:bg-muted/60\"\r\n onClick={() => row.toggleExpanded()}\r\n >\r\n <TableCell />\r\n {row.getVisibleCells().map((cell) => {\r\n if (cell.getIsGrouped()) {\r\n return (\r\n <TableCell key={cell.id}>\r\n <span className=\"flex items-center gap-1.5\">\r\n {row.getIsExpanded() ? (\r\n <ChevronDown className=\"h-4 w-4 shrink-0\" />\r\n ) : (\r\n <ChevronRight className=\"h-4 w-4 shrink-0\" />\r\n )}\r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n <span className=\"text-muted-foreground font-normal ml-1\">\r\n ({row.subRows.length})\r\n </span>\r\n </span>\r\n </TableCell>\r\n );\r\n }\r\n if (cell.getIsAggregated()) {\r\n return (\r\n <TableCell key={cell.id}>\r\n {flexRender(\r\n cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,\r\n cell.getContext()\r\n )}\r\n </TableCell>\r\n );\r\n }\r\n return <TableCell key={cell.id} />;\r\n })}\r\n </TableRow>\r\n );\r\n }\r\n\r\n return (\r\n <TableRow key={row.id}>\r\n <TableCell>\r\n <Checkbox\r\n isSelected={row.getIsSelected()}\r\n onValueChange={(checked) => {\r\n row.toggleSelected(checked);\r\n }}\r\n />\r\n </TableCell>\r\n {row.getVisibleCells().map((cell) => (\r\n <TableCell key={cell.id}>\r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n </TableCell>\r\n ))}\r\n </TableRow>\r\n );\r\n })}\r\n </TableBody>\r\n </Table>\r\n <TablePagination\r\n pageCount={\r\n isGrouped\r\n ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) \|\| 1\r\n : serverPageCount\r\n }\r\n page={isGrouped ? table.getState().pagination.pageIndex + 1 : page}\r\n limit={limit}\r\n setPagination={setPagination}\r\n />\r\n </>\r\n );\r\n};\r\n"],"mappings":"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"}

package/dist/src/modules/table/components/TableFiltering.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { QueryFilters } from "@m5kdev/commons/modules/schemas/query.schema";
+import { ColumnDataType, FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+//#region src/modules/table/components/TableFiltering.d.ts
+type TableFilteringProps = {
+  columns: {
+    id: string;
+    label: string;
+    type?: ColumnDataType | null;
+    options?: {
+      label: string;
+      value: string;
+    }[] | null;
+    endColumnId?: string | null;
+    periodStartColumnId?: string | null;
+    periodEndColumnId?: string | null;
+  }[];
+  onFiltersChange: (filters: QueryFilters) => void;
+  filters: QueryFilters;
+  onClose?: () => void;
+  singleFilter?: boolean;
+  filterMethods?: Partial<FilterMethods>;
+};
+declare const TableFiltering: ({
+  columns,
+  onFiltersChange,
+  filters: initialFilters,
+  onClose,
+  singleFilter,
+  filterMethods
+}: TableFilteringProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFiltering };
+//# sourceMappingURL=TableFiltering.d.ts.map

package/dist/src/modules/table/components/TableFiltering.js ADDED Viewed

@@ -0,0 +1,420 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_components_ui_button = require("../../../components/ui/button.js");
+const require_src_modules_table_filterTransformers = require("../filterTransformers.js");
+let react = require("react");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _internationalized_date = require("@internationalized/date");
+//#region src/modules/table/components/TableFiltering.tsx
+const componentForFilterMethod = {
+	text: (value, onChange) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Input, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? "",
+		onChange: (e) => onChange(e.target.value)
+	}),
+	number: (value, onChange) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Input, {
+		size: "sm",
+		"aria-label": "Select Value",
+		type: "number",
+		className: "flex-1 min-w-0 text-sm",
+		value: value?.toString() ?? "",
+		onChange: (e) => onChange(Number.parseFloat(e.target.value) || 0)
+	}),
+	date: (value, onChange) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.DatePicker, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? void 0,
+		onChange: (date) => date && onChange(date),
+		maxValue: (0, _internationalized_date.today)((0, _internationalized_date.getLocalTimeZone)())
+	}),
+	range: (value, onChange) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.DateRangePicker, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? void 0,
+		onChange: (range) => range && onChange(range),
+		maxValue: (0, _internationalized_date.today)((0, _internationalized_date.getLocalTimeZone)())
+	}),
+	radio: (value, onChange) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ? ["true"] : ["false"],
+		onSelectionChange: (keys) => onChange(keys.currentKey === "true"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, {
+			className: "text-sm",
+			children: "True"
+		}, "true"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, {
+			className: "text-sm",
+			children: "False"
+		}, "false")]
+	}),
+	select: (value, onChange, options = []) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ?? /* @__PURE__ */ new Set(),
+		onSelectionChange: (keys) => keys && onChange(keys),
+		children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, {
+			className: "text-sm",
+			children: option.label
+		}, option.value))
+	}),
+	multiSelect: (value, onChange, options = []) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		selectionMode: "multiple",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ? new Set(value) : /* @__PURE__ */ new Set(),
+		onSelectionChange: (keys) => onChange(keys),
+		children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, {
+			className: "text-sm",
+			children: option.label
+		}, option.value))
+	})
+};
+const defaultFilterMethods = {
+	string: [
+		{
+			value: "contains",
+			label: "Contains",
+			component: "text"
+		},
+		{
+			value: "equals",
+			label: "Equals",
+			component: "text"
+		},
+		{
+			value: "starts_with",
+			label: "Starts With",
+			component: "text"
+		},
+		{
+			value: "ends_with",
+			label: "Ends With",
+			component: "text"
+		}
+	],
+	number: [
+		{
+			value: "equals",
+			label: "Equals",
+			component: "number"
+		},
+		{
+			value: "greater_than",
+			label: "Greater Than",
+			component: "number"
+		},
+		{
+			value: "less_than",
+			label: "Less Than",
+			component: "number"
+		}
+	],
+	date: [
+		{
+			value: "on",
+			label: "On",
+			component: "date"
+		},
+		{
+			value: "between",
+			label: "Between",
+			component: "range"
+		},
+		{
+			value: "before",
+			label: "Before",
+			component: "date"
+		},
+		{
+			value: "after",
+			label: "After",
+			component: "date"
+		},
+		{
+			value: "intersect",
+			label: "During",
+			component: "range"
+		}
+	],
+	boolean: [{
+		value: "equals",
+		label: "Equals",
+		component: "radio"
+	}],
+	enum: [{
+		value: "oneOf",
+		label: "One Of",
+		component: "multiSelect"
+	}, {
+		value: "equals",
+		label: "Equals",
+		component: "select"
+	}]
+};
+const SINGLE_FILTER_KEY = "single-filter";
+const mergeFilterMethods = (overrides) => ({
+	string: overrides?.string && overrides.string.length > 0 ? overrides.string : defaultFilterMethods.string,
+	number: overrides?.number && overrides.number.length > 0 ? overrides.number : defaultFilterMethods.number,
+	date: overrides?.date && overrides.date.length > 0 ? overrides.date : defaultFilterMethods.date,
+	boolean: overrides?.boolean && overrides.boolean.length > 0 ? overrides.boolean : defaultFilterMethods.boolean,
+	enum: overrides?.enum && overrides.enum.length > 0 ? overrides.enum : defaultFilterMethods.enum
+});
+const TableFiltering = ({ columns, onFiltersChange, filters: initialFilters = [], onClose, singleFilter = false, filterMethods }) => {
+	const [filters, setFilters] = (0, react.useState)({});
+	const effectiveFilterMethods = (0, react.useMemo)(() => mergeFilterMethods(filterMethods), [filterMethods]);
+	const createEmptyFilter = (0, react.useCallback)(() => ({
+		columnId: "",
+		type: null,
+		value: null,
+		method: null,
+		options: null,
+		endColumnId: null,
+		periodStartColumnId: null,
+		periodEndColumnId: null
+	}), []);
+	const addFilter = (0, react.useCallback)(() => {
+		setFilters((prev) => {
+			if (!singleFilter) {
+				const filterId = crypto.randomUUID();
+				return {
+					...prev,
+					[filterId]: createEmptyFilter()
+				};
+			}
+			return Object.keys(prev).length > 0 ? prev : { [SINGLE_FILTER_KEY]: createEmptyFilter() };
+		});
+	}, [createEmptyFilter, singleFilter]);
+	const removeFilter = (0, react.useCallback)((filterId) => {
+		setFilters((prev) => {
+			if (!singleFilter) {
+				const { [filterId]: _, ...rest } = prev;
+				return rest;
+			}
+			return { [SINGLE_FILTER_KEY]: createEmptyFilter() };
+		});
+	}, [createEmptyFilter, singleFilter]);
+	const columnsMap = (0, react.useMemo)(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+	(0, react.useEffect)(() => {
+		const transformedFilters = require_src_modules_table_filterTransformers.transformFiltersToHeroUI(initialFilters, columnsMap, effectiveFilterMethods);
+		if (!singleFilter) {
+			setFilters(Object.fromEntries(transformedFilters.map((filter) => [filter.columnId, filter])));
+			return;
+		}
+		const firstFilter = transformedFilters[0];
+		setFilters({ [SINGLE_FILTER_KEY]: firstFilter ?? createEmptyFilter() });
+	}, [
+		createEmptyFilter,
+		initialFilters,
+		singleFilter,
+		columnsMap,
+		effectiveFilterMethods
+	]);
+	const selectColumn = (0, react.useCallback)((filterId, columnId) => {
+		setFilters((prev) => {
+			const oldFilter = prev[filterId];
+			if (!oldFilter) return prev;
+			const column = columnsMap.get(columnId);
+			if (!column) return prev;
+			const intersectMethod = columnId.endsWith("__period") ? effectiveFilterMethods.date.find((m) => m.value === "intersect") ?? null : null;
+			return {
+				...prev,
+				[filterId]: {
+					...oldFilter,
+					columnId,
+					type: column.type ?? null,
+					options: column.options ?? null,
+					endColumnId: column.endColumnId ?? null,
+					periodStartColumnId: column.periodStartColumnId ?? null,
+					periodEndColumnId: column.periodEndColumnId ?? null,
+					method: intersectMethod,
+					value: null
+				}
+			};
+		});
+	}, [columnsMap, effectiveFilterMethods]);
+	const selectMethod = (0, react.useCallback)((filterId, method) => {
+		setFilters((prev) => {
+			const oldFilter = prev[filterId];
+			if (!oldFilter) return prev;
+			return {
+				...prev,
+				[filterId]: {
+					...oldFilter,
+					method,
+					value: null
+				}
+			};
+		});
+	}, []);
+	const selectValue = (0, react.useCallback)((filterId, value) => {
+		setFilters((prev) => {
+			const oldFilter = prev[filterId];
+			if (!oldFilter) return prev;
+			return {
+				...prev,
+				[filterId]: {
+					...oldFilter,
+					value
+				}
+			};
+		});
+	}, []);
+	const filterEntries = (0, react.useMemo)(() => Object.entries(filters), [filters]);
+	const availableColumnsMap = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		filterEntries.forEach(([filterId]) => {
+			const columnsUsedByOtherFilters = new Set(filterEntries.filter(([id]) => id !== filterId).map(([_, f]) => f.columnId).filter((id) => id !== ""));
+			map.set(filterId, columns.filter((column) => !columnsUsedByOtherFilters.has(column.id)));
+		});
+		return map;
+	}, [filterEntries, columns]);
+	const applyFilters = (0, react.useCallback)(() => {
+		onFiltersChange(require_src_modules_table_filterTransformers.transformFiltersFromHeroUI(Object.values(filters)));
+		onClose?.();
+	}, [
+		filters,
+		onFiltersChange,
+		onClose
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2 p-1 min-w-[600px]",
+		children: [
+			filterEntries.map(([filterId, filter]) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableFilteringItem, {
+					id: filterId,
+					filter,
+					columns: availableColumnsMap.get(filterId) ?? columns,
+					selectColumn,
+					selectMethod,
+					removeFilter,
+					selectValue,
+					filterMethods: effectiveFilterMethods
+				}, filterId);
+			}),
+			!singleFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_button.Button, {
+				variant: "outline",
+				size: "sm",
+				onClick: addFilter,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusIcon, { className: "h-4 w-4" }), "Add Filter"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_button.Button, {
+				onClick: applyFilters,
+				children: singleFilter ? "Apply Filter" : "Apply Filters"
+			})
+		]
+	});
+};
+const TableFilteringItem = ({ id, filter, columns, selectColumn, selectMethod, selectValue, removeFilter, filterMethods }) => {
+	const handleColumnChange = (0, react.useCallback)((keys) => {
+		selectColumn(id, String(keys.currentKey));
+	}, [id, selectColumn]);
+	const methodsForType = (0, react.useMemo)(() => {
+		if (!filter.type) return [];
+		if (filter.columnId.endsWith("__period")) {
+			const intersectMethod = filterMethods.date.find((m) => m.value === "intersect");
+			return intersectMethod ? [intersectMethod] : [];
+		}
+		const baseMethods = filterMethods[filter.type] ?? [];
+		const emptyMethods = [{
+			value: "isEmpty",
+			label: "Is Empty",
+			component: null
+		}, {
+			value: "isNotEmpty",
+			label: "Is Not Empty",
+			component: null
+		}];
+		if (filter.type !== "boolean" && filter.type !== "date") return [...baseMethods, ...emptyMethods];
+		return baseMethods;
+	}, [
+		filter.type,
+		filter.columnId,
+		filter.method?.value,
+		filterMethods
+	]);
+	const handleMethodChange = (0, react.useCallback)((keys) => {
+		if (!filter.type) return;
+		const method = methodsForType.find((currentMethod) => currentMethod.value === String(keys.currentKey));
+		if (method) selectMethod(id, method);
+	}, [
+		id,
+		filter.type,
+		selectMethod,
+		methodsForType
+	]);
+	const handleValueChange = (0, react.useCallback)((value) => {
+		selectValue(id, value);
+	}, [id, selectValue]);
+	const methodSelect = (0, react.useMemo)(() => {
+		if (!filter.type) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Select, {
+			size: "sm",
+			"aria-label": "Select Method",
+			className: "w-40 flex-shrink-0 text-sm",
+			selectedKeys: filter.method?.value ? [filter.method.value] : [],
+			onSelectionChange: handleMethodChange,
+			popoverProps: { className: "w-auto min-w-max" },
+			children: methodsForType.map((method) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, {
+				className: "text-sm",
+				children: method.label
+			}, method.value))
+		});
+	}, [
+		filter.type,
+		filter.method?.value,
+		methodsForType,
+		handleMethodChange
+	]);
+	const filterValueComponent = (0, react.useMemo)(() => {
+		if (!filter.method?.component) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "flex-1 min-w-0" });
+		const ComponentFn = componentForFilterMethod[filter.method.component];
+		if (!ComponentFn) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "flex-1 min-w-0" });
+		return ComponentFn(filter.value, handleValueChange, filter.options ?? []);
+	}, [
+		filter.method?.component,
+		filter.value,
+		filter.options,
+		handleValueChange
+	]);
+	const columnSelectItems = (0, react.useMemo)(() => columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, {
+		className: "text-sm",
+		children: String(column.label)
+	}, column.id)), [columns]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2 w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-1 items-center gap-2 min-w-0",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Select, {
+					size: "sm",
+					"aria-label": "Select Column",
+					className: "w-40 flex-shrink-0 text-sm",
+					selectedKeys: filter.columnId ? [filter.columnId] : [],
+					onSelectionChange: handleColumnChange,
+					popoverProps: { className: "w-auto min-w-max" },
+					children: columnSelectItems
+				}),
+				methodSelect,
+				filterValueComponent
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_button.Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: () => removeFilter(id),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, { className: "h-4 w-4" })
+		})]
+	});
+};
+//#endregion
+exports.TableFiltering = TableFiltering;
+//# sourceMappingURL=TableFiltering.js.map

package/dist/src/modules/table/components/TableFiltering.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TableFiltering.js","names":["Input","DatePicker","DateRangePicker","Select","SelectItem","transformFiltersToHeroUI","transformFiltersFromHeroUI","Button","PlusIcon","XIcon"],"sources":["../../../../../src/modules/table/components/TableFiltering.tsx"],"sourcesContent":["import {\r\n DatePicker,\r\n DateRangePicker,\r\n type DateValue,\r\n Input,\r\n Select,\r\n SelectItem,\r\n type SharedSelection,\r\n} from \"@heroui/react\";\r\nimport { getLocalTimeZone, today } from \"@internationalized/date\";\r\nimport type { QueryFilters } from \"@m5kdev/commons/modules/schemas/query.schema\";\r\nimport type {\r\n ColumnDataType,\r\n ComponentForFilterMethod,\r\n FilterMethod,\r\n FilterMethods,\r\n} from \"@m5kdev/commons/modules/table/filter.types\";\r\nimport { PlusIcon, XIcon } from \"lucide-react\";\r\nimport type { ReactNode } from \"react\";\r\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport {\r\n type FilterValue,\r\n type HeroUIFilter,\r\n transformFiltersFromHeroUI,\r\n transformFiltersToHeroUI,\r\n} from \"../filterTransformers\";\r\n\r\ntype ComponentRenderer = (\r\n value: FilterValue,\r\n onChange: (value: FilterValue) => void,\r\n options?: { label: string; value: string }[]\r\n) => ReactNode;\r\n\r\nconst componentForFilterMethod: Record<ComponentForFilterMethod, ComponentRenderer> = {\r\n text: (value, onChange) => (\r\n <Input\r\n size=\"sm\"\r\n aria-label=\"Select Value\"\r\n className=\"flex-1 min-w-0 text-sm\"\r\n value={(value as string) ?? \"\"}\r\n onChange={(e) => onChange(e.target.value)}\r\n />\r\n ),\r\n number: (value, onChange) => (\r\n <Input\r\n size=\"sm\"\r\n aria-label=\"Select Value\"\r\n type=\"number\"\r\n className=\"flex-1 min-w-0 text-sm\"\r\n value={(value as number | null)?.toString() ?? \"\"}\r\n onChange={(e) => onChange(Number.parseFloat(e.target.value) || 0)}\r\n />\r\n ),\r\n date: (value, onChange) => (\r\n <DatePicker\r\n size=\"sm\"\r\n aria-label=\"Select Value\"\r\n className=\"flex-1 min-w-0 text-sm\"\r\n value={(value as any) ?? undefined}\r\n onChange={(date) => date && onChange(date as FilterValue)}\r\n maxValue={today(getLocalTimeZone()) as unknown as DateValue}\r\n />\r\n ),\r\n range: (value, onChange) => (\r\n <DateRangePicker\r\n size=\"sm\"\r\n aria-label=\"Select Value\"\r\n className=\"flex-1 min-w-0 text-sm\"\r\n value={(value as any) ?? undefined}\r\n onChange={(range) => range && onChange(range as FilterValue)}\r\n maxValue={today(getLocalTimeZone()) as unknown as DateValue}\r\n />\r\n ),\r\n radio: (value, onChange) => (\r\n <Select\r\n size=\"sm\"\r\n aria-label=\"Select Value\"\r\n className=\"flex-1 min-w-0 text-sm\"\r\n selectedKeys={(value as boolean | null) ? [\"true\"] : [\"false\"]}\r\n onSelectionChange={(keys) => onChange(keys.currentKey === \"true\")}\r\n >\r\n <SelectItem key=\"true\" className=\"text-sm\">\r\n True\r\n </SelectItem>\r\n <SelectItem key=\"false\" className=\"text-sm\">\r\n False\r\n </SelectItem>\r\n </Select>\r\n ),\r\n select: (value, onChange, options = []) => (\r\n <Select\r\n size=\"sm\"\r\n aria-label=\"Select Value\"\r\n className=\"flex-1 min-w-0 text-sm\"\r\n selectedKeys={(value as SharedSelection) ?? new Set()}\r\n onSelectionChange={(keys) => keys && onChange(keys as FilterValue)}\r\n >\r\n {options.map((option) => (\r\n <SelectItem key={option.value} className=\"text-sm\">\r\n {option.label}\r\n </SelectItem>\r\n ))}\r\n </Select>\r\n ),\r\n multiSelect: (value, onChange, options = []) => (\r\n <Select\r\n size=\"sm\"\r\n aria-label=\"Select Value\"\r\n selectionMode=\"multiple\"\r\n className=\"flex-1 min-w-0 text-sm\"\r\n selectedKeys={value ? new Set(value as SharedSelection) : new Set()}\r\n onSelectionChange={(keys) => onChange(keys as FilterValue)}\r\n >\r\n {options.map((option) => (\r\n <SelectItem key={option.value} className=\"text-sm\">\r\n {option.label}\r\n </SelectItem>\r\n ))}\r\n </Select>\r\n ),\r\n};\r\n\r\nconst defaultFilterMethods: FilterMethods = {\r\n string: [\r\n { value: \"contains\", label: \"Contains\", component: \"text\" },\r\n { value: \"equals\", label: \"Equals\", component: \"text\" },\r\n { value: \"starts_with\", label: \"Starts With\", component: \"text\" },\r\n { value: \"ends_with\", label: \"Ends With\", component: \"text\" },\r\n ],\r\n number: [\r\n { value: \"equals\", label: \"Equals\", component: \"number\" },\r\n { value: \"greater_than\", label: \"Greater Than\", component: \"number\" },\r\n { value: \"less_than\", label: \"Less Than\", component: \"number\" },\r\n ],\r\n date: [\r\n { value: \"on\", label: \"On\", component: \"date\" },\r\n { value: \"between\", label: \"Between\", component: \"range\" },\r\n { value: \"before\", label: \"Before\", component: \"date\" },\r\n { value: \"after\", label: \"After\", component: \"date\" },\r\n { value: \"intersect\", label: \"During\", component: \"range\" },\r\n ],\r\n boolean: [{ value: \"equals\", label: \"Equals\", component: \"radio\" }],\r\n enum: [\r\n { value: \"oneOf\", label: \"One Of\", component: \"multiSelect\" },\r\n { value: \"equals\", label: \"Equals\", component: \"select\" },\r\n ],\r\n};\r\n\r\nconst SINGLE_FILTER_KEY = \"single-filter\";\r\n\r\ntype TableFilteringProps = {\r\n columns: {\r\n id: string;\r\n label: string;\r\n type?: ColumnDataType | null;\r\n options?: { label: string; value: string }[] | null;\r\n endColumnId?: string | null;\r\n periodStartColumnId?: string | null;\r\n periodEndColumnId?: string | null;\r\n }[];\r\n onFiltersChange: (filters: QueryFilters) => void;\r\n filters: QueryFilters;\r\n onClose?: () => void;\r\n singleFilter?: boolean;\r\n filterMethods?: Partial<FilterMethods>;\r\n};\r\n\r\nconst mergeFilterMethods = (overrides?: Partial<FilterMethods>): FilterMethods => ({\r\n string:\r\n overrides?.string && overrides.string.length > 0\r\n ? overrides.string\r\n : defaultFilterMethods.string,\r\n number:\r\n overrides?.number && overrides.number.length > 0\r\n ? overrides.number\r\n : defaultFilterMethods.number,\r\n date: overrides?.date && overrides.date.length > 0 ? overrides.date : defaultFilterMethods.date,\r\n boolean:\r\n overrides?.boolean && overrides.boolean.length > 0\r\n ? overrides.boolean\r\n : defaultFilterMethods.boolean,\r\n enum: overrides?.enum && overrides.enum.length > 0 ? overrides.enum : defaultFilterMethods.enum,\r\n});\r\n\r\nexport const TableFiltering = ({\r\n columns,\r\n onFiltersChange,\r\n filters: initialFilters = [],\r\n onClose,\r\n singleFilter = false,\r\n filterMethods,\r\n}: TableFilteringProps) => {\r\n const [filters, setFilters] = useState<Record<string, HeroUIFilter>>({});\r\n const effectiveFilterMethods = useMemo(() => mergeFilterMethods(filterMethods), [filterMethods]);\r\n\r\n const createEmptyFilter = useCallback(\r\n (): HeroUIFilter => ({\r\n columnId: \"\",\r\n type: null,\r\n value: null,\r\n method: null,\r\n options: null,\r\n endColumnId: null,\r\n periodStartColumnId: null,\r\n periodEndColumnId: null,\r\n }),\r\n []\r\n );\r\n\r\n const addFilter = useCallback(() => {\r\n setFilters((prev) => {\r\n if (!singleFilter) {\r\n const filterId = crypto.randomUUID();\r\n return {\r\n ...prev,\r\n [filterId]: createEmptyFilter(),\r\n };\r\n }\r\n\r\n // single filter mode\r\n return Object.keys(prev).length > 0 ? prev : { [SINGLE_FILTER_KEY]: createEmptyFilter() };\r\n });\r\n }, [createEmptyFilter, singleFilter]);\r\n\r\n const removeFilter = useCallback(\r\n (filterId: string) => {\r\n setFilters((prev) => {\r\n if (!singleFilter) {\r\n const { [filterId]: _, ...rest } = prev;\r\n return rest;\r\n }\r\n\r\n // single filter mode resets the lone filter\r\n return { [SINGLE_FILTER_KEY]: createEmptyFilter() };\r\n });\r\n },\r\n [createEmptyFilter, singleFilter]\r\n );\r\n\r\n const columnsMap = useMemo(\r\n () => new Map(columns.map((column) => [column.id, column])),\r\n [columns]\r\n );\r\n\r\n useEffect(() => {\r\n // Transform initialFilters from FiltersToApply format to HeroUIFilter format\r\n const transformedFilters = transformFiltersToHeroUI(\r\n initialFilters,\r\n columnsMap,\r\n effectiveFilterMethods\r\n );\r\n\r\n if (!singleFilter) {\r\n setFilters(Object.fromEntries(transformedFilters.map((filter) => [filter.columnId, filter])));\r\n return;\r\n }\r\n\r\n const firstFilter = transformedFilters[0];\r\n setFilters({\r\n [SINGLE_FILTER_KEY]: firstFilter ?? createEmptyFilter(),\r\n });\r\n }, [createEmptyFilter, initialFilters, singleFilter, columnsMap, effectiveFilterMethods]);\r\n\r\n const selectColumn = useCallback(\r\n (filterId: string, columnId: string) => {\r\n setFilters((prev) => {\r\n const oldFilter = prev[filterId];\r\n if (!oldFilter) return prev;\r\n const column = columnsMap.get(columnId);\r\n if (!column) return prev;\r\n\r\n // If Period column, auto-set intersect method\r\n const isPeriodColumn = columnId.endsWith(\"__period\");\r\n const intersectMethod = isPeriodColumn\r\n ? (effectiveFilterMethods.date.find((m) => m.value === \"intersect\") ?? null)\r\n : null;\r\n\r\n return {\r\n ...prev,\r\n [filterId]: {\r\n ...oldFilter,\r\n columnId,\r\n type: column.type ?? null,\r\n options: column.options ?? null,\r\n endColumnId: column.endColumnId ?? null,\r\n periodStartColumnId: column.periodStartColumnId ?? null,\r\n periodEndColumnId: column.periodEndColumnId ?? null,\r\n method: intersectMethod,\r\n value: null,\r\n },\r\n };\r\n });\r\n },\r\n [columnsMap, effectiveFilterMethods]\r\n );\r\n\r\n const selectMethod = useCallback((filterId: string, method: FilterMethod) => {\r\n setFilters((prev) => {\r\n const oldFilter = prev[filterId];\r\n if (!oldFilter) return prev;\r\n return {\r\n ...prev,\r\n [filterId]: { ...oldFilter, method, value: null },\r\n };\r\n });\r\n }, []);\r\n\r\n const selectValue = useCallback((filterId: string, value: FilterValue) => {\r\n setFilters((prev) => {\r\n const oldFilter = prev[filterId];\r\n if (!oldFilter) return prev;\r\n return {\r\n ...prev,\r\n [filterId]: { ...oldFilter, value },\r\n };\r\n });\r\n }, []);\r\n\r\n const filterEntries = useMemo(() => Object.entries(filters), [filters]);\r\n\r\n const availableColumnsMap = useMemo(() => {\r\n const map = new Map<string, typeof columns>();\r\n filterEntries.forEach(([filterId]) => {\r\n const columnsUsedByOtherFilters = new Set(\r\n filterEntries\r\n .filter(([id]) => id !== filterId)\r\n .map(([_, f]) => f.columnId)\r\n .filter((id) => id !== \"\")\r\n );\r\n map.set(\r\n filterId,\r\n columns.filter((column) => !columnsUsedByOtherFilters.has(column.id))\r\n );\r\n });\r\n return map;\r\n }, [filterEntries, columns]);\r\n\r\n const applyFilters = useCallback(() => {\r\n const heroUIFilters = Object.values(filters);\r\n const filtersToApply = transformFiltersFromHeroUI(heroUIFilters);\r\n onFiltersChange(filtersToApply);\r\n onClose?.();\r\n }, [filters, onFiltersChange, onClose]);\r\n\r\n return (\r\n <div className=\"flex flex-col gap-2 p-1 min-w-[600px]\">\r\n {filterEntries.map(([filterId, filter]) => {\r\n const availableColumns = availableColumnsMap.get(filterId) ?? columns;\r\n return (\r\n <TableFilteringItem\r\n key={filterId}\r\n id={filterId}\r\n filter={filter}\r\n columns={availableColumns}\r\n selectColumn={selectColumn}\r\n selectMethod={selectMethod}\r\n removeFilter={removeFilter}\r\n selectValue={selectValue}\r\n filterMethods={effectiveFilterMethods}\r\n />\r\n );\r\n })}\r\n {!singleFilter && (\r\n <Button variant=\"outline\" size=\"sm\" onClick={addFilter}>\r\n <PlusIcon className=\"h-4 w-4\" />\r\n Add Filter\r\n </Button>\r\n )}\r\n <Button onClick={applyFilters}>{singleFilter ? \"Apply Filter\" : \"Apply Filters\"}</Button>\r\n </div>\r\n );\r\n};\r\n\r\nconst TableFilteringItem = ({\r\n id,\r\n filter,\r\n columns,\r\n selectColumn,\r\n selectMethod,\r\n selectValue,\r\n removeFilter,\r\n filterMethods,\r\n}: {\r\n id: string;\r\n filter: HeroUIFilter;\r\n columns: {\r\n id: string;\r\n label: string;\r\n type?: ColumnDataType | null;\r\n options?: { label: string; value: string }[] | null;\r\n endColumnId?: string | null;\r\n periodStartColumnId?: string | null;\r\n periodEndColumnId?: string | null;\r\n }[];\r\n selectColumn: (filterId: string, columnId: string) => void;\r\n selectMethod: (filterId: string, method: FilterMethod) => void;\r\n selectValue: (filterId: string, value: FilterValue) => void;\r\n removeFilter: (filterId: string) => void;\r\n filterMethods: FilterMethods;\r\n}) => {\r\n const handleColumnChange = useCallback(\r\n (keys: any) => {\r\n const columnId = String(keys.currentKey);\r\n selectColumn(id, columnId);\r\n },\r\n [id, selectColumn]\r\n );\r\n\r\n const methodsForType = useMemo(() => {\r\n if (!filter.type) return [];\r\n\r\n // Period columns only support intersect method\r\n const isPeriodColumn = filter.columnId.endsWith(\"__period\");\r\n if (isPeriodColumn) {\r\n const intersectMethod = filterMethods.date.find((m) => m.value === \"intersect\");\r\n return intersectMethod ? [intersectMethod] : [];\r\n }\r\n\r\n const baseMethods = filterMethods[filter.type as ColumnDataType] ?? [];\r\n const emptyMethods: FilterMethod[] = [\r\n { value: \"isEmpty\", label: \"Is Empty\", component: null },\r\n { value: \"isNotEmpty\", label: \"Is Not Empty\", component: null },\r\n ];\r\n\r\n if (filter.type !== \"boolean\" && filter.type !== \"date\") {\r\n return [...baseMethods, ...emptyMethods];\r\n }\r\n\r\n return baseMethods;\r\n }, [filter.type, filter.columnId, filter.method?.value, filterMethods]);\r\n\r\n const handleMethodChange = useCallback(\r\n (keys: any) => {\r\n if (!filter.type) return;\r\n // Use methodsForType instead of filterMethods to include dynamically added methods\r\n const method = methodsForType.find(\r\n (currentMethod: FilterMethod) => currentMethod.value === String(keys.currentKey)\r\n );\r\n if (method) {\r\n selectMethod(id, method);\r\n }\r\n },\r\n [id, filter.type, selectMethod, methodsForType]\r\n );\r\n\r\n const handleValueChange = useCallback(\r\n (value: FilterValue) => {\r\n selectValue(id, value);\r\n },\r\n [id, selectValue]\r\n );\r\n\r\n const methodSelect = useMemo(() => {\r\n if (!filter.type) return null;\r\n return (\r\n <Select\r\n size=\"sm\"\r\n aria-label=\"Select Method\"\r\n className=\"w-40 flex-shrink-0 text-sm\"\r\n selectedKeys={filter.method?.value ? [filter.method.value] : []}\r\n onSelectionChange={handleMethodChange}\r\n popoverProps={{\r\n className: \"w-auto min-w-max\",\r\n }}\r\n >\r\n {methodsForType.map((method: FilterMethod) => (\r\n <SelectItem key={method.value} className=\"text-sm\">\r\n {method.label}\r\n </SelectItem>\r\n ))}\r\n </Select>\r\n );\r\n }, [filter.type, filter.method?.value, methodsForType, handleMethodChange]);\r\n\r\n const filterValueComponent = useMemo(() => {\r\n if (!filter.method?.component) {\r\n return <div className=\"flex-1 min-w-0\" />;\r\n }\r\n const component = filter.method.component as ComponentForFilterMethod;\r\n const ComponentFn =\r\n componentForFilterMethod[component as keyof typeof componentForFilterMethod];\r\n if (!ComponentFn) return <div className=\"flex-1 min-w-0\" />;\r\n return ComponentFn(filter.value as any, handleValueChange, filter.options ?? []);\r\n }, [filter.method?.component, filter.value, filter.options, handleValueChange]);\r\n\r\n const columnSelectItems = useMemo(\r\n () =>\r\n columns.map((column) => (\r\n <SelectItem key={column.id} className=\"text-sm\">\r\n {String(column.label)}\r\n </SelectItem>\r\n )),\r\n [columns]\r\n );\r\n\r\n return (\r\n <div className=\"flex items-center gap-2 w-full\">\r\n <div className=\"flex flex-1 items-center gap-2 min-w-0\">\r\n <Select\r\n size=\"sm\"\r\n aria-label=\"Select Column\"\r\n className=\"w-40 flex-shrink-0 text-sm\"\r\n selectedKeys={filter.columnId ? [filter.columnId] : []}\r\n onSelectionChange={handleColumnChange}\r\n popoverProps={{\r\n className: \"w-auto min-w-max\",\r\n }}\r\n >\r\n {columnSelectItems}\r\n </Select>\r\n {methodSelect}\r\n {filterValueComponent}\r\n </div>\r\n <Button variant=\"outline\" size=\"sm\" onClick={() => removeFilter(id)}>\r\n <XIcon className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n );\r\n};\r\n"],"mappings":"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"}