@douglasneuroinformatics/libui 2.2.4 → 2.3.1

package/dist/components/ActionDropdown/ActionDropdown.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { DropdownMenuContentProps } from '../DropdownMenu/DropdownMenuContent.js';
+type ActionDropdownOptions = {
+    [key: string]: string;
+} | readonly string[];
+type ActionDropdownOptionKey<T> = T extends readonly string[] ? T[number] : T extends {
+    [key: string]: string;
+} ? Extract<keyof T, string> : never;
+export type ActionDropdownProps<T extends ActionDropdownOptions> = {
+    align?: DropdownMenuContentProps['align'];
+    /** Callback function invoked when user clicks an option */
+    onSelection: (option: ActionDropdownOptionKey<T>) => void;
+    /** Either a list of options for the dropdown, or an object with options mapped to custom labels  */
+    options: T;
+    /** The text content for the dropdown toggle */
+    title: string;
+};
+export declare function ActionDropdown<const T extends ActionDropdownOptions>({ align, onSelection, options, title }: ActionDropdownProps<T>): React.JSX.Element;
+export {};
+//# sourceMappingURL=ActionDropdown.d.ts.map

package/dist/components/ActionDropdown/ActionDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvF,KAAK,qBAAqB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,SAAS,MAAM,EAAE,CAAC;AAE3E,KAAK,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,MAAM,EAAE,GACzD,CAAC,CAAC,MAAM,CAAC,GACT,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACjC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACxB,KAAK,CAAC;AAEZ,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IACjE,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAE1C,2DAA2D;IAC3D,WAAW,EAAE,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE1D,oGAAoG;IACpG,OAAO,EAAE,CAAC,CAAC;IAEX,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,CAAC,CAAC,SAAS,qBAAqB,EAAE,EACpE,KAAe,EACf,WAAW,EACX,OAAO,EACP,KAAK,EACN,EAAE,mBAAmB,CAAC,CAAC,CAAC,qBAyBxB"}

package/dist/components/ActionDropdown/ActionDropdown.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DropdownButton } from '../DropdownButton/DropdownButton.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+// eslint-disable-next-line react/function-component-definition
+export function ActionDropdown({ align = 'start', onSelection, options, title }) {
+    const optionKeys = options instanceof Array ? options : Object.keys(options);
+    return (React.createElement(DropdownMenu, null,
+        React.createElement("div", { className: "w-full" },
+            React.createElement(DropdownMenu.Trigger, { asChild: true },
+                React.createElement(DropdownButton, null, title)),
+            React.createElement(DropdownMenu.Content, { align: align, style: { width: 'var(--radix-popper-anchor-width)' } },
+                React.createElement(DropdownMenu.Group, null, optionKeys.map((option) => (React.createElement(DropdownMenu.Item, { key: option, onClick: () => {
+                        onSelection(option);
+                    } }, Array.isArray(options) ? option : options[option]))))))));
+}

package/dist/components/ClientTable/ClientTable.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export type ClientTableEntry = {
+    [key: string]: unknown;
+};
+export type ClientFieldFactory<T extends ClientTableEntry = ClientTableEntry> = (entry: T) => string;
+export type ClientTableColumn<T extends ClientTableEntry> = {
+    /** How to determine the values for column */
+    field: ClientFieldFactory<T> | keyof T;
+    /** Override the default formatter for this field */
+    formatter?: (value: any) => string;
+    /** The label to be displayed on the header */
+    label: string;
+};
+export type ClientTableDropdownOptions<T extends ClientTableEntry> = {
+    icon?: React.ComponentType<Omit<React.SVGProps<SVGSVGElement>, 'ref'>>;
+    label: string;
+    onSelection: (column: ClientTableColumn<T>) => void;
+}[];
+export type ClientTableColumnProps<T extends ClientTableEntry> = {
+    column: ClientTableColumn<T>;
+    dropdownOptions?: ClientTableDropdownOptions<T>;
+};
+export type ClientTableProps<T extends ClientTableEntry> = {
+    className?: string;
+    columnDropdownOptions?: ClientTableDropdownOptions<T>;
+    columns: ClientTableColumn<T>[];
+    data: T[];
+    entriesPerPage?: number;
+    minRows?: number;
+    onEntryClick?: (entry: T) => void;
+};
+export declare const ClientTable: <T extends ClientTableEntry>({ className, columnDropdownOptions, columns, data, entriesPerPage, minRows, onEntryClick }: ClientTableProps<T>) => React.JSX.Element;
+//# sourceMappingURL=ClientTable.d.ts.map

