@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.0

package/Stepper/Stepper.js

@@ -1,33 +1,67 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, Children, cloneElement } from 'react';
+import { forwardRef, Children, useRef, useCallback, cloneElement, useEffect } from 'react';
 import { stepperClasses } from '@mezzanine-ui/core/stepper';
+import { useStepDistance } from './useStepDistance.js';
 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 { children, className, currentStep = 0, onStepChange, orientation = 'horizontal', type = 'number', ...rest } = props;
     const childrenArray = Children.toArray(children);
+    const stepperRef = useRef(null);
+    const stepRefs = useRef([]);
+    const mergedRef = useCallback((element) => {
+        stepperRef.current = element;
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(element);
+            }
+            else {
+                ref.current = element;
+            }
+        }
+    }, [ref]);
+    const stepPositions = useStepDistance(orientation, stepperRef, stepRefs, type, childrenArray);
+    const getStepStatus = (index, processingIndex) => {
+        if (index === processingIndex)
+            return 'processing';
+        if (index < processingIndex)
+            return 'succeeded';
+        return 'pending';
+    };
     const stepsWithState = childrenArray.map((element, index) => {
+        var _a;
         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,
+            index,
+            orientation,
+            ref: (el) => {
+                stepRefs.current[index] = el;
+            },
+            status: getStepStatus(index, currentStep),
+            style: {
+                '--connect-line-distance': ((_a = stepPositions === null || stepPositions === void 0 ? void 0 : stepPositions.distances) === null || _a === void 0 ? void 0 : _a[index])
+                    ? `${stepPositions.distances[index]}px`
+                    : undefined,
+                ...step.props.style,
+            },
+            type,
             ...step.props,
         });
     });
-    return (jsx("div", { className: cx(stepperClasses.host, className), ref: ref, ...rest, children: stepsWithState }));
+    useEffect(() => {
+        if (typeof onStepChange === 'function') {
+            onStepChange(currentStep);
+        }
+    }, [currentStep, onStepChange]);
+    return (jsx("div", { ...rest, className: cx(stepperClasses.host, {
+            [stepperClasses.horizontal]: orientation === 'horizontal',
+            [stepperClasses.vertical]: orientation === 'vertical',
+            [stepperClasses.dot]: type === 'dot',
+            [stepperClasses.number]: type === 'number',
+        }, className), ref: mergedRef, children: stepsWithState }));
 });
 
 export { Stepper as default };

package/Stepper/index.d.ts

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

package/Stepper/index.js

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

package/Stepper/typings.d.ts

@@ -0,0 +1,77 @@
+import { ReactElement } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface StepperProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Three or more `<Step />` components.
+     */
+    children: ReactElement<StepProps> | ReactElement<StepProps>[];
+    /**
+     * Set the processing step index to replace step status.
+     * Index is zero-based (0 = first step, 1 = second step, etc.).
+     * @default 0
+     */
+    currentStep?: number;
+    /**
+     * Callback fired when the step changes.
+     * @param stepIndex The current step index after change.
+     */
+    onStepChange?: (stepIndex: number) => void;
+    /**
+     * The orientation of the stepper.
+     * - 'horizontal': Steps arranged horizontally
+     * - 'vertical': Steps arranged vertically
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The type of step indicator.
+     * - 'dot': Display as dots
+     * - 'number': Display as numbers
+     * @default 'number'
+     */
+    type?: 'dot' | 'number';
+}
+export interface StepProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title' | 'children'> {
+    /**
+     * The step description, visible if value is not empty.
+     */
+    description?: string;
+    /**
+     * Whether the step is disabled.
+     * Only applies when status is not 'processing'.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the step is in error state.
+     * Only applies when status is not 'processing'.
+     */
+    error?: boolean;
+    /**
+     * Step index, automatically set by the parent <Stepper />.
+     * Zero-based index (0 = first step, 1 = second step, etc.).
+     */
+    index?: number;
+    /**
+     * The orientation of the step, inherited from parent Stepper.
+     * - 'horizontal': Step arranged horizontally
+     * - 'vertical': Step arranged vertically
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The current status of the step, automatically set by the parent <Stepper />.
+     * - 'processing': Currently active/in progress
+     * - 'pending': Waiting to be processed (default for future steps)
+     * - 'succeeded': Successfully completed
+     */
+    status?: 'processing' | 'pending' | 'succeeded';
+    /**
+     * The step title.
+     */
+    title?: string;
+    /**
+     * The type of step indicator, inherited from parent Stepper.
+     * - 'dot': Display as dot
+     * - 'number': Display as number
+     */
+    type?: 'dot' | 'number';
+}

