@mezzanine-ui/react 1.0.0-alpha.0 → 1.0.0-beta.1

package/index.js

@@ -1,6 +1,6 @@
 export { arrayMove } from './utils/array-move.js';
 export { composeRefs } from './utils/composeRefs.js';
-export { getCSSVariableValue } from './utils/get-css-variable-value.js';
+export { getCSSVariableValue, getNumericCSSVariablePixelValue } from './utils/get-css-variable-value.js';
 export { getScrollbarWidth } from './utils/get-scrollbar-width.js';
 export { getElement } from './utils/getElement.js';
 export { useClickAway } from './hooks/useClickAway.js';
@@ -44,15 +44,12 @@ export { default as MenuDivider } from './Menu/MenuDivider.js';
 export { default as MenuItem } from './Menu/MenuItem.js';
 export { default as MenuItemGroup, default as OptionGroup } from './Menu/MenuItemGroup.js';
 export { default as Navigation } from './Navigation/Navigation.js';
-export { default as NavigationItem } from './Navigation/NavigationItem.js';
-export { default as NavigationSubMenu } from './Navigation/NavigationSubMenu.js';
 export { default as PageFooter } from './PageFooter/PageFooter.js';
 export { default as PageHeader } from './PageHeader/PageHeader.js';
 export { default as Step } from './Stepper/Step.js';
 export { default as Stepper } from './Stepper/Stepper.js';
-export { default as Tab } from './Tabs/Tab.js';
-export { default as TabPane } from './Tabs/TabPane.js';
-export { default as Tabs } from './Tabs/Tabs.js';
+export { default as TabItem } from './Tab/TabItem.js';
+export { default as Tab } from './Tab/Tab.js';
 export { default as Accordion } from './Accordion/Accordion.js';
 export { default as AccordionDetails } from './Accordion/AccordionDetails.js';
 export { default as AccordionSummary } from './Accordion/AccordionSummary.js';
@@ -66,9 +63,7 @@ export { default as Pagination } from './Pagination/Pagination.js';
 export { default as PaginationItem } from './Pagination/PaginationItem.js';
 export { default as PaginationJumper } from './Pagination/PaginationJumper.js';
 export { default as PaginationPageSize } from './Pagination/PaginationPageSize.js';
-export { default as Table } from './Table/Table.js';
-export { default as TableRefresh } from './Table/refresh/TableRefresh.js';
-export { default as useTableScroll } from './Table/useTableScroll.js';
+export { Table } from './Table/Table.js';
 export { default as Tag } from './Tag/Tag.js';
 export { default as Tooltip } from './Tooltip/Tooltip.js';
 export { default as Tree } from './Tree/Tree.js';
@@ -152,8 +147,8 @@ export { default as Translate } from './Transition/Translate.js';
 export { default as ConfigProvider } from './Provider/ConfigProvider.js';
 export { useStepper } from './Stepper/useStepper.js';
 export { usePagination } from './Pagination/usePagination.js';
-export { SELECTED_ALL_KEY, useTableRowSelection } from './Table/rowSelection/useTableRowSelection.js';
-export { useTableDraggable } from './Table/draggable/useTableDraggable.js';
+export { TableContext, TableDataContext, useTableContext, useTableDataContext } from './Table/TableContext.js';
+export { useTableRowSelection } from './Table/utils/useTableRowSelection.js';
 export { getTreeNodeEntities } from './Tree/getTreeNodeEntities.js';
 export { toggleValue, toggleValueWithStatusControl, uniqueArray } from './Tree/toggleValue.js';
 export { traverseTree } from './Tree/traverseTree.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,11 +31,13 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "^1.0.0-alpha.0",
-    "@mezzanine-ui/icons": "^1.0.0-alpha.0",
-    "@mezzanine-ui/system": "^1.0.0-alpha.0",
+    "@mezzanine-ui/core": "^1.0.0-beta.1",
+    "@mezzanine-ui/icons": "^1.0.0-beta.1",
+    "@mezzanine-ui/system": "^1.0.0-beta.1",
+    "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
+    "keycode": "^2.2.1",
     "lodash": "^4.17.21",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.8.1"

