@aloudata/aloudata-design 3.0.20 → 3.0.22

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(--alias-colors-border-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(--alias-colors-border-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(--interaction-border-neutral-normal)] 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(--interaction-border-normal)]':\n                  open && bordered !== false,\n                'tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--global-cool-gray-alpha-50)]':\n                  disabled,\n                'tw-border-transparent': bordered === false,\n                'hover:tw-border-[var(--interaction-border-normal)]':\n                  !disabled && bordered !== false,\n                'hover:tw-border-transparent': 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={{ backgroundColor: value ?? '#4B5563' }}\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={{ backgroundColor: value ?? '#4B5563' }}\n                />\n              </div>\n            )}\n            <FoldDownFill size={14} color={'var(--alias-colors-icon-subtle)'} />\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, 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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"}

package/dist/ColorPicker/util.d.ts

@@ -7,7 +7,7 @@ export declare const getColorAlpha: (color: AggregationColor) => number;
 /** Return the color whose `alpha` is 1 */
 export declare const genAlphaColor: (color: AggregationColor, alpha?: number) => AggregationColor;
 /**
- * Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
+ * Get percent position color from neighboring color stops.
  */
 export declare const getGradientPercentColor: (colors: {
     percent: number;

package/dist/ColorPicker/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","names":[],"sources":["../../src/ColorPicker/util.ts"],"sourcesContent":["import type { ColorGenInput } from '@rc-component/color-picker';\nimport { Color as RcColor } from '@rc-component/color-picker';\n\nimport { AggregationColor } from './color';\nimport type { ColorValueType } from './interface';\n\nexport const generateColor = (\n  color: ColorGenInput<AggregationColor> | Exclude<ColorValueType, null>,\n): AggregationColor => {\n  if (color instanceof AggregationColor) {\n    return color;\n  }\n\n  return new AggregationColor(color);\n};\n\nexport const getRoundNumber = (value: number | string) =>\n  Math.round(Number(value || 0));\n\nexport const getColorAlpha = (color: AggregationColor) =>\n  getRoundNumber(color.toHsb().a * 100);\n\n/** Return the color whose `alpha` is 1 */\nexport const genAlphaColor = (color: AggregationColor, alpha?: number) => {\n  const rgba = color.toRgb();\n\n  // Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0\n  // So if rgb is empty, we should get from hsb\n  if (!rgba.r && !rgba.g && !rgba.b) {\n    const hsba = color.toHsb();\n    hsba.a = alpha || 1;\n\n    return generateColor(hsba);\n  }\n\n  rgba.a = alpha || 1;\n\n  return generateColor(rgba);\n};\n\n/**\n * Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888\n */\nexport const getGradientPercentColor = (\n  colors: { percent: number; color: string }[],\n  percent: number,\n): string => {\n  const filledColors = [\n    {\n      percent: 0,\n      color: colors[0].color,\n    },\n    ...colors,\n    {\n      percent: 100,\n      color: colors[colors.length - 1].color,\n    },\n  ];\n\n  for (let i = 0; i < filledColors.length - 1; i += 1) {\n    const startPtg = filledColors[i].percent;\n    const endPtg = filledColors[i + 1].percent;\n    const startColor = filledColors[i].color;\n    const endColor = filledColors[i + 1].color;\n\n    if (startPtg <= percent && percent <= endPtg) {\n      const dist = endPtg - startPtg;\n      if (dist === 0) {\n        return startColor;\n      }\n\n      const ratio = ((percent - startPtg) / dist) * 100;\n      const startRcColor = new RcColor(startColor);\n      const endRcColor = new RcColor(endColor);\n\n      return startRcColor.mix(endRcColor, ratio).toRgbString();\n    }\n  }\n\n  return '';\n};\n"],"mappings":";;;AAMA,IAAa,iBACX,UACqB;AACrB,KAAI,iBAAiB,iBACnB,QAAO;AAGT,QAAO,IAAI,iBAAiB,MAAM;;AAGpC,IAAa,kBAAkB,UAC7B,KAAK,MAAM,OAAO,SAAS,EAAE,CAAC;AAEhC,IAAa,iBAAiB,UAC5B,eAAe,MAAM,OAAO,CAAC,IAAI,IAAI;;AAGvC,IAAa,iBAAiB,OAAyB,UAAmB;CACxE,MAAM,OAAO,MAAM,OAAO;AAI1B,KAAI,CAAC,KAAK,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;EACjC,MAAM,OAAO,MAAM,OAAO;AAC1B,OAAK,IAAI,SAAS;AAElB,SAAO,cAAc,KAAK;;AAG5B,MAAK,IAAI,SAAS;AAElB,QAAO,cAAc,KAAK"}
+{"version":3,"file":"util.js","names":[],"sources":["../../src/ColorPicker/util.ts"],"sourcesContent":["import type { ColorGenInput } from '@rc-component/color-picker';\nimport { Color as RcColor } from '@rc-component/color-picker';\n\nimport { AggregationColor } from './color';\nimport type { ColorValueType } from './interface';\n\nexport const generateColor = (\n  color: ColorGenInput<AggregationColor> | Exclude<ColorValueType, null>,\n): AggregationColor => {\n  if (color instanceof AggregationColor) {\n    return color;\n  }\n\n  return new AggregationColor(color);\n};\n\nexport const getRoundNumber = (value: number | string) =>\n  Math.round(Number(value || 0));\n\nexport const getColorAlpha = (color: AggregationColor) =>\n  getRoundNumber(color.toHsb().a * 100);\n\n/** Return the color whose `alpha` is 1 */\nexport const genAlphaColor = (color: AggregationColor, alpha?: number) => {\n  const rgba = color.toRgb();\n\n  // Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0\n  // So if rgb is empty, we should get from hsb\n  if (!rgba.r && !rgba.g && !rgba.b) {\n    const hsba = color.toHsb();\n    hsba.a = alpha || 1;\n\n    return generateColor(hsba);\n  }\n\n  rgba.a = alpha || 1;\n\n  return generateColor(rgba);\n};\n\n/**\n * Get percent position color from neighboring color stops.\n */\nexport const getGradientPercentColor = (\n  colors: { percent: number; color: string }[],\n  percent: number,\n): string => {\n  const filledColors = [\n    {\n      percent: 0,\n      color: colors[0].color,\n    },\n    ...colors,\n    {\n      percent: 100,\n      color: colors[colors.length - 1].color,\n    },\n  ];\n\n  for (let i = 0; i < filledColors.length - 1; i += 1) {\n    const startPtg = filledColors[i].percent;\n    const endPtg = filledColors[i + 1].percent;\n    const startColor = filledColors[i].color;\n    const endColor = filledColors[i + 1].color;\n\n    if (startPtg <= percent && percent <= endPtg) {\n      const dist = endPtg - startPtg;\n      if (dist === 0) {\n        return startColor;\n      }\n\n      const ratio = ((percent - startPtg) / dist) * 100;\n      const startRcColor = new RcColor(startColor);\n      const endRcColor = new RcColor(endColor);\n\n      return startRcColor.mix(endRcColor, ratio).toRgbString();\n    }\n  }\n\n  return '';\n};\n"],"mappings":";;;AAMA,IAAa,iBACX,UACqB;AACrB,KAAI,iBAAiB,iBACnB,QAAO;AAGT,QAAO,IAAI,iBAAiB,MAAM;;AAGpC,IAAa,kBAAkB,UAC7B,KAAK,MAAM,OAAO,SAAS,EAAE,CAAC;AAEhC,IAAa,iBAAiB,UAC5B,eAAe,MAAM,OAAO,CAAC,IAAI,IAAI;;AAGvC,IAAa,iBAAiB,OAAyB,UAAmB;CACxE,MAAM,OAAO,MAAM,OAAO;AAI1B,KAAI,CAAC,KAAK,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;EACjC,MAAM,OAAO,MAAM,OAAO;AAC1B,OAAK,IAAI,SAAS;AAElB,SAAO,cAAc,KAAK;;AAG5B,MAAK,IAAI,SAAS;AAElB,QAAO,cAAc,KAAK"}

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

@@ -2,7 +2,7 @@ import { cn } from "../../../lib/utils.js";
 import "react";
 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(--alias-colors-border-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]";
+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;
 	if (typeof value === "string") return /* @__PURE__ */ jsx("div", {
@@ -18,7 +18,7 @@ function Cell(props) {
 	if (typeof value === "object" && value === null) return /* @__PURE__ */ jsx("div", {
 		style: {
 			fontStyle: "italic",
-			color: "var(--alias-colors-text-subtle)",
+			color: "var(--content-secondary)",
 			...style
 		},
 		className: cn(bodyCellClassName, "ald-data-preview-body-cell-null"),

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(--alias-colors-border-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]';\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(--alias-colors-text-subtle)',\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}\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"}

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

@@ -21,7 +21,7 @@ function Body(props) {
 				};
 				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(--alias-colors-border-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]"),
+					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);

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(--alias-colors-border-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]',\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,iNACD;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  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"}

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

@@ -34,7 +34,7 @@ function DragBar(props) {
 			right: dragBarLeft,
 			height: headerHeight
 		},
-		className: cn("ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--semantic-brand-500)]", { "ald-data-preview-header-drag-bar-active tw-bg-[var(--semantic-brand-500)]": show }),
+		className: cn("ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]", { "ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]": show }),
 		children: show ? createPortal(/* @__PURE__ */ jsx(Mask, {
 			onMouseMove: (event) => {
 				if (mouseDownRef.current.down === false) return;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/DragBar/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { memo, useCallback, useRef, useState } from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { COLUMN_MIN_WIDTH } from '../../constant';\nimport Mask from './Mask';\nfunction DragBar(props: {\n  wrapWidth: number;\n  columnId: string;\n  onChange: (columnId: string, width: number) => void;\n  headerHeight: number;\n}) {\n  const { wrapWidth, columnId, onChange, headerHeight } = props;\n  const [show, setShow] = useState(false);\n  const [dragBarLeft, setDragBarLeft] = useState(0);\n  const dragElRef = useRef<HTMLDivElement>(null);\n  const mouseDownRef = useRef({\n    down: false,\n    clientX: 0,\n  });\n  const getBarLeft = useCallback(\n    (currentClientX: number) => {\n      const startClientX = mouseDownRef.current.clientX;\n      const offset = startClientX - currentClientX;\n      if (offset >= wrapWidth - COLUMN_MIN_WIDTH) {\n        return wrapWidth - COLUMN_MIN_WIDTH;\n      } else {\n        return offset;\n      }\n    },\n    [wrapWidth],\n  );\n\n  return (\n    <div\n      ref={dragElRef}\n      onMouseDown={(event) => {\n        mouseDownRef.current = {\n          clientX: event.clientX,\n          down: true,\n        };\n        setShow(true);\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n      }}\n      style={{ right: dragBarLeft, height: headerHeight }}\n      className={cn(\n        'ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--semantic-brand-500)]',\n        {\n          'ald-data-preview-header-drag-bar-active tw-bg-[var(--semantic-brand-500)]':\n            show,\n        },\n      )}\n    >\n      {show\n        ? createPortal(\n            <Mask\n              onMouseMove={(event) => {\n                const mouseDownState = mouseDownRef.current;\n                if (mouseDownState.down === false) return;\n                const currentClientX = event.clientX;\n                flushSync(() => {\n                  setDragBarLeft(getBarLeft(currentClientX));\n                });\n              }}\n              onMouseUp={(event) => {\n                mouseDownRef.current.down = false;\n                setShow(false);\n                const currentClientX = event.clientX;\n                onChange(columnId, wrapWidth - getBarLeft(currentClientX));\n                setDragBarLeft(0);\n              }}\n            ></Mask>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\nexport default memo(DragBar);\n"],"mappings":";;;;;;AAKA,SAAS,QAAQ,OAKd;CACD,MAAM,EAAE,WAAW,UAAU,UAAU,iBAAiB;CACxD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,eAAe,OAAO;EAC1B,MAAM;EACN,SAAS;EACV,CAAC;CACF,MAAM,aAAa,aAChB,mBAA2B;EAE1B,MAAM,SADe,aAAa,QAAQ,UACZ;AAC9B,MAAI,UAAU,YAAA,GACZ,QAAO,YAAA;MAEP,QAAO;IAGX,CAAC,UAAU,CACZ;AAED,QACE,oBAAC,OAAD;EACE,KAAK;EACL,cAAc,UAAU;AACtB,gBAAa,UAAU;IACrB,SAAS,MAAM;IACf,MAAM;IACP;AACD,WAAQ,KAAK;;EAEf,UAAU,MAAM;AACd,KAAE,iBAAiB;;EAErB,OAAO;GAAE,OAAO;GAAa,QAAQ;GAAc;EACnD,WAAW,GACT,2JACA,EACE,6EACE,MACH,CACF;YAEA,OACG,aACE,oBAAC,MAAD;GACE,cAAc,UAAU;AAEtB,QADuB,aAAa,QACjB,SAAS,MAAO;IACnC,MAAM,iBAAiB,MAAM;AAC7B,oBAAgB;AACd,oBAAe,WAAW,eAAe,CAAC;MAC1C;;GAEJ,YAAY,UAAU;AACpB,iBAAa,QAAQ,OAAO;AAC5B,YAAQ,MAAM;IACd,MAAM,iBAAiB,MAAM;AAC7B,aAAS,UAAU,YAAY,WAAW,eAAe,CAAC;AAC1D,mBAAe,EAAE;;GAEb,CAAA,EACR,SAAS,KACV,GACD;EACA,CAAA;;AAGV,IAAA,kBAAe,KAAK,QAAQ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/DragBar/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { memo, useCallback, useRef, useState } from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { COLUMN_MIN_WIDTH } from '../../constant';\nimport Mask from './Mask';\nfunction DragBar(props: {\n  wrapWidth: number;\n  columnId: string;\n  onChange: (columnId: string, width: number) => void;\n  headerHeight: number;\n}) {\n  const { wrapWidth, columnId, onChange, headerHeight } = props;\n  const [show, setShow] = useState(false);\n  const [dragBarLeft, setDragBarLeft] = useState(0);\n  const dragElRef = useRef<HTMLDivElement>(null);\n  const mouseDownRef = useRef({\n    down: false,\n    clientX: 0,\n  });\n  const getBarLeft = useCallback(\n    (currentClientX: number) => {\n      const startClientX = mouseDownRef.current.clientX;\n      const offset = startClientX - currentClientX;\n      if (offset >= wrapWidth - COLUMN_MIN_WIDTH) {\n        return wrapWidth - COLUMN_MIN_WIDTH;\n      } else {\n        return offset;\n      }\n    },\n    [wrapWidth],\n  );\n\n  return (\n    <div\n      ref={dragElRef}\n      onMouseDown={(event) => {\n        mouseDownRef.current = {\n          clientX: event.clientX,\n          down: true,\n        };\n        setShow(true);\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n      }}\n      style={{ right: dragBarLeft, height: headerHeight }}\n      className={cn(\n        'ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]',\n        {\n          'ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]':\n            show,\n        },\n      )}\n    >\n      {show\n        ? createPortal(\n            <Mask\n              onMouseMove={(event) => {\n                const mouseDownState = mouseDownRef.current;\n                if (mouseDownState.down === false) return;\n                const currentClientX = event.clientX;\n                flushSync(() => {\n                  setDragBarLeft(getBarLeft(currentClientX));\n                });\n              }}\n              onMouseUp={(event) => {\n                mouseDownRef.current.down = false;\n                setShow(false);\n                const currentClientX = event.clientX;\n                onChange(columnId, wrapWidth - getBarLeft(currentClientX));\n                setDragBarLeft(0);\n              }}\n            ></Mask>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\nexport default memo(DragBar);\n"],"mappings":";;;;;;AAKA,SAAS,QAAQ,OAKd;CACD,MAAM,EAAE,WAAW,UAAU,UAAU,iBAAiB;CACxD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,eAAe,OAAO;EAC1B,MAAM;EACN,SAAS;EACV,CAAC;CACF,MAAM,aAAa,aAChB,mBAA2B;EAE1B,MAAM,SADe,aAAa,QAAQ,UACZ;AAC9B,MAAI,UAAU,YAAA,GACZ,QAAO,YAAA;MAEP,QAAO;IAGX,CAAC,UAAU,CACZ;AAED,QACE,oBAAC,OAAD;EACE,KAAK;EACL,cAAc,UAAU;AACtB,gBAAa,UAAU;IACrB,SAAS,MAAM;IACf,MAAM;IACP;AACD,WAAQ,KAAK;;EAEf,UAAU,MAAM;AACd,KAAE,iBAAiB;;EAErB,OAAO;GAAE,OAAO;GAAa,QAAQ;GAAc;EACnD,WAAW,GACT,4JACA,EACE,8EACE,MACH,CACF;YAEA,OACG,aACE,oBAAC,MAAD;GACE,cAAc,UAAU;AAEtB,QADuB,aAAa,QACjB,SAAS,MAAO;IACnC,MAAM,iBAAiB,MAAM;AAC7B,oBAAgB;AACd,oBAAe,WAAW,eAAe,CAAC;MAC1C;;GAEJ,YAAY,UAAU;AACpB,iBAAa,QAAQ,OAAO;AAC5B,YAAQ,MAAM;IACd,MAAM,iBAAiB,MAAM;AAC7B,aAAS,UAAU,YAAY,WAAW,eAAe,CAAC;AAC1D,mBAAe,EAAE;;GAEb,CAAA,EACR,SAAS,KACV,GACD;EACA,CAAA;;AAGV,IAAA,kBAAe,KAAK,QAAQ"}

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

@@ -18,12 +18,12 @@ function Header(props) {
 				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(--alias-colors-border-default)]", "tw-bg-[var(--alias-colors-bg-skeleton-subtle)] tw-font-medium tw-text-[var(--alias-colors-text-strong)]"),
+				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(--alias-colors-bg-skeleton-subtle)] tw-p-1 tw-leading-6",
+					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(--alias-colors-icon-subtle)]",
+						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",

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(--alias-colors-border-default)]',\n              'tw-bg-[var(--alias-colors-bg-skeleton-subtle)] tw-font-medium tw-text-[var(--alias-colors-text-strong)]',\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(--alias-colors-bg-skeleton-subtle)] 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(--alias-colors-icon-subtle)]\">\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,gIACA,0GACD;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  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"}

package/dist/DataPreviewTable/index.js

@@ -50,7 +50,7 @@ var DataPreviewTable_default = memo(forwardRef(function(props, ref) {
 			width,
 			height
 		},
-		className: cn(props.className, "ald-data-preview-table tw-relative tw-box-border tw-border tw-border-solid tw-border-[var(--alias-colors-border-default)] tw-text-xs tw-tabular-nums [&_*]:tw-box-border", { "ald-data-preview-table-show-skeleton": dataStatus === "pending" }),
+		className: cn(props.className, "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", { "ald-data-preview-table-show-skeleton": dataStatus === "pending" }),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "ald-data-preview-progress tw-absolute tw-left-0 tw-top-0 tw-z-[3] tw-w-full",
 			children: /* @__PURE__ */ jsx(Progress_default, {

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(--alias-colors-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,4KACA,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 { 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"}

package/dist/Divider/index.js

@@ -11,7 +11,7 @@ var dividerVariants = cva("ald-divider tw-inline-block tw-w-px tw-align-middle",
 	} },
 	defaultVariants: { size: "middle" }
 });
-var innerVariants = cva("ald-divider-inner tw-block tw-w-full tw-bg-[var(--global-cool-grey-300)] tw-mix-blend-multiply", {
+var innerVariants = cva("ald-divider-inner tw-block tw-w-full tw-bg-[var(--border-neutral-subtle)] tw-mix-blend-multiply", {
 	variants: { size: {
 		small: "tw-h-[12px]",
 		middle: "tw-h-[14px]",

package/dist/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Divider/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IDividerProps {\n  /**\n   * @description 类名\n   * @type string\n   * @default --\n   */\n  className?: string;\n  /**\n   * @description 颜色\n   * @type string\n   * @default --\n   */\n  color?: string;\n  /**\n   * @description 尺寸\n   * @type 'small' | 'middle' | 'large'\n   * @default 'middle'\n   */\n  size?: 'small' | 'middle' | 'large';\n}\n\nconst dividerVariants = cva(\n  'ald-divider tw-inline-block tw-w-px tw-align-middle',\n  {\n    variants: {\n      size: {\n        small: 'ald-divider-small tw-mx-[6px]',\n        middle: 'ald-divider-middle tw-mx-[8px]',\n        large: 'ald-divider-large tw-mx-[12px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst innerVariants = cva(\n  'ald-divider-inner tw-block tw-w-full tw-bg-[var(--global-cool-grey-300)] tw-mix-blend-multiply',\n  {\n    variants: {\n      size: {\n        small: 'tw-h-[12px]',\n        middle: 'tw-h-[14px]',\n        large: 'tw-h-[16px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst Divider = (props: IDividerProps) => {\n  const { className, size = 'middle' } = props;\n\n  return (\n    <div className={cn(dividerVariants({ size }), className)}>\n      <div\n        className={innerVariants({ size })}\n        style={props.color ? { backgroundColor: props.color } : undefined}\n      />\n    </div>\n  );\n};\n\nexport default Divider;\n"],"mappings":";;;;;AAyBA,IAAM,kBAAkB,IACtB,uDACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,gBAAgB,IACpB,kGACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,WAAW,UAAyB;CACxC,MAAM,EAAE,WAAW,OAAO,aAAa;AAEvC,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,gBAAgB,EAAE,MAAM,CAAC,EAAE,UAAU;YACtD,oBAAC,OAAD;GACE,WAAW,cAAc,EAAE,MAAM,CAAC;GAClC,OAAO,MAAM,QAAQ,EAAE,iBAAiB,MAAM,OAAO,GAAG;GACxD,CAAA;EACE,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Divider/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IDividerProps {\n  /**\n   * @description 类名\n   * @type string\n   * @default --\n   */\n  className?: string;\n  /**\n   * @description 颜色\n   * @type string\n   * @default --\n   */\n  color?: string;\n  /**\n   * @description 尺寸\n   * @type 'small' | 'middle' | 'large'\n   * @default 'middle'\n   */\n  size?: 'small' | 'middle' | 'large';\n}\n\nconst dividerVariants = cva(\n  'ald-divider tw-inline-block tw-w-px tw-align-middle',\n  {\n    variants: {\n      size: {\n        small: 'ald-divider-small tw-mx-[6px]',\n        middle: 'ald-divider-middle tw-mx-[8px]',\n        large: 'ald-divider-large tw-mx-[12px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst innerVariants = cva(\n  'ald-divider-inner tw-block tw-w-full tw-bg-[var(--border-neutral-subtle)] tw-mix-blend-multiply',\n  {\n    variants: {\n      size: {\n        small: 'tw-h-[12px]',\n        middle: 'tw-h-[14px]',\n        large: 'tw-h-[16px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst Divider = (props: IDividerProps) => {\n  const { className, size = 'middle' } = props;\n\n  return (\n    <div className={cn(dividerVariants({ size }), className)}>\n      <div\n        className={innerVariants({ size })}\n        style={props.color ? { backgroundColor: props.color } : undefined}\n      />\n    </div>\n  );\n};\n\nexport default Divider;\n"],"mappings":";;;;;AAyBA,IAAM,kBAAkB,IACtB,uDACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,gBAAgB,IACpB,mGACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,WAAW,UAAyB;CACxC,MAAM,EAAE,WAAW,OAAO,aAAa;AAEvC,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,gBAAgB,EAAE,MAAM,CAAC,EAAE,UAAU;YACtD,oBAAC,OAAD;GACE,WAAW,cAAc,EAAE,MAAM,CAAC;GAClC,OAAO,MAAM,QAAQ,EAAE,iBAAiB,MAAM,OAAO,GAAG;GACxD,CAAA;EACE,CAAA"}

package/dist/Drawer/index.js

@@ -77,7 +77,7 @@ function Drawer(props) {
 		},
 		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [mask && /* @__PURE__ */ jsx("div", {
 			"data-state": open ? "open" : "closed",
-			className: "ald-drawer-mask tw-fixed tw-inset-0 tw-bg-black/45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
+			className: "ald-drawer-mask tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
 			style: { zIndex: maskZIndex },
 			onClick: maskClosable ? () => onClose?.() : void 0
 		}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
@@ -97,7 +97,7 @@ function Drawer(props) {
 				value: nextLevel,
 				children: [
 					(title || description || closable || extra) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--interaction-background-sidepanel)] tw-px-6 tw-pb-0 tw-pt-4",
+						className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4",
 						style: headerStyle,
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "tw-flex tw-w-full tw-flex-col tw-gap-[6px]",
@@ -112,7 +112,7 @@ function Drawer(props) {
 										asChild: true,
 										children: /* @__PURE__ */ jsx("button", {
 											type: "button",
-											className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-transparent hover:tw-bg-[var(--action-ghost-hover)]",
+											className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]",
 											onClick: () => onClose?.(),
 											children: /* @__PURE__ */ jsx(Memo, {
 												size: 20,

package/dist/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useRef } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?: () => HTMLElement;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // ---- modal={false} 补偿：锁定背景滚动 ----\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n        {mask && (\n          <div\n            data-state={open ? 'open' : 'closed'}\n            className=\"ald-drawer-mask tw-fixed tw-inset-0 tw-bg-black/45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n            style={{ zIndex: maskZIndex }}\n            onClick={maskClosable ? () => onClose?.() : undefined}\n          />\n        )}\n        <DialogPrimitive.Content\n          ref={contentRef}\n          className={cn(\n            'ald-drawer tw-fixed tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n            placementStyles[placement],\n            slideAnimationStyles[placement],\n            rootClassName,\n            className,\n          )}\n          style={{\n            zIndex: contentZIndex,\n            ...sizeStyle,\n            ...contentWrapperStyle,\n            ...style,\n          }}\n          onEscapeKeyDown={() => onClose?.()}\n          onInteractOutside={(event) => {\n            if (!maskClosable) {\n              event.preventDefault();\n            }\n          }}\n        >\n          <FloatingLayerProvider value={nextLevel}>\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--interaction-background-sidepanel)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-transparent hover:tw-bg-[var(--action-ghost-hover)]\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                        {description}\n                      </div>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useRef } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?: () => HTMLElement;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // ---- modal={false} 补偿：锁定背景滚动 ----\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n        {mask && (\n          <div\n            data-state={open ? 'open' : 'closed'}\n            className=\"ald-drawer-mask tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n            style={{ zIndex: maskZIndex }}\n            onClick={maskClosable ? () => onClose?.() : undefined}\n          />\n        )}\n        <DialogPrimitive.Content\n          ref={contentRef}\n          className={cn(\n            'ald-drawer tw-fixed tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n            placementStyles[placement],\n            slideAnimationStyles[placement],\n            rootClassName,\n            className,\n          )}\n          style={{\n            zIndex: contentZIndex,\n            ...sizeStyle,\n            ...contentWrapperStyle,\n            ...style,\n          }}\n          onEscapeKeyDown={() => onClose?.()}\n          onInteractOutside={(event) => {\n            if (!maskClosable) {\n              event.preventDefault();\n            }\n          }}\n        >\n          <FloatingLayerProvider value={nextLevel}>\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                        {description}\n                      </div>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":";;;;;;;;AAuCA,IAAM,cAAsC;CAC1C,SAAS;CACT,OAAO;CACR;AAED,IAAM,kBAA0C;CAC9C,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,uBAA+C;CACnD,OACE;CACF,MAAM;CACN,KAAK;CACL,QACE;CACH;AAED,SAAS,OAAO,OAAoB;CAClC,MAAM,EACJ,OAAO,OACP,SACA,OACA,aACA,YAAY,SACZ,OACA,QACA,OAAO,WACP,WAAW,MACX,OAAO,MACP,eAAe,MACf,WACA,eACA,OACA,qBACA,WACA,aACA,QACA,aACA,OACA,UACA,SAAS,QACP;CAEJ,MAAM,aAAa,OAAuB,KAAK;AAG/C,iBAAgB;AACd,MAAI,CAAC,KAAM;EACX,MAAM,OAAO,SAAS,KAAK,MAAM;AACjC,WAAS,KAAK,MAAM,WAAW;AAC/B,eAAa;AACX,YAAS,KAAK,MAAM,WAAW;;IAEhC,CAAC,KAAK,CAAC;AAGV,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;AAClC,SAAO,WAAW,WAAW,QAAQ;IACpC,CAAC,KAAK,CAAC;AAGV,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;EAClC,MAAM,YAAY,WAAW;EAC7B,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,EAAE,QAAQ,MAAO;GACrB,MAAM,YAAY,UAAU,iBAC1B,8JACD;AACD,OAAI,UAAU,WAAW,EAAG;GAC5B,MAAM,QAAQ,UAAU;GACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,OAAI,EAAE,UACJ;QACE,SAAS,kBAAkB,SAC3B,CAAC,UAAU,SAAS,SAAS,cAAc,EAC3C;AACA,OAAE,gBAAgB;AAClB,UAAK,OAAO;;cAIZ,SAAS,kBAAkB,QAC3B,CAAC,UAAU,SAAS,SAAS,cAAc,EAC3C;AACA,MAAE,gBAAgB;AAClB,UAAM,OAAO;;;AAInB,WAAS,iBAAiB,WAAW,cAAc;AACnD,eAAa,SAAS,oBAAoB,WAAW,cAAc;IAClE,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,cAAc,UAAU,cAAc;CAC3D,MAAM,SAAS,YAAY,SAAS,YAAY;CAGhD,MAAM,YAAY,eACd;EAAE,OAHiB,SAAS;EAGH,UAAU;EAAS,GAC5C;EAAE,QAHkB,UAAU;EAGH,WAAW;EAAS;CACnD,MAAM,EAAE,YAAY,eAAe,cAAc,iBAAiB,OAAO;AAIzE,QACE,oBAAC,gBAAgB,MAAjB;EACQ;EACN,OAAO;EACP,eAAe,QAAQ;AACrB,OAAI,CAAC,IAAK,YAAW;;YAGvB,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CAEG,QACC,oBAAC,OAAD;GACE,cAAY,OAAO,SAAS;GAC5B,WAAU;GACV,OAAO,EAAE,QAAQ,YAAY;GAC7B,SAAS,qBAAqB,WAAW,GAAG;GAC5C,CAAA,EAEJ,oBAAC,gBAAgB,SAAjB;GACE,KAAK;GACL,WAAW,GACT,0FACA,gBAAgB,YAChB,qBAAqB,YACrB,eACA,UACD;GACD,OAAO;IACL,QAAQ;IACR,GAAG;IACH,GAAG;IACH,GAAG;IACJ;GACD,uBAAuB,WAAW;GAClC,oBAAoB,UAAU;AAC5B,QAAI,CAAC,aACH,OAAM,gBAAgB;;aAI1B,qBAAC,uBAAD;IAAuB,OAAO;cAA9B;MACI,SAAS,eAAe,YAAY,UACpC,oBAAA,UAAA,EAAA,UAEE,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;gBAEP,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,oBAAC,gBAAgB,OAAjB;SAAuB,WAAU;mBAC9B;SACqB,CAAA,EACvB,SAAS,WACR,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACG,OACA,YACC,oBAAC,gBAAgB,OAAjB;UAAuB,SAAA;oBACrB,oBAAC,UAAD;WACE,MAAK;WACL,WAAU;WACV,eAAe,WAAW;qBAE1B,oBAAC,MAAD;YACE,MAAM;YACN,OAAM;YACN,CAAA;WACK,CAAA;UACa,CAAA,CAEtB;aACJ,KACA;WACL,cACC,oBAAC,OAAD;QAAK,WAAU;kBACZ;QACG,CAAA,GACJ,KACA;;MACF,CAAA,EACL,CAAA;KAGL,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;MAEN;MACG,CAAA;KACL,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAU,mEAAoE,CAAA,EAGnF,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;gBAEN;MACG,CAAA,CACL,EAAA,CAAA;KAEiB;;GACA,CAAA,CACH,EAAA,CAAA;EACJ,CAAA"}

package/dist/Dropdown/index.d.ts

@@ -51,6 +51,11 @@ export interface IDropdownProps {
      * @default -
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * @description 焦点移出触发元素和浮层时是否关闭 Dropdown
+     * @default true
+     */
+    closeOnFocusOut?: boolean;
     /**
      * @description 下拉框外层 overlay 的内联样式（与定位 transform 合并）
      * @default -

package/dist/Dropdown/index.js

@@ -31,7 +31,7 @@ function hasTrigger(trigger, action) {
 	return Array.isArray(trigger) ? trigger.includes(action) : trigger === action;
 }
 function Dropdown(props) {
-	const { children, destroyPopupOnHide = true, getPopupContainer, menu, overlayClassName, placement = "bottom-start", trigger = "click", open, onOpenChange = () => {}, overlayStyle, overlayInnerStyle, dropdownRender, disabled, offset: offsetProps = 4, delay = 0, autoUpdatePos = false, initialFocus = -1, popupMatchTriggerWidth = false, allowOverlap = false } = props;
+	const { children, destroyPopupOnHide = true, getPopupContainer, menu, overlayClassName, placement = "bottom-start", trigger = "click", open, onOpenChange = () => {}, closeOnFocusOut = true, overlayStyle, overlayInnerStyle, dropdownRender, disabled, offset: offsetProps = 4, delay = 0, autoUpdatePos = false, initialFocus = -1, popupMatchTriggerWidth = false, allowOverlap = false } = props;
 	const [isOpen, setIsOpen] = useState(open || false);
 	const [isAnimatingOut, setIsAnimatingOut] = useState(false);
 	const closeAnimationTimerRef = useRef(null);
@@ -300,6 +300,7 @@ function Dropdown(props) {
 			context,
 			modal: false,
 			initialFocus,
+			closeOnFocusOut,
 			children: surface
 		});
 		const popupContainer = typeof getPopupContainer === "function" ? getPopupContainer() : document.body;
@@ -321,6 +322,7 @@ function Dropdown(props) {
 		isAnimatingOut,
 		isOpen,
 		initialFocus,
+		closeOnFocusOut,
 		resolvedFloatingSide,
 		resolvedFloatingStyles
 	]);

package/dist/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Dropdown/index.tsx"],"sourcesContent":["import './dropdown.css';\nimport {\n  FloatingFocusManager,\n  FloatingFocusManagerProps,\n  FloatingNode,\n  FloatingTree,\n  OffsetOptions,\n  UseHoverProps,\n  autoUpdate,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useMemoizedFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport Menu, { MenuInfo, MenuProps } from '../Menu';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { ensureWeakRefFallback } from '../_utils/weakRefFallback';\n\nconst OVERLAY_EXIT_ANIMATION_MS = 200;\n\nensureWeakRefFallback();\n\nfunction resolvePlacementSide(\n  currentPlacement: string,\n): 'top' | 'bottom' | 'left' | 'right' {\n  const [side] = currentPlacement.split('-');\n  if (\n    side === 'top' ||\n    side === 'bottom' ||\n    side === 'left' ||\n    side === 'right'\n  ) {\n    return side;\n  }\n  if (currentPlacement.startsWith('top')) {\n    return 'top';\n  }\n  if (currentPlacement.startsWith('bottom')) {\n    return 'bottom';\n  }\n  if (currentPlacement.startsWith('left')) {\n    return 'left';\n  }\n  if (currentPlacement.startsWith('right')) {\n    return 'right';\n  }\n  return 'bottom';\n}\n\nfunction parsePopupMatchWidth(value: unknown): number | undefined {\n  if (typeof value === 'number') {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const parsedValue = Number(value);\n    return Number.isNaN(parsedValue) ? undefined : parsedValue;\n  }\n\n  return undefined;\n}\n\nexport type ActionType = 'hover' | 'click';\nexport type PlacementType =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end'\n  // Legacy antd-style placement names\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight';\nexport interface IDropdownProps {\n  children: React.ReactNode;\n  /**\n   * @description 菜单弹出位置的偏移量\n   */\n  offset?: OffsetOptions;\n  /**\n   * @description 关闭后是否销毁 Dropdown\n   * @default false\n   */\n  destroyPopupOnHide?: boolean;\n  /**\n   * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位\n   * @default () => document.body\n   */\n  getPopupContainer?: () => HTMLElement;\n  /**\n   * @description 菜单\n   * @type Menu | () => Menu\n   * @default -\n   */\n  menu?: MenuProps;\n  // /**\n  //  * @description 菜单\n  //  * @type Menu | () => Menu\n  //  * @default -\n  //  */\n  // menu?: ReactElement | (() => ReactElement);\n  /**\n   * @description 下拉根元素的类名称\n   * @default -\n   */\n  overlayClassName?: string;\n  /**\n   * @description 菜单弹出位置\n   * @default bottomLeft\n   */\n  placement?: PlacementType;\n  /**\n   * @description 触发下拉的行为\n   * @type ActionType, 其中 ActionType 为 'hover' | 'click' | 'contextMenu';\n   * @default click\n   */\n  trigger?: ActionType | ActionType[];\n  /**\n   * @description 菜单是否显示\n   * @default -\n   */\n  open?: boolean;\n  /**\n   * @description 菜单显示状态改变时调用，参数为 open，点击菜单按钮导致的消失不会触发\n   * @default -\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * @description 下拉框外层 overlay 的内联样式（与定位 transform 合并）\n   * @default -\n   */\n  overlayStyle?: React.CSSProperties;\n  /**\n   * @description 下拉框内层 surface 的内联样式。\n   * 用于覆盖 surface 默认约束（默认 min-width:160px、max-width:320px）；\n   * 自定义 dropdownRender 内容若需大于 320px 宽，传 `{ width: 400, maxWidth: 'none' }` 即可。\n   * @default -\n   */\n  overlayInnerStyle?: React.CSSProperties;\n\n  /**\n   * @description 自定义下拉框内容\n   * @default -\n   */\n  dropdownRender?: (menus: React.ReactNode) => React.ReactNode;\n  /**\n   * @description 是否禁用\n   * @default false\n   */\n  // 透传给子元素，antd的dropdown用cloneElement生成dropdown的子元素，劫持了disabled属性，因此如果Dropdown上没有disabled属性，子元素不能获得该属性\n  disabled?: boolean;\n  /**\n   * @description 鼠标移入后延迟显示下拉框的时间，单位为毫秒\n   * @default 0\n   */\n  delay?: UseHoverProps['delay'];\n  /**\n   * @description 是否在下拉框变化的时候自动更新位置\n   * @default false\n   */\n  autoUpdatePos?: boolean;\n  /**\n   * @description 初始化焦点，参照：https://floating-ui.com/docs/floatingfocusmanager#initialfocus\n   */\n  initialFocus?: FloatingFocusManagerProps['initialFocus'];\n\n  /**\n   * @description 菜单是否跟随触发元素宽度\n   * @default false\n   */\n  popupMatchTriggerWidth?: boolean | number;\n  /**\n   * @description 空间不足时自动计算菜单最大高度并启用滚动，启用后 offset 固定为 0\n   * @default false\n   */\n  allowOverlap?: boolean;\n}\n\nfunction hasTrigger(\n  trigger: ActionType | ActionType[],\n  action: ActionType,\n): boolean {\n  return Array.isArray(trigger) ? trigger.includes(action) : trigger === action;\n}\n\nexport default function Dropdown(props: IDropdownProps) {\n  const {\n    children,\n    destroyPopupOnHide = true,\n    getPopupContainer,\n    menu,\n    overlayClassName,\n    placement = 'bottom-start',\n    trigger = 'click',\n    open,\n    onOpenChange = () => {},\n    overlayStyle,\n    overlayInnerStyle,\n    dropdownRender,\n    disabled,\n    offset: offsetProps = 4,\n    delay = 0,\n    autoUpdatePos = false,\n    // 默认不自动 focus\n    initialFocus = -1,\n    popupMatchTriggerWidth = false,\n    allowOverlap = false,\n  } = props;\n  const [isOpen, setIsOpen] = useState<boolean>(open || false);\n  const [isAnimatingOut, setIsAnimatingOut] = useState(false);\n  const closeAnimationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n  const lastResolvedFloatingStylesRef = useRef<React.CSSProperties | null>(\n    null,\n  );\n  const lastResolvedSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const currentFloatingStylesRef = useRef<React.CSSProperties | null>(null);\n  const currentFloatingSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);\n  const popupMatchTriggerWidthNumber = parsePopupMatchWidth(\n    popupMatchTriggerWidth,\n  );\n  const [matchedTriggerWidth, setMatchedTriggerWidth] = useState<\n    number | undefined\n  >(popupMatchTriggerWidthNumber);\n  const popupZIndex = useFloatingPopupZIndex();\n\n  const onOpenChangeFn = useMemoizedFn(onOpenChange);\n  const isOpenControlled = open !== undefined;\n\n  const clearCloseAnimationTimer = useCallback(() => {\n    if (closeAnimationTimerRef.current) {\n      clearTimeout(closeAnimationTimerRef.current);\n      closeAnimationTimerRef.current = null;\n    }\n  }, []);\n\n  const stopCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    document.body.classList.remove('ald-dropdown-root-closing');\n    setIsAnimatingOut(false);\n  }, [clearCloseAnimationTimer]);\n\n  const markRootClosing = useCallback(() => {\n    document.body.classList.add('ald-dropdown-root-closing');\n    lastResolvedFloatingStylesRef.current =\n      currentFloatingStylesRef.current ?? lastResolvedFloatingStylesRef.current;\n    lastResolvedSideRef.current =\n      currentFloatingSideRef.current ?? lastResolvedSideRef.current;\n  }, []);\n\n  const startCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    markRootClosing();\n    setIsAnimatingOut(true);\n    closeAnimationTimerRef.current = setTimeout(() => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n      setIsAnimatingOut(false);\n      closeAnimationTimerRef.current = null;\n    }, OVERLAY_EXIT_ANIMATION_MS);\n  }, [clearCloseAnimationTimer, markRootClosing]);\n\n  useLayoutEffect(() => {\n    if (!isOpenControlled) {\n      return;\n    }\n\n    if (open) {\n      stopCloseAnimation();\n      setIsOpen(true);\n      return;\n    }\n\n    if (isOpen) {\n      startCloseAnimation();\n    }\n    setIsOpen(false);\n  }, [isOpen, isOpenControlled, open, startCloseAnimation, stopCloseAnimation]);\n\n  useEffect(() => {\n    return () => {\n      clearCloseAnimationTimer();\n    };\n  }, [clearCloseAnimationTimer]);\n\n  useEffect(() => {\n    return () => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n    };\n  }, []);\n\n  const onChangeOpen = useCallback(\n    (newOpen: boolean) => {\n      if (newOpen) {\n        stopCloseAnimation();\n      } else {\n        startCloseAnimation();\n      }\n\n      if (!isOpenControlled) {\n        setIsOpen(newOpen);\n      }\n      onOpenChangeFn(newOpen);\n    },\n    [isOpenControlled, onOpenChangeFn, startCloseAnimation, stopCloseAnimation],\n  );\n\n  const nodeId = useFloatingNodeId();\n  const {\n    refs,\n    floatingStyles,\n    context,\n    placement: floatingPlacement,\n    x,\n    y,\n  } = useFloating({\n    nodeId,\n    placement: placement as any,\n    open: isOpen,\n    onOpenChange: onChangeOpen,\n    middleware: [\n      offset(allowOverlap ? 0 : offsetProps),\n      flip({\n        fallbackAxisSideDirection: 'end',\n        ...(allowOverlap && { fallbackStrategy: 'bestFit' }),\n      }),\n      shift(allowOverlap ? { mainAxis: true } : undefined),\n      size({\n        ...(allowOverlap && { padding: 8 }),\n        apply({ availableHeight, elements }) {\n          if (!allowOverlap) {\n            return;\n          }\n\n          Object.assign(elements.floating.style, {\n            maxHeight: `${Math.max(100, availableHeight)}px`,\n            overflowY: 'auto',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdatePos ? autoUpdate : undefined,\n  });\n\n  const click = useClick(context, {\n    enabled: hasTrigger(trigger, 'click'),\n  });\n  const hover = useHover(context, {\n    enabled: hasTrigger(trigger, 'hover'),\n    handleClose: safePolygon({}),\n    delay: delay,\n  });\n  const dismiss = useDismiss(context, {});\n  const role = useRole(context);\n\n  const propsList = useMemo(() => {\n    const res = [dismiss, role];\n\n    if (hasTrigger(trigger, 'hover')) {\n      res.unshift(hover);\n    }\n    if (hasTrigger(trigger, 'click')) {\n      res.unshift(click);\n    }\n    return res;\n  }, [trigger, click, dismiss, role, hover]);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions(propsList);\n\n  const headingId = useId();\n\n  useLayoutEffect(() => {\n    if (!popupMatchTriggerWidth || !isOpen) {\n      setMatchedTriggerWidth(undefined);\n      return;\n    }\n\n    if (popupMatchTriggerWidthNumber !== undefined) {\n      setMatchedTriggerWidth(popupMatchTriggerWidthNumber);\n      return;\n    }\n\n    const referenceElement = targetElement;\n    if (!referenceElement) {\n      return;\n    }\n\n    const updateMatchedWidth = () => {\n      const nextWidth = referenceElement.getBoundingClientRect().width;\n      setMatchedTriggerWidth((currentWidth) =>\n        currentWidth === nextWidth ? currentWidth : nextWidth,\n      );\n    };\n\n    updateMatchedWidth();\n\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', updateMatchedWidth);\n      return () => {\n        window.removeEventListener('resize', updateMatchedWidth);\n      };\n    }\n\n    let resizeAnimationFrame: number | undefined;\n    const scheduleMatchedWidthUpdate = () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      resizeAnimationFrame = requestAnimationFrame(updateMatchedWidth);\n    };\n\n    const observer = new ResizeObserver(scheduleMatchedWidthUpdate);\n    observer.observe(referenceElement);\n\n    return () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      observer.disconnect();\n    };\n  }, [\n    isOpen,\n    popupMatchTriggerWidth,\n    popupMatchTriggerWidthNumber,\n    targetElement,\n  ]);\n\n  const child = children as React.ReactElement;\n  const childProps = child.props || {};\n  const referenceProps = getReferenceProps();\n  const updateMatchedWidthFromElement = useCallback(\n    (element: HTMLElement) => {\n      if (!popupMatchTriggerWidth) {\n        return;\n      }\n\n      setMatchedTriggerWidth((currentWidth) => {\n        const nextWidth =\n          popupMatchTriggerWidthNumber !== undefined\n            ? popupMatchTriggerWidthNumber\n            : element.getBoundingClientRect().width;\n        return currentWidth === nextWidth ? currentWidth : nextWidth;\n      });\n    },\n    [popupMatchTriggerWidth, popupMatchTriggerWidthNumber],\n  );\n  const modifiedChild = cloneElement(child, {\n    ...childProps,\n    disabled,\n    // ref: (node: HTMLDivElement) => refs.setReference(node),\n    ...referenceProps,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      updateMatchedWidthFromElement(event.currentTarget);\n      childProps.onClick?.(event);\n      const { onClick: referenceOnClick } = referenceProps;\n      if (typeof referenceOnClick === 'function') {\n        referenceOnClick(event);\n      }\n    },\n  });\n\n  const onMenuItemClick = useCallback(\n    (info: MenuInfo) => {\n      if (menu?.onClick) {\n        menu.onClick(info);\n      }\n      if (info.keepOpen) {\n        document.body.classList.remove('ald-dropdown-root-closing');\n        return;\n      }\n      onChangeOpen(false);\n    },\n    [menu, onChangeOpen],\n  );\n\n  const menuInstance = useMemo(() => {\n    const menuProps = {\n      ...menu,\n      items: menu?.items || [],\n      menuStyle: {\n        ...(popupMatchTriggerWidth\n          ? {\n              width: '100%',\n              minWidth: 0,\n              maxWidth: 'none',\n            }\n          : undefined),\n        ...menu?.menuStyle,\n      },\n      onBeforeLeafItemClick: markRootClosing,\n      rootClosing: isAnimatingOut,\n    };\n    return (\n      <Menu\n        {...menuProps}\n        onClick={onMenuItemClick}\n        externalOverflow={allowOverlap}\n      />\n    );\n  }, [\n    allowOverlap,\n    isAnimatingOut,\n    markRootClosing,\n    menu,\n    onMenuItemClick,\n    popupMatchTriggerWidth,\n  ]);\n\n  const popupElement = useMemo(() => {\n    return typeof dropdownRender === 'function'\n      ? dropdownRender(menuInstance)\n      : menuInstance;\n  }, [dropdownRender, menuInstance]);\n\n  const mergedMatchedTriggerWidth =\n    popupMatchTriggerWidthNumber ?? matchedTriggerWidth;\n  const matchedOverlayStyle =\n    popupMatchTriggerWidth && mergedMatchedTriggerWidth !== undefined\n      ? ({\n          width: `${mergedMatchedTriggerWidth}px`,\n          minWidth: 0,\n        } satisfies React.CSSProperties)\n      : undefined;\n\n  const matchedSurfaceStyle = popupMatchTriggerWidth\n    ? ({\n        width: '100%',\n        minWidth: 0,\n        maxWidth: 'none',\n      } satisfies React.CSSProperties)\n    : undefined;\n\n  const floatingSide = resolvePlacementSide(String(floatingPlacement));\n  const shouldKeepMounted = !destroyPopupOnHide || isOpen || isAnimatingOut;\n  const isPositionReady = x !== null && y !== null;\n  const overlayHidden =\n    (!isOpen && !isAnimatingOut) || (isOpen && !isPositionReady);\n  const resolvedFloatingStyles = isAnimatingOut\n    ? lastResolvedFloatingStylesRef.current ?? floatingStyles\n    : floatingStyles;\n  const resolvedFloatingSide = isAnimatingOut\n    ? lastResolvedSideRef.current\n    : floatingSide;\n\n  if (isOpen && isPositionReady) {\n    currentFloatingStylesRef.current = { ...floatingStyles };\n    currentFloatingSideRef.current = floatingSide;\n    lastResolvedFloatingStylesRef.current = { ...floatingStyles };\n    lastResolvedSideRef.current = floatingSide;\n  }\n\n  // 渲染浮动内容到自定义容器\n  const renderFloatingContent = useCallback(() => {\n    const surface = (\n      <div\n        {...(isAnimatingOut ? {} : getFloatingProps())}\n        className={cn(\n          'ald-dropdown-overlay',\n          // tw-outline-none：FloatingFocusManager 打开时会聚焦浮层容器，不抑制 outline 会渲染出蓝色焦点框\n          'tw-pointer-events-auto tw-z-[1001] tw-max-w-none tw-outline-none',\n          overlayClassName,\n          { 'ald-dropdown-overlay-hidden': overlayHidden },\n        )}\n        ref={refs.setFloating}\n        style={{\n          zIndex: popupZIndex,\n          ...resolvedFloatingStyles,\n          ...matchedOverlayStyle,\n          ...overlayStyle,\n        }}\n        aria-labelledby={headingId}\n      >\n        <div\n          className={cn(\n            'ald-dropdown-surface',\n            'tw-flex tw-flex-col tw-items-start tw-text-sm',\n          )}\n          style={{\n            ...matchedSurfaceStyle,\n            ...overlayInnerStyle,\n          }}\n          data-state={isOpen ? 'open' : 'closed'}\n          data-side={resolvedFloatingSide}\n        >\n          {popupElement}\n        </div>\n      </div>\n    );\n\n    const popupElem =\n      isAnimatingOut && !isOpen ? (\n        surface\n      ) : (\n        <FloatingFocusManager\n          context={context}\n          modal={false}\n          initialFocus={initialFocus}\n        >\n          {surface}\n        </FloatingFocusManager>\n      );\n\n    const popupContainer =\n      typeof getPopupContainer === 'function'\n        ? getPopupContainer()\n        : document.body;\n    return ReactDOM.createPortal(popupElem, popupContainer);\n  }, [\n    context,\n    getFloatingProps,\n    getPopupContainer,\n    headingId,\n    popupElement,\n    refs.setFloating,\n    overlayClassName,\n    overlayStyle,\n    overlayInnerStyle,\n    matchedOverlayStyle,\n    matchedSurfaceStyle,\n    popupZIndex,\n    overlayHidden,\n    isAnimatingOut,\n    isOpen,\n    initialFocus,\n    resolvedFloatingSide,\n    resolvedFloatingStyles,\n  ]);\n\n  const popup = shouldKeepMounted ? renderFloatingContent() : null;\n  const { setReference } = refs;\n\n  const setTargetRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) {\n        // display: contents 元素没有 box model，getBoundingClientRect() 返回零值\n        // 需要获取实际的第一个子元素作为 floating-ui 的参考元素\n        const target =\n          node.style.display === 'contents'\n            ? (node.firstElementChild as HTMLElement) || node\n            : node;\n        setTargetElement((currentTarget) =>\n          currentTarget === target ? currentTarget : target,\n        );\n        setReference(target);\n      } else {\n        setTargetElement(null);\n        setReference(null);\n      }\n    },\n    [setReference],\n  );\n\n  const content = (\n    <>\n      <span ref={setTargetRef} style={{ display: 'contents' }}>\n        {modifiedChild}\n      </span>\n      <FloatingNode id={nodeId}>{popup}</FloatingNode>\n    </>\n  );\n\n  const parentId = useFloatingParentNodeId();\n  if (!parentId) {\n    return <FloatingTree>{content}</FloatingTree>;\n  }\n\n  return content;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Dropdown/index.tsx"],"sourcesContent":["import './dropdown.css';\nimport {\n  FloatingFocusManager,\n  FloatingFocusManagerProps,\n  FloatingNode,\n  FloatingTree,\n  OffsetOptions,\n  UseHoverProps,\n  autoUpdate,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useMemoizedFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport Menu, { MenuInfo, MenuProps } from '../Menu';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { ensureWeakRefFallback } from '../_utils/weakRefFallback';\n\nconst OVERLAY_EXIT_ANIMATION_MS = 200;\n\nensureWeakRefFallback();\n\nfunction resolvePlacementSide(\n  currentPlacement: string,\n): 'top' | 'bottom' | 'left' | 'right' {\n  const [side] = currentPlacement.split('-');\n  if (\n    side === 'top' ||\n    side === 'bottom' ||\n    side === 'left' ||\n    side === 'right'\n  ) {\n    return side;\n  }\n  if (currentPlacement.startsWith('top')) {\n    return 'top';\n  }\n  if (currentPlacement.startsWith('bottom')) {\n    return 'bottom';\n  }\n  if (currentPlacement.startsWith('left')) {\n    return 'left';\n  }\n  if (currentPlacement.startsWith('right')) {\n    return 'right';\n  }\n  return 'bottom';\n}\n\nfunction parsePopupMatchWidth(value: unknown): number | undefined {\n  if (typeof value === 'number') {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const parsedValue = Number(value);\n    return Number.isNaN(parsedValue) ? undefined : parsedValue;\n  }\n\n  return undefined;\n}\n\nexport type ActionType = 'hover' | 'click';\nexport type PlacementType =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end'\n  // Legacy antd-style placement names\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight';\nexport interface IDropdownProps {\n  children: React.ReactNode;\n  /**\n   * @description 菜单弹出位置的偏移量\n   */\n  offset?: OffsetOptions;\n  /**\n   * @description 关闭后是否销毁 Dropdown\n   * @default false\n   */\n  destroyPopupOnHide?: boolean;\n  /**\n   * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位\n   * @default () => document.body\n   */\n  getPopupContainer?: () => HTMLElement;\n  /**\n   * @description 菜单\n   * @type Menu | () => Menu\n   * @default -\n   */\n  menu?: MenuProps;\n  // /**\n  //  * @description 菜单\n  //  * @type Menu | () => Menu\n  //  * @default -\n  //  */\n  // menu?: ReactElement | (() => ReactElement);\n  /**\n   * @description 下拉根元素的类名称\n   * @default -\n   */\n  overlayClassName?: string;\n  /**\n   * @description 菜单弹出位置\n   * @default bottomLeft\n   */\n  placement?: PlacementType;\n  /**\n   * @description 触发下拉的行为\n   * @type ActionType, 其中 ActionType 为 'hover' | 'click' | 'contextMenu';\n   * @default click\n   */\n  trigger?: ActionType | ActionType[];\n  /**\n   * @description 菜单是否显示\n   * @default -\n   */\n  open?: boolean;\n  /**\n   * @description 菜单显示状态改变时调用，参数为 open，点击菜单按钮导致的消失不会触发\n   * @default -\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * @description 焦点移出触发元素和浮层时是否关闭 Dropdown\n   * @default true\n   */\n  closeOnFocusOut?: boolean;\n  /**\n   * @description 下拉框外层 overlay 的内联样式（与定位 transform 合并）\n   * @default -\n   */\n  overlayStyle?: React.CSSProperties;\n  /**\n   * @description 下拉框内层 surface 的内联样式。\n   * 用于覆盖 surface 默认约束（默认 min-width:160px、max-width:320px）；\n   * 自定义 dropdownRender 内容若需大于 320px 宽，传 `{ width: 400, maxWidth: 'none' }` 即可。\n   * @default -\n   */\n  overlayInnerStyle?: React.CSSProperties;\n\n  /**\n   * @description 自定义下拉框内容\n   * @default -\n   */\n  dropdownRender?: (menus: React.ReactNode) => React.ReactNode;\n  /**\n   * @description 是否禁用\n   * @default false\n   */\n  // 透传给子元素，antd的dropdown用cloneElement生成dropdown的子元素，劫持了disabled属性，因此如果Dropdown上没有disabled属性，子元素不能获得该属性\n  disabled?: boolean;\n  /**\n   * @description 鼠标移入后延迟显示下拉框的时间，单位为毫秒\n   * @default 0\n   */\n  delay?: UseHoverProps['delay'];\n  /**\n   * @description 是否在下拉框变化的时候自动更新位置\n   * @default false\n   */\n  autoUpdatePos?: boolean;\n  /**\n   * @description 初始化焦点，参照：https://floating-ui.com/docs/floatingfocusmanager#initialfocus\n   */\n  initialFocus?: FloatingFocusManagerProps['initialFocus'];\n\n  /**\n   * @description 菜单是否跟随触发元素宽度\n   * @default false\n   */\n  popupMatchTriggerWidth?: boolean | number;\n  /**\n   * @description 空间不足时自动计算菜单最大高度并启用滚动，启用后 offset 固定为 0\n   * @default false\n   */\n  allowOverlap?: boolean;\n}\n\nfunction hasTrigger(\n  trigger: ActionType | ActionType[],\n  action: ActionType,\n): boolean {\n  return Array.isArray(trigger) ? trigger.includes(action) : trigger === action;\n}\n\nexport default function Dropdown(props: IDropdownProps) {\n  const {\n    children,\n    destroyPopupOnHide = true,\n    getPopupContainer,\n    menu,\n    overlayClassName,\n    placement = 'bottom-start',\n    trigger = 'click',\n    open,\n    onOpenChange = () => {},\n    closeOnFocusOut = true,\n    overlayStyle,\n    overlayInnerStyle,\n    dropdownRender,\n    disabled,\n    offset: offsetProps = 4,\n    delay = 0,\n    autoUpdatePos = false,\n    // 默认不自动 focus\n    initialFocus = -1,\n    popupMatchTriggerWidth = false,\n    allowOverlap = false,\n  } = props;\n  const [isOpen, setIsOpen] = useState<boolean>(open || false);\n  const [isAnimatingOut, setIsAnimatingOut] = useState(false);\n  const closeAnimationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n  const lastResolvedFloatingStylesRef = useRef<React.CSSProperties | null>(\n    null,\n  );\n  const lastResolvedSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const currentFloatingStylesRef = useRef<React.CSSProperties | null>(null);\n  const currentFloatingSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);\n  const popupMatchTriggerWidthNumber = parsePopupMatchWidth(\n    popupMatchTriggerWidth,\n  );\n  const [matchedTriggerWidth, setMatchedTriggerWidth] = useState<\n    number | undefined\n  >(popupMatchTriggerWidthNumber);\n  const popupZIndex = useFloatingPopupZIndex();\n\n  const onOpenChangeFn = useMemoizedFn(onOpenChange);\n  const isOpenControlled = open !== undefined;\n\n  const clearCloseAnimationTimer = useCallback(() => {\n    if (closeAnimationTimerRef.current) {\n      clearTimeout(closeAnimationTimerRef.current);\n      closeAnimationTimerRef.current = null;\n    }\n  }, []);\n\n  const stopCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    document.body.classList.remove('ald-dropdown-root-closing');\n    setIsAnimatingOut(false);\n  }, [clearCloseAnimationTimer]);\n\n  const markRootClosing = useCallback(() => {\n    document.body.classList.add('ald-dropdown-root-closing');\n    lastResolvedFloatingStylesRef.current =\n      currentFloatingStylesRef.current ?? lastResolvedFloatingStylesRef.current;\n    lastResolvedSideRef.current =\n      currentFloatingSideRef.current ?? lastResolvedSideRef.current;\n  }, []);\n\n  const startCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    markRootClosing();\n    setIsAnimatingOut(true);\n    closeAnimationTimerRef.current = setTimeout(() => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n      setIsAnimatingOut(false);\n      closeAnimationTimerRef.current = null;\n    }, OVERLAY_EXIT_ANIMATION_MS);\n  }, [clearCloseAnimationTimer, markRootClosing]);\n\n  useLayoutEffect(() => {\n    if (!isOpenControlled) {\n      return;\n    }\n\n    if (open) {\n      stopCloseAnimation();\n      setIsOpen(true);\n      return;\n    }\n\n    if (isOpen) {\n      startCloseAnimation();\n    }\n    setIsOpen(false);\n  }, [isOpen, isOpenControlled, open, startCloseAnimation, stopCloseAnimation]);\n\n  useEffect(() => {\n    return () => {\n      clearCloseAnimationTimer();\n    };\n  }, [clearCloseAnimationTimer]);\n\n  useEffect(() => {\n    return () => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n    };\n  }, []);\n\n  const onChangeOpen = useCallback(\n    (newOpen: boolean) => {\n      if (newOpen) {\n        stopCloseAnimation();\n      } else {\n        startCloseAnimation();\n      }\n\n      if (!isOpenControlled) {\n        setIsOpen(newOpen);\n      }\n      onOpenChangeFn(newOpen);\n    },\n    [isOpenControlled, onOpenChangeFn, startCloseAnimation, stopCloseAnimation],\n  );\n\n  const nodeId = useFloatingNodeId();\n  const {\n    refs,\n    floatingStyles,\n    context,\n    placement: floatingPlacement,\n    x,\n    y,\n  } = useFloating({\n    nodeId,\n    placement: placement as any,\n    open: isOpen,\n    onOpenChange: onChangeOpen,\n    middleware: [\n      offset(allowOverlap ? 0 : offsetProps),\n      flip({\n        fallbackAxisSideDirection: 'end',\n        ...(allowOverlap && { fallbackStrategy: 'bestFit' }),\n      }),\n      shift(allowOverlap ? { mainAxis: true } : undefined),\n      size({\n        ...(allowOverlap && { padding: 8 }),\n        apply({ availableHeight, elements }) {\n          if (!allowOverlap) {\n            return;\n          }\n\n          Object.assign(elements.floating.style, {\n            maxHeight: `${Math.max(100, availableHeight)}px`,\n            overflowY: 'auto',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdatePos ? autoUpdate : undefined,\n  });\n\n  const click = useClick(context, {\n    enabled: hasTrigger(trigger, 'click'),\n  });\n  const hover = useHover(context, {\n    enabled: hasTrigger(trigger, 'hover'),\n    handleClose: safePolygon({}),\n    delay: delay,\n  });\n  const dismiss = useDismiss(context, {});\n  const role = useRole(context);\n\n  const propsList = useMemo(() => {\n    const res = [dismiss, role];\n\n    if (hasTrigger(trigger, 'hover')) {\n      res.unshift(hover);\n    }\n    if (hasTrigger(trigger, 'click')) {\n      res.unshift(click);\n    }\n    return res;\n  }, [trigger, click, dismiss, role, hover]);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions(propsList);\n\n  const headingId = useId();\n\n  useLayoutEffect(() => {\n    if (!popupMatchTriggerWidth || !isOpen) {\n      setMatchedTriggerWidth(undefined);\n      return;\n    }\n\n    if (popupMatchTriggerWidthNumber !== undefined) {\n      setMatchedTriggerWidth(popupMatchTriggerWidthNumber);\n      return;\n    }\n\n    const referenceElement = targetElement;\n    if (!referenceElement) {\n      return;\n    }\n\n    const updateMatchedWidth = () => {\n      const nextWidth = referenceElement.getBoundingClientRect().width;\n      setMatchedTriggerWidth((currentWidth) =>\n        currentWidth === nextWidth ? currentWidth : nextWidth,\n      );\n    };\n\n    updateMatchedWidth();\n\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', updateMatchedWidth);\n      return () => {\n        window.removeEventListener('resize', updateMatchedWidth);\n      };\n    }\n\n    let resizeAnimationFrame: number | undefined;\n    const scheduleMatchedWidthUpdate = () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      resizeAnimationFrame = requestAnimationFrame(updateMatchedWidth);\n    };\n\n    const observer = new ResizeObserver(scheduleMatchedWidthUpdate);\n    observer.observe(referenceElement);\n\n    return () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      observer.disconnect();\n    };\n  }, [\n    isOpen,\n    popupMatchTriggerWidth,\n    popupMatchTriggerWidthNumber,\n    targetElement,\n  ]);\n\n  const child = children as React.ReactElement;\n  const childProps = child.props || {};\n  const referenceProps = getReferenceProps();\n  const updateMatchedWidthFromElement = useCallback(\n    (element: HTMLElement) => {\n      if (!popupMatchTriggerWidth) {\n        return;\n      }\n\n      setMatchedTriggerWidth((currentWidth) => {\n        const nextWidth =\n          popupMatchTriggerWidthNumber !== undefined\n            ? popupMatchTriggerWidthNumber\n            : element.getBoundingClientRect().width;\n        return currentWidth === nextWidth ? currentWidth : nextWidth;\n      });\n    },\n    [popupMatchTriggerWidth, popupMatchTriggerWidthNumber],\n  );\n  const modifiedChild = cloneElement(child, {\n    ...childProps,\n    disabled,\n    // ref: (node: HTMLDivElement) => refs.setReference(node),\n    ...referenceProps,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      updateMatchedWidthFromElement(event.currentTarget);\n      childProps.onClick?.(event);\n      const { onClick: referenceOnClick } = referenceProps;\n      if (typeof referenceOnClick === 'function') {\n        referenceOnClick(event);\n      }\n    },\n  });\n\n  const onMenuItemClick = useCallback(\n    (info: MenuInfo) => {\n      if (menu?.onClick) {\n        menu.onClick(info);\n      }\n      if (info.keepOpen) {\n        document.body.classList.remove('ald-dropdown-root-closing');\n        return;\n      }\n      onChangeOpen(false);\n    },\n    [menu, onChangeOpen],\n  );\n\n  const menuInstance = useMemo(() => {\n    const menuProps = {\n      ...menu,\n      items: menu?.items || [],\n      menuStyle: {\n        ...(popupMatchTriggerWidth\n          ? {\n              width: '100%',\n              minWidth: 0,\n              maxWidth: 'none',\n            }\n          : undefined),\n        ...menu?.menuStyle,\n      },\n      onBeforeLeafItemClick: markRootClosing,\n      rootClosing: isAnimatingOut,\n    };\n    return (\n      <Menu\n        {...menuProps}\n        onClick={onMenuItemClick}\n        externalOverflow={allowOverlap}\n      />\n    );\n  }, [\n    allowOverlap,\n    isAnimatingOut,\n    markRootClosing,\n    menu,\n    onMenuItemClick,\n    popupMatchTriggerWidth,\n  ]);\n\n  const popupElement = useMemo(() => {\n    return typeof dropdownRender === 'function'\n      ? dropdownRender(menuInstance)\n      : menuInstance;\n  }, [dropdownRender, menuInstance]);\n\n  const mergedMatchedTriggerWidth =\n    popupMatchTriggerWidthNumber ?? matchedTriggerWidth;\n  const matchedOverlayStyle =\n    popupMatchTriggerWidth && mergedMatchedTriggerWidth !== undefined\n      ? ({\n          width: `${mergedMatchedTriggerWidth}px`,\n          minWidth: 0,\n        } satisfies React.CSSProperties)\n      : undefined;\n\n  const matchedSurfaceStyle = popupMatchTriggerWidth\n    ? ({\n        width: '100%',\n        minWidth: 0,\n        maxWidth: 'none',\n      } satisfies React.CSSProperties)\n    : undefined;\n\n  const floatingSide = resolvePlacementSide(String(floatingPlacement));\n  const shouldKeepMounted = !destroyPopupOnHide || isOpen || isAnimatingOut;\n  const isPositionReady = x !== null && y !== null;\n  const overlayHidden =\n    (!isOpen && !isAnimatingOut) || (isOpen && !isPositionReady);\n  const resolvedFloatingStyles = isAnimatingOut\n    ? lastResolvedFloatingStylesRef.current ?? floatingStyles\n    : floatingStyles;\n  const resolvedFloatingSide = isAnimatingOut\n    ? lastResolvedSideRef.current\n    : floatingSide;\n\n  if (isOpen && isPositionReady) {\n    currentFloatingStylesRef.current = { ...floatingStyles };\n    currentFloatingSideRef.current = floatingSide;\n    lastResolvedFloatingStylesRef.current = { ...floatingStyles };\n    lastResolvedSideRef.current = floatingSide;\n  }\n\n  // 渲染浮动内容到自定义容器\n  const renderFloatingContent = useCallback(() => {\n    const surface = (\n      <div\n        {...(isAnimatingOut ? {} : getFloatingProps())}\n        className={cn(\n          'ald-dropdown-overlay',\n          // tw-outline-none：FloatingFocusManager 打开时会聚焦浮层容器，不抑制 outline 会渲染出蓝色焦点框\n          'tw-pointer-events-auto tw-z-[1001] tw-max-w-none tw-outline-none',\n          overlayClassName,\n          { 'ald-dropdown-overlay-hidden': overlayHidden },\n        )}\n        ref={refs.setFloating}\n        style={{\n          zIndex: popupZIndex,\n          ...resolvedFloatingStyles,\n          ...matchedOverlayStyle,\n          ...overlayStyle,\n        }}\n        aria-labelledby={headingId}\n      >\n        <div\n          className={cn(\n            'ald-dropdown-surface',\n            'tw-flex tw-flex-col tw-items-start tw-text-sm',\n          )}\n          style={{\n            ...matchedSurfaceStyle,\n            ...overlayInnerStyle,\n          }}\n          data-state={isOpen ? 'open' : 'closed'}\n          data-side={resolvedFloatingSide}\n        >\n          {popupElement}\n        </div>\n      </div>\n    );\n\n    const popupElem =\n      isAnimatingOut && !isOpen ? (\n        surface\n      ) : (\n        <FloatingFocusManager\n          context={context}\n          modal={false}\n          initialFocus={initialFocus}\n          closeOnFocusOut={closeOnFocusOut}\n        >\n          {surface}\n        </FloatingFocusManager>\n      );\n\n    const popupContainer =\n      typeof getPopupContainer === 'function'\n        ? getPopupContainer()\n        : document.body;\n    return ReactDOM.createPortal(popupElem, popupContainer);\n  }, [\n    context,\n    getFloatingProps,\n    getPopupContainer,\n    headingId,\n    popupElement,\n    refs.setFloating,\n    overlayClassName,\n    overlayStyle,\n    overlayInnerStyle,\n    matchedOverlayStyle,\n    matchedSurfaceStyle,\n    popupZIndex,\n    overlayHidden,\n    isAnimatingOut,\n    isOpen,\n    initialFocus,\n    closeOnFocusOut,\n    resolvedFloatingSide,\n    resolvedFloatingStyles,\n  ]);\n\n  const popup = shouldKeepMounted ? renderFloatingContent() : null;\n  const { setReference } = refs;\n\n  const setTargetRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) {\n        // display: contents 元素没有 box model，getBoundingClientRect() 返回零值\n        // 需要获取实际的第一个子元素作为 floating-ui 的参考元素\n        const target =\n          node.style.display === 'contents'\n            ? (node.firstElementChild as HTMLElement) || node\n            : node;\n        setTargetElement((currentTarget) =>\n          currentTarget === target ? currentTarget : target,\n        );\n        setReference(target);\n      } else {\n        setTargetElement(null);\n        setReference(null);\n      }\n    },\n    [setReference],\n  );\n\n  const content = (\n    <>\n      <span ref={setTargetRef} style={{ display: 'contents' }}>\n        {modifiedChild}\n      </span>\n      <FloatingNode id={nodeId}>{popup}</FloatingNode>\n    </>\n  );\n\n  const parentId = useFloatingParentNodeId();\n  if (!parentId) {\n    return <FloatingTree>{content}</FloatingTree>;\n  }\n\n  return content;\n}\n"],"mappings":"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"}