package/Stepper/useStepDistance.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, RefObject } from 'react';
+export declare const useStepDistance: (orientation: "horizontal" | "vertical", stepperRef: RefObject<HTMLDivElement | null>, stepRefs: RefObject<(HTMLDivElement | null)[]>, type: "dot" | "number", childrenArray: Array<Exclude<ReactNode, boolean | null | undefined>>) => {
+    distances: number[];
+    positions: Array<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+};

package/Stepper/useStepDistance.js

@@ -0,0 +1,81 @@
+import { stepClasses } from '@mezzanine-ui/core/stepper';
+import { useState, useLayoutEffect } from 'react';
+
+const useStepDistance = (orientation, stepperRef, stepRefs, type, childrenArray) => {
+    const [stepPositions, setStepPositions] = useState({ distances: [], positions: [] });
+    // Calculate position and distance between each step
+    useLayoutEffect(() => {
+        const calculatePositions = () => {
+            if (!stepperRef.current || stepRefs.current.length === 0)
+                return;
+            const stepperRect = stepperRef.current.getBoundingClientRect();
+            const positions = [];
+            const distances = [];
+            stepRefs.current.forEach((stepElement) => {
+                if (stepElement) {
+                    const stepRect = stepElement.getBoundingClientRect();
+                    positions.push({
+                        x: stepRect.left - stepperRect.left,
+                        y: stepRect.top - stepperRect.top,
+                        width: stepRect.width,
+                        height: stepRect.height,
+                    });
+                }
+            });
+            // Calculate distance between each pair of adjacent steps
+            for (let i = 0; i < positions.length - 1; i += 1) {
+                const next = positions[i + 1];
+                const currentStepElement = stepRefs.current[i];
+                if (orientation === 'horizontal' && type === 'number') {
+                    // Horizontal number version: from current step title to next step start
+                    const titleElement = currentStepElement === null || currentStepElement === void 0 ? void 0 : currentStepElement.querySelector(`.${stepClasses.titleConnectLine}`);
+                    if (titleElement) {
+                        const titleRect = titleElement.getBoundingClientRect();
+                        const titleEnd = titleRect.right - stepperRect.left;
+                        distances.push(next.x - titleEnd);
+                    }
+                    else {
+                        distances.push(0);
+                    }
+                }
+                else if (orientation === 'horizontal' && type === 'dot') {
+                    // Horizontal dot version: calculate x-axis distance from status-indicator
+                    const statusIndicatorElement = currentStepElement === null || currentStepElement === void 0 ? void 0 : currentStepElement.querySelector(`.${stepClasses.statusIndicator}`);
+                    if (statusIndicatorElement) {
+                        const statusIndicatorRect = statusIndicatorElement.getBoundingClientRect();
+                        const statusIndicatorEnd = statusIndicatorRect.right - stepperRect.left;
+                        distances.push(next.x +
+                            next.width / 2 -
+                            statusIndicatorEnd -
+                            statusIndicatorElement.clientWidth / 2);
+                    }
+                    else {
+                        distances.push(0);
+                    }
+                }
+                else {
+                    // Vertical orientation: calculate y-axis distance
+                    const statusIndicatorElement = currentStepElement === null || currentStepElement === void 0 ? void 0 : currentStepElement.querySelector(`.${stepClasses.statusIndicator}`);
+                    if (statusIndicatorElement) {
+                        const statusIndicatorRect = statusIndicatorElement.getBoundingClientRect();
+                        const statusIndicatorEnd = statusIndicatorRect.bottom - stepperRect.top;
+                        distances.push(next.y - statusIndicatorEnd);
+                    }
+                    else {
+                        distances.push(0);
+                    }
+                }
+            }
+            setStepPositions({ distances, positions });
+        };
+        calculatePositions();
+        // Add resize listener to recalculate positions on window resize
+        window.addEventListener('resize', calculatePositions);
+        return () => {
+            window.removeEventListener('resize', calculatePositions);
+        };
+    }, [orientation, type, childrenArray.length, stepperRef, stepRefs]);
+    return stepPositions;
+};
+
+export { useStepDistance };

