@aloudata/aloudata-design 3.1.0 → 3.1.2

package/dist/DataPreviewTable/components/Header/index.js

@@ -4,38 +4,46 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/DataPreviewTable/components/Header/index.tsx
 function Header(props) {
-	const { contentWidth, columns, columnLayout, setWidth, columnRange: [startIndex, endIndex], headerHeight } = props;
+	const { tableId, contentWidth, columns, columnLayout, setWidth, columnRange: [startIndex, endIndex], headerHeight } = props;
 	return /* @__PURE__ */ jsx("div", {
+		role: "rowgroup",
 		className: "ald-data-preview-header tw-z-[2] tw-w-full",
 		style: { width: contentWidth },
-		children: columns.slice(startIndex, endIndex + 1).map((column) => {
-			const innerCell = column.renderHeader?.(column);
-			const style = {
-				height: headerHeight,
-				width: columnLayout[column.id].width,
-				top: 0,
-				left: columnLayout[column.id].left,
-				position: "absolute"
-			};
-			return /* @__PURE__ */ jsxs("div", {
-				className: cn("ald-data-preview-header-cell", "tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-default)]", "tw-bg-[var(--background-neutral-surface)] tw-font-medium tw-text-[var(--content-primary)]"),
-				style,
-				children: [innerCell ? innerCell : /* @__PURE__ */ jsxs("div", {
-					className: "ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--background-neutral-surface)] tw-p-1 tw-leading-6",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--content-secondary)]",
-						children: column.icon !== void 0 ? column.icon : /* @__PURE__ */ jsx("span", {})
-					}), /* @__PURE__ */ jsx("div", {
-						className: "ald-data-preview-header-name tw-m-auto tw-truncate tw-text-left",
-						children: column.name
+		children: /* @__PURE__ */ jsx("div", {
+			role: "row",
+			style: { display: "contents" },
+			children: columns.slice(startIndex, endIndex + 1).map((column) => {
+				const innerCell = column.renderHeader?.(column);
+				const style = {
+					height: headerHeight,
+					width: columnLayout[column.id].width,
+					top: 0,
+					left: columnLayout[column.id].left,
+					position: "absolute"
+				};
+				return /* @__PURE__ */ jsxs("div", {
+					id: `${tableId}-column-${encodeURIComponent(column.id)}`,
+					role: "columnheader",
+					"aria-label": column.name,
+					className: cn("ald-data-preview-header-cell", "tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-default)]", "tw-bg-[var(--background-neutral-surface)] tw-font-medium tw-text-[var(--content-primary)]"),
+					style,
+					children: [innerCell ? innerCell : /* @__PURE__ */ jsxs("div", {
+						className: "ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--background-neutral-surface)] tw-p-1 tw-leading-6",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--content-secondary)]",
+							children: column.icon !== void 0 ? column.icon : /* @__PURE__ */ jsx("span", {})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "ald-data-preview-header-name tw-m-auto tw-truncate tw-text-left",
+							children: column.name
+						})]
+					}), /* @__PURE__ */ jsx(DragBar_default, {
+						columnId: column.id,
+						wrapWidth: columnLayout[column.id].width,
+						onChange: setWidth,
+						headerHeight
 					})]
-				}), /* @__PURE__ */ jsx(DragBar_default, {
-					columnId: column.id,
-					wrapWidth: columnLayout[column.id].width,
-					onChange: setWidth,
-					headerHeight
-				})]
-			}, column.id);
+				}, column.id);
+			})
 		})
 	});
 }