package/dist/components/ClientTable/ClientTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientTable.d.ts","sourceRoot":"","sources":["../../../src/components/ClientTable/ClientTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA0BxC,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;AAErG,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC1D,6CAA6C;IAC7C,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAEvC,oDAAoD;IAEpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;IAEnC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACrD,EAAE,CAAC;AAEJ,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC/D,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;IACtD,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,WAAW,2HAQrB,iBAAiB,CAAC,CAAC,sBA6FrB,CAAC"}

package/dist/components/ClientTable/ClientTable.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { range } from 'lodash-es';
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../utils.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { Table } from '../Table/Table.js';
+import { ClientTablePagination } from './ClientTablePagination.js';
+/** Coerces the value in a cell to a string for consistant display purposes */
+function defaultFormatter(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    else if (typeof value === 'number') {
+        return value.toFixed(2).toString();
+    }
+    else if (typeof value === 'undefined') {
+        return 'NA';
+    }
+    if (value instanceof Date) {
+        return toBasicISOString(value);
+    }
+    return JSON.stringify(value);
+}
+export const ClientTable = ({ className, columnDropdownOptions, columns, data, entriesPerPage = 10, minRows, onEntryClick }) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const pageCount = Math.max(Math.ceil(data.length / entriesPerPage), 1);
+    const firstEntry = data.length === 0 ? 0 : (currentPage - 1) * entriesPerPage + 1;
+    const lastEntry = Math.min(firstEntry + entriesPerPage - 1, data.length);
+    const currentEntries = data.slice(firstEntry - 1, lastEntry);
+    const nRows = Math.max(currentEntries.length, minRows ?? -1);
+    return (React.createElement("div", { className: className },
+        React.createElement("div", { className: "rounded-md border bg-card tracking-tight text-muted-foreground shadow" },
+            React.createElement(Table, null,
+                React.createElement(Table.Header, null,
+                    React.createElement(Table.Row, null, columns.map((column, i) => (React.createElement(Table.Head, { className: "whitespace-nowrap text-foreground", key: i }, columnDropdownOptions ? (React.createElement(DropdownMenu, null,
+                        React.createElement(DropdownMenu.Trigger, { className: "flex items-center justify-between gap-3" },
+                            React.createElement("span", null, column.label),
+                            React.createElement(ChevronDownIcon, null)),
+                        React.createElement(DropdownMenu.Content, { align: "start" },
+                            React.createElement(DropdownMenu.Group, null, columnDropdownOptions.map((option) => {
+                                const Icon = option.icon;
+                                return (React.createElement(DropdownMenu.Item, { key: option.label, onClick: () => {
+                                        option.onSelection(column);
+                                    } },
+                                    Icon && React.createElement(Icon, { className: "mr-2", height: 16, width: 16 }),
+                                    option.label));
+                            }))))) : (column.label)))))),
+                React.createElement(Table.Body, null, range(nRows).map((i) => {
+                    const entry = currentEntries[i];
+                    return (React.createElement(Table.Row, { className: cn(typeof onEntryClick === 'function' && 'cursor-pointer hover:backdrop-brightness-95'), key: i, onClick: () => {
+                            onEntryClick?.(entry);
+                        } }, columns.map(({ field, formatter }, j) => {
+                        let value;
+                        if (!entry) {
+                            value = 'NA';
+                        }
+                        else if (typeof field === 'function') {
+                            value = field(entry);
+                        }
+                        else {
+                            value = entry[field];
+                        }
+                        const formattedValue = entry && formatter ? formatter(value) : defaultFormatter(value);
+                        return (React.createElement(Table.Cell, { className: cn('text-ellipsis leading-none', !entry && 'invisible'), key: j }, formattedValue));
+                    })));
+                })))),
+        React.createElement(ClientTablePagination, { currentPage: currentPage, firstEntry: firstEntry, lastEntry: lastEntry, pageCount: pageCount, setCurrentPage: setCurrentPage, totalEntries: data.length })));
+};

