@particle-network/ui-react 0.7.0-beta.1 → 0.7.0-beta.11

package/dist/components/UXTable/virtualized-table-body.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useTableRowGroup } from "@react-aria/table";
+import { UXEmpty } from "../UXEmpty/index.js";
+import table_cell from "./table-cell.js";
+import table_checkbox_cell from "./table-checkbox-cell.js";
+import table_row from "./table-row.js";
+const VirtualizedTableBody = forwardRef((props, ref)=>{
+    const { as, className, slots, state, collection, isSelectable, color, disableAnimation, checkboxesProps, selectionMode, classNames, rowVirtualizer, ...otherProps } = props;
+    const Component = as || 'tbody';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { rowGroupProps } = useTableRowGroup();
+    const tbodyStyles = cn(classNames?.tbody, className);
+    const bodyProps = collection?.body.props;
+    const isLoading = bodyProps?.isLoading || bodyProps?.loadingState === 'loading' || bodyProps?.loadingState === 'loadingMore';
+    const items = [
+        ...collection.body.childNodes
+    ];
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    let emptyContent;
+    let loadingContent;
+    if (0 === collection.size) emptyContent = /*#__PURE__*/ jsx("tr", {
+        role: "row",
+        children: /*#__PURE__*/ jsx("td", {
+            className: slots?.emptyWrapper({
+                class: classNames?.emptyWrapper
+            }),
+            colSpan: collection.columnCount,
+            role: "gridcell",
+            children: !isLoading && /*#__PURE__*/ jsx(UXEmpty, {})
+        })
+    });
+    if (isLoading && bodyProps.loadingContent) loadingContent = /*#__PURE__*/ jsxs("tr", {
+        role: "row",
+        children: [
+            /*#__PURE__*/ jsx("td", {
+                className: slots?.loadingWrapper({
+                    class: classNames?.loadingWrapper
+                }),
+                colSpan: collection.columnCount,
+                role: "gridcell",
+                children: bodyProps.loadingContent
+            }),
+            emptyContent || 0 !== collection.size ? null : /*#__PURE__*/ jsx("td", {
+                className: slots?.emptyWrapper({
+                    class: classNames?.emptyWrapper
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Component, {
+        ref: domRef,
+        ...mergeProps(rowGroupProps, filterDOMProps(bodyProps, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.tbody?.({
+            class: tbodyStyles
+        }),
+        "data-empty": dataAttr(0 === collection.size),
+        "data-loading": dataAttr(isLoading),
+        children: [
+            virtualItems.map((virtualRow, index)=>{
+                const row = items[virtualRow.index];
+                if (!row) return null;
+                return /*#__PURE__*/ jsx(table_row, {
+                    classNames: classNames,
+                    isSelectable: isSelectable,
+                    node: row,
+                    slots: slots,
+                    state: state,
+                    style: {
+                        transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
+                        height: `${virtualRow.size}px`
+                    },
+                    children: [
+                        ...row.childNodes
+                    ].map((cell)=>cell.props.isSelectionCell ? /*#__PURE__*/ jsx(table_checkbox_cell, {
+                            checkboxesProps: checkboxesProps,
+                            classNames: classNames,
+                            color: color,
+                            disableAnimation: disableAnimation,
+                            node: cell,
+                            rowKey: row.key,
+                            selectionMode: selectionMode,
+                            slots: slots,
+                            state: state
+                        }, String(cell.key)) : /*#__PURE__*/ jsx(table_cell, {
+                            classNames: classNames,
+                            node: cell,
+                            rowKey: row.key,
+                            slots: slots,
+                            state: state
+                        }, String(cell.key)))
+                }, String(row.key));
+            }),
+            loadingContent,
+            emptyContent
+        ]
+    });
+});
+VirtualizedTableBody.displayName = 'HeroUI.VirtualizedTableBody';
+const virtualized_table_body = VirtualizedTableBody;
+export { virtualized_table_body as default };

package/dist/components/UXTable/virtualized-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 VirtualizedTable: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"table", TableProps<object>, never>;
+export default VirtualizedTable;

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

@@ -0,0 +1,115 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { forwardRef } from "@heroui/system";
+import { useVirtualizer } from "@tanstack/react-virtual";
+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_body from "./virtualized-table-body.js";
+const VirtualizedTable = forwardRef((props, ref)=>{
+    const { BaseComponent, Component, collection, values, topContent, topContentPlacement, bottomContentPlacement, bottomContent, getBaseProps, getWrapperProps, getTableProps } = useTable({
+        ...props,
+        ref
+    });
+    const { rowHeight = 40, maxTableHeight = 600 } = props;
+    const parentRef = useRef(null);
+    const Wrapper = useCallback(({ children })=>/*#__PURE__*/ jsx(BaseComponent, {
+            ...getWrapperProps(),
+            ref: parentRef,
+            style: {
+                height: maxTableHeight,
+                display: 'block'
+            },
+            children: children
+        }), [
+        getWrapperProps,
+        maxTableHeight
+    ]);
+    const items = [
+        ...collection.body.childNodes
+    ];
+    const count = items.length;
+    const [headerHeight, setHeaderHeight] = useState(0);
+    const headerRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (headerRef.current) setHeaderHeight(headerRef.current.getBoundingClientRect().height);
+    }, [
+        headerRef
+    ]);
+    const rowVirtualizer = useVirtualizer({
+        count,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: ()=>rowHeight,
+        overscan: 5
+    });
+    const tableProps = getTableProps();
+    return /*#__PURE__*/ jsxs("div", {
+        ...getBaseProps(),
+        children: [
+            'outside' === topContentPlacement && topContent,
+            /*#__PURE__*/ jsx(Wrapper, {
+                children: /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        'inside' === topContentPlacement && topContent,
+                        /*#__PURE__*/ jsxs(Component, {
+                            ...tableProps,
+                            style: {
+                                height: `calc(${rowVirtualizer.getTotalSize() + headerHeight}px)`,
+                                ...tableProps.style
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx(table_row_group, {
+                                    ref: headerRef,
+                                    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,
+                                                    state: values.state
+                                                }, column?.key))
+                                        }, headerRow?.key))
+                                }),
+                                /*#__PURE__*/ jsx(virtualized_table_body, {
+                                    checkboxesProps: values.checkboxesProps,
+                                    classNames: values.classNames,
+                                    collection: values.collection,
+                                    color: values.color,
+                                    disableAnimation: values.disableAnimation,
+                                    isSelectable: values.isSelectable,
+                                    rowVirtualizer: rowVirtualizer,
+                                    selectionMode: values.selectionMode,
+                                    slots: values.slots,
+                                    state: values.state
+                                })
+                            ]
+                        }),
+                        'inside' === bottomContentPlacement && bottomContent
+                    ]
+                })
+            }),
+            'outside' === bottomContentPlacement && bottomContent
+        ]
+    });
+});
+VirtualizedTable.displayName = 'HeroUI.VirtualizedTable';
+const virtualized_table = VirtualizedTable;
+export { virtualized_table as default };

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useDisclosure } from "@heroui/use-disclosure";
-import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
+import ChartColorSwitchIcon from "@particle-network/icons/web/ChartColorSwitchIcon";
+import CopyIcon from "@particle-network/icons/web/CopyIcon";
 import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
 import { cn } from "../../utils/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.7.0-beta.1",