package/Stepper/useStepper.d.ts

@@ -0,0 +1,21 @@
+export interface UseStepperOptions {
+    /**
+     * The default step index to start from.
+     * Index is zero-based (0 = first step, 1 = second step, etc.).
+     * @default 0
+     */
+    defaultStep?: number;
+    /**
+     * Total number of steps in the stepper.
+     * @default Number.MAX_VALUE
+     */
+    totalSteps?: number;
+}
+export declare const useStepper: ({ defaultStep, totalSteps, }: UseStepperOptions) => {
+    currentStep: number;
+    goToStep: (step: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    nextStep: () => void;
+    prevStep: () => void;
+};

package/Stepper/useStepper.js

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+const useStepper = ({ defaultStep = 0, totalSteps = Number.MAX_VALUE, }) => {
+    const [currentStep, setCurrentStep] = useState(defaultStep);
+    const goToStep = (step) => {
+        setCurrentStep(Math.max(0, Math.min(step, totalSteps - 1)));
+    };
+    const isFirstStep = currentStep === 0;
+    const isLastStep = currentStep === totalSteps - 1;
+    const nextStep = () => {
+        setCurrentStep((prev) => Math.min(prev + 1, totalSteps - 1));
+    };
+    const prevStep = () => {
+        setCurrentStep((prev) => Math.max(prev - 1, 0));
+    };
+    return {
+        currentStep,
+        goToStep,
+        isFirstStep,
+        isLastStep,
+        nextStep,
+        prevStep,
+    };
+};
+
+export { useStepper };

package/Table/Table.js

@@ -15,7 +15,7 @@ import { useTableDraggable } from './draggable/useTableDraggable.js';
 import useTableScroll from './useTableScroll.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { composeRefs } from '../utils/composeRefs.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import cx from 'clsx';
 
 const Table = forwardRef(function Table(props, ref) {
@@ -155,7 +155,7 @@ const Table = forwardRef(function Table(props, ref) {
         }
         return undefined;
     }, [bodyRowClassName]);
-    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
+    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Spin, { loading: loading, stretch: true, description: loadingTip, backdropProps: {
                             className: tableClasses.loading,
                         }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll
                                             ? {

package/Table/TableBody.js

@@ -1,9 +1,10 @@
+'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 Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import Empty from '../Empty/Empty.js';
 import cx from 'clsx';
 
@@ -24,7 +25,7 @@ const TableBody = forwardRef(function TableBody(props, ref) {
     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(Loading, { loading: true }) }) })) : null] }));
+    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.js

@@ -1,3 +1,4 @@
+'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';

package/Table/TableContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from 'react';
 
 const TableContext = createContext(null);

package/Table/TableExpandedTable.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';

package/Table/TableHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext, useMemo } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';

package/Table/editable/TableEditRenderWrapper.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { TableComponentContext } from '../TableContext.js';

package/Table/expandable/TableExpandable.js

@@ -18,7 +18,7 @@ const TableExpandable = forwardRef(function TableExpandable(props, ref) {
     };
     return (jsx("div", { ...rest, ref: ref, className: cx(tableClasses.collapseAction, className), children: jsx("div", { className: tableClasses.icon, children: showIcon ? (jsx(Icon, { className: cx(tableClasses.icon, {
                     [tableClasses.iconClickable]: expandable,
-                }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } })) : null }) }));
+                }), color: expandable ? 'brand' : 'neutral-faint', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } })) : null }) }));
 });
 
 export { TableExpandable as default };

package/Table/index.d.ts