package/utils/flatten-children.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+/**
+ * Flattens nested React children into a single-level array. <br />
+ * Preserves keys by concatenating parent keys with child keys. <br />
+ * Handles fragments and nested fragments recursively. <br />
+ *
+ * @param children - The React children to flatten.
+ * @param recursionDepth - The maximum depth to recurse into fragments. Default is -1 (infinite).
+ * @param keys - The accumulated keys from parent elements.
+ * @returns An array of flattened React nodes.
+ */
+export declare function flattenChildren(children: ReactNode, recursionDepth?: number, keys?: (string | number)[]): ReactNode[];

package/utils/flatten-children.js

@@ -0,0 +1,37 @@
+import { Children, isValidElement, Fragment, cloneElement } from 'react';
+
+/**
+ * Flattens nested React children into a single-level array. <br />
+ * Preserves keys by concatenating parent keys with child keys. <br />
+ * Handles fragments and nested fragments recursively. <br />
+ *
+ * @param children - The React children to flatten.
+ * @param recursionDepth - The maximum depth to recurse into fragments. Default is -1 (infinite).
+ * @param keys - The accumulated keys from parent elements.
+ * @returns An array of flattened React nodes.
+ */
+function flattenChildren(children, recursionDepth = -1, keys = []) {
+    if (recursionDepth === 0) {
+        return Children.toArray(children);
+    }
+    return Children.toArray(children).reduce((acc, node, nodeIndex) => {
+        if (isValidElement(node) && node.type === Fragment) {
+            acc.push(...flattenChildren(node.props.children, recursionDepth - 1, keys.concat(node.key || nodeIndex)));
+        }
+        else {
+            if (isValidElement(node)) {
+                acc.push(cloneElement(node, {
+                    key: keys.concat(String(node.key)).join('.'),
+                }));
+            }
+            else if (typeof node === 'string' ||
+                typeof node === 'number' ||
+                typeof node === 'bigint') {
+                acc.push(node);
+            }
+        }
+        return acc;
+    }, []);
+}
+
+export { flattenChildren };

package/utils/get-css-variable-value.d.ts

@@ -1 +1,2 @@
 export declare function getCSSVariableValue(variableName: string): string;
+export declare function getNumericCSSVariablePixelValue(variableName: string): number;

package/utils/get-css-variable-value.js

@@ -5,5 +5,8 @@ function getCSSVariableValue(variableName) {
             .trim()
         : '';
 }
+function getNumericCSSVariablePixelValue(variableName) {
+    return Number(getCSSVariableValue(variableName).replace('rem', '')) * 16;
+}
 
-export { getCSSVariableValue };
+export { getCSSVariableValue, getNumericCSSVariablePixelValue };

package/Navigation/NavigationContext.d.ts

@@ -1,5 +0,0 @@
-import { NavigationOrientation } from '@mezzanine-ui/core/navigation';
-export interface NavigationContextValue {
-    orientation: NavigationOrientation;
-}
-export declare const NavigationContext: import("react").Context<NavigationContextValue>;

package/Navigation/NavigationContext.js

@@ -1,8 +0,0 @@
-'use client';
-import { createContext } from 'react';
-
-const NavigationContext = createContext({
-    orientation: 'horizontal',
-});
-
-export { NavigationContext };

package/Navigation/NavigationItem.d.ts

@@ -1,31 +0,0 @@
-import { Key, ReactNode } from 'react';
-import { IconDefinition } from '@mezzanine-ui/icons';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface NavigationItemProps extends Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'onClick'> {
-    /**
-     * Whether the item is active.
-     */
-    active?: boolean;
-    /**
-     * Item display content.
-     */
-    children?: ReactNode;
-    /**
-     * Unique ID of the item.
-     */
-    key?: Key | null;
-    /**
-     * @ignore
-     */
-    eventKey?: Key | null;
-    /**
-     * Icon of the item.
-     */
-    icon?: IconDefinition;
-    /**
-     * Called when item is clicked.
-     */
-    onClick?: (key?: Key | string | null) => void;
-}
-declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLLIElement>>;
-export default NavigationItem;

