@vinorcola/dynamic-table 1.2.2 → 1.3.0

package/lib/ColumnDefinition.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
 import type { BaseItem, Dictionary, ItemKey, Primitive } from "./index.js";
-export type ValueDecorator<Item extends BaseItem, Value extends Primitive> = (value: Value, defaultDisplay: ReactNode, item: Item) => ReactNode;
-export type ValueResolver<Item extends BaseItem, Value extends Primitive> = (item: Item) => Value | null;
+export type ValueDecorator<Item extends BaseItem, Value extends Primitive | Primitive[]> = (value: Value, defaultDisplay: ReactNode, item: Item) => ReactNode;
+export type ValueResolver<Item extends BaseItem, Value extends Primitive | Primitive[]> = (item: Item) => Value | null;
 interface BaseColumneDefinition<Item extends BaseItem, Value extends Primitive> {
     readonly title: string;
     readonly dictionary?: Dictionary<Value> | Promise<Dictionary<Value>>;
-    readonly decorateValue?: ValueDecorator<Item, Value>;
+    readonly decorateValue?: ValueDecorator<Item, Value | Value[]>;
     readonly decorateNoValue?: () => ReactNode;
 }
 /**
@@ -19,7 +19,7 @@ interface AccessorColumnDefinition<Item extends BaseItem, Value extends Primitiv
  */
 interface ResolvedColumnDefinition<Item extends BaseItem, Value extends Primitive> extends BaseColumneDefinition<Item, Value> {
     readonly id: string;
-    readonly resolveValue: ValueResolver<Item, Value>;
+    readonly resolveValue: ValueResolver<Item, Value | Value[]>;
 }
 export type ColumnDefinition<Item extends BaseItem, Value extends Primitive> = AccessorColumnDefinition<Item, Value> | ResolvedColumnDefinition<Item, Value>;
 export declare function isAccessorColumnDefinition<Item extends BaseItem, Value extends Primitive>(definition: ColumnDefinition<Item, Value>): definition is AccessorColumnDefinition<Item, Value>;

package/lib/Controller.d.ts

@@ -0,0 +1,9 @@
+import type { BaseItem } from "./index.js";
+import type { InternalColumns } from "./useColumns.js";
+interface Props<Item extends BaseItem> {
+    columns: InternalColumns<Item>;
+    clearFilterState: () => void;
+    clearSortState: () => void;
+}
+export default function Controller<Item extends BaseItem>(props: Props<Item>): import("react").JSX.Element;
+export {};

package/lib/Controller.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from "@vinorcola/utils/classNames";
+import { CloseIcon, ColumnsIcon, FilterIcon, SortIcon } from "./Icon.js";
+import { usePopup } from "./UniquePopupProvider.js";
+import DynamicTable from "./index.js";
+import { isSearchable, isSelectable } from "./useFilterState.js";
+import { isMaskable } from "./useMaskableColumns.js";
+import { isSortable } from "./useSortState.js";
+export default function Controller(props) {
+    const columnListPopup = usePopup();
+    const hasHiddenColumns = props.columns.some((column) => isMaskable(column) && !column.displayed);
+    const hasFilteredColumns = props.columns.some((column) => (isSearchable(column) && column.searchText !== null) ||
+        (isSelectable(column) && column.hiddenValues.length > 0));
+    const hasHiddenFilteredColumns = hasHiddenColumns &&
+        hasFilteredColumns &&
+        props.columns.some((column) => isMaskable(column) &&
+            !column.displayed &&
+            ((isSearchable(column) && column.searchText !== null) ||
+                (isSelectable(column) && column.hiddenValues.length > 0)));
+    const hasSortedColumns = props.columns.some((column) => isSortable(column) && column.sorted !== null);
+    const hasHiddenSortedColumns = hasHiddenColumns &&
+        hasSortedColumns &&
+        props.columns.some((column) => isMaskable(column) && !column.displayed && isSortable(column) && column.sorted !== null);
+    return (_jsx(DynamicTable.ControllerContainer, { filterButton: _jsx(DynamicTable.Button, { className: cx(hasHiddenFilteredColumns
+                ? "[--bg-color:var(--color-orange-400)]"
+                : hasFilteredColumns && "[--bg-color:var(--color-lime-400)]"), disabled: !hasFilteredColumns, hoverChildren: _jsx(CloseIcon, {}), onClick: props.clearFilterState, children: _jsx(FilterIcon, {}) }), sortButton: _jsx(DynamicTable.Button, { className: cx(hasHiddenSortedColumns
+                ? "[--bg-color:var(--color-orange-400)]"
+                : hasSortedColumns && "[--bg-color:var(--color-sky-400)]"), disabled: !hasSortedColumns, hoverChildren: _jsx(CloseIcon, {}), onClick: props.clearSortState, children: _jsx(SortIcon, {}) }), columnButton: _jsx(DynamicTable.Button, { className: cx(hasHiddenColumns ? "[--bg-color:var(--color-orange-400)]" : "[--bg-default-color:transparent]"), onClick: columnListPopup.show, children: _jsx(ColumnsIcon, {}) }), columnPopup: columnListPopup.display ? (_jsx(DynamicTable.ColumnsPopup, { columns: props.columns, onDismiss: columnListPopup.dismiss })) : undefined }));
+}