+  "version": "0.7.0-beta.11",
   "type": "module",
   "exports": {
     ".": {
@@ -33,26 +33,32 @@
     "tailwind-preset.js"
   ],
   "devDependencies": {
-    "@heroui/react": "^2.8.2",
     "@rsbuild/plugin-react": "^1.3.5",
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/eslint-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
   "dependencies": {
+    "@heroui/react": "^2.8.2",
+    "@tanstack/react-virtual": "^3.13.21",
     "ahooks": "^3.9.4",
+    "clsx": "^2.1.1",
+    "color2k": "^2.0.3",
     "copy-to-clipboard": "^3.3.3",
     "immer": "^11.1.3",
     "react-aria-components": "^1.14.0",
+    "react-stately": "^3.45.0",
+    "tailwind-merge": "2.6.0",
+    "tailwind-variants": "^3.2.2",
     "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.6.1",
+    "@particle-network/icons": "0.7.0-beta.5",
     "@particle-network/ui-shared": "0.5.0"
   },
   "scripts": {

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

@@ -1,34 +0,0 @@
-declare const ExtendedTable: import("react").ForwardRefExoticComponent<(Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
-    as?: import("@heroui/system-rsc").As<any> | undefined;
-} & {
-    color?: "default" | undefined;
-    size?: "md" | "lg" | undefined;
-    layout?: "auto" | "fixed" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | undefined;
-    shadow?: "sm" | "md" | "lg" | "none" | undefined;
-    hideHeader?: boolean | undefined;
-    isStriped?: boolean | undefined;
-    isCompact?: boolean | undefined;
-    isHeaderSticky?: boolean | undefined;
-    isSelectable?: boolean | undefined;
-    isMultiSelectable?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
-}, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
-    as?: import("@heroui/system-rsc").As<any> | undefined;
-} & {
-    color?: "default" | undefined;
-    size?: "md" | "lg" | undefined;
-    layout?: "auto" | "fixed" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | undefined;
-    shadow?: "sm" | "md" | "lg" | "none" | undefined;
-    hideHeader?: boolean | undefined;
-    isStriped?: boolean | undefined;
-    isCompact?: boolean | undefined;
-    isHeaderSticky?: boolean | undefined;
-    isSelectable?: boolean | undefined;
-    isMultiSelectable?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
-}, "ref">) & import("react").RefAttributes<HTMLElement>>;
-export default ExtendedTable;

package/dist/components/UXTable/table.extend.js

@@ -1,145 +0,0 @@
-import { extendVariants } from "@heroui/system-rsc";
-import { Table } from "@heroui/table";
-const ExtendedTable = extendVariants(Table, {
-    variants: {
-        color: {
-            default: {
-                wrapper: 'p-0 gap-5',
-                thead: '[&>tr]:first:border-b [&>tr]:first:border-divider',
-                th: 'bg-transparent !text-caption1 text-foreground-300 font-medium px-lg h-auto',
-                td: 'before:bg-default/60 data-[selected=true]:text-default-foreground font-medium first:rounded-l-md last:rounded-r-md'
-            }
-        },
-        size: {
-            md: {
-                th: 'py-md'
-            },
-            lg: {
-                th: 'py-5',
-                td: 'py-lg'
-            }
-        },
-        layout: {
-            auto: {
-                table: 'table-auto'
-            },
-            fixed: {
-                table: 'table-fixed'
-            }
-        },
-        radius: {
-            none: {
-                wrapper: 'rounded-none'
-            },
-            sm: {
-                wrapper: 'rounded-small'
-            },
-            md: {
-                wrapper: 'rounded-medium'
-            },
-            lg: {
-                wrapper: 'rounded-large'
-            }
-        },
-        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-background-200',
-                    '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'
-                ]
-            }
-        },
-        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'
-    }
-});
-const table_extend = ExtendedTable;
-export { table_extend as default };