package/Navigation/NavigationItem.js

@@ -1,23 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useCallback } from 'react';
-import { navigationItemClasses } from '@mezzanine-ui/core/navigation';
-import { NavigationContext } from './NavigationContext.js';
-import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-
-const NavigationItem = forwardRef((props, ref) => {
-    const { active, children, className, eventKey, icon, onClick, ...rest } = props;
-    const { orientation } = useContext(NavigationContext);
-    const handleClick = useCallback((event) => {
-        if (orientation === 'vertical') {
-            event.stopPropagation();
-        }
-        if (onClick) {
-            onClick(eventKey);
-        }
-    }, [eventKey, onClick, orientation]);
-    return (jsxs("li", { ...rest, ref: ref, className: cx(navigationItemClasses.host, active && navigationItemClasses.active, className), role: "menuitem", onClick: handleClick, onKeyDown: () => { }, children: [icon && jsx(Icon, { className: navigationItemClasses.icon, icon: icon }), children] }));
-});
-
-export { NavigationItem as default };

package/Navigation/NavigationSubMenu.d.ts

@@ -1,22 +0,0 @@
-import { ReactElement } from 'react';
-import { NavigationItemProps } from './NavigationItem';
-export type NavigationSubMenuChild = ReactElement<NavigationItemProps>;
-export type NavigationSubMenuChildren = NavigationSubMenuChild | NavigationSubMenuChild[];
-export interface NavigationSubMenuProps extends Omit<NavigationItemProps, 'onClick' | 'eventKey' | 'key'> {
-    /**
-     * Strict children with `NavigationItem`.
-     * @default []
-     */
-    children?: NavigationSubMenuChildren;
-    /**
-     * Set display title for sub-menu item.
-     */
-    title?: string;
-    /**
-     * Open menu as default
-     * @default false
-     */
-    defaultOpen?: boolean;
-}
-declare const NavigationSubMenu: import("react").ForwardRefExoticComponent<NavigationSubMenuProps & import("react").RefAttributes<HTMLLIElement>>;
-export default NavigationSubMenu;

package/Navigation/NavigationSubMenu.js

@@ -1,50 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useContext } from 'react';
-import { navigationSubMenuClasses } from '@mezzanine-ui/core/navigation';
-import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
-import { offset, size } from '@floating-ui/react-dom';
-import { useClickAway } from '../hooks/useClickAway.js';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import NavigationItem from './NavigationItem.js';
-import { NavigationContext } from './NavigationContext.js';
-import Icon from '../Icon/Icon.js';
-import Popper from '../Popper/Popper.js';
-import Collapse from '../Transition/Collapse.js';
-import cx from 'clsx';
-
-// Middleware to make the submenu have the same width as the reference element
-const sameWidthMiddleware = size({
-    apply({ rects, elements }) {
-        Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-        });
-    },
-});
-const NavigationSubMenu = forwardRef((props, ref) => {
-    const { active, className, children = [], defaultOpen = false, icon, title, ...rest } = props;
-    const [open, setOpen] = useState(defaultOpen);
-    const nodeRef = useRef(null);
-    const composedNodeRef = useComposeRefs([ref, nodeRef]);
-    const { orientation } = useContext(NavigationContext);
-    const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
-    useClickAway(() => {
-        if (!open || orientation === 'vertical') {
-            return;
-        }
-        return () => {
-            setOpen(!open);
-        };
-    }, nodeRef, [open, orientation]);
-    const WrapChildren = jsx("ul", { className: navigationSubMenuClasses.group, children: children });
-    return (jsxs(NavigationItem, { ...rest, ref: composedNodeRef, className: cx(navigationSubMenuClasses.host, active && navigationSubMenuClasses.active, open && navigationSubMenuClasses.open, icon && orientation === 'vertical' && navigationSubMenuClasses.indent, className), onClick: () => setOpen(!open), children: [jsxs("div", { className: navigationSubMenuClasses.title, children: [icon && jsx(Icon, { className: navigationSubMenuClasses.icon, icon: icon }), title, jsx(Icon, { className: navigationSubMenuClasses.toggleIcon, icon: GroupToggleIcon })] }), orientation === 'horizontal' && (jsx(Popper, { anchor: nodeRef, disablePortal: true, open: !!open, options: {
-                    middleware: [
-                        offset({ mainAxis: 0, crossAxis: 0 }),
-                        sameWidthMiddleware,
-                    ],
-                }, children: WrapChildren })), orientation === 'vertical' && (jsx(Collapse, { style: {
-                    width: '100%',
-                }, in: !!open, children: WrapChildren }))] }));
-});
-
-export { NavigationSubMenu as default };