package/dist/DataPreviewTable/components/Header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Header/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { IColumnLayout, PreviewColumn } from '../../interface';\nimport DragBar from '../DragBar';\ninterface IHeader {\n  contentWidth: number;\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  setWidth: (columnId: string, width: number) => void;\n  columnRange: [number, number];\n  headerHeight: number;\n}\nexport default function Header(props: IHeader) {\n  const {\n    contentWidth,\n    columns,\n    columnLayout,\n    setWidth,\n    columnRange: [startIndex, endIndex],\n    headerHeight,\n  } = props;\n  return (\n    <div\n      className=\"ald-data-preview-header tw-z-[2] tw-w-full\"\n      style={{ width: contentWidth }}\n    >\n      {columns.slice(startIndex, endIndex + 1).map((column) => {\n        const innerCell = column.renderHeader?.(column);\n        const style: React.CSSProperties = {\n          height: headerHeight,\n          width: columnLayout[column.id].width,\n          top: 0,\n          left: columnLayout[column.id].left,\n          position: 'absolute',\n        };\n\n        return (\n          <div\n            className={cn(\n              'ald-data-preview-header-cell',\n              'tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-default)]',\n              'tw-bg-[var(--background-neutral-surface)] tw-font-medium tw-text-[var(--content-primary)]',\n            )}\n            key={column.id}\n            style={style}\n          >\n            {innerCell ? (\n              innerCell\n            ) : (\n              <div className=\"ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--background-neutral-surface)] tw-p-1 tw-leading-6\">\n                <div className=\"ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--content-secondary)]\">\n                  {column.icon !== undefined ? column.icon : <span></span>}\n                </div>\n                <div className=\"ald-data-preview-header-name tw-m-auto tw-truncate tw-text-left\">\n                  {column.name}\n                </div>\n              </div>\n            )}\n            <DragBar\n              columnId={column.id}\n              wrapWidth={columnLayout[column.id].width}\n              onChange={setWidth}\n              headerHeight={headerHeight}\n            ></DragBar>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAwB,OAAO,OAAgB;CAC7C,MAAM,EACJ,cACA,SACA,cACA,UACA,aAAa,CAAC,YAAY,WAC1B,iBACE;AACJ,QACE,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,OAAO,cAAc;YAE7B,QAAQ,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,WAAW;GACvD,MAAM,YAAY,OAAO,eAAe,OAAO;GAC/C,MAAM,QAA6B;IACjC,QAAQ;IACR,OAAO,aAAa,OAAO,IAAI;IAC/B,KAAK;IACL,MAAM,aAAa,OAAO,IAAI;IAC9B,UAAU;IACX;AAED,UACE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,mHACA,4FACD;IAEM;cAPT,CASG,YACC,YAEA,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,OAAO,SAAS,SAAY,OAAO,OAAO,oBAAC,QAAD,EAAa,CAAA;MACpD,CAAA,EACN,oBAAC,OAAD;MAAK,WAAU;gBACZ,OAAO;MACJ,CAAA,CACF;QAER,oBAAC,iBAAD;KACE,UAAU,OAAO;KACjB,WAAW,aAAa,OAAO,IAAI;KACnC,UAAU;KACI;KACL,CAAA,CACP;MArBC,OAAO,GAqBR;IAER;EACE,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Header/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { IColumnLayout, PreviewColumn } from '../../interface';\nimport DragBar from '../DragBar';\ninterface IHeader {\n  tableId: string;\n  contentWidth: number;\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  setWidth: (columnId: string, width: number) => void;\n  columnRange: [number, number];\n  headerHeight: number;\n}\nexport default function Header(props: IHeader) {\n  const {\n    tableId,\n    contentWidth,\n    columns,\n    columnLayout,\n    setWidth,\n    columnRange: [startIndex, endIndex],\n    headerHeight,\n  } = props;\n  return (\n    <div\n      role=\"rowgroup\"\n      className=\"ald-data-preview-header tw-z-[2] tw-w-full\"\n      style={{ width: contentWidth }}\n    >\n      <div role=\"row\" style={{ display: 'contents' }}>\n        {columns.slice(startIndex, endIndex + 1).map((column) => {\n          const innerCell = column.renderHeader?.(column);\n          const style: React.CSSProperties = {\n            height: headerHeight,\n            width: columnLayout[column.id].width,\n            top: 0,\n            left: columnLayout[column.id].left,\n            position: 'absolute',\n          };\n\n          return (\n            <div\n              id={`${tableId}-column-${encodeURIComponent(column.id)}`}\n              role=\"columnheader\"\n              aria-label={column.name}\n              className={cn(\n                'ald-data-preview-header-cell',\n                'tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-default)]',\n                'tw-bg-[var(--background-neutral-surface)] tw-font-medium tw-text-[var(--content-primary)]',\n              )}\n              key={column.id}\n              style={style}\n            >\n              {innerCell ? (\n                innerCell\n              ) : (\n                <div className=\"ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--background-neutral-surface)] tw-p-1 tw-leading-6\">\n                  <div className=\"ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--content-secondary)]\">\n                    {column.icon !== undefined ? column.icon : <span></span>}\n                  </div>\n                  <div className=\"ald-data-preview-header-name tw-m-auto tw-truncate tw-text-left\">\n                    {column.name}\n                  </div>\n                </div>\n              )}\n              <DragBar\n                columnId={column.id}\n                wrapWidth={columnLayout[column.id].width}\n                onChange={setWidth}\n                headerHeight={headerHeight}\n              ></DragBar>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAwB,OAAO,OAAgB;CAC7C,MAAM,EACJ,SACA,cACA,SACA,cACA,UACA,aAAa,CAAC,YAAY,WAC1B,iBACE;AACJ,QACE,oBAAC,OAAD;EACE,MAAK;EACL,WAAU;EACV,OAAO,EAAE,OAAO,cAAc;YAE9B,oBAAC,OAAD;GAAK,MAAK;GAAM,OAAO,EAAE,SAAS,YAAY;aAC3C,QAAQ,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,WAAW;IACvD,MAAM,YAAY,OAAO,eAAe,OAAO;IAC/C,MAAM,QAA6B;KACjC,QAAQ;KACR,OAAO,aAAa,OAAO,IAAI;KAC/B,KAAK;KACL,MAAM,aAAa,OAAO,IAAI;KAC9B,UAAU;KACX;AAED,WACE,qBAAC,OAAD;KACE,IAAI,GAAG,QAAQ,UAAU,mBAAmB,OAAO,GAAG;KACtD,MAAK;KACL,cAAY,OAAO;KACnB,WAAW,GACT,gCACA,mHACA,4FACD;KAEM;eAVT,CAYG,YACC,YAEA,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBACZ,OAAO,SAAS,SAAY,OAAO,OAAO,oBAAC,QAAD,EAAa,CAAA;OACpD,CAAA,EACN,oBAAC,OAAD;OAAK,WAAU;iBACZ,OAAO;OACJ,CAAA,CACF;SAER,oBAAC,iBAAD;MACE,UAAU,OAAO;MACjB,WAAW,aAAa,OAAO,IAAI;MACnC,UAAU;MACI;MACL,CAAA,CACP;OArBC,OAAO,GAqBR;KAER;GACE,CAAA;EACF,CAAA"}

package/dist/DataPreviewTable/index.js

@@ -7,13 +7,17 @@ import Body_default from "./components/Body/index.js";
 import Error_default from "./components/Body/Error.js";
 import Header from "./components/Header/index.js";
 import useDirection from "./hooks/useDirection.js";
-import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from "react";
+import React, { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/DataPreviewTable/index.tsx
+var EMPTY_COLUMNS = [];
+var EMPTY_DATASOURCE = [];
 var DataPreviewTable_default = memo(forwardRef(function(props, ref) {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
-	const { columns = [], datasource = [], width, height, headerHeight = 0, loading, dataStatus, errorMsg = t.DataPreviewTable.dataLoadFailed } = props;
+	const { columns = EMPTY_COLUMNS, datasource = EMPTY_DATASOURCE, width, height, headerHeight = 0, loading, dataStatus, errorMsg = t.DataPreviewTable.dataLoadFailed } = props;
 	const realHeaderHeight = Math.max(headerHeight, 32);
+	const tableId = `ald-data-preview-${React.useId().replace(/:/g, "")}`;
 	const contentHeight = useMemo(() => {
 		return datasource.length * 20 + realHeaderHeight;
 	}, [datasource, realHeaderHeight]);
@@ -46,6 +50,9 @@ var DataPreviewTable_default = memo(forwardRef(function(props, ref) {
 		return rows - 1 < 0 ? 0 : rows - 1;
 	}, [realHeaderHeight]);
 	return /* @__PURE__ */ jsxs("div", {
+		role: "table",
+		"aria-label": "Data preview table",
+		"aria-busy": loading || dataStatus === "pending" || void 0,
 		style: {
 			width,
 			height
@@ -73,6 +80,7 @@ var DataPreviewTable_default = memo(forwardRef(function(props, ref) {
 					/* @__PURE__ */ jsx("div", {
 						className: "ald-data-preview-sticky tw-sticky tw-top-0 tw-z-[1]",
 						children: /* @__PURE__ */ jsx(Header, {
+							tableId,
 							contentWidth,
 							headerHeight: realHeaderHeight,
 							columns: tableColumns,
@@ -82,10 +90,13 @@ var DataPreviewTable_default = memo(forwardRef(function(props, ref) {
 						})
 					}),
 					dataStatus === "pending" && tableColumns.length > 0 && /* @__PURE__ */ jsx("div", {
+						role: "status",
+						"aria-live": "polite",
 						className: "ald-data-preview-loading tw-fixed tw-flex tw-size-full tw-items-center tw-justify-center",
 						children: /* @__PURE__ */ jsx(CustomSpin, {})
 					}),
 					dataStatus === "success" && /* @__PURE__ */ jsx(Body_default, {
+						tableId,
 						columns: tableColumns,
 						columnRange,
 						columnLayout,
@@ -98,6 +109,12 @@ var DataPreviewTable_default = memo(forwardRef(function(props, ref) {
 						wrapWidth: wrapRef.current?.clientWidth || 0,
 						wrapHeight: wrapRef.current?.clientHeight || 0,
 						headerHeight: realHeaderHeight
+					}),
+					dataStatus === "success" && datasource.length === 0 && /* @__PURE__ */ jsx("div", {
+						role: "status",
+						"aria-live": "polite",
+						className: "tw-sr-only",
+						children: "No data"
 					})
 				]
 			})

package/dist/DataPreviewTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/DataPreviewTable/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, {\n  forwardRef,\n  memo,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport Progress, { IProgressRef } from '../Progress';\nimport ScrollArea from '../ScrollArea';\nimport Spin from '../Spin';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport Body from './components/Body';\nimport Error from './components/Body/Error';\nimport Header from './components/Header';\nimport { CELL_HEIGHT, DEFAULT_HEADER_HEIGHT } from './constant';\nimport useDirection from './hooks/useDirection';\nimport { DataPreviewTableRef, ITableProps } from './interface';\n\nconst DataPreviewTable = forwardRef(function (\n  props: ITableProps,\n  ref: React.Ref<DataPreviewTableRef>,\n) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    columns = [],\n    datasource = [],\n    width,\n    height,\n    headerHeight = 0,\n    loading,\n    dataStatus,\n    errorMsg = t.DataPreviewTable.dataLoadFailed,\n  } = props;\n\n  const realHeaderHeight = Math.max(headerHeight, DEFAULT_HEADER_HEIGHT);\n  const contentHeight = useMemo(() => {\n    return datasource.length * CELL_HEIGHT + realHeaderHeight;\n  }, [datasource, realHeaderHeight]);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const progressRef = useRef<IProgressRef>(null);\n  const {\n    columnRange,\n    rowRange,\n    onScroll,\n    columnLayout,\n    setColumnsWidth,\n    tableColumns,\n    contentWidth,\n  } = useDirection(columns, wrapRef);\n\n  useImperativeHandle(ref, () => ({\n    scrollToColumnInView: (columnId: string) => {\n      // 实现scrollTo方法\n      const columnPos = columnLayout[columnId];\n      if (!columnPos) return;\n      // 根据容器的宽度，容器的scrollLeft，columnPos，判断当前列是否在可视区域内\n      const { scrollLeft } = wrapRef.current as HTMLDivElement;\n      const { left, width } = columnPos;\n      const containerWidth = wrapRef.current?.clientWidth || 0;\n      if (left < scrollLeft) {\n        // 左边不可见\n        wrapRef.current?.scrollTo({\n          left,\n          behavior: 'smooth',\n        });\n      } else if (left + width > scrollLeft + containerWidth) {\n        // 右边不可见\n        wrapRef.current?.scrollTo({\n          left: left + width - containerWidth,\n          behavior: 'smooth',\n        });\n      }\n    },\n    progressRestart: () => {\n      progressRef.current?.restart();\n    },\n  }));\n\n  const skeletonRows = useMemo(() => {\n    if (!wrapRef.current) return 0;\n    const rows = Math.ceil(\n      ((wrapRef.current?.clientHeight || 0) - realHeaderHeight) / CELL_HEIGHT,\n    );\n    return rows - 1 < 0 ? 0 : rows - 1;\n  }, [realHeaderHeight]);\n\n  return (\n    <div\n      style={{ width, height }}\n      className={cn(\n        props.className,\n        'ald-data-preview-table tw-relative tw-box-border tw-border tw-border-solid tw-border-[var(--border-default)] tw-text-xs tw-tabular-nums [&_*]:tw-box-border',\n        {\n          'ald-data-preview-table-show-skeleton': dataStatus === 'pending',\n        },\n      )}\n    >\n      <div className=\"ald-data-preview-progress tw-absolute tw-left-0 tw-top-0 tw-z-[3] tw-w-full\">\n        <Progress loading={!!loading} ref={progressRef} />\n      </div>\n      <ScrollArea\n        ref={wrapRef}\n        style={{ willChange: 'transform' }}\n        onViewportScroll={() => {\n          // const { scrollTop, scrollLeft } = e.target as HTMLDivElement;\n          onScroll();\n        }}\n      >\n        <div\n          style={{\n            height:\n              dataStatus === 'pending'\n                ? skeletonRows * CELL_HEIGHT + realHeaderHeight\n                : contentHeight,\n            position: 'relative',\n            width: 'fit-content',\n          }}\n        >\n          <div className=\"ald-data-preview-sticky tw-sticky tw-top-0 tw-z-[1]\">\n            <Header\n              contentWidth={contentWidth}\n              headerHeight={realHeaderHeight}\n              columns={tableColumns}\n              columnLayout={columnLayout}\n              setWidth={setColumnsWidth}\n              columnRange={columnRange}\n            />\n          </div>\n          {dataStatus === 'pending' && tableColumns.length > 0 && (\n            <div className=\"ald-data-preview-loading tw-fixed tw-flex tw-size-full tw-items-center tw-justify-center\">\n              <Spin />\n            </div>\n          )}\n          {dataStatus === 'success' && (\n            <Body\n              columns={tableColumns}\n              columnRange={columnRange}\n              columnLayout={columnLayout}\n              datasource={datasource}\n              rowRange={rowRange}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n          {dataStatus === 'error' && (\n            <Error\n              errorMsg={errorMsg}\n              wrapWidth={wrapRef.current?.clientWidth || 0}\n              wrapHeight={wrapRef.current?.clientHeight || 0}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n});\n\nexport default memo(DataPreviewTable);\n"],"mappings":";;;;;;;;;;;AAiKA,IAAA,2BAAe,KA7IU,WAAW,SAClC,OACA,KACA;CACA,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,UAAU,EAAE,EACZ,aAAa,EAAE,EACf,OACA,QACA,eAAe,GACf,SACA,YACA,WAAW,EAAE,iBAAiB,mBAC5B;CAEJ,MAAM,mBAAmB,KAAK,IAAI,cAAA,GAAoC;CACtE,MAAM,gBAAgB,cAAc;AAClC,SAAO,WAAW,SAAA,KAAuB;IACxC,CAAC,YAAY,iBAAiB,CAAC;CAClC,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,OAAqB,KAAK;CAC9C,MAAM,EACJ,aACA,UACA,UACA,cACA,iBACA,cACA,iBACE,aAAa,SAAS,QAAQ;AAElC,qBAAoB,YAAY;EAC9B,uBAAuB,aAAqB;GAE1C,MAAM,YAAY,aAAa;AAC/B,OAAI,CAAC,UAAW;GAEhB,MAAM,EAAE,eAAe,QAAQ;GAC/B,MAAM,EAAE,MAAM,UAAU;GACxB,MAAM,iBAAiB,QAAQ,SAAS,eAAe;AACvD,OAAI,OAAO,WAET,SAAQ,SAAS,SAAS;IACxB;IACA,UAAU;IACX,CAAC;YACO,OAAO,QAAQ,aAAa,eAErC,SAAQ,SAAS,SAAS;IACxB,MAAM,OAAO,QAAQ;IACrB,UAAU;IACX,CAAC;;EAGN,uBAAuB;AACrB,eAAY,SAAS,SAAS;;EAEjC,EAAE;CAEH,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,QAAQ,QAAS,QAAO;EAC7B,MAAM,OAAO,KAAK,OACd,QAAQ,SAAS,gBAAgB,KAAK,oBAAA,GACzC;AACD,SAAO,OAAO,IAAI,IAAI,IAAI,OAAO;IAChC,CAAC,iBAAiB,CAAC;AAEtB,QACE,qBAAC,OAAD;EACE,OAAO;GAAE;GAAO;GAAQ;EACxB,WAAW,GACT,MAAM,WACN,+JACA,EACE,wCAAwC,eAAe,WACxD,CACF;YARH,CAUE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,kBAAD;IAAU,SAAS,CAAC,CAAC;IAAS,KAAK;IAAe,CAAA;GAC9C,CAAA,EACN,oBAAC,oBAAD;GACE,KAAK;GACL,OAAO,EAAE,YAAY,aAAa;GAClC,wBAAwB;AAEtB,cAAU;;aAGZ,qBAAC,OAAD;IACE,OAAO;KACL,QACE,eAAe,YACX,eAAA,KAA6B,mBAC7B;KACN,UAAU;KACV,OAAO;KACR;cARH;KAUE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,QAAD;OACgB;OACd,cAAc;OACd,SAAS;OACK;OACd,UAAU;OACG;OACb,CAAA;MACE,CAAA;KACL,eAAe,aAAa,aAAa,SAAS,KACjD,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,YAAD,EAAQ,CAAA;MACJ,CAAA;KAEP,eAAe,aACd,oBAAC,cAAD;MACE,SAAS;MACI;MACC;MACF;MACF;MACV,cAAc;MACd,CAAA;KAEH,eAAe,WACd,oBAAC,eAAD;MACY;MACV,WAAW,QAAQ,SAAS,eAAe;MAC3C,YAAY,QAAQ,SAAS,gBAAgB;MAC7C,cAAc;MACd,CAAA;KAEA;;GACK,CAAA,CACT;;EAER,CAEmC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/DataPreviewTable/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, {\n  forwardRef,\n  memo,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport Progress, { IProgressRef } from '../Progress';\nimport ScrollArea from '../ScrollArea';\nimport Spin from '../Spin';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport Body from './components/Body';\nimport Error from './components/Body/Error';\nimport Header from './components/Header';\nimport { CELL_HEIGHT, DEFAULT_HEADER_HEIGHT } from './constant';\nimport useDirection from './hooks/useDirection';\nimport {\n  DataPreviewTableRef,\n  ITableProps,\n  PreviewColumn,\n  TValue,\n} from './interface';\n\nconst EMPTY_COLUMNS: PreviewColumn[] = [];\nconst EMPTY_DATASOURCE: TValue[][] = [];\n\nconst DataPreviewTable = forwardRef(function (\n  props: ITableProps,\n  ref: React.Ref<DataPreviewTableRef>,\n) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    columns = EMPTY_COLUMNS,\n    datasource = EMPTY_DATASOURCE,\n    width,\n    height,\n    headerHeight = 0,\n    loading,\n    dataStatus,\n    errorMsg = t.DataPreviewTable.dataLoadFailed,\n  } = props;\n\n  const realHeaderHeight = Math.max(headerHeight, DEFAULT_HEADER_HEIGHT);\n  const tableId = `ald-data-preview-${React.useId().replace(/:/g, '')}`;\n  const contentHeight = useMemo(() => {\n    return datasource.length * CELL_HEIGHT + realHeaderHeight;\n  }, [datasource, realHeaderHeight]);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const progressRef = useRef<IProgressRef>(null);\n  const {\n    columnRange,\n    rowRange,\n    onScroll,\n    columnLayout,\n    setColumnsWidth,\n    tableColumns,\n    contentWidth,\n  } = useDirection(columns, wrapRef);\n\n  useImperativeHandle(ref, () => ({\n    scrollToColumnInView: (columnId: string) => {\n      // 实现scrollTo方法\n      const columnPos = columnLayout[columnId];\n      if (!columnPos) return;\n      // 根据容器的宽度，容器的scrollLeft，columnPos，判断当前列是否在可视区域内\n      const { scrollLeft } = wrapRef.current as HTMLDivElement;\n      const { left, width } = columnPos;\n      const containerWidth = wrapRef.current?.clientWidth || 0;\n      if (left < scrollLeft) {\n        // 左边不可见\n        wrapRef.current?.scrollTo({\n          left,\n          behavior: 'smooth',\n        });\n      } else if (left + width > scrollLeft + containerWidth) {\n        // 右边不可见\n        wrapRef.current?.scrollTo({\n          left: left + width - containerWidth,\n          behavior: 'smooth',\n        });\n      }\n    },\n    progressRestart: () => {\n      progressRef.current?.restart();\n    },\n  }));\n\n  const skeletonRows = useMemo(() => {\n    if (!wrapRef.current) return 0;\n    const rows = Math.ceil(\n      ((wrapRef.current?.clientHeight || 0) - realHeaderHeight) / CELL_HEIGHT,\n    );\n    return rows - 1 < 0 ? 0 : rows - 1;\n  }, [realHeaderHeight]);\n\n  return (\n    <div\n      role=\"table\"\n      aria-label=\"Data preview table\"\n      aria-busy={loading || dataStatus === 'pending' || undefined}\n      style={{ width, height }}\n      className={cn(\n        props.className,\n        'ald-data-preview-table tw-relative tw-box-border tw-border tw-border-solid tw-border-[var(--border-default)] tw-text-xs tw-tabular-nums [&_*]:tw-box-border',\n        {\n          'ald-data-preview-table-show-skeleton': dataStatus === 'pending',\n        },\n      )}\n    >\n      <div className=\"ald-data-preview-progress tw-absolute tw-left-0 tw-top-0 tw-z-[3] tw-w-full\">\n        <Progress loading={!!loading} ref={progressRef} />\n      </div>\n      <ScrollArea\n        ref={wrapRef}\n        style={{ willChange: 'transform' }}\n        onViewportScroll={() => {\n          // const { scrollTop, scrollLeft } = e.target as HTMLDivElement;\n          onScroll();\n        }}\n      >\n        <div\n          style={{\n            height:\n              dataStatus === 'pending'\n                ? skeletonRows * CELL_HEIGHT + realHeaderHeight\n                : contentHeight,\n            position: 'relative',\n            width: 'fit-content',\n          }}\n        >\n          <div className=\"ald-data-preview-sticky tw-sticky tw-top-0 tw-z-[1]\">\n            <Header\n              tableId={tableId}\n              contentWidth={contentWidth}\n              headerHeight={realHeaderHeight}\n              columns={tableColumns}\n              columnLayout={columnLayout}\n              setWidth={setColumnsWidth}\n              columnRange={columnRange}\n            />\n          </div>\n          {dataStatus === 'pending' && tableColumns.length > 0 && (\n            <div\n              role=\"status\"\n              aria-live=\"polite\"\n              className=\"ald-data-preview-loading tw-fixed tw-flex tw-size-full tw-items-center tw-justify-center\"\n            >\n              <Spin />\n            </div>\n          )}\n          {dataStatus === 'success' && (\n            <Body\n              tableId={tableId}\n              columns={tableColumns}\n              columnRange={columnRange}\n              columnLayout={columnLayout}\n              datasource={datasource}\n              rowRange={rowRange}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n          {dataStatus === 'error' && (\n            <Error\n              errorMsg={errorMsg}\n              wrapWidth={wrapRef.current?.clientWidth || 0}\n              wrapHeight={wrapRef.current?.clientHeight || 0}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n          {dataStatus === 'success' && datasource.length === 0 && (\n            <div role=\"status\" aria-live=\"polite\" className=\"tw-sr-only\">\n              No data\n            </div>\n          )}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n});\n\nexport default memo(DataPreviewTable);\n"],"mappings":"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"}

package/dist/Drawer/index.d.ts

@@ -14,6 +14,10 @@ export interface DrawerProps {
     destroyOnClose?: boolean;
     className?: string;
     rootClassName?: string;
+    /** Pass through to the drawer content root for automated testing. */
+    'data-testid'?: string;
+    /** Pass through to the drawer content root when no title is rendered. */
+    'aria-label'?: string;
     style?: React.CSSProperties;
     contentWrapperStyle?: React.CSSProperties;
     bodyStyle?: React.CSSProperties;

package/dist/Drawer/index.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
 import Memo from "../Icon/components/CloseLightLine.js";
-import { FloatingLayerProvider, useFloatingLayer } from "../_utils/floatingLayer.js";
-import { useBodyScrollLock } from "../_utils/overlayCoordinator.js";
+import { FLOATING_LAYER_BASE_Z_INDEX, FloatingLayerProvider } from "../_utils/floatingLayer.js";
+import { ModalLayerProvider, useModalLayer } from "../_utils/overlayCoordinator.js";
+import { focusInitialDialogTarget, markDialogEscapeEvent, useDialogAccessibility } from "../_utils/dialogAccessibility.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -24,11 +25,19 @@ var slideAnimationStyles = {
 	bottom: "data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom"
 };
 function Drawer(props) {
-	const { open = false, onClose, title, description, placement = "right", width, height, size = "default", closable = true, mask = true, maskClosable = true, className, rootClassName, style, contentWrapperStyle, bodyStyle, headerStyle, footer, footerStyle, extra, children, zIndex = 1e3, getContainer } = props;
+	const { open = false, onClose, title, description, placement = "right", width, height, size = "default", closable = true, mask = true, maskClosable = true, className, rootClassName, "data-testid": dataTestId, "aria-label": ariaLabel, style, contentWrapperStyle, bodyStyle, headerStyle, footer, footerStyle, extra, children, zIndex = 1e3, keyboard = true, getContainer } = props;
 	const contentRef = useRef(null);
 	const [portalContainer, setPortalContainer] = useState();
 	const inline = getContainer === false;
-	useBodyScrollLock(open);
+	const { id: drawerLayerId, maskZIndex, contentZIndex, isTop } = useModalLayer(open, zIndex);
+	const nextFloatingLevel = (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / 10 + 1;
+	useDialogAccessibility({
+		open,
+		isTop,
+		keyboard,
+		containerRef: contentRef,
+		onEscape: (event) => onClose?.(event)
+	});
 	useLayoutEffect(() => {
 		if (getContainer === void 0 || getContainer === false) setPortalContainer(void 0);
 		else if (typeof getContainer === "string") setPortalContainer(document.querySelector(getContainer) ?? void 0);
@@ -36,31 +45,9 @@ function Drawer(props) {
 		else setPortalContainer(getContainer);
 	}, [getContainer]);
 	useEffect(() => {
-		if (!open || !contentRef.current) return;
+		if (!open || !isTop || !contentRef.current) return;
 		return hideOthers(contentRef.current);
-	}, [open]);
-	useEffect(() => {
-		if (!open || !contentRef.current) return;
-		const container = contentRef.current;
-		const handleKeyDown = (e) => {
-			if (e.key !== "Tab") return;
-			const focusable = container.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])");
-			if (focusable.length === 0) return;
-			const first = focusable[0];
-			const last = focusable[focusable.length - 1];
-			if (e.shiftKey) {
-				if (document.activeElement === first || !container.contains(document.activeElement)) {
-					e.preventDefault();
-					last.focus();
-				}
-			} else if (document.activeElement === last || !container.contains(document.activeElement)) {
-				e.preventDefault();
-				first.focus();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [open]);
+	}, [isTop, open]);
 	const isHorizontal = placement === "left" || placement === "right";
 	const preset = sizePresets[size] || sizePresets.default;
 	const sizeStyle = isHorizontal ? {
@@ -70,81 +57,108 @@ function Drawer(props) {
 		height: height ?? preset,
 		maxHeight: "100vh"
 	};
-	const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);
 	const drawerNode = /* @__PURE__ */ jsxs("div", {
 		className: cn("ald-drawer-root tw-pointer-events-none tw-inset-0", inline ? "tw-absolute" : "tw-fixed", rootClassName),
-		children: [mask && /* @__PURE__ */ jsx("div", {
+		style: { zIndex: maskZIndex },
+		children: [mask && isTop && /* @__PURE__ */ jsx("div", {
 			"data-state": open ? "open" : "closed",
-			className: "ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
+			className: "ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-mask)] data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
 			style: { zIndex: maskZIndex },
 			onClick: maskClosable ? () => onClose?.() : void 0
 		}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
 			ref: contentRef,
-			className: cn("ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl", placementStyles[placement], slideAnimationStyles[placement], className),
+			tabIndex: -1,
+			role: "dialog",
+			"data-testid": dataTestId,
+			"aria-modal": isTop || void 0,
+			"aria-label": ariaLabel,
+			...description ? {} : { "aria-describedby": void 0 },
+			...!isTop ? { inert: "" } : {},
+			"aria-hidden": !isTop || void 0,
+			className: cn("ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-xl)]", placementStyles[placement], slideAnimationStyles[placement], className),
 			style: {
 				zIndex: contentZIndex,
 				...sizeStyle,
 				...contentWrapperStyle,
 				...style
 			},
-			onEscapeKeyDown: () => onClose?.(),
+			onOpenAutoFocus: (event) => {
+				event.preventDefault();
+				requestAnimationFrame(() => {
+					const drawer = contentRef.current;
+					if (drawer) focusInitialDialogTarget(drawer);
+				});
+			},
+			onEscapeKeyDown: (event) => {
+				if (!event.defaultPrevented) markDialogEscapeEvent(event);
+				event.preventDefault();
+			},
 			onInteractOutside: (event) => {
 				if (!maskClosable) event.preventDefault();
 			},
-			children: /* @__PURE__ */ jsxs(FloatingLayerProvider, {
-				value: nextLevel,
-				children: [
-					(title || description || closable || extra) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4",
-						style: headerStyle,
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "tw-flex tw-w-full tw-flex-col tw-gap-[6px]",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]",
-								children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
-									className: "ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]",
-									children: title
-								}), extra || closable ? /* @__PURE__ */ jsxs("div", {
-									className: "ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]",
-									children: [extra, closable && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
-										asChild: true,
-										children: /* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]",
-											onClick: () => onClose?.(),
-											children: /* @__PURE__ */ jsx(Memo, {
-												size: 20,
-												color: "var(--content-secondary)"
+			children: /* @__PURE__ */ jsx(ModalLayerProvider, {
+				id: drawerLayerId,
+				children: /* @__PURE__ */ jsxs(FloatingLayerProvider, {
+					value: nextFloatingLevel,
+					children: [
+						!title && /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+							className: "tw-sr-only",
+							children: ariaLabel || "Drawer"
+						}),
+						(title || description || closable || extra) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+							className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4",
+							style: headerStyle,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "tw-flex tw-w-full tw-flex-col tw-gap-[6px]",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]",
+									children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
+										className: "ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]",
+										children: title
+									}), extra || closable ? /* @__PURE__ */ jsxs("div", {
+										className: "ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]",
+										children: [extra, closable && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)] focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]",
+												"aria-label": "Close",
+												"data-overlay-close": "true",
+												onClick: () => onClose?.(),
+												children: /* @__PURE__ */ jsx(Memo, {
+													size: 20,
+													color: "var(--content-secondary)"
+												})
 											})
-										})
-									})]
+										})]
+									}) : null]
+								}), description ? /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("div", {
+										className: "ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]",
+										children: description
+									})
 								}) : null]
-							}), description ? /* @__PURE__ */ jsx("div", {
-								className: "ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]",
-								children: description
-							}) : null]
-						})
-					}) }),
-					/* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]",
-						style: bodyStyle,
-						children
-					}),
-					footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]" }), /* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]",
-						style: footerStyle,
-						children: footer
-					})] })
-				]
+							})
+						}) }),
+						/* @__PURE__ */ jsx("div", {
+							className: "ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]",
+							style: bodyStyle,
+							children
+						}),
+						footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]" }), /* @__PURE__ */ jsx("div", {
+							className: "ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]",
+							style: footerStyle,
+							children: footer
+						})] })
+					]
+				})
 			})
 		})]
 	});
 	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
 		open,
 		modal: false,