@@ -1,7 +1,10 @@
-export { TableProps, default } from './Table';
-export { TableRefreshProps, default as TableRefresh, } from './refresh/TableRefresh';
-export { TableCellProps, default as TableCell } from './TableCell';
-export { EditableBodyCellProps } from './editable/TableEditRenderWrapper';
+export type { TableProps } from './Table';
+export { default } from './Table';
+export { default as TableRefresh } from './refresh/TableRefresh';
+export type { TableRefreshProps } from './refresh/TableRefresh';
+export type { TableCellProps } from './TableCell';
+export { default as TableCell } from './TableCell';
+export type { EditableBodyCellProps } from './editable/TableEditRenderWrapper';
 export { useTableDraggable } from './draggable/useTableDraggable';
 export { useTableRowSelection, SELECTED_ALL_KEY, } from './rowSelection/useTableRowSelection';
 export { default as useTableScroll } from './useTableScroll';

package/Table/pagination/TablePagination.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';

package/Table/pagination/useTablePagination.js

@@ -1,3 +1,4 @@
+'use client';
 import { useContext } from 'react';
 import { useControlValueState } from '../../Form/useControlValueState.js';
 import { useLastCallback } from '../../hooks/useLastCallback.js';

package/Table/refresh/TableRefresh.js

@@ -1,5 +1,7 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useCallback } from 'react';
+import cx from 'clsx';
 import { tableClasses } from '@mezzanine-ui/core/table';
 import { ResetIcon } from '@mezzanine-ui/icons';
 import { TableContext } from '../TableContext.js';
@@ -14,7 +16,7 @@ const TableRefresh = forwardRef(function TableRefresh(props, ref) {
         setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }, [onClick, setLoading]);
-    return (jsx("div", { ref: ref, className: tableClasses.refresh, ...rest, children: jsx(Button, { onClick: onRefreshClicked, prefix: jsx(Icon, { icon: ResetIcon }), children: children || '重新整理' }) }));
+    return (jsx("div", { ref: ref, className: cx(tableClasses.refresh, className), ...rest, children: jsx(Button, { onClick: onRefreshClicked, prefix: jsx(Icon, { icon: ResetIcon }), children: children || '重新整理' }) }));
 });
 
 export { TableRefresh as default };

package/Table/rowSelection/TableRowSelection.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext, useCallback, useMemo, useEffect, useState } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
@@ -5,9 +6,9 @@ import xor from 'lodash/xor';
 import { MoreVerticalIcon } from '@mezzanine-ui/icons';
 import { TableContext, TableDataContext } from '../TableContext.js';
 import { SELECTED_ALL_KEY } from './useTableRowSelection.js';
+import Checkbox from '../../Checkbox/Checkbox.js';
 import Menu from '../../Menu/Menu.js';
 import MenuItem from '../../Menu/MenuItem.js';
-import Checkbox from '../../Checkbox/Checkbox.js';
 import Dropdown from '../../Dropdown/Dropdown.js';
 import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
@@ -86,7 +87,7 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
                         },
                     }, children: (dropdownRef) => (jsx(Icon, { ref: dropdownRef, className: cx(tableClasses.icon, {
                             [tableClasses.iconClickable]: isMenuAllowOpen,
-                        }), color: isMenuAllowOpen ? 'primary' : 'disabled', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })) : null] }));
+                        }), color: isMenuAllowOpen ? 'brand' : 'neutral-faint', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })) : null] }));
 });
 
 export { TableRowSelection as default };