package/Table/TableBody.d.ts

@@ -1,10 +0,0 @@
-import { TableDataSource } from '@mezzanine-ui/core/table';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBodyProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * customize row className
-     */
-    rowClassName?: (source: TableDataSource) => string;
-}
-declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
-export default TableBody;

package/Table/TableBody.js

@@ -1,31 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import { TableDataContext, TableContext } from './TableContext.js';
-import TableBodyRow from './TableBodyRow.js';
-import Spin from '../Spin/Spin.js';
-import Empty from '../Empty/Empty.js';
-import cx from 'clsx';
-
-const TableBody = forwardRef(function TableBody(props, ref) {
-    const { className, rowClassName, ...rest } = props;
-    const { dataSource = [] } = useContext(TableDataContext) || {};
-    const { emptyProps, fetchMore, pagination } = useContext(TableContext) || {};
-    /** customizing empty */
-    const { className: emptyComponentClassName = '', children: emptyComponentChildren = '查無資料', fullHeight: emptyComponentFullHeight = true, ...restEmptyProps } = emptyProps || {};
-    /** pagination feature */
-    const { current: currentPage, disableAutoSlicing, total, options: paginationOptions, } = pagination || {};
-    const currentStartCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage
-        ? paginationOptions.pageSize * (currentPage - 1)
-        : 0;
-    const currentEndCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage && total
-        ? Math.min(paginationOptions.pageSize * currentPage, total)
-        : 0;
-    const currentDataSource = pagination && !disableAutoSlicing
-        ? dataSource.slice(currentStartCount, currentEndCount)
-        : dataSource;
-    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? (currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData), rowData: rowData, rowIndex: index }, (rowData.key || rowData.id))))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Spin, { loading: true }) }) })) : null] }));
-});
-
-export { TableBody as default };

package/Table/TableBodyRow.d.ts

@@ -1,11 +0,0 @@
-import { TableDataSource } from '@mezzanine-ui/core/table';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBodyRowProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * table body row dataSource
-     */
-    rowData: TableDataSource;
-    rowIndex: number;
-}
-declare const TableBodyRow: import("react").ForwardRefExoticComponent<TableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
-export default TableBodyRow;

package/Table/TableBodyRow.js

