lynote-ui 0.0.9 → 0.0.10

package/dist/style.css

@@ -5,6 +5,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
@@ -569,6 +574,10 @@
     left: 50%;
   }
 
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
+
   .isolate {
     isolation: isolate;
   }
@@ -743,10 +752,22 @@
     margin-top: auto;
   }
 
+  .mr-5 {
+    margin-right: calc(var(--spacing) * 5);
+  }
+
+  .-mb-1 {
+    margin-bottom: calc(var(--spacing) * -1);
+  }
+
   .-mb-4 {
     margin-bottom: calc(var(--spacing) * -4);
   }
 
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
   .mb-1\.5 {
     margin-bottom: calc(var(--spacing) * 1.5);
   }
@@ -937,6 +958,11 @@
     height: calc(var(--spacing) * 16);
   }
 
+  .size-\[1em\] {
+    width: 1em;
+    height: 1em;
+  }
+
   .size-auto {
     width: auto;
     height: auto;
@@ -1063,6 +1089,12 @@
     height: calc(100% - 1px);
   }
 
+  .h-\[stretch\] {
+    height: -webkit-fill-available;
+    height: -moz-available;
+    height: stretch;
+  }
+
   .h-auto {
     height: auto;
   }
@@ -1191,10 +1223,6 @@
     width: calc(var(--spacing) * 5);
   }
 
-  .w-8 {
-    width: calc(var(--spacing) * 8);
-  }
-
   .w-9 {
     width: calc(var(--spacing) * 9);
   }
@@ -1419,6 +1447,10 @@
     min-width: calc(var(--spacing) * 16);
   }
 
+  .min-w-20 {
+    min-width: calc(var(--spacing) * 20);
+  }
+
   .min-w-32 {
     min-width: calc(var(--spacing) * 32);
   }
@@ -1427,6 +1459,10 @@
     min-width: calc(var(--spacing) * 36);
   }
 
+  .min-w-56 {
+    min-width: calc(var(--spacing) * 56);
+  }
+
   .min-w-60 {
     min-width: calc(var(--spacing) * 60);
   }
@@ -1443,6 +1479,10 @@
     min-width: calc(var(--anchor-width) + calc(var(--spacing) * 7));
   }
 
+  .min-w-max {
+    min-width: max-content;
+  }
+
   .flex-1 {
     flex: 1;
   }
@@ -1513,6 +1553,10 @@
     rotate: -12deg;
   }
 
+  .rotate-0 {
+    rotate: 0deg;
+  }
+
   .rotate-45 {
     rotate: 45deg;
   }
@@ -1521,6 +1565,10 @@
     rotate: 90deg;
   }
 
+  .transform {
+    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+  }
+
   .animate-caret-blink {
     animation: 1.25s ease-out infinite caret-blink;
   }
@@ -1537,10 +1585,18 @@
     animation: var(--animate-spin);
   }
 
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
+
   .cursor-default {
     cursor: default;
   }
 
+  .cursor-grab {
+    cursor: grab;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
@@ -2073,6 +2129,16 @@
     }
   }
 
+  .bg-muted\/70 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/70 {
+      background-color: color-mix(in oklab, var(--muted) 70%, transparent);
+    }
+  }
+
   .bg-popover {
     background-color: var(--popover);
   }
@@ -2217,6 +2283,10 @@
     padding-block: calc(var(--spacing) * 2.5);
   }
 
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -2225,10 +2295,6 @@
     padding-block: calc(var(--spacing) * 6);
   }
 
-  .py-10 {
-    padding-block: calc(var(--spacing) * 10);
-  }
-
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2325,6 +2391,10 @@
     padding-left: calc(var(--spacing) * 7);
   }
 
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+
   .text-center {
     text-align: center;
   }
@@ -2563,6 +2633,10 @@
     text-transform: capitalize;
   }
 
+  .normal-case {
+    text-transform: none;
+  }
+
   .italic {
     font-style: italic;
   }
@@ -2592,6 +2666,10 @@
     opacity: .5;
   }
 
+  .opacity-80 {
+    opacity: .8;
+  }
+
   .opacity-100 {
     opacity: 1;
   }
@@ -2719,6 +2797,11 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .filter {
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
@@ -3374,11 +3457,21 @@
     inset-inline-start: 50%;
   }
 
+  .after\:top-0:after {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 0);
+  }
+
   .after\:right-0:after {
     content: var(--tw-content);
     right: calc(var(--spacing) * 0);
   }
 
