@aloudata/aloudata-design 3.1.0 → 3.1.2

package/dist/Checkbox/index.js

@@ -1,11 +1,12 @@
 import { cn } from "../lib/utils.js";
 import DisabledContext from "../ConfigProvider/DisabledContext.js";
+import { getSemanticOwnerAriaProps } from "../_utils/formControlSemanticOwner.js";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Checkbox/index.tsx
 var CheckboxGroupContext = createContext(null);
 function Checkbox(props) {
-	const { className, disabled: customDisabled, alert, bold, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, style, "data-testid": dataTestid, "aria-label": ariaLabel } = props;
+	const { className, disabled: customDisabled, alert, bold, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, required, style, "data-testid": dataTestid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-disabled": ariaDisabled } = props;
 	const disabled = useContext(DisabledContext);
 	const group = useContext(CheckboxGroupContext);
 	const isGroupCheckbox = group !== null && value !== void 0;
@@ -58,6 +59,16 @@ function Checkbox(props) {
 				className: "tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default",
 				checked: !!checked,
 				disabled: mergedDisabled,
+				required,
+				"aria-checked": indeterminate ? "mixed" : void 0,
+				...getSemanticOwnerAriaProps({
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					"aria-required": ariaRequired,
+					"aria-disabled": ariaDisabled
+				}),
 				onChange: handleChange,
 				autoFocus,
 				name: group?.name ?? name,
@@ -76,7 +87,7 @@ function Checkbox(props) {
 	});
 }
 function CheckboxGroup(props) {
-	const { className, disabled: customDisabled, size, options, value: controlledValue, defaultValue, onChange, direction, name, children, style } = props;
+	const { className, disabled: customDisabled, size, options, value: controlledValue, defaultValue, onChange, direction, name, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy } = props;
 	const disabled = useContext(DisabledContext);
 	const mergedDisabled = customDisabled ?? disabled;
 	const isControlled = "value" in props;
@@ -106,6 +117,10 @@ function CheckboxGroup(props) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3", direction === "vertical" && "ald-checkbox-group-vertical tw-flex-col", size === "small" && "ald-checkbox-group-small", className),
 		style,
+		role: "group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
 		children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
 			value: {
 				value,

package/dist/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { cn } from '../lib/utils';\nimport {\n  CheckboxChangeEvent,\n  CheckboxValueType,\n  ICheckboxGroupProps,\n  ICheckboxProps,\n} from './type';\n\nexport type { CheckboxChangeEvent, CheckboxValueType };\nexport type { CheckboxOptionType } from './type';\nexport type { ICheckboxProps, ICheckboxGroupProps };\n\ninterface CheckboxGroupContextValue {\n  value: CheckboxValueType[];\n  disabled?: boolean;\n  name?: string;\n  toggleOption: (value: CheckboxValueType, checked: boolean) => void;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(\n  null,\n);\n\nfunction Checkbox(props: ICheckboxProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    alert,\n    bold,\n    size,\n    checked: controlledChecked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    onClick,\n    autoFocus,\n    children,\n    value,\n    name,\n    style,\n    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const group = useContext(CheckboxGroupContext);\n  const isGroupCheckbox = group !== null && value !== undefined;\n  const mergedDisabled = group?.disabled || customDisabled || disabled;\n\n  const isControlled = isGroupCheckbox || 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n  const checked = isGroupCheckbox\n    ? group.value.includes(value)\n    : isControlled\n    ? controlledChecked\n    : innerChecked;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (mergedDisabled) return;\n    const newChecked = e.target.checked;\n    if (isGroupCheckbox) {\n      group.toggleOption(value, newChecked);\n    } else if (!isControlled) {\n      setInnerChecked(newChecked);\n    }\n    onChange?.({\n      target: { checked: newChecked, value },\n      nativeEvent: e.nativeEvent,\n    });\n  };\n\n  const handleLabelClick = (e: React.MouseEvent) => {\n    if (mergedDisabled) return;\n    if (onClick) {\n      // Table row selection uses onClick — prevent label from also toggling input\n      e.preventDefault();\n      e.stopPropagation();\n      onClick(e);\n    }\n  };\n\n  return (\n    <label\n      onClick={handleLabelClick}\n      data-testid={dataTestid}\n      aria-label={ariaLabel}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-leading-5',\n        mergedDisabled && 'tw-cursor-default',\n        size === 'small' && 'ald-checkbox-small',\n        !mergedDisabled &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--border-brand-strong)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-hover)]',\n        className,\n      )}\n      style={style}\n    >\n      <span\n        className={cn(\n          'ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-colors tw-duration-200',\n          // The native input owns focus and its visual control owns the\n          // Focus State Layer. Checked, indeterminate, and alert styling\n          // remain independent control states.\n          !mergedDisabled && [\n            'has-[input:focus-visible]:tw-shadow-[0_0_0_2px_var(--focus-ring)]',\n            'forced-colors:has-[input:focus-visible]:tw-outline',\n            'forced-colors:has-[input:focus-visible]:tw-outline-2',\n            'forced-colors:has-[input:focus-visible]:tw-outline-offset-2',\n            'forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]',\n          ],\n          checked && 'ald-checkbox-checked',\n          checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n          !checked &&\n            !indeterminate &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            !alert &&\n            'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            alert &&\n            'tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]',\n          indeterminate && !checked && 'ald-checkbox-indeterminate',\n          indeterminate &&\n            !checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          indeterminate &&\n            !checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n          checked={!!checked}\n          disabled={mergedDisabled}\n          onChange={handleChange}\n          autoFocus={autoFocus}\n          name={group?.name ?? name}\n          value={value as string}\n        />\n        {(checked || (indeterminate && !checked)) && (\n          <span\n            className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n            style={{\n              backgroundImage:\n                indeterminate && !checked\n                  ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n                  : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n              backgroundSize:\n                indeterminate && !checked ? '10px 2px' : '10px 8px',\n            }}\n          />\n        )}\n      </span>\n      {children && (\n        <span\n          className={cn(\n            'ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n            'tw-text-typography-label',\n            bold && 'tw-font-medium',\n            mergedDisabled &&\n              'tw-cursor-default tw-text-[var(--content-disabled)]',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    options,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    direction,\n    name,\n    children,\n    style,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n    defaultValue ?? [],\n  );\n  const value = isControlled ? controlledValue ?? [] : innerValue;\n\n  const handleGroupChange = (\n    itemValue: CheckboxValueType,\n    itemChecked: boolean,\n  ) => {\n    const newValue = itemChecked\n      ? [...value, itemValue]\n      : value.filter((v) => v !== itemValue);\n    if (!isControlled) {\n      setInnerValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const renderOptions = () => {\n    if (!options) return children;\n    return options.map((opt) => {\n      const optObj =\n        typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n      return (\n        <Checkbox\n          key={String(optObj.value)}\n          value={optObj.value}\n          disabled={optObj.disabled}\n          size={size}\n          onChange={optObj.onChange}\n        >\n          {optObj.label}\n        </Checkbox>\n      );\n    });\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n        direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n        size === 'small' && 'ald-checkbox-group-small',\n        className,\n      )}\n      style={style}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          value,\n          disabled: mergedDisabled,\n          name,\n          toggleOption: handleGroupChange,\n        }}\n      >\n        {renderOptions()}\n      </CheckboxGroupContext.Provider>\n    </div>\n  );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { getSemanticOwnerAriaProps } from '../_utils/formControlSemanticOwner';\nimport { cn } from '../lib/utils';\nimport {\n  CheckboxChangeEvent,\n  CheckboxValueType,\n  ICheckboxGroupProps,\n  ICheckboxProps,\n} from './type';\n\nexport type { CheckboxChangeEvent, CheckboxValueType };\nexport type { CheckboxOptionType } from './type';\nexport type { ICheckboxProps, ICheckboxGroupProps };\n\ninterface CheckboxGroupContextValue {\n  value: CheckboxValueType[];\n  disabled?: boolean;\n  name?: string;\n  toggleOption: (value: CheckboxValueType, checked: boolean) => void;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(\n  null,\n);\n\nfunction Checkbox(props: ICheckboxProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    alert,\n    bold,\n    size,\n    checked: controlledChecked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    onClick,\n    autoFocus,\n    children,\n    value,\n    name,\n    required,\n    style,\n    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-disabled': ariaDisabled,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const group = useContext(CheckboxGroupContext);\n  const isGroupCheckbox = group !== null && value !== undefined;\n  const mergedDisabled = group?.disabled || customDisabled || disabled;\n\n  const isControlled = isGroupCheckbox || 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n  const checked = isGroupCheckbox\n    ? group.value.includes(value)\n    : isControlled\n    ? controlledChecked\n    : innerChecked;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (mergedDisabled) return;\n    const newChecked = e.target.checked;\n    if (isGroupCheckbox) {\n      group.toggleOption(value, newChecked);\n    } else if (!isControlled) {\n      setInnerChecked(newChecked);\n    }\n    onChange?.({\n      target: { checked: newChecked, value },\n      nativeEvent: e.nativeEvent,\n    });\n  };\n\n  const handleLabelClick = (e: React.MouseEvent) => {\n    if (mergedDisabled) return;\n    if (onClick) {\n      // Table row selection uses onClick — prevent label from also toggling input\n      e.preventDefault();\n      e.stopPropagation();\n      onClick(e);\n    }\n  };\n\n  return (\n    <label\n      onClick={handleLabelClick}\n      data-testid={dataTestid}\n      aria-label={ariaLabel}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-leading-5',\n        mergedDisabled && 'tw-cursor-default',\n        size === 'small' && 'ald-checkbox-small',\n        !mergedDisabled &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--border-brand-strong)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-hover)]',\n        className,\n      )}\n      style={style}\n    >\n      <span\n        className={cn(\n          'ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-colors tw-duration-200',\n          // The native input owns focus and its visual control owns the\n          // Focus State Layer. Checked, indeterminate, and alert styling\n          // remain independent control states.\n          !mergedDisabled && [\n            'has-[input:focus-visible]:tw-shadow-[0_0_0_2px_var(--focus-ring)]',\n            'forced-colors:has-[input:focus-visible]:tw-outline',\n            'forced-colors:has-[input:focus-visible]:tw-outline-2',\n            'forced-colors:has-[input:focus-visible]:tw-outline-offset-2',\n            'forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]',\n          ],\n          checked && 'ald-checkbox-checked',\n          checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n          !checked &&\n            !indeterminate &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            !alert &&\n            'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            alert &&\n            'tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]',\n          indeterminate && !checked && 'ald-checkbox-indeterminate',\n          indeterminate &&\n            !checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          indeterminate &&\n            !checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n          checked={!!checked}\n          disabled={mergedDisabled}\n          required={required}\n          aria-checked={indeterminate ? 'mixed' : undefined}\n          {...getSemanticOwnerAriaProps({\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-describedby': ariaDescribedBy,\n            'aria-invalid': ariaInvalid,\n            'aria-required': ariaRequired,\n            'aria-disabled': ariaDisabled,\n          })}\n          onChange={handleChange}\n          autoFocus={autoFocus}\n          name={group?.name ?? name}\n          value={value as string}\n        />\n        {(checked || (indeterminate && !checked)) && (\n          <span\n            className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n            style={{\n              backgroundImage:\n                indeterminate && !checked\n                  ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n                  : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n              backgroundSize:\n                indeterminate && !checked ? '10px 2px' : '10px 8px',\n            }}\n          />\n        )}\n      </span>\n      {children && (\n        <span\n          className={cn(\n            'ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n            'tw-text-typography-label',\n            bold && 'tw-font-medium',\n            mergedDisabled &&\n              'tw-cursor-default tw-text-[var(--content-disabled)]',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    options,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    direction,\n    name,\n    children,\n    style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n    defaultValue ?? [],\n  );\n  const value = isControlled ? controlledValue ?? [] : innerValue;\n\n  const handleGroupChange = (\n    itemValue: CheckboxValueType,\n    itemChecked: boolean,\n  ) => {\n    const newValue = itemChecked\n      ? [...value, itemValue]\n      : value.filter((v) => v !== itemValue);\n    if (!isControlled) {\n      setInnerValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const renderOptions = () => {\n    if (!options) return children;\n    return options.map((opt) => {\n      const optObj =\n        typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n      return (\n        <Checkbox\n          key={String(optObj.value)}\n          value={optObj.value}\n          disabled={optObj.disabled}\n          size={size}\n          onChange={optObj.onChange}\n        >\n          {optObj.label}\n        </Checkbox>\n      );\n    });\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n        direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n        size === 'small' && 'ald-checkbox-group-small',\n        className,\n      )}\n      style={style}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          value,\n          disabled: mergedDisabled,\n          name,\n          toggleOption: handleGroupChange,\n        }}\n      >\n        {renderOptions()}\n      </CheckboxGroupContext.Provider>\n    </div>\n  );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/Checkbox/type.d.ts

@@ -35,10 +35,15 @@ export interface ICheckboxProps {
     children?: React.ReactNode;
     value?: CheckboxValueType;
     name?: string;
+    required?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-disabled'?: React.AriaAttributes['aria-disabled'];
     /** 透传到根 label 元素的 data-testid，用于自动化测试定位 */
     'data-testid'?: string;
-    /** 透传到根 label 元素的 aria-label，用于可访问性与自动化测试定位 */
-    'aria-label'?: string;
 }
 export interface ICheckboxGroupProps {
     defaultValue?: Array<CheckboxValueType>;
@@ -52,4 +57,7 @@ export interface ICheckboxGroupProps {
     style?: React.CSSProperties;
     size?: TSize;
     children?: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 }

package/dist/ColorPicker/index.js

@@ -5,7 +5,7 @@ import { LocaleContext, getTranslator } from "../locale/default.js";
 import { colors, specialColors } from "./constant.js";
 /* empty css             */
 import ColorPicker$1 from "./ComplexColorPicker/index.js";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPicker/index.tsx
 function getLocalRecentColors(localStorageKey) {
@@ -26,6 +26,15 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 	const [recentColors, setRecentColors] = useState([]);
 	const overlayRef = useRef(null);
 	const wrapRef = useRef(null);
+	const triggerRef = useRef(null);
+	const swatchRefs = useRef({});
+	const triggerId = `ald-color-picker-trigger-${useId().replace(/:/g, "")}`;
+	const popupId = `ald-color-picker-popup-${useId().replace(/:/g, "")}`;
+	const swatchOrder = Array.from(new Set([
+		defaultColor,
+		...colors,
+		...recentColors
+	]));
 	useEffect(() => {
 		setRecentColors(getLocalRecentColors(localStorageKey));
 	}, [localStorageKey]);
@@ -36,76 +45,115 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 		setLocalRecentColors(localStorageKey, newRecentColors);
 		onChange?.(color);
 		setOpen(false);
+		window.setTimeout(() => triggerRef.current?.focus(), 0);
 	};
 	useEffect(() => {
 		const handleClick = (e) => {
-			if (wrapRef.current?.contains(e.target)) return setOpen(!open);
-			if (!overlayRef.current?.contains(e.target)) return setOpen(false);
+			if (!wrapRef.current?.contains(e.target) && !overlayRef.current?.contains(e.target)) return setOpen(false);
 		};
 		document.addEventListener("click", handleClick);
 		return () => {
 			document.removeEventListener("click", handleClick);
 		};
-	}, [open]);
+	}, []);
+	useEffect(() => {
+		if (!open) return;
+		const selectedIndex = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
+		window.setTimeout(() => {
+			swatchRefs.current[swatchOrder[selectedIndex]]?.focus();
+		}, 0);
+	}, [
+		defaultColor,
+		open,
+		swatchOrder,
+		value
+	]);
+	useEffect(() => {
+		triggerRef.current?.setAttribute("aria-expanded", String(open));
+		triggerRef.current?.setAttribute("aria-controls", popupId);
+	}, [open, popupId]);
+	const renderSwatch = (color, label) => {
+		const selected = color === value;
+		const index = swatchOrder.indexOf(color);
+		const selectedIndex = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			id: `${popupId}-swatch-${encodeURIComponent(color)}`,
+			ref: (node) => {
+				swatchRefs.current[color] = node;
+			},
+			role: "radio",
+			"aria-label": label,
+			"aria-checked": selected,
+			tabIndex: index === selectedIndex ? 0 : -1,
+			disabled,
+			className: cn("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", { "tw-border-[var(--border-neutral-strong)]": selected }),
+			onClick: () => {
+				if (!selected) onColorSelect(color);
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					setOpen(false);
+					triggerRef.current?.focus();
+					return;
+				}
+				if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+					event.preventDefault();
+					swatchRefs.current[swatchOrder[(index + 1) % swatchOrder.length]]?.focus();
+					return;
+				}
+				if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+					event.preventDefault();
+					swatchRefs.current[swatchOrder[(index - 1 + swatchOrder.length) % swatchOrder.length]]?.focus();
+					return;
+				}
+				if (event.key === "Home" || event.key === "End") {
+					event.preventDefault();
+					swatchRefs.current[swatchOrder[event.key === "Home" ? 0 : swatchOrder.length - 1]]?.focus();
+				}
+			},
+			style: { borderColor: selected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("tw-block tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": selected }),
+				style: { backgroundColor: color }
+			})
+		}, `${label}-${color}`);
+	};
 	const overlay = /* @__PURE__ */ jsxs("div", {
+		id: popupId,
+		role: "radiogroup",
+		"aria-label": t.ColorPicker.standardColor,
 		className: "tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-default)] tw-p-[8px_7px]",
 		ref: overlayRef,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setOpen(false);
+				triggerRef.current?.focus();
+			}
+		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw-flex tw-items-center tw-text-xs",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: cn("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)]", { "tw-border-[var(--border-neutral-strong)]": defaultColor === value }),
-					onClick: () => {
-						if (disabled) return;
-						if (defaultColor === value) return;
-						onColorSelect(defaultColor);
-					},
-					children: /* @__PURE__ */ jsx("div", {
-						className: "tw-size-full",
-						style: { backgroundColor: defaultColor }
-					})
+					className: "tw-mr-2",
+					children: renderSwatch(defaultColor, t.ColorPicker.default)
 				}), t.ColorPicker.default]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw-mt-1.5 tw-text-xs",
 				children: [/* @__PURE__ */ jsx("p", { children: t.ColorPicker.standardColor }), /* @__PURE__ */ jsx("div", {
 					className: "tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]",
-					children: colors.map((color) => {
-						const isSelected = color === value;
-						return /* @__PURE__ */ jsx("div", {
-							className: cn("tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]", { "tw-border-[var(--border-neutral-strong)]": isSelected }),
-							onClick: () => {
-								if (color === value) return;
-								onColorSelect(color);
-							},
-							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
-							children: /* @__PURE__ */ jsx("div", {
-								className: cn("tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": isSelected }),
-								style: { backgroundColor: color }
-							})
-						}, color);
-					})
+					children: colors.map((color) => renderSwatch(color, color))
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw-mt-1.5 tw-text-xs",
 				children: [/* @__PURE__ */ jsx("p", { children: t.ColorPicker.recentlyUsed }), /* @__PURE__ */ jsx("div", {
 					className: "tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]",
-					children: recentColors.map((color) => {
-						const isSelected = color === value;
-						return /* @__PURE__ */ jsx("div", {
-							className: cn("tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]", { "tw-border-[var(--border-neutral-strong)]": isSelected }),
-							onClick: () => {
-								if (color === value) return;
-								onColorSelect(color);
-							},
-							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
-							children: /* @__PURE__ */ jsx("div", {
-								className: cn("tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": isSelected }),
-								style: { backgroundColor: color }
-							})
-						}, color);
-					})
+					children: recentColors.map((color) => renderSwatch(color, color))
 				})]
 			})
 		]