@@ -1,65 +0,0 @@
-'use client';
-import { forwardRef, useContext, useState, useMemo, Fragment, createElement } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
-import { Draggable } from '@hello-pangea/dnd';
-import get from 'lodash/get';
-import { TableContext, TableDataContext } from './TableContext.js';
-import TableCell from './TableCell.js';
-import TableExpandedTable from './TableExpandedTable.js';
-import TableRowSelection from './rowSelection/TableRowSelection.js';
-import TableExpandable from './expandable/TableExpandable.js';
-import TableEditRenderWrapper from './editable/TableEditRenderWrapper.js';
-import AccordionDetails from '../Accordion/AccordionDetails.js';
-import { composeRefs } from '../utils/composeRefs.js';
-import cx from 'clsx';
-
-const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
-    const { className, rowData, rowIndex, ...rest } = props;
-    const { rowSelection, expanding, isHorizontalScrolling, scroll, draggable, } = useContext(TableContext) || {};
-    const { columns } = useContext(TableDataContext) || {};
-    /** Feature rowSelection */
-    const [selected, setSelected] = useState(false);
-    /** Feature expandable */
-    const [expanded, setExpanded] = useState(false);
-    const isExpandable = useMemo(() => { var _a, _b; return (_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.rowExpandable) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : false; }, [expanding, rowData]);
-    const renderedExpandedContent = useMemo(() => { var _a, _b; return (_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.expandedRowRender) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : null; }, [expanding, rowData]);
-    /** Feature scrolling */
-    const isFirstColumnShouldSticky = useMemo(() => {
-        var _a;
-        /** 前面有 action 時不可 sticky */
-        if (rowSelection || expanding)
-            return false;
-        return (_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false;
-    }, [rowSelection, expanding, scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn]);
-    return (jsxs(Fragment, { children: [jsx(Draggable, { index: rowIndex, draggableId: rowData.key || rowData.id, isDragDisabled: !(draggable === null || draggable === void 0 ? void 0 : draggable.enabled), children: (draggableProvided) => (jsxs("tr", { ...rest, ...draggableProvided.draggableProps, ...draggableProvided.dragHandleProps, ref: composeRefs([ref, draggableProvided.innerRef]), className: cx(tableClasses.bodyRow, {
-                        [tableClasses.bodyRowHighlight]: selected || expanded,
-                        [tableClasses.bodyRowDragging]: (draggable === null || draggable === void 0 ? void 0 : draggable.draggingId) &&
-                            draggable.draggingId ===
-                                (rowData.key || rowData.id),
-                    }, className), children: [rowSelection ? (jsx("td", { "aria-label": "Selection", className: tableClasses.bodyRowCellWrapper, style: {
-                                flex: 'unset',
-                                minWidth: 'unset',
-                            }, children: jsx(TableRowSelection, { rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false }) })) : null, expanding ? (jsx("td", { "aria-label": "Expand", className: tableClasses.bodyRowCellWrapper, style: {
-                                flex: 'unset',
-                                minWidth: 'unset',
-                            }, children: jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
-                            var _a, _b, _c, _d;
-                            const autoGrabData = column.dataIndex
-                                ? get(rowData, column.dataIndex)
-                                : '';
-                            const ellipsis = (_a = column.ellipsis) !== null && _a !== void 0 ? _a : true;
-                            const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : autoGrabData);
-                            return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky &&
-                                    idx === 0 &&
-                                    tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky &&
-                                    idx === 0 &&
-                                    isHorizontalScrolling &&
-                                    tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: createElement(TableEditRenderWrapper, { ...column, key: (rowData.key || rowData.id), rowData: rowData },
-                                    jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) ||
-                                            autoGrabData })) }, `${idx + 1}-${rowData.key || rowData.id}`));
-                        })] })) }, rowData.key || rowData.id), renderedExpandedContent ? (jsx("tr", { children: jsx("td", { style: { padding: 0 }, children: jsx(AccordionDetails, { className: cx(expanding
-                            .className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent }) }) })) : null] }));
-});
-
-export { TableBodyRow as default };

package/Table/TableCell.d.ts

@@ -1,19 +0,0 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableCellProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * whether cell content should be ellipsis
-     * @default true
-     */
-    ellipsis?: boolean;
-    /**
-     * whether tooltip is force to shown when hovered
-     * @default false
-     */
-    forceShownTooltipWhenHovered?: boolean;
-    /**
-     * tooltip title that you want to display
-     */
-    tooltipTitle?: string | number;
-}
-declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TableCell;

package/Table/TableCell.js

