@mezzanine-ui/react 0.6.4

package/Table/sorting/useTableSorting.js

@@ -0,0 +1,90 @@
+import { useState, useCallback } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useControlValueState } from '../../Form/useControlValueState.js';
+import { useLastCallback } from '../../hooks/useLastCallback.js';
+
+const sortSource = (prev, cur) => {
+    const prevKey = (prev.key || prev.id);
+    const curKey = (cur.key || cur.id);
+    if (prevKey < curKey)
+        return -1;
+    if (prevKey > curKey)
+        return 1;
+    return 0;
+};
+const equalityFn = (a, b) => {
+    const sortedA = a.slice(0).sort(sortSource);
+    const sortedB = b.slice(0).sort(sortSource);
+    const mappedAKeys = sortedA.map((s) => (s.key || s.id));
+    const mappedBKeys = sortedB.map((s) => (s.key || s.id));
+    const isShallowEqual = mappedAKeys.length === mappedBKeys.length &&
+        mappedAKeys.every((v, idx) => v === mappedBKeys[idx]);
+    if (isShallowEqual) {
+        // we need to do deep compare to sync dataSources
+        return sortedA.every((v, idx) => isEqual(v, sortedB[idx]));
+    }
+    // since shallow equal checked that array is different, so we don't need do deep compare
+    return false;
+};
+function useTableSorting(props) {
+    const { dataSource: dataSourceProp, } = props;
+    const [sortedOn, setSortedOn] = useState('');
+    const [sortedType, setSortedType] = useState('none');
+    const [dataSource, setDataSource] = useControlValueState({
+        defaultValue: [],
+        equalityFn,
+        value: dataSourceProp,
+    });
+    const getNextSortedType = useCallback((currentType) => {
+        // none -> desc -> asc -> none
+        if (currentType === 'none')
+            return 'desc';
+        if (currentType === 'desc')
+            return 'asc';
+        return 'none';
+    }, []);
+    const onReset = useCallback(() => setSortedOn(''), []);
+    const onResetAll = useCallback(() => {
+        setSortedOn('');
+        setSortedType('none');
+    }, []);
+    const onChange = useLastCallback((opts) => {
+        const { dataIndex, sorter, onSorted } = opts;
+        const onMappingSources = (sources) => {
+            setDataSource(sources);
+            onSorted === null || onSorted === void 0 ? void 0 : onSorted(sources);
+        };
+        // only apply changes when column sorter is given
+        if (typeof sorter === 'function') {
+            // should update next sorted type first
+            const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
+            const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
+            setSortedType(nextSortedType);
+            switch (nextSortedType) {
+                case 'desc':
+                case 'asc': {
+                    // update current working dataIndex
+                    setSortedOn(dataIndex);
+                    // getting new source instance (when switch between sorter, should use origin dataSource)
+                    let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
+                    // sort by given sorter
+                    newSource = newSource.sort((a, b) => (
+                    // reverse result when sorted type is ascending
+                    (sorter(a[dataIndex], b[dataIndex])) * (nextSortedType === 'asc' ? -1 : 1)));
+                    // map back the data source
+                    onMappingSources(newSource);
+                    break;
+                }
+                case 'none':
+                default: {
+                    onReset();
+                    onMappingSources(dataSourceProp);
+                    break;
+                }
+            }
+        }
+    });
+    return [dataSource, onChange, { sortedOn, sortedType, onResetAll }];
+}
+
+export { useTableSorting };

package/Table/useTableFetchMore.d.ts

@@ -0,0 +1,10 @@
+import { TableFetchMore, TableDataSource } from '@mezzanine-ui/core/table';
+export interface UseTableFetchMore extends TableFetchMore {
+    dataSource: TableDataSource[];
+    disabled?: boolean;
+}
+export declare function useTableFetchMore(props: UseTableFetchMore): {
+    readonly fetchMore: (() => void) | undefined;
+    readonly isFetching: boolean;
+    readonly isReachEnd: boolean;
+};

package/Table/useTableFetchMore.js

