@aloudata/aloudata-design 2.19.5 → 3.0.0-beta.2

package/dist/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport React, {\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport {\n  AttentionTriangleLightLine,\n  CheckCircleLightLine,\n  CloseLLine,\n  InformationCircleLightLine,\n} from '../Icon';\nimport IconButton from '../IconButton';\nimport ScrollArea from '../ScrollArea';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { cn } from '../lib/utils';\n\nexport const destroyFns: Array<() => void> = [];\n\nexport interface ModalProps {\n  open?: boolean;\n  onOk?: (e: React.MouseEvent) => void;\n  onCancel?: (e: React.MouseEvent) => void;\n  afterClose?: () => void;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  icon?: React.ReactElement;\n  width?: number | string;\n  footer?: React.ReactNode | null;\n  okText?: React.ReactNode;\n  cancelText?: React.ReactNode;\n  okButtonProps?: IButtonProps;\n  cancelButtonProps?: IButtonProps;\n  okType?: ButtonType;\n  confirmLoading?: boolean;\n  maskClosable?: boolean;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  centered?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  wrapClassName?: string;\n  style?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  zIndex?: number;\n  children?: React.ReactNode;\n  paddingLess?: boolean;\n  virtualScrollBar?: boolean;\n  hideHeaderBottomBorder?: boolean;\n  responsiveBounds?: boolean;\n  fullscreen?: boolean;\n  keyboard?: boolean;\n  afterOpenChange?: (open: boolean) => void;\n  /** @internal used by static methods to pass modal type for icon styling */\n  _modalType?: string;\n}\n\nexport interface ModalFuncProps {\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  content?: React.ReactNode;\n  icon?: React.ReactElement;\n  okText?: React.ReactNode;\n  cancelText?: React.ReactNode;\n  okButtonProps?: IButtonProps;\n  cancelButtonProps?: IButtonProps;\n  okType?: ButtonType;\n  onOk?: (...args: any[]) => any;\n  onCancel?: (...args: any[]) => any;\n  width?: number | string;\n  className?: string;\n  closable?: boolean;\n  type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';\n  centered?: boolean;\n  maskClosable?: boolean;\n}\n\nconst DEFAULT_WIDTH = 552;\n\nconst ModalTitle = (\n  { icon, title, subTitle }: Pick<ModalProps, 'icon' | 'title' | 'subTitle'>,\n  type?: string,\n) => (\n  <div className=\"ald-modal-title-container tw-flex tw-items-center tw-gap-4\">\n    {icon && (\n      <div\n        className={cn(\n          'ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]',\n          type === 'info' &&\n            'ald-modal-cion-info-container tw-bg-[var(--action-primary-subtle-hover)]',\n          type === 'success' &&\n            'ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]',\n          type === 'warning' &&\n            'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n          type === 'warn' &&\n            'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n          type === 'error' &&\n            'ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]',\n          type === 'confirm' &&\n            'ald-modal-cion-confirm-container tw-bg-[var(--action-primary-subtle-hover)]',\n        )}\n      >\n        {icon}\n      </div>\n    )}\n    <div className=\"ald-modal-text-container\">\n      {title && (\n        <div\n          className={cn(\n            'ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--alias-colors-text-strong)]',\n            !subTitle && 'ald-modal-text-title-only tw-text-xl',\n          )}\n        >\n          {title}\n        </div>\n      )}\n      {subTitle && (\n        <div className=\"ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-subtle)]\">\n          {subTitle}\n        </div>\n      )}\n    </div>\n  </div>\n);\n\nfunction getIcon(\n  type: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm',\n) {\n  if (type === 'success')\n    return (\n      <CheckCircleLightLine\n        fill=\"var(--content-inverted-primary)\"\n        color=\"var(--background-positive-strong)\"\n        size={24}\n      />\n    );\n  if (type === 'error')\n    return (\n      <AttentionTriangleLightLine\n        color=\"var(--background-negative-strong)\"\n        fill=\"var(--content-inverted-primary)\"\n        size={24}\n      />\n    );\n  if (type === 'warning' || type === 'warn')\n    return (\n      <AttentionTriangleLightLine\n        color=\"var(--background-warning-strong)\"\n        size={24}\n      />\n    );\n  return (\n    <InformationCircleLightLine\n      size={24}\n      color=\"var(--interaction-default-normal)\"\n    />\n  );\n}\n\nfunction OriginModal(props: ModalProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n  const {\n    className,\n    children,\n    okType = 'primary',\n    width,\n    closeIcon,\n    subTitle,\n    okButtonProps = {},\n    cancelButtonProps = {},\n    okText = t.Modal.sure,\n    cancelText = t.Modal.cancel,\n    icon,\n    title,\n    paddingLess,\n    responsiveBounds,\n    hideHeaderBottomBorder,\n    virtualScrollBar,\n    style,\n    maskClosable = false,\n    fullscreen,\n    open = false,\n    onOk,\n    onCancel,\n    footer,\n    confirmLoading,\n    closable = true,\n    zIndex = 1000,\n    bodyStyle,\n    keyboard = true,\n    afterOpenChange,\n    _modalType,\n  } = props;\n\n  const prevOpenRef = useRef(open);\n  React.useEffect(() => {\n    if (prevOpenRef.current !== open) {\n      prevOpenRef.current = open;\n      afterOpenChange?.(open);\n    }\n  }, [open, afterOpenChange]);\n\n  const responsiveBoundsStyle = useMemo(() => {\n    if (!responsiveBounds) return {};\n    return {\n      width: 'calc(100% - 160px)',\n      maxWidth: '1680px',\n      minWidth: '1280px',\n      height: 'calc(100% - 48px)',\n      maxHeight: '900px',\n      minHeight: '640px',\n    };\n  }, [responsiveBounds]);\n\n  const mergedOkProps = { loading: confirmLoading, ...okButtonProps };\n\n  const renderFooter = () => {\n    if (footer === null) return null;\n    if (footer)\n      return (\n        <div className=\"ald-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--global-cool-grey-100)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-3\">\n          {footer}\n        </div>\n      );\n    return (\n      <div className=\"ald-modal-footer tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4\">\n        <Button\n          type=\"secondary\"\n          size=\"middle\"\n          {...cancelButtonProps}\n          onClick={onCancel}\n        >\n          {cancelText}\n        </Button>\n        <Button type={okType} size=\"middle\" {...mergedOkProps} onClick={onOk}>\n          {okText}\n        </Button>\n      </div>\n    );\n  };\n\n  return (\n    <DialogPrimitive.Root open={open}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          className=\"ald-modal-mask tw-animate-in tw-fade-in-0 tw-fixed tw-inset-0 tw-bg-black/45\"\n          style={{ zIndex }}\n        />\n        <DialogPrimitive.Content\n          className={cn(\n            'ald-modal tw-fixed tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-shadow-[var(--elevation-bottom-bottom-lg)]',\n            fullscreen\n              ? 'ald-modal-fullscreen tw-inset-0 tw-size-full tw-rounded-none'\n              : 'tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2 tw-rounded-r-75',\n            paddingLess && 'ald-modal-padding-less',\n            virtualScrollBar && 'ald-modal-virtual-scroll-bar',\n            hideHeaderBottomBorder && 'ald-modal-hide-header-bottom-border',\n            responsiveBounds && 'ald-modal-responsive-bounds',\n            className,\n          )}\n          style={{\n            ...(fullscreen\n              ? {}\n              : {\n                  width: responsiveBounds\n                    ? responsiveBoundsStyle.width\n                    : width || DEFAULT_WIDTH,\n                  ...responsiveBoundsStyle,\n                }),\n            zIndex: zIndex + 1,\n            ...style,\n          }}\n          onEscapeKeyDown={(e) => {\n            if (keyboard) {\n              onCancel?.({} as React.MouseEvent);\n            } else {\n              e.preventDefault();\n            }\n          }}\n          onPointerDownOutside={(e) => {\n            if (maskClosable) {\n              onCancel?.({} as React.MouseEvent);\n            } else {\n              e.preventDefault();\n            }\n          }}\n          onInteractOutside={(e) => {\n            if (!maskClosable) {\n              e.preventDefault();\n            }\n          }}\n        >\n          {!fullscreen && (\n            <div\n              className={cn(\n                'ald-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-4',\n                !hideHeaderBottomBorder &&\n                  'tw-border-b tw-border-solid tw-border-[var(--global-cool-grey-100)]',\n              )}\n            >\n              <DialogPrimitive.Title asChild>\n                <div className=\"tw-flex-1\">\n                  {ModalTitle({ icon, title, subTitle }, _modalType)}\n                </div>\n              </DialogPrimitive.Title>\n              {closable && (\n                <DialogPrimitive.Close asChild>\n                  <span onClick={onCancel}>\n                    {closeIcon || (\n                      <IconButton\n                        icon={<CloseLLine size={20} />}\n                        size=\"middle\"\n                      />\n                    )}\n                  </span>\n                </DialogPrimitive.Close>\n              )}\n            </div>\n          )}\n          {/* Hidden title for accessibility when fullscreen hides the header */}\n          {fullscreen && (\n            <DialogPrimitive.Title className=\"tw-sr-only\">\n              {title}\n            </DialogPrimitive.Title>\n          )}\n          <div\n            className={cn(\n              'ald-modal-body tw-flex-1 tw-text-sm tw-leading-5',\n              fullscreen\n                ? 'tw-h-full tw-overflow-hidden tw-p-0'\n                : 'tw-min-h-[130px] tw-overflow-auto',\n              !fullscreen && !responsiveBounds && 'tw-max-h-[68vh]',\n              !fullscreen && !paddingLess && 'tw-p-6',\n            )}\n            style={bodyStyle}\n          >\n            {virtualScrollBar ? (\n              <ScrollArea\n                className=\"ald-modal-body-wrap\"\n                innerClassName=\"ald-modal-body-wrap-inner\"\n              >\n                {children}\n              </ScrollArea>\n            ) : (\n              children\n            )}\n          </div>\n          {!fullscreen && renderFooter()}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n// Static method helper\nfunction createStaticModal(\n  type: ModalFuncProps['type'],\n  props: ModalFuncProps,\n) {\n  const container = document.createElement('div');\n  document.body.appendChild(container);\n  const root = createRoot(container);\n\n  let currentProps = { ...props };\n\n  const destroy = () => {\n    root.unmount();\n    container.remove();\n    const idx = destroyFns.indexOf(destroy);\n    if (idx >= 0) destroyFns.splice(idx, 1);\n  };\n\n  const update = (newProps: Partial<ModalFuncProps>) => {\n    currentProps = { ...currentProps, ...newProps };\n    render(currentProps);\n  };\n\n  const isConfirm = type === 'confirm';\n\n  const render = (p: ModalFuncProps) => {\n    const handleOk = () => {\n      p.onOk?.();\n      destroy();\n    };\n    const handleCancel = () => {\n      p.onCancel?.();\n      destroy();\n    };\n\n    root.render(\n      <OriginModal\n        open={true}\n        title={p.title}\n        subTitle={p.subTitle}\n        icon={p.icon || getIcon(type || 'info')}\n        onOk={handleOk}\n        onCancel={handleCancel}\n        okText={p.okText}\n        cancelText={p.cancelText}\n        okButtonProps={p.okButtonProps}\n        cancelButtonProps={p.cancelButtonProps}\n        okType={p.okType || (isConfirm ? 'dangerous' : 'primary')}\n        width={p.width || DEFAULT_WIDTH}\n        className={cn('ald-modal', p.className)}\n        closable={p.closable}\n        maskClosable={p.maskClosable}\n        _modalType={type}\n        footer={\n          isConfirm ? undefined : (\n            <Button\n              type=\"primary\"\n              size=\"middle\"\n              {...(p.okButtonProps || {})}\n              onClick={handleOk}\n            >\n              {p.okText || 'OK'}\n            </Button>\n          )\n        }\n      >\n        {p.content}\n      </OriginModal>,\n    );\n  };\n\n  destroyFns.push(destroy);\n  render(currentProps);\n\n  return { destroy, update };\n}\n\n// Attach static methods\ntype ModalFunc = (props: ModalFuncProps) => {\n  destroy: () => void;\n  update: (props: Partial<ModalFuncProps>) => void;\n};\n\n// ---------- useModal hook ----------\n\ninterface ModalInstance {\n  id: number;\n  type: ModalFuncProps['type'];\n  props: ModalFuncProps;\n  open: boolean;\n}\n\nexport interface ModalApiInstance {\n  destroy: () => void;\n  update: (newProps: Partial<ModalFuncProps>) => void;\n}\n\nexport interface ModalStaticFunctions {\n  info: (props: ModalFuncProps) => ModalApiInstance;\n  success: (props: ModalFuncProps) => ModalApiInstance;\n  error: (props: ModalFuncProps) => ModalApiInstance;\n  warning: (props: ModalFuncProps) => ModalApiInstance;\n  confirm: (props: ModalFuncProps) => ModalApiInstance;\n}\n\nfunction useModal(): [ModalStaticFunctions, React.ReactElement] {\n  const [modals, setModals] = useState<ModalInstance[]>([]);\n  const idCounter = useRef(0);\n\n  const removeModal = useCallback((id: number) => {\n    setModals((prev) =>\n      prev.map((m) => (m.id === id ? { ...m, open: false } : m)),\n    );\n    // Remove from DOM after animation\n    setTimeout(() => {\n      setModals((prev) => prev.filter((m) => m.id !== id));\n    }, 300);\n  }, []);\n\n  const updateModal = useCallback(\n    (id: number, newProps: Partial<ModalFuncProps>) => {\n      setModals((prev) =>\n        prev.map((m) =>\n          m.id === id ? { ...m, props: { ...m.props, ...newProps } } : m,\n        ),\n      );\n    },\n    [],\n  );\n\n  const openModal = useCallback(\n    (type: ModalFuncProps['type'], props: ModalFuncProps): ModalApiInstance => {\n      const id = ++idCounter.current;\n      const instance: ModalInstance = { id, type, props, open: true };\n      setModals((prev) => [...prev, instance]);\n\n      return {\n        destroy: () => removeModal(id),\n        update: (newProps: Partial<ModalFuncProps>) =>\n          updateModal(id, newProps),\n      };\n    },\n    [removeModal, updateModal],\n  );\n\n  const api = useMemo<ModalStaticFunctions>(\n    () => ({\n      info: (props) => openModal('info', props),\n      success: (props) => openModal('success', props),\n      error: (props) => openModal('error', props),\n      warning: (props) => openModal('warning', props),\n      confirm: (props) =>\n        openModal('confirm', { ...props, type: props.type || 'confirm' }),\n    }),\n    [openModal],\n  );\n\n  const contextHolder = (\n    <>\n      {modals.map((m) => {\n        const isConfirmType = m.type === 'confirm';\n        const handleOk = () => {\n          m.props.onOk?.();\n          removeModal(m.id);\n        };\n        const handleCancel = () => {\n          m.props.onCancel?.();\n          removeModal(m.id);\n        };\n        return (\n          <OriginModal\n            key={m.id}\n            open={m.open}\n            title={m.props.title}\n            subTitle={m.props.subTitle}\n            icon={m.props.icon || getIcon(m.type || 'info')}\n            onOk={handleOk}\n            onCancel={handleCancel}\n            okText={m.props.okText}\n            cancelText={m.props.cancelText}\n            okButtonProps={m.props.okButtonProps}\n            cancelButtonProps={m.props.cancelButtonProps}\n            okType={m.props.okType || (isConfirmType ? 'dangerous' : 'primary')}\n            width={m.props.width || DEFAULT_WIDTH}\n            className={cn('ald-modal', m.props.className)}\n            closable={m.props.closable}\n            maskClosable={m.props.maskClosable}\n            _modalType={m.type}\n            footer={\n              isConfirmType ? undefined : (\n                <Button\n                  type=\"primary\"\n                  size=\"middle\"\n                  {...(m.props.okButtonProps || {})}\n                  onClick={handleOk}\n                >\n                  {m.props.okText || 'OK'}\n                </Button>\n              )\n            }\n          >\n            {m.props.content}\n          </OriginModal>\n        );\n      })}\n    </>\n  );\n\n  return [api, contextHolder];\n}\n\n// ---------- end useModal ----------\n\nconst Modal = OriginModal as typeof OriginModal & {\n  info: ModalFunc;\n  success: ModalFunc;\n  error: ModalFunc;\n  warning: ModalFunc;\n  confirm: ModalFunc;\n  destroyAll: () => void;\n  useModal: typeof useModal;\n  config: (config: any) => void;\n};\n\nModal.info = (props) => createStaticModal('info', props);\nModal.success = (props) => createStaticModal('success', props);\nModal.error = (props) => createStaticModal('error', props);\nModal.warning = (props) => createStaticModal('warning', props);\nModal.confirm = (props) =>\n  createStaticModal('confirm', { ...props, type: props.type || 'confirm' });\n\nModal.destroyAll = () => {\n  while (destroyFns.length) {\n    const close = destroyFns.pop();\n    if (close) close();\n  }\n};\n\nModal.useModal = useModal;\nModal.config = () => {};\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/OverflowCount/index.d.ts

@@ -1,28 +1,13 @@
-import React from 'react';
+import { default as React } from 'react';
 import { BadgeProps } from '../Badge';
 interface OverflowCountProps<T> {
-    /**
-     * 数据
-     */
     data: T[];
-    /**
-     * 渲染单条数据的方法
-     */
     renderItem: (item: T) => React.ReactNode;
-    /**
-     * 徽标样式
-     */
     badge?: Omit<BadgeProps, 'count'>;
-    /**
-     * 浮窗样式
-     */
     popupClassName?: string;
-    /**
-     * 后缀元素
-     */
     suffix?: React.ReactNode;
     size?: 'small' | 'default';
 }
-declare function OverflowCount<T = unknown>(props: OverflowCountProps<T>): React.JSX.Element;
+declare function OverflowCount<T = unknown>(props: OverflowCountProps<T>): import("react/jsx-runtime").JSX.Element;
 export default OverflowCount;
 export declare function prefixCls(className: string): string;

package/dist/OverflowCount/index.js

@@ -1,77 +1,90 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import classNames from 'classnames';
-import Overflow from 'rc-overflow';
-import React, { useCallback, useState } from 'react';
-import Badge from "../Badge";
-import Popover from "../Popover";
+import { cn } from "../lib/utils.js";
+import Badge from "../Badge/index.js";
+import Popover from "../Popover/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/OverflowCount/index.tsx
 function OverflowCount(props) {
-  var data = props.data,
-    propsRenderItem = props.renderItem,
-    _props$popupClassName = props.popupClassName,
-    popupClassName = _props$popupClassName === void 0 ? '' : _props$popupClassName,
-    badge = props.badge,
-    size = props.size,
-    suffix = props.suffix;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPopupOpen = _useState2[0],
-    setIsPopupOpen = _useState2[1];
-  var itemClassName = classNames(prefixCls('item'), _defineProperty({}, prefixCls('item-small'), size === 'small'));
-  var renderItem = useCallback(function (item) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: itemClassName
-    }, propsRenderItem(item));
-  }, [propsRenderItem, itemClassName]);
-  var renderRest = useCallback(function (omittedItems) {
-    var itemNodes = omittedItems.map(function (item, index) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: index,
-        className: itemClassName
-      }, propsRenderItem(item));
-    });
-    if (omittedItems.length === 0) {
-      // 因为没有其他 api 监听超过的量的变化，只能在 render 阶段处理
-      setIsPopupOpen(false);
-    }
-    return /*#__PURE__*/React.createElement(Popover, {
-      content: /*#__PURE__*/React.createElement("div", {
-        className: classNames(prefixCls('popup-container'), _defineProperty({}, prefixCls('popup-container-small'), size === 'small'), popupClassName)
-      }, itemNodes),
-      trigger: 'hover',
-      open: isPopupOpen,
-      onOpenChange: function onOpenChange(open) {
-        return setIsPopupOpen(open);
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: prefixCls('rest-btn')
-    }, /*#__PURE__*/React.createElement(Badge, _extends({
-      count: "+".concat(omittedItems.length),
-      status: "info"
-    }, badge))));
-  }, [badge, popupClassName, propsRenderItem, itemClassName, size, isPopupOpen]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls('container'))
-  }, /*#__PURE__*/React.createElement(Overflow, {
-    data: data,
-    renderItem: renderItem,
-    renderRest: renderRest,
-    maxCount: "responsive",
-    className: prefixCls('overflow'),
-    suffix: suffix
-  }));
+	const { data, renderItem: propsRenderItem, popupClassName = "", badge, size, suffix } = props;
+	const containerRef = useRef(null);
+	const [visibleCount, setVisibleCount] = useState(data.length);
+	const [isPopupOpen, setIsPopupOpen] = useState(false);
+	const itemClassName = cn(prefixCls("item"), "tw-flex", size === "small" ? [prefixCls("item-small"), "tw-pr-1"] : "tw-pr-1.5");
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const measure = () => {
+			const children = Array.from(container.querySelectorAll(`.${prefixCls("item")}`));
+			if (children.length === 0) {
+				setVisibleCount(data.length);
+				return;
+			}
+			const containerRight = container.getBoundingClientRect().right;
+			let count = 0;
+			for (const child of children) if (child.getBoundingClientRect().right <= containerRight - 40) count++;
+			else break;
+			setVisibleCount(Math.max(1, count));
+		};
+		measure();
+		const ro = new window.ResizeObserver(measure);
+		ro.observe(container);
+		return () => ro.disconnect();
+	}, [data.length]);
+	const visibleItems = data.slice(0, visibleCount);
+	const omittedItems = data.slice(visibleCount);
+	const renderRest = useCallback(() => {
+		if (omittedItems.length === 0) return null;
+		const itemNodes = omittedItems.map((item, index) => /* @__PURE__ */ jsx("div", {
+			className: itemClassName,
+			children: propsRenderItem(item)
+		}, index));
+		return /* @__PURE__ */ jsx(Popover, {
+			content: /* @__PURE__ */ jsx("div", {
+				className: cn(prefixCls("popup-container"), "tw-flex tw-max-h-[300px] tw-w-[360px] tw-flex-wrap tw-overflow-y-auto", size === "small" ? [prefixCls("popup-container-small"), "tw-gap-y-1"] : "tw-gap-y-1.5", popupClassName),
+				children: itemNodes
+			}),
+			trigger: "hover",
+			open: isPopupOpen,
+			onOpenChange: (open) => setIsPopupOpen(open),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn(prefixCls("rest-btn"), "tw-flex tw-cursor-pointer tw-items-center"),
+				children: /* @__PURE__ */ jsx(Badge, {
+					count: `+${omittedItems.length}`,
+					status: "info",
+					...badge
+				})
+			})
+		});
+	}, [
+		omittedItems,
+		badge,
+		popupClassName,
+		propsRenderItem,
+		itemClassName,
+		size,
+		isPopupOpen
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(prefixCls("container"), "tw-w-full"),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: cn(prefixCls("overflow"), "tw-flex tw-flex-nowrap tw-items-center tw-overflow-hidden"),
+			children: [
+				visibleItems.map((item, i) => /* @__PURE__ */ jsx("div", {
+					className: itemClassName,
+					children: propsRenderItem(item)
+				}, i)),
+				renderRest(),
+				suffix
+			]
+		})
+	});
 }