package/dist/components/ClientTable/ClientTablePagination.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ClientPagePaginationProps = {
+    currentPage: number;
+    firstEntry: number;
+    lastEntry: number;
+    pageCount: number;
+    setCurrentPage: (value: number) => void;
+    totalEntries: number;
+};
+export declare const ClientTablePagination: ({ currentPage, firstEntry, lastEntry, pageCount, setCurrentPage, totalEntries }: ClientPagePaginationProps) => React.JSX.Element;
+//# sourceMappingURL=ClientTablePagination.d.ts.map

package/dist/components/ClientTable/ClientTablePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientTablePagination.d.ts","sourceRoot":"","sources":["../../../src/components/ClientTable/ClientTablePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAO/B,yBAAyB,sBAqC3B,CAAC"}

package/dist/components/ClientTable/ClientTablePagination.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../Button/Button.js';
+export const ClientTablePagination = ({ currentPage, firstEntry, lastEntry, pageCount, setCurrentPage, totalEntries }) => {
+    const { t } = useTranslation('libui');
+    return (React.createElement("div", { className: "flex items-center justify-between py-3" },
+        React.createElement("div", { className: "hidden sm:block" },
+            React.createElement("p", { className: "text-sm font-medium text-muted-foreground" }, t('pagination.info', {
+                first: firstEntry,
+                last: lastEntry,
+                total: totalEntries
+            }))),
+        React.createElement("div", { className: "flex flex-1 justify-between gap-3 sm:justify-end" },
+            React.createElement(Button, { disabled: currentPage === 1, type: "button", variant: "outline", onClick: () => {
+                    setCurrentPage(currentPage - 1);
+                } }, t('pagination.previous')),
+            React.createElement(Button, { disabled: currentPage === pageCount, type: "button", variant: "outline", onClick: () => {
+                    setCurrentPage(currentPage + 1);
+                } }, t('pagination.next')))));
+};

package/dist/components/ListboxDropdown/ListboxDropdown.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type ButtonProps } from '../Button/Button.js';
+export type ListboxDropdownOption = {
+    key: string;
+    label: string;
+};
+export type ListboxDropdownProps<T extends ListboxDropdownOption> = {
+    checkPosition?: 'left' | 'right';
+    className?: string;
+    options: T[];
+    selected: T[];
+    setSelected: React.Dispatch<React.SetStateAction<T[]>>;
+    title: string;
+    /** The button variant to use for the dropdown toggle */
+    variant?: ButtonProps['variant'];
+};
+export declare const ListboxDropdown: <T extends ListboxDropdownOption>({ options, selected, setSelected, title }: ListboxDropdownProps<T>) => React.JSX.Element;
+//# sourceMappingURL=ListboxDropdown.d.ts.map

package/dist/components/ListboxDropdown/ListboxDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListboxDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ListboxDropdown/ListboxDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IAClE,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,eAAe,+EAKzB,qBAAqB,CAAC,CAAC,sBAiCzB,CAAC"}

package/dist/components/ListboxDropdown/ListboxDropdown.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {} from '../Button/Button.js';
+import { DropdownButton } from '../DropdownButton/DropdownButton.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+export const ListboxDropdown = ({ options, selected, setSelected, title }) => {
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(DropdownMenu.Trigger, { asChild: true, className: "w-full" },
+            React.createElement(DropdownButton, null, title)),
+        React.createElement(DropdownMenu.Content, { widthFull: true, align: "start" }, options.map((option) => {
+            const checked = Boolean(selected.find((selectedOption) => selectedOption.key === option.key));
+            return (React.createElement(DropdownMenu.CheckboxItem, { checked: checked, className: "flex w-full items-center whitespace-nowrap bg-slate-50 p-2 text-sm hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 ", "data-cy": "select-dropdown-option", key: option.key, onSelect: (event) => {
+                    event.preventDefault();
+                    if (checked) {
+                        setSelected((prevSelected) => {
+                            return prevSelected.filter((selectedOption) => selectedOption.key !== option.key);
+                        });
+                    }
+                    else {
+                        setSelected((prevSelected) => [...prevSelected, option]);
+                    }
+                } }, option.label));
+        }))));
+};

