@pinnacle0/web-ui 0.6.46 → 0.7.0-beta.2

package/core/VirtualTable/index.d.ts

@@ -1,28 +1,29 @@
 import React from "react";
-import type { StringKey } from "../../internal/type";
-import type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
+import type { TableColumn, TableProps } from "../Table";
 import "./index.less";
-export type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
-export interface VirtualTableProps<RowType extends object> {
-    dataSource: RowType[];
+export type { TableRowSelection as VirtualTableRowSelection } from "../Table";
+/**
+ * Antd Table's scrollX behaviour is different from scrollY
+ *
+ * scrollY:
+ * the height of the scrollable container (ignoring the container height) which will cause overflow
+ * We cannot use overflow: hidden since it will cause the last few rows to be hidden
+ *
+ * scrollX:
+ * It is the total scroll width of the table
+ * If scrollX > all columns width, all columns will be expanded and lose the width property
+ * In order to calculate the scrollX, we need to sum up the width of all columns
+ *
+ * For future refactor:
+ * If want to use column without width, must refactor to either pass column width or pass scrollX props
+ */
+export interface VirtualTableColumn<RowType extends object> extends Omit<TableColumn<RowType>, "width"> {
+    width: number;
+}
+export type VirtualTableColumns<RowType extends object> = VirtualTableColumn<RowType>[];
+export interface VirtualTableProps<RowType extends object> extends Omit<TableProps<RowType, undefined>, "columns" | "scrollX" | "scrollY"> {
     columns: VirtualTableColumn<RowType>[];
-    rowHeight: number;
-    className?: string;
-    rowClassName?: string;
-    /**
-     * if scrollX and scrollY is not provided, height: 100% and width: 100% will be used and please wrap the table with a container
-     */
+    width?: number | string;
     scrollY?: number;
-    scrollX?: number;
-    overscan?: number;
-    loading?: boolean;
-    emptyPlaceholder?: React.ReactElement | string | number;
-    onRowClick?: (record: RowType, rowIndex: number) => void;
-    /**
-     * Default: index
-     */
-    rowKey?: StringKey<RowType> | "index";
-    headerHeight?: number;
-    rowSelection?: VirtualTableRowSelection<RowType>;
 }
-export declare const VirtualTable: <RowType extends object>({ columns, rowHeight, dataSource, className, rowClassName, loading, emptyPlaceholder, onRowClick, scrollY, scrollX, overscan, rowSelection, headerHeight, rowKey }: VirtualTableProps<RowType>) => React.JSX.Element;
+export declare const VirtualTable: <RowType extends object>(props: VirtualTableProps<RowType>) => React.JSX.Element;

package/core/VirtualTable/index.js

@@ -1,58 +1,44 @@
 import React from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import { classNames } from "../../util/ClassNames";
-import { Spin } from "../Spin";
-import { TableRow } from "./TableRow";
-import { TableHeader } from "./TableHeader";
-import { useRowSelection } from "./hooks/useRowSelection";
-import { useColumnWidths } from "./hooks/useColumnWidths";
-import { useScrollBarSize } from "./hooks/useScrollBarSize";
-import { useScrollToEdge, useSyncScroll, useScrollable } from "./hooks/useScroll";
-import { useColumnsStickyPosition } from "./hooks/useColumnsStickyPosition";
 import { ReactUtil } from "../../util/ReactUtil";
+import { Table } from "../Table";
 import "./index.less";
-export const VirtualTable = ReactUtil.memo("VirtualTable", function ({ columns, rowHeight, dataSource, className, rowClassName, loading, emptyPlaceholder, onRowClick, scrollY, scrollX, overscan, rowSelection, headerHeight = 50, rowKey = "index" }) {
-    const count = dataSource.length;
-    const scrollContentRef = React.useRef(null);
-    const totalSize = count * rowHeight;
-    const emptyElement = emptyPlaceholder || "暂无数据";
-    const transformedColumns = useRowSelection({ columns, dataSource, rowKey, rowSelection });
-    const rowVirtualizer = useVirtualizer({
-        count,
-        getScrollElement: () => scrollContentRef.current,
-        estimateSize: () => rowHeight,
-        overscan,
+import { useResizeObserver } from "../../hooks/useResizeObserver";
+export const VirtualTable = ReactUtil.memo("VirtualTable", function (props) {
+    const { dataSource, columns, className, width = "100%", scrollY: propScrollY, emptyPlaceholder, ...restProps } = props;
+    const [scrollY, setScrollY] = React.useState(propScrollY ?? 300);
+    const [headerHeight, setHeaderHeight] = React.useState(0);
+    const containerRef = useResizeObserver(({ height }) => {
+        let newScrollY = Math.max(0, height - headerHeight);
+        if (propScrollY)
+            newScrollY = Math.min(newScrollY, propScrollY);
+        setScrollY(newScrollY);
+    });
+    // Need to listen to header change onMount so we can calculate the scrollY correctly
+    const headerRef = useResizeObserver(({ height }) => {
+        setHeaderHeight(height);
     });
-    const { headerRef, getHeaderRef, columnWidths, calcColumnWidths } = useColumnWidths();
-    const scrollBarSize = useScrollBarSize();
-    const syncScroll = useSyncScroll(scrollContentRef, headerRef);
-    const checkIsScrollToEdge = useScrollToEdge(scrollContentRef);
-    const { scrollable, checkScrollable } = useScrollable(scrollContentRef);
-    const columnsStickyPosition = useColumnsStickyPosition(transformedColumns, columnWidths);
-    const onScroll = React.useCallback(() => {
-        syncScroll();
-        checkIsScrollToEdge();
-    }, [syncScroll, checkIsScrollToEdge]);
-    React.useEffect(() => {
-        checkIsScrollToEdge();
-    }, [columnWidths, checkIsScrollToEdge]);
-    React.useEffect(() => {
-        checkScrollable();
-    }, [totalSize, columnWidths, checkScrollable]);
     React.useEffect(() => {
-        calcColumnWidths();
-    }, [calcColumnWidths, transformedColumns]);
-    const containerHeight = scrollY ? scrollY + headerHeight + (scrollable.horizontal ? scrollBarSize : 0) : "100%";
-    return (React.createElement("div", { className: classNames("g-virtual-table", className), style: { width: scrollX || "100%", height: containerHeight } },
-        loading && (React.createElement("div", { className: "mask" },
-            React.createElement(Spin, { spinning: loading }))),
-        React.createElement("div", { className: "scroll-content", ref: scrollContentRef, style: { height: `calc(100% - ${headerHeight}px)`, top: headerHeight }, onScroll: onScroll },
-            React.createElement("div", { className: "table", style: { height: totalSize } },
-                React.createElement(TableHeader, { headerRef: getHeaderRef, headerHeight: headerHeight, columns: transformedColumns, columnsStickyPosition: columnsStickyPosition }),
-                columnWidths.length > 0 && (React.createElement("div", { className: "table-body" }, dataSource.length === 0
-                    ? emptyElement
-                    : rowVirtualizer
-                        .getVirtualItems()
-                        .map(virtualItem => (React.createElement(TableRow, { key: virtualItem.key, rowHeight: rowHeight, onRowClick: onRowClick, virtualItem: virtualItem, data: dataSource[virtualItem.index], columns: transformedColumns, columnWidths: columnWidths, scrollBarSize: scrollable.vertical ? scrollBarSize : 0, columnsStickyPosition: columnsStickyPosition, rowClassName: rowClassName })))))))));
+        headerRef.current = containerRef.current?.querySelector(".ant-table-header") ?? null;
+    }, [containerRef, headerRef]);
+    const containerStyle = React.useMemo(() => {
+        return {
+            width,
+            height: "100%",
+        };
+    }, [width]);
+    const scrollX = React.useMemo(() => {
+        return columns.reduce((acc, column) => acc + (column.hidden ? 0 : column.width), 0);
+    }, [columns]);
+    return (React.createElement("div", { ref: containerRef, className: classNames("g-virtual-table", className), style: containerStyle },
+        React.createElement(Table
+        // @ts-ignore: using our Table component with virtual props from antd
+        , { 
+            // @ts-ignore: using our Table component with virtual props from antd
+            virtual: true, dataSource: dataSource, columns: columns, 
+            /**
+             * Antd <Table virtual /> must use number scrollX or number scrollY to work
+             */
+            scrollY: scrollY, scrollX: scrollX, emptyPlaceholder: emptyPlaceholder || "暂无数据", ...restProps })));
 });
 //# sourceMappingURL=index.js.map

package/core/VirtualTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AA+BhE,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,UAAkC,KAAiC;IAC1H,MAAM,EAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAC,GAAG,KAAK,CAAC;IACrH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,IAAI,GAAG,CAAC,CAAC;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;QAChD,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,CAAC;QACpD,IAAI,WAAW;YAAE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;QAChE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,oFAAoF;IACpF,MAAM,SAAS,GAAG,iBAAiB,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;QAC7C,eAAe,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,SAAS,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC;IACzF,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACH,KAAK;YACL,MAAM,EAAE,MAAM;SACjB,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACH,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,cAAc;QAC9F,oBAAC,KAAK;QACF,qEAAqE;;YAArE,qEAAqE;YACrE,OAAO,QACP,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO;YAChB;;eAEG;YACH,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,KACxC,SAAS,GACf,CACA,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/core/VirtualTable/index.less

@@ -1,157 +1,45 @@
-.fixed-column-shadow(@position) {
-    content: "";
-    position: absolute;
-    width: 30px;
-    height: 100%;
-    pointer-events: none;
-    background-color: transparent;
-    top: 0;
-    bottom: -1px;
-    transition: box-shadow 0.3s;
-
-    & when (@position = "right") {
-        left: 0;
-        transform: translate(-100%);
-        box-shadow: inset -10px 0 8px -8px #00000026;
-    }
-
-    & when (@position = "left") {
-        right: 0;
-        transform: translate(100%);
-        box-shadow: inset 10px 0 8px -8px #00000026;
-    }
-}
-
 .g-virtual-table {
-    position: relative;
-    transform: translateX(0);
-
-    .mask {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: rgb(255 255 255 / 70%);
-        z-index: 15;
-    }
+    max-width: 100%;
+    max-height: 100%;
 
-    .scroll-content {
-        position: relative;
-        overflow: auto;
-        scrollbar-width: thin;
+    .ant-table {
+        .ant-table-tbody {
+            .ant-table-cell {
+                display: flex;
+                align-items: center;
 
-        &.scroll-to-left {
-            .table-header.fixed,
-            .table-cell.fixed {
-                &.last.left::after {
-                    box-shadow: none !important;
+                &.ant-table-selection-column {
+                    justify-content: center;
                 }
-            }
-        }
 
-        &.scroll-to-right {
-            .table-header.fixed,
-            .table-cell.fixed {
-                &.last.right::after {
-                    box-shadow: none !important;
+                &[style*="text-align: right"] {
+                    justify-content: flex-end;
                 }
-            }
-        }
-
-        .table {
-            min-height: 100%;
 
-            .table-headers {
-                display: flex;
-                flex-wrap: nowrap;
-                position: fixed;
-                top: 0;
-                z-index: 10;
-                min-width: 100%;
-                overflow-x: hidden;
-
-                .table-header {
-                    display: flex;
-                    align-items: center;
-                    background-color: #f2f2f2;
-                    height: 100%;
-                    position: relative;
-
-                    &:not(:last-of-type)::before {
-                        background-color: rgb(0 0 0 / 6%);
-                        content: "";
-                        height: 60%;
-                        position: absolute;
-                        right: 0;
-                        top: 50%;
-                        transform: translateY(-50%);
-                        transition: background-color 0.3s;
-                        width: 1px;
-                    }
-
-                    &.fixed {
-                        position: sticky;
-                        z-index: 5;
-
-                        &.last {
-                            &.left {
-                                &::after {
-                                    .fixed-column-shadow("left");
-                                }
-                            }
+                &[style*="text-align: center"] {
+                    justify-content: center;
+                }
 
-                            &.right {
-                                &::after {
-                                    .fixed-column-shadow("right");
-                                }
-                            }
-                        }
-                    }
+                &[style*="text-align: left"] {
+                    justify-content: flex-start;
                 }
             }
+        }
 
-            .table-body {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                position: relative;
-                height: 100%;
-
-                .table-row {
-                    width: max-content;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-
-                    .table-cell {
-                        display: inline-flex;
-                        align-items: center;
-                        background-color: #fff;
-                        overflow-wrap: anywhere;
-                        vertical-align: bottom;
+        &.ant-table-empty .ant-table-container .ant-table-body {
+            overflow: hidden !important;
 
-                        &.fixed {
-                            position: sticky;
-                            z-index: 5;
+            .ant-table-cell {
+                padding: 0;
 
-                            &.last {
-                                &.left {
-                                    &::after {
-                                        .fixed-column-shadow("left");
-                                    }
-                                }
+                .ant-table-expanded-row-fixed {
+                    margin: 0;
+                    padding: 0;
 
-                                &.right {
-                                    &::after {
-                                        .fixed-column-shadow("right");
-                                    }
-                                }
-                            }
-                        }
+                    .empty-text-node {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
                     }
                 }
             }

package/core/WithExplanation/index.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import type { PickOptional } from "../../internal/type";
 import type { TooltipPlacement } from "../Tooltip";
 import "./index.less";
 export interface Props {
@@ -14,8 +13,4 @@ export interface Props {
     placement?: TooltipPlacement;
     iconPosition?: "left" | "right";
 }
-export declare class WithExplanation extends React.PureComponent<Props> {
-    static displayName: string;
-    static defaultProps: PickOptional<Props>;
-    render(): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;
-}
+export declare const WithExplanation: ({ children, explanation, iconPosition }: Props) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;

package/core/WithExplanation/index.js

@@ -1,25 +1,16 @@
 import React from "react";
 import { classNames } from "../../util/ClassNames";
 import { Tooltip } from "../Tooltip";
+import { ReactUtil } from "../../util/ReactUtil";
 import "./index.less";
-export class WithExplanation extends React.PureComponent {
-    static displayName = "WithExplanation";
-    static defaultProps = {
-        iconPosition: "right",
-    };
-    render() {
-        const { children, explanation, iconPosition } = this.props;
-        if (explanation) {
-            return (React.createElement("div", { className: classNames("g-with-explanation", `with-icon-${iconPosition}`) },
-                children,
-                React.createElement(Tooltip, { className: "g-with-explanation-tooltip", title: Array.isArray(explanation) ? explanation.map((_, index) => React.createElement("p", { key: index }, _)) : explanation, childContainerProps: { className: "icon-container" } },
-                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 24" },
-                        React.createElement("circle", { cx: "8", cy: "8", r: "8", style: { strokeMiterlimit: 10 }, transform: "translate(3.5 4)" }),
-                        React.createElement("path", { d: "M2.338 9.9a.972.972 0 0 1-.294-.715.929.929 0 0 1 .294-.714.991.991 0 0 1 .728-.28 1 1 0 0 1 .742.28.929.929 0 0 1 .294.714.994.994 0 0 1-.308.728 1.049 1.049 0 0 1-.728.28 1 1 0 0 1-.728-.293zm-.014-2.466V7.2a2.794 2.794 0 0 1 .28-1.33 6.938 6.938 0 0 1 1.582-1.74l.239-.266a1.638 1.638 0 0 0 .391-1.022 1.593 1.593 0 0 0-.406-1.148 1.624 1.624 0 0 0-1.19-.419 1.549 1.549 0 0 0-1.373.6A2.345 2.345 0 0 0 1.47 3.3H0A3.247 3.247 0 0 1 .882.9 3.245 3.245 0 0 1 3.318 0 3.131 3.131 0 0 1 5.5.742a2.53 2.53 0 0 1 .841 2 2.71 2.71 0 0 1-.531 1.71 14.388 14.388 0 0 1-1.176 1.092 2.319 2.319 0 0 0-.588.728 1.871 1.871 0 0 0-.224.924v.238z", transform: "translate(8.336 6.808)" })))));
-        }
-        else {
-            return children || "";
-        }
-    }
-}
+export const WithExplanation = ReactUtil.memo("WithExplanation", ({ children, explanation, iconPosition = "right" }) => {
+    if (!explanation)
+        return children || "";
+    return (React.createElement("div", { className: classNames("g-with-explanation", `with-icon-${iconPosition}`) },
+        children,
+        React.createElement(Tooltip, { className: "g-with-explanation-tooltip", title: Array.isArray(explanation) ? explanation.map((_, index) => React.createElement("p", { key: index }, _)) : explanation, childContainerProps: { className: "icon-container" } },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 24" },
+                React.createElement("circle", { cx: "8", cy: "8", r: "8", style: { strokeMiterlimit: 10 }, transform: "translate(3.5 4)" }),
+                React.createElement("path", { d: "M2.338 9.9a.972.972 0 0 1-.294-.715.929.929 0 0 1 .294-.714.991.991 0 0 1 .728-.28 1 1 0 0 1 .742.28.929.929 0 0 1 .294.714.994.994 0 0 1-.308.728 1.049 1.049 0 0 1-.728.28 1 1 0 0 1-.728-.293zm-.014-2.466V7.2a2.794 2.794 0 0 1 .28-1.33 6.938 6.938 0 0 1 1.582-1.74l.239-.266a1.638 1.638 0 0 0 .391-1.022 1.593 1.593 0 0 0-.406-1.148 1.624 1.624 0 0 0-1.19-.419 1.549 1.549 0 0 0-1.373.6A2.345 2.345 0 0 0 1.47 3.3H0A3.247 3.247 0 0 1 .882.9 3.245 3.245 0 0 1 3.318 0 3.131 3.131 0 0 1 5.5.742a2.53 2.53 0 0 1 .841 2 2.71 2.71 0 0 1-.531 1.71 14.388 14.388 0 0 1-1.176 1.092 2.319 2.319 0 0 0-.588.728 1.871 1.871 0 0 0-.224.924v.238z", transform: "translate(8.336 6.808)" })))));
+});
 //# sourceMappingURL=index.js.map

package/core/WithExplanation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/WithExplanation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AAGnC,OAAO,cAAc,CAAC;AAetB,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,aAAoB;IAC3D,MAAM,CAAC,WAAW,GAAG,iBAAiB,CAAC;IAEvC,MAAM,CAAC,YAAY,GAAwB;QACvC,YAAY,EAAE,OAAO;KACxB,CAAC;IAEF,MAAM;QACF,MAAM,EAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACzD,IAAI,WAAW,EAAE,CAAC;YACd,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,aAAa,YAAY,EAAE,CAAC;gBACxE,QAAQ;gBACT,oBAAC,OAAO,IACJ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,2BAAG,GAAG,EAAE,KAAK,IAAG,CAAC,CAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EACvG,mBAAmB,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC;oBAElD,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;wBACvD,gCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,EAAE,EAAC,EAAE,SAAS,EAAC,kBAAkB,GAAG;wBAC1F,8BACI,CAAC,EAAC,4nBAA4nB,EAC9nB,SAAS,EAAC,wBAAwB,GACpC,CACA,CACA,CACR,CACT,CAAC;QACN,CAAC;aAAM,CAAC;YACJ,OAAO,QAAQ,IAAI,EAAE,CAAC;QAC1B,CAAC;IACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/WithExplanation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAetB,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,GAAG,OAAO,EAAQ,EAAE,EAAE;IACxH,IAAI,CAAC,WAAW;QAAE,OAAO,QAAQ,IAAI,EAAE,CAAC;IACxC,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,aAAa,YAAY,EAAE,CAAC;QACxE,QAAQ;QACT,oBAAC,OAAO,IACJ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,2BAAG,GAAG,EAAE,KAAK,IAAG,CAAC,CAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EACvG,mBAAmB,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC;YAElD,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;gBACvD,gCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,EAAE,EAAC,EAAE,SAAS,EAAC,kBAAkB,GAAG;gBAC1F,8BACI,CAAC,EAAC,4nBAA4nB,EAC9nB,SAAS,EAAC,wBAAwB,GACpC,CACA,CACA,CACR,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/core/WithTooltipList/index.d.ts

@@ -13,12 +13,4 @@ export interface Props {
     onClick?: () => void;
     onOpenChange?: (open: boolean) => void;
 }
-export declare class WithTooltipList extends React.PureComponent<Props> {
-    static displayName: string;
-    private readonly labelStyle;
-    private readonly wrapperStyle;
-    private readonly childContainerProps;
-    renderTooltip: () => React.JSX.Element;
-    render(): string | React.JSX.Element;
-    private readonly dummyClick;
-}
+export declare const WithTooltipList: ({ list, children, onClick, onOpenChange }: Props) => string | React.JSX.Element;

package/core/WithTooltipList/index.js

@@ -1,34 +1,35 @@
 import React from "react";
 import { Tooltip } from "../Tooltip";
-export class WithTooltipList extends React.PureComponent {
-    static displayName = "WithTooltipList";
-    labelStyle = { display: "inline-block", width: 90 };
-    wrapperStyle = { display: "inline-block" };
-    childContainerProps = { style: this.wrapperStyle };
-    renderTooltip = () => {
-        const { list } = this.props;
-        return (React.createElement("div", null, list.map((item, index) => item === "-" ? (React.createElement("hr", { key: index })) : (React.createElement("p", { key: item.label },
-            React.createElement("span", { style: this.labelStyle }, item.label),
-            React.createElement("em", null, item.content))))));
-    };
-    render() {
-        const { list, children, onClick, onOpenChange } = this.props;
-        if (list.length === 0) {
-            return children || "-";
-        }
-        const label = children ? (children) : list[0] === "-" ? ("-") : typeof list[0].content === "string" || typeof list[0].content === "number" ? (list[0].label + ": " + list[0].content) : (React.createElement(React.Fragment, null,
+import { ReactUtil } from "../../util/ReactUtil";
+const labelStyle = { display: "inline-block", width: 90 };
+const wrapperStyle = { display: "inline-block" };
+export const WithTooltipList = ReactUtil.memo("WithTooltipList", ({ list, children, onClick, onOpenChange }) => {
+    if (list.length === 0)
+        return children || "-";
+    let label;
+    if (children)
+        label = children;
+    else if (list[0] === "-")
+        label = "-";
+    else if (typeof list[0].content === "string" || typeof list[0].content === "number") {
+        label = list[0].label + ": " + list[0].content;
+    }
+    else {
+        label = (React.createElement(React.Fragment, null,
             list[0].label,
             ": ",
             list[0].content));
-        /**
-         * - Must wrap with a <div> since the child node of <Tooltip> must accept certain methods, since <a>'s onClick is used already.
-         * - Wrapper must be inline-block, to make the tooltip arrow centered.
-         *
-         * Ref: https://ant.design/components/tooltip/#Note
-         */
-        return (React.createElement(Tooltip, { placement: "bottom", title: this.renderTooltip(), onOpenChange: onOpenChange, childContainerProps: this.childContainerProps },
-            React.createElement("a", { onClick: onClick || this.dummyClick, style: this.wrapperStyle, className: "g-with-tooltip-list-anchor" }, label)));
     }
-    dummyClick = () => { };
-}
+    const tooltipTitle = (React.createElement("div", null, list.map((item, index) => item === "-" ? (React.createElement("hr", { key: index })) : (React.createElement("p", { key: item.label },
+        React.createElement("span", { style: labelStyle }, item.label),
+        React.createElement("em", null, item.content))))));
+    /**
+     * - Must wrap with a <div> since the child node of <Tooltip> must accept certain methods, since <a>'s onClick is used already.
+     * - Wrapper must be inline-block, to make the tooltip arrow centered.
+     *
+     * Ref: https://ant.design/components/tooltip/#Note
+     */
+    return (React.createElement(Tooltip, { placement: "bottom", title: tooltipTitle, onOpenChange: onOpenChange, childContainerProps: { style: wrapperStyle } },
+        React.createElement("a", { onClick: onClick || (() => { }), style: wrapperStyle, className: "g-with-tooltip-list-anchor" }, label)));
+});
 //# sourceMappingURL=index.js.map

package/core/WithTooltipList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/WithTooltipList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AAkBnC,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,aAAoB;IAC3D,MAAM,CAAC,WAAW,GAAG,iBAAiB,CAAC;IAEtB,UAAU,GAAwB,EAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC;IACvE,YAAY,GAAwB,EAAC,OAAO,EAAE,cAAc,EAAC,CAAC;IAC9D,mBAAmB,GAAyC,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAC,CAAC;IAExG,aAAa,GAAG,GAAG,EAAE;QACjB,MAAM,EAAC,IAAI,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1B,OAAO,CACH,iCACK,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACtB,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CACX,4BAAI,GAAG,EAAE,KAAK,GAAI,CACrB,CAAC,CAAC,CAAC,CACA,2BAAG,GAAG,EAAE,IAAI,CAAC,KAAK;YACd,8BAAM,KAAK,EAAE,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAQ;YACjD,gCAAK,IAAI,CAAC,OAAO,CAAM,CACvB,CACP,CACJ,CACC,CACT,CAAC;IACN,CAAC,CAAC;IAEF,MAAM;QACF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACpB,OAAO,QAAQ,IAAI,GAAG,CAAC;QAC3B,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CACrB,QAAQ,CACX,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAClB,GAAG,CACN,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7E,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CACzC,CAAC,CAAC,CAAC,CACA,oBAAC,KAAK,CAAC,QAAQ;YACV,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK;;YAAI,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CACpB,CACpB,CAAC;QAEF;;;;;WAKG;QACH,OAAO,CACH,oBAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;YAC9H,2BAAG,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAC,4BAA4B,IACnG,KAAK,CACN,CACE,CACb,CAAC;IACN,CAAC;IAEgB,UAAU,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/WithTooltipList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAkB/C,MAAM,UAAU,GAAwB,EAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC;AAC7E,MAAM,YAAY,GAAwB,EAAC,OAAO,EAAE,cAAc,EAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAQ,EAAE,EAAE;IAChH,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,QAAQ,IAAI,GAAG,CAAC;IAE9C,IAAI,KAAsB,CAAC;IAC3B,IAAI,QAAQ;QAAE,KAAK,GAAG,QAAQ,CAAC;SAC1B,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG;QAAE,KAAK,GAAG,GAAG,CAAC;SACjC,IAAI,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;QAClF,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,CAAC;SAAM,CAAC;QACJ,KAAK,GAAG,CACJ,oBAAC,KAAK,CAAC,QAAQ;YACV,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK;;YAAI,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CACpB,CACpB,CAAC;IACN,CAAC;IAED,MAAM,YAAY,GAAG,CACjB,iCACK,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACtB,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CACX,4BAAI,GAAG,EAAE,KAAK,GAAI,CACrB,CAAC,CAAC,CAAC,CACA,2BAAG,GAAG,EAAE,IAAI,CAAC,KAAK;QACd,8BAAM,KAAK,EAAE,UAAU,IAAG,IAAI,CAAC,KAAK,CAAQ;QAC5C,gCAAK,IAAI,CAAC,OAAO,CAAM,CACvB,CACP,CACJ,CACC,CACT,CAAC;IAEF;;;;;OAKG;IACH,OAAO,CACH,oBAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,EAAC,KAAK,EAAE,YAAY,EAAC;QACnH,2BAAG,OAAO,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAC,4BAA4B,IACzF,KAAK,CACN,CACE,CACb,CAAC;AACN,CAAC,CAAC,CAAC"}

package/core/YearMonthSelector/index.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import type { Dayjs } from "dayjs";
 import type { ControlledFormValue } from "../../internal/type";
 export interface Props<T extends boolean> extends ControlledFormValue<T extends false ? [number, number] : [number, number] | null> {
     allowNull: T;
@@ -7,9 +6,4 @@ export interface Props<T extends boolean> extends ControlledFormValue<T extends
     disabled?: boolean;
     className?: string;
 }
-export declare class YearMonthSelector<T extends boolean> extends React.PureComponent<Props<T>> {
-    static displayName: string;
-    isDateDisabled: (current: Dayjs) => boolean;
-    onChange: (date: Dayjs | null, dateString: string | string[]) => void;
-    render(): React.JSX.Element;
-}
+export declare const YearMonthSelector: <T extends boolean>({ value, allowNull, disabled, className, disabledRange, onChange }: Props<T>) => React.JSX.Element;

package/core/YearMonthSelector/index.js

@@ -2,35 +2,29 @@ import React from "react";
 import dayjs from "dayjs";
 import DatePicker from "antd/es/date-picker";
 import arraySupport from "dayjs/plugin/arraySupport";
+import { ReactUtil } from "../../util/ReactUtil";
 // load plugin when component is imported
 dayjs.extend(arraySupport);
-export class YearMonthSelector extends React.PureComponent {
-    static displayName = "DatePicker";
-    isDateDisabled = (current) => {
-        if (!current) {
+export const YearMonthSelector = ReactUtil.memo("YearMonthSelector", ({ value, allowNull, disabled, className, disabledRange, onChange }) => {
+    const isDateDisabled = (current) => {
+        if (!current)
             return false;
-        }
         /**
          * This is for compatibility of MySQL.
          * MySQL TIMESTAMP data type is used for values that contain both date and time parts.
          * TIMESTAMP has a range of '1970-01-01 00:00:01' UTC to '2038-01-19 03:14:07' UTC.
          */
-        if (current.valueOf() >= new Date(2038, 0).valueOf()) {
+        if (current.valueOf() >= new Date(2038, 0).valueOf())
             return true;
-        }
         const diffMonthToThisMonth = Math.floor(current.diff(dayjs().startOf("month"), "month", true));
-        return this.props.disabledRange?.(diffMonthToThisMonth, current.toDate()) || false;
+        return disabledRange?.(diffMonthToThisMonth, current.toDate()) || false;
     };
-    onChange = (date, dateString) => {
-        const { onChange, allowNull } = this.props;
+    const onAntChange = (date, dateString) => {
         if (dateString || allowNull) {
             const typedOnChange = onChange;
             typedOnChange(date && [date.year(), date.month() + 1]);
         }
     };
-    render() {
-        const { value, allowNull, disabled, className } = this.props;
-        return (React.createElement(DatePicker, { picker: "month", className: className, disabledDate: this.isDateDisabled, value: value ? dayjs([value[0], value[1] - 1]) : null, onChange: this.onChange, allowClear: allowNull, disabled: disabled }));
-    }
-}
+    return (React.createElement(DatePicker, { picker: "month", className: className, disabledDate: isDateDisabled, value: value ? dayjs([value[0], value[1] - 1]) : null, onChange: onAntChange, allowClear: allowNull, disabled: disabled }));
+});
 //# sourceMappingURL=index.js.map

package/core/YearMonthSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/YearMonthSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAG7C,OAAO,YAAY,MAAM,2BAA2B,CAAC;AAErD,yCAAyC;AACzC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AAS3B,MAAM,OAAO,iBAAqC,SAAQ,KAAK,CAAC,aAAuB;IACnF,MAAM,CAAC,WAAW,GAAG,YAAY,CAAC;IAElC,cAAc,GAAG,CAAC,OAAc,EAAW,EAAE;QACzC,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,OAAO,KAAK,CAAC;QACjB,CAAC;QAED;;;;WAIG;QACH,IAAI,OAAO,CAAC,OAAO,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YACnD,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;QAC/F,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,oBAAoB,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC;IACvF,CAAC,CAAC;IAEF,QAAQ,GAAG,CAAC,IAAkB,EAAE,UAA6B,EAAE,EAAE;QAC7D,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACzC,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;YAC1B,MAAM,aAAa,GAAG,QAAoD,CAAC;YAC3E,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;IACL,CAAC,CAAC;IAEF,MAAM;QACF,MAAM,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3D,OAAO,CACH,oBAAC,UAAU,IACP,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,CAAC,cAAc,EACjC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;IACN,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/YearMonthSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAG7C,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAE/C,yCAAyC;AACzC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AAS3B,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAoB,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAW,EAAE,EAAE;IACnK,MAAM,cAAc,GAAG,CAAC,OAAc,EAAW,EAAE;QAC/C,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAC3B;;;;WAIG;QACH,IAAI,OAAO,CAAC,OAAO,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE;YAAE,OAAO,IAAI,CAAC;QAElE,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;QAC/F,OAAO,aAAa,EAAE,CAAC,oBAAoB,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,IAAkB,EAAE,UAAyB,EAAE,EAAE;QAClE,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;YAC1B,MAAM,aAAa,GAAG,QAAoD,CAAC;YAC3E,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,UAAU,IACP,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,cAAc,EAC5B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrD,QAAQ,EAAE,WAAW,EACrB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;AACN,CAAC,CAAC,CAAC"}

package/css/global.less

@@ -5,15 +5,6 @@
 }
 
 a {
-    // Remove antd pre-set color & animation
-    transition: none;
-    color: inherit;
-    text-decoration: none;
-
-    &:hover {
-        color: inherit;
-    }
-
     &:active,
     &:link,
     &:visited {

package/hooks/useParentResizeObserver/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function useParentResizeObserver<T extends HTMLElement = HTMLDivElement>(ref: React.RefObject<T | null>, onResize: (parentRect: DOMRect, parentRef: HTMLElement) => void): void;