package/lib/DefaultTheme.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type { BaseItem, Dictionary, Primitive } from "./index.js";
 import type { InternalColumn, InternalColumns } from "./useColumns.js";
 import { type FilterType } from "./useFilterState.js";
@@ -6,89 +6,90 @@ import { type InternalSortableColumn } from "./useSortState.js";
 export interface Props {
     children?: ReactNode;
 }
-export declare function TableContainer(props: Props): import("react/jsx-runtime").JSX.Element;
-export interface ControllerProps<Item extends BaseItem> {
-    columns: InternalColumns<Item>;
-    clearFilterState: () => void;
-    clearSortState: () => void;
+export declare function TableContainer(props: Props): import("react").JSX.Element;
+export interface ControllerButtonsGroupProps {
+    filterButton: ReactElement;
+    sortButton: ReactElement;
+    columnButton: ReactElement;
+    columnPopup?: ReactElement;
 }
-export declare function Controller<Item extends BaseItem>(props: ControllerProps<Item>): import("react/jsx-runtime").JSX.Element;
+export declare function ControllerContainer(props: ControllerButtonsGroupProps): import("react").JSX.Element;
 export interface ColumnsPopupProps<Item extends BaseItem> {
     columns: InternalColumns<Item>;
     onDismiss: () => void;
 }
-export declare function ColumnsPopup<Item extends BaseItem>(props: ColumnsPopupProps<Item>): import("react/jsx-runtime").JSX.Element;
-export declare function Table(props: Props): import("react/jsx-runtime").JSX.Element;
-export declare function HeaderContainer(props: Props): import("react/jsx-runtime").JSX.Element;
-export declare function HeaderLine(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnsPopup<Item extends BaseItem>(props: ColumnsPopupProps<Item>): import("react").JSX.Element;
+export declare function Table(props: Props): import("react").JSX.Element;
+export declare function HeaderContainer(props: Props): import("react").JSX.Element;
+export declare function HeaderLine(props: Props): import("react").JSX.Element;
 export interface SelectionHeaderProps extends Props {
     totalSelected: number;
     unvisibleSelected: number;
 }
-export declare function SelectionHeader(props: SelectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectionHeader(props: SelectionHeaderProps): import("react").JSX.Element;
 export interface HeaderProps<Item extends BaseItem, Value extends Primitive> extends Props {
     column: InternalColumn<Item, Value>;
 }
-export declare function Header<Item extends BaseItem, Value extends Primitive>(props: HeaderProps<Item, Value>): import("react/jsx-runtime").JSX.Element;
+export declare function Header<Item extends BaseItem, Value extends Primitive>(props: HeaderProps<Item, Value>): import("react").JSX.Element;
 export interface HeaderActionsProps {
     filterType?: FilterType;
     onFilterPopupToggle?: () => void;
     onDisplayToggle?: () => void;
 }
-export declare function HeaderActions(props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderActions(props: HeaderActionsProps): import("react").JSX.Element;
 export interface HeaderStatusProps {
     filterType?: FilterType;
     sortState?: NonNullable<InternalSortableColumn<BaseItem, Primitive>["sorted"]>;
 }
-export declare function HeaderStatus(props: HeaderStatusProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeaderStatus(props: HeaderStatusProps): import("react").JSX.Element | null;
 export interface SearchFilterPopupProps {
     searchText: string;
     onSearchTextChange: (searchText: string) => void;
     onDismiss: () => void;
 }
-export declare function SearchFilterPopup(props: SearchFilterPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchFilterPopup(props: SearchFilterPopupProps): import("react").JSX.Element;
 export interface SelectionFilterPopupProps<Value extends Primitive> {
     dictionary: Dictionary<Value> | null;
     hiddenValues: Value[];
     onHiddenValuesChange: (hiddenValues: Value[]) => void;
     onDismiss: () => void;
 }
-export declare function SelectionFilterPopup<Value extends Primitive>(props: SelectionFilterPopupProps<Value>): import("react/jsx-runtime").JSX.Element;
-export declare function BodyContainer(props: Props): import("react/jsx-runtime").JSX.Element;
-export declare function Line(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SelectionFilterPopup<Value extends Primitive>(props: SelectionFilterPopupProps<Value>): import("react").JSX.Element;
+export declare function BodyContainer(props: Props): import("react").JSX.Element;
+export declare function Line(props: Props): import("react").JSX.Element;
 interface SelectionCellProps extends Props {
     selected: boolean;
     onToggle: () => void;
 }
-export declare function SelectionCell(props: SelectionCellProps): import("react/jsx-runtime").JSX.Element;
-export declare function Cell(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SelectionCell(props: SelectionCellProps): import("react").JSX.Element;
+export declare function Cell(props: Props): import("react").JSX.Element;
 export interface ClickableProps extends Props {
     target: string;
 }
-export declare function ClickableCell(props: ClickableProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClickableCell(props: ClickableProps): import("react").JSX.Element;
 export interface FooterContainerProps {
     totalColums: number;
     pageSelector: ReactNode;
     itemsPerPageSelector: ReactNode;
 }
-export declare function FooterContainer(props: FooterContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FooterContainer(props: FooterContainerProps): import("react").JSX.Element;
 export interface ItemsPerPageSelectorProps extends Props {
     itemsPerPage: number;
     onItemsPerPageChange: (itemsPerPage: number) => void;
 }
-export declare function ItemsPerPageSelector(props: ItemsPerPageSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ItemsPerPageSelector(props: ItemsPerPageSelectorProps): import("react").JSX.Element;
 export interface PageSelectorProps extends Props {
     totalPages: number;
     currentPage: number;
     onCurrentPageChange: (page: number) => void;
 }
-export declare function PageSelector(props: PageSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PageSelector(props: PageSelectorProps): import("react").JSX.Element | null;
 export interface PageButtonProps extends Props {
     enabled: boolean;
     active?: boolean;
     onClick: () => void;
 }
-export declare function PageButton(props: PageButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageButton(props: PageButtonProps): import("react").JSX.Element;
 export interface ButtonProps extends Props {
     className?: string;
     disabled?: boolean;
@@ -111,11 +112,11 @@ export interface ButtonProps extends Props {
  * background color (when button is non-hovered) by defining a custom `--bg-default-color`, for example:
  * `<DynamicTable.Button className="[--bg-default-color:transparent]">...</DynamicTable.Button>`
  */
-export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
 export interface PopupProps extends Props {
     className?: string;
     onDismiss: () => void;
 }
-export declare function Popup(props: PopupProps): import("react/jsx-runtime").JSX.Element;
-export declare function Loader(): import("react/jsx-runtime").JSX.Element;
+export declare function Popup(props: PopupProps): import("react").JSX.Element;
+export declare function Loader(): import("react").JSX.Element;
 export {};

package/lib/DefaultTheme.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cx from "@vinorcola/utils/classNames";
 import { useEffect, useMemo } from "react";
-import { AscSortIcon, CheckedIcon, CloseIcon, ColumnsIcon, DescSortIcon, FilterIcon, HideIcon, NextIcon, PreviousIcon, SearchIcon, SortIcon, UncheckedIcon, } from "./Icon.js";
+import { AscSortIcon, CheckedIcon, DescSortIcon, FilterIcon, HideIcon, NextIcon, PreviousIcon, SearchIcon, UncheckedIcon, } from "./Icon.js";
 import { usePopup } from "./UniquePopupProvider.js";
 import DynamicTable from "./index.js";
 import { isSearchable, isSelectable } from "./useFilterState.js";
@@ -10,28 +10,8 @@ import { isSortable } from "./useSortState.js";
 export function TableContainer(props) {
     return _jsx("div", { children: props.children });
 }
-export function Controller(props) {
-    const columnListPopup = usePopup();
-    const hasHiddenColumns = props.columns.some((column) => isMaskable(column) && !column.displayed);
-    const hasFilteredColumns = props.columns.some((column) => (isSearchable(column) && column.searchText !== null) ||
-        (isSelectable(column) && column.hiddenValues.length > 0));
-    const hasHiddenFilteredColumns = hasHiddenColumns &&
-        hasFilteredColumns &&
-        props.columns.some((column) => isMaskable(column) &&
-            !column.displayed &&
-            ((isSearchable(column) && column.searchText !== null) ||
-                (isSelectable(column) && column.hiddenValues.length > 0)));
-    const hasSortedColumns = props.columns.some((column) => isSortable(column) && column.sorted !== null);
-    const hasHiddenSortedColumns = hasHiddenColumns &&
-        hasSortedColumns &&
-        props.columns.some((column) => isMaskable(column) && !column.displayed && isSortable(column) && column.sorted !== null);
-    return (_jsxs("div", { className: "relative", children: [_jsxs("ul", { className: "flex justify-end", children: [_jsx("li", { children: _jsx(DynamicTable.Button, { className: cx(hasHiddenFilteredColumns
-                                ? "[--bg-color:var(--color-orange-400)]"
-                                : hasFilteredColumns && "[--bg-color:var(--color-lime-400)]"), disabled: !hasFilteredColumns, hoverChildren: _jsx(CloseIcon, {}), onClick: props.clearFilterState, children: _jsx(FilterIcon, {}) }) }), _jsx("li", { children: _jsx(DynamicTable.Button, { className: cx(hasHiddenSortedColumns
-                                ? "[--bg-color:var(--color-orange-400)]"
-                                : hasSortedColumns && "[--bg-color:var(--color-sky-400)]"), disabled: !hasSortedColumns, hoverChildren: _jsx(CloseIcon, {}), onClick: props.clearSortState, children: _jsx(SortIcon, {}) }) }), _jsx("li", { children: _jsx(DynamicTable.Button, { className: cx(hasHiddenColumns
-                                ? "[--bg-color:var(--color-orange-400)]"
-                                : "[--bg-default-color:transparent]"), onClick: columnListPopup.show, children: _jsx(ColumnsIcon, {}) }) })] }), columnListPopup.display && (_jsx(DynamicTable.ColumnsPopup, { columns: props.columns, onDismiss: columnListPopup.dismiss }))] }));
+export function ControllerContainer(props) {
+    return (_jsxs("div", { className: "relative", children: [_jsxs("ul", { className: "flex justify-end", children: [_jsx("li", { children: props.filterButton }), _jsx("li", { children: props.sortButton }), _jsx("li", { children: props.columnButton })] }), props.columnPopup] }));
 }
 export function ColumnsPopup(props) {
     return (_jsx(DynamicTable.Popup, { className: "right-2", onDismiss: props.onDismiss, children: _jsx("main", { children: _jsx("ul", { className: "min-w-40", children: props.columns.map((column) => {

package/lib/Icon.d.ts

@@ -1,13 +1,13 @@
 export declare const DEFAULT_CLASS = "inline grow-0 shrink-0 size-[1em]";
-export declare function CheckedIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function UncheckedIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ColumnsIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function FilterIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function HideIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function NextIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function PreviousIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function SearchIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function SortIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function AscSortIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function DescSortIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function CheckedIcon(): import("react").JSX.Element;
+export declare function UncheckedIcon(): import("react").JSX.Element;
+export declare function CloseIcon(): import("react").JSX.Element;
+export declare function ColumnsIcon(): import("react").JSX.Element;
+export declare function FilterIcon(): import("react").JSX.Element;
+export declare function HideIcon(): import("react").JSX.Element;
+export declare function NextIcon(): import("react").JSX.Element;
+export declare function PreviousIcon(): import("react").JSX.Element;
+export declare function SearchIcon(): import("react").JSX.Element;
+export declare function SortIcon(): import("react").JSX.Element;
+export declare function AscSortIcon(): import("react").JSX.Element;
+export declare function DescSortIcon(): import("react").JSX.Element;

package/lib/UniquePopupProvider.d.ts

@@ -18,5 +18,5 @@ export declare function usePopup(): PopupState;
 interface Props {
     children?: ReactNode;
 }
-export default function UniquePopupProvider(props: Props): import("react/jsx-runtime").JSX.Element;
+export default function UniquePopupProvider(props: Props): import("react").JSX.Element;
 export {};

package/lib/UniquePopupProvider.js

@@ -11,21 +11,25 @@ const PopupContext = createContext(createRef());
  */
 // eslint-disable-next-line react-refresh/only-export-components
 export function usePopup() {
-    const dismiss = useContext(PopupContext);
+    const dismissRef = useContext(PopupContext);
     const [display, setDisplay] = useState(false);
     return {
         display,
         show: useCallback(() => {
-            if (dismiss.current !== null) {
-                dismiss.current();
+            if (dismissRef.current !== null) {
+                dismissRef.current();
             }
-            dismiss.current = () => {
+            dismissRef.current = () => {
                 setDisplay(false);
-                dismiss.current = null;
+                dismissRef.current = null;
             };
             setDisplay(true);
-        }, [dismiss]),
-        dismiss: dismiss.current,
+        }, [dismissRef]),
+        dismiss: useCallback(() => {
+            if (dismissRef.current !== null) {
+                dismissRef.current();
+            }
+        }, [dismissRef]),
     };
 }
 export default function UniquePopupProvider(props) {

package/lib/ValueList.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+interface Props {
+    separator?: string;
+    items: ReactNode[];
+}
+export default function ValueList(props: Props): ReactNode[];
+export {};

package/lib/ValueList.js

@@ -0,0 +1,10 @@
+export default function ValueList(props) {
+    const separator = props.separator ?? ", ";
+    return props.items.reduce((nodes, item) => {
+        if (nodes.length > 0) {
+            nodes.push(separator);
+        }
+        nodes.push(item);
+        return nodes;
+    }, []);
+}

package/lib/index.d.ts

@@ -26,10 +26,10 @@ interface BaseProps<Item extends BaseItem> {
     initialPaginationState?: PaginationState;
 }
 type Props<Item extends BaseItem> = BaseProps<Item> & SelectionOptions<Item>;
-declare function DynamicTable<Item extends BaseItem>(props: Props<Item>): import("react/jsx-runtime").JSX.Element;
+declare function DynamicTable<Item extends BaseItem>(props: Props<Item>): import("react").JSX.Element;
 declare namespace DynamicTable {
     var TableContainer: typeof import("./DefaultTheme.js").TableContainer;
-    var Controller: typeof import("./DefaultTheme.js").Controller;
+    var ControllerContainer: typeof import("./DefaultTheme.js").ControllerContainer;
     var ColumnsPopup: typeof import("./DefaultTheme.js").ColumnsPopup;
     var Table: typeof import("./DefaultTheme.js").Table;
     var HeaderContainer: typeof import("./DefaultTheme.js").HeaderContainer;

package/lib/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BodyContainer, Button, Cell, ClickableCell, ColumnsPopup, Controller, FooterContainer, Header, HeaderActions, HeaderContainer, HeaderLine, HeaderStatus, ItemsPerPageSelector, Line, Loader, PageButton, PageSelector, Popup, SearchFilterPopup, SelectionCell, SelectionFilterPopup, SelectionHeader, Table, TableContainer, } from "./DefaultTheme.js";
+import Controller from "./Controller.js";
+import { BodyContainer, Button, Cell, ClickableCell, ColumnsPopup, ControllerContainer, FooterContainer, Header, HeaderActions, HeaderContainer, HeaderLine, HeaderStatus, ItemsPerPageSelector, Line, Loader, PageButton, PageSelector, Popup, SearchFilterPopup, SelectionCell, SelectionFilterPopup, SelectionHeader, Table, TableContainer, } from "./DefaultTheme.js";
 import UniquePopupProvider from "./UniquePopupProvider.js";
 import useColumns from "./useColumns.js";
 import useFilterState from "./useFilterState.js";
@@ -17,13 +18,13 @@ export default function DynamicTable(props) {
     const { allColumns, columns: displayedColumns, items: displayedItems, } = useMaskableColumns(sortedColumns, sortedItems, props.initialColumnsMaskState);
     const { items: paginatedItems, itemsPerPage, onItemsPerPageChange, totalPages, currentPage, onCurrentPageChange, } = usePagination(displayedItems, props.initialPaginationState);
     const { isInSelectionMode, totalSelectedQuantity, unvisibleSelectedQuantity, isItemSelected, onItemSelectionToggle, } = useSelection(props, paginatedItems);
-    return (_jsx(UniquePopupProvider, { children: _jsxs(DynamicTable.TableContainer, { children: [_jsx(DynamicTable.Controller, { columns: allColumns, clearFilterState: clearFilterState, clearSortState: clearSortState }), _jsxs(DynamicTable.Table, { children: [_jsx(DynamicTable.HeaderContainer, { children: _jsxs(DynamicTable.HeaderLine, { children: [isInSelectionMode && (_jsx(DynamicTable.SelectionHeader, { totalSelected: totalSelectedQuantity, unvisibleSelected: unvisibleSelectedQuantity })), displayedColumns.map((column) => (_jsx(DynamicTable.Header, { column: column, children: column.title }, column.id)))] }) }), _jsx(DynamicTable.BodyContainer, { children: paginatedItems.map((item) => (_jsxs(DynamicTable.Line, { children: [isInSelectionMode &&
+    return (_jsx(UniquePopupProvider, { children: _jsxs(DynamicTable.TableContainer, { children: [_jsx(Controller, { columns: allColumns, clearFilterState: clearFilterState, clearSortState: clearSortState }), _jsxs(DynamicTable.Table, { children: [_jsx(DynamicTable.HeaderContainer, { children: _jsxs(DynamicTable.HeaderLine, { children: [isInSelectionMode && (_jsx(DynamicTable.SelectionHeader, { totalSelected: totalSelectedQuantity, unvisibleSelected: unvisibleSelectedQuantity })), displayedColumns.map((column) => (_jsx(DynamicTable.Header, { column: column, children: column.title }, column.id)))] }) }), _jsx(DynamicTable.BodyContainer, { children: paginatedItems.map((item) => (_jsxs(DynamicTable.Line, { children: [isInSelectionMode &&
                                         (item.isSelectable ? (_jsx(DynamicTable.SelectionCell, { selected: isItemSelected(item), onToggle: onItemSelectionToggle(item) })) : (_jsx(DynamicTable.Cell, {}))), item.target !== null
                                         ? item.values.map((value) => (_jsx(DynamicTable.ClickableCell, { target: item.target, children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column)))
                                         : item.values.map((value) => (_jsx(DynamicTable.Cell, { children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column)))] }, item.key))) }), _jsx(DynamicTable.FooterContainer, { totalColums: displayedColumns.length, pageSelector: _jsx(DynamicTable.PageSelector, { totalPages: totalPages, currentPage: currentPage, onCurrentPageChange: onCurrentPageChange }), itemsPerPageSelector: _jsx(DynamicTable.ItemsPerPageSelector, { itemsPerPage: itemsPerPage, onItemsPerPageChange: onItemsPerPageChange }) })] })] }) }));
 }
 DynamicTable.TableContainer = TableContainer;
-DynamicTable.Controller = Controller;
+DynamicTable.ControllerContainer = ControllerContainer;
 DynamicTable.ColumnsPopup = ColumnsPopup;
 DynamicTable.Table = Table;
 DynamicTable.HeaderContainer = HeaderContainer;

package/lib/useColumns.d.ts

@@ -9,8 +9,8 @@ export interface LoadingInternalColumn<Item extends BaseItem, Value extends Prim
     readonly title: string;
     readonly loadingDictionary: true;
     readonly dictionary: Promise<Dictionary<Value>>;
-    readonly resolveValue: ValueResolver<Item, Value>;
-    readonly decorateValue?: ValueDecorator<Item, Value>;
+    readonly resolveValue: ValueResolver<Item, Value | Value[]>;
+    readonly decorateValue?: ValueDecorator<Item, Value | Value[]>;
     readonly decorateNoValue?: () => ReactNode;
 }
 /**
@@ -21,8 +21,8 @@ export interface LoadedInternalColumn<Item extends BaseItem, Value extends Primi
     readonly title: string;
     readonly loadingDictionary: false;
     readonly dictionary?: Dictionary<Value>;
-    readonly resolveValue: ValueResolver<Item, Value>;
-    readonly decorateValue?: ValueDecorator<Item, Value>;
+    readonly resolveValue: ValueResolver<Item, Value | Value[]>;
+    readonly decorateValue?: ValueDecorator<Item, Value | Value[]>;
     readonly decorateNoValue?: () => ReactNode;
 }
 /**

package/lib/useColumns.js

@@ -14,6 +14,7 @@ export default function useColumns(definitions) {
     useEffect(() => {
         definitionVersion.current++;
         const currentVersion = definitionVersion.current;
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setColumns(resolveInitialColumnState(definitions));
         definitions.forEach((definition, index) => {
             if (definition.dictionary instanceof Promise) {

package/lib/useFilterState.js

@@ -47,25 +47,26 @@ export default function useFilterState(columns, items, initialFilterState = {})
                 };
             }
         }), [columns, filterState]),
-        items: useMemo(() => items.filter((items) => items.values.every((value) => {
-            if (value.loading) {
-                // Keep loading values.
-                return true;
-            }
-            const columnFilterState = filterState[value.column] ?? null;
-            if (columnFilterState === null) {
-                // There is no filter on this column.
-                return true;
-            }
-            return isSearchedState(columnFilterState)
-                ? matchSearch(value, columnFilterState)
-                : matchSelection(value, columnFilterState);
-        })), [items, filterState]),
+        items: useMemo(() => items.filter((items) => items.values.every((value) => isValueMatchingColumnFilter(filterState, value))), [items, filterState]),
         clearFilterState: useCallback(() => {
             setFilterState({});
         }, []),
     };
 }
+function isValueMatchingColumnFilter(filterState, value) {
+    if (value.loading) {
+        // Keep loading values.
+        return true;
+    }
+    const columnFilterState = filterState[value.column] ?? null;
+    if (columnFilterState === null) {
+        // There is no filter on this column.
+        return true;
+    }
+    return isSearchedState(columnFilterState)
+        ? matchSearch(value, columnFilterState)
+        : matchSelection(value, columnFilterState);
+}
 function isSearchedState(state) {
     return state.searchText !== undefined;
 }
@@ -81,5 +82,8 @@ function matchSelection(value, filterState) {
         // Filter out empty values.
         return false;
     }
+    if (Array.isArray(value.raw)) {
+        return value.raw.some((rawValue) => !filterState.hiddenValues.includes(rawValue));
+    }
     return !filterState.hiddenValues.includes(value.raw);
 }

package/lib/useItems.d.ts

@@ -5,18 +5,18 @@ import type { SortableValue } from "./useSortState.js";
 /**
  * A value that is loading (waiting for an async column dictionary to be available).
  */
-export interface LoadingInternalValue {
+export interface LoadingInternalValue<Value extends Primitive | Primitive[] = Primitive | Primitive[]> {
     readonly column: string;
     readonly loading: true;
-    readonly raw: Primitive | null;
+    readonly raw: Value | null;
 }
 /**
  * A loaded value, ready for filter, sort and display.
  */
-export interface LoadedInternalValue {
+export interface LoadedInternalValue<Value extends Primitive | Primitive[] = Primitive | Primitive[]> {
     readonly column: string;
     readonly loading: false;
-    readonly raw: Primitive | null;
+    readonly raw: Value | null;
     readonly search: string | null;
     readonly sort: SortableValue;
     readonly display: ReactNode;
@@ -24,7 +24,7 @@ export interface LoadedInternalValue {
 /**
  * A value, either in loading state ou in loaded state.
  */
-export type InternalValue = LoadingInternalValue | LoadedInternalValue;
+export type InternalValue<Value extends Primitive | Primitive[] = Primitive | Primitive[]> = LoadingInternalValue<Value> | LoadedInternalValue<Value>;
 /**
  * An internal item.
  */

package/lib/useItems.js

@@ -1,7 +1,8 @@
-import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { displayInteger } from "@vinorcola/utils/number";
 import { extractSearchableText } from "@vinorcola/utils/text";
-import { useMemo } from "react";
+import { Fragment, useMemo } from "react";
+import ValueList from "./ValueList.js";
 export default function useItems(items, itemTarget, columns, canSelectItem) {
     return useMemo(() => items.map((item) => ({
         key: item.id,
@@ -12,35 +13,46 @@ export default function useItems(items, itemTarget, columns, canSelectItem) {
     })), [items, itemTarget, columns, canSelectItem]);
 }
 function resolveInternalValue(item, column) {
-    const raw = column.resolveValue(item);
+    const value = column.resolveValue(item);
     if (column.loadingDictionary) {
         return {
             column: column.id,
             loading: true,
-            raw,
+            raw: value,
         };
     }
-    let display = resolveDisplayableValue(raw, column.dictionary);
-    if (raw === null || raw === undefined || raw === "") {
+    let display;
+    if (value === null || value === undefined || value === "") {
         if (column.decorateNoValue !== undefined) {
             display = column.decorateNoValue();
         }
+        else {
+            display = null;
+        }
+    }
+    else if (column.decorateValue !== undefined) {
+        display = column.decorateValue(value, display, item);
     }
     else {
-        if (column.decorateValue !== undefined) {
-            display = column.decorateValue(raw, display, item);
-        }
+        display = resolveDisplayableValue(value, column.dictionary);
     }
     return {
         column: column.id,
         loading: false,
-        raw,
-        search: resolveSearchableValue(raw, column.dictionary),
-        sort: resolveSortableValue(raw, column.dictionary),
+        raw: value,
+        search: resolveSearchableValue(value, column.dictionary),
+        sort: resolveSortableValue(value, column.dictionary),
         display,
     };
 }
+const ARBITRARY_SEARCH_SEPARATOR = "#|!$#"; // To avoid searching text across several values, we separate each value by
+//                                         // this arbitrary (unlikely searched by users) text.
 function resolveSearchableValue(value, dictionary) {
+    return Array.isArray(value)
+        ? value.map((value) => resolveSearchableSingleValue(value, dictionary)).join(ARBITRARY_SEARCH_SEPARATOR)
+        : resolveSearchableSingleValue(value, dictionary);
+}
+function resolveSearchableSingleValue(value, dictionary) {
     if (dictionary !== undefined) {
         // Columns with dictionary are selectable, not searchable.
         return null;
@@ -60,6 +72,13 @@ function resolveSearchableValue(value, dictionary) {
     return extractSearchableText(value);
 }
 function resolveSortableValue(value, dictionary) {
+    return Array.isArray(value)
+        ? value.length === 0
+            ? null
+            : resolveSortableSingleValue(value[0], dictionary) // Sort using first value (until we find a better way!)
+        : resolveSortableSingleValue(value, dictionary);
+}
+function resolveSortableSingleValue(value, dictionary) {
     if (value === null) {
         return null;
     }
@@ -78,6 +97,9 @@ function resolveSortableValue(value, dictionary) {
     return value.toLocaleLowerCase();
 }
 function resolveDisplayableValue(value, dictionary) {
+    return Array.isArray(value) ? (_jsx(ValueList, { items: value.map((value, index) => resolveDisplayableSingleValue(value, dictionary, index)) })) : (resolveDisplayableSingleValue(value, dictionary));
+}
+function resolveDisplayableSingleValue(value, dictionary, nodeKey) {
     if (value === null) {
         return null;
     }
@@ -86,7 +108,7 @@ function resolveDisplayableValue(value, dictionary) {
         if (dictionaryEntry === undefined) {
             return dictionary.unknownMessage;
         }
-        return dictionaryEntry.prepend !== undefined ? (_jsxs(_Fragment, { children: [dictionaryEntry.prepend, dictionaryEntry.title] })) : (dictionaryEntry.title);
+        return dictionaryEntry.prepend !== undefined ? (_jsxs(Fragment, { children: [dictionaryEntry.prepend, dictionaryEntry.title] }, nodeKey)) : (dictionaryEntry.title);
     }
     if (typeof value === "boolean") {
         return value ? "true" : "false";

package/lib/useMaskableColumns.d.ts

@@ -26,7 +26,7 @@ export default function useMaskableColumns<Item extends BaseItem>(columns: Inter
     allColumns: InternalMaskableColumn<Item, Primitive>[];
     columns: InternalMaskableColumn<Item, Primitive>[];
     items: {
-        values: import("./useItems.js").InternalValue[];
+        values: import("./useItems.js").InternalValue<Primitive | Primitive[]>[];
         key: import("react").Key;
         item: Item;
         isSelectable: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinorcola/dynamic-table",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "A table to ease the display of a filterable, sortable and paginable dataset.",
   "keywords": [
     "table",