@aloudata/aloudata-design 3.0.0-beta.17 → 3.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/Button/index.js +1 -1
  2. package/dist/Button/index.js.map +1 -1
  3. package/dist/Select/BaseSelect.js +8 -4
  4. package/dist/Select/BaseSelect.js.map +1 -1
  5. package/dist/Select/Selector/MultipleSelector.js +10 -6
  6. package/dist/Select/Selector/MultipleSelector.js.map +1 -1
  7. package/dist/Select/Selector/index.d.ts +2 -0
  8. package/dist/Select/Selector/index.js.map +1 -1
  9. package/dist/Select/utils/getWidthStyle.js +1 -4
  10. package/dist/Select/utils/getWidthStyle.js.map +1 -1
  11. package/dist/aloudata-design.css +1 -1
  12. package/package.json +2 -1
  13. package/dist/_utils/SimpleOverflow.d.ts +0 -14
  14. package/dist/_utils/SimpleOverflow.js +0 -67
  15. package/dist/_utils/SimpleOverflow.js.map +0 -1
package/dist/Button/index.js CHANGED
@@ -142,7 +142,7 @@ function Button(props, ref) {
142
142
  disabled: !!isDisabled,
143
143
  block: !!block,
144
144
  shape
145
- }), ghost && "!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent", ghost && type === "primary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "dangerous" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "secondary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "inverse" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0 !tw-bg-[var(--action-ghost-normal)]", ghost && type === "primary" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-primary-subtle-hover)]", ghost && type === "dangerous" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-destructive-hover)]", ghost && type === "secondary" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-hover)]", ghost && type === "inverse" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-inverted-hover)]", ghost && type === "primary" && "!tw-text-[var(--action-primary-normal)]", ghost && type === "dangerous" && "!tw-text-[var(--action-destructive-normal)]", ghost && type === "secondary" && "!tw-text-[var(--action-neutral-normal)]", ghost && type === "inverse" && "!tw-text-[var(--action-inverted-normal)]", isIconOnly && "tw-aspect-square !tw-min-w-0 !tw-px-0", compactClasses, className);
145
+ }), ghost && "!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent", ghost && type === "primary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "dangerous" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "secondary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "inverse" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "primary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]", ghost && type === "dangerous" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]", ghost && type === "secondary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]", ghost && type === "inverse" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]", ghost && type === "primary" && "!tw-text-[var(--action-primary-normal)]", ghost && type === "dangerous" && "!tw-text-[var(--action-destructive-normal)]", ghost && type === "secondary" && "!tw-text-[var(--action-neutral-normal)]", ghost && type === "inverse" && "!tw-text-[var(--action-inverted-normal)]", isIconOnly && "tw-aspect-square !tw-px-0", isIconOnly && size === "small" && "!tw-min-w-7", isIconOnly && size === "middle" && "!tw-min-w-8", isIconOnly && size === "large" && "!tw-min-w-10", compactClasses, className);
146
146
  const contentClasses = cn("tw-inline-flex tw-items-center tw-gap-1", ghost && type === "inverse" && size === "middle" && "tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]");
147
147
  const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
148
148
  iconNode,