-		onOpenChange: (val) => {
-			if (!val) onClose?.();
-		},
 		children: inline ? open ? drawerNode : null : /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
 			container: portalContainer,
 			children: drawerNode

package/dist/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { useBodyScrollLock } from '../_utils/overlayCoordinator';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?:\n    | string\n    | Element\n    | DocumentFragment\n    | (() => Element | DocumentFragment)\n    | false;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n    getContainer,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<\n    Element | DocumentFragment\n  >();\n  const inline = getContainer === false;\n  useBodyScrollLock(open);\n\n  useLayoutEffect(() => {\n    if (getContainer === undefined || getContainer === false) {\n      setPortalContainer(undefined);\n    } else if (typeof getContainer === 'string') {\n      setPortalContainer(document.querySelector(getContainer) ?? undefined);\n    } else if (typeof getContainer === 'function') {\n      setPortalContainer(getContainer());\n    } else {\n      setPortalContainer(getContainer);\n    }\n  }, [getContainer]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  const drawerNode = (\n    <div\n      className={cn(\n        'ald-drawer-root tw-pointer-events-none tw-inset-0',\n        inline ? 'tw-absolute' : 'tw-fixed',\n        rootClassName,\n      )}\n    >\n      {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n      {mask && (\n        <div\n          data-state={open ? 'open' : 'closed'}\n          className=\"ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n          style={{ zIndex: maskZIndex }}\n          onClick={maskClosable ? () => onClose?.() : undefined}\n        />\n      )}\n      <DialogPrimitive.Content\n        ref={contentRef}\n        className={cn(\n          'ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n          placementStyles[placement],\n          slideAnimationStyles[placement],\n          className,\n        )}\n        style={{\n          zIndex: contentZIndex,\n          ...sizeStyle,\n          ...contentWrapperStyle,\n          ...style,\n        }}\n        onEscapeKeyDown={() => onClose?.()}\n        onInteractOutside={(event) => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <FloatingLayerProvider value={nextLevel}>\n          {(title || description || closable || extra) && (\n            <>\n              {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n              <div\n                className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                style={headerStyle}\n              >\n                <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                  <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                    <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                      {title}\n                    </DialogPrimitive.Title>\n                    {extra || closable ? (\n                      <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                        {extra}\n                        {closable && (\n                          <DialogPrimitive.Close asChild>\n                            <button\n                              type=\"button\"\n                              className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]\"\n                              onClick={() => onClose?.()}\n                            >\n                              <CloseLightLine\n                                size={20}\n                                color=\"var(--content-secondary)\"\n                              />\n                            </button>\n                          </DialogPrimitive.Close>\n                        )}\n                      </div>\n                    ) : null}\n                  </div>\n                  {description ? (\n                    <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                      {description}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            </>\n          )}\n          {/* antd 兼容：保留 ant-drawer-body class */}\n          <div\n            className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n            style={bodyStyle}\n          >\n            {children}\n          </div>\n          {footer && (\n            <>\n              <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n              {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n              <div\n                className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                style={footerStyle}\n              >\n                {footer}\n              </div>\n            </>\n          )}\n        </FloatingLayerProvider>\n      </DialogPrimitive.Content>\n    </div>\n  );\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      {inline ? (\n        open ? (\n          drawerNode\n        ) : null\n      ) : (\n        <DialogPrimitive.Portal container={portalContainer}>\n          {drawerNode}\n        </DialogPrimitive.Portal>\n      )}\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;AA6CA,IAAM,cAAsC;CAC1C,SAAS;CACT,OAAO;CACR;AAED,IAAM,kBAA0C;CAC9C,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,uBAA+C;CACnD,OACE;CACF,MAAM;CACN,KAAK;CACL,QACE;CACH;AAED,SAAS,OAAO,OAAoB;CAClC,MAAM,EACJ,OAAO,OACP,SACA,OACA,aACA,YAAY,SACZ,OACA,QACA,OAAO,WACP,WAAW,MACX,OAAO,MACP,eAAe,MACf,WACA,eACA,OACA,qBACA,WACA,aACA,QACA,aACA,OACA,UACA,SAAS,KACT,iBACE;CAEJ,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,iBAAiB,sBAAsB,UAE3C;CACH,MAAM,SAAS,iBAAiB;AAChC,mBAAkB,KAAK;AAEvB,uBAAsB;AACpB,MAAI,iBAAiB,UAAa,iBAAiB,MACjD,oBAAmB,OAAU;WACpB,OAAO,iBAAiB,SACjC,oBAAmB,SAAS,cAAc,aAAa,IAAI,OAAU;WAC5D,OAAO,iBAAiB,WACjC,oBAAmB,cAAc,CAAC;MAElC,oBAAmB,aAAa;IAEjC,CAAC,aAAa,CAAC;AAGlB,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;AAClC,SAAO,WAAW,WAAW,QAAQ;IACpC,CAAC,KAAK,CAAC;AAGV,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;EAClC,MAAM,YAAY,WAAW;EAC7B,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,EAAE,QAAQ,MAAO;GACrB,MAAM,YAAY,UAAU,iBAC1B,8JACD;AACD,OAAI,UAAU,WAAW,EAAG;GAC5B,MAAM,QAAQ,UAAU;GACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,OAAI,EAAE,UACJ;QACE,SAAS,kBAAkB,SAC3B,CAAC,UAAU,SAAS,SAAS,cAAc,EAC3C;AACA,OAAE,gBAAgB;AAClB,UAAK,OAAO;;cAIZ,SAAS,kBAAkB,QAC3B,CAAC,UAAU,SAAS,SAAS,cAAc,EAC3C;AACA,MAAE,gBAAgB;AAClB,UAAM,OAAO;;;AAInB,WAAS,iBAAiB,WAAW,cAAc;AACnD,eAAa,SAAS,oBAAoB,WAAW,cAAc;IAClE,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,cAAc,UAAU,cAAc;CAC3D,MAAM,SAAS,YAAY,SAAS,YAAY;CAGhD,MAAM,YAAY,eACd;EAAE,OAHiB,SAAS;EAGH,UAAU;EAAS,GAC5C;EAAE,QAHkB,UAAU;EAGH,WAAW;EAAS;CACnD,MAAM,EAAE,YAAY,eAAe,cAAc,iBAAiB,OAAO;CAEzE,MAAM,aACJ,qBAAC,OAAD;EACE,WAAW,GACT,qDACA,SAAS,gBAAgB,YACzB,cACD;YALH,CAQG,QACC,oBAAC,OAAD;GACE,cAAY,OAAO,SAAS;GAC5B,WAAU;GACV,OAAO,EAAE,QAAQ,YAAY;GAC7B,SAAS,qBAAqB,WAAW,GAAG;GAC5C,CAAA,EAEJ,oBAAC,gBAAgB,SAAjB;GACE,KAAK;GACL,WAAW,GACT,oHACA,gBAAgB,YAChB,qBAAqB,YACrB,UACD;GACD,OAAO;IACL,QAAQ;IACR,GAAG;IACH,GAAG;IACH,GAAG;IACJ;GACD,uBAAuB,WAAW;GAClC,oBAAoB,UAAU;AAC5B,QAAI,CAAC,aACH,OAAM,gBAAgB;;aAI1B,qBAAC,uBAAD;IAAuB,OAAO;cAA9B;MACI,SAAS,eAAe,YAAY,UACpC,oBAAA,UAAA,EAAA,UAEE,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;gBAEP,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,oBAAC,gBAAgB,OAAjB;SAAuB,WAAU;mBAC9B;SACqB,CAAA,EACvB,SAAS,WACR,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACG,OACA,YACC,oBAAC,gBAAgB,OAAjB;UAAuB,SAAA;oBACrB,oBAAC,UAAD;WACE,MAAK;WACL,WAAU;WACV,eAAe,WAAW;qBAE1B,oBAAC,MAAD;YACE,MAAM;YACN,OAAM;YACN,CAAA;WACK,CAAA;UACa,CAAA,CAEtB;aACJ,KACA;WACL,cACC,oBAAC,OAAD;QAAK,WAAU;kBACZ;QACG,CAAA,GACJ,KACA;;MACF,CAAA,EACL,CAAA;KAGL,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;MAEN;MACG,CAAA;KACL,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAU,mEAAoE,CAAA,EAGnF,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;gBAEN;MACG,CAAA,CACL,EAAA,CAAA;KAEiB;;GACA,CAAA,CACtB;;AAKR,QACE,oBAAC,gBAAgB,MAAjB;EACQ;EACN,OAAO;EACP,eAAe,QAAQ;AACrB,OAAI,CAAC,IAAK,YAAW;;YAGtB,SACC,OACE,aACE,OAEJ,oBAAC,gBAAgB,QAAjB;GAAwB,WAAW;aAChC;GACsB,CAAA;EAEN,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n  FloatingLayerProvider,\n} from '../_utils/floatingLayer';\nimport {\n  ModalLayerProvider,\n  useModalLayer,\n} from '../_utils/overlayCoordinator';\nimport {\n  focusInitialDialogTarget,\n  markDialogEscapeEvent,\n  useDialogAccessibility,\n} from '../_utils/dialogAccessibility';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  /** Pass through to the drawer content root for automated testing. */\n  'data-testid'?: string;\n  /** Pass through to the drawer content root when no title is rendered. */\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?:\n    | string\n    | Element\n    | DocumentFragment\n    | (() => Element | DocumentFragment)\n    | false;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n    keyboard = true,\n    getContainer,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<\n    Element | DocumentFragment\n  >();\n  const inline = getContainer === false;\n  const drawerLayer = useModalLayer(open, zIndex);\n  const { id: drawerLayerId, maskZIndex, contentZIndex, isTop } = drawerLayer;\n  const nextFloatingLevel =\n    (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / FLOATING_LAYER_STEP + 1;\n\n  useDialogAccessibility({\n    open,\n    isTop,\n    keyboard,\n    containerRef: contentRef,\n    onEscape: (event) => onClose?.(event as unknown as React.KeyboardEvent),\n  });\n\n  useLayoutEffect(() => {\n    if (getContainer === undefined || getContainer === false) {\n      setPortalContainer(undefined);\n    } else if (typeof getContainer === 'string') {\n      setPortalContainer(document.querySelector(getContainer) ?? undefined);\n    } else if (typeof getContainer === 'function') {\n      setPortalContainer(getContainer());\n    } else {\n      setPortalContainer(getContainer);\n    }\n  }, [getContainer]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !isTop || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [isTop, open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const drawerNode = (\n    <div\n      className={cn(\n        'ald-drawer-root tw-pointer-events-none tw-inset-0',\n        inline ? 'tw-absolute' : 'tw-fixed',\n        rootClassName,\n      )}\n      style={{ zIndex: maskZIndex }}\n    >\n      {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n      {mask && isTop && (\n        <div\n          data-state={open ? 'open' : 'closed'}\n          className=\"ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-mask)] data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n          style={{ zIndex: maskZIndex }}\n          onClick={maskClosable ? () => onClose?.() : undefined}\n        />\n      )}\n      <DialogPrimitive.Content\n        ref={contentRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-modal={isTop || undefined}\n        aria-label={ariaLabel}\n        {...(description ? {} : { 'aria-describedby': undefined })}\n        {...(!isTop ? { inert: '' } : {})}\n        aria-hidden={!isTop || undefined}\n        className={cn(\n          'ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-xl)]',\n          placementStyles[placement],\n          slideAnimationStyles[placement],\n          className,\n        )}\n        style={{\n          zIndex: contentZIndex,\n          ...sizeStyle,\n          ...contentWrapperStyle,\n          ...style,\n        }}\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n          requestAnimationFrame(() => {\n            const drawer = contentRef.current;\n            if (drawer) focusInitialDialogTarget(drawer);\n          });\n        }}\n        onEscapeKeyDown={(event) => {\n          if (!event.defaultPrevented) markDialogEscapeEvent(event);\n          event.preventDefault();\n        }}\n        onInteractOutside={(event) => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <ModalLayerProvider id={drawerLayerId}>\n          <FloatingLayerProvider value={nextFloatingLevel}>\n            {!title && (\n              <DialogPrimitive.Title className=\"tw-sr-only\">\n                {ariaLabel || 'Drawer'}\n              </DialogPrimitive.Title>\n            )}\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)] focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]\"\n                                aria-label=\"Close\"\n                                data-overlay-close=\"true\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <DialogPrimitive.Description asChild>\n                        <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                          {description}\n                        </div>\n                      </DialogPrimitive.Description>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </ModalLayerProvider>\n      </DialogPrimitive.Content>\n    </div>\n  );\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root open={open} modal={false}>\n      {inline ? (\n        open ? (\n          drawerNode\n        ) : null\n      ) : (\n        <DialogPrimitive.Portal container={portalContainer}>\n          {drawerNode}\n        </DialogPrimitive.Portal>\n      )}\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;AA0DA,IAAM,cAAsC;CAC1C,SAAS;CACT,OAAO;CACR;AAED,IAAM,kBAA0C;CAC9C,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,uBAA+C;CACnD,OACE;CACF,MAAM;CACN,KAAK;CACL,QACE;CACH;AAED,SAAS,OAAO,OAAoB;CAClC,MAAM,EACJ,OAAO,OACP,SACA,OACA,aACA,YAAY,SACZ,OACA,QACA,OAAO,WACP,WAAW,MACX,OAAO,MACP,eAAe,MACf,WACA,eACA,eAAe,YACf,cAAc,WACd,OACA,qBACA,WACA,aACA,QACA,aACA,OACA,UACA,SAAS,KACT,WAAW,MACX,iBACE;CAEJ,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,iBAAiB,sBAAsB,UAE3C;CACH,MAAM,SAAS,iBAAiB;CAEhC,MAAM,EAAE,IAAI,eAAe,YAAY,eAAe,UADlC,cAAc,MAAM,OAAO;CAE/C,MAAM,qBACH,aAAa,+BAAA,KAAqD;AAErE,wBAAuB;EACrB;EACA;EACA;EACA,cAAc;EACd,WAAW,UAAU,UAAU,MAAwC;EACxE,CAAC;AAEF,uBAAsB;AACpB,MAAI,iBAAiB,UAAa,iBAAiB,MACjD,oBAAmB,OAAU;WACpB,OAAO,iBAAiB,SACjC,oBAAmB,SAAS,cAAc,aAAa,IAAI,OAAU;WAC5D,OAAO,iBAAiB,WACjC,oBAAmB,cAAc,CAAC;MAElC,oBAAmB,aAAa;IAEjC,CAAC,aAAa,CAAC;AAGlB,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,WAAW,QAAS;AAC5C,SAAO,WAAW,WAAW,QAAQ;IACpC,CAAC,OAAO,KAAK,CAAC;CAEjB,MAAM,eAAe,cAAc,UAAU,cAAc;CAC3D,MAAM,SAAS,YAAY,SAAS,YAAY;CAGhD,MAAM,YAAY,eACd;EAAE,OAHiB,SAAS;EAGH,UAAU;EAAS,GAC5C;EAAE,QAHkB,UAAU;EAGH,WAAW;EAAS;CACnD,MAAM,aACJ,qBAAC,OAAD;EACE,WAAW,GACT,qDACA,SAAS,gBAAgB,YACzB,cACD;EACD,OAAO,EAAE,QAAQ,YAAY;YAN/B,CASG,QAAQ,SACP,oBAAC,OAAD;GACE,cAAY,OAAO,SAAS;GAC5B,WAAU;GACV,OAAO,EAAE,QAAQ,YAAY;GAC7B,SAAS,qBAAqB,WAAW,GAAG;GAC5C,CAAA,EAEJ,oBAAC,gBAAgB,SAAjB;GACE,KAAK;GACL,UAAU;GACV,MAAK;GACL,eAAa;GACb,cAAY,SAAS;GACrB,cAAY;GACZ,GAAK,cAAc,EAAE,GAAG,EAAE,oBAAoB,QAAW;GACzD,GAAK,CAAC,QAAQ,EAAE,OAAO,IAAI,GAAG,EAAE;GAChC,eAAa,CAAC,SAAS;GACvB,WAAW,GACT,qJACA,gBAAgB,YAChB,qBAAqB,YACrB,UACD;GACD,OAAO;IACL,QAAQ;IACR,GAAG;IACH,GAAG;IACH,GAAG;IACJ;GACD,kBAAkB,UAAU;AAC1B,UAAM,gBAAgB;AACtB,gCAA4B;KAC1B,MAAM,SAAS,WAAW;AAC1B,SAAI,OAAQ,0BAAyB,OAAO;MAC5C;;GAEJ,kBAAkB,UAAU;AAC1B,QAAI,CAAC,MAAM,iBAAkB,uBAAsB,MAAM;AACzD,UAAM,gBAAgB;;GAExB,oBAAoB,UAAU;AAC5B,QAAI,CAAC,aACH,OAAM,gBAAgB;;aAI1B,oBAAC,oBAAD;IAAoB,IAAI;cACtB,qBAAC,uBAAD;KAAuB,OAAO;eAA9B;MACG,CAAC,SACA,oBAAC,gBAAgB,OAAjB;OAAuB,WAAU;iBAC9B,aAAa;OACQ,CAAA;OAExB,SAAS,eAAe,YAAY,UACpC,oBAAA,UAAA,EAAA,UAEE,oBAAC,OAAD;OACE,WAAU;OACV,OAAO;iBAEP,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,oBAAC,gBAAgB,OAAjB;UAAuB,WAAU;oBAC9B;UACqB,CAAA,EACvB,SAAS,WACR,qBAAC,OAAD;UAAK,WAAU;oBAAf,CACG,OACA,YACC,oBAAC,gBAAgB,OAAjB;WAAuB,SAAA;qBACrB,oBAAC,UAAD;YACE,MAAK;YACL,WAAU;YACV,cAAW;YACX,sBAAmB;YACnB,eAAe,WAAW;sBAE1B,oBAAC,MAAD;aACE,MAAM;aACN,OAAM;aACN,CAAA;YACK,CAAA;WACa,CAAA,CAEtB;cACJ,KACA;YACL,cACC,oBAAC,gBAAgB,aAAjB;SAA6B,SAAA;mBAC3B,oBAAC,OAAD;UAAK,WAAU;oBACZ;UACG,CAAA;SACsB,CAAA,GAC5B,KACA;;OACF,CAAA,EACL,CAAA;MAGL,oBAAC,OAAD;OACE,WAAU;OACV,OAAO;OAEN;OACG,CAAA;MACL,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAU,mEAAoE,CAAA,EAGnF,oBAAC,OAAD;OACE,WAAU;OACV,OAAO;iBAEN;OACG,CAAA,CACL,EAAA,CAAA;MAEiB;;IACL,CAAA;GACG,CAAA,CACtB;;AAKR,QACE,oBAAC,gBAAgB,MAAjB;EAA4B;EAAM,OAAO;YACtC,SACC,OACE,aACE,OAEJ,oBAAC,gBAAgB,QAAjB;GAAwB,WAAW;aAChC;GACsB,CAAA;EAEN,CAAA"}

package/dist/Dropdown/index.d.ts

@@ -1,7 +1,7 @@
 import { FloatingFocusManagerProps, OffsetOptions, UseHoverProps } from '@floating-ui/react';
 import { default as React } from 'react';
 import { MenuProps } from '../Menu';
-export type ActionType = 'hover' | 'click';
+export type ActionType = 'hover' | 'click' | 'contextMenu';
 export type PlacementType = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 export interface IDropdownProps {
     children: React.ReactNode;