@mezzanine-ui/react 0.6.4

package/Slider/useSlider.js

@@ -0,0 +1,104 @@
+import { toSliderCssVars, getPercentage, isRangeSlider, sortSliderValue, findClosetValueIndex, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
+import { useRef, useState } from 'react';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+
+function useSlider(props) {
+    const { max, min, onChange, step, value, } = props;
+    const railRef = useRef(null);
+    const [anchorValue, setAnchorValue] = useState(undefined);
+    const [dragging, setDragging] = useState(false);
+    function getActiveIndex() {
+        if (typeof anchorValue !== 'number') {
+            return undefined;
+        }
+        return isRangeSlider(value) ? Math.abs(1 - value.indexOf(anchorValue)) : undefined;
+    }
+    const cssVars = toSliderCssVars({
+        trackWidth: getPercentage(isRangeSlider(value) ? Math.abs(value[0] - value[1]) : value, min, max),
+        trackPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.min(...value) - min) : 0, min, max),
+        handlerPosition: getPercentage(isRangeSlider(value) ? 0 : value, min, max),
+        handlerStartPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.min(...value) - min) : value, min, max),
+        handlerEndPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.max(...value) - min) : value, min, max),
+    });
+    const getRoundedNewValue = (e, railElement) => {
+        const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
+        const trackDims = getSliderRect(railElement);
+        const newValue = getValueFromClientX(clientX, trackDims, min, max);
+        const roundedNewValue = roundToStep(newValue, step, min, max);
+        return roundedNewValue;
+    };
+    const handlePress = (e, index) => {
+        e.preventDefault();
+        setDragging(true);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setAnchorValue(isRangeSlider(value) ? value[Math.abs(1 - index)] : value);
+    };
+    const handleDrag = onChange ? (e) => {
+        e.preventDefault();
+        const { current: railElement } = railRef;
+        if (!railElement)
+            return;
+        const roundedNewValue = getRoundedNewValue(e, railElement);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const activeIndex = getActiveIndex();
+        if (isRangeSlider(value)) {
+            const newValue = [
+                ...value.slice(0, activeIndex),
+                roundedNewValue,
+                ...value.slice(activeIndex + 1),
+            ];
+            onChange(sortSliderValue(newValue));
+            return;
+        }
+        onChange(roundedNewValue);
+    } : undefined;
+    const handleDragEnd = (e) => {
+        e.preventDefault();
+        setDragging(false);
+        setAnchorValue(undefined);
+    };
+    const handleClickTrackOrRail = onChange ? (e) => {
+        setDragging(true);
+        const { current: railElement } = railRef;
+        if (!railElement)
+            return;
+        const roundedNewValue = getRoundedNewValue(e, railElement);
+        const closetHandlerIndex = findClosetValueIndex(value, roundedNewValue);
+        if (isRangeSlider(value)) {
+            setAnchorValue(value[Math.abs(1 - closetHandlerIndex)]);
+            const newValue = [
+                ...value.slice(0, closetHandlerIndex),
+                roundedNewValue,
+                ...value.slice(closetHandlerIndex + 1),
+            ];
+            onChange(sortSliderValue(newValue));
+            return;
+        }
+        onChange(roundedNewValue);
+    } : undefined;
+    useDocumentEvents(() => (dragging
+        ? {
+            mousemove: handleDrag,
+            touchmove: handleDrag,
+            mouseleave: handleDragEnd,
+            mouseup: handleDragEnd,
+            touchend: handleDragEnd,
+            touchcancel: handleDragEnd,
+        }
+        : undefined), [
+        dragging,
+        min,
+        max,
+        step,
+        onChange,
+    ]);
+    return {
+        activeHandleIndex: getActiveIndex(),
+        cssVars,
+        handleClickTrackOrRail,
+        handlePress,
+        railRef,
+    };
+}
+
+export { useSlider };

package/Stepper/Step.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { IconProps } from '../Icon';
+import { TypographyProps } from '../Typography';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface StepProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
+    /**
+     * Mark the step as active. automatically set by `activeStep` of `Stepper`.
+     */
+    active?: boolean;
+    /**
+     * Mark the step as completed. automatically set by `activeStep` of `Stepper`.
+     */
+    completed?: boolean;
+    /**
+     * Step icon props. effective only when the step is completed.
+     * @default 'icon: CheckIcon'
+     */
+    completedIconProps?: IconProps;
+    /**
+     * Mark the step as disabled. automatically set by `activeStep` of `Stepper`.
+     */
+    disabled?: boolean;
+    /**
+     * Step index. automatically set by the parent <Stepper />.
+     */
+    index?: number;
+    /**
+     * The step label on the right side of the icon, visible if value is not empty.
+     */
+    title?: string;
+    /**
+     * title typography props.
+     * @default 'variant: button2'
+     */
+    titleProps?: Omit<TypographyProps, 'children'>;
+}
+/**
+ * The react component for `mezzanine` step.
+ */
+declare const Step: import("react").ForwardRefExoticComponent<StepProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Step;