@@ -0,0 +1,50 @@
+import { useMemo, useEffect } from 'react';
+import { useControlValueState } from '../Form/useControlValueState.js';
+import { useLastCallback } from '../hooks/useLastCallback.js';
+import { usePreviousValue } from '../hooks/usePreviousValue.js';
+
+const equalityFn = (a, b) => a === b;
+function useTableFetchMore(props) {
+    const { callback: callbackProp, dataSource, disabled = false, isReachEnd: isReachEndProp, isFetching: isFetchingProp, } = props;
+    /** reach end indicator */
+    const [isReachEnd] = useControlValueState({
+        defaultValue: false,
+        equalityFn,
+        value: isReachEndProp,
+    });
+    /** fetching indicator */
+    const [isFetching, setFetching] = useControlValueState({
+        defaultValue: false,
+        equalityFn,
+        value: isFetchingProp,
+    });
+    const onFetching = useLastCallback((newState) => {
+        if (!equalityFn(isFetching, newState))
+            setFetching(newState);
+    });
+    /** fetchMore called */
+    const onFetchMore = useLastCallback(() => {
+        if (!isFetching && !isReachEnd) {
+            callbackProp();
+            onFetching(true);
+        }
+        if (isReachEnd)
+            onFetching(false);
+    });
+    const fetchMore = (callbackProp && !disabled ? onFetchMore : undefined);
+    /** check source length and reset states */
+    const prevSourceLength = usePreviousValue(dataSource.length);
+    const currentSourceLength = useMemo(() => dataSource.length, [dataSource.length]);
+    useEffect(() => {
+        if (prevSourceLength !== currentSourceLength) {
+            onFetching(false);
+        }
+    }, [prevSourceLength, currentSourceLength]);
+    return {
+        fetchMore,
+        isFetching,
+        isReachEnd,
+    };
+}
+
+export { useTableFetchMore };

package/Table/useTableLoading.d.ts

@@ -0,0 +1,5 @@
+export declare const SELECTED_ALL_KEY = "MZN-TABLE-ROW-SELECTION-ALL";
+export interface UseTableLoading {
+    loading?: boolean;
+}
+export declare function useTableLoading(props: UseTableLoading): readonly [boolean, (l: boolean) => void];

package/Table/useTableLoading.js

@@ -0,0 +1,19 @@
+import { useControlValueState } from '../Form/useControlValueState.js';
+import { useLastCallback } from '../hooks/useLastCallback.js';
+
+const equalityFn = (a, b) => a === b;
+function useTableLoading(props) {
+    const { loading: loadingProp, } = props;
+    const [loading, setLoading] = useControlValueState({
+        defaultValue: false,
+        equalityFn,
+        value: loadingProp,
+    });
+    const onChange = useLastCallback((isLoading) => {
+        if (!equalityFn(loading, isLoading))
+            setLoading(isLoading);
+    });
+    return [loading, onChange];
+}
+
+export { useTableLoading };

package/Table/useTableScroll.d.ts