+  .after\:bottom-0:after {
+    content: var(--tw-content);
+    bottom: calc(var(--spacing) * 0);
+  }
+
   .after\:left-0:after {
     content: var(--tw-content);
     left: calc(var(--spacing) * 0);
@@ -3404,12 +3497,29 @@
     width: 2px;
   }
 
+  .after\:w-\[30px\]:after {
+    content: var(--tw-content);
+    width: 30px;
+  }
+
   .after\:-translate-x-1\/2:after {
     content: var(--tw-content);
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .after\:-translate-x-full:after {
+    content: var(--tw-content);
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .after\:translate-x-full:after {
+    content: var(--tw-content);
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .after\:rounded-full:after {
     content: var(--tw-content);
     border-radius: 3.40282e38px;
@@ -3446,6 +3556,37 @@
     mix-blend-mode: darken;
   }
 
+  .after\:shadow-\[inset_-15px_0_8px_-8px_\#0000000d\]:after {
+    content: var(--tw-content);
+    --tw-shadow: inset -15px 0 8px -8px var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .after\:shadow-\[inset_-15px_0_8px_-8px_\#00000000\]:after {
+    content: var(--tw-content);
+    --tw-shadow: inset -15px 0 8px -8px var(--tw-shadow-color, #0000);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .after\:shadow-\[inset_15px_0_8px_-8px_\#0000000d\]:after {
+    content: var(--tw-content);
+    --tw-shadow: inset 15px 0 8px -8px var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .after\:shadow-\[inset_15px_0_8px_-8px_\#00000000\]:after {
+    content: var(--tw-content);
+    --tw-shadow: inset 15px 0 8px -8px var(--tw-shadow-color, #0000);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .after\:transition-all:after {
+    content: var(--tw-content);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .after\:transition-opacity:after {
     content: var(--tw-content);
     transition-property: opacity;
@@ -3453,6 +3594,11 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .after\:content-\[\'\'\]:after {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+
   .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *):after {
     content: var(--tw-content);
     left: 100%;
@@ -3559,6 +3705,16 @@
       }
     }
 
+    .hover\:bg-muted\/30:hover {
+      background-color: var(--muted);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/30:hover {
+        background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+      }
+    }
+
     .hover\:bg-muted\/50:hover {
       background-color: var(--muted);
     }
@@ -3569,6 +3725,16 @@
       }
     }
 
+    .hover\:bg-primary\/40:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/40:hover {
+        background-color: color-mix(in oklab, var(--primary) 40%, transparent);
+      }
+    }
+
     .hover\:bg-secondary\/80:hover {
       background-color: var(--secondary);
     }
@@ -3731,6 +3897,11 @@
     outline-color: var(--ring);
   }
 
+  .focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
   :is(.\*\:focus-visible\:relative > *):focus-visible {
     position: relative;
   }
@@ -3744,6 +3915,10 @@
     border-color: var(--ring);
   }
 
+  .active\:cursor-grabbing:active {
+    cursor: grabbing;
+  }
+
   .active\:bg-sidebar-accent:active {
     background-color: var(--sidebar-accent);
   }
@@ -4454,7 +4629,7 @@
     color: var(--primary-foreground);
   }
 
-  .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
+  .data-\[resizing\=true\]\:bg-primary[data-resizing="true"], .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
     background-color: var(--primary);
   }
 
@@ -5317,6 +5492,18 @@
     mix-blend-mode: lighten;
   }
 