package/Stepper/Step.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { stepClasses } from '@mezzanine-ui/core/stepper';
+import { CheckIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` step.
+ */
+const Step = forwardRef(function Step(props, ref) {
+    const { active, children, className, completed, completedIconProps, disabled, index = -1, title, titleProps, ...rest } = props;
+    /** icon and step number */
+    const iconRender = (jsx(Typography, Object.assign({ className: stepClasses.iconBackground, variant: "button3" }, { children: completed ? (jsx(Icon, Object.assign({ className: stepClasses.completedIcon, icon: CheckIcon }, completedIconProps), void 0)) : index + 1 }), void 0));
+    return (jsxs("div", Object.assign({ className: cx(stepClasses.host, disabled && stepClasses.disabled, className), ref: ref }, rest, { children: [iconRender, /** title (optional) */ title && (jsx(Typography, Object.assign({ className: stepClasses.title, variant: "button2" }, titleProps, { children: title }), void 0)), children] }), void 0));
+});
+
+export default Step;

package/Stepper/Stepper.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface StepperProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Set the active step (zero based index) and set other `<Step />` to completed or disabled depending on index.
+     * Set to -1 to disable all the steps.
+     * @default -1
+     */
+    activeStep?: number;
+    /**
+     * Two or more `<Step />` components.
+     */
+    children: ReactNode;
+}
+/**
+ * The react component for `mezzanine` stepper.
+ */
+declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/Stepper/Stepper.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, cloneElement } from 'react';
+import { stepperClasses } from '@mezzanine-ui/core/stepper';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` stepper.
+ */
+const Stepper = forwardRef(function Stepper(props, ref) {
+    const { activeStep = -1, children, className, ...rest } = props;
+    const childrenArray = Children.toArray(children);
+    const stepsWithState = childrenArray.map((element, index) => {
+        const step = element;
+        const state = {
+            index,
+            active: activeStep === index,
+            completed: activeStep > index,
+            disabled: activeStep < index,
+        };
+        if (step.props.active || step.props.disabled || step.props.completed) {
+            state.active = false;
+            state.completed = false;
+            state.disabled = false;
+        }
+        return cloneElement(step, {
+            ...state,
+            ...step.props,
+        });
+    });
+    return (jsx("div", Object.assign({ className: cx(stepperClasses.host, className), ref: ref }, rest, { children: stepsWithState }), void 0));
+});
+
+export default Stepper;

package/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { StepProps, default as Step, } from './Step';
+export { StepperProps, default, } from './Stepper';

package/Stepper/index.js

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

package/Switch/Switch.d.ts

@@ -0,0 +1,43 @@
+import { ChangeEventHandler } from 'react';
+import { SwitchSize } from '@mezzanine-ui/core/switch';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface SwitchProps extends Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'onChange'> {
+    /**
+     * Whether the switch is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is checked by default.
+     * Only used for uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the switch is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     *  If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
+    /**
+     * Whether the switch is loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Invoked by input change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The size of switch.
+     * @default 'medium'
+     */
+    size?: SwitchSize;
+}
+/**
+ * The react component for `mezzanine` switch.
+ */
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Switch;

package/Switch/Switch.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { switchClasses, SwitchSpinnerIcon } from '@mezzanine-ui/core/switch';
+import { useSwitchControlValue } from '../Form/useSwitchControlValue.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` switch.
+ */
+const Switch = forwardRef(function Switch(props, ref) {
+    const { disabled: disabledFromFormControl, } = useContext(FormControlContext) || {};
+    const { checked: checkedProp, className, defaultChecked, disabled: disabledProp = disabledFromFormControl, inputProps, loading = false, onChange: onChangeProp, size = 'medium', ...rest } = props;
+    const [checked, onChange] = useSwitchControlValue({
+        checked: checkedProp,
+        defaultChecked,
+        onChange: onChangeProp,
+    });
+    const disabled = loading || disabledProp;
+    return (jsxs("span", Object.assign({ ref: ref }, rest, { className: cx(switchClasses.host, {
+            [switchClasses.checked]: checked,
+            [switchClasses.disabled]: disabled,
+            [switchClasses.large]: size === 'large',
+        }, className) }, { children: [jsx("span", Object.assign({ className: switchClasses.control }, { children: loading && jsx(Icon, { icon: SwitchSpinnerIcon, spin: true }, void 0) }), void 0),
+            jsx("input", Object.assign({}, inputProps, { "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: switchClasses.input, disabled: disabled, onChange: onChange, type: "checkbox" }), void 0)] }), void 0));
+});
+
+export default Switch;

package/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export type { SwitchSize, } from '@mezzanine-ui/core/switch';
+export { SwitchProps, default } from './Switch';

package/Switch/index.js

@@ -0,0 +1 @@
+export { default } from './Switch.js';

package/Table/Table.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType } from '@mezzanine-ui/core/table';
+import { EmptyProps } from '../Empty';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
+    /**
+     * customized body className
+     */
+    bodyClassName?: string;
+    /**
+     * customized body row className
+     */
+    bodyRowClassName?: 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.
+     */
+    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[];
+    /**
+     * props exported from `<Empty />` component.
+     */
+    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?: TableExpandable<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;
+    /**
+     * customized header className
+     */
+    headerClassName?: string;
+    /**
+     * Whether table is loading or not
+     */
+    loading?: boolean;
+    /**
+     * `pagination.show` controls pagination display. <br />
+     * `pagination.current` is the current page number. <br />
+     * `pagination.onChange` is the callback when page number changed. <br />
+     * `pagination.total` is the total amount of your data. <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;
+    /**
+     * `refresh.show` is true, refresh button will display at the top-start of table. <br />
+     * `refresh.onClick` is the callback of the refresh button.
+     */
+    refresh?: TableRefreshType;
+    /**
+     * 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.
+     */
+    rowSelection?: TableRowSelection;
+}
+declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>>;
+export default Table;

package/Table/Table.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { TableContext, TableDataContext, TableComponentContext } from './TableContext.js';
+import TableHeader from './TableHeader.js';
+import TableBody from './TableBody.js';
+import TablePagination from './pagination/TablePagination.js';
+import TableRefresh from './refresh/TableRefresh.js';
+import { useTableRowSelection } from './rowSelection/useTableRowSelection.js';
+import { useTableSorting } from './sorting/useTableSorting.js';
+import { useTableLoading } from './useTableLoading.js';
+import { useTableFetchMore } from './useTableFetchMore.js';
+import Loading from '../Loading/Loading.js';
+import cx from 'clsx';
+
+const Table = forwardRef(function Table(props, ref) {
+    var _a;
+    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, ...rest } = props;
+    const bodyRef = useRef(null);
+    /** Feature rowSelection */
+    const [selectedRowKeys, setSelectedRowKey] = useTableRowSelection({
+        selectedRowKey: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.selectedRowKey,
+        onChange: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.onChange,
+        dataSource: dataSourceProp,
+    });
+    const rowSelection = useMemo(() => (rowSelectionProp ? {
+        selectedRowKeys,
+        onChange: setSelectedRowKey,
+        actions: rowSelectionProp.actions,
+    } : undefined), [
+        rowSelectionProp,
+        selectedRowKeys,
+        setSelectedRowKey,
+    ]);
+    /** Feature sorting */
+    const [dataSource, onSort, { sortedOn, sortedType, onResetAll }] = useTableSorting({
+        dataSource: dataSourceProp,
+    });
+    /** Feature loading */
+    const [loading, setLoading] = useTableLoading({
+        loading: loadingProp,
+    });
+    /** Feature fetchMore */
+    const { fetchMore: onFetchMore, isFetching, isReachEnd, } = useTableFetchMore({
+        callback: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.callback,
+        dataSource,
+        /** when pagination is given, fetchMore feature should be disabled */
+        disabled: !!paginationProp,
+        isReachEnd: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isReachEnd,
+        isFetching: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isFetching,
+    });
+    /** Feature refresh */
+    const isRefreshShow = useMemo(() => {
+        var _a;
+        return ((_a = 
+        /** @default false */
+        refreshProp === null || 
+        /** @default false */
+        refreshProp === void 0 ? void 0 : 
+        /** @default false */
+        refreshProp.show) !== null && _a !== void 0 ? _a : false);
+    }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
+    /** context */
+    const tableContextValue = useMemo(() => ({
+        scrollBarSize: 4,
+        emptyProps,
+        rowSelection,
+        sorting: {
+            onSort,
+            onResetAll,
+            sortedOn,
+            sortedType,
+        },
+        loading,
+        setLoading,
+        expanding: expandableProp,
+        fetchMore: onFetchMore ? {
+            onFetchMore,
+            isFetching,
+            isReachEnd,
+        } : undefined,
+        pagination: paginationProp,
+    }), [
+        emptyProps,
+        expandableProp,
+        rowSelection,
+        onSort,
+        onResetAll,
+        sortedOn,
+        sortedType,
+        loading,
+        setLoading,
+        onFetchMore,
+        isFetching,
+        isReachEnd,
+        paginationProp,
+    ]);
+    const tableDataContextValue = {
+        columns,
+        dataSource,
+    };
+    const tableComponentContextValue = {
+        bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
+    };
+    return (jsx(Loading, Object.assign({ loading: loading, stretch: true, tip: "\u8CC7\u6599\u8F09\u5165\u4E2D..." }, { children: jsx("div", Object.assign({ ref: ref }, rest, { className: cx(tableClasses.host, className), role: "grid" }, { children: jsx(TableContext.Provider, Object.assign({ value: tableContextValue }, { children: jsx(TableDataContext.Provider, Object.assign({ value: tableDataContextValue }, { children: jsxs(TableComponentContext.Provider, Object.assign({ value: tableComponentContextValue }, { children: [isRefreshShow ? (jsx(TableRefresh, { onClick: refreshProp.onClick }, void 0)) : null,
+                            jsx(TableHeader, { className: headerClassName }, void 0),
+                            jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }, void 0),
+                            (paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.show) ? (jsx(TablePagination, { bodyRef: bodyRef }, void 0)) : null] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
+});
+
+export default Table;

package/Table/TableBody.d.ts

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

package/Table/TableBody.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import useTableScroll from './useTableScroll.js';
+import { TableDataContext, TableContext } from './TableContext.js';
+import TableBodyRow from './TableBodyRow.js';
+import Loading from '../Loading/Loading.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, scrollBarSize, fetchMore, } = useContext(TableContext) || {};
+    const [tableBody, scrollElement] = useTableScroll();
+    const composedRefs = useComposeRefs([ref, tableBody.ref]);
+    /** customizing empty */
+    const { className: emptyComponentClassName = '', children: emptyComponentChildren = '查無資料', fullHeight: emptyComponentFullHeight = true, ...restEmptyProps } = emptyProps || {};
+    return (jsxs("div", Object.assign({}, rest, { ref: composedRefs, className: cx(tableClasses.body, className), onScroll: tableBody.onScroll, role: "rowgroup" }, { children: [dataSource.length ? dataSource.map((rowData) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData }, (rowData.key || rowData.id)))) : (jsx(Empty, Object.assign({}, restEmptyProps, { className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight }, { children: emptyComponentChildren }), void 0)),
+            (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("div", Object.assign({ className: tableClasses.bodyFetchMore }, { children: jsx(Loading, { loading: true }, void 0) }), void 0)) : null,
+            jsx("div", Object.assign({ ref: scrollElement.ref, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1 }, { children: jsx("div", { style: {
+                        width: `${scrollBarSize}px`,
+                        height: '100%',
+                        borderRadius: '10px',
+                        backgroundColor: '#7d7d7d',
+                        transition: '0.1s',
+                    } }, void 0) }), void 0)] }), void 0));
+});
+
+export default TableBody;

package/Table/TableBodyRow.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+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;
+}
+declare const TableBodyRow: import("react").ForwardRefExoticComponent<TableBodyRowProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableBodyRow;

package/Table/TableBodyRow.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useMemo, useCallback, Fragment } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { TableContext, TableDataContext } from './TableContext.js';
+import TableCell from './TableCell.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 cx from 'clsx';
+
+const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
+    const { className, rowData, ...rest } = props;
+    const { rowSelection, expanding, } = 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]);
+    /** styling */
+    const getColumnStyle = useCallback((column) => {
+        let style = {};
+        if (column.width) {
+            style = {
+                ...style,
+                width: column.width,
+                maxWidth: column.width,
+            };
+        }
+        return style;
+    }, []);
+    const getCellStyle = useCallback((column) => {
+        let style = {};
+        if (column.align) {
+            style = {
+                ...style,
+                justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
+            };
+        }
+        return style;
+    }, []);
+    return (jsxs(Fragment, { children: [jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.bodyRow, {
+                    [tableClasses.bodyRowHighlight]: selected || expanded,
+                }, className), role: "row" }, { children: [rowSelection ? (jsx(TableRowSelection, { role: "gridcell", rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false }, void 0)) : null,
+                    expanding ? (jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, role: "gridcell", setExpanded: setExpanded }, void 0)) : null,
+                    (columns !== null && columns !== void 0 ? columns : []).map((column, index) => {
+                        var _a, _b, _c, _d;
+                        const ellipsis = !!(rowData[column.dataIndex]) && ((_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 : rowData[column.dataIndex]);
+                        return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column) }, { children: jsx(TableEditRenderWrapper, Object.assign({}, column, { rowData: rowData }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, index)) || rowData[column.dataIndex] }), void 0) }), void 0) }), `${column.dataIndex}-${column.title}`));
+                    })] }), void 0),
+            renderedExpandedContent ? (jsx(AccordionDetails, Object.assign({ className: expanding.className, expanded: expanded }, { children: renderedExpandedContent }), void 0)) : null] }, void 0));
+});
+
+export default TableBodyRow;

package/Table/TableCell.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+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;