@@ -0,0 +1,272 @@
+/// <reference types="react" />
+export default function useTableScroll(): readonly [{
+    ref: import("react").RefObject<HTMLDivElement>;
+    onScroll: () => void;
+}, {
+    ref: import("react").RefObject<HTMLDivElement>;
+    onMouseDown: ({ target, clientY }: any) => void;
+    onMouseUp: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    style: {
+        height: string;
+        ref?: string | import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        key?: string | number | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: boolean | "true" | "false" | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: boolean | "true" | "false" | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: boolean | "true" | "false" | undefined;
+        style?: import("react").CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: boolean | "true" | "false" | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-busy'?: boolean | "true" | "false" | undefined;
+        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: boolean | "true" | "false" | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: boolean | "true" | "false" | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: boolean | "true" | "false" | undefined;
+        'aria-haspopup'?: boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: boolean | "true" | "false" | undefined;
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: boolean | "true" | "false" | undefined;
+        'aria-multiline'?: boolean | "true" | "false" | undefined;
+        'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-readonly'?: boolean | "true" | "false" | undefined;
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: boolean | "true" | "false" | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: boolean | "true" | "false" | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        children?: import("react").ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: ((event: import("react").ClipboardEvent<HTMLDivElement>) => void) | undefined;
+        onCopyCapture?: ((event: import("react").ClipboardEvent<HTMLDivElement>) => void) | undefined;
+        onCut?: ((event: import("react").ClipboardEvent<HTMLDivElement>) => void) | undefined;
+        onCutCapture?: ((event: import("react").ClipboardEvent<HTMLDivElement>) => void) | undefined;
+        onPaste?: ((event: import("react").ClipboardEvent<HTMLDivElement>) => void) | undefined;
+        onPasteCapture?: ((event: import("react").ClipboardEvent<HTMLDivElement>) => void) | undefined;
+        onCompositionEnd?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
+        onCompositionEndCapture?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
+        onCompositionStart?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
+        onCompositionStartCapture?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
+        onCompositionUpdate?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
+        onCompositionUpdateCapture?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
+        onFocus?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
+        onFocusCapture?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
+        onBlur?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
+        onBlurCapture?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
+        onChange?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onChangeCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onBeforeInput?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onBeforeInputCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onInput?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onInputCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onReset?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onResetCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onSubmit?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onSubmitCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onInvalid?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onInvalidCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
+        onLoad?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onLoadCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onError?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onErrorCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onKeyDown?: ((event: import("react").KeyboardEvent<HTMLDivElement>) => void) | undefined;
+        onKeyDownCapture?: ((event: import("react").KeyboardEvent<HTMLDivElement>) => void) | undefined;
+        onKeyPress?: ((event: import("react").KeyboardEvent<HTMLDivElement>) => void) | undefined;
+        onKeyPressCapture?: ((event: import("react").KeyboardEvent<HTMLDivElement>) => void) | undefined;
+        onKeyUp?: ((event: import("react").KeyboardEvent<HTMLDivElement>) => void) | undefined;
+        onKeyUpCapture?: ((event: import("react").KeyboardEvent<HTMLDivElement>) => void) | undefined;
+        onAbort?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onAbortCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onCanPlay?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onCanPlayCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onCanPlayThrough?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onCanPlayThroughCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onDurationChange?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onDurationChangeCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onEmptied?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onEmptiedCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onEncrypted?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onEncryptedCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onEnded?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onEndedCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onLoadedData?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onLoadedDataCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onLoadedMetadata?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onLoadedMetadataCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onLoadStart?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onLoadStartCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onPause?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onPauseCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onPlay?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onPlayCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onPlaying?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onPlayingCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onProgress?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onProgressCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onRateChange?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onRateChangeCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onSeeked?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onSeekedCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onSeeking?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onSeekingCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onStalled?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onStalledCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onSuspend?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onSuspendCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onTimeUpdate?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onTimeUpdateCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onVolumeChange?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onVolumeChangeCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onWaiting?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onWaitingCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onAuxClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onAuxClickCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onClickCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onContextMenu?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onContextMenuCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onDoubleClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onDoubleClickCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onDrag?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragEnd?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragEndCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragEnter?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragEnterCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragExit?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragExitCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragLeave?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragLeaveCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragOver?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragOverCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragStart?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDragStartCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDrop?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onDropCapture?: ((event: import("react").DragEvent<HTMLDivElement>) => void) | undefined;
+        onMouseDown?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseDownCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseEnter?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseLeave?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseMove?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseMoveCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseOut?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseOutCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseOver?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseOverCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseUp?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseUpCapture?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onSelect?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onSelectCapture?: ((event: import("react").SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+        onTouchCancel?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onTouchCancelCapture?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onTouchEnd?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onTouchMove?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onTouchMoveCapture?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onTouchStart?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onTouchStartCapture?: ((event: import("react").TouchEvent<HTMLDivElement>) => void) | undefined;
+        onPointerDown?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerDownCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerMove?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerMoveCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerUp?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerUpCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerCancel?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerCancelCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerEnter?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerEnterCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerLeave?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerLeaveCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerOver?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerOverCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerOut?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onPointerOutCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onGotPointerCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onGotPointerCaptureCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onLostPointerCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onLostPointerCaptureCapture?: ((event: import("react").PointerEvent<HTMLDivElement>) => void) | undefined;
+        onScroll?: ((event: import("react").UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+        onScrollCapture?: ((event: import("react").UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+        onWheel?: ((event: import("react").WheelEvent<HTMLDivElement>) => void) | undefined;
+        onWheelCapture?: ((event: import("react").WheelEvent<HTMLDivElement>) => void) | undefined;
+        onAnimationStart?: ((event: import("react").AnimationEvent<HTMLDivElement>) => void) | undefined;
+        onAnimationStartCapture?: ((event: import("react").AnimationEvent<HTMLDivElement>) => void) | undefined;
+        onAnimationEnd?: ((event: import("react").AnimationEvent<HTMLDivElement>) => void) | undefined;
+        onAnimationEndCapture?: ((event: import("react").AnimationEvent<HTMLDivElement>) => void) | undefined;
+        onAnimationIteration?: ((event: import("react").AnimationEvent<HTMLDivElement>) => void) | undefined;
+        onAnimationIterationCapture?: ((event: import("react").AnimationEvent<HTMLDivElement>) => void) | undefined;
+        onTransitionEnd?: ((event: import("react").TransitionEvent<HTMLDivElement>) => void) | undefined;
+        onTransitionEndCapture?: ((event: import("react").TransitionEvent<HTMLDivElement>) => void) | undefined;
+    };
+}];

package/Table/useTableScroll.js

@@ -0,0 +1,170 @@
+import { useRef, useContext, useState, useCallback, useMemo, useEffect } from 'react';
+import { TableContext, TableDataContext } from './TableContext.js';
+import { usePreviousValue } from '../hooks/usePreviousValue.js';
+
+const defaultScrollBarStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: 10,
+    height: 0,
+    borderRadius: 10,
+    outline: 'none',
+    opacity: '0',
+    transition: '0.1s opacity ease-in',
+    backgroundColor: 'transparent',
+};
+const SCROLL_BAR_MIN_START_AT = 4; // px
+const SCROLL_BAR_MAX_END_SPACING = 16; // px
+const FETCH_MORE_TRIGGER_AT_BOTTOM = 46; // px
+const SCROLL_BAR_DISPLAY_TIMES = 1000; // ms
+function useTableScroll() {
+    const bodyRef = useRef(null);
+    const scrollBarRef = useRef(null);
+    const scrollBarDisplayTimer = useRef();
+    const { fetchMore, loading, scrollBarSize = 4, } = useContext(TableContext) || {};
+    const { dataSource = [], } = useContext(TableDataContext) || {};
+    const [scrollBarHeight, setScrollBarHeight] = useState(0);
+    const [pointerOffset, setPointerOffset] = useState(0);
+    /** set scroll bar callback */
+    const onSetScrollBarHeight = useCallback(() => {
+        if (!bodyRef.current)
+            return;
+        const { scrollHeight, clientHeight: tableHeight, } = bodyRef.current;
+        const nextHeight = Math.max((tableHeight - SCROLL_BAR_MAX_END_SPACING) * (tableHeight / scrollHeight), tableHeight / 10);
+        setScrollBarHeight(nextHeight);
+    }, []);
+    /** display/hide scroll bar */
+    const onHideScrollBar = useCallback(() => {
+        if (!scrollBarRef.current)
+            return;
+        scrollBarRef.current.style.opacity = '0';
+        scrollBarRef.current.style.pointerEvents = 'none';
+    }, []);
+    const onDisplayScrollBar = useCallback(() => {
+        if (!scrollBarRef.current || !bodyRef.current)
+            return;
+        if (scrollBarDisplayTimer.current) {
+            window.clearTimeout(scrollBarDisplayTimer.current);
+        }
+        scrollBarRef.current.style.opacity = '1';
+        scrollBarRef.current.style.pointerEvents = 'auto';
+        scrollBarDisplayTimer.current = window.setTimeout(() => onHideScrollBar(), SCROLL_BAR_DISPLAY_TIMES);
+    }, []);
+    /** reset scroll bar height when sources changed */
+    const prevSourceLength = usePreviousValue(dataSource.length);
+    const currentSourceLength = useMemo(() => dataSource.length, [dataSource.length]);
+    useEffect(() => {
+        // first initial render
+        onSetScrollBarHeight();
+    }, []);
+    useEffect(() => {
+        if (prevSourceLength !== currentSourceLength) {
+            onSetScrollBarHeight();
+        }
+    }, [prevSourceLength, currentSourceLength]);
+    /** set the scroll bar default position */
+    useEffect(() => {
+        if (!scrollBarRef.current || !bodyRef.current)
+            return;
+        scrollBarRef.current.style.top = `${SCROLL_BAR_MIN_START_AT}px`;
+    }, []);
+    useEffect(() => {
+        const { current: body } = bodyRef;
+        const { current: scrollBar } = scrollBarRef;
+        if (!body || !scrollBar)
+            return;
+        function onMouseMove({ clientY }) {
+            const { scrollTop, scrollHeight, clientHeight: tableHeight, } = body;
+            if (!pointerOffset)
+                return;
+            // keep scroll bar display when moving
+            window.requestAnimationFrame(onDisplayScrollBar);
+            const { top: tableTop, } = body.getBoundingClientRect();
+            const nextScrollBarTop = (clientY - tableTop - pointerOffset) + scrollTop;
+            const maxScrollBarTop = scrollHeight - scrollBarHeight - SCROLL_BAR_MAX_END_SPACING;
+            const clampScrollBarTop = Math.min(Math.max(nextScrollBarTop, SCROLL_BAR_MIN_START_AT), // min boundary
+            maxScrollBarTop);
+            scrollBar.style.setProperty('top', `${clampScrollBarTop}px`);
+            body.scrollTop = (((scrollHeight - tableHeight) * (clampScrollBarTop)) /
+                (scrollHeight - scrollBarHeight));
+        }
+        scrollBar.addEventListener('mousemove', onMouseMove, false);
+        return () => {
+            scrollBar.removeEventListener('mousemove', onMouseMove, false);
+        };
+    }, [scrollBarHeight, pointerOffset, onDisplayScrollBar]);
+    const resetPointerOffset = useCallback(() => setPointerOffset(0), []);
+    /** scroll bar fatter when mouse enter */
+    const onScrollBarEnter = useCallback(() => {
+        if (scrollBarRef.current) {
+            scrollBarRef.current.childNodes[0].style.width = `${scrollBarSize + 6}px`;
+        }
+    }, []);
+    /** scroll bar style reset when mouse leave */
+    const onScrollBarLeave = useCallback(() => {
+        if (scrollBarRef.current) {
+            scrollBarRef.current.childNodes[0].style.width = `${scrollBarSize}px`;
+        }
+        resetPointerOffset();
+    }, []);
+    /** when use mouse to drag scroll bar, get cursor position */
+    const onScrollBarMouseDown = useCallback(({ target, clientY }) => {
+        if (!target)
+            return;
+        const { top: initScrollBarTop } = target.getBoundingClientRect();
+        setPointerOffset(clientY - initScrollBarTop);
+    }, []);
+    const onScrollBarMouseUp = useCallback(() => resetPointerOffset(), []);
+    /** scroll table directly */
+    const setScrollBarTop = useCallback(() => {
+        if (bodyRef.current) {
+            const { clientHeight: tableHeight, scrollTop, scrollHeight, } = bodyRef.current;
+            /** @NOTE don't apply scroll change when use pointer dragging */
+            if (scrollBarRef.current && !pointerOffset) {
+                scrollBarRef.current.style.top = `${(scrollTop * (tableHeight - scrollBarHeight - SCROLL_BAR_MAX_END_SPACING)) /
+                    (scrollHeight - tableHeight) + scrollTop + SCROLL_BAR_MIN_START_AT}px`;
+            }
+        }
+    }, [scrollBarHeight, pointerOffset]);
+    const onScroll = useCallback(() => {
+        window.requestAnimationFrame(onDisplayScrollBar);
+        if (loading)
+            return;
+        if (bodyRef.current) {
+            const { clientHeight, scrollTop, scrollHeight, } = bodyRef.current;
+            /** @Note safari specific bug fix for scroll bouncing */
+            const belowBottom = scrollTop > (scrollHeight - clientHeight);
+            if (belowBottom)
+                return;
+            window.requestAnimationFrame(setScrollBarTop);
+            /** trigger fetchMore when scrolling */
+            if ((scrollHeight - (scrollTop + clientHeight)) < FETCH_MORE_TRIGGER_AT_BOTTOM) {
+                fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.onFetchMore();
+            }
+        }
+    }, [loading, setScrollBarTop, onDisplayScrollBar, fetchMore]);
+    const scrollBarStyle = useMemo(() => ({
+        ...defaultScrollBarStyle,
+        height: `${scrollBarHeight}px`,
+    }), [scrollBarHeight]);
+    /** composing result */
+    const tableBody = {
+        ref: bodyRef,
+        onScroll,
+    };
+    const scrollElement = {
+        ref: scrollBarRef,
+        onMouseDown: onScrollBarMouseDown,
+        onMouseUp: onScrollBarMouseUp,
+        onMouseEnter: onScrollBarEnter,
+        onMouseLeave: onScrollBarLeave,
+        style: scrollBarStyle,
+    };
+    return [tableBody, scrollElement];
+}
+
+export default useTableScroll;

package/Tabs/Tab.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TabProps extends NativeElementPropsWithoutKeyAndRef<'button'> {
+    /**
+     * Whether the tab is active.
+     * Controlled by tabs.
+     */
+    active?: boolean;
+    /**
+     * Whether the tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * The react component for `mezzanine` tab.
+ */
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Tab;