package/dist/Button/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React, { forwardRef, useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ChevronDownLine, LoadingLine } from '../Icon';\nimport { cn } from '../lib/utils';\nimport { useCompactItemContext } from '../Space/CompactContext';\n\nexport const btnPrefix = 'ald-btn';\n\nexport type ButtonType =\n | 'primary'\n | 'secondary'\n | 'dangerous'\n | 'text'\n | 'inverse'\n | 'link';\nexport type Size = 'small' | 'middle' | 'large';\nexport interface IButtonProps {\n type?: ButtonType;\n size?: Size;\n disabled?: boolean;\n icon?: React.ReactNode;\n shape?: 'circle' | 'default';\n href?: string;\n target?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n loading?: boolean | { delay?: number };\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n block?: boolean;\n htmlType?: 'submit' | 'button' | 'reset';\n id?: string;\n tabIndex?: number;\n title?: string;\n 'aria-label'?: string;\n ghost?: boolean;\n danger?: boolean;\n color?: string;\n showArrow?: boolean;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n return ['small', 'large'].includes(s)\n ? `${btnPrefix}-${s}`\n : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n return s;\n}\nexport const setIcon = (\n iconNode: React.ReactElement,\n loading: boolean | { delay?: number },\n) => {\n if (loading) {\n return (\n <LoadingLine\n className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n size={'1em'}\n color=\"currentColor\"\n />\n );\n }\n\n if (iconNode) {\n const p: Record<string, string | number> = {\n className: '',\n fill: 'currentColor',\n ...iconNode.props,\n };\n p.size = '1em';\n return React.cloneElement(iconNode, p);\n }\n return <></>;\n};\n\nconst buttonVariants = cva(\n [\n btnPrefix,\n 'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n 'tw-border tw-border-solid',\n 'focus-visible:tw-outline-none',\n ],\n {\n variants: {\n type: {\n primary: [\n `${btnPrefix}-primary`,\n 'tw-border-transparent tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-primary-hover)]',\n 'active:tw-bg-[var(--action-primary-active)]',\n ],\n secondary: [\n `${btnPrefix}-secondary`,\n 'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]',\n 'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n dangerous: [\n `${btnPrefix}-dangerous`,\n 'tw-border-transparent tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-destructive-hover)]',\n 'active:tw-bg-[var(--action-destructive-active)]',\n ],\n text: [\n `${btnPrefix}-text`,\n 'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n 'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n 'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n inverse: [\n `${btnPrefix}-inverse`,\n 'tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]',\n 'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n 'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n ],\n link: [\n `${btnPrefix}-link`,\n 'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n 'hover:tw-text-[var(--action-primary-hover)]',\n 'active:tw-text-[var(--action-primary-active)]',\n ],\n },\n size: {\n small: [\n `${btnPrefix}-small`,\n 'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n middle: [\n `${btnPrefix}-middle`,\n 'tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n large: [\n `${btnPrefix}-large`,\n 'tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n },\n disabled: {\n true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n false: '',\n },\n block: {\n true: 'tw-w-full',\n false: '',\n },\n shape: {\n circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n default: '',\n },\n },\n defaultVariants: {\n type: 'secondary',\n size: 'middle',\n disabled: false,\n block: false,\n shape: 'default',\n },\n },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n 'primary',\n 'secondary',\n 'dangerous',\n 'text',\n 'inverse',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n const {\n type: rawType = 'secondary',\n size: customSize,\n shape = 'default',\n loading = false,\n disabled,\n icon,\n className,\n children,\n href,\n target,\n onClick,\n block,\n htmlType = 'button',\n style,\n ghost,\n showArrow = false,\n ...rest\n } = props;\n\n // Radix Trigger asChild 会传入 type=\"button\"（HTML button type），与组件的 type 变体冲突\n // 当收到非法变体值时回退到 'secondary'\n const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n ? (rawType as ButtonType)\n : 'secondary';\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext(btnPrefix);\n const size = customSize || compactSize || contentSize || 'middle';\n\n const [innerLoading, setInnerLoading] = useState(false);\n\n useEffect(() => {\n if (typeof loading === 'object' && loading.delay) {\n const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n return () => clearTimeout(timer);\n }\n setInnerLoading(!!loading);\n }, [loading]);\n\n const isDisabled = innerLoading || mergedDisabled;\n const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n // all compact items: remove border-radius on inner edges\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '!tw-rounded-l-none',\n !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n '!tw-rounded-r-none',\n // merge borders via negative margin (except first item)\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '-tw-ml-px',\n )\n : undefined;\n\n const isIconOnly = !!icon && !children && !showArrow;\n\n const classes = cn(\n buttonVariants({\n type,\n size,\n disabled: !!isDisabled,\n block: !!block,\n shape,\n }),\n ghost &&\n '!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent',\n ghost &&\n type === 'primary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'dangerous' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'secondary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0 !tw-bg-[var(--action-ghost-normal)]',\n ghost &&\n type === 'primary' &&\n '!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n ghost &&\n type === 'secondary' &&\n '!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-hover)]',\n ghost &&\n type === 'inverse' &&\n '!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-inverted-hover)]',\n ghost && type === 'primary' && '!tw-text-[var(--action-primary-normal)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-text-[var(--action-destructive-normal)]',\n ghost && type === 'secondary' && '!tw-text-[var(--action-neutral-normal)]',\n ghost && type === 'inverse' && '!tw-text-[var(--action-inverted-normal)]',\n // icon-only: square button, no min-width, centered padding\n isIconOnly && 'tw-aspect-square !tw-min-w-0 !tw-px-0',\n compactClasses,\n className,\n );\n\n const contentClasses = cn(\n 'tw-inline-flex tw-items-center tw-gap-1',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n 'tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]',\n );\n\n const arrowNode = showArrow ? (\n <span className=\"ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center\">\n <ChevronDownLine size={16} />\n </span>\n ) : null;\n\n const buttonContent = (\n <>\n {iconNode}\n {children && <span className={contentClasses}>{children}</span>}\n {arrowNode}\n </>\n );\n\n if (href) {\n return (\n <a\n {...rest}\n className={classes}\n style={style}\n href={isDisabled ? undefined : href}\n target={target}\n ref={ref as React.Ref<HTMLAnchorElement>}\n onClick={isDisabled ? undefined : onClick}\n aria-disabled={isDisabled || undefined}\n >\n {buttonContent}\n </a>\n );\n }\n\n return (\n <button\n {...rest}\n type={\n htmlType === 'submit'\n ? 'submit'\n : htmlType === 'reset'\n ? 'reset'\n : 'button'\n }\n className={classes}\n style={style}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n >\n {buttonContent}\n </button>\n );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;;AAQA,IAAa,YAAY;AAiDzB,IAAa,WACX,UACA,YACG;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAIN,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,YAAY,OACZ,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;CAE3C,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SACE,2GACF,SACE,SAAS,aACT,SAAS,YACT,4IACF,SACE,SAAS,eACT,SAAS,YACT,4IACF,SACE,SAAS,eACT,SAAS,YACT,4IACF,SACE,SAAS,aACT,SAAS,YACT,gLACF,SACE,SAAS,aACT,0FACF,SACE,SAAS,eACT,6FACF,SACE,SAAS,eACT,iFACF,SACE,SAAS,aACT,0FACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAE/B,cAAc,yCACd,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,2CACA,SACE,SAAS,aACT,SAAS,YACT,iGACH;CAQD,MAAM,gBACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,YAAY,oBAAC,QAAD;GAAM,WAAW;GAAiB;GAAgB,CAAA;EATjD,YAChB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA;GACxB,CAAA,GACL;EAOC,EAAA,CAAA;AAGL,KAAI,KACF,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAE5B;EACC,CAAA;AAIR,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAER;EACM,CAAA;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React, { forwardRef, useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ChevronDownLine, LoadingLine } from '../Icon';\nimport { cn } from '../lib/utils';\nimport { useCompactItemContext } from '../Space/CompactContext';\n\nexport const btnPrefix = 'ald-btn';\n\nexport type ButtonType =\n | 'primary'\n | 'secondary'\n | 'dangerous'\n | 'text'\n | 'inverse'\n | 'link';\nexport type Size = 'small' | 'middle' | 'large';\nexport interface IButtonProps {\n type?: ButtonType;\n size?: Size;\n disabled?: boolean;\n icon?: React.ReactNode;\n shape?: 'circle' | 'default';\n href?: string;\n target?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n loading?: boolean | { delay?: number };\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n block?: boolean;\n htmlType?: 'submit' | 'button' | 'reset';\n id?: string;\n tabIndex?: number;\n title?: string;\n 'aria-label'?: string;\n ghost?: boolean;\n danger?: boolean;\n color?: string;\n showArrow?: boolean;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n return ['small', 'large'].includes(s)\n ? `${btnPrefix}-${s}`\n : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n return s;\n}\nexport const setIcon = (\n iconNode: React.ReactElement,\n loading: boolean | { delay?: number },\n) => {\n if (loading) {\n return (\n <LoadingLine\n className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n size={'1em'}\n color=\"currentColor\"\n />\n );\n }\n\n if (iconNode) {\n const p: Record<string, string | number> = {\n className: '',\n fill: 'currentColor',\n ...iconNode.props,\n };\n p.size = '1em';\n return React.cloneElement(iconNode, p);\n }\n return <></>;\n};\n\nconst buttonVariants = cva(\n [\n btnPrefix,\n 'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n 'tw-border tw-border-solid',\n 'focus-visible:tw-outline-none',\n ],\n {\n variants: {\n type: {\n primary: [\n `${btnPrefix}-primary`,\n 'tw-border-transparent tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-primary-hover)]',\n 'active:tw-bg-[var(--action-primary-active)]',\n ],\n secondary: [\n `${btnPrefix}-secondary`,\n 'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]',\n 'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n dangerous: [\n `${btnPrefix}-dangerous`,\n 'tw-border-transparent tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-destructive-hover)]',\n 'active:tw-bg-[var(--action-destructive-active)]',\n ],\n text: [\n `${btnPrefix}-text`,\n 'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n 'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n 'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n inverse: [\n `${btnPrefix}-inverse`,\n 'tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]',\n 'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n 'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n ],\n link: [\n `${btnPrefix}-link`,\n 'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n 'hover:tw-text-[var(--action-primary-hover)]',\n 'active:tw-text-[var(--action-primary-active)]',\n ],\n },\n size: {\n small: [\n `${btnPrefix}-small`,\n 'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n middle: [\n `${btnPrefix}-middle`,\n 'tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n large: [\n `${btnPrefix}-large`,\n 'tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n },\n disabled: {\n true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n false: '',\n },\n block: {\n true: 'tw-w-full',\n false: '',\n },\n shape: {\n circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n default: '',\n },\n },\n defaultVariants: {\n type: 'secondary',\n size: 'middle',\n disabled: false,\n block: false,\n shape: 'default',\n },\n },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n 'primary',\n 'secondary',\n 'dangerous',\n 'text',\n 'inverse',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n const {\n type: rawType = 'secondary',\n size: customSize,\n shape = 'default',\n loading = false,\n disabled,\n icon,\n className,\n children,\n href,\n target,\n onClick,\n block,\n htmlType = 'button',\n style,\n ghost,\n showArrow = false,\n ...rest\n } = props;\n\n // Radix Trigger asChild 会传入 type=\"button\"（HTML button type），与组件的 type 变体冲突\n // 当收到非法变体值时回退到 'secondary'\n const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n ? (rawType as ButtonType)\n : 'secondary';\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext(btnPrefix);\n const size = customSize || compactSize || contentSize || 'middle';\n\n const [innerLoading, setInnerLoading] = useState(false);\n\n useEffect(() => {\n if (typeof loading === 'object' && loading.delay) {\n const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n return () => clearTimeout(timer);\n }\n setInnerLoading(!!loading);\n }, [loading]);\n\n const isDisabled = innerLoading || mergedDisabled;\n const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n // all compact items: remove border-radius on inner edges\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '!tw-rounded-l-none',\n !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n '!tw-rounded-r-none',\n // merge borders via negative margin (except first item)\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '-tw-ml-px',\n )\n : undefined;\n\n const isIconOnly = !!icon && !children && !showArrow;\n\n const classes = cn(\n buttonVariants({\n type,\n size,\n disabled: !!isDisabled,\n block: !!block,\n shape,\n }),\n ghost &&\n '!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent',\n ghost &&\n type === 'primary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'dangerous' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'secondary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'primary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n ghost &&\n type === 'secondary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]',\n ghost &&\n type === 'inverse' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]',\n ghost && type === 'primary' && '!tw-text-[var(--action-primary-normal)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-text-[var(--action-destructive-normal)]',\n ghost && type === 'secondary' && '!tw-text-[var(--action-neutral-normal)]',\n ghost && type === 'inverse' && '!tw-text-[var(--action-inverted-normal)]',\n // icon-only 方形按钮：宽度由 aspect-ratio 从 height 反推，但该反推值\n // 不构成 flex shrink 的下限——父行 max-content 被低估时（同行存在\n // width:auto Select / RangePicker 等子树时 Chromium 恒少算几 px），\n // 缺口会全压到本按钮上把它压扁。必须按 size 显式钳 min-width 兜底\n // （v2/antd 的 icon-only 即固定 width）；带 ! 以盖过 shape=circle\n // 的 tw-min-w-0\n isIconOnly && 'tw-aspect-square !tw-px-0',\n isIconOnly && size === 'small' && '!tw-min-w-7',\n isIconOnly && size === 'middle' && '!tw-min-w-8',\n isIconOnly && size === 'large' && '!tw-min-w-10',\n compactClasses,\n className,\n );\n\n const contentClasses = cn(\n 'tw-inline-flex tw-items-center tw-gap-1',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n 'tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]',\n );\n\n const arrowNode = showArrow ? (\n <span className=\"ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center\">\n <ChevronDownLine size={16} />\n </span>\n ) : null;\n\n const buttonContent = (\n <>\n {iconNode}\n {children && <span className={contentClasses}>{children}</span>}\n {arrowNode}\n </>\n );\n\n if (href) {\n return (\n <a\n {...rest}\n className={classes}\n style={style}\n href={isDisabled ? undefined : href}\n target={target}\n ref={ref as React.Ref<HTMLAnchorElement>}\n onClick={isDisabled ? undefined : onClick}\n aria-disabled={isDisabled || undefined}\n >\n {buttonContent}\n </a>\n );\n }\n\n return (\n <button\n {...rest}\n type={\n htmlType === 'submit'\n ? 'submit'\n : htmlType === 'reset'\n ? 'reset'\n : 'button'\n }\n className={classes}\n style={style}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n >\n {buttonContent}\n </button>\n );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;;AAQA,IAAa,YAAY;AAiDzB,IAAa,WACX,UACA,YACG;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAIN,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,YAAY,OACZ,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;CAE3C,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SACE,2GACF,SACE,SAAS,aACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,aACT,SAAS,YACT,4JACF,SACE,SAAS,aACT,sEACF,SACE,SAAS,eACT,yEACF,SACE,SAAS,eACT,6DACF,SACE,SAAS,aACT,sEACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAO/B,cAAc,6BACd,cAAc,SAAS,WAAW,eAClC,cAAc,SAAS,YAAY,eACnC,cAAc,SAAS,WAAW,gBAClC,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,2CACA,SACE,SAAS,aACT,SAAS,YACT,iGACH;CAQD,MAAM,gBACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,YAAY,oBAAC,QAAD;GAAM,WAAW;GAAiB;GAAgB,CAAA;EATjD,YAChB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA;GACxB,CAAA,GACL;EAOC,EAAA,CAAA;AAGL,KAAI,KACF,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAE5B;EACC,CAAA;AAIR,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAER;EACM,CAAA;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
package/dist/Select/BaseSelect.js CHANGED
@@ -73,6 +73,7 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
73
73
  onOpenChange
74
74
  ]);
75
75
  const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] = useState(false);