package/dist/components/Sheet/Sheet.d.ts

@@ -2,7 +2,7 @@
 export declare const Sheet: import("react").FC<import("@radix-ui/react-dialog").DialogProps> & {
     Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
-        side?: "left" | "right" | "top" | "bottom" | null | undefined;
+        side?: "top" | "right" | "bottom" | "left" | null | undefined;
     } & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("react").RefAttributes<HTMLDivElement>>;
     Description: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
     Footer: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;

package/dist/components/Sheet/SheetContent.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import { Content } from '@radix-ui/react-dialog';
 import { type VariantProps } from 'class-variance-authority';
 export declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SheetContentProps = React.ComponentPropsWithoutRef<typeof Content> & VariantProps<typeof sheetVariants>;
 export declare const SheetContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=SheetContent.d.ts.map

package/dist/components/Table/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,2HAIrB,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,2HAMrB,CAAC"}

package/dist/components/Table/TableCell.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { cn } from '../../utils.js';
 export const TableCell = React.forwardRef(function TableCell({ className, ...props }, ref) {
-    return React.createElement("td", { className: cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className), ref: ref, ...props });
+    return (React.createElement("td", { className: cn('px-6 py-3 align-middle [&:has([role=checkbox])]:pr-0', className), ref: ref, ...props }));
 });