+  .dark\:after\:shadow-\[inset_-15px_0_8px_-8px_\#ffffff0d\]:is(.dark *):after {
+    content: var(--tw-content);
+    --tw-shadow: inset -15px 0 8px -8px var(--tw-shadow-color, #ffffff0d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .dark\:after\:shadow-\[inset_15px_0_8px_-8px_\#ffffff0d\]:is(.dark *):after {
+    content: var(--tw-content);
+    --tw-shadow: inset 15px 0 8px -8px var(--tw-shadow-color, #ffffff0d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   @media (hover: hover) {
     .dark\:hover\:bg-destructive\/30:is(.dark *):hover {
       background-color: var(--destructive);
@@ -5976,6 +6163,11 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .\[\&_td\]\:border-r td, .\[\&_th\]\:border-r th {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+
   .\[\&_tr\]\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -5986,6 +6178,11 @@
     border-width: 0;
   }
 
+  .\[\&_tr\>\*\:last-child\]\:border-r-0 tr > :last-child {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0;
+  }
+
   .\[\&\+\[data-slot\=item-content\]\]\:flex-none + [data-slot="item-content"] {
     flex: none;
   }
@@ -6588,6 +6785,31 @@
   initial-value: 0;
 }
 
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;

package/dist/table/components/base-table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };

package/dist/table/components/data-table-column-header.d.ts

@@ -0,0 +1,12 @@
+import { Header } from '@tanstack/react-table';
+import { ScrollShadowState } from '../type';
+type DataTableColumnHeaderProps<TData> = {
+    header: Header<TData, unknown>;
+    resizable?: boolean;
+    scrollShadow: ScrollShadowState;
+};
+/**
+ * 表头单元格,封装排序、列宽拖拽、固定列阴影
+ */
+export declare function DataTableColumnHeader<TData>({ header, resizable, scrollShadow, }: DataTableColumnHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/components/data-table-pagination.d.ts

@@ -0,0 +1,12 @@
+import { Table as TanstackTable } from '@tanstack/react-table';
+type DataTablePaginationProps<TData> = {
+    table: TanstackTable<TData>;
+    pageSizeOptions?: number[];
+    /** 是否显示已选择行数,默认 true */
+    showSelectionCount?: boolean;
+};
+/**
+ * 表格分页栏:总行数 / 每页数量 / 页码跳转
+ */
+export declare function DataTablePagination<TData>({ table, pageSizeOptions, showSelectionCount, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/components/data-table-toolbar.d.ts

@@ -0,0 +1,23 @@
+import { Table as TanstackTable } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+type DataTableToolbarProps<TData> = {
+    table: TanstackTable<TData>;
+    /** 绑定搜索输入框的列 id;留空则使用全局过滤 */
+    searchColumnId?: string;
+    /** 输入框 placeholder */
+    searchPlaceholder?: string;
+    /** 是否展示视图配置(列显隐),默认 true */
+    showViewOptions?: boolean;
+    /** 是否启用列拖拽 */
+    enableColumnOrdering?: boolean;
+    /** 是否启用列固定 */
+    enableColumnPinning?: boolean;
+    /** 工具栏右侧追加内容 */
+    extra?: ReactNode;
+    className?: string;
+};
+/**
+ * 表格工具栏:搜索 + 视图配置 + 自定义扩展
+ */
+export declare function DataTableToolbar<TData>({ table, searchColumnId, searchPlaceholder, showViewOptions, enableColumnOrdering, enableColumnPinning, extra, className, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/components/data-table-view-options.d.ts

@@ -0,0 +1,18 @@
+import { Table as TanstackTable } from '@tanstack/react-table';
+import { ReactElement } from 'react';
+type DataTableViewOptionsProps<TData> = {
+    table: TanstackTable<TData>;
+    /** 是否允许列拖拽排序,默认 false */
+    enableOrdering?: boolean;
+    /** 是否允许列固定操作,默认 false */
+    enablePinning?: boolean;
+    /** 触发按钮自定义,默认 "视图" */
+    trigger?: ReactElement;
+};
+/**
+ * 列显隐 / 排序 / 固定 设置面板
+ *
+ * 通过 DropdownMenu 弹出列表,内置 DnD-Kit 排序与固定按钮
+ */
+export declare function DataTableViewOptions<TData>({ table, enableOrdering, enablePinning, trigger, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/components/data-table-virtual-body.d.ts

@@ -0,0 +1,19 @@
+import { Table as TanstackTable } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+import { DataTableVirtualOptions } from '../type';
+type DataTableVirtualBodyProps<TData> = {
+    table: TanstackTable<TData>;
+    loading?: boolean;
+    empty?: ReactNode;
+    options?: DataTableVirtualOptions;
+    /** 是否显示纵向边框 */
+    bordered?: boolean;
+    className?: string;
+};
+/**
+ * 行虚拟滚动表格:使用 grid 布局 + `useVirtualizer` 仅渲染可视区域
+ *
+ * 因表格采用 grid 布局,固定列 / 多级表头暂不支持
+ */
+export declare function DataTableVirtualBody<TData>({ table, loading, empty, options, bordered, className, }: DataTableVirtualBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/components/data-table.d.ts

@@ -0,0 +1,15 @@
+import { Table as TanstackTable } from '@tanstack/react-table';
+import { ReactElement, RefAttributes } from 'react';
+import { DataTablePropsType } from '../type';
+/**
+ * DataTable 暴露给 ref 的命令式 handle —— 就是底层 TanStack table 实例
+ *
+ * 通过 `ref` 即可拿到完整的 TanStack `table` API:`setPageIndex`、`getSelectedRowModel`、
+ * `resetSorting`、`getState` 等。配合受控状态使用更顺手
+ */
+export type DataTableHandle<TData> = TanstackTable<TData>;
+/**
+ * forwardRef 包装,泛型用 cast 保留 —— 否则会被 forwardRef 的签名擦除成 unknown
+ */
+declare const DataTable: <TData, TValue = unknown>(props: DataTablePropsType<TData, TValue> & RefAttributes<DataTableHandle<TData>>) => ReactElement | null;
+export { DataTable };

package/dist/table/components/row-drag-handle.d.ts

@@ -0,0 +1,16 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import { ComponentProps, Ref, Context } from 'react';
+/**
+ * SortableRow 通过此 context 向其内部 cell 暴露 dnd-kit 的激活器/监听器
+ *
+ * 用 context 而非 prop 钻透,因为 cell 是用户自定义渲染函数,触不到 SortableRow 的局部变量
+ */
+export type RowDragHandleContextValue = {
+    attributes: DraggableAttributes;
+    listeners: DraggableSyntheticListeners | undefined;
+    setActivatorNodeRef: Ref<HTMLElement>;
+    isDragging: boolean;
+} | null;
+export declare const RowDragHandleContext: Context<RowDragHandleContextValue>;
+/** 在 cell 内任意位置放此组件即可成为行拖拽手柄 */
+export declare function RowDragHandle({ className, ...props }: Omit<ComponentProps<"button">, "ref" | "onMouseDown" | "onKeyDown" | "onTouchStart">): import("react/jsx-runtime").JSX.Element | null;

package/dist/table/components/row-expand-toggle.d.ts

@@ -0,0 +1,21 @@
+import { Row } from '@tanstack/react-table';
+import { ComponentProps } from 'react';
+type RowExpandTogglePropsType<TData> = Omit<ComponentProps<"button">, "onClick" | "children"> & {
+    /** 当前行实例 */
+    row: Row<TData>;
+    /**
+     * 嵌套树场景下,每层缩进的像素数;设为 0 关闭自动缩进
+     *
+     * 默认 16,即每深一层缩进 16px
+     */
+    indent?: number;
+    /** 当行无可展开子项时是否仍占位渲染(保持对齐),默认 true */
+    placeholder?: boolean;
+};
+/**
+ * 行展开切换按钮:基于 `row.getToggleExpandedHandler` + `row.depth` 自动缩进
+ *
+ * 配合 `features.expanding` 与 `tableOptions.getSubRows`(嵌套树),或 `expandedRowRender`(展开面板)使用
+ */
+export declare function RowExpandToggle<TData>({ row, indent, placeholder, className, ...props }: RowExpandTogglePropsType<TData>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/table/hooks/use-data-table.d.ts

@@ -0,0 +1,44 @@
+import { TableOptions, Table } from '@tanstack/react-table';
+import { DataTableColumn, DataTableFeatures, DataTableState, DataTableStateHandlers, ScrollShadowState } from '../type';
+type UseDataTableOptions<TData, TValue> = {
+    data: TData[];
+    columns: DataTableColumn<TData, TValue>[];
+    features?: DataTableFeatures;
+    state?: DataTableState;
+    initialState?: DataTableState;
+    onStateChange?: DataTableStateHandlers;
+    /**
+     * 透传至底层 useReactTable 的额外配置,会与内部配置浅合并
+     *
+     * 常用于服务端模式:`manualPagination` / `pageCount` / `rowCount` /
+     * `manualSorting` / `manualFiltering`,以及 `meta` 等
+     */
+    tableOptions?: Partial<TableOptions<TData>>;
+};
+/**
+ * 构造 TanStack 表格实例,并按需开启各项功能
+ */
+export declare function useDataTable<TData, TValue = unknown>({ data, columns, features, state, initialState, onStateChange, tableOptions, }: UseDataTableOptions<TData, TValue>): {
+    table: Table<TData>;
+    features: {
+        sorting: boolean;
+        multiSort: boolean;
+        filtering: boolean;
+        globalFilter: boolean;
+        pagination: boolean;
+        rowSelection: boolean;
+        columnVisibility: boolean;
+        columnOrdering: boolean;
+        columnPinning: boolean;
+        columnResizing: boolean;
+        rowDnd: boolean;
+        expanding: boolean;
+    };
+};
+/**
+ * 监听容器横向滚动,返回左右阴影显示状态
+ *
+ * 用于固定列阴影提示
+ */
+export declare function useScrollShadow(wrapperRef: React.RefObject<HTMLElement | null>, containerSelector?: string): ScrollShadowState;
+export {};