@particle-network/ui-react 0.7.0-beta.6 → 0.7.0-beta.8

package/dist/components/UXTable/table-theme.js

@@ -0,0 +1,282 @@
+import { tv } from "@heroui/theme";
+import { dataFocusVisibleClasses } from "../../utils/index.js";
+const table = tv({
+    slots: {
+        base: 'flex flex-col relative gap-4',
+        wrapper: [
+            'p-0',
+            'z-0',
+            'flex',
+            'flex-col',
+            'relative',
+            'justify-between',
+            'gap-5',
+            'shadow-small',
+            'bg-content1',
+            'overflow-auto'
+        ],
+        table: 'min-w-full h-auto',
+        thead: "[&>tr]:first:rounded-lg after:content-[''] after:table-row after:h-[5px] [&>tr]:first:border-b [&>tr]:first:border-divider",
+        tbody: 'after:block',
+        tr: [
+            'group/tr',
+            'outline-solid outline-transparent',
+            ...dataFocusVisibleClasses
+        ],
+        th: [
+            'group/th',
+            'px-2.5',
+            'h-auto',
+            'text-start',
+            'align-middle',
+            'bg-transparent',
+            'whitespace-nowrap',
+            'text-foreground-300',
+            'text-[11px]',
+            'font-medium',
+            'first:rounded-s-lg',
+            'last:rounded-e-lg',
+            'outline-solid outline-transparent',
+            'data-[sortable=true]:cursor-pointer',
+            'data-[hover=true]:text-foreground-400',
+            ...dataFocusVisibleClasses
+        ],
+        td: [
+            'py-2',
+            'px-2.5',
+            'relative',
+            'align-middle',
+            'whitespace-normal',
+            'text-small',
+            'font-medium',
+            'outline-solid outline-transparent',
+            '[&>*]:z-1',
+            '[&>*]:relative',
+            ...dataFocusVisibleClasses,
+            'before:pointer-events-none',
+            "before:content-['']",
+            'before:absolute',
+            'before:z-0',
+            'before:inset-0',
+            'before:opacity-0',
+            'data-[selected=true]:before:opacity-100',
+            'before:bg-default/60',
+            'data-[selected=true]:text-default-foreground',
+            'first:before:rounded-l-md last:before:rounded-r-md',
+            'group-data-[disabled=true]/tr:text-foreground-300',
+            'group-data-[disabled=true]/tr:cursor-not-allowed'
+        ],
+        tfoot: '',
+        sortIcon: [
+            'ms-2',
+            'mb-px',
+            'opacity-0',
+            'text-inherit',
+            'inline-block',
+            'transition-transform-opacity',
+            'data-[visible=true]:opacity-100',
+            'group-data-[hover=true]/th:opacity-100',
+            'data-[direction=ascending]:rotate-180'
+        ],
+        emptyWrapper: 'text-foreground-400 align-middle text-center h-40',
+        loadingWrapper: 'absolute inset-0 flex items-center justify-center'
+    },
+    variants: {
+        color: {
+            default: {
+                td: 'before:bg-default/60 data-[selected=true]:text-default-foreground'
+            },
+            primary: {
+                td: 'before:bg-primary/20 data-[selected=true]:text-primary'
+            },
+            secondary: {
+                td: 'before:bg-secondary/20 data-[selected=true]:text-secondary'
+            },
+            success: {
+                td: 'before:bg-success/20 data-[selected=true]:text-success-600 dark:data-[selected=true]:text-success'
+            },
+            warning: {
+                td: 'before:bg-warning/20 data-[selected=true]:text-warning-600 dark:data-[selected=true]:text-warning'
+            },
+            danger: {
+                td: 'before:bg-danger/20 data-[selected=true]:text-danger dark:data-[selected=true]:text-danger-500'
+            }
+        },
+        size: {
+            md: {
+                th: 'py-md'
+            },
+            lg: {
+                th: 'py-5',
+                td: 'py-lg'
+            }
+        },
+        layout: {
+            auto: {
+                table: 'table-auto'
+            },
+            fixed: {
+                table: 'table-fixed'
+            }
+        },
+        shadow: {
+            none: {
+                wrapper: 'shadow-none'
+            },
+            sm: {
+                wrapper: 'shadow-small'
+            },
+            md: {
+                wrapper: 'shadow-medium'
+            },
+            lg: {
+                wrapper: 'shadow-large'
+            }
+        },
+        hideHeader: {
+            true: {
+                thead: 'hidden'
+            }
+        },
+        isStriped: {
+            true: {
+                td: [
+                    'group-data-[odd=true]/tr:before:bg-default-100',
+                    'group-data-[odd=true]/tr:before:opacity-100',
+                    'group-data-[odd=true]/tr:before:-z-10'
+                ]
+            }
+        },
+        isCompact: {
+            true: {
+                td: 'py-1'
+            },
+            false: {}
+        },
+        isHeaderSticky: {
+            true: {
+                thead: 'sticky top-0 z-20 [&>tr]:first:shadow-small'
+            }
+        },
+        isSelectable: {
+            true: {
+                tr: 'cursor-default',
+                td: [
+                    'group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:bg-default-100',
+                    'group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:opacity-70'
+                ]
+            }
+        },
+        isMultiSelectable: {
+            true: {
+                td: [
+                    'group-data-[first=true]/tr:first:before:rounded-ss-lg',
+                    'group-data-[first=true]/tr:last:before:rounded-se-lg',
+                    'group-data-[middle=true]/tr:before:rounded-none',
+                    'group-data-[last=true]/tr:first:before:rounded-es-lg',
+                    'group-data-[last=true]/tr:last:before:rounded-ee-lg'
+                ]
+            },
+            false: {
+                td: [
+                    'first:before:rounded-s-lg',
+                    'last:before:rounded-e-lg'
+                ]
+            }
+        },
+        radius: {
+            none: {
+                wrapper: 'rounded-none',
+                th: [],
+                td: []
+            },
+            sm: {
+                wrapper: 'rounded-small'
+            },
+            md: {
+                wrapper: 'rounded-medium'
+            },
+            lg: {
+                wrapper: 'rounded-large'
+            }
+        },
+        fullWidth: {
+            true: {
+                base: 'w-full',
+                wrapper: 'w-full',
+                table: 'w-full'
+            }
+        },
+        align: {
+            start: {
+                th: 'text-start',
+                td: 'text-start'
+            },
+            center: {
+                th: 'text-center',
+                td: 'text-center'
+            },
+            end: {
+                th: 'text-end',
+                td: 'text-end'
+            }
+        }
+    },
+    defaultVariants: {
+        layout: 'auto',
+        shadow: 'none',
+        radius: 'none',
+        color: 'default',
+        size: 'md',
+        isCompact: false,
+        hideHeader: false,
+        isStriped: false,
+        fullWidth: true,
+        align: 'start'
+    },
+    compoundVariants: [
+        {
+            isStriped: true,
+            color: 'default',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-default/60'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'primary',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-primary/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'secondary',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-secondary/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'success',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-success/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'warning',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-warning/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'danger',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-danger/20'
+            }
+        }
+    ]
+});
+export { table };

