pallote-react 0.16.6 → 0.16.8

package/dist/components/DataTable.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, HTMLAttributes } from 'react';
+import { type TableCellKind } from './TableCell';
 export type DataTableFilterType = 'text' | 'select';
 export interface DataTableColumnDef<TData> {
     accessorKey: keyof TData & string;
@@ -8,6 +9,8 @@ export interface DataTableColumnDef<TData> {
     filterType?: DataTableFilterType;
     filterOptions?: string[];
     cell?: (value: TData[keyof TData & string], row: TData) => ReactNode;
+    className?: string;
+    kind?: TableCellKind;
 }
 export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     data: TData[];
@@ -21,5 +24,6 @@ export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElemen
     dense?: boolean;
     border?: boolean;
     className?: string;
+    kind?: TableCellKind;
 }
-export declare function DataTable<TData extends Record<string, unknown>>({ data, columns: columnDefs, enableSearch, searchPlaceholder, pageSize: initialPageSize, pageSizeOptions, striped, hasHover, dense, border, className, ...props }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends Record<string, unknown>>({ data, columns: columnDefs, enableSearch, searchPlaceholder, pageSize: initialPageSize, pageSizeOptions, striped, hasHover, dense, border, kind: defaultKind, className, ...props }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TableCell.d.ts

@@ -1,9 +1,8 @@
 import { TdHTMLAttributes, ReactNode } from 'react';
-type TableCellKind = 'default' | 'number' | 'action';
+export type TableCellKind = 'default' | 'number' | 'action';
 export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     kind?: TableCellKind;
     className?: string;
     children?: ReactNode;
 }
 export declare const TableCell: ({ kind, className, children, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/index.d.ts

@@ -92,7 +92,7 @@ export type { SwitchProps } from './components/Switch';
 export type { TabProps } from './components/Tab';
 export type { TableProps } from './components/Table';
 export type { TableBodyProps } from './components/TableBody';
-export type { TableCellProps } from './components/TableCell';
+export type { TableCellProps, TableCellKind } from './components/TableCell';
 export type { TablePaginationProps } from './components/TablePagination';
 export type { TableHeadProps } from './components/TableHead';
 export type { TableRowProps } from './components/TableRow';

package/dist/index.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { MagnifyingGlassIcon, CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 const Color = ({ fill, stroke, customFill, customStroke, className, children, ...props }) => {
@@ -123,7 +124,7 @@ const Accordion = ({ size = 'md', allowMultiple = false, transparent, className,
             }) }) }));
 };
 
-const o$6 = createContext({
+const o$4 = createContext({
   color: "currentColor",
   size: "1em",
   weight: "regular",
@@ -147,7 +148,7 @@ const p = e$9.forwardRef(
       weight: f = "regular",
       mirrored: g = false,
       ...w
-    } = e$9.useContext(o$6);
+    } = e$9.useContext(o$4);
     return /* @__PURE__ */ e$9.createElement(
       "svg",
       {
@@ -235,7 +236,7 @@ const AccordionItem = ({ icon, label, disabled, className, children, isOpen = fa
         ]), ...props, children: [jsxs("button", { type: "button", id: headerId, className: classnames('accordion_control'), onClick: handleClick, onKeyDown: handleKeyDown, "aria-expanded": isOpen, "aria-controls": panelId, "aria-disabled": disabled ? true : undefined, disabled: disabled, children: [icon ? jsx("span", { className: "accordion_icon", "aria-hidden": "true", children: icon }) : null, jsx(Text, { className: "accordion_header", variant: labelVariant, weight: "bold", children: label }), jsx(e$8, { className: "accordion_icon accordion_icon-arrow", "aria-hidden": "true" })] }), jsx("div", { id: panelId, ref: contentRef, role: "region", "aria-labelledby": headerId, className: classnames('accordion_content'), style: { maxHeight }, hidden: !isOpen, children: children })] }));
 };
 
-const a$8 = /* @__PURE__ */ new Map([
+const a$6 = /* @__PURE__ */ new Map([
   [
     "bold",
     /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z" }))
@@ -268,7 +269,7 @@ const a$8 = /* @__PURE__ */ new Map([
   ]
 ]);
 
-const e$7 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$8 }));
+const e$7 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$6 }));
 e$7.displayName = "XIcon";
 
 const Alert = ({ color = 'success', variant = 'toast', title, subtitle, dense, noIcon, show, onClose, className, ...props }) => {
@@ -463,66 +464,6 @@ const Chip = ({ color = 'default', dense, avatar, disabled, onClose, className,
             ]), role: "listitem", "aria-disabled": disabled ? true : undefined, ...props, children: [avatar ? (jsx("img", { className: classnames('chip_avatar'), src: avatar, alt: "", "aria-hidden": "true" })) : null, children, onClose ? (jsx("button", { type: "button", className: classnames('chip_close'), onClick: onClose, disabled: disabled, "aria-label": "Remove", children: jsx(e$7, { size: dense ? 16 : 20, "aria-hidden": "true" }) })) : null] }) }));
 };
 