76
+ const [overflowCollapsed, setOverflowCollapsed] = useState(false);
76
77
  const onSelectorRemove = (val) => {
77
78
  onDisplayValuesChange(displayValues.filter((i) => i !== val), {
78
79
  type: "remove",
@@ -88,7 +89,8 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
88
89
  disabled,
89
90
  [`${mergedStatus}`]: !!mergedStatus,
90
91
  "multiple-responsive": isResponsiveMode,
91
- "multiple-default": isMultipleMode && !isResponsiveMode
92
+ "multiple-default": isMultipleMode && !isResponsiveMode,
93
+ "overflow-collapsed": overflowCollapsed && width === "auto" && !_.isEmpty(displayValues)
92
94
  }), className, compactItemClassnames);
93
95
  const showMenu = React$1.useMemo(() => {
94
96
  if (!displayMenu) return;
@@ -96,8 +98,8 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
96
98
  ...displayMenu,
97
99
  onClick: (info) => {
98
100
  displayMenu?.onClick?.(info);
99
- if (displayMenu && !isMultipleMode) {
100
- console.log("menu onClick", info);
101
+ if (isMultipleMode) info.keepOpen = info.keepOpen ?? true;
102
+ else if (displayMenu) {
101
103
  onToggleOpen(false);
102
104
  setFocus(false);
103
105
  }
@@ -132,6 +134,7 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
132
134
  className: mergedClassName,
133
135
  style: {
134
136
  ...widthStyle,
137
+ ...width === "auto" && _.isEmpty(displayValues) ? { flexShrink: 0 } : {},
135
138
  ...style
136
139
  },
137
140
  ref: selectRef,
@@ -178,7 +181,8 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
178
181
  displayValues,
179
182
  onToggleOpen,
180
183
  onRemove: onSelectorRemove,
181
- showResponsiveSelectedSection
184
+ showResponsiveSelectedSection,
185
+ onOverflowCollapsedChange: setOverflowCollapsed
182
186
  })
183
187
  ]
184
188
  })