@@ -1,24 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import Tooltip from '../Tooltip/Tooltip.js';
-import cx from 'clsx';
-
-const TableCell = forwardRef(function TableCell(props, ref) {
-    const { children, className, ellipsis = true, forceShownTooltipWhenHovered = false, tooltipTitle, ...rest } = props;
-    const ellipsisRef = useRef(null);
-    return (jsx("div", { ref: ref, ...rest, className: cx(tableClasses.cell, className), children: ellipsis || forceShownTooltipWhenHovered ? (jsx(Tooltip, { title: `${tooltipTitle}`, options: {
-                placement: 'top-start',
-            }, children: ({ onMouseEnter, onMouseLeave }) => (jsx("div", { ref: ellipsisRef, className: ellipsis ? tableClasses.cellEllipsis : '', onMouseEnter: (e) => {
-                    if (ellipsisRef.current) {
-                        const { current: el } = ellipsisRef;
-                        const isOverflow = forceShownTooltipWhenHovered ||
-                            el.scrollWidth > el.offsetWidth;
-                        /** display tooltip only when content is overflow */
-                        if (isOverflow)
-                            onMouseEnter(e);
-                    }
-                }, onMouseLeave: onMouseLeave, children: children })) })) : (children) }));
-});
-
-export { TableCell as default };

package/Table/TableExpandedTable.d.ts

@@ -1,11 +0,0 @@
-import { TableDataSource, ExpandedTableColumn } from '@mezzanine-ui/core/table';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableExpandedTableProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    renderedExpandedContent: {
-        dataSource: TableDataSource[];
-        columns?: ExpandedTableColumn[];
-        className?: string;
-    };
-}
-declare const TableExpandedTable: import("react").ForwardRefExoticComponent<TableExpandedTableProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TableExpandedTable;

package/Table/TableExpandedTable.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
-import get from 'lodash/get';
-import { TableDataContext } from './TableContext.js';
-import TableCell from './TableCell.js';
-import TableExpandable from './expandable/TableExpandable.js';
-import cx from 'clsx';
-
-const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
-    const { renderedExpandedContent } = props;
-    const { columns } = useContext(TableDataContext) || {};
-    return (jsx("div", { className: tableClasses.bodyRowExpandedTable, children: renderedExpandedContent.dataSource.map((source, sourceIndex) => {
-            var _a;
-            return (jsxs("div", { ref: ref, className: cx(tableClasses.bodyRow, tableClasses.bodyRowExpandedTableRow, renderedExpandedContent.className), role: "row", children: [jsx(TableExpandable, { showIcon: false }), ((_a = (renderedExpandedContent.columns || columns)) !== null && _a !== void 0 ? _a : []).map((column, index) => {
-                        var _a, _b, _c, _d;
-                        const autoGrabData = column.dataIndex
-                            ? get(source, column.dataIndex)
-                            : '';
-                        const ellipsis = !!autoGrabData && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : autoGrabData);
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) ||
-                                    autoGrabData }) }, `${index + 1}`));
-                    })] }, (source.key || source.id)));
-        }) }));
-});
-
-export { TableExpandedTable as default };

package/Table/TableHeader.d.ts

@@ -1,3 +0,0 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-declare const TableHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"div"> & import("react").RefAttributes<HTMLTableRowElement>>;
-export default TableHeader;

package/Table/TableHeader.js