-const a$7 = /* @__PURE__ */ new Map([
-  [
-    "bold",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z" }))
-  ],
-  [
-    "duotone",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,160H48l80-80Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M213.66,154.34l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,48,168H208a8,8,0,0,0,5.66-13.66ZM67.31,152,128,91.31,188.69,152Z" }))
-  ],
-  [
-    "fill",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M215.39,163.06A8,8,0,0,1,208,168H48a8,8,0,0,1-5.66-13.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,215.39,163.06Z" }))
-  ],
-  [
-    "light",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M212.24,164.24a6,6,0,0,1-8.48,0L128,88.49,52.24,164.24a6,6,0,0,1-8.48-8.48l80-80a6,6,0,0,1,8.48,0l80,80A6,6,0,0,1,212.24,164.24Z" }))
-  ],
-  [
-    "regular",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }))
-  ],
-  [
-    "thin",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M210.83,162.83a4,4,0,0,1-5.66,0L128,85.66,50.83,162.83a4,4,0,0,1-5.66-5.66l80-80a4,4,0,0,1,5.66,0l80,80A4,4,0,0,1,210.83,162.83Z" }))
-  ]
-]);
-
-const o$5 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$7 }));
-o$5.displayName = "CaretUpIcon";
-
-const a$6 = /* @__PURE__ */ new Map([
-  [
-    "bold",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z" }))
-  ],
-  [
-    "duotone",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" }))
-  ],
-  [
-    "fill",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z" }))
-  ],
-  [
-    "light",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M228.24,219.76l-51.38-51.38a86.15,86.15,0,1,0-8.48,8.48l51.38,51.38a6,6,0,0,0,8.48-8.48ZM38,112a74,74,0,1,1,74,74A74.09,74.09,0,0,1,38,112Z" }))
-  ],
-  [
-    "regular",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" }))
-  ],
-  [
-    "thin",
-    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z" }))
-  ]
-]);
-
-const o$4 = e$9.forwardRef((s, n) => /* @__PURE__ */ e$9.createElement(p, { ref: n, ...s, weights: a$6 }));
-o$4.displayName = "MagnifyingGlassIcon";
-
 const DenseContext = createContext(false);
 const Table = ({ striped, hasHover, dense, border, className, children, ...props }) => {
     return (jsx(DenseContext.Provider, { value: dense ?? false, children: jsx("div", { className: classnames([
@@ -859,7 +800,7 @@ function ColumnFilter({ header }) {
     }
     return (jsx(Input, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, placeholder: "Filter...", className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined) }));
 }
-function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder = 'Search...', pageSize: initialPageSize = 10, pageSizeOptions = [10, 25, 50, 100], striped, hasHover = true, dense, border, className, ...props }) {
+function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder = 'Search...', pageSize: initialPageSize = 10, pageSizeOptions = [10, 25, 50, 100], striped, hasHover = true, dense, border, kind: defaultKind, className, ...props }) {
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
@@ -874,6 +815,8 @@ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder
         meta: {
             filterType: col.filterType ?? 'text',
             filterOptions: col.filterOptions,
+            className: col.className,
+            kind: col.kind,
         },
     })), [columnDefs]);
     const table = useReactTable({
@@ -892,11 +835,23 @@ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder
         },
     });
     const hasFilters = columnDefs.some(col => col.enableFiltering === true);