package/Table/sorting/TableSortingIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
@@ -14,7 +15,7 @@ const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
     /** styling */
     const currentType = (key === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
     const currentIconStyle = useMemo(() => ({
-        color: currentType === 'none' ? 'secondary' : 'primary',
+        color: currentType === 'none' ? 'neutral' : 'neutral-strong',
         style: {
             transform: `rotate(${90 * (currentType === 'asc' ? -1 : 1)}deg)`,
         },

package/Table/sorting/useTableSorting.js

@@ -56,6 +56,7 @@ function useTableSorting(props) {
             !equalityFn(prevDataSourceProps, dataSourceProp, true)) {
             setDataSource(dataSourceProp);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [prevDataSourceProps, dataSourceProp]);
     const getNextSortedType = useCallback((currentType) => {
         // none -> desc -> asc -> none

package/Table/useTableFetchMore.js

@@ -39,7 +39,7 @@ function useTableFetchMore(props) {
         if (prevSourceLength !== currentSourceLength) {
             onFetching(false);
         }
-    }, [prevSourceLength, currentSourceLength]);
+    }, [prevSourceLength, currentSourceLength, onFetching]);
     return {
         fetchMore,
         isFetching,

package/Table/useTableScroll.d.ts

@@ -69,7 +69,7 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;
@@ -152,7 +152,7 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -202,8 +202,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
@@ -356,7 +354,7 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;
@@ -439,7 +437,7 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -489,8 +487,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;

package/Table/useTableScroll.js

@@ -77,7 +77,7 @@ function useTableScroll(props) {
             !scrollBarTrackRef.current)
             return;
         /** 觸控螢幕不需要 scroll bar */
-        const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        const isTouchEnabled = navigator.maxTouchPoints > 0;
         /** firefox 的滾軸只能同時顯示 or 取消，所以乾脆就用原生的（除非能單獨關掉直向的滾軸，只顯示橫向的才行） */
         const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         if (isTouchEnabled || isFirefox)
@@ -98,7 +98,7 @@ function useTableScroll(props) {
                 `${scrollBarSize}px`;
         }
         resetPointerOffset();
-    }, []);
+    }, [resetPointerOffset, scrollBarSize]);
     /** when use mouse to drag scroll bar, get cursor position */
     const onScrollBarMouseDown = useCallback(({ clientY }) => {
         const { current: scrollBar } = scrollBarRef;
@@ -107,7 +107,7 @@ function useTableScroll(props) {
         const { top: initScrollBarTop } = scrollBar.getBoundingClientRect();
         setPointerOffset(clientY - initScrollBarTop);
     }, []);
-    const onScrollBarMouseUp = useCallback(() => resetPointerOffset(), []);
+    const onScrollBarMouseUp = useCallback(() => resetPointerOffset(), [resetPointerOffset]);
     /** 偵測 table 高度是否發生變化，有的話就要重新計算 scroll bar 長度 */
     useEffect(() => {
         const { current: table } = tableRef;
@@ -122,7 +122,7 @@ function useTableScroll(props) {
             };
         }
         return () => { };
-    }, []);
+    }, [onSetScrollBarHeight]);
     useEffect(() => {
         const { current: body } = scrollRef;
         const { current: scrollBar } = scrollBarRef;
@@ -208,7 +208,7 @@ function useTableScroll(props) {
             scrollBarRef.current.childNodes[0].style.width =
                 `${scrollBarSize + 6}px`;
         }
-    }, []);
+    }, [scrollBarSize]);
     /** scroll table directly */
     const setScrollBarTop = useCallback(() => {
         if (scrollRef.current) {
@@ -224,7 +224,7 @@ function useTableScroll(props) {
                 scrollBarTrackRef.current.style.height = `${tableHeight - HEADER_DEFAULT_HEIGHT}px`;
             }
         }
-    }, [scrollBarHeight, pointerOffset]);
+    }, [pointerOffset]);
     const onScroll = useCallback((scrollTarget) => {
         /** 使用者開始橫向滾動 */
         if (scrollTarget.target.scrollLeft) {
@@ -270,7 +270,9 @@ function useTableScroll(props) {
             ...defaultScrollBarTrackStyle,
             height: `${(_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0}px`,
         });
-    }, [scrollBarHeight]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scrollBarHeight]);
     /** composing result */
     const tableScrollContainer = {
         ref: scrollRef,

package/Tabs/TabPane.js

@@ -11,6 +11,7 @@ const TabPane = forwardRef(function TabPane(props, ref) {
     /**
      * Ignore it
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     tab, ...rest } = props;
     return (jsx("div", { ...rest, ref: ref, className: cx(tabsClasses.pane, className), children: children }));
 });