@@ -116,13 +164,20 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 		children: /* @__PURE__ */ jsx(Dropdown, {
 			trigger: "click",
 			open,
+			onOpenChange: setOpen,
 			disabled,
 			placement: "bottom-start",
 			overlayClassName: "ald-color-picker-overlay-wrapper",
 			dropdownRender: () => {
 				return overlay;
 			},
-			children: /* @__PURE__ */ jsxs("div", {
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				id: triggerId,
+				ref: triggerRef,
+				"aria-label": t.ColorPicker.default,
+				"aria-controls": popupId,
+				"aria-expanded": open,
 				className: cn("ald-color-picker-wrapper", "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", {
 					"tw-border-[var(--border-brand-subtle)]": open && bordered !== false,
 					"tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]": disabled,
@@ -131,7 +186,18 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 					"hover:tw-border-[var(--action-ghost-normal)]": bordered === false
 				}),
 				onClick: (e) => {
-					if (disabled) e.stopPropagation();
+					if (disabled) {
+						e.stopPropagation();
+						return;
+					}
+					setOpen((current) => !current);
+				},
+				onKeyDown: (event) => {
+					if (disabled) return;
+					if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						setOpen(true);
+					}
 				},
 				children: [icon ? /* @__PURE__ */ jsxs("div", {
 					className: "tw-relative -tw-top-px",

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;