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

package/core/VirtualTable/OldVirtualTable/type.d.ts

@@ -0,0 +1,45 @@
+type ColumnIndex = number;
+export type ColumnFixedPosition = "left" | "right";
+export interface StickyPosition {
+    value: number;
+    isLast: boolean;
+}
+export type ColumnsStickyPosition = Record<ColumnIndex, StickyPosition>;
+/**
+ * Similar usage of Antd Table but only support partial features: fixed columns, row selection, on row click
+ */
+export type VirtualTableRowSelection<RowType extends object> = {
+    width: number;
+    selectedRowKeys: React.Key[];
+    onChange: (selectedRowKeys: React.Key[], selectedRows: RowType[]) => void;
+    /**
+     * Can only sticky in left
+     */
+    fixed?: boolean;
+    isDisabled?: (data: RowType, rowIndex: number) => boolean;
+    isSelectAllDisabled?: boolean;
+    /**
+     * Attention:
+     * If title is provided, the select all checkbox wil be overridden
+     */
+    title?: React.ReactElement | string | number | null;
+};
+export type VirtualTableColumn<RowType extends object> = {
+    title: React.ReactElement | string | number;
+    width: number;
+    /**
+     * Attention:
+     * If renderData return null, the corresponding table cell will not render
+     */
+    renderData: (record: RowType, rowIndex: number) => React.ReactNode | undefined;
+    align?: "left" | "right" | "center";
+    display?: "default" | "hidden";
+    fixed?: "left" | "right";
+    /**
+     * Attention:
+     * The overridden cell should return null in renderData props:
+     * e.g. [{colSpan: 3, renderData: () => <div />}, {renderData: () => null}], {renderData: () => null}
+     */
+    colSpan?: (record: RowType, rowIndex: number, colIndex: number) => number;
+};
+export {};

package/core/VirtualTable/OldVirtualTable/type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=type.js.map

package/core/VirtualTable/OldVirtualTable/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/OldVirtualTable/type.ts"],"names":[],"mappings":""}

package/core/VirtualTable/index.d.ts

@@ -1,28 +1,21 @@
 import React from "react";
-import type { StringKey } from "../../internal/type";
-import type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
 import "./index.less";
-export type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
-export interface VirtualTableProps<RowType extends object> {
-    dataSource: RowType[];
-    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
-     */
-    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;
+import type { VirtualTableProps } from "./type";
+export type { TableRowSelection as VirtualTableRowSelection, TableHandler as VirtualTableHandler } from "../Table";
+export type { VirtualTableProps, VirtualTableColumns } from "./type";
+/**
+ * Antd Table's scrollX behaviour is different from scrollY
+ *
+ * scrollY:
+ * the height of the scrollable (visible/rendered) container
+ * If scrollY > container height, it will overflow the container
+ * We cannot use overflow: hidden on container since it will cause the last few rows to be hidden
+ *
+ * scrollX:
+ * It is the total of column width of all columns that are not hidden
+ * 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
+ *
+ * If scrollX is not provided, all column must provide width, ref: ./type.ts
+ */
+export declare const VirtualTable: <RowType extends object>(props: VirtualTableProps<RowType>) => React.JSX.Element;

package/core/VirtualTable/index.js

@@ -1,58 +1,76 @@
 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,
-    });
-    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]);
+import { useResizeObserver } from "../../hooks/useResizeObserver";
+import { useDebounce } from "../../hooks/useDebounce";
+/**
+ * Antd Table's scrollX behaviour is different from scrollY
+ *
+ * scrollY:
+ * the height of the scrollable (visible/rendered) container
+ * If scrollY > container height, it will overflow the container
+ * We cannot use overflow: hidden on container since it will cause the last few rows to be hidden
+ *
+ * scrollX:
+ * It is the total of column width of all columns that are not hidden
+ * 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
+ *
+ * If scrollX is not provided, all column must provide width, ref: ./type.ts
+ */
+export const VirtualTable = ReactUtil.memo("VirtualTable", function (props) {
+    const { dataSource, className, width = "100%", scrollY: propScrollY, emptyPlaceholder, debounceDelay = 0, ...restProps } = props;
+    const [scrollY, setScrollY] = React.useState(propScrollY ?? 300);
+    const [headerHeight, setHeaderHeight] = React.useState(0);
+    const containerRef = React.useRef(null);
+    const updateScrollY = useDebounce((entries) => {
+        const parentHeight = entries[0].contentRect.height;
+        let newScrollY = Math.max(0, parentHeight - headerHeight);
+        if (propScrollY)
+            newScrollY = Math.min(newScrollY, propScrollY);
+        setScrollY(newScrollY);
+    }, debounceDelay);
     React.useEffect(() => {
-        checkScrollable();
-    }, [totalSize, columnWidths, checkScrollable]);
+        const parent = containerRef.current?.parentElement;
+        if (!parent)
+            return;
+        const observer = new ResizeObserver(updateScrollY);
+        observer.observe(parent);
+        return () => {
+            observer.unobserve(parent);
+            observer.disconnect();
+        };
+    }, [headerHeight, updateScrollY]);
+    // Need to listen to header change onMount so we can calculate the scrollY correctly
+    const headerRef = useResizeObserver(({ height }) => {
+        setHeaderHeight(height);
+    });
     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(() => {
+        if ("scrollX" in restProps)
+            return restProps.scrollX;
+        return restProps.columns.reduce((acc, column) => acc + (column.hidden ? 0 : column.width), 0);
+    }, [restProps]);
+    const emptyElement = React.createElement("div", { style: { height: scrollY } }, emptyPlaceholder || "暂无数据");
+    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, 
+            /**
+             * Antd <Table virtual /> must use number scrollX or number scrollY to work
+             */
+            scrollY: scrollY, scrollX: scrollX, emptyPlaceholder: emptyElement, ...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":"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"}

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/VirtualTable/type.d.ts

