@particle-network/ui-react 0.7.0-beta.2 → 0.7.0-beta.20

package/dist/components/UXTable/table-column-header.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface SortIconProps {
+    'aria-hidden'?: boolean;
+    'data-direction'?: 'ascending' | 'descending';
+    'data-visible'?: boolean | 'true' | 'false';
+    className?: string;
+}
+export interface TableColumnHeaderProps<T = object> extends HTMLHeroUIProps<'th'> {
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    classNames?: ValuesType['classNames'];
+    /**
+     * Custom Icon to be displayed in the table header - overrides the default chevron one
+     */
+    sortIcon?: ReactNode | ((props: SortIconProps) => ReactNode);
+    /**
+     * The table node to render.
+     */
+    node: GridNode<T>;
+}
+declare const TableColumnHeader: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"th", TableColumnHeaderProps<object>, never>;
+export default TableColumnHeader;

package/dist/components/UXTable/table-column-header.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { ChevronDownIcon } from "@heroui/shared-icons";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { useTableColumnHeader } from "@react-aria/table";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+const normalizeWidth = (value)=>'number' == typeof value ? `${value}px` : value;
+const TableColumnHeader = forwardRef((props, ref)=>{
+    const { as, className, state, node, slots, classNames, sortIcon, ...otherProps } = props;
+    const Component = as || 'th';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { columnHeaderProps } = useTableColumnHeader({
+        node
+    }, state, domRef);
+    const thStyles = cn(classNames?.th, className, node.props?.className);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const { isHovered, hoverProps } = useHover({});
+    const { hideHeader, align, width, minWidth, maxWidth, ...columnProps } = node.props;
+    const { allowsSorting } = columnProps;
+    const columnStyles = {};
+    if (width) columnStyles.width = normalizeWidth(width);
+    if (minWidth) columnStyles.minWidth = normalizeWidth(minWidth);
+    if (maxWidth) columnStyles.maxWidth = normalizeWidth(maxWidth);
+    const sortIconProps = {
+        'aria-hidden': true,
+        'data-direction': state.sortDescriptor?.direction,
+        'data-visible': dataAttr(state.sortDescriptor?.column === node.key),
+        className: slots.sortIcon?.({
+            class: classNames?.sortIcon
+        })
+    };
+    const customSortIcon = 'function' == typeof sortIcon ? sortIcon(sortIconProps) : /*#__PURE__*/ isValidElement(sortIcon) && /*#__PURE__*/ cloneElement(sortIcon, sortIconProps);
+    return /*#__PURE__*/ jsxs(Component, {
+        ref: domRef,
+        colSpan: node.colspan,
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-hover": dataAttr(isHovered),
+        "data-sortable": dataAttr(allowsSorting),
+        style: columnStyles,
+        ...mergeProps(columnHeaderProps, focusProps, filterDOMProps(columnProps, {
+            enabled: shouldFilterDOMProps
+        }), allowsSorting ? hoverProps : {}, otherProps),
+        className: slots.th?.({
+            align,
+            class: thStyles
+        }),
+        children: [
+            hideHeader ? /*#__PURE__*/ jsx(VisuallyHidden, {
+                children: node.rendered
+            }) : node.rendered,
+            allowsSorting && (customSortIcon || /*#__PURE__*/ jsx(ChevronDownIcon, {
+                strokeWidth: 3,
+                ...sortIconProps
+            }))
+        ]
+    });
+});
+TableColumnHeader.displayName = 'HeroUI.TableColumnHeader';
+const table_column_header = TableColumnHeader;
+export { table_column_header as default };

package/dist/components/UXTable/table-header-row.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface TableHeaderRowProps<T = object> extends HTMLHeroUIProps<'tr'> {
+    /**
+     * The table node to render.
+     */
+    node: GridNode<T>;
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableHeaderRow: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"tr", TableHeaderRowProps<object>, never>;
+export default TableHeaderRow;

package/dist/components/UXTable/table-header-row.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useTableHeaderRow } from "@react-aria/table";
+const TableHeaderRow = forwardRef((props, ref)=>{
+    const { as, className, children, node, slots, classNames, state, ...otherProps } = props;
+    const Component = as || 'tr';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { rowProps } = useTableHeaderRow({
+        node
+    }, state, domRef);
+    const trStyles = cn(classNames?.tr, className, node.props?.className);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        ...mergeProps(rowProps, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.tr?.({
+            class: trStyles
+        }),
+        children: children
+    });
+});
+TableHeaderRow.displayName = 'HeroUI.TableHeaderRow';
+const table_header_row = TableHeaderRow;
+export { table_header_row as default };

package/dist/components/UXTable/table-row-group.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { ValuesType } from './use-table';
+export interface TableRowGroupProps extends HTMLHeroUIProps<'thead'> {
+    slots: ValuesType['slots'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableRowGroup: import("react").ForwardRefExoticComponent<TableRowGroupProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export default TableRowGroup;

package/dist/components/UXTable/table-row-group.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef } from "@heroui/react-utils";
+import { mergeProps } from "@heroui/shared-utils";
+import { cn } from "@heroui/theme";
+import { useTableRowGroup } from "@react-aria/table";
+const TableRowGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { as, className, children, slots, classNames, ...otherProps } = props;
+    const Component = as || 'thead';
+    const domRef = useDOMRef(ref);
+    const { rowGroupProps } = useTableRowGroup();
+    const theadStyles = cn(classNames?.thead, className);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        className: slots.thead?.({
+            class: theadStyles
+        }),
+        ...mergeProps(rowGroupProps, otherProps),
+        children: children
+    });
+});
+TableRowGroup.displayName = 'HeroUI.TableRowGroup';
+const table_row_group = TableRowGroup;
+export { table_row_group as default };

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