@@ -1,36 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo } from 'react';
-import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
-import { TableContext, TableDataContext } from './TableContext.js';
-import { SELECTED_ALL_KEY } from './rowSelection/useTableRowSelection.js';
-import TableCell from './TableCell.js';
-import TableRowSelection from './rowSelection/TableRowSelection.js';
-import TableSortingIcon from './sorting/TableSortingIcon.js';
-import TableExpandable from './expandable/TableExpandable.js';
-import cx from 'clsx';
-
-const TableHeader = forwardRef(function TableHeader(props, ref) {
-    const { className, ...rest } = props;
-    const { rowSelection, isHorizontalScrolling, scroll, expanding } = useContext(TableContext) || {};
-    const { columns } = useContext(TableDataContext) || {};
-    const isFirstColumnShouldSticky = useMemo(() => {
-        var _a;
-        /** 前面有 action 時不可 sticky */
-        if (rowSelection || expanding)
-            return false;
-        return (_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false;
-    }, [rowSelection, expanding, scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn]);
-    return (jsx("thead", { className: tableClasses.headerFixed, children: jsxs("tr", { ref: ref, ...rest, className: cx(tableClasses.header, className), children: [rowSelection ? (jsx("th", { "aria-label": "Row Selection", style: { display: 'flex' }, children: jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }) })) : null, expanding && !rowSelection ? (jsx("th", { "aria-label": "Row Expansion", style: { display: 'flex' }, children: jsx(TableExpandable, { showIcon: false }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
-                    var _a;
-                    return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky &&
-                            idx === 0 &&
-                            tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky &&
-                            idx === 0 &&
-                            isHorizontalScrolling &&
-                            tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' ||
-                                    typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${idx + 1}`));
-                })] }) }));
-});
-
-export { TableHeader as default };

package/Table/draggable/useTableDraggable.d.ts

@@ -1,14 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { TableDataSource, TableDraggable } from '@mezzanine-ui/core/table';
-export interface UseTableDraggable {
-    dataSource: TableDataSource[];
-    setDataSource: Dispatch<SetStateAction<TableDataSource[]>>;
-    draggable?: TableDraggable;
-}
-export declare function useTableDraggable(props: UseTableDraggable): {
-    draggingId: string;
-    onBeforeDragStart: (e: {
-        draggableId: SetStateAction<string>;
-    }) => void;
-    onDragEnd: import("@hello-pangea/dnd").OnDragEndResponder<string>;
-};

package/Table/draggable/useTableDraggable.js

@@ -1,64 +0,0 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
-import isEqual from 'lodash/isEqual';
-import debounce from 'lodash/debounce';
-import { arrayMove } from '../../utils/array-move.js';
-import { usePreviousValue } from '../../hooks/usePreviousValue.js';
-
-function useTableDraggable(props) {
-    const { dataSource, setDataSource, draggable } = props;
-    const resultSnapshot = useRef(null);
-    const dataSnapShot = useRef(dataSource);
-    const isDragging = useRef(false);
-    const [draggingId, setDraggingId] = useState('');
-    const prevDataSource = usePreviousValue(dataSource);
-    useEffect(() => {
-        if (!isEqual(prevDataSource, dataSource)) {
-            dataSnapShot.current = dataSource;
-        }
-    }, [prevDataSource, dataSource]);
-    const onBeforeDragStart = useCallback((e) => {
-        isDragging.current = true;
-        setDraggingId(e.draggableId);
-    }, []);
-    const onDragEnd = useCallback(async (result, id) => {
-        var _a, _b;
-        resultSnapshot.current = [result, id];
-        isDragging.current = false;
-        setDraggingId('');
-        const temp = [...dataSnapShot.current];
-        const from = result.source.index;
-        const to = (_b = (_a = result.destination) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : from;
-        const newData = arrayMove(temp, from, to);
-        dataSnapShot.current = newData;
-        setDataSource(newData);
-    }, [setDataSource]);
-    useEffect(() => {
-        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
-            return () => { };
-        async function onMouseUp() {
-            var _a, _b, _c;
-            if (isDragging.current)
-                return;
-            const args = resultSnapshot.current;
-            resultSnapshot.current = null;
-            if (!(args === null || args === void 0 ? void 0 : args[0]) ||
-                ((_a = args === null || args === void 0 ? void 0 : args[0]) === null || _a === void 0 ? void 0 : _a.source.index) === ((_c = (_b = args === null || args === void 0 ? void 0 : args[0]) === null || _b === void 0 ? void 0 : _b.destination) === null || _c === void 0 ? void 0 : _c.index))
-                return;
-            if ((draggable === null || draggable === void 0 ? void 0 : draggable.onDragEnd) && args) {
-                draggable.onDragEnd(Array.from(dataSnapShot.current));
-            }
-        }
-        const debouncedOnMouseUp = debounce(onMouseUp, 500);
-        window.addEventListener('mouseup', debouncedOnMouseUp, false);
-        return () => {
-            window.removeEventListener('mouseup', debouncedOnMouseUp, false);
-        };
-    }, [draggable]);
-    return {
-        draggingId,
-        onBeforeDragStart,
-        onDragEnd,
-    };
-}
-
-export { useTableDraggable };