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

package/Radio/Radio.js

@@ -1,23 +1,22 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState } from 'react';
 import { radioClasses } from '@mezzanine-ui/core/radio';
 import InputCheck from '../_internal/InputCheck/InputCheck.js';
 import { useRadioControlValue } from '../Form/useRadioControlValue.js';
 import { RadioGroupContext } from './RadioGroupContext.js';
-import { MezzanineConfig } from '../Provider/context.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
+import Icon from '../Icon/Icon.js';
+import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` radio.
  */
 const Radio = forwardRef(function Radio(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { disabled: disabledFromFormControl, severity } = useContext(FormControlContext) || {};
+    var _a, _b;
     const radioGroup = useContext(RadioGroupContext);
-    const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = radioGroup || {};
-    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, inputProps, onChange: onChangeProp, size = sizeFromGroup || globalSize, value, ...rest } = props;
+    const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, type: typeFromGroup, } = radioGroup || {};
+    const { checked: checkedProp, className, children, defaultChecked, disabled = disabledFromGroup || false, error = false, icon, hint, inputProps, onChange: onChangeProp, size = sizeFromGroup || 'main', type = typeFromGroup || 'radio', value, withInputConfig, ...rest } = props;
     const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
     const [checked, onChange] = useRadioControlValue({
         checked: checkedProp,
@@ -26,9 +25,20 @@ const Radio = forwardRef(function Radio(props, ref) {
         radioGroup,
         value,
     });
-    return (jsx(InputCheck, { ...rest, ref: ref, control: jsx("span", { className: cx(radioClasses.host, {
-                [radioClasses.checked]: checked,
-            }), children: jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value }) }), disabled: disabled, error: error, htmlFor: inputId, size: size, children: children }));
+    const [focused, setFocused] = useState(false);
+    return (jsxs("div", { ref: ref, className: cx(radioClasses.wrapper, className), children: [jsx(InputCheck, { ...rest, control: jsxs("span", { className: cx(radioClasses.host, radioClasses.size(size), {
+                        [radioClasses.segmented]: type === 'segment',
+                        [radioClasses.checked]: checked,
+                        [radioClasses.focused]: focused,
+                        [radioClasses.error]: error,
+                    }), children: [type === 'segment' && (jsxs("span", { className: cx(radioClasses.segmentedContainer, {
+                                [radioClasses.segmentedContainerHaveMinWidth]: !!children,
+                                [radioClasses.segmentedContainerWithIconText]: !!children && !!icon,
+                            }), children: [icon && jsx(Icon, { icon: icon, size: 16 }), children] })), jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, onFocus: () => {
+                                setFocused(true);
+                            }, onBlur: () => {
+                                setFocused(false);
+                            }, name: name, type: "radio", value: value })] }), disabled: disabled, error: error, focused: focused, hint: hint, htmlFor: inputId, segmentedStyle: type === 'segment', size: size, children: type === 'radio' && children }), type === 'radio' && withInputConfig && (jsx("div", { style: { width: (_a = withInputConfig.width) !== null && _a !== void 0 ? _a : 120 }, children: jsx(Input, { ...withInputConfig, variant: "base", placeholder: (_b = withInputConfig.placeholder) !== null && _b !== void 0 ? _b : 'Placeholder' }) }))] }));
 });
 
 export { Radio as default };

package/Radio/RadioGroup.d.ts

@@ -1,7 +1,16 @@
-import { RadioGroupOption, RadioSize } from '@mezzanine-ui/core/radio';
+import { RadioSize } from '@mezzanine-ui/core/radio';
 import { ChangeEventHandler, ReactNode } from 'react';
 import { InputCheckGroupProps } from '../_internal/InputCheck/InputCheckGroup';
-export interface RadioGroupProps extends Omit<InputCheckGroupProps, 'onChange'> {
+import { RadioNormalProps, RadioSegmentProps } from './Radio';
+export interface RadioGroupNormalOption extends Pick<RadioNormalProps, 'disabled' | 'error' | 'icon' | 'hint' | 'withInputConfig'> {
+    id: string;
+    name: string | number;
+}
+export interface RadioGroupSegmentOption extends Pick<RadioSegmentProps, 'disabled' | 'error' | 'icon' | 'hint' | 'withInputConfig'> {
+    id: string;
+    name: string | number;
+}
+export interface RadioGroupBaseProps extends Omit<InputCheckGroupProps, 'onChange' | 'type'> {
     /**
      * The radios in radio group.
      */
@@ -25,11 +34,6 @@ export interface RadioGroupProps extends Omit<InputCheckGroupProps, 'onChange'>
      * Will be passed to each radios but composing both instead of overriding.
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The options of radio group.
-     * Will be ignored if children passed.
-     */
-    options?: RadioGroupOption[];
     /**
      * The size of radio group.
      * Control the size of radios in group if size not passed to radio.
@@ -40,6 +44,31 @@ export interface RadioGroupProps extends Omit<InputCheckGroupProps, 'onChange'>
      */
     value?: string;
 }
+export interface RadioGroupNormalProps extends RadioGroupBaseProps {
+    /**
+     * The options of radio group.
+     * Will be ignored if children passed.
+     */
+    options?: RadioGroupNormalOption[];
+    /**
+     * The type of radio group.
+     * Control the type of radios in group if type not passed to radio.
+     */
+    type?: 'radio';
+}
+export interface RadioGroupSegmentProps extends RadioGroupBaseProps {
+    /**
+     * The options of radio group.
+     * Will be ignored if children passed.
+     */
+    options?: RadioGroupSegmentOption[];
+    /**
+     * The type of radio group.
+     * Control the type of radios in group if type not passed to radio.
+     */
+    type: 'segment';
+}
+export type RadioGroupProps = RadioGroupNormalProps | RadioGroupSegmentProps;
 /**
  * The react component for `mezzanine` radio group.
  */

package/Radio/RadioGroup.js

@@ -9,7 +9,7 @@ import Radio from './Radio.js';
  * The react component for `mezzanine` radio group.
  */
 const RadioGroup = forwardRef(function RadioGroup(props, ref) {
-    const { children: childrenProp, defaultValue, disabled, name, options = [], onChange: onChangeProp, size, value: valueProp, ...rest } = props;
+    const { children: childrenProp, defaultValue, disabled, name, options = [], onChange: onChangeProp, size, type, value: valueProp, ...rest } = props;
     const [value, onChange] = useInputControlValue({
         defaultValue,
         onChange: onChangeProp,
@@ -20,11 +20,12 @@ const RadioGroup = forwardRef(function RadioGroup(props, ref) {
         name,
         onChange,
         size,
+        type,
         value,
-    }), [disabled, name, onChange, size, value]);
+    }), [disabled, name, onChange, size, type, value]);
     const children = childrenProp ||
-        options.map((option) => (jsx(Radio, { disabled: option.disabled, value: option.value, children: option.label }, option.value)));
-    return (jsx(RadioGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, role: "radiogroup", children: children }) }));
+        options.map((option) => (jsx(Radio, { disabled: option.disabled, error: option.error, hint: option.hint, value: option.id, withInputConfig: option.withInputConfig, children: option.name }, option.id)));
+    return (jsx(RadioGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, role: "radiogroup", segmentedStyle: type === 'segment', size: size, children: children }) }));
 });
 
 export { RadioGroup as default };

package/Radio/RadioGroupContext.d.ts

@@ -1,8 +1,9 @@
-import { RadioSize } from '@mezzanine-ui/core/radio';
+import { RadioSize, RadioType } from '@mezzanine-ui/core/radio';
 import { RadioGroupControlContextValue } from '../Form/useRadioControlValue';
 export interface RadioGroupContextValue extends RadioGroupControlContextValue {
     disabled?: boolean;
     name?: string;
     size?: RadioSize;
+    type?: RadioType;
 }
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;

package/Radio/index.d.ts

@@ -1,5 +1,5 @@
-export type { RadioSize, RadioGroupOption, RadioGroupOrientation, } from '@mezzanine-ui/core/radio';
-export type { RadioProps } from './Radio';
+export type { RadioSize, RadioGroupOrientation, } from '@mezzanine-ui/core/radio';
+export type { RadioNormalProps, RadioSegmentProps, RadioProps } from './Radio';
 export { default } from './Radio';
-export type { RadioGroupProps } from './RadioGroup';
+export type { RadioGroupNormalOption, RadioGroupSegmentOption, RadioGroupProps, } from './RadioGroup';
 export { default as RadioGroup } from './RadioGroup';

package/Slider/useSlider.js

@@ -1,4 +1,4 @@
-import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVars, getPercentage, findClosetValueIndex, sortSliderValue, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
+import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVars, getPercentage, sortSliderValue, findClosetValueIndex, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
 import { useRef, useState } from 'react';
 import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
 

package/Tab/Tab.d.ts

@@ -0,0 +1,32 @@
+import { Key, ReactElement } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TabItemProps } from './TabItem';
+export type TabsChild = ReactElement<TabItemProps>;
+export interface TabProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'> {
+    /**
+     * Current TabItem's index
+     */
+    activeKey?: Key;
+    /**
+     * The TabItems in tab
+     */
+    children: TabsChild | TabsChild[];
+    /**
+     * Initial active TabItem's key, if activeKey is not set.
+     */
+    defaultActiveKey?: Key;
+    /**
+     * The direction of tab
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * The change event handler of Tab
+     */
+    onChange?: (activeKey: Key, index: number) => void;
+}
+/**
+ * The react component for `mezzanine` tab.
+ */
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tab;

package/Tab/Tab.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, Children, cloneElement, useLayoutEffect } from 'react';
+import { tabClasses } from '@mezzanine-ui/core/tab';
+import TabItem from './TabItem.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tab.
+ */
+const Tab = forwardRef(function Tab(props, ref) {
+    const { activeKey: activeKeyProp, children, className, defaultActiveKey = 0, onChange, direction = 'horizontal', ...rest } = props;
+    const [activeKeyInternal, setActiveKey] = useState(defaultActiveKey);
+    const activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyInternal;
+    const activeTabItemRef = useRef(null);
+    const tabItems = Children.map(children, (tabItem, index) => {
+        var _a;
+        if (!tabItem || tabItem.type !== TabItem) {
+            return null;
+        }
+        const key = (_a = tabItem.key) !== null && _a !== void 0 ? _a : index;
+        const active = activeKey === key;
+        return cloneElement(tabItem, {
+            key,
+            active,
+            ref: active ? activeTabItemRef : undefined,
+            onClick: (event) => {
+                var _a, _b;
+                if (!active) {
+                    setActiveKey(key);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(key, index);
+                }
+                (_b = (_a = tabItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            },
+        });
+    });
+    // get active TabItem left and width for activeBar position
+    const [activeBarStyle, setActiveBarStyle] = useState({
+        '--active-bar-length': '0px',
+        '--active-bar-shift': '0px',
+    });
+    useLayoutEffect(() => {
+        const activeTabElement = activeTabItemRef.current;
+        if (activeTabElement) {
+            const { offsetLeft, offsetWidth, offsetTop, offsetHeight } = activeTabElement;
+            setActiveBarStyle({
+                '--active-bar-length': direction === 'horizontal' ? `${offsetWidth}px` : `${offsetHeight}px`,
+                '--active-bar-shift': direction === 'horizontal' ? `${offsetLeft}px` : `${offsetTop}px`,
+            });
+        }
+    }, [activeKey, direction]);
+    return (jsxs("div", { ...rest, ref: ref, className: cx(tabClasses.host, {
+            [tabClasses.tabHorizontal]: direction === 'horizontal',
+            [tabClasses.tabVertical]: direction === 'vertical',
+        }, className), children: [tabItems, jsx("div", { className: tabClasses.tabActiveBar, style: activeBarStyle })] }));
+});
+
+export { Tab as default };

package/Tab/TabItem.d.ts

@@ -0,0 +1,27 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
+export interface TabItemProps extends NativeElementPropsWithoutKeyAndRef<'button'> {
+    /**
+     * Whether the tab item is active.
+     * Controlled by `<Tab />`.
+     */
+    active?: boolean;
+    /**
+     * The badge count to display on the tab item.
+     */
+    badgeCount?: number;
+    /**
+     * Whether the tab item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The icon to display on the tab item.
+     */
+    icon?: IconDefinition;
+}
+/**
+ * The react component for `mezzanine` tab.
+ */
+declare const TabItem: import("react").ForwardRefExoticComponent<TabItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default TabItem;

package/Tab/TabItem.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { tabClasses } from '@mezzanine-ui/core/tab';
+import Icon from '../Icon/Icon.js';
+import Badge from '../Badge/Badge.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tab.
+ */
+const TabItem = forwardRef(function TabItem(props, ref) {
+    const { active, badgeCount, children, className, disabled = false, icon, ...rest } = props;
+    return (jsxs("button", { ...rest, "aria-disabled": disabled, className: cx(tabClasses.tabItem, {
+            [tabClasses.tabItemActive]: active,
+        }, className), disabled: disabled, ref: ref, type: "button", children: [icon && jsx(Icon, { className: tabClasses.tabItemIcon, icon: icon, size: 16 }), children, badgeCount !== undefined && (jsx(Badge, { className: tabClasses.tabItemBadge, count: badgeCount, variant: active ? 'count-brand' : 'count-inactive' }))] }));
+});
+
+export { TabItem as default };

package/Tab/index.d.ts

@@ -0,0 +1,4 @@
+export type { TabItemProps } from './TabItem';
+export { default as TabItem } from './TabItem';
+export type { TabsChild, TabProps } from './Tab';
+export { default } from './Tab';

package/Tab/index.js

@@ -0,0 +1,2 @@
+export { default as TabItem } from './TabItem.js';
+export { default } from './Tab.js';

package/Table/Table.d.ts

@@ -1,110 +1,91 @@
-import { ReactNode } from 'react';
-import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources, TableScrolling, TableDraggable } from '@mezzanine-ui/core/table';
-import { EmptyProps } from '../Empty';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role' | 'draggable'> {
-    /**
-     * customized body className
-     */
-    bodyClassName?: string;
-    /**
-     * customized body row className
-     */
-    bodyRowClassName?: string | ((source: T) => string);
-    /**
-     * Columns of table <br />
-     * `column.render` allowed customizing the column body cell rendering. <br />
-     * `column.renderTitle` allowed customizing the column header cell rendering. <br />
-     * `column.sorter` is the sorting method that you want to apply to your column. <br />
-     * `column.onSorted` is the callback triggered whenever sort icon clicked.
-     */
+import { TableSize, type HighlightMode, type TableColumn, type TableDataSource, type TableDraggable, type TableExpandable, type TableRowSelection, type TableScroll } from '@mezzanine-ui/core/table';
+import type { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { type TableTransitionState } from './TableContext';
+import { TablePaginationProps } from './components/TablePagination';
+import type { EmptyProps } from '../Empty';
+export interface TableBaseProps<T extends TableDataSource = TableDataSource> extends Omit<NativeElementPropsWithoutKeyAndRef<'table'>, 'children' | 'draggable' | 'summary' | 'onChange'> {
+    /** Column configuration */
     columns: TableColumn<T>[];
-    /**
-     * Custom table components <br />
-     */
-    components?: TableComponents;
-    /**
-     * Data record array to be displayed. <br />
-     * Notice that each source should contain `key` or `id` prop as data primary key.
-     */
-    dataSource: TableDataSource[];
-    /**
-     * Draggable table row. This feature allows sort items by mouse dragging. Not supported when `fetchMore` is enabled and also buggy when use finger touch (mobile device).
-     * When `draggable.enabled` is true, draggable will be enabled.
-     * `draggable.onDragEnd` return new dataSource for you
-     */
-    draggable?: TableDraggable;
-    /**
-     * props exported from `<Empty />` component.
-     */
+    /** Data source */
+    dataSource: T[];
+    /** Props for Empty component when no data */
     emptyProps?: EmptyProps;
-    /**
-     * When `expandable.rowExpandable` is given, it will control whether row data is expandable or not
-     * `expandable.expandedRowRender` is a callback to helps you decides what data should be rendered.
-     */
-    expandable?: Omit<TableExpandable<T>, 'expandedRowRender'> & {
-        expandedRowRender(record: T): ReactNode | ExpandRowBySources;
-    };
-    /**
-     * customized header className
-     */
-    headerClassName?: string;
-    /**
-     * Whether table is loading or not
+    /** Expandable row configuration */
+    expandable?: TableExpandable<T>;
+    /** Highlight mode for hover effects
+     * @default 'row'
      */
+    highlight?: HighlightMode;
+    /** Loading state */
     loading?: boolean;
+    /** Number of rows to display when loading */
+    loadingRowsCount?: number;
     /**
-     * When loading is true, show specific loadingTip
-     * @default '資料載入中...'
+     * Whether the table is nested inside an expanded row content area
      */
-    loadingTip?: string;
+    nested?: boolean;
+    /** Pagination configuration */
+    pagination?: TablePaginationProps;
     /**
-     * `refresh.show` is true, refresh button will display at the top-start of table. <br />
-     * `refresh.onClick` is the callback of the refresh button.
+     * Whether columns are resizable by user interaction
+     * @default false
      */
-    refresh?: TableRefreshType;
+    resizable?: boolean;
     /**
-     * Enable row selection feature <br />
-     * `rowSelection.selectedRowKey` is the dataSource keys that are currently selected. <br />
-     * `rowSelection.onChange` is the callback when selection changed. <br />
-     * `rowSelection.actions` are the actions that you want to do for selected data.
+     * Row height preset token.
      */
-    rowSelection?: TableRowSelection;
-    /**
-     * Enable table scroll feature <br />
-     * `scroll.x` set horizontal scrolling, can also be used to specify the width of the scroll area <br />
-     * `scroll.y` Set vertical scrolling, can also be used to specify the height of the scroll area <br />
-     * `scroll.fixedFirstColumn` set first column fixed when horizontal scrolling.
+    rowHeightPreset?: 'base' | 'condensed' | 'detailed' | 'roomy';
+    /** Row selection configuration */
+    rowSelection?: TableRowSelection<T>;
+    /** Show header row */
+    showHeader?: boolean;
+    /** Custom size variant
+     * @default 'main'
      */
-    scroll?: TableScrolling;
-    /**
-     * customize scroll container className
+    size?: TableSize;
+    /** Whether to enable sticky header
+     *  @default true
      */
-    scrollContainerClassName?: string;
+    sticky?: boolean;
+    /** Transition state for row add/remove animations (from useTableDataSource hook) */
+    transitionState?: TableTransitionState;
 }
-export interface TableWithFetchMore<T> extends TableBaseProps<T> {
-    /**
-     * If `fetchMore.callback` is given, table will automatically trigger it when scrolling position reach end. <br />
-     * If `fetchMore.isReachEnd` is true, table will stop triggering callback. <br />
-     * If `fetchMore.isFetching` is true, a loading spinner will display at the end of table and stop triggering callback.
-     * <br />
-     * Notice that when `fetchMore.isFetching` is `undefined`, table will take control of it when source length changed.
-     */
-    fetchMore?: TableFetchMore;
-    pagination?: undefined;
+/**
+ * Props when virtualized scrolling is enabled.
+ * Draggable is not allowed in this mode.
+ */
+export interface TableVirtualizedProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+    /** Draggable row configuration - not available when virtualized is enabled */
+    draggable?: never;
+    /** Scroll configuration with virtualized enabled */
+    scroll: TableScroll & {
+        virtualized: true;
+        y: number | string;
+    };
 }
-export interface TableWithPagination<T> extends TableBaseProps<T> {
-    /**
-     * `pagination.current` is the current page number. (required) <br />
-     * `pagination.onChange` is the callback when page number changed. (required) <br />
-     * `pagination.disableAutoSlicing` set this to true if you don't want auto data slicing. <br />
-     * `pagination.total` is the total amount of your data. (default will be dataSource length) <br />
-     * `pagination.options` is the 'Pagination' component props. <br />
-     * Notice that if `pagination` object is given, table will disable fetchMore and use pagination instead.
-     */
-    pagination?: TablePaginationType;
-    fetchMore?: undefined;
+/**
+ * Props when virtualized scrolling is disabled or not specified.
+ * Draggable is allowed in this mode.
+ */
+export interface TableNonVirtualizedProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+    /** Draggable row configuration */
+    draggable?: TableDraggable<T>;
+    /** Scroll configuration for scrolling (virtualized defaults to false) */
+    scroll?: TableScroll & {
+        virtualized?: false;
+    };
 }
-export type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
-declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLTableElement>>;
+/**
+ * TableProps - discriminated union to ensure draggable and virtualized
+ * scrolling are mutually exclusive at the type level.
+ */
+export type TableProps<T extends TableDataSource = TableDataSource> = TableVirtualizedProps<T> | TableNonVirtualizedProps<T>;
+/**
+ * Table is a high-performance data table component with support for
+ * virtual scrolling, column resizing, fixed columns, row selection,
+ * sorting, expandable rows, and drag-and-drop row reordering.
+ */
+export declare const Table: <T extends TableDataSource = TableDataSource>(props: TableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
 export default Table;