-export default OverflowCount;
-var ALD_PREFIX = 'ald-overflow-count';
-export function prefixCls(className) {
-  return "".concat(ALD_PREFIX, "-").concat(className);
-}
+var ALD_PREFIX = "ald-overflow-count";
+function prefixCls(className) {
+	return `${ALD_PREFIX}-${className}`;
+}
+//#endregion
+export { OverflowCount as default };
+
+//# sourceMappingURL=index.js.map

package/dist/OverflowCount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/OverflowCount/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport Badge, { BadgeProps } from '../Badge';\nimport { cn } from '../lib/utils';\nimport Popover from '../Popover';\n\ninterface OverflowCountProps<T> {\n  data: T[];\n  renderItem: (item: T) => React.ReactNode;\n  badge?: Omit<BadgeProps, 'count'>;\n  popupClassName?: string;\n  suffix?: React.ReactNode;\n  size?: 'small' | 'default';\n}\n\nfunction OverflowCount<T = unknown>(props: OverflowCountProps<T>) {\n  const {\n    data,\n    renderItem: propsRenderItem,\n    popupClassName = '',\n    badge,\n    size,\n    suffix,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n  const itemClassName = cn(\n    prefixCls('item'),\n    'tw-flex',\n    size === 'small' ? [prefixCls('item-small'), 'tw-pr-1'] : 'tw-pr-1.5',\n  );\n\n  // Measure which items fit\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const measure = () => {\n      const children = Array.from(\n        container.querySelectorAll(`.${prefixCls('item')}`),\n      );\n      if (children.length === 0) {\n        setVisibleCount(data.length);\n        return;\n      }\n      const containerRight = container.getBoundingClientRect().right;\n      let count = 0;\n      for (const child of children) {\n        const rect = (child as HTMLElement).getBoundingClientRect();\n        if (rect.right <= containerRight - 40) {\n          count++;\n        } else {\n          break;\n        }\n      }\n      setVisibleCount(Math.max(1, count));\n    };\n\n    measure();\n    const ro = new window.ResizeObserver(measure);\n    ro.observe(container);\n    return () => ro.disconnect();\n  }, [data.length]);\n\n  const visibleItems = data.slice(0, visibleCount);\n  const omittedItems = data.slice(visibleCount);\n\n  const renderRest = useCallback(() => {\n    if (omittedItems.length === 0) return null;\n\n    const itemNodes = omittedItems.map((item, index) => (\n      <div key={index} className={itemClassName}>\n        {propsRenderItem(item)}\n      </div>\n    ));\n\n    return (\n      <Popover\n        content={\n          <div\n            className={cn(\n              prefixCls('popup-container'),\n              'tw-flex tw-max-h-[300px] tw-w-[360px] tw-flex-wrap tw-overflow-y-auto',\n              size === 'small'\n                ? [prefixCls('popup-container-small'), 'tw-gap-y-1']\n                : 'tw-gap-y-1.5',\n              popupClassName,\n            )}\n          >\n            {itemNodes}\n          </div>\n        }\n        trigger=\"hover\"\n        open={isPopupOpen}\n        onOpenChange={(open) => setIsPopupOpen(open)}\n      >\n        <div\n          className={cn(\n            prefixCls('rest-btn'),\n            'tw-flex tw-cursor-pointer tw-items-center',\n          )}\n        >\n          <Badge count={`+${omittedItems.length}`} status=\"info\" {...badge} />\n        </div>\n      </Popover>\n    );\n  }, [\n    omittedItems,\n    badge,\n    popupClassName,\n    propsRenderItem,\n    itemClassName,\n    size,\n    isPopupOpen,\n  ]);\n\n  return (\n    <div className={cn(prefixCls('container'), 'tw-w-full')}>\n      <div\n        ref={containerRef}\n        className={cn(\n          prefixCls('overflow'),\n          'tw-flex tw-flex-nowrap tw-items-center tw-overflow-hidden',\n        )}\n      >\n        {visibleItems.map((item, i) => (\n          <div key={i} className={itemClassName}>\n            {propsRenderItem(item)}\n          </div>\n        ))}\n        {renderRest()}\n        {suffix}\n      </div>\n    </div>\n  );\n}\n\nexport default OverflowCount;\n\nconst ALD_PREFIX = 'ald-overflow-count';\nexport function prefixCls(className: string) {\n  return `${ALD_PREFIX}-${className}`;\n}\n"],"mappings":";;;;;;AAcA,SAAS,cAA2B,OAA8B;CAChE,MAAM,EACJ,MACA,YAAY,iBACZ,iBAAiB,IACjB,OACA,MACA,WACE;CAEJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK,OAAO;CAC7D,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CAErD,MAAM,gBAAgB,GACpB,UAAU,OAAO,EACjB,WACA,SAAS,UAAU,CAAC,UAAU,aAAa,EAAE,UAAU,GAAG,YAC3D;AAGD,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,gBAAgB;GACpB,MAAM,WAAW,MAAM,KACrB,UAAU,iBAAiB,IAAI,UAAU,OAAO,GAAG,CACpD;AACD,OAAI,SAAS,WAAW,GAAG;AACzB,oBAAgB,KAAK,OAAO;AAC5B;;GAEF,MAAM,iBAAiB,UAAU,uBAAuB,CAAC;GACzD,IAAI,QAAQ;AACZ,QAAK,MAAM,SAAS,SAElB,KADc,MAAsB,uBAAuB,CAClD,SAAS,iBAAiB,GACjC;OAEA;AAGJ,mBAAgB,KAAK,IAAI,GAAG,MAAM,CAAC;;AAGrC,WAAS;EACT,MAAM,KAAK,IAAI,OAAO,eAAe,QAAQ;AAC7C,KAAG,QAAQ,UAAU;AACrB,eAAa,GAAG,YAAY;IAC3B,CAAC,KAAK,OAAO,CAAC;CAEjB,MAAM,eAAe,KAAK,MAAM,GAAG,aAAa;CAChD,MAAM,eAAe,KAAK,MAAM,aAAa;CAE7C,MAAM,aAAa,kBAAkB;AACnC,MAAI,aAAa,WAAW,EAAG,QAAO;EAEtC,MAAM,YAAY,aAAa,KAAK,MAAM,UACxC,oBAAC,OAAD;GAAiB,WAAW;aACzB,gBAAgB,KAAK;GAClB,EAFI,MAEJ,CACN;AAEF,SACE,oBAAC,SAAD;GACE,SACE,oBAAC,OAAD;IACE,WAAW,GACT,UAAU,kBAAkB,EAC5B,yEACA,SAAS,UACL,CAAC,UAAU,wBAAwB,EAAE,aAAa,GAClD,gBACJ,eACD;cAEA;IACG,CAAA;GAER,SAAQ;GACR,MAAM;GACN,eAAe,SAAS,eAAe,KAAK;aAE5C,oBAAC,OAAD;IACE,WAAW,GACT,UAAU,WAAW,EACrB,4CACD;cAED,oBAAC,OAAD;KAAO,OAAO,IAAI,aAAa;KAAU,QAAO;KAAO,GAAI;KAAS,CAAA;IAChE,CAAA;GACE,CAAA;IAEX;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU,YAAY,EAAE,YAAY;YACrD,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,GACT,UAAU,WAAW,EACrB,4DACD;aALH;IAOG,aAAa,KAAK,MAAM,MACvB,oBAAC,OAAD;KAAa,WAAW;eACrB,gBAAgB,KAAK;KAClB,EAFI,EAEJ,CACN;IACD,YAAY;IACZ;IACG;;EACF,CAAA;;AAMV,IAAM,aAAa;AACnB,SAAgB,UAAU,WAAmB;AAC3C,QAAO,GAAG,WAAW,GAAG"}

package/dist/Pagination/PageSizeChanger.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface IPageSizeChangerProps {
     pageSize: number;
     pageSizeOptions: (string | number)[];

package/dist/Pagination/PageSizeChanger.js

@@ -1,50 +1,31 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import React, { useContext } from 'react';
-import AldSelect from "../AldSelect";
-import { LocaleContext, getTranslator } from "../locale/default";
-var PageSizeChanger = function PageSizeChanger(_ref) {
-  var pageSize = _ref.pageSize,
-    pageSizeOptions = _ref.pageSizeOptions,
-    onChange = _ref.onChange,
-    className = _ref.className,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _useContext = useContext(LocaleContext),
-    locale = _useContext.locale;
-  var t = getTranslator(locale);
-
-  // 将 pageSizeOptions 转换为 Select 可用的选项格式
-  // 确保当前 pageSize 值在选项中存在
-  var optionSet = new Set([].concat(_toConsumableArray(pageSizeOptions), [pageSize]));
-  var allOptions = Array.from(optionSet).sort(function (a, b) {
-    return Number(a) - Number(b);
-  });
-  var selectOptions = allOptions.map(function (option) {
-    return {
-      label: "".concat(option, " ").concat(t.Pagination.itemsPerPage),
-      value: String(option)
-    };
-  });
-  var handleChange = function handleChange(value) {
-    var newSize = parseInt(value, 10);
-    if (!isNaN(newSize) && newSize !== pageSize) {
-      onChange(newSize);
-    }
-  };
-  var selectProps = {
-    value: String(pageSize),
-    onChange: handleChange,
-    options: selectOptions,
-    width: 112,
-    disabled: disabled,
-    className: "ald-pagination-page-size-changer ".concat(className || '').trim(),
-    placeholder: t.Pagination.selectPageSize
-  };
-  return /*#__PURE__*/React.createElement(AldSelect, selectProps);
+import { LocaleContext, getTranslator } from "../locale/default.js";
+import Select_default from "../Select/index.js";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Pagination/PageSizeChanger.tsx
+var PageSizeChanger = ({ pageSize, pageSizeOptions, onChange, className, disabled = false }) => {
+	const { locale } = useContext(LocaleContext);
+	const t = getTranslator(locale);
+	const optionSet = new Set([...pageSizeOptions, pageSize]);
+	const selectOptions = Array.from(optionSet).sort((a, b) => Number(a) - Number(b)).map((option) => ({
+		label: `${option} ${t.Pagination.itemsPerPage}`,
+		value: String(option)
+	}));
+	const handleChange = (value) => {
+		const newSize = parseInt(value, 10);
+		if (!isNaN(newSize) && newSize !== pageSize) onChange(newSize);
+	};
+	return /* @__PURE__ */ jsx(Select_default, {
+		value: String(pageSize),
+		onChange: handleChange,
+		options: selectOptions,
+		width: 112,
+		disabled,
+		className: `ald-pagination-page-size-changer ${className || ""}`.trim(),
+		placeholder: t.Pagination.selectPageSize
+	});
 };
-export default PageSizeChanger;
+//#endregion
+export { PageSizeChanger as default };
+
+//# sourceMappingURL=PageSizeChanger.js.map

package/dist/Pagination/PageSizeChanger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSizeChanger.js","names":[],"sources":["../../src/Pagination/PageSizeChanger.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport Select from '../Select';\nimport { ISelectProps } from '../Select/interface';\nimport { LocaleContext, getTranslator } from '../locale/default';\n\ninterface IPageSizeChangerProps {\n  // 当前 pageSize\n  pageSize: number;\n  // pageSize 选项\n  pageSizeOptions: (string | number)[];\n  // pageSize 变化的回调\n  onChange: (size: number) => void;\n  // 自定义样式类名\n  className?: string;\n  // 是否禁用\n  disabled?: boolean;\n}\n\nconst PageSizeChanger: React.FC<IPageSizeChangerProps> = ({\n  pageSize,\n  pageSizeOptions,\n  onChange,\n  className,\n  disabled = false,\n}) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  // 将 pageSizeOptions 转换为 Select 可用的选项格式\n  // 确保当前 pageSize 值在选项中存在\n  const optionSet = new Set([...pageSizeOptions, pageSize]);\n  const allOptions = Array.from(optionSet).sort(\n    (a, b) => Number(a) - Number(b),\n  );\n  const selectOptions = allOptions.map((option) => ({\n    label: `${option} ${t.Pagination.itemsPerPage}`,\n    value: String(option),\n  }));\n\n  const handleChange = (value: string) => {\n    const newSize = parseInt(value, 10);\n    if (!isNaN(newSize) && newSize !== pageSize) {\n      onChange(newSize);\n    }\n  };\n\n  const selectProps: ISelectProps = {\n    value: String(pageSize),\n    onChange: handleChange,\n    options: selectOptions,\n    width: 112,\n    disabled,\n    className: `ald-pagination-page-size-changer ${className || ''}`.trim(),\n    placeholder: t.Pagination.selectPageSize,\n  };\n\n  return <Select {...selectProps} />;\n};\n\nexport default PageSizeChanger;\n"],"mappings":";;;;;AAkBA,IAAM,mBAAoD,EACxD,UACA,iBACA,UACA,WACA,WAAW,YACP;CACJ,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAI/B,MAAM,YAAY,IAAI,IAAI,CAAC,GAAG,iBAAiB,SAAS,CAAC;CAIzD,MAAM,gBAHa,MAAM,KAAK,UAAU,CAAC,MACtC,GAAG,MAAM,OAAO,EAAE,GAAG,OAAO,EAAE,CAChC,CACgC,KAAK,YAAY;EAChD,OAAO,GAAG,OAAO,GAAG,EAAE,WAAW;EACjC,OAAO,OAAO,OAAO;EACtB,EAAE;CAEH,MAAM,gBAAgB,UAAkB;EACtC,MAAM,UAAU,SAAS,OAAO,GAAG;AACnC,MAAI,CAAC,MAAM,QAAQ,IAAI,YAAY,SACjC,UAAS,QAAQ;;AAcrB,QAAO,oBAAC,gBAAD;EATL,OAAO,OAAO,SAAS;EACvB,UAAU;EACV,SAAS;EACT,OAAO;EACP;EACA,WAAW,oCAAoC,aAAa,KAAK,MAAM;EACvE,aAAa,EAAE,WAAW;EAGM,CAAA"}

package/dist/Pagination/index.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { IPaginationProps } from './types';
-declare function Pagination(props: IPaginationProps): React.JSX.Element | null;
+import { IPaginationProps } from './types.js';
+declare function Pagination(props: IPaginationProps): import("react/jsx-runtime").JSX.Element | null;
 export default Pagination;
 /**
  * 获取在安全范围内的当前页数