-    return (jsxs("div", { className: classnames('datatable', className), ...props, children: [enableSearch && (jsx("div", { className: "datatable_search", children: jsx(Input, { id: "datatable-search", label: "Search", hideLabel: true, placeholder: searchPlaceholder, icon: jsx(o$4, {}), value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsxs(Table, { striped: striped, hasHover: hasHover, dense: dense, border: border, children: [jsxs(TableHead, { children: [table.getHeaderGroups().map(headerGroup => (jsx(TableRow, { children: headerGroup.headers.map(header => (jsx(TableCell, { className: classnames({
-                                        'datatable_sortable': header.column.getCanSort()
-                                    }), onClick: header.column.getToggleSortingHandler(), "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending'
-                                        : header.column.getIsSorted() === 'desc' ? 'descending'
-                                            : undefined, children: jsxs("span", { className: "datatable_headerContent", children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: "datatable_sortIcon", "aria-hidden": "true", children: header.column.getIsSorted() === 'asc' ? (jsx(e$8, { size: 12 })) : header.column.getIsSorted() === 'desc' ? (jsx(o$5, { size: 12 })) : (jsx(e$8, { size: 12, className: "datatable_sortIcon-inactive" })) }))] }) }, header.id))) }, headerGroup.id))), hasFilters && (jsx(TableRow, { className: "datatable_filterRow", children: table.getHeaderGroups()[0].headers.map(header => (jsx(TableCell, { children: header.column.getCanFilter() ? (jsx(ColumnFilter, { header: header })) : null }, `filter-${header.id}`))) }))] }), jsx(TableBody, { children: table.getRowModel().rows.length === 0 ? (jsx(TableRow, { children: jsx(TableCell, { colSpan: columnDefs.length, className: "datatable_empty", children: "No results found" }) })) : (table.getRowModel().rows.map(row => (jsx(TableRow, { children: row.getVisibleCells().map(cell => (jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] }), jsx(TablePagination, { pageIndex: table.getState().pagination.pageIndex, pageCount: table.getPageCount(), pageSize: table.getState().pagination.pageSize, pageSizeOptions: pageSizeOptions, totalRows: table.getFilteredRowModel().rows.length, onPageChange: (page) => table.setPageIndex(page), onPageSizeChange: (size) => table.setPageSize(size) })] }));
+    return (jsxs("div", { className: classnames('datatable', className), ...props, children: [enableSearch && (jsx("div", { className: "datatable_search", children: jsx(Input, { id: "datatable-search", label: "Search", hideLabel: true, placeholder: searchPlaceholder, icon: jsx(MagnifyingGlassIcon, {}), value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsxs(Table, { striped: striped, hasHover: hasHover, dense: dense, border: border, children: [jsxs(TableHead, { children: [table.getHeaderGroups().map(headerGroup => (jsx(TableRow, { children: headerGroup.headers.map(header => {
+                                    const meta = header.column.columnDef.meta;
+                                    const cellKind = meta?.kind ?? defaultKind ?? 'default';
+                                    return (jsx(TableCell, { kind: cellKind, className: classnames(meta?.className, {
+                                            'datatable_sortable': header.column.getCanSort()
+                                        }), onClick: header.column.getToggleSortingHandler(), "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending'
+                                            : header.column.getIsSorted() === 'desc' ? 'descending'
+                                                : undefined, children: jsxs("span", { className: "datatable_headerContent", children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: "datatable_sortIcon", "aria-hidden": "true", children: header.column.getIsSorted() === 'asc' ? (jsx(CaretDownIcon, { size: 12 })) : header.column.getIsSorted() === 'desc' ? (jsx(CaretUpIcon, { size: 12 })) : (jsx(CaretDownIcon, { size: 12, className: "datatable_sortIcon-inactive" })) }))] }) }, header.id));
+                                }) }, headerGroup.id))), hasFilters && (jsx(TableRow, { className: "datatable_filterRow", children: table.getHeaderGroups()[0].headers.map(header => {
+                                    const meta = header.column.columnDef.meta;
+                                    const cellKind = meta?.kind ?? defaultKind ?? 'default';
+                                    return (jsx(TableCell, { kind: cellKind, className: meta?.className, children: header.column.getCanFilter() ? (jsx(ColumnFilter, { header: header })) : null }, `filter-${header.id}`));
+                                }) }))] }), jsx(TableBody, { children: table.getRowModel().rows.length === 0 ? (jsx(TableRow, { children: jsx(TableCell, { colSpan: columnDefs.length, className: "datatable_empty", children: "No results found" }) })) : (table.getRowModel().rows.map(row => (jsx(TableRow, { children: row.getVisibleCells().map(cell => {
+                                const meta = cell.column.columnDef.meta;
+                                const cellKind = meta?.kind ?? defaultKind ?? 'default';
+                                return (jsx(TableCell, { kind: cellKind, className: meta?.className, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                            }) }, row.id)))) })] }), jsx(TablePagination, { pageIndex: table.getState().pagination.pageIndex, pageCount: table.getPageCount(), pageSize: table.getState().pagination.pageSize, pageSizeOptions: pageSizeOptions, totalRows: table.getFilteredRowModel().rows.length, onPageChange: (page) => table.setPageIndex(page), onPageSizeChange: (size) => table.setPageSize(size) })] }));
 }
 
 const Divider = ({ direction = 'landscape', padding = 'md', className, ...props }) => {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.6",
+  "version": "0.16.8",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.6",
+  "version": "0.16.8",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",