pallote-react 0.16.8 → 0.16.10

package/dist/components/DataTable.d.ts

@@ -1,13 +1,18 @@
 import { ReactNode, HTMLAttributes } from 'react';
 import { type TableCellKind } from './TableCell';
 export type DataTableFilterType = 'text' | 'select';
+/** Option value for filtering; label is shown in the dropdown. Use when row values are raw (e.g. in_progress) but you want formatted labels (e.g. In progress). */
+export type DataTableFilterOption = string | {
+    value: string;
+    label: string;
+};
 export interface DataTableColumnDef<TData> {
     accessorKey: keyof TData & string;
     header: string;
     enableSorting?: boolean;
     enableFiltering?: boolean;
     filterType?: DataTableFilterType;
-    filterOptions?: string[];
+    filterOptions?: DataTableFilterOption[];
     cell?: (value: TData[keyof TData & string], row: TData) => ReactNode;
     className?: string;
     kind?: TableCellKind;

package/dist/components/Section.d.ts

@@ -5,9 +5,8 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
     align?: SectionAlign;
     color?: SectionColor;
     landing?: boolean;
-    header?: boolean;
     className?: string;
     children: ReactNode;
 }
-export declare const Section: ({ align, color, landing, header, className, children, ...props }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: ({ align, color, landing, className, children, ...props }: SectionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SectionHeader.d.ts

@@ -1,13 +1,13 @@
 import { HTMLAttributes, ReactNode } from 'react';
-type TitleComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+type TitleLevel = 1 | 2 | 3;
 export interface SectionHeaderProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
     title: string;
-    promoteTitle?: boolean;
-    titleComponent?: TitleComponent;
+    titleLevel?: TitleLevel;
     subtitle?: ReactNode;
     actions?: ReactNode;
+    actionsPosition?: 'right' | 'bottom';
     className?: string;
 }
-export declare const SectionHeader: ({ label, title, promoteTitle, titleComponent, subtitle, actions, className, ...props }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionHeader: ({ label, title, titleLevel, subtitle, actions, actionsPosition, className, ...props }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -68,7 +68,7 @@ export type { CardMediaProps } from './components/CardMedia';
 export type { CheckboxProps } from './components/Checkbox';
 export type { CheckboxesProps } from './components/Checkboxes';
 export type { ChipProps } from './components/Chip';
-export type { DataTableProps, DataTableColumnDef, DataTableFilterType } from './components/DataTable';
+export type { DataTableProps, DataTableColumnDef, DataTableFilterType, DataTableFilterOption } from './components/DataTable';
 export type { DividerProps } from './components/Divider';
 export type { InputProps } from './components/Input';
 export type { InputLabelProps } from './components/InputLabel';

package/dist/index.js

@@ -790,15 +790,19 @@ const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon
                     : null), ...props })] }));
 };
 
+function normalizeFilterOption(opt) {
+    return typeof opt === 'string' ? { value: opt, label: opt } : opt;
+}
 function ColumnFilter({ header }) {
     const columnDef = header.column.columnDef.meta;
     const filterType = columnDef?.filterType ?? 'text';
     const filterOptions = columnDef?.filterOptions ?? [];
     const filterValue = header.column.getFilterValue() ?? '';
     if (filterType === 'select') {
-        return (jsxs(Select, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined), children: [jsx("option", { value: "", children: "All" }), filterOptions.map(opt => (jsx("option", { value: opt, children: opt }, opt)))] }));
+        const options = filterOptions.map(normalizeFilterOption);
+        return (jsxs(Select, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined), children: [jsx("option", { value: "", children: "All" }), options.map(({ value, label }) => (jsx("option", { value: value, children: label }, value)))] }));
     }
-    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) }));
+    return (jsx(Input, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, placeholder: "Search column", 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, kind: defaultKind, className, ...props }) {
     const [sorting, setSorting] = useState([]);
@@ -941,26 +945,31 @@ const Nav = ({ direction, dense, className, children, ...props }) => {
         ]), ...props, children: jsx("div", { className: 'nav_container', children: children }) }));
 };
 
-const SectionHeader = ({ label, title, promoteTitle = false, titleComponent = 'h2', subtitle, actions, className, ...props }) => {
+const SectionHeader = ({ label, title, titleLevel = 2, subtitle, actions, actionsPosition, className, ...props }) => {
+    const titleVariant = titleLevel === 1 ? 'h2' : titleLevel === 2 ? 'h3' : 'h4';
+    const titleComponent = titleLevel === 1 ? 'h1' : titleLevel === 2 ? 'h2' : 'h3';
     return (jsxs("div", { className: classnames([
             'section_header',
+            `section_header-${titleLevel}`,
             className
-        ]), ...props, children: [label ? jsx(Text, { className: classnames('section_label'), children: label }) : null, jsx(Text, { className: "section_title", component: titleComponent || (promoteTitle ? 'h1' : 'h2'), children: title }), subtitle ? jsx("div", { className: classnames('section_subtitle'), children: subtitle }) : null, actions ? (jsx("div", { className: "section_actions", children: actions })) : null] }));
+        ]), ...props, children: [label ? jsx(Text, { className: classnames('section_label'), children: label }) : null, jsxs("div", { className: "section_titleWrapper", children: [jsx(Text, { className: "section_title", variant: titleVariant, component: titleComponent, children: title }), actions && actionsPosition === 'right' ? (jsx(Display, { hide: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : null] }), subtitle ? jsx("div", { className: classnames('section_subtitle'), children: subtitle }) : null, actions ? (actionsPosition === 'right' ? (jsx(Display, { show: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : (jsx("div", { className: "section_actions", children: actions }))) : null] }));
 };
 
-const Section = ({ align = 'left', color = 'default', landing, header, className, children, ...props }) => {
+const Section = ({ align = 'left', color = 'default', landing, className, children, ...props }) => {
     return (jsx("div", { className: classnames([
             'section',
             {
                 [`section-${align}`]: align,
                 [`section-${color}`]: color,
-                'section-landing': landing,
-                'section-header': header
+                'section-landing': landing
             },
             className
-        ]), ...props, children: jsx("div", { className: 'section_container', children: e__default.Children.map(children, child => {
-                if (e__default.isValidElement(child) && child.type === SectionHeader) {
-                    return e__default.cloneElement(child, { promoteTitle: landing || header });
+        ]), ...props, children: jsx("div", { className: 'section_container', children: Children.map(children, child => {
+                if (isValidElement(child) && child.type === SectionHeader) {
+                    const currentTitleLevel = child.props.titleLevel;
+                    return cloneElement(child, {
+                        titleLevel: currentTitleLevel ?? (landing ? 1 : 2)
+                    });
                 }
                 return child;
             }) }) }));

package/dist/package.json

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

package/package.json

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