package/dist/components/UXTable/table.d.ts

@@ -0,0 +1,8 @@
+import type { UseTableProps } from './use-table';
+export interface TableProps<T = object> extends Omit<UseTableProps<T>, 'isSelectable' | 'isMultiSelectable'> {
+    isVirtualized?: boolean;
+    rowHeight?: number;
+    maxTableHeight?: number;
+}
+declare const Table: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"table", TableProps<object>, never>;
+export default Table;

package/dist/components/UXTable/table.js

@@ -0,0 +1,96 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { forwardRef } from "@heroui/system";
+import table_body from "./table-body.js";
+import table_column_header from "./table-column-header.js";
+import table_header_row from "./table-header-row.js";
+import table_row_group from "./table-row-group.js";
+import table_select_all_checkbox from "./table-select-all-checkbox.js";
+import { useTable } from "./use-table.js";
+import virtualized_table from "./virtualized-table.js";
+const Table = forwardRef((props, ref)=>{
+    const { BaseComponent, Component, collection, values, topContent, topContentPlacement, bottomContentPlacement, bottomContent, removeWrapper, sortIcon, getBaseProps, getWrapperProps, getTableProps } = useTable({
+        ...props,
+        ref
+    });
+    const { isVirtualized, rowHeight = 40, maxTableHeight = 600 } = props;
+    const shouldVirtualize = isVirtualized;
+    const Wrapper = useCallback(({ children })=>{
+        if (removeWrapper) return children;
+        return /*#__PURE__*/ jsx(BaseComponent, {
+            ...getWrapperProps(),
+            children: children
+        });
+    }, [
+        removeWrapper,
+        getWrapperProps
+    ]);
+    if (shouldVirtualize) return /*#__PURE__*/ jsx(virtualized_table, {
+        ...props,
+        ref: ref,
+        maxTableHeight: maxTableHeight,
+        rowHeight: rowHeight
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...getBaseProps(),
+        children: [
+            'outside' === topContentPlacement && topContent,
+            /*#__PURE__*/ jsx(Wrapper, {
+                children: /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        'inside' === topContentPlacement && topContent,
+                        /*#__PURE__*/ jsxs(Component, {
+                            ...getTableProps(),
+                            children: [
+                                /*#__PURE__*/ jsx(table_row_group, {
+                                    classNames: values.classNames,
+                                    slots: values.slots,
+                                    children: collection.headerRows.map((headerRow)=>/*#__PURE__*/ jsx(table_header_row, {
+                                            classNames: values.classNames,
+                                            node: headerRow,
+                                            slots: values.slots,
+                                            state: values.state,
+                                            children: [
+                                                ...headerRow.childNodes
+                                            ].map((column)=>column?.props?.isSelectionCell ? /*#__PURE__*/ jsx(table_select_all_checkbox, {
+                                                    checkboxesProps: values.checkboxesProps,
+                                                    classNames: values.classNames,
+                                                    color: values.color,
+                                                    disableAnimation: values.disableAnimation,
+                                                    node: column,
+                                                    selectionMode: values.selectionMode,
+                                                    slots: values.slots,
+                                                    state: values.state
+                                                }, column?.key) : /*#__PURE__*/ jsx(table_column_header, {
+                                                    classNames: values.classNames,
+                                                    node: column,
+                                                    slots: values.slots,
+                                                    sortIcon: sortIcon,
+                                                    state: values.state
+                                                }, column?.key))
+                                        }, headerRow?.key))
+                                }),
+                                /*#__PURE__*/ jsx(table_body, {
+                                    checkboxesProps: values.checkboxesProps,
+                                    classNames: values.classNames,
+                                    collection: values.collection,
+                                    color: values.color,
+                                    disableAnimation: values.disableAnimation,
+                                    isSelectable: values.isSelectable,
+                                    selectionMode: values.selectionMode,
+                                    slots: values.slots,
+                                    state: values.state
+                                })
+                            ]
+                        }),
+                        'inside' === bottomContentPlacement && bottomContent
+                    ]
+                })
+            }),
+            'outside' === bottomContentPlacement && bottomContent
+        ]
+    });
+});
+Table.displayName = 'HeroUI.Table';
+const table = Table;
+export { table as default };

