@vinorcola/dynamic-table 1.2.1 → 1.2.3

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-runtime").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";
@@ -7,12 +7,13 @@ 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 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-runtime").JSX.Element;
 export interface ColumnsPopupProps<Item extends BaseItem> {
     columns: InternalColumns<Item>;
     onDismiss: () => void;

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/index.d.ts

@@ -11,7 +11,7 @@ export type BaseItem = Record<string, any> & {
 };
 export type ItemKey<Item extends BaseItem> = Extract<keyof Item, string>;
 export type { ColumnDefinition, ValueResolver } from "./ColumnDefinition.js";
-export { default as Dictionary } from "./Dictionary.js";
+export { default as Dictionary, DictionaryEntry } from "./Dictionary.js";
 export type { FilterState } from "./useFilterState.js";
 export type { SortDirection, SortState } from "./useSortState.js";
 export type { ColumnsMaskState } from "./useMaskableColumns.js";
@@ -29,7 +29,7 @@ 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 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/package.json

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