@@ -1,45 +1,19 @@
-type ColumnIndex = number;
-export type ColumnFixedPosition = "left" | "right";
-export interface StickyPosition {
-    value: number;
-    isLast: boolean;
-}
-export type ColumnsStickyPosition = Record<ColumnIndex, StickyPosition>;
-/**
- * Similar usage of Antd Table but only support partial features: fixed columns, row selection, on row click
- */
-export type VirtualTableRowSelection<RowType extends object> = {
-    width: number;
-    selectedRowKeys: React.Key[];
-    onChange: (selectedRowKeys: React.Key[], selectedRows: RowType[]) => void;
-    /**
-     * Can only sticky in left
-     */
-    fixed?: boolean;
-    isDisabled?: (data: RowType, rowIndex: number) => boolean;
-    isSelectAllDisabled?: boolean;
-    /**
-     * Attention:
-     * If title is provided, the select all checkbox wil be overridden
-     */
-    title?: React.ReactElement | string | number | null;
-};
-export type VirtualTableColumn<RowType extends object> = {
-    title: React.ReactElement | string | number;
+import type { TableColumn, TableProps } from "../Table";
+interface TableColumnWithWidth<RowType extends object> extends Omit<TableColumn<RowType>, "width"> {
     width: number;
-    /**
-     * Attention:
-     * If renderData return null, the corresponding table cell will not render
-     */
-    renderData: (record: RowType, rowIndex: number) => React.ReactNode | undefined;
-    align?: "left" | "right" | "center";
-    display?: "default" | "hidden";
-    fixed?: "left" | "right";
-    /**
-     * Attention:
-     * The overridden cell should return null in renderData props:
-     * e.g. [{colSpan: 3, renderData: () => <div />}, {renderData: () => null}], {renderData: () => null}
-     */
-    colSpan?: (record: RowType, rowIndex: number, colIndex: number) => number;
-};
+}
+export type VirtualTableColumns<RowType extends object, UseScrollX = false> = UseScrollX extends true ? TableColumn<RowType>[] : TableColumnWithWidth<RowType>[];
+interface VirtualTableBaseProps<RowType extends object> extends Omit<TableProps<RowType, undefined>, "columns" | "scrollX" | "scrollY"> {
+    width?: number | string;
+    scrollY?: number;
+    debounceDelay?: number;
+}
+interface VirtualTablePropsWithScrollX<RowType extends object> extends VirtualTableBaseProps<RowType> {
+    columns: VirtualTableColumns<RowType, true>;
+    scrollX: number;
+}
+interface VirtualTablePropsWithColumnWidth<RowType extends object> extends VirtualTableBaseProps<RowType> {
+    columns: VirtualTableColumns<RowType, false>;
+}
+export type VirtualTableProps<RowType extends object> = VirtualTablePropsWithScrollX<RowType> | VirtualTablePropsWithColumnWidth<RowType>;
 export {};

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;