package/dist/components/Table/TableHead.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { cn } from '../../utils.js';
 export const TableHead = React.forwardRef(function TableHead({ className, ...props }, ref) {
-    return (React.createElement("th", { className: cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className), ref: ref, ...props }));
+    return (React.createElement("th", { className: cn('px-6 py-3 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className), ref: ref, ...props }));
 });

package/dist/components.d.ts

@@ -1,4 +1,5 @@
 export * from './components/Accordion/Accordion.js';
+export * from './components/ActionDropdown/ActionDropdown.js';
 export * from './components/AlertDialog/AlertDialog.js';
 export * from './components/ArrowToggle/ArrowToggle.js';
 export * from './components/Avatar/Avatar.js';
@@ -7,6 +8,7 @@ export * from './components/Breadcrumb/Breadcrumb.js';
 export * from './components/Button/Button.js';
 export * from './components/Card/Card.js';
 export * from './components/Checkbox/Checkbox.js';
+export * from './components/ClientTable/ClientTable.js';
 export * from './components/Collapsible/Collapsible.js';
 export * from './components/Command/Command.js';
 export * from './components/ContextMenu/ContextMenu.js';
@@ -23,14 +25,11 @@ export * from './components/HoverCard/HoverCard.js';
 export * from './components/Input/Input.js';
 export * from './components/Label/Label.js';
 export * from './components/LanguageToggle/LanguageToggle.js';
-export * from './components/LegacyDropdown/LegacyDropdown.js';
 export * from './components/LegacyModal/LegacyModal.js';
-export * from './components/LegacySelectDropdown/LegacySelectDropdown.js';
 export * from './components/LegacySlider/LegacySlider.js';
 export * from './components/LegacyStepper/LegacyStepper.js';
-export * from './components/LegacyTable/LegacyClientTable.js';
-export * from './components/LegacyTable/LegacyTable.js';
 export * from './components/LineGraph/LineGraph.js';
+export * from './components/ListboxDropdown/ListboxDropdown.js';
 export * from './components/MenuBar/MenuBar.js';
 export * from './components/NotificationHub/NotificationHub.js';
 export * from './components/Pagination/Pagination.js';

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iDAAiD,CAAC;AAChE,cAAc,iCAAiC,CAAC;AAChD,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC"}

package/dist/components.js

@@ -1,4 +1,5 @@
 export * from './components/Accordion/Accordion.js';
+export * from './components/ActionDropdown/ActionDropdown.js';
 export * from './components/AlertDialog/AlertDialog.js';
 export * from './components/ArrowToggle/ArrowToggle.js';
 export * from './components/Avatar/Avatar.js';
@@ -7,6 +8,7 @@ export * from './components/Breadcrumb/Breadcrumb.js';
 export * from './components/Button/Button.js';
 export * from './components/Card/Card.js';
 export * from './components/Checkbox/Checkbox.js';
+export * from './components/ClientTable/ClientTable.js';
 export * from './components/Collapsible/Collapsible.js';
 export * from './components/Command/Command.js';
 export * from './components/ContextMenu/ContextMenu.js';
@@ -23,14 +25,11 @@ export * from './components/HoverCard/HoverCard.js';
 export * from './components/Input/Input.js';
 export * from './components/Label/Label.js';
 export * from './components/LanguageToggle/LanguageToggle.js';
-export * from './components/LegacyDropdown/LegacyDropdown.js';
 export * from './components/LegacyModal/LegacyModal.js';
-export * from './components/LegacySelectDropdown/LegacySelectDropdown.js';
 export * from './components/LegacySlider/LegacySlider.js';
 export * from './components/LegacyStepper/LegacyStepper.js';
-export * from './components/LegacyTable/LegacyClientTable.js';
-export * from './components/LegacyTable/LegacyTable.js';
 export * from './components/LineGraph/LineGraph.js';
+export * from './components/ListboxDropdown/ListboxDropdown.js';
 export * from './components/MenuBar/MenuBar.js';
 export * from './components/NotificationHub/NotificationHub.js';
 export * from './components/Pagination/Pagination.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.2.4",
+  "version": "2.3.1",
   "packageManager": "pnpm@8.15.3",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {

package/src/components/ActionDropdown/ActionDropdown.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { DropdownButton } from '../DropdownButton/DropdownButton.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+
+import type { DropdownMenuContentProps } from '../DropdownMenu/DropdownMenuContent.js';
+
+type ActionDropdownOptions = { [key: string]: string } | readonly string[];
+
+type ActionDropdownOptionKey<T> = T extends readonly string[]
+  ? T[number]
+  : T extends { [key: string]: string }
+    ? Extract<keyof T, string>
+    : never;
+
+export type ActionDropdownProps<T extends ActionDropdownOptions> = {
+  align?: DropdownMenuContentProps['align'];
+
+  /** Callback function invoked when user clicks an option */
+  onSelection: (option: ActionDropdownOptionKey<T>) => void;
+
+  /** Either a list of options for the dropdown, or an object with options mapped to custom labels  */
+  options: T;
+
+  /** The text content for the dropdown toggle */
+  title: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export function ActionDropdown<const T extends ActionDropdownOptions>({
+  align = 'start',
+  onSelection,
+  options,
+  title
+}: ActionDropdownProps<T>) {
+  const optionKeys: readonly string[] = options instanceof Array ? options : Object.keys(options);
+  return (
+    <DropdownMenu>
+      <div className="w-full">
+        <DropdownMenu.Trigger asChild>
+          <DropdownButton>{title}</DropdownButton>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align={align} style={{ width: 'var(--radix-popper-anchor-width)' }}>
+          <DropdownMenu.Group>
+            {optionKeys.map((option) => (
+              <DropdownMenu.Item
+                key={option}
+                onClick={() => {
+                  onSelection(option as ActionDropdownOptionKey<T>);
+                }}
+              >
+                {Array.isArray(options) ? option : (options[option as keyof T] as string)}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </div>
+    </DropdownMenu>
+  );
+}

package/src/components/ClientTable/ClientTable.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from 'react';
+
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { range } from 'lodash-es';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { Table } from '../Table/Table.js';
+import { ClientTablePagination } from './ClientTablePagination.js';
+
+/** Coerces the value in a cell to a string for consistant display purposes */
+function defaultFormatter(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  } else if (typeof value === 'number') {
+    return value.toFixed(2).toString();
+  } else if (typeof value === 'undefined') {
+    return 'NA';
+  }
+  if (value instanceof Date) {
+    return toBasicISOString(value);
+  }
+  return JSON.stringify(value);
+}
+
+export type ClientTableEntry = { [key: string]: unknown };
+
+export type ClientFieldFactory<T extends ClientTableEntry = ClientTableEntry> = (entry: T) => string;
+
+export type ClientTableColumn<T extends ClientTableEntry> = {
+  /** How to determine the values for column */
+  field: ClientFieldFactory<T> | keyof T;
+
+  /** Override the default formatter for this field */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formatter?: (value: any) => string;
+
+  /** The label to be displayed on the header */
+  label: string;
+};
+
+export type ClientTableDropdownOptions<T extends ClientTableEntry> = {
+  icon?: React.ComponentType<Omit<React.SVGProps<SVGSVGElement>, 'ref'>>;
+  label: string;
+  onSelection: (column: ClientTableColumn<T>) => void;
+}[];
+
+export type ClientTableColumnProps<T extends ClientTableEntry> = {
+  column: ClientTableColumn<T>;
+  dropdownOptions?: ClientTableDropdownOptions<T>;
+};
+
+export type ClientTableProps<T extends ClientTableEntry> = {
+  className?: string;
+  columnDropdownOptions?: ClientTableDropdownOptions<T>;
+  columns: ClientTableColumn<T>[];
+  data: T[];
+  entriesPerPage?: number;
+  minRows?: number;
+  onEntryClick?: (entry: T) => void;
+};
+
+export const ClientTable = <T extends ClientTableEntry>({
+  className,
+  columnDropdownOptions,
+  columns,
+  data,
+  entriesPerPage = 10,
+  minRows,
+  onEntryClick
+}: ClientTableProps<T>) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const pageCount = Math.max(Math.ceil(data.length / entriesPerPage), 1);
+
+  const firstEntry = data.length === 0 ? 0 : (currentPage - 1) * entriesPerPage + 1;
+  const lastEntry = Math.min(firstEntry + entriesPerPage - 1, data.length);
+  const currentEntries = data.slice(firstEntry - 1, lastEntry);
+  const nRows = Math.max(currentEntries.length, minRows ?? -1);
+
+  return (
+    <div className={className}>
+      <div className="rounded-md border bg-card tracking-tight text-muted-foreground shadow">
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              {columns.map((column, i) => (
+                <Table.Head className="whitespace-nowrap text-foreground" key={i}>
+                  {columnDropdownOptions ? (
+                    <DropdownMenu>
+                      <DropdownMenu.Trigger className="flex items-center justify-between gap-3">
+                        <span>{column.label}</span>
+                        <ChevronDownIcon />
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Content align="start">
+                        <DropdownMenu.Group>
+                          {columnDropdownOptions.map((option) => {
+                            const Icon = option.icon;
+                            return (
+                              <DropdownMenu.Item
+                                key={option.label}
+                                onClick={() => {
+                                  option.onSelection(column);
+                                }}
+                              >
+                                {Icon && <Icon className="mr-2" height={16} width={16} />}
+                                {option.label}
+                              </DropdownMenu.Item>
+                            );
+                          })}
+                        </DropdownMenu.Group>
+                      </DropdownMenu.Content>
+                    </DropdownMenu>
+                  ) : (
+                    column.label
+                  )}
+                </Table.Head>
+              ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {range(nRows).map((i) => {
+              const entry = currentEntries[i];
+              return (
+                <Table.Row
+                  className={cn(typeof onEntryClick === 'function' && 'cursor-pointer hover:backdrop-brightness-95')}
+                  key={i}
+                  onClick={() => {
+                    onEntryClick?.(entry);
+                  }}
+                >
+                  {columns.map(({ field, formatter }, j) => {
+                    let value: unknown;
+                    if (!entry) {
+                      value = 'NA';
+                    } else if (typeof field === 'function') {
+                      value = field(entry);
+                    } else {
+                      value = entry[field];
+                    }
+                    const formattedValue = entry && formatter ? formatter(value) : defaultFormatter(value);
+                    return (
+                      <Table.Cell className={cn('text-ellipsis leading-none', !entry && 'invisible')} key={j}>
+                        {formattedValue}
+                      </Table.Cell>
+                    );
+                  })}
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table>
+      </div>
+      <ClientTablePagination
+        currentPage={currentPage}
+        firstEntry={firstEntry}
+        lastEntry={lastEntry}
+        pageCount={pageCount}
+        setCurrentPage={setCurrentPage}
+        totalEntries={data.length}
+      />
+    </div>
+  );
+};