@aloudata/aloudata-design 3.0.27 → 3.1.1

package/dist/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/ColorPicker/index.tsx"],"sourcesContent":["import { cn as cls } from '../lib/utils';\nimport React, { useContext, useEffect, useRef, useState } from 'react';\nimport Dropdown from '../Dropdown';\nimport { FoldDownFill } from '../Icon';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { colors as defaultColors, specialColors } from './constant';\nimport type { ColorPickerProps } from './interface';\nimport InnerColorPicker from './ComplexColorPicker';\nimport './color-picker.css';\n\nexport interface IColorPickerProps {\n  className?: string;\n  value?: string;\n  defaultColor?: string;\n  localStorageKey?: string;\n  onChange?: (color: string) => void;\n  icon?: React.ReactNode;\n  bordered?: boolean;\n  disabled?: boolean;\n  mode?: 'simple' | 'complex';\n  complexModeProps?: ColorPickerProps;\n}\n\nfunction getLocalRecentColors(localStorageKey: string) {\n  if (!window.localStorage) {\n    return [];\n  }\n  const colorStr = localStorage.getItem(localStorageKey);\n  if (!colorStr) {\n    return [];\n  }\n\n  return colorStr.split(',');\n}\n\nfunction setLocalRecentColors(localStorageKey: string, colors: string[]) {\n  if (!window.localStorage) {\n    return;\n  }\n  localStorage.setItem(localStorageKey, colors.join(','));\n}\n\nconst MAX_RECENT_COLORS = 10;\nexport default function ColorPicker({\n  className,\n  value,\n  icon,\n  onChange,\n  defaultColor = defaultColors[0],\n  localStorageKey = 'ald_recent_colors',\n  disabled = false,\n  mode = 'simple',\n  complexModeProps,\n  bordered = true,\n}: IColorPickerProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const [open, setOpen] = useState(false);\n  const [recentColors, setRecentColors] = useState<string[]>([]);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setRecentColors(getLocalRecentColors(localStorageKey));\n  }, [localStorageKey]);\n\n  const onColorSelect = (color: string) => {\n    const newRecentColors = [color, ...recentColors.filter((c) => c !== color)];\n    if (newRecentColors.length > MAX_RECENT_COLORS) {\n      newRecentColors.pop();\n    }\n\n    setRecentColors(newRecentColors);\n    setLocalRecentColors(localStorageKey, newRecentColors);\n    onChange?.(color);\n    setOpen(false);\n  };\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (wrapRef.current?.contains(e.target as Node)) {\n        return setOpen(!open);\n      }\n      if (!overlayRef.current?.contains(e.target as Node)) {\n        return setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, [open]);\n\n  const overlay = (\n    <div\n      className=\"tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-default)] tw-p-[8px_7px]\"\n      ref={overlayRef}\n    >\n      <div className=\"tw-flex tw-items-center tw-text-xs\">\n        <div\n          className={cls(\n            'tw-mr-2 tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n            {\n              'tw-border-[var(--border-neutral-strong)]':\n                defaultColor === value,\n            },\n          )}\n          onClick={() => {\n            if (disabled) return;\n            if (defaultColor === value) return;\n            onColorSelect(defaultColor);\n          }}\n        >\n          <div\n            className=\"tw-size-full\"\n            style={{ backgroundColor: defaultColor }}\n          />\n        </div>\n        {t.ColorPicker.default}\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.standardColor}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]\">\n          {defaultColors.map((color) => {\n            const isSelected = color === value;\n            return (\n              <div\n                key={color}\n                className={cls(\n                  'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n                  {\n                    'tw-border-[var(--border-neutral-strong)]': isSelected,\n                  },\n                )}\n                onClick={() => {\n                  if (color === value) return;\n                  onColorSelect(color);\n                }}\n                style={{\n                  borderColor: isSelected\n                    ? 'var(--border-neutral-strong)'\n                    : specialColors.includes(color)\n                    ? 'var(--border-neutral-subtle)'\n                    : color,\n                }}\n              >\n                <div\n                  className={cls('tw-h-full tw-w-full', {\n                    'tw-m-px tw-h-[17px] tw-w-[17px]': isSelected,\n                  })}\n                  style={{ backgroundColor: color }}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.recentlyUsed}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]\">\n          {recentColors.map((color) => {\n            const isSelected = color === value;\n            return (\n              <div\n                key={color}\n                className={cls(\n                  'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n                  {\n                    'tw-border-[var(--border-neutral-strong)]': isSelected,\n                  },\n                )}\n                onClick={() => {\n                  if (color === value) return;\n                  onColorSelect(color);\n                }}\n                style={{\n                  borderColor: isSelected\n                    ? 'var(--border-neutral-strong)'\n                    : specialColors.includes(color)\n                    ? 'var(--border-neutral-subtle)'\n                    : color,\n                }}\n              >\n                <div\n                  className={cls('tw-h-full tw-w-full', {\n                    'tw-m-px tw-h-[17px] tw-w-[17px]': isSelected,\n                  })}\n                  style={{ backgroundColor: color }}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n  if (mode === 'simple') {\n    return (\n      <div\n        className={cls(className, 'tw-relative tw-w-14', {\n          'tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default':\n            disabled,\n        })}\n        ref={wrapRef}\n      >\n        <Dropdown\n          trigger={'click'}\n          open={open}\n          disabled={disabled}\n          placement={'bottom-start'}\n          overlayClassName={'ald-color-picker-overlay-wrapper'}\n          dropdownRender={() => {\n            return overlay;\n          }}\n        >\n          <div\n            className={cls(\n              'ald-color-picker-wrapper',\n              'tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out',\n              {\n                'tw-border-[var(--border-brand-subtle)]':\n                  open && bordered !== false,\n                'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]':\n                  disabled,\n                'tw-border-[var(--action-ghost-normal)]': bordered === false,\n                'hover:tw-border-[var(--border-brand-subtle)]':\n                  !disabled && bordered !== false,\n                'hover:tw-border-[var(--action-ghost-normal)]':\n                  bordered === false,\n              },\n            )}\n            onClick={(e) => {\n              if (disabled) {\n                e.stopPropagation();\n              }\n            }}\n          >\n            {icon ? (\n              <div className=\"tw-relative -tw-top-px\">\n                <div className=\"tw-mb-px\">{icon}</div>\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            ) : (\n              <div className=\"tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]\">\n                A\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            )}\n            <FoldDownFill size={14} color={'var(--content-secondary)'} />\n          </div>\n        </Dropdown>\n      </div>\n    );\n  }\n  if (mode === 'complex') {\n    return <InnerColorPicker {...complexModeProps} />;\n  }\n\n  return null;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ColorPicker/index.tsx"],"sourcesContent":["import { cn as cls } from '../lib/utils';\nimport React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport Dropdown from '../Dropdown';\nimport { FoldDownFill } from '../Icon';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { colors as defaultColors, specialColors } from './constant';\nimport type { ColorPickerProps } from './interface';\nimport InnerColorPicker from './ComplexColorPicker';\nimport './color-picker.css';\n\nexport interface IColorPickerProps {\n  className?: string;\n  value?: string;\n  defaultColor?: string;\n  localStorageKey?: string;\n  onChange?: (color: string) => void;\n  icon?: React.ReactNode;\n  bordered?: boolean;\n  disabled?: boolean;\n  mode?: 'simple' | 'complex';\n  complexModeProps?: ColorPickerProps;\n}\n\nfunction getLocalRecentColors(localStorageKey: string) {\n  if (!window.localStorage) {\n    return [];\n  }\n  const colorStr = localStorage.getItem(localStorageKey);\n  if (!colorStr) {\n    return [];\n  }\n\n  return colorStr.split(',');\n}\n\nfunction setLocalRecentColors(localStorageKey: string, colors: string[]) {\n  if (!window.localStorage) {\n    return;\n  }\n  localStorage.setItem(localStorageKey, colors.join(','));\n}\n\nconst MAX_RECENT_COLORS = 10;\nexport default function ColorPicker({\n  className,\n  value,\n  icon,\n  onChange,\n  defaultColor = defaultColors[0],\n  localStorageKey = 'ald_recent_colors',\n  disabled = false,\n  mode = 'simple',\n  complexModeProps,\n  bordered = true,\n}: IColorPickerProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const [open, setOpen] = useState(false);\n  const [recentColors, setRecentColors] = useState<string[]>([]);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const swatchRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n  const triggerId = `ald-color-picker-trigger-${useId().replace(/:/g, '')}`;\n  const popupId = `ald-color-picker-popup-${useId().replace(/:/g, '')}`;\n  const swatchOrder = Array.from(\n    new Set([defaultColor, ...defaultColors, ...recentColors]),\n  );\n\n  useEffect(() => {\n    setRecentColors(getLocalRecentColors(localStorageKey));\n  }, [localStorageKey]);\n\n  const onColorSelect = (color: string) => {\n    const newRecentColors = [color, ...recentColors.filter((c) => c !== color)];\n    if (newRecentColors.length > MAX_RECENT_COLORS) {\n      newRecentColors.pop();\n    }\n\n    setRecentColors(newRecentColors);\n    setLocalRecentColors(localStorageKey, newRecentColors);\n    onChange?.(color);\n    setOpen(false);\n    window.setTimeout(() => triggerRef.current?.focus(), 0);\n  };\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (\n        !wrapRef.current?.contains(e.target as Node) &&\n        !overlayRef.current?.contains(e.target as Node)\n      ) {\n        return setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const selectedIndex = Math.max(\n      0,\n      swatchOrder.indexOf(value ?? defaultColor),\n    );\n    window.setTimeout(() => {\n      swatchRefs.current[swatchOrder[selectedIndex]]?.focus();\n    }, 0);\n  }, [defaultColor, open, swatchOrder, value]);\n\n  useEffect(() => {\n    triggerRef.current?.setAttribute('aria-expanded', String(open));\n    triggerRef.current?.setAttribute('aria-controls', popupId);\n  }, [open, popupId]);\n\n  const renderSwatch = (color: string, label: string) => {\n    const selected = color === value;\n    const index = swatchOrder.indexOf(color);\n    const selectedIndex = Math.max(\n      0,\n      swatchOrder.indexOf(value ?? defaultColor),\n    );\n    return (\n      <button\n        type=\"button\"\n        key={`${label}-${color}`}\n        id={`${popupId}-swatch-${encodeURIComponent(color)}`}\n        ref={(node) => {\n          swatchRefs.current[color] = node;\n        }}\n        role=\"radio\"\n        aria-label={label}\n        aria-checked={selected}\n        tabIndex={index === selectedIndex ? 0 : -1}\n        disabled={disabled}\n        className={cls(\n          'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)] tw-bg-transparent tw-p-0',\n          {\n            'tw-border-[var(--border-neutral-strong)]': selected,\n          },\n        )}\n        onClick={() => {\n          if (!selected) onColorSelect(color);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Escape') {\n            event.preventDefault();\n            setOpen(false);\n            triggerRef.current?.focus();\n            return;\n          }\n          if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[(index + 1) % swatchOrder.length]\n            ]?.focus();\n            return;\n          }\n          if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[(index - 1 + swatchOrder.length) % swatchOrder.length]\n            ]?.focus();\n            return;\n          }\n          if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[event.key === 'Home' ? 0 : swatchOrder.length - 1]\n            ]?.focus();\n          }\n        }}\n        style={{\n          borderColor: selected\n            ? 'var(--border-neutral-strong)'\n            : specialColors.includes(color)\n            ? 'var(--border-neutral-subtle)'\n            : color,\n        }}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cls('tw-block tw-h-full tw-w-full', {\n            'tw-m-px tw-h-[17px] tw-w-[17px]': selected,\n          })}\n          style={{ backgroundColor: color }}\n        />\n      </button>\n    );\n  };\n\n  const overlay = (\n    <div\n      id={popupId}\n      role=\"radiogroup\"\n      aria-label={t.ColorPicker.standardColor}\n      className=\"tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-default)] tw-p-[8px_7px]\"\n      ref={overlayRef}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          setOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}\n    >\n      <div className=\"tw-flex tw-items-center tw-text-xs\">\n        <div className=\"tw-mr-2\">\n          {renderSwatch(defaultColor, t.ColorPicker.default)}\n        </div>\n        {t.ColorPicker.default}\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.standardColor}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]\">\n          {defaultColors.map((color) => renderSwatch(color, color))}\n        </div>\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.recentlyUsed}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]\">\n          {recentColors.map((color) => renderSwatch(color, color))}\n        </div>\n      </div>\n    </div>\n  );\n  if (mode === 'simple') {\n    return (\n      <div\n        className={cls(className, 'tw-relative tw-w-14', {\n          'tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default':\n            disabled,\n        })}\n        ref={wrapRef}\n      >\n        <Dropdown\n          trigger={'click'}\n          open={open}\n          onOpenChange={setOpen}\n          disabled={disabled}\n          placement={'bottom-start'}\n          overlayClassName={'ald-color-picker-overlay-wrapper'}\n          dropdownRender={() => {\n            return overlay;\n          }}\n        >\n          <button\n            type=\"button\"\n            id={triggerId}\n            ref={triggerRef}\n            aria-label={t.ColorPicker.default}\n            aria-controls={popupId}\n            aria-expanded={open}\n            className={cls(\n              'ald-color-picker-wrapper',\n              'tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out',\n              {\n                'tw-border-[var(--border-brand-subtle)]':\n                  open && bordered !== false,\n                'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]':\n                  disabled,\n                'tw-border-[var(--action-ghost-normal)]': bordered === false,\n                'hover:tw-border-[var(--border-brand-subtle)]':\n                  !disabled && bordered !== false,\n                'hover:tw-border-[var(--action-ghost-normal)]':\n                  bordered === false,\n              },\n            )}\n            onClick={(e) => {\n              if (disabled) {\n                e.stopPropagation();\n                return;\n              }\n              setOpen((current) => !current);\n            }}\n            onKeyDown={(event) => {\n              if (disabled) return;\n              if (\n                event.key === 'ArrowDown' ||\n                event.key === 'ArrowUp' ||\n                event.key === 'Enter' ||\n                event.key === ' '\n              ) {\n                event.preventDefault();\n                setOpen(true);\n              }\n            }}\n          >\n            {icon ? (\n              <div className=\"tw-relative -tw-top-px\">\n                <div className=\"tw-mb-px\">{icon}</div>\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            ) : (\n              <div className=\"tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]\">\n                A\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            )}\n            <FoldDownFill size={14} color={'var(--content-secondary)'} />\n          </button>\n        </Dropdown>\n      </div>\n    );\n  }\n  if (mode === 'complex') {\n    return <InnerColorPicker {...complexModeProps} />;\n  }\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/DataPreviewTable/components/Body/Cell.d.ts

@@ -3,6 +3,8 @@ import { TValue } from '../../interface';
 interface ICell {
     value: TValue;
     style?: React.CSSProperties;
+    role?: 'cell';
+    'aria-labelledby'?: string;
 }
 export default function Cell(props: ICell): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/DataPreviewTable/components/Body/Cell.js

@@ -4,18 +4,25 @@ import { jsx } from "react/jsx-runtime";
 //#region src/DataPreviewTable/components/Body/Cell.tsx
 var bodyCellClassName = "ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]";
 function Cell(props) {
-	const { style, value } = props;
+	const { style, value, role, "aria-labelledby": labelledBy } = props;
+	const cellProps = {
+		role,
+		"aria-labelledby": labelledBy
+	};
 	if (typeof value === "string") return /* @__PURE__ */ jsx("div", {
+		...cellProps,
 		style,
 		className: bodyCellClassName,
 		children: value
 	});
 	if (typeof value === "number" || typeof value === "boolean") return /* @__PURE__ */ jsx("div", {
+		...cellProps,
 		style,
 		className: bodyCellClassName,
 		children: JSON.stringify(value)
 	});
 	if (typeof value === "object" && value === null) return /* @__PURE__ */ jsx("div", {
+		...cellProps,
 		style: {
 			fontStyle: "italic",
 			color: "var(--content-secondary)",
@@ -25,6 +32,7 @@ function Cell(props) {
 		children: "null"
 	});
 	return /* @__PURE__ */ jsx("div", {
+		...cellProps,
 		style,
 		className: bodyCellClassName,
 		children: value

package/dist/DataPreviewTable/components/Body/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/Cell.tsx"],"sourcesContent":["interface ICell {\n  value: TValue;\n  style?: React.CSSProperties;\n}\nimport { cn } from '../../../lib/utils';\nimport React from 'react';\nimport { TValue } from '../../interface';\n\nconst bodyCellClassName =\n  'ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]';\n\nexport default function Cell(props: ICell) {\n  const { style, value } = props;\n  if (typeof value === 'string') {\n    return (\n      <div style={style} className={bodyCellClassName}>\n        {value}\n      </div>\n    );\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return (\n      <div style={style} className={bodyCellClassName}>\n        {JSON.stringify(value)}\n      </div>\n    );\n  }\n  if (typeof value === 'object' && value === null) {\n    return (\n      <div\n        style={{\n          fontStyle: 'italic',\n          color: 'var(--content-secondary)',\n          ...style,\n        }}\n        className={cn(bodyCellClassName, 'ald-data-preview-body-cell-null')}\n      >\n        null\n      </div>\n    );\n  }\n  return (\n    <div style={style} className={bodyCellClassName}>\n      {value}\n    </div>\n  );\n}\n"],"mappings":";;;;AAQA,IAAM,oBACJ;AAEF,SAAwB,KAAK,OAAc;CACzC,MAAM,EAAE,OAAO,UAAU;AACzB,KAAI,OAAO,UAAU,SACnB,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B;EACG,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B,KAAK,UAAU,MAAM;EAClB,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,UAAU,KACzC,QACE,oBAAC,OAAD;EACE,OAAO;GACL,WAAW;GACX,OAAO;GACP,GAAG;GACJ;EACD,WAAW,GAAG,mBAAmB,kCAAkC;YACpE;EAEK,CAAA;AAGV,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B;EACG,CAAA"}
+{"version":3,"file":"Cell.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/Cell.tsx"],"sourcesContent":["interface ICell {\n  value: TValue;\n  style?: React.CSSProperties;\n  role?: 'cell';\n  'aria-labelledby'?: string;\n}\nimport { cn } from '../../../lib/utils';\nimport React from 'react';\nimport { TValue } from '../../interface';\n\nconst bodyCellClassName =\n  'ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]';\n\nexport default function Cell(props: ICell) {\n  const { style, value, role, 'aria-labelledby': labelledBy } = props;\n  const cellProps = { role, 'aria-labelledby': labelledBy };\n  if (typeof value === 'string') {\n    return (\n      <div {...cellProps} style={style} className={bodyCellClassName}>\n        {value}\n      </div>\n    );\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return (\n      <div {...cellProps} style={style} className={bodyCellClassName}>\n        {JSON.stringify(value)}\n      </div>\n    );\n  }\n  if (typeof value === 'object' && value === null) {\n    return (\n      <div\n        {...cellProps}\n        style={{\n          fontStyle: 'italic',\n          color: 'var(--content-secondary)',\n          ...style,\n        }}\n        className={cn(bodyCellClassName, 'ald-data-preview-body-cell-null')}\n      >\n        null\n      </div>\n    );\n  }\n  return (\n    <div {...cellProps} style={style} className={bodyCellClassName}>\n      {value}\n    </div>\n  );\n}\n"],"mappings":";;;;AAUA,IAAM,oBACJ;AAEF,SAAwB,KAAK,OAAc;CACzC,MAAM,EAAE,OAAO,OAAO,MAAM,mBAAmB,eAAe;CAC9D,MAAM,YAAY;EAAE;EAAM,mBAAmB;EAAY;AACzD,KAAI,OAAO,UAAU,SACnB,QACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAO,WAAW;YAC1C;EACG,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,QACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAO,WAAW;YAC1C,KAAK,UAAU,MAAM;EAClB,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,UAAU,KACzC,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,OAAO;GACL,WAAW;GACX,OAAO;GACP,GAAG;GACJ;EACD,WAAW,GAAG,mBAAmB,kCAAkC;YACpE;EAEK,CAAA;AAGV,QACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAO,WAAW;YAC1C;EACG,CAAA"}

package/dist/DataPreviewTable/components/Body/index.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { IColumnLayout, PreviewColumn, TValue } from '../../interface';
 interface IHeader {
+    tableId: string;
     columns: PreviewColumn[];
     columnLayout: IColumnLayout;
     columnRange: [number, number];

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

@@ -1,35 +1,47 @@
 import { cn } from "../../../lib/utils.js";
 import Cell from "./Cell.js";
-import React, { memo } from "react";
+import { createElement, memo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/DataPreviewTable/components/Body/index.tsx
 function Body(props) {
-	const { columns, columnLayout, datasource, columnRange: [startIndex, endIndex], rowRange: [startRowIndex, endRowIndex], headerHeight } = props;
+	const { tableId, columns, columnLayout, datasource, columnRange: [startIndex, endIndex], rowRange: [startRowIndex, endRowIndex], headerHeight } = props;
 	return /* @__PURE__ */ jsx("div", {
+		role: "rowgroup",
 		className: "ald-data-preview-table-body",
 		children: datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {
 			const currentRowIndex = startRowIndex + rowIndex;
-			return /* @__PURE__ */ jsx(React.Fragment, { children: row.slice(startIndex, endIndex + 1).map((cell, index) => {
-				const columnIndex = startIndex + index;
-				const style = {
-					height: 20,
-					width: columnLayout[columns[columnIndex].id].width,
-					top: currentRowIndex * 20 + headerHeight,
-					left: columnLayout[columns[columnIndex].id].left,
-					position: "absolute",
-					textAlign: columns[columnIndex].align || "left"
-				};
-				const render = columns[columnIndex].render;
-				if (render) return /* @__PURE__ */ jsx("div", {
-					className: cn("ald-data-preview-body-cell ald-data-preview-body-cell-custom", "tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]"),
-					style,
-					children: render(cell)
-				}, columnIndex);
-				return /* @__PURE__ */ jsx(Cell, {
-					style,
-					value: cell
-				}, columnIndex);
-			}) }, currentRowIndex);
+			return /* @__PURE__ */ jsx("div", {
+				role: "row",
+				"aria-rowindex": currentRowIndex + 2,
+				style: { display: "contents" },
+				children: row.slice(startIndex, endIndex + 1).map((cell, index) => {
+					const columnIndex = startIndex + index;
+					const style = {
+						height: 20,
+						width: columnLayout[columns[columnIndex].id].width,
+						top: currentRowIndex * 20 + headerHeight,
+						left: columnLayout[columns[columnIndex].id].left,
+						position: "absolute",
+						textAlign: columns[columnIndex].align || "left"
+					};
+					const render = columns[columnIndex].render;
+					const cellProps = {
+						role: "cell",
+						"aria-labelledby": `${tableId}-column-${encodeURIComponent(columns[columnIndex].id)}`
+					};
+					if (render) return /* @__PURE__ */ createElement("div", {
+						...cellProps,
+						className: cn("ald-data-preview-body-cell ald-data-preview-body-cell-custom", "tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]"),
+						style,
+						key: columnIndex
+					}, render(cell));
+					return /* @__PURE__ */ jsx(Cell, {
+						style,
+						value: cell,
+						...cellProps
+					}, columnIndex);
+				})
+			}, currentRowIndex);
 		})
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/index.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { cn } from '../../../lib/utils';\nimport { CELL_HEIGHT } from '../../constant';\nimport { IColumnLayout, PreviewColumn, TValue } from '../../interface';\nimport Cell from './Cell';\ninterface IHeader {\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  columnRange: [number, number];\n  datasource: TValue[][];\n  rowRange: [number, number];\n  headerHeight: number;\n}\nfunction Body(props: IHeader) {\n  const {\n    columns,\n    columnLayout,\n    datasource,\n    columnRange: [startIndex, endIndex],\n    rowRange: [startRowIndex, endRowIndex],\n    headerHeight,\n  } = props;\n\n  return (\n    <div className=\"ald-data-preview-table-body\">\n      {datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {\n        const currentRowIndex = startRowIndex + rowIndex;\n\n        return (\n          <React.Fragment key={currentRowIndex}>\n            {row.slice(startIndex, endIndex + 1).map((cell, index) => {\n              const columnIndex = startIndex + index;\n              const style: React.CSSProperties = {\n                height: CELL_HEIGHT,\n                width: columnLayout[columns[columnIndex].id].width,\n                top: currentRowIndex * CELL_HEIGHT + headerHeight,\n                left: columnLayout[columns[columnIndex].id].left,\n                position: 'absolute',\n                textAlign: columns[columnIndex].align || 'left',\n              };\n              const render = columns[columnIndex].render;\n              if (render) {\n                return (\n                  <div\n                    className={cn(\n                      'ald-data-preview-body-cell ald-data-preview-body-cell-custom',\n                      'tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]',\n                    )}\n                    style={style}\n                    key={columnIndex}\n                  >\n                    {render(cell)}\n                  </div>\n                );\n              }\n              return <Cell key={columnIndex} style={style} value={cell} />;\n            })}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n}\nexport default memo(Body);\n"],"mappings":";;;;;AAaA,SAAS,KAAK,OAAgB;CAC5B,MAAM,EACJ,SACA,cACA,YACA,aAAa,CAAC,YAAY,WAC1B,UAAU,CAAC,eAAe,cAC1B,iBACE;AAEJ,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,WAAW,MAAM,eAAe,YAAY,CAAC,KAAK,KAAK,aAAa;GACnE,MAAM,kBAAkB,gBAAgB;AAExC,UACE,oBAAC,MAAM,UAAP,EAAA,UACG,IAAI,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,MAAM,UAAU;IACxD,MAAM,cAAc,aAAa;IACjC,MAAM,QAA6B;KACjC,QAAA;KACA,OAAO,aAAa,QAAQ,aAAa,IAAI;KAC7C,KAAK,kBAAA,KAAgC;KACrC,MAAM,aAAa,QAAQ,aAAa,IAAI;KAC5C,UAAU;KACV,WAAW,QAAQ,aAAa,SAAS;KAC1C;IACD,MAAM,SAAS,QAAQ,aAAa;AACpC,QAAI,OACF,QACE,oBAAC,OAAD;KACE,WAAW,GACT,gEACA,kMACD;KACM;eAGN,OAAO,KAAK;KACT,EAHC,YAGD;AAGV,WAAO,oBAAC,MAAD;KAA+B;KAAO,OAAO;KAAQ,EAA1C,YAA0C;KAC5D,EACa,EA5BI,gBA4BJ;IAEnB;EACE,CAAA;;AAGV,IAAA,eAAe,KAAK,KAAK"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/index.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { cn } from '../../../lib/utils';\nimport { CELL_HEIGHT } from '../../constant';\nimport { IColumnLayout, PreviewColumn, TValue } from '../../interface';\nimport Cell from './Cell';\ninterface IHeader {\n  tableId: string;\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  columnRange: [number, number];\n  datasource: TValue[][];\n  rowRange: [number, number];\n  headerHeight: number;\n}\nfunction Body(props: IHeader) {\n  const {\n    tableId,\n    columns,\n    columnLayout,\n    datasource,\n    columnRange: [startIndex, endIndex],\n    rowRange: [startRowIndex, endRowIndex],\n    headerHeight,\n  } = props;\n\n  return (\n    <div role=\"rowgroup\" className=\"ald-data-preview-table-body\">\n      {datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {\n        const currentRowIndex = startRowIndex + rowIndex;\n\n        return (\n          <div\n            role=\"row\"\n            aria-rowindex={currentRowIndex + 2}\n            key={currentRowIndex}\n            style={{ display: 'contents' }}\n          >\n            {row.slice(startIndex, endIndex + 1).map((cell, index) => {\n              const columnIndex = startIndex + index;\n              const style: React.CSSProperties = {\n                height: CELL_HEIGHT,\n                width: columnLayout[columns[columnIndex].id].width,\n                top: currentRowIndex * CELL_HEIGHT + headerHeight,\n                left: columnLayout[columns[columnIndex].id].left,\n                position: 'absolute',\n                textAlign: columns[columnIndex].align || 'left',\n              };\n              const render = columns[columnIndex].render;\n              const cellProps = {\n                role: 'cell' as const,\n                'aria-labelledby': `${tableId}-column-${encodeURIComponent(\n                  columns[columnIndex].id,\n                )}`,\n              };\n              if (render) {\n                return (\n                  <div\n                    {...cellProps}\n                    className={cn(\n                      'ald-data-preview-body-cell ald-data-preview-body-cell-custom',\n                      'tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]',\n                    )}\n                    style={style}\n                    key={columnIndex}\n                  >\n                    {render(cell)}\n                  </div>\n                );\n              }\n              return (\n                <Cell\n                  key={columnIndex}\n                  style={style}\n                  value={cell}\n                  {...cellProps}\n                />\n              );\n            })}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\nexport default memo(Body);\n"],"mappings":";;;;;AAcA,SAAS,KAAK,OAAgB;CAC5B,MAAM,EACJ,SACA,SACA,cACA,YACA,aAAa,CAAC,YAAY,WAC1B,UAAU,CAAC,eAAe,cAC1B,iBACE;AAEJ,QACE,oBAAC,OAAD;EAAK,MAAK;EAAW,WAAU;YAC5B,WAAW,MAAM,eAAe,YAAY,CAAC,KAAK,KAAK,aAAa;GACnE,MAAM,kBAAkB,gBAAgB;AAExC,UACE,oBAAC,OAAD;IACE,MAAK;IACL,iBAAe,kBAAkB;IAEjC,OAAO,EAAE,SAAS,YAAY;cAE7B,IAAI,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,MAAM,UAAU;KACxD,MAAM,cAAc,aAAa;KACjC,MAAM,QAA6B;MACjC,QAAA;MACA,OAAO,aAAa,QAAQ,aAAa,IAAI;MAC7C,KAAK,kBAAA,KAAgC;MACrC,MAAM,aAAa,QAAQ,aAAa,IAAI;MAC5C,UAAU;MACV,WAAW,QAAQ,aAAa,SAAS;MAC1C;KACD,MAAM,SAAS,QAAQ,aAAa;KACpC,MAAM,YAAY;MAChB,MAAM;MACN,mBAAmB,GAAG,QAAQ,UAAU,mBACtC,QAAQ,aAAa,GACtB;MACF;AACD,SAAI,OACF,QACE,8BAAC,OAAD;MACE,GAAI;MACJ,WAAW,GACT,gEACA,kMACD;MACM;MACP,KAAK;MAGD,EADH,OAAO,KAAK,CACT;AAGV,YACE,oBAAC,MAAD;MAES;MACP,OAAO;MACP,GAAI;MACJ,EAJK,YAIL;MAEJ;IACE,EA5CC,gBA4CD;IAER;EACE,CAAA;;AAGV,IAAA,eAAe,KAAK,KAAK"}

package/dist/DataPreviewTable/components/Header/index.d.ts

@@ -1,5 +1,6 @@
 import { IColumnLayout, PreviewColumn } from '../../interface';
 interface IHeader {
+    tableId: string;
     contentWidth: number;
     columns: PreviewColumn[];
     columnLayout: IColumnLayout;

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;