@@ -0,0 +1,15 @@
+import type { GridNode } from '@react-types/grid';
+import type { TableRowProps as BaseTableRowProps } from './base/table-row';
+import type { ValuesType } from './use-table';
+export interface TableRowProps<T = object> extends Omit<BaseTableRowProps, 'children'> {
+    /**
+     * The table row.
+     */
+    node: GridNode<T>;
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    isSelectable?: ValuesType['isSelectable'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableRow: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"tr", TableRowProps<object>, never>;
+export default TableRow;

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

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+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 { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { useTableRow } from "@react-aria/table";
+const TableRow = forwardRef((props, ref)=>{
+    const { as, className, children, node, slots, state, isSelectable, classNames, ...otherProps } = props;
+    const Component = as || (props?.href ? 'a' : 'tr');
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { rowProps } = useTableRow({
+        node
+    }, state, domRef);
+    const trStyles = cn(classNames?.tr, className, node.props?.className);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const isDisabled = state.disabledKeys.has(node.key);
+    const isSelected = state.selectionManager.isSelected(node.key);
+    const { isHovered, hoverProps } = useHover({
+        isDisabled
+    });
+    const { isFirst, isLast, isMiddle, isOdd } = useMemo(()=>{
+        const isFirst = node.key === state.collection.getFirstKey();
+        const isLast = node.key === state.collection.getLastKey();
+        const isMiddle = !isFirst && !isLast;
+        const isOdd = node?.index ? (node.index + 1) % 2 === 0 : false;
+        return {
+            isFirst,
+            isLast,
+            isMiddle,
+            isOdd
+        };
+    }, [
+        node,
+        state.collection
+    ]);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        "data-disabled": dataAttr(isDisabled),
+        "data-first": dataAttr(isFirst),
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-hover": dataAttr(isHovered),
+        "data-last": dataAttr(isLast),
+        "data-middle": dataAttr(isMiddle),
+        "data-odd": dataAttr(isOdd),
+        "data-selected": dataAttr(isSelected),
+        ...mergeProps(rowProps, focusProps, isSelectable ? hoverProps : {}, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.tr?.({
+            class: trStyles
+        }),
+        children: children
+    });
+});
+TableRow.displayName = 'HeroUI.TableRow';
+const table_row = TableRow;
+export { table_row as default };

package/dist/components/UXTable/table-select-all-checkbox.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface TableSelectAllCheckboxProps<T = object> extends HTMLHeroUIProps<'th'> {
+    /**
+     * The table column.
+     */
+    node: GridNode<T>;
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    color: ValuesType['color'];
+    disableAnimation: ValuesType['disableAnimation'];
+    checkboxesProps: ValuesType['checkboxesProps'];
+    selectionMode: ValuesType['selectionMode'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableSelectAllCheckbox: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"th", TableSelectAllCheckboxProps<object>, never>;
+export default TableSelectAllCheckbox;

package/dist/components/UXTable/table-select-all-checkbox.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@heroui/checkbox";
+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 { useFocusRing } from "@react-aria/focus";
+import { useTableColumnHeader, useTableSelectAllCheckbox } from "@react-aria/table";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+const TableSelectAllCheckbox = forwardRef((props, ref)=>{
+    const { as, className, node, slots, state, selectionMode, color, checkboxesProps, disableAnimation, classNames, ...otherProps } = props;
+    const Component = as || 'th';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { columnHeaderProps } = useTableColumnHeader({
+        node
+    }, state, domRef);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const { checkboxProps } = useTableSelectAllCheckbox(state);
+    const thStyles = cn(classNames?.th, className, node.props?.className);
+    const isSingleSelectionMode = 'single' === selectionMode;
+    const { onChange, ...otherCheckboxProps } = checkboxProps;
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        "data-focus-visible": dataAttr(isFocusVisible),
+        ...mergeProps(columnHeaderProps, focusProps, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), filterDOMProps(otherProps, {
+            enabled: shouldFilterDOMProps
+        })),
+        className: slots.th?.({
+            class: thStyles
+        }),
+        children: isSingleSelectionMode ? /*#__PURE__*/ jsx(VisuallyHidden, {
+            children: checkboxProps['aria-label']
+        }) : /*#__PURE__*/ jsx(Checkbox, {
+            color: color,
+            disableAnimation: disableAnimation,
+            onValueChange: onChange,
+            ...mergeProps(checkboxesProps, otherCheckboxProps)
+        })
+    });
+});
+TableSelectAllCheckbox.displayName = 'HeroUI.TableSelectAllCheckbox';
+const table_select_all_checkbox = TableSelectAllCheckbox;
+export { table_select_all_checkbox as default };