package/dist/Select/BaseSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n points?: string[];\n offset?: (number | string)[];\n targetOffset?: (number | string)[];\n overflow?: { adjustX?: boolean; adjustY?: boolean };\n _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n BaseSelectRef,\n DisplayValueType,\n ISelectProps,\n LabelInValueType,\n SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n | 'multiple'\n | {\n type: 'multiple';\n responsive?: boolean;\n maxRows?: number;\n showSelectedSection?: boolean;\n };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n label: React.ReactNode;\n value: any;\n disabled: boolean;\n onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n // >>> MISC\n omitDomProps?: string[];\n\n // >>> Value\n displayValues: LabelInValueType[];\n onDisplayValuesChange: (\n values: LabelInValueType[],\n info: {\n type: 'add' | 'remove' | 'clear';\n values: LabelInValueType[];\n },\n ) => void;\n\n // >>> Active\n /** Current dropdown list active item string value */\n activeValue?: string;\n /** Link search input with target element */\n activeDescendantId?: string;\n onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n BaseSelectProps,\n keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n extends BaseSelectPrivateProps,\n ISelectProps,\n React.AriaAttributes {\n className?: string;\n style?: React.CSSProperties;\n notFoundContent?: React.ReactNode;\n onClear?: () => void;\n innerSearchValue?: string;\n setInnerSearchValue?: (value: string) => void;\n displayMenu?: SelectMenuProps;\n // >>> Open\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n onOptionSelect?: (val: RawValueType) => void;\n\n // >>> Icons\n allowClear?: boolean;\n showArrow?: boolean;\n suffixIcon?: React.ReactNode;\n\n // >>> Dropdown\n dropdownAlign?: AlignType;\n placement?: PlacementType;\n getPopupContainer?: () => HTMLElement;\n\n // >>> Focus\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n\n // >>> Rest Events\n onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n onInputKeyDown?: React.KeyboardEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n >;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n if (!mode || mode === 'multiple') {\n return false;\n }\n\n return (\n typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n );\n}\nconst BaseSelect = React.forwardRef(\n (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n const {\n id,\n className,\n // Value\n displayValues,\n onDisplayValuesChange,\n displayMenu,\n notFoundContent,\n onClear,\n width,\n mode,\n status: customStatus,\n onOptionSelect,\n onClick,\n size: customSize,\n borderLess = false,\n // Status\n disabled,\n placeholder,\n\n // Open\n open,\n defaultOpen,\n onOpenChange,\n showSearch,\n innerSearchValue,\n setInnerSearchValue,\n // Icons\n allowClear,\n showArrow = true,\n prefix,\n suffixIcon,\n dropdownRender,\n overlayStyle,\n dropdownStyle,\n popupMatchSelectWidth = true,\n placement,\n popupClassName,\n allowOverlap,\n style,\n ...restProps\n // Rest Props\n } = props;\n const setClassNames = prefixCls('select');\n const selectRef = useRef<HTMLDivElement>(null);\n const widthStyle = getWidthStyle(width);\n const dropdownRef = useRef<RefTriggerProps>(null);\n const isResponsiveMode = isResponsive(mode);\n const isMultipleMode = isMultiple(mode);\n /** Used for component focused management */\n const contentSize = useContext(SizeContext);\n const { direction } = React.useContext(ConfigContext);\n // ===================== Compact Item =====================\n const { compactSize, compactItemClassnames } = useCompactItemContext(\n 'ald-select',\n direction,\n );\n const size = compactSize || customSize || contentSize || 'middle';\n const {\n status: contextStatus,\n // hasFeedback,\n // isFormItemInput,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n\n const mergedStatus = customStatus || contextStatus || undefined;\n\n // =========================== Imperative ===========================\n React.useImperativeHandle(ref, () => ({\n focus: () => setFocus(true),\n blur: () => setFocus(false),\n open: () => onToggleOpen(true),\n close: () => {\n console.log('ref close');\n onToggleOpen(false);\n },\n }));\n const [focus, setFocus] = useState(false);\n const [isHover, setIsHover] = useState(false);\n // ============================== Open ==============================\n const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n defaultValue: defaultOpen,\n value: open,\n });\n const mergedOpen = innerOpen;\n const onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n setFocus(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [mergedOpen, disabled, setInnerOpen, onOpenChange],\n );\n const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n useState(false);\n\n // ============================ Selector ============================\n const onSelectorRemove = (val: DisplayValueType) => {\n const newValues = displayValues.filter((i) => i !== val);\n\n onDisplayValuesChange(newValues, {\n type: 'remove',\n values: [\n {\n label: val.label,\n value: val.value as RawValueType,\n },\n ],\n });\n };\n\n const mergedClassName = cn(\n setClassNames('beta-ald-select', size, {\n active: mergedOpen || focus,\n borderless: borderLess,\n disabled: disabled,\n [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n }),\n className,\n compactItemClassnames,\n );\n const showMenu = React.useMemo(() => {\n if (!displayMenu) {\n return undefined;\n }\n\n return {\n ...displayMenu,\n onClick: (info: MenuInfo) => {\n displayMenu?.onClick?.(info);\n if (displayMenu && !isMultipleMode) {\n console.log('menu onClick', info);\n onToggleOpen(false);\n setFocus(false);\n }\n setIsHover(false);\n onOptionSelect?.(info.key);\n },\n };\n }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n const onSelectClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n onClick?.(e);\n },\n [disabled, onClick],\n );\n React.useEffect(() => {\n const element = selectRef.current;\n if (element) {\n const handleMouseOver = () => setIsHover(true);\n const handleMouseOut = () => setIsHover(false);\n\n element.addEventListener('mouseover', handleMouseOver);\n element.addEventListener('mouseout', handleMouseOut);\n\n return () => {\n element.removeEventListener('mouseover', handleMouseOver);\n element.removeEventListener('mouseout', handleMouseOut);\n };\n }\n }, []);\n return (\n <div\n className={mergedClassName}\n style={{\n ...widthStyle,\n ...style,\n }}\n ref={selectRef}\n id={id}\n onClick={onSelectClick}\n >\n <SelectTrigger\n {...restProps}\n open={!!mergedOpen}\n notFoundContent={notFoundContent}\n menu={showMenu}\n ref={dropdownRef}\n showSearch={showSearch}\n searchValue={innerSearchValue}\n setInnerSearchValue={setInnerSearchValue}\n popupMatchSelectWidth={popupMatchSelectWidth}\n overlayClassName={popupClassName}\n // @ts-ignore\n dropdownRender={dropdownRender}\n overlayStyle={overlayStyle || dropdownStyle}\n placement={placement}\n allowOverlap={allowOverlap}\n onOpenChange={(open) => {\n if (isResponsiveMode) {\n if (\n !mergedOpen &&\n !showResponsiveSelectedSection &&\n displayValues.length > 0 &&\n isShowSelectedSection(mode)\n ) {\n setShowResponsiveSelectedSection(true);\n } else {\n onToggleOpen(open);\n }\n } else {\n onToggleOpen(open);\n }\n }}\n >\n {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n <div className={cn(setClassNames('trigger'), 'ant-select-selector')}>\n {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n {_.isEmpty(displayValues) && (\n <div\n className={cn(\n setClassNames('placeholder'),\n 'ant-select-selection-placeholder',\n )}\n >\n {placeholder}\n </div>\n )}\n {!_.isEmpty(displayValues) && (\n <Selector\n {...restProps}\n suffixIcon={suffixIcon}\n size={size}\n disabled={disabled}\n mode={mode}\n dropdownRef={dropdownRef}\n displayValues={displayValues}\n onToggleOpen={onToggleOpen}\n onRemove={onSelectorRemove}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n ></Selector>\n )}\n </div>\n </SelectTrigger>\n <Suffix\n showArrow={showArrow}\n allowClear={allowClear}\n disabled={disabled}\n isHover={isHover}\n onClear={() => {\n onToggleOpen(false);\n\n onDisplayValuesChange([], {\n type: 'clear',\n values: displayValues,\n });\n onClear?.();\n }}\n isActive={innerOpen}\n icon={suffixIcon}\n displayValues={displayValues}\n ></Suffix>\n </div>\n );\n },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}
1
+ {"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n points?: string[];\n offset?: (number | string)[];\n targetOffset?: (number | string)[];\n overflow?: { adjustX?: boolean; adjustY?: boolean };\n _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n BaseSelectRef,\n DisplayValueType,\n ISelectProps,\n LabelInValueType,\n SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n | 'multiple'\n | {\n type: 'multiple';\n responsive?: boolean;\n maxRows?: number;\n showSelectedSection?: boolean;\n };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n label: React.ReactNode;\n value: any;\n disabled: boolean;\n onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n // >>> MISC\n omitDomProps?: string[];\n\n // >>> Value\n displayValues: LabelInValueType[];\n onDisplayValuesChange: (\n values: LabelInValueType[],\n info: {\n type: 'add' | 'remove' | 'clear';\n values: LabelInValueType[];\n },\n ) => void;\n\n // >>> Active\n /** Current dropdown list active item string value */\n activeValue?: string;\n /** Link search input with target element */\n activeDescendantId?: string;\n onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n BaseSelectProps,\n keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n extends BaseSelectPrivateProps,\n ISelectProps,\n React.AriaAttributes {\n className?: string;\n style?: React.CSSProperties;\n notFoundContent?: React.ReactNode;\n onClear?: () => void;\n innerSearchValue?: string;\n setInnerSearchValue?: (value: string) => void;\n displayMenu?: SelectMenuProps;\n // >>> Open\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n onOptionSelect?: (val: RawValueType) => void;\n\n // >>> Icons\n allowClear?: boolean;\n showArrow?: boolean;\n suffixIcon?: React.ReactNode;\n\n // >>> Dropdown\n dropdownAlign?: AlignType;\n placement?: PlacementType;\n getPopupContainer?: () => HTMLElement;\n\n // >>> Focus\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n\n // >>> Rest Events\n onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n onInputKeyDown?: React.KeyboardEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n >;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n if (!mode || mode === 'multiple') {\n return false;\n }\n\n return (\n typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n );\n}\nconst BaseSelect = React.forwardRef(\n (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n const {\n id,\n className,\n // Value\n displayValues,\n onDisplayValuesChange,\n displayMenu,\n notFoundContent,\n onClear,\n width,\n mode,\n status: customStatus,\n onOptionSelect,\n onClick,\n size: customSize,\n borderLess = false,\n // Status\n disabled,\n placeholder,\n\n // Open\n open,\n defaultOpen,\n onOpenChange,\n showSearch,\n innerSearchValue,\n setInnerSearchValue,\n // Icons\n allowClear,\n showArrow = true,\n prefix,\n suffixIcon,\n dropdownRender,\n overlayStyle,\n dropdownStyle,\n popupMatchSelectWidth = true,\n placement,\n popupClassName,\n allowOverlap,\n style,\n ...restProps\n // Rest Props\n } = props;\n const setClassNames = prefixCls('select');\n const selectRef = useRef<HTMLDivElement>(null);\n const widthStyle = getWidthStyle(width);\n const dropdownRef = useRef<RefTriggerProps>(null);\n const isResponsiveMode = isResponsive(mode);\n const isMultipleMode = isMultiple(mode);\n /** Used for component focused management */\n const contentSize = useContext(SizeContext);\n const { direction } = React.useContext(ConfigContext);\n // ===================== Compact Item =====================\n const { compactSize, compactItemClassnames } = useCompactItemContext(\n 'ald-select',\n direction,\n );\n const size = compactSize || customSize || contentSize || 'middle';\n const {\n status: contextStatus,\n // hasFeedback,\n // isFormItemInput,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n\n const mergedStatus = customStatus || contextStatus || undefined;\n\n // =========================== Imperative ===========================\n React.useImperativeHandle(ref, () => ({\n focus: () => setFocus(true),\n blur: () => setFocus(false),\n open: () => onToggleOpen(true),\n close: () => {\n console.log('ref close');\n onToggleOpen(false);\n },\n }));\n const [focus, setFocus] = useState(false);\n const [isHover, setIsHover] = useState(false);\n // ============================== Open ==============================\n const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n defaultValue: defaultOpen,\n value: open,\n });\n const mergedOpen = innerOpen;\n const onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n setFocus(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [mergedOpen, disabled, setInnerOpen, onOpenChange],\n );\n const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n useState(false);\n // 多选 responsive 进入 -1 收纳态（仅\"首 tag + +N\"）时为 true，\n // width:auto 下据此给根节点加 overflow-collapsed 钳住 min-width 链，\n // 抵抗父 flex 行因 intrinsic 低估造成的假压缩（详见 ald-select.css 对应段）\n const [overflowCollapsed, setOverflowCollapsed] = useState(false);\n\n // ============================ Selector ============================\n const onSelectorRemove = (val: DisplayValueType) => {\n const newValues = displayValues.filter((i) => i !== val);\n\n onDisplayValuesChange(newValues, {\n type: 'remove',\n values: [\n {\n label: val.label,\n value: val.value as RawValueType,\n },\n ],\n });\n };\n\n const mergedClassName = cn(\n setClassNames('beta-ald-select', size, {\n active: mergedOpen || focus,\n borderless: borderLess,\n disabled: disabled,\n [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n // 仅 width:auto 生效：固定宽度下 -1 收纳态的收缩省略是预期行为，\n // 钳 min-width 反而会把固定宽撑破\n 'overflow-collapsed':\n overflowCollapsed && width === 'auto' && !_.isEmpty(displayValues),\n }),\n className,\n compactItemClassnames,\n );\n const showMenu = React.useMemo(() => {\n if (!displayMenu) {\n return undefined;\n }\n\n return {\n ...displayMenu,\n onClick: (info: MenuInfo) => {\n displayMenu?.onClick?.(info);\n if (isMultipleMode) {\n // 多选默认选中后不收起下拉：Dropdown 在 menu.onClick 之后读\n // info.keepOpen 决定是否 onChangeOpen(false)，不设则每次点击都被\n // 当成关闭信号。用 ?? 保留用户在自己的 onClick 里显式设 false 的能力\n info.keepOpen = info.keepOpen ?? true;\n } else if (displayMenu) {\n onToggleOpen(false);\n setFocus(false);\n }\n setIsHover(false);\n onOptionSelect?.(info.key);\n },\n };\n }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n const onSelectClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n onClick?.(e);\n },\n [disabled, onClick],\n );\n React.useEffect(() => {\n const element = selectRef.current;\n if (element) {\n const handleMouseOver = () => setIsHover(true);\n const handleMouseOut = () => setIsHover(false);\n\n element.addEventListener('mouseover', handleMouseOver);\n element.addEventListener('mouseout', handleMouseOut);\n\n return () => {\n element.removeEventListener('mouseover', handleMouseOver);\n element.removeEventListener('mouseout', handleMouseOut);\n };\n }\n }, []);\n return (\n <div\n className={mergedClassName}\n style={{\n ...widthStyle,\n // width:auto 且无选中值时锁 shrink：Chromium 对该子树给父 flex 行的\n // intrinsic 宽度贡献恒少约 14px，父行按低估值布局后回头压缩根节点，\n // placeholder 右侧会被裁；有选中值时必须保持可压缩，rc-overflow\n // 才能在父行变窄时把放不下的 tag 收纳成 \"+N\"\n ...(width === 'auto' && _.isEmpty(displayValues)\n ? { flexShrink: 0 }\n : {}),\n ...style,\n }}\n ref={selectRef}\n id={id}\n onClick={onSelectClick}\n >\n <SelectTrigger\n {...restProps}\n open={!!mergedOpen}\n notFoundContent={notFoundContent}\n menu={showMenu}\n ref={dropdownRef}\n showSearch={showSearch}\n searchValue={innerSearchValue}\n setInnerSearchValue={setInnerSearchValue}\n popupMatchSelectWidth={popupMatchSelectWidth}\n overlayClassName={popupClassName}\n // @ts-ignore\n dropdownRender={dropdownRender}\n overlayStyle={overlayStyle || dropdownStyle}\n placement={placement}\n allowOverlap={allowOverlap}\n onOpenChange={(open) => {\n if (isResponsiveMode) {\n if (\n !mergedOpen &&\n !showResponsiveSelectedSection &&\n displayValues.length > 0 &&\n isShowSelectedSection(mode)\n ) {\n setShowResponsiveSelectedSection(true);\n } else {\n onToggleOpen(open);\n }\n } else {\n onToggleOpen(open);\n }\n }}\n >\n {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n <div className={cn(setClassNames('trigger'), 'ant-select-selector')}>\n {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n {_.isEmpty(displayValues) && (\n <div\n className={cn(\n setClassNames('placeholder'),\n 'ant-select-selection-placeholder',\n )}\n >\n {placeholder}\n </div>\n )}\n {!_.isEmpty(displayValues) && (\n <Selector\n {...restProps}\n suffixIcon={suffixIcon}\n size={size}\n disabled={disabled}\n mode={mode}\n dropdownRef={dropdownRef}\n displayValues={displayValues}\n onToggleOpen={onToggleOpen}\n onRemove={onSelectorRemove}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n onOverflowCollapsedChange={setOverflowCollapsed}\n ></Selector>\n )}\n </div>\n </SelectTrigger>\n <Suffix\n showArrow={showArrow}\n allowClear={allowClear}\n disabled={disabled}\n isHover={isHover}\n onClear={() => {\n onToggleOpen(false);\n\n onDisplayValuesChange([], {\n type: 'clear',\n values: displayValues,\n });\n onClear?.();\n }}\n isActive={innerOpen}\n icon={suffixIcon}\n displayValues={displayValues}\n ></Suffix>\n </div>\n );\n },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}
package/dist/Select/Selector/MultipleSelector.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { cn } from "../../lib/utils.js";
2
2
  import Tag from "../../Tag/index.js";
3
3
  import ScrollArea_default from "../../ScrollArea/index.js";
4
- import SimpleOverflow from "../../_utils/SimpleOverflow.js";
5
4
  import MultipleResponsiveSelectedSection from "./MultipleResponsiveSelectedSection.js";
6
5
  import { isMultiple, isResponsive, isShowSelectedSection } from "../BaseSelect.js";
7
- import { useMemo, useState } from "react";
6
+ import { useEffect, useMemo, useState } from "react";
8
7
  import { jsx, jsxs } from "react/jsx-runtime";
9
8
  import _ from "lodash";
9
+ import Overflow from "rc-overflow";
10
10
  //#region src/Select/Selector/MultipleSelector.tsx
11
11
  var overflowPrefixCls = "beta-ald-select-selector-overflow";
12
12
  var tagHeight = 20;
@@ -16,14 +16,18 @@ var onPreventMouseDown = (event) => {
16
16
  event.stopPropagation();
17
17
  };
18
18
  function itemKey(value) {
19
- return String((value.key ?? value.value) || "");
19
+ return (value.key ?? value.value) || "";
20
20
  }
21
21
  function MultipleSelector(props) {
22
- const { displayValues, tagRender, onRemove, onToggleOpen, mode, disabled, maxTagPlaceholder, showResponsiveSelectedSection, dropdownRef, suffixIcon } = props;
22
+ const { displayValues, tagRender, onRemove, onToggleOpen, mode, disabled, maxTagPlaceholder, showResponsiveSelectedSection, dropdownRef, suffixIcon, onOverflowCollapsedChange } = props;
23
23
  const innerMaxTagPlaceholder = (omittedValues) => {
24
24
  return `+ ${omittedValues.length === displayValues.length ? omittedValues.length - 1 : omittedValues.length}`;
25
25
  };
26
26
  const [showItemIndex, setShowItemIndex] = useState(0);
27
+ const isCollapsed = showItemIndex === -1 && displayValues.length > 0;
28
+ useEffect(() => {
29
+ onOverflowCollapsedChange?.(isCollapsed);
30
+ }, [isCollapsed, onOverflowCollapsedChange]);
27
31
  const customizeRenderSelector = (value, content, itemDisabled, closable, onClose, isPreview, uniqueKey) => {
28
32
  const onMouseDown = (e) => {
29
33
  onPreventMouseDown(e);
@@ -91,10 +95,10 @@ function MultipleSelector(props) {
91
95
  className: "beta-ald-select-selector-overflow-item-first",
92
96
  children: renderItem(displayValues[0], 0)
93
97
  }),
94
- /* @__PURE__ */ jsx(SimpleOverflow, {
98
+ /* @__PURE__ */ jsx(Overflow, {
95
99
  prefixCls: overflowPrefixCls,
96
100
  data: displayValues,
97
- renderItem,
101
+ renderItem: (item, info) => renderItem(item, info?.index),
98
102
  className: cn({ "beta-ald-select-selector-overflow-hidden": showItemIndex === -1 && displayValues.length === 1 }),
99
103
  renderRest,
100
104
  suffix: null,
package/dist/Select/Selector/MultipleSelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultipleSelector.js","names":[],"sources":["../../../src/Select/Selector/MultipleSelector.tsx"],"sourcesContent":["import React, { RefObject, useMemo, useState } from 'react';\nimport { SelectorProps } from './index';\nimport Tag from '../../Tag';\nimport { DisplayValueType, RawValueType } from '../interface';\nimport {\n CustomTagProps,\n isMultiple,\n isResponsive,\n isShowSelectedSection,\n} from '../BaseSelect';\nimport ScrollArea from '../../ScrollArea';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport Overflow from '../../_utils/SimpleOverflow';\nimport MultipleResponsiveSelectedSection from './MultipleResponsiveSelectedSection';\nimport { RefTriggerProps } from '../SelectTrigger';\nconst overflowPrefixCls = 'beta-ald-select-selector-overflow';\nconst tagHeight = 20;\nconst gap = 4;\ninterface MultipleSelectorProps extends SelectorProps {\n // Event\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;\n maxTagPlaceholder?:\n | React.ReactNode\n | ((omittedValues: DisplayValueType[]) => React.ReactNode);\n dropdownRef: RefObject<RefTriggerProps>;\n}\nconst onPreventMouseDown = (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n};\n\nfunction itemKey(value: DisplayValueType): string {\n return String((value.key ?? value.value) || '');\n}\n\nexport default function MultipleSelector(props: MultipleSelectorProps) {\n const {\n displayValues,\n tagRender,\n onRemove,\n onToggleOpen,\n mode,\n disabled,\n maxTagPlaceholder,\n showResponsiveSelectedSection,\n dropdownRef,\n suffixIcon,\n } = props;\n const innerMaxTagPlaceholder = (omittedValues: DisplayValueType[]) => {\n return `+ ${\n omittedValues.length === displayValues.length\n ? omittedValues.length - 1\n : omittedValues.length\n }`;\n };\n const [showItemIndex, setShowItemIndex] = useState(0);\n const customizeRenderSelector = (\n value: RawValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: (event?: React.MouseEvent) => void,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => {\n const onMouseDown = (e: React.MouseEvent) => {\n onPreventMouseDown(e);\n };\n\n return (\n <span\n className=\"beta-ald-select-custom-tag-render-wrapper\"\n onMouseDown={onMouseDown}\n key={uniqueKey ?? value}\n >\n {tagRender?.(\n {\n label: content,\n value,\n disabled: itemDisabled,\n closable: isPreview ? false : closable ?? false,\n onClose: onClose ?? (() => {}),\n },\n isPreview,\n )}\n </span>\n );\n };\n const defaultRenderSelector = (\n item: DisplayValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: React.MouseEventHandler,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => (\n <Tag\n disabled={itemDisabled}\n key={uniqueKey ?? item?.value}\n size=\"small\"\n closable={isPreview ? false : closable}\n onClose={(e) => {\n onPreventMouseDown(e);\n onClose?.(e);\n }}\n >\n {content}\n </Tag>\n );\n const isResponsiveMode = isResponsive(mode);\n const showSelectedSection = isShowSelectedSection(mode);\n const renderItem = (valueItem: DisplayValueType, index?: number) => {\n const { disabled: itemDisabled, label, value } = valueItem;\n const closable = !disabled && !itemDisabled;\n let isPreview = !showResponsiveSelectedSection;\n if (!isResponsiveMode) {\n isPreview = false;\n }\n if (!showSelectedSection) {\n isPreview = false;\n }\n if (disabled) {\n isPreview = true;\n }\n const displayLabel: React.ReactNode = label;\n\n const onClose = (event?: React.MouseEvent) => {\n if (event) {\n event.stopPropagation();\n }\n onRemove(valueItem);\n };\n if (_.isNil(value)) {\n return null;\n }\n\n // 生成唯一的 key，如果 value 可能重复，使用 value + index 组合\n const uniqueKey =\n valueItem.key ??\n (value !== undefined && value !== null\n ? `${value}-${index ?? ''}`\n : `item-${index ?? ''}`);\n\n return typeof tagRender === 'function'\n ? customizeRenderSelector(\n value,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n )\n : defaultRenderSelector(\n valueItem,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n );\n };\n\n const renderRest = (omittedValues: DisplayValueType[]) => {\n if (displayValues.length === 1) {\n return null;\n }\n\n const content =\n typeof maxTagPlaceholder === 'function'\n ? maxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n )\n : innerMaxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n );\n\n return typeof maxTagPlaceholder === 'function'\n ? content\n : defaultRenderSelector({ title: content }, content, false);\n };\n const onVisibleChange = (visibleCount: number) => {\n setShowItemIndex(visibleCount);\n };\n const maxHeight = useMemo(() => {\n if (isMultiple(mode)) {\n let maxRows: number | undefined;\n if (typeof mode === 'object') {\n maxRows = mode.maxRows;\n }\n if (!maxRows) {\n // 2.5行高+2行间距\n return 2.5 * tagHeight + 2 * gap;\n } else {\n // 总行高+总行间距\n return maxRows * tagHeight + (maxRows - 1) * gap;\n }\n }\n\n return undefined;\n }, [mode]);\n if (isResponsiveMode) {\n return (\n <div className=\"beta-ald-select-selector beta-ald-select-selector-multiple-responsive\">\n {showItemIndex === -1 && displayValues.length > 0 && (\n <div className=\"beta-ald-select-selector-overflow-item-first\">\n {renderItem(displayValues[0], 0)}\n </div>\n )}\n <Overflow\n prefixCls={overflowPrefixCls}\n data={displayValues}\n renderItem={renderItem}\n className={cn({\n 'beta-ald-select-selector-overflow-hidden':\n showItemIndex === -1 && displayValues.length === 1,\n })}\n renderRest={renderRest}\n suffix={null}\n itemKey={itemKey}\n maxCount=\"responsive\"\n onVisibleChange={onVisibleChange}\n />\n {showResponsiveSelectedSection && (\n <MultipleResponsiveSelectedSection\n displayValues={displayValues}\n renderItem={renderItem}\n maxHeight={maxHeight}\n suffixIcon={suffixIcon}\n onToggleOpen={onToggleOpen}\n dropdownRef={dropdownRef}\n />\n )}\n </div>\n );\n }\n\n return (\n <ScrollArea\n innerClassName=\"beta-ald-select-selector-multiple-default-inner\"\n className=\"beta-ald-select-selector beta-ald-select-selector-multiple-default\"\n innerStyle={{\n maxHeight: maxHeight,\n }}\n >\n <div className=\"beta-ald-select-selector-multiple-default-tags\">\n {displayValues.map((item, index) => renderItem(item, index))}\n </div>\n </ScrollArea>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"MultipleSelector.js","names":[],"sources":["../../../src/Select/Selector/MultipleSelector.tsx"],"sourcesContent":["import React, { RefObject, useEffect, useMemo, useState } from 'react';\nimport { SelectorProps } from './index';\nimport Tag from '../../Tag';\nimport { DisplayValueType, RawValueType } from '../interface';\nimport {\n CustomTagProps,\n isMultiple,\n isResponsive,\n isShowSelectedSection,\n} from '../BaseSelect';\nimport ScrollArea from '../../ScrollArea';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\n// 与 v2 保持一致直接用 rc-overflow：自研 SimpleOverflow 的\"临时显示再测量\"\n// 会扰动布局并被 ResizeObserver 再次触发，挤压态下持续抖动；\n// rc-overflow 隐藏项保持渲染（绝对定位+透明）可随时测量，测量与渲染单向无环\nimport Overflow from 'rc-overflow';\nimport MultipleResponsiveSelectedSection from './MultipleResponsiveSelectedSection';\nimport { RefTriggerProps } from '../SelectTrigger';\nconst overflowPrefixCls = 'beta-ald-select-selector-overflow';\nconst tagHeight = 20;\nconst gap = 4;\ninterface MultipleSelectorProps extends SelectorProps {\n // Event\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;\n maxTagPlaceholder?:\n | React.ReactNode\n | ((omittedValues: DisplayValueType[]) => React.ReactNode);\n dropdownRef: RefObject<RefTriggerProps>;\n}\nconst onPreventMouseDown = (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n};\n\nfunction itemKey(value: DisplayValueType): React.Key {\n return (value.key ?? value.value) || '';\n}\n\nexport default function MultipleSelector(props: MultipleSelectorProps) {\n const {\n displayValues,\n tagRender,\n onRemove,\n onToggleOpen,\n mode,\n disabled,\n maxTagPlaceholder,\n showResponsiveSelectedSection,\n dropdownRef,\n suffixIcon,\n onOverflowCollapsedChange,\n } = props;\n const innerMaxTagPlaceholder = (omittedValues: DisplayValueType[]) => {\n return `+ ${\n omittedValues.length === displayValues.length\n ? omittedValues.length - 1\n : omittedValues.length\n }`;\n };\n const [showItemIndex, setShowItemIndex] = useState(0);\n const isCollapsed = showItemIndex === -1 && displayValues.length > 0;\n useEffect(() => {\n onOverflowCollapsedChange?.(isCollapsed);\n }, [isCollapsed, onOverflowCollapsedChange]);\n const customizeRenderSelector = (\n value: RawValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: (event?: React.MouseEvent) => void,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => {\n const onMouseDown = (e: React.MouseEvent) => {\n onPreventMouseDown(e);\n };\n\n return (\n <span\n className=\"beta-ald-select-custom-tag-render-wrapper\"\n onMouseDown={onMouseDown}\n key={uniqueKey ?? value}\n >\n {tagRender?.(\n {\n label: content,\n value,\n disabled: itemDisabled,\n closable: isPreview ? false : closable ?? false,\n onClose: onClose ?? (() => {}),\n },\n isPreview,\n )}\n </span>\n );\n };\n const defaultRenderSelector = (\n item: DisplayValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: React.MouseEventHandler,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => (\n <Tag\n disabled={itemDisabled}\n key={uniqueKey ?? item?.value}\n size=\"small\"\n closable={isPreview ? false : closable}\n onClose={(e) => {\n onPreventMouseDown(e);\n onClose?.(e);\n }}\n >\n {content}\n </Tag>\n );\n const isResponsiveMode = isResponsive(mode);\n const showSelectedSection = isShowSelectedSection(mode);\n const renderItem = (valueItem: DisplayValueType, index?: number) => {\n const { disabled: itemDisabled, label, value } = valueItem;\n const closable = !disabled && !itemDisabled;\n let isPreview = !showResponsiveSelectedSection;\n if (!isResponsiveMode) {\n isPreview = false;\n }\n if (!showSelectedSection) {\n isPreview = false;\n }\n if (disabled) {\n isPreview = true;\n }\n const displayLabel: React.ReactNode = label;\n\n const onClose = (event?: React.MouseEvent) => {\n if (event) {\n event.stopPropagation();\n }\n onRemove(valueItem);\n };\n if (_.isNil(value)) {\n return null;\n }\n\n // 生成唯一的 key，如果 value 可能重复，使用 value + index 组合\n const uniqueKey =\n valueItem.key ??\n (value !== undefined && value !== null\n ? `${value}-${index ?? ''}`\n : `item-${index ?? ''}`);\n\n return typeof tagRender === 'function'\n ? customizeRenderSelector(\n value,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n )\n : defaultRenderSelector(\n valueItem,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n );\n };\n\n const renderRest = (omittedValues: DisplayValueType[]) => {\n if (displayValues.length === 1) {\n return null;\n }\n\n const content =\n typeof maxTagPlaceholder === 'function'\n ? maxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n )\n : innerMaxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n );\n\n return typeof maxTagPlaceholder === 'function'\n ? content\n : defaultRenderSelector({ title: content }, content, false);\n };\n const onVisibleChange = (visibleCount: number) => {\n setShowItemIndex(visibleCount);\n };\n const maxHeight = useMemo(() => {\n if (isMultiple(mode)) {\n let maxRows: number | undefined;\n if (typeof mode === 'object') {\n maxRows = mode.maxRows;\n }\n if (!maxRows) {\n // 2.5行高+2行间距\n return 2.5 * tagHeight + 2 * gap;\n } else {\n // 总行高+总行间距\n return maxRows * tagHeight + (maxRows - 1) * gap;\n }\n }\n\n return undefined;\n }, [mode]);\n if (isResponsiveMode) {\n return (\n <div className=\"beta-ald-select-selector beta-ald-select-selector-multiple-responsive\">\n {showItemIndex === -1 && displayValues.length > 0 && (\n <div className=\"beta-ald-select-selector-overflow-item-first\">\n {renderItem(displayValues[0], 0)}\n </div>\n )}\n <Overflow\n prefixCls={overflowPrefixCls}\n data={displayValues}\n // rc-overflow >=1.4 的 renderItem 第二参是 { index }，适配回 index\n renderItem={(item, info) => renderItem(item, info?.index)}\n className={cn({\n 'beta-ald-select-selector-overflow-hidden':\n showItemIndex === -1 && displayValues.length === 1,\n })}\n renderRest={renderRest}\n suffix={null}\n itemKey={itemKey}\n maxCount=\"responsive\"\n onVisibleChange={onVisibleChange}\n />\n {showResponsiveSelectedSection && (\n <MultipleResponsiveSelectedSection\n displayValues={displayValues}\n renderItem={renderItem}\n maxHeight={maxHeight}\n suffixIcon={suffixIcon}\n onToggleOpen={onToggleOpen}\n dropdownRef={dropdownRef}\n />\n )}\n </div>\n );\n }\n\n return (\n <ScrollArea\n innerClassName=\"beta-ald-select-selector-multiple-default-inner\"\n className=\"beta-ald-select-selector beta-ald-select-selector-multiple-default\"\n innerStyle={{\n maxHeight: maxHeight,\n }}\n >\n <div className=\"beta-ald-select-selector-multiple-default-tags\">\n {displayValues.map((item, index) => renderItem(item, index))}\n </div>\n </ScrollArea>\n );\n}\n"],"mappings":"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"}
package/dist/Select/Selector/index.d.ts CHANGED
@@ -7,5 +7,7 @@ export interface SelectorProps extends ISelectProps {
7
7
  onToggleOpen: (open?: boolean) => void;
8
8
  showResponsiveSelectedSection: boolean;
9
9
  dropdownRef: RefObject<RefTriggerProps>;
10
+ /** 多选 responsive 进入/退出 -1 收纳态（仅"首 tag + +N"）时上抛 */
11
+ onOverflowCollapsedChange?: (collapsed: boolean) => void;
10
12
  }
11
13
  export default function Selector(props: SelectorProps): import("react/jsx-runtime").JSX.Element;
package/dist/Select/Selector/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/Select/Selector/index.tsx"],"sourcesContent":["import prefixCls from '../../_utils/prefixCls';\nimport { DisplayValueType, ISelectProps, LabelInValueType } from '../interface';\nimport React, { RefObject } from 'react';\nimport MultipleSelector from './MultipleSelector';\nimport { isMultiple } from '../BaseSelect';\nimport { RefTriggerProps } from '../SelectTrigger';\nexport interface SelectorProps extends ISelectProps {\n displayValues: LabelInValueType[];\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n showResponsiveSelectedSection: boolean;\n dropdownRef: RefObject<RefTriggerProps>;\n}\nexport default function Selector(props: SelectorProps) {\n const classNames = prefixCls('select-selector');\n const {\n mode,\n displayValues,\n onRemove,\n onToggleOpen,\n showResponsiveSelectedSection,\n dropdownRef,\n } = props;\n if (isMultiple(mode)) {\n return (\n <MultipleSelector\n {...props}\n onRemove={onRemove}\n dropdownRef={dropdownRef}\n onToggleOpen={onToggleOpen}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n />\n );\n }\n {\n /* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */\n }\n return (\n <div\n className={\n classNames('beta-ald-select-selector') + ' ant-select-selection-item'\n }\n >\n {displayValues.map((item, index) => (\n <span key={item.value ?? `item-${index}`}>{item.label}</span>\n ))}\n </div>\n );\n}\n"],"mappings":";;;;;;AAaA,SAAwB,SAAS,OAAsB;CACrD,MAAM,aAAa,UAAU,kBAAkB;CAC/C,MAAM,EACJ,MACA,eACA,UACA,cACA,+BACA,gBACE;AACJ,KAAI,WAAW,KAAK,CAClB,QACE,oBAAC,kBAAD;EACE,GAAI;EACM;EACG;EACC;EACiB;EAC/B,CAAA;AAMN,QACE,oBAAC,OAAD;EACE,WACE,WAAW,2BAA2B,GAAG;YAG1C,cAAc,KAAK,MAAM,UACxB,oBAAC,QAAD,EAAA,UAA2C,KAAK,OAAa,EAAlD,KAAK,SAAS,QAAQ,QAA4B,CAC7D;EACE,CAAA"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/Select/Selector/index.tsx"],"sourcesContent":["import prefixCls from '../../_utils/prefixCls';\nimport { DisplayValueType, ISelectProps, LabelInValueType } from '../interface';\nimport React, { RefObject } from 'react';\nimport MultipleSelector from './MultipleSelector';\nimport { isMultiple } from '../BaseSelect';\nimport { RefTriggerProps } from '../SelectTrigger';\nexport interface SelectorProps extends ISelectProps {\n displayValues: LabelInValueType[];\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n showResponsiveSelectedSection: boolean;\n dropdownRef: RefObject<RefTriggerProps>;\n /** 多选 responsive 进入/退出 -1 收纳态（仅\"首 tag + +N\"）时上抛 */\n onOverflowCollapsedChange?: (collapsed: boolean) => void;\n}\nexport default function Selector(props: SelectorProps) {\n const classNames = prefixCls('select-selector');\n const {\n mode,\n displayValues,\n onRemove,\n onToggleOpen,\n showResponsiveSelectedSection,\n dropdownRef,\n } = props;\n if (isMultiple(mode)) {\n return (\n <MultipleSelector\n {...props}\n onRemove={onRemove}\n dropdownRef={dropdownRef}\n onToggleOpen={onToggleOpen}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n />\n );\n }\n {\n /* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */\n }\n return (\n <div\n className={\n classNames('beta-ald-select-selector') + ' ant-select-selection-item'\n }\n >\n {displayValues.map((item, index) => (\n <span key={item.value ?? `item-${index}`}>{item.label}</span>\n ))}\n </div>\n );\n}\n"],"mappings":";;;;;;AAeA,SAAwB,SAAS,OAAsB;CACrD,MAAM,aAAa,UAAU,kBAAkB;CAC/C,MAAM,EACJ,MACA,eACA,UACA,cACA,+BACA,gBACE;AACJ,KAAI,WAAW,KAAK,CAClB,QACE,oBAAC,kBAAD;EACE,GAAI;EACM;EACG;EACC;EACiB;EAC/B,CAAA;AAMN,QACE,oBAAC,OAAD;EACE,WACE,WAAW,2BAA2B,GAAG;YAG1C,cAAc,KAAK,MAAM,UACxB,oBAAC,QAAD,EAAA,UAA2C,KAAK,OAAa,EAAlD,KAAK,SAAS,QAAQ,QAA4B,CAC7D;EACE,CAAA"}
package/dist/Select/utils/getWidthStyle.js CHANGED
@@ -2,10 +2,7 @@
2
2
  function getWidthStyle(width) {
3
3
  if (typeof width === "number") return { width: `${width}px` };
4
4
  if (width === "fill") return { width: "100%" };
5
- if (width === "auto") return {
6
- width: "auto",
7
- flexShrink: 0
8
- };
5
+ if (width === "auto") return { width: "auto" };
9
6
  return {};
10
7
  }
11
8
  //#endregion
package/dist/Select/utils/getWidthStyle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"getWidthStyle.js","names":[],"sources":["../../../src/Select/utils/getWidthStyle.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport default function getWidthStyle(\n width?: number | 'auto' | 'fill',\n): CSSProperties {\n if (typeof width === 'number') {\n return { width: `${width}px` };\n }\n if (width === 'fill') {\n return { width: '100%' };\n }\n if (width === 'auto') {\n // flexShrink 0：auto 的语义是\"按内容定宽\"。根节点在 flex 父容器里默认可收缩，\n // 而嵌套 flex（display:contents 包装 + basis-0）的 intrinsic 贡献被浏览器低估约 14px，\n // 父容器按低估值布局后回头压缩根节点，导致 tag / placeholder 右侧被裁\n return { width: 'auto', flexShrink: 0 };\n }\n return {};\n}\n"],"mappings":";AAEA,SAAwB,cACtB,OACe;AACf,KAAI,OAAO,UAAU,SACnB,QAAO,EAAE,OAAO,GAAG,MAAM,KAAK;AAEhC,KAAI,UAAU,OACZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,KAAI,UAAU,OAIZ,QAAO;EAAE,OAAO;EAAQ,YAAY;EAAG;AAEzC,QAAO,EAAE"}
1
+ {"version":3,"file":"getWidthStyle.js","names":[],"sources":["../../../src/Select/utils/getWidthStyle.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport default function getWidthStyle(\n width?: number | 'auto' | 'fill',\n): CSSProperties {\n if (typeof width === 'number') {\n return { width: `${width}px` };\n }\n if (width === 'fill') {\n return { width: '100%' };\n }\n if (width === 'auto') {\n // 与 v2 一致：不锁 flexShrink。根节点必须保持可被父 flex 行压缩，\n // 多选超宽时 rc-overflow 才能量到受限容器宽并把放不下的 tag 收成 \"+N\"\n return { width: 'auto' };\n }\n return {};\n}\n"],"mappings":";AAEA,SAAwB,cACtB,OACe;AACf,KAAI,OAAO,UAAU,SACnB,QAAO,EAAE,OAAO,GAAG,MAAM,KAAK;AAEhC,KAAI,UAAU,OACZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,KAAI,UAAU,OAGZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,QAAO,EAAE"}