package/dist/components/UXTable/use-table.d.ts

@@ -0,0 +1,145 @@
+import type React from 'react';
+import type { Key, ReactNode } from 'react';
+import type { CheckboxProps } from '@heroui/checkbox';
+import type { ReactRef } from '@heroui/react-utils';
+import type { HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import type { SlotsToClasses } from '@heroui/theme';
+import type { AriaTableProps } from '@react-aria/table';
+import type { TableState, TableStateProps } from '@react-stately/table';
+import type { Layout } from '@react-stately/virtualizer';
+import type { DisabledBehavior, Node, SelectionBehavior } from '@react-types/shared';
+import type { TableCollection } from '@react-types/table';
+import type { TableReturnType, TableSlots, TableVariantProps } from './table-theme';
+type TableContentPlacement = 'inside' | 'outside';
+interface Props<T> extends HTMLHeroUIProps<'table'> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    children?: ReactNode;
+    layoutNode?: Layout<Node<T>>;
+    /**
+     * A custom wrapper component for the table.
+     * @default "div"
+     */
+    BaseComponent?: React.ComponentType<any>;
+    /**
+     * Ref to the container element.
+     */
+    baseRef?: ReactRef<HTMLElement | null>;
+    /**
+     * Where to place the `topContent` component.
+     * @default "inside"
+     */
+    topContentPlacement?: TableContentPlacement;
+    /**
+     * Provides content to include a component in the top of the table.
+     */
+    topContent?: ReactNode;
+    /**
+     * Where to place the `bottomContent` component.
+     * @default "inside"
+     */
+    bottomContentPlacement?: TableContentPlacement;
+    /**
+     * Provides content to include a component in the bottom of the table.
+     */
+    bottomContent?: ReactNode;
+    /**
+     * Whether the table base container should not be rendered.
+     * @default false
+     */
+    removeWrapper?: boolean;
+    /**
+     * How multiple selection should behave in the collection.
+     * The selection behavior for the table. If selectionMode is `"none"`, this will be `null`.
+     * otherwise, this will be `toggle` or `replace`.
+     * @default "toggle"
+     */
+    selectionBehavior?: SelectionBehavior | null;
+    /**
+     * Whether `disabledKeys` applies to all interactions, or only selection.
+     * @default "selection"
+     */
+    disabledBehavior?: DisabledBehavior;
+    /**
+     * Whether to disable the table and checkbox animations.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Whether to disable the keyboard navigation functionality.
+     * @default false
+     */
+    isKeyboardNavigationDisabled?: boolean;
+    /**
+     * Props to be passed to the checkboxes.
+     */
+    checkboxesProps?: CheckboxProps;
+    /**
+     * Custom Icon to be displayed in the table header - overrides the default chevron one
+     */
+    sortIcon?: ReactNode | ((props: unknown) => ReactNode);
+    /** Handler that is called when a user performs an action on the row. */
+    onRowAction?: (key: Key) => void;
+    /** Handler that is called when a user performs an action on the cell. */
+    onCellAction?: (key: Key) => void;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Table classNames={{
+     *    base:"base-classes", // table wrapper
+     *    table: "table-classes",
+     *    thead: "thead-classes",
+     *    tbody: "tbody-classes",
+     *    tr: "tr-classes",
+     *    th: "th-classes",
+     *    td: "td-classes",
+     *    tfoot: "tfoot-classes",
+     *    sortIcon: "sort-icon-classes",
+     *    emptyWrapper: "empty-wrapper-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<TableSlots>;
+}
+export type UseTableProps<T = object> = Props<T> & TableStateProps<T> & Omit<AriaTableProps, 'layout'> & TableVariantProps;
+export interface ValuesType<T = object> {
+    state: TableState<T>;
+    slots: TableReturnType;
+    collection: TableCollection<T>;
+    color: TableVariantProps['color'];
+    isSelectable: boolean;
+    selectionMode: UseTableProps<T>['selectionMode'];
+    selectionBehavior: SelectionBehavior | null;
+    checkboxesProps?: CheckboxProps;
+    disabledBehavior: UseTableProps<T>['disabledBehavior'];
+    disableAnimation?: UseTableProps<T>['disableAnimation'];
+    isHeaderSticky?: UseTableProps<T>['isHeaderSticky'];
+    showSelectionCheckboxes: UseTableProps<T>['showSelectionCheckboxes'];
+    classNames?: SlotsToClasses<TableSlots>;
+    onRowAction?: UseTableProps<T>['onRowAction'];
+    onCellAction?: UseTableProps<T>['onCellAction'];
+}
+export declare function useTable<T extends object>(originalProps: UseTableProps<T>): {
+    BaseComponent: string | React.ComponentType<any>;
+    Component: import("@heroui/system-rsc").As<any>;
+    children: ((string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null) & [React.ReactElement<import("@react-types/table").TableHeaderProps<T>, string | React.JSXElementConstructor<any>>, React.ReactElement<import("@react-types/table").TableBodyProps<T>, string | React.JSXElementConstructor<any>>]) | undefined;
+    state: TableState<T>;
+    collection: TableCollection<T>;
+    values: ValuesType<T>;
+    topContent: React.ReactNode;
+    bottomContent: React.ReactNode;
+    removeWrapper: boolean;
+    topContentPlacement: TableContentPlacement;
+    bottomContentPlacement: TableContentPlacement;
+    sortIcon: React.ReactNode | ((props: unknown) => ReactNode);
+    getBaseProps: PropGetter;
+    getWrapperProps: PropGetter;
+    getTableProps: PropGetter;
+};
+export type UseTableReturn = ReturnType<typeof useTable>;
+export {};

package/dist/components/UXTable/use-table.js

@@ -0,0 +1,127 @@
+import { useCallback, useMemo } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { mergeProps, objectToDeps } from "@heroui/shared-utils";
+import { mapPropsVariants, useProviderContext } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useTable } from "@react-aria/table";
+import { useTableState } from "@react-stately/table";
+import { table } from "./table-theme.js";
+function use_table_useTable(originalProps) {
+    const globalContext = useProviderContext();
+    const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
+    const { ref, as, baseRef, children, className, classNames, removeWrapper = false, disableAnimation = globalContext?.disableAnimation ?? false, isKeyboardNavigationDisabled = false, selectionMode = 'none', topContentPlacement = 'inside', bottomContentPlacement = 'inside', selectionBehavior = 'none' === selectionMode ? null : 'toggle', disabledBehavior = 'selection', showSelectionCheckboxes = 'multiple' === selectionMode && 'replace' !== selectionBehavior, BaseComponent = 'div', checkboxesProps, topContent, bottomContent, sortIcon, onRowAction, onCellAction, ...otherProps } = props;
+    const Component = as || 'table';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const domBaseRef = useDOMRef(baseRef);
+    const state = useTableState({
+        ...originalProps,
+        children,
+        showSelectionCheckboxes
+    });
+    if (isKeyboardNavigationDisabled && !state.isKeyboardNavigationDisabled) state.setKeyboardNavigationDisabled(true);
+    const { collection } = state;
+    const { layout, ...otherOriginalProps } = originalProps;
+    const { gridProps } = useTable({
+        ...otherOriginalProps
+    }, state, domRef);
+    const isSelectable = 'none' !== selectionMode;
+    const isMultiSelectable = 'multiple' === selectionMode;
+    const slots = useMemo(()=>table({
+            ...variantProps,
+            isSelectable,
+            isMultiSelectable
+        }), [
+        objectToDeps(variantProps),
+        isSelectable,
+        isMultiSelectable
+    ]);
+    const baseStyles = cn(classNames?.base, className);
+    const values = useMemo(()=>({
+            state,
+            slots,
+            isSelectable,
+            collection,
+            classNames,
+            color: originalProps?.color,
+            disableAnimation,
+            checkboxesProps,
+            isHeaderSticky: originalProps?.isHeaderSticky ?? false,
+            selectionMode,
+            selectionBehavior,
+            disabledBehavior,
+            showSelectionCheckboxes,
+            onRowAction,
+            onCellAction
+        }), [
+        slots,
+        state,
+        collection,
+        isSelectable,
+        classNames,
+        selectionMode,
+        selectionBehavior,
+        checkboxesProps,
+        disabledBehavior,
+        disableAnimation,
+        showSelectionCheckboxes,
+        originalProps?.color,
+        originalProps?.isHeaderSticky,
+        onRowAction,
+        onCellAction
+    ]);
+    const getBaseProps = useCallback((props)=>({
+            ...props,
+            ref: domBaseRef,
+            className: slots.base({
+                class: cn(baseStyles, props?.className)
+            })
+        }), [
+        baseStyles,
+        slots
+    ]);
+    const getWrapperProps = useCallback((props)=>({
+            ...props,
+            ref: domBaseRef,
+            className: slots.wrapper({
+                class: cn(classNames?.wrapper, props?.className)
+            })
+        }), [
+        classNames?.wrapper,
+        slots
+    ]);
+    const getTableProps = useCallback((props)=>({
+            ...mergeProps(gridProps, filterDOMProps(otherProps, {
+                enabled: shouldFilterDOMProps
+            }), props),
+            onKeyDownCapture: void 0,
+            ref: domRef,
+            className: slots.table({
+                class: cn(classNames?.table, props?.className)
+            })
+        }), [
+        classNames?.table,
+        shouldFilterDOMProps,
+        slots,
+        gridProps,
+        otherProps
+    ]);
+    return {
+        BaseComponent,
+        Component,
+        children,
+        state,
+        collection,
+        values,
+        topContent,
+        bottomContent,
+        removeWrapper,
+        topContentPlacement,
+        bottomContentPlacement,
+        sortIcon,
+        getBaseProps,
+        getWrapperProps,
+        getTableProps
+    };
+}
+export { use_table_useTable as useTable };

package/dist/components/UXTable/virtualized-table-body.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { Virtualizer } from '@tanstack/react-virtual';
+import type { ValuesType } from './use-table';
+export interface VirtualizedTableBodyProps extends HTMLHeroUIProps<'tbody'> {
+    slots: ValuesType['slots'];
+    collection: ValuesType['collection'];
+    state: ValuesType['state'];
+    isSelectable: ValuesType['isSelectable'];
+    color: ValuesType['color'];
+    disableAnimation: ValuesType['disableAnimation'];
+    checkboxesProps: ValuesType['checkboxesProps'];
+    selectionMode: ValuesType['selectionMode'];
+    classNames?: ValuesType['classNames'];
+    rowVirtualizer: Virtualizer<any, Element>;
+}
+declare const VirtualizedTableBody: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"tbody", VirtualizedTableBodyProps, never>;
+export default VirtualizedTableBody;