@tiny-design/react 1.5.0 → 1.5.1

package/es/alert/alert.js

@@ -24,7 +24,7 @@ const Alert = React.forwardRef((props, forwardedRef) => {
 	const closeBtnOnClick = (e) => {
 		ref.current && setClosedStyle(ref.current);
 		setShow(false);
-		onClose && onClose(e);
+		onClose?.(e);
 	};
 	const closeIcon = (closable || closeText) && /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -72,7 +72,7 @@ const Alert = React.forwardRef((props, forwardedRef) => {
 			children: [
 				icon && renderIcon(),
 				/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("p", {
-					className: `${prefixCls}__title`,
+					className: classNames(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children }),
 					children: title
 				}), children] }),
 				closeIcon

package/es/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":["Transition"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["import React, { useState, useRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckCircle, CloseCircle, InfoCircle, WarningCircle } from '../_utils/components';\nimport { AlertProps } from './types';\nimport Transition from '../transition';\n\nconst setClosedStyle = (node: HTMLElement): void => {\n  node.style.borderTopWidth = '0';\n  node.style.paddingTop = '0';\n  node.style.marginTop = '0';\n  node.style.height = '0';\n  node.style.paddingBottom = '0';\n  node.style.borderBottomWidth = '0';\n  node.style.marginBottom = '0';\n};\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, forwardedRef) => {\n  const {\n    type = 'info',\n    iconSize = 14,\n    prefixCls: customisedCls,\n    title,\n    icon,\n    closeText,\n    closable,\n    afterClose,\n    onClose,\n    children,\n    className,\n    style,\n    ...otherProps\n  } = props;\n  const [isShow, setShow] = useState(true);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('alert', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, [`${prefixCls}_${type}`]);\n\n  const closeBtnOnClick = (e: React.MouseEvent<HTMLSpanElement>): void => {\n    ref.current && setClosedStyle(ref.current as HTMLDivElement);\n    setShow(false);\n    onClose && onClose(e);\n  };\n\n  // Setting close text attribute also allows to be closable\n  const closeIcon = (closable || closeText) && (\n    <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Close\">\n      {closeText || '✕'}\n    </button>\n  );\n\n  const renderIcon = (): React.ReactNode => {\n    if (typeof icon === 'boolean') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={iconSize} className={`${prefixCls}__icon`} />;\n      }\n    }\n\n    return icon;\n  };\n\n  return (\n    <Transition timeout={300} in={isShow} nodeRef={ref} onExited={afterClose}>\n      <div {...otherProps} role=\"alert\" className={cls} style={style} ref={(node) => {\n        ref.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      }}>\n        {icon && renderIcon()}\n        <div>\n          {title && <p className={`${prefixCls}__title`}>{title}</p>}\n          {children}\n        </div>\n        {closeIcon}\n      </div>\n    </Transition>\n  );\n});\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB,SAA4B;AAClD,MAAK,MAAM,iBAAiB;AAC5B,MAAK,MAAM,aAAa;AACxB,MAAK,MAAM,YAAY;AACvB,MAAK,MAAM,SAAS;AACpB,MAAK,MAAM,gBAAgB;AAC3B,MAAK,MAAM,oBAAoB;AAC/B,MAAK,MAAM,eAAe;;AAG5B,MAAM,QAAQ,MAAM,YAAwC,OAAO,iBAAiB;CAClF,MAAM,EACJ,OAAO,QACP,WAAW,IACX,WAAW,eACX,OACA,MACA,WACA,UACA,YACA,SACA,UACA,WACA,OACA,GAAG,eACD;CACJ,MAAM,CAAC,QAAQ,WAAW,SAAS,KAAK;CACxC,MAAM,MAAM,OAA8B,KAAK;CAE/C,MAAM,YAAY,aAAa,SADT,WAAW,cAAc,CACO,WAAW,cAAc;CAC/E,MAAM,MAAM,WAAW,WAAW,WAAW,CAAC,GAAG,UAAU,GAAG,OAAO,CAAC;CAEtE,MAAM,mBAAmB,MAA+C;AACtE,MAAI,WAAW,eAAe,IAAI,QAA0B;AAC5D,UAAQ,MAAM;AACd,aAAW,QAAQ,EAAE;;CAIvB,MAAM,aAAa,YAAY,cAC7B,oBAAC,UAAD;EAAQ,MAAK;EAAS,WAAW,GAAG,UAAU;EAAc,SAAS;EAAiB,cAAW;YAC9F,aAAa;EACP,CAAA;CAGX,MAAM,mBAAoC;AACxC,MAAI,OAAO,SAAS,UAClB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACzE,KAAK,OACH,QAAO,oBAAC,YAAD;IAAY,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACxE,KAAK,UACH,QAAO,oBAAC,eAAD;IAAe,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GAC3E,KAAK,QACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;;AAI7E,SAAO;;AAGT,QACE,oBAACA,oBAAD;EAAY,SAAS;EAAK,IAAI;EAAQ,SAAS;EAAK,UAAU;YAC5D,qBAAC,OAAD;GAAK,GAAI;GAAY,MAAK;GAAQ,WAAW;GAAY;GAAO,MAAM,SAAS;AAC7E,QAAI,UAAU;AACd,QAAI,OAAO,iBAAiB,WAAY,cAAa,KAAK;aACjD,aAAc,cAAa,UAAU;;aAHhD;IAKG,QAAQ,YAAY;IACrB,qBAAC,OAAD,EAAA,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAW,GAAG,UAAU;eAAW;KAAU,CAAA,EACzD,SACG,EAAA,CAAA;IACL;IACG;;EACK,CAAA;EAEf;AAEF,MAAM,cAAc"}
+{"version":3,"file":"alert.js","names":["Transition"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["import React, { useState, useRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckCircle, CloseCircle, InfoCircle, WarningCircle } from '../_utils/components';\nimport { AlertProps } from './types';\nimport Transition from '../transition';\n\nconst setClosedStyle = (node: HTMLElement): void => {\n  node.style.borderTopWidth = '0';\n  node.style.paddingTop = '0';\n  node.style.marginTop = '0';\n  node.style.height = '0';\n  node.style.paddingBottom = '0';\n  node.style.borderBottomWidth = '0';\n  node.style.marginBottom = '0';\n};\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, forwardedRef) => {\n  const {\n    type = 'info',\n    iconSize = 14,\n    prefixCls: customisedCls,\n    title,\n    icon,\n    closeText,\n    closable,\n    afterClose,\n    onClose,\n    children,\n    className,\n    style,\n    ...otherProps\n  } = props;\n  const [isShow, setShow] = useState(true);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('alert', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, [`${prefixCls}_${type}`]);\n\n  const closeBtnOnClick = (e: React.MouseEvent<HTMLSpanElement>): void => {\n    ref.current && setClosedStyle(ref.current as HTMLDivElement);\n    setShow(false);\n    onClose?.(e);\n  };\n\n  // Setting close text attribute also allows to be closable\n  const closeIcon = (closable || closeText) && (\n    <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Close\">\n      {closeText || '✕'}\n    </button>\n  );\n\n  const renderIcon = (): React.ReactNode => {\n    if (typeof icon === 'boolean') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={iconSize} className={`${prefixCls}__icon`} />;\n      }\n    }\n\n    return icon;\n  };\n\n  return (\n    <Transition timeout={300} in={isShow} nodeRef={ref} onExited={afterClose}>\n      <div {...otherProps} role=\"alert\" className={cls} style={style} ref={(node) => {\n        ref.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      }}>\n        {icon && renderIcon()}\n        <div>\n          {title && <p className={classNames(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children })}>{title}</p>}\n          {children}\n        </div>\n        {closeIcon}\n      </div>\n    </Transition>\n  );\n});\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB,SAA4B;AAClD,MAAK,MAAM,iBAAiB;AAC5B,MAAK,MAAM,aAAa;AACxB,MAAK,MAAM,YAAY;AACvB,MAAK,MAAM,SAAS;AACpB,MAAK,MAAM,gBAAgB;AAC3B,MAAK,MAAM,oBAAoB;AAC/B,MAAK,MAAM,eAAe;;AAG5B,MAAM,QAAQ,MAAM,YAAwC,OAAO,iBAAiB;CAClF,MAAM,EACJ,OAAO,QACP,WAAW,IACX,WAAW,eACX,OACA,MACA,WACA,UACA,YACA,SACA,UACA,WACA,OACA,GAAG,eACD;CACJ,MAAM,CAAC,QAAQ,WAAW,SAAS,KAAK;CACxC,MAAM,MAAM,OAA8B,KAAK;CAE/C,MAAM,YAAY,aAAa,SADT,WAAW,cAAc,CACO,WAAW,cAAc;CAC/E,MAAM,MAAM,WAAW,WAAW,WAAW,CAAC,GAAG,UAAU,GAAG,OAAO,CAAC;CAEtE,MAAM,mBAAmB,MAA+C;AACtE,MAAI,WAAW,eAAe,IAAI,QAA0B;AAC5D,UAAQ,MAAM;AACd,YAAU,EAAE;;CAId,MAAM,aAAa,YAAY,cAC7B,oBAAC,UAAD;EAAQ,MAAK;EAAS,WAAW,GAAG,UAAU;EAAc,SAAS;EAAiB,cAAW;YAC9F,aAAa;EACP,CAAA;CAGX,MAAM,mBAAoC;AACxC,MAAI,OAAO,SAAS,UAClB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACzE,KAAK,OACH,QAAO,oBAAC,YAAD;IAAY,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACxE,KAAK,UACH,QAAO,oBAAC,eAAD;IAAe,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GAC3E,KAAK,QACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;;AAI7E,SAAO;;AAGT,QACE,oBAACA,oBAAD;EAAY,SAAS;EAAK,IAAI;EAAQ,SAAS;EAAK,UAAU;YAC5D,qBAAC,OAAD;GAAK,GAAI;GAAY,MAAK;GAAQ,WAAW;GAAY;GAAO,MAAM,SAAS;AAC7E,QAAI,UAAU;AACd,QAAI,OAAO,iBAAiB,WAAY,cAAa,KAAK;aACjD,aAAc,cAAa,UAAU;;aAHhD;IAKG,QAAQ,YAAY;IACrB,qBAAC,OAAD,EAAA,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAW,WAAW,GAAG,UAAU,UAAU,GAAG,GAAG,UAAU,uBAAuB,UAAU,CAAC;eAAG;KAAU,CAAA,EACxH,SACG,EAAA,CAAA;IACL;IACG;;EACK,CAAA;EAEf;AAEF,MAAM,cAAc"}

package/es/alert/style/_index.scss

@@ -22,9 +22,13 @@
 
   &__title {
     box-sizing: border-box;
-    margin: 0 0 5px;
-    font-size: 18px;
+    margin: 0;
+    font-size: 17px;
     font-weight: 500;
+
+    &_has-content {
+      margin-bottom: 5px;
+    }
   }
 
   &__desc {

package/es/alert/style/index.css

@@ -18,10 +18,13 @@
 }
 .ty-alert__title {
   box-sizing: border-box;
-  margin: 0 0 5px;
-  font-size: 18px;
+  margin: 0;
+  font-size: 17px;
   font-weight: 500;
 }
+.ty-alert__title_has-content {
+  margin-bottom: 5px;
+}
 .ty-alert__desc {
   box-sizing: border-box;
   line-height: 16px;

package/es/collapse/collapse-panel.js

@@ -46,31 +46,31 @@ const CollapsePanel = (props) => {
 	const renderHeader = () => {
 		const headerCls = classNames(`${prefixCls}__header`, { [`${prefixCls}__header_disabled`]: disabled });
 		const arrowCls = classNames(`${prefixCls}__arrow`, { [`${prefixCls}__arrow_active`]: active });
-		return /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			id: headerId,
+		const hasExtra = deletable || extra;
+		return /* @__PURE__ */ jsxs("div", {
 			className: headerCls,
-			onClick: headerOnClick,
-			"aria-expanded": active,
-			"aria-controls": panelId,
-			"aria-disabled": disabled || void 0,
-			children: [
-				showArrow && /* @__PURE__ */ jsx(ArrowDown, {
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				id: headerId,
+				className: `${prefixCls}__toggle`,
+				onClick: headerOnClick,
+				"aria-expanded": active,
+				"aria-controls": panelId,
+				"aria-disabled": disabled || void 0,
+				children: [showArrow && /* @__PURE__ */ jsx(ArrowDown, {
 					size: 10,
 					className: arrowCls
-				}),
-				/* @__PURE__ */ jsx("div", {
+				}), /* @__PURE__ */ jsx("div", {
 					className: `${prefixCls}__title`,
 					children: richNode(header, active)
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: `${prefixCls}__extra`,
-					children: deletable ? /* @__PURE__ */ jsx("span", {
-						onClick: removeItem,
-						children: "✕"
-					}) : richNode(extra, active)
-				})
-			]
+				})]
+			}), hasExtra && /* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}__extra`,
+				children: deletable ? /* @__PURE__ */ jsx("span", {
+					onClick: removeItem,
+					children: "✕"
+				}) : richNode(extra, active)
+			})]
 		});
 	};
 	return /* @__PURE__ */ jsxs("div", {

package/es/collapse/collapse-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-panel.js","names":["CollapseTransition"],"sources":["../../src/collapse/collapse-panel.tsx"],"sourcesContent":["import React, { useContext, useId, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CollapsePanelProps } from './types';\nimport { ArrowDown } from '../_utils/components';\nimport CollapseTransition from '../collapse-transition';\nimport { CollapseContext } from './collapse-context';\n\n/**\n * Allow to parse active status to a node\n * @param node\n * @param isActive\n */\nconst richNode = (node: React.ReactNode | ((isActive: boolean) => React.ReactNode), isActive: boolean) => {\n  return typeof node === 'function' ? node(isActive) : node;\n};\n\nconst CollapsePanel = (props: CollapsePanelProps): React.ReactElement => {\n  const {\n    showArrow = true,\n    itemKey,\n    header,\n    disabled,\n    extra,\n    deletable,\n    onHeaderOnClick,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n  } = props;\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const panelId = useId();\n  const headerId = useId();\n  const configContext = useContext(ConfigContext);\n  const { activeKeys, onItemClick } = useContext(CollapseContext);\n  const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);\n  const active = activeKeys.includes(itemKey);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_active`]: active,\n  });\n\n  const headerOnClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      onHeaderOnClick && onHeaderOnClick(e);\n      onItemClick && onItemClick(itemKey);\n    }\n  };\n\n  /**\n   * Remove a item from collapse only the header is enabled\n   * @param e\n   * @private\n   */\n  const removeItem = (e: React.MouseEvent<HTMLSpanElement>) => {\n    e.stopPropagation();\n    if (!disabled) {\n      const node = itemRef.current;\n      node && node.parentNode?.removeChild(node);\n    }\n  };\n\n  const renderHeader = () => {\n    const headerCls = classNames(`${prefixCls}__header`, {\n      [`${prefixCls}__header_disabled`]: disabled,\n    });\n    const arrowCls = classNames(`${prefixCls}__arrow`, {\n      [`${prefixCls}__arrow_active`]: active,\n    });\n\n    return (\n      <button\n        type=\"button\"\n        id={headerId}\n        className={headerCls}\n        onClick={headerOnClick}\n        aria-expanded={active}\n        aria-controls={panelId}\n        aria-disabled={disabled || undefined}>\n        {showArrow && <ArrowDown size={10} className={arrowCls} />}\n        <div className={`${prefixCls}__title`}>{richNode(header, active)}</div>\n        <div className={`${prefixCls}__extra`}>\n          {deletable ? <span onClick={removeItem}>✕</span> : richNode(extra, active)}\n        </div>\n      </button>\n    );\n  };\n\n  return (\n    <div className={cls} style={style} ref={itemRef}>\n      {renderHeader()}\n      <CollapseTransition isShow={active}>\n        <div className={`${prefixCls}__content`} id={panelId} role=\"region\" aria-labelledby={headerId}>{richNode(children, active)}</div>\n      </CollapseTransition>\n    </div>\n  );\n};\n\nCollapsePanel.displayName = 'CollapsePanel';\n\nexport default CollapsePanel;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,YAAY,MAAkE,aAAsB;AACxG,QAAO,OAAO,SAAS,aAAa,KAAK,SAAS,GAAG;;AAGvD,MAAM,iBAAiB,UAAkD;CACvE,MAAM,EACJ,YAAY,MACZ,SACA,QACA,UACA,OACA,WACA,iBACA,WACA,OACA,UACA,WAAW,kBACT;CACJ,MAAM,UAAU,OAA8B,KAAK;CACnD,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,OAAO;CACxB,MAAM,gBAAgB,WAAW,cAAc;CAC/C,MAAM,EAAE,YAAY,gBAAgB,WAAW,gBAAgB;CAC/D,MAAM,YAAY,aAAa,iBAAiB,cAAc,WAAW,cAAc;CACvF,MAAM,SAAS,WAAW,SAAS,QAAQ;CAC3C,MAAM,MAAM,WAAW,WAAW,WAAW,GAC1C,GAAG,UAAU,WAAW,QAC1B,CAAC;CAEF,MAAM,iBAAiB,MAAwB;AAC7C,MAAI,CAAC,UAAU;AACb,sBAAmB,gBAAgB,EAAE;AACrC,kBAAe,YAAY,QAAQ;;;;;;;;CASvC,MAAM,cAAc,MAAyC;AAC3D,IAAE,iBAAiB;AACnB,MAAI,CAAC,UAAU;GACb,MAAM,OAAO,QAAQ;AACrB,WAAQ,KAAK,YAAY,YAAY,KAAK;;;CAI9C,MAAM,qBAAqB;EACzB,MAAM,YAAY,WAAW,GAAG,UAAU,WAAW,GAClD,GAAG,UAAU,qBAAqB,UACpC,CAAC;EACF,MAAM,WAAW,WAAW,GAAG,UAAU,UAAU,GAChD,GAAG,UAAU,kBAAkB,QACjC,CAAC;AAEF,SACE,qBAAC,UAAD;GACE,MAAK;GACL,IAAI;GACJ,WAAW;GACX,SAAS;GACT,iBAAe;GACf,iBAAe;GACf,iBAAe,YAAY,KAAA;aAP7B;IAQG,aAAa,oBAAC,WAAD;KAAW,MAAM;KAAI,WAAW;KAAY,CAAA;IAC1D,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,SAAS,QAAQ,OAAO;KAAO,CAAA;IACvE,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAC1B,YAAY,oBAAC,QAAD;MAAM,SAAS;gBAAY;MAAQ,CAAA,GAAG,SAAS,OAAO,OAAO;KACtE,CAAA;IACC;;;AAIb,QACE,qBAAC,OAAD;EAAK,WAAW;EAAY;EAAO,KAAK;YAAxC,CACG,cAAc,EACf,oBAACA,6BAAD;GAAoB,QAAQ;aAC1B,oBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;IAAY,IAAI;IAAS,MAAK;IAAS,mBAAiB;cAAW,SAAS,UAAU,OAAO;IAAO,CAAA;GAC9G,CAAA,CACjB;;;AAIV,cAAc,cAAc"}
+{"version":3,"file":"collapse-panel.js","names":["CollapseTransition"],"sources":["../../src/collapse/collapse-panel.tsx"],"sourcesContent":["import React, { useContext, useId, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CollapsePanelProps } from './types';\nimport { ArrowDown } from '../_utils/components';\nimport CollapseTransition from '../collapse-transition';\nimport { CollapseContext } from './collapse-context';\n\n/**\n * Allow to parse active status to a node\n * @param node\n * @param isActive\n */\nconst richNode = (node: React.ReactNode | ((isActive: boolean) => React.ReactNode), isActive: boolean) => {\n  return typeof node === 'function' ? node(isActive) : node;\n};\n\nconst CollapsePanel = (props: CollapsePanelProps): React.ReactElement => {\n  const {\n    showArrow = true,\n    itemKey,\n    header,\n    disabled,\n    extra,\n    deletable,\n    onHeaderOnClick,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n  } = props;\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const panelId = useId();\n  const headerId = useId();\n  const configContext = useContext(ConfigContext);\n  const { activeKeys, onItemClick } = useContext(CollapseContext);\n  const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);\n  const active = activeKeys.includes(itemKey);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_active`]: active,\n  });\n\n  const headerOnClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      onHeaderOnClick && onHeaderOnClick(e);\n      onItemClick && onItemClick(itemKey);\n    }\n  };\n\n  /**\n   * Remove a item from collapse only the header is enabled\n   * @param e\n   * @private\n   */\n  const removeItem = (e: React.MouseEvent<HTMLSpanElement>) => {\n    e.stopPropagation();\n    if (!disabled) {\n      const node = itemRef.current;\n      node && node.parentNode?.removeChild(node);\n    }\n  };\n\n  const renderHeader = () => {\n    const headerCls = classNames(`${prefixCls}__header`, {\n      [`${prefixCls}__header_disabled`]: disabled,\n    });\n    const arrowCls = classNames(`${prefixCls}__arrow`, {\n      [`${prefixCls}__arrow_active`]: active,\n    });\n\n    const hasExtra = deletable || extra;\n\n    return (\n      <div className={headerCls}>\n        <button\n          type=\"button\"\n          id={headerId}\n          className={`${prefixCls}__toggle`}\n          onClick={headerOnClick}\n          aria-expanded={active}\n          aria-controls={panelId}\n          aria-disabled={disabled || undefined}>\n          {showArrow && <ArrowDown size={10} className={arrowCls} />}\n          <div className={`${prefixCls}__title`}>{richNode(header, active)}</div>\n        </button>\n        {hasExtra && (\n          <div className={`${prefixCls}__extra`}>\n            {deletable ? <span onClick={removeItem}>✕</span> : richNode(extra, active)}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cls} style={style} ref={itemRef}>\n      {renderHeader()}\n      <CollapseTransition isShow={active}>\n        <div className={`${prefixCls}__content`} id={panelId} role=\"region\" aria-labelledby={headerId}>{richNode(children, active)}</div>\n      </CollapseTransition>\n    </div>\n  );\n};\n\nCollapsePanel.displayName = 'CollapsePanel';\n\nexport default CollapsePanel;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,YAAY,MAAkE,aAAsB;AACxG,QAAO,OAAO,SAAS,aAAa,KAAK,SAAS,GAAG;;AAGvD,MAAM,iBAAiB,UAAkD;CACvE,MAAM,EACJ,YAAY,MACZ,SACA,QACA,UACA,OACA,WACA,iBACA,WACA,OACA,UACA,WAAW,kBACT;CACJ,MAAM,UAAU,OAA8B,KAAK;CACnD,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,OAAO;CACxB,MAAM,gBAAgB,WAAW,cAAc;CAC/C,MAAM,EAAE,YAAY,gBAAgB,WAAW,gBAAgB;CAC/D,MAAM,YAAY,aAAa,iBAAiB,cAAc,WAAW,cAAc;CACvF,MAAM,SAAS,WAAW,SAAS,QAAQ;CAC3C,MAAM,MAAM,WAAW,WAAW,WAAW,GAC1C,GAAG,UAAU,WAAW,QAC1B,CAAC;CAEF,MAAM,iBAAiB,MAAwB;AAC7C,MAAI,CAAC,UAAU;AACb,sBAAmB,gBAAgB,EAAE;AACrC,kBAAe,YAAY,QAAQ;;;;;;;;CASvC,MAAM,cAAc,MAAyC;AAC3D,IAAE,iBAAiB;AACnB,MAAI,CAAC,UAAU;GACb,MAAM,OAAO,QAAQ;AACrB,WAAQ,KAAK,YAAY,YAAY,KAAK;;;CAI9C,MAAM,qBAAqB;EACzB,MAAM,YAAY,WAAW,GAAG,UAAU,WAAW,GAClD,GAAG,UAAU,qBAAqB,UACpC,CAAC;EACF,MAAM,WAAW,WAAW,GAAG,UAAU,UAAU,GAChD,GAAG,UAAU,kBAAkB,QACjC,CAAC;EAEF,MAAM,WAAW,aAAa;AAE9B,SACE,qBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,qBAAC,UAAD;IACE,MAAK;IACL,IAAI;IACJ,WAAW,GAAG,UAAU;IACxB,SAAS;IACT,iBAAe;IACf,iBAAe;IACf,iBAAe,YAAY,KAAA;cAP7B,CAQG,aAAa,oBAAC,WAAD;KAAW,MAAM;KAAI,WAAW;KAAY,CAAA,EAC1D,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,SAAS,QAAQ,OAAO;KAAO,CAAA,CAChE;OACR,YACC,oBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAC1B,YAAY,oBAAC,QAAD;KAAM,SAAS;eAAY;KAAQ,CAAA,GAAG,SAAS,OAAO,OAAO;IACtE,CAAA,CAEJ;;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAW;EAAY;EAAO,KAAK;YAAxC,CACG,cAAc,EACf,oBAACA,6BAAD;GAAoB,QAAQ;aAC1B,oBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;IAAY,IAAI;IAAS,MAAK;IAAS,mBAAiB;cAAW,SAAS,UAAU,OAAO;IAAO,CAAA;GAC9G,CAAA,CACjB;;;AAIV,cAAc,cAAc"}

package/es/collapse/style/_index.scss

@@ -27,17 +27,9 @@
       align-items: center;
       box-sizing: border-box;
       position: relative;
-      padding: 12px 16px;
       color: var(--ty-color-text);
       line-height: 22px;
-      cursor: pointer;
       transition: all 300ms;
-      background: none;
-      border: none;
-      width: 100%;
-      text-align: left;
-      font-size: inherit;
-      font-family: inherit;
 
       &:hover {
         background-color: var(--ty-collapse-header-hover-bg);
@@ -49,11 +41,33 @@
       }
     }
 
+    &__toggle {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      box-sizing: border-box;
+      padding: 12px 16px;
+      cursor: pointer;
+      background: none;
+      border: none;
+      width: 100%;
+      text-align: left;
+      font-size: inherit;
+      font-family: inherit;
+      color: inherit;
+      line-height: inherit;
+    }
+
+    &__header_disabled &__toggle {
+      cursor: not-allowed;
+    }
+
     &__arrow {
       margin-right: 10px;
       transform: rotate(-90deg);
       text-align: center;
-      color: currentColor;
+      color: currentcolor;
       transition: all 300ms;
 
       &_active {
@@ -66,9 +80,12 @@
     }
 
     &__extra {
+      display: flex;
+      align-items: center;
       color: inherit;
       font-size: 11px;
-      margin-left: 15px;
+      padding-right: 16px;
+      margin-left: auto;
     }
 
     &__content {

package/es/collapse/style/index.css

@@ -23,30 +23,42 @@
   align-items: center;
   box-sizing: border-box;
   position: relative;
-  padding: 12px 16px;
   color: var(--ty-color-text);
   line-height: 22px;
-  cursor: pointer;
   transition: all 300ms;
+}
+.ty-collapse-item__header:hover {
+  background-color: var(--ty-collapse-header-hover-bg);
+}
+.ty-collapse-item__header_disabled {
+  color: var(--ty-color-text-quaternary);
+  cursor: not-allowed;
+}
+.ty-collapse-item__toggle {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  cursor: pointer;
   background: none;
   border: none;
   width: 100%;
   text-align: left;
   font-size: inherit;
   font-family: inherit;
+  color: inherit;
+  line-height: inherit;
 }
-.ty-collapse-item__header:hover {
-  background-color: var(--ty-collapse-header-hover-bg);
-}
-.ty-collapse-item__header_disabled {
-  color: var(--ty-color-text-quaternary);
+.ty-collapse-item__header_disabled .ty-collapse-item__toggle {
   cursor: not-allowed;
 }
 .ty-collapse-item__arrow {
   margin-right: 10px;
   transform: rotate(-90deg);
   text-align: center;
-  color: currentColor;
+  color: currentcolor;
   transition: all 300ms;
 }
 .ty-collapse-item__arrow_active {
@@ -56,9 +68,12 @@
   flex: 1;
 }
 .ty-collapse-item__extra {
+  display: flex;
+  align-items: center;
   color: inherit;
   font-size: 11px;
-  margin-left: 15px;
+  padding-right: 16px;
+  margin-left: auto;
 }
 .ty-collapse-item__content {
   overflow: hidden;

package/es/input-otp/input-otp.js

@@ -38,13 +38,11 @@ const InputOTP = React.forwardRef((props, ref) => {
 		nativeElement: containerRef.current
 	}));
 	const triggerValueCellsChange = useCallback((nextValueCells) => {
-		setValueCells((prev) => {
-			const prevValue = prev.join("");
-			const nextValue = nextValueCells.join("");
-			if (onChange && prevValue !== nextValue) onChange(nextValue);
-			return nextValueCells;
-		});
-	}, [onChange]);
+		const prevValue = valueCells.join("");
+		const nextValue = nextValueCells.join("");
+		setValueCells(nextValueCells);
+		if (onChange && prevValue !== nextValue) onChange(nextValue);
+	}, [onChange, valueCells]);
 	const patchValue = useCallback((index, txt) => {
 		let nextCells = [...valueCells];
 		for (let i = 0; i < index; i += 1) if (!nextCells[i]) nextCells[i] = "";

package/es/input-otp/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/input-otp/input-otp.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, useContext, useCallback, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputOTPProps } from './types';\nimport OTPInput from './otp-input';\n\nfunction strToArr(str: string): string[] {\n  return (str || '').split('');\n}\n\nexport interface InputOTPRef {\n  focus: () => void;\n  blur: () => void;\n  nativeElement: HTMLDivElement | null;\n}\n\nconst InputOTP = React.forwardRef<InputOTPRef, InputOTPProps>(\n  (props, ref) => {\n    const {\n      length = 6,\n      size = 'md',\n      defaultValue,\n      value,\n      onChange,\n      formatter,\n      separator,\n      disabled = false,\n      mask,\n      autoFocus,\n      autoComplete,\n      className,\n      style,\n      prefixCls: customisedCls,\n      onFocus,\n      ...otherProps\n    } = props;\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('input-otp', configContext.prefixCls, customisedCls);\n    const inputSize = size || configContext.componentSize || 'md';\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputsRef = useRef<Record<number, HTMLInputElement | null>>({});\n\n    // Formatter helper\n    const internalFormatter = useCallback(\n      (txt: string) => (formatter ? formatter(txt) : txt),\n      [formatter]\n    );\n\n    // Value state\n    const [valueCells, setValueCells] = useState<string[]>(() =>\n      strToArr(internalFormatter(defaultValue || ''))\n    );\n\n    useEffect(() => {\n      if (value !== undefined) {\n        setValueCells(strToArr(value));\n      }\n    }, [value]);\n\n    // Imperative handle\n    React.useImperativeHandle(ref, () => ({\n      focus: () => {\n        // Focus first empty cell (or last cell if all filled)\n        let nextIndex = 0;\n        for (let i = 0; i < length; i += 1) {\n          if (!inputsRef.current[i]?.value) {\n            nextIndex = i;\n            break;\n          }\n          nextIndex = i;\n        }\n        inputsRef.current[nextIndex]?.focus();\n      },\n      blur: () => {\n        for (let i = 0; i < length; i += 1) {\n          inputsRef.current[i]?.blur();\n        }\n      },\n      nativeElement: containerRef.current,\n    }));\n\n    // Trigger onChange when value cells change\n    const triggerValueCellsChange = useCallback(\n      (nextValueCells: string[]) => {\n        setValueCells((prev) => {\n          const prevValue = prev.join('');\n          const nextValue = nextValueCells.join('');\n          if (onChange && prevValue !== nextValue) {\n            onChange(nextValue);\n          }\n          return nextValueCells;\n        });\n      },\n      [onChange]\n    );\n\n    // Patch value at given index\n    const patchValue = useCallback(\n      (index: number, txt: string) => {\n        let nextCells = [...valueCells];\n\n        // Fill cells till index\n        for (let i = 0; i < index; i += 1) {\n          if (!nextCells[i]) {\n            nextCells[i] = '';\n          }\n        }\n\n        if (txt.length <= 1) {\n          nextCells[index] = txt;\n        } else {\n          nextCells = nextCells.slice(0, index).concat(strToArr(txt));\n        }\n        nextCells = nextCells.slice(0, length);\n\n        // Clean trailing empty cells\n        for (let i = nextCells.length - 1; i >= 0; i -= 1) {\n          if (nextCells[i]) {\n            break;\n          }\n          nextCells.pop();\n        }\n\n        // Format if needed\n        const formattedValue = internalFormatter(\n          nextCells.map((c) => c || ' ').join('')\n        );\n        nextCells = strToArr(formattedValue).map((c, i) => {\n          if (c === ' ' && !nextCells[i]) {\n            return nextCells[i];\n          }\n          return c;\n        });\n\n        return nextCells;\n      },\n      [valueCells, length, internalFormatter]\n    );\n\n    // Handle input change\n    const onInputChange = useCallback(\n      (index: number, txt: string) => {\n        const nextCells = patchValue(index, txt);\n        const nextIndex = Math.min(index + txt.length, length - 1);\n        if (nextIndex !== index && nextCells[index] !== undefined) {\n          inputsRef.current[nextIndex]?.focus();\n        }\n        triggerValueCellsChange(nextCells);\n      },\n      [patchValue, length, triggerValueCellsChange]\n    );\n\n    // Handle active change (arrow keys, backspace)\n    const onInputActiveChange = useCallback(\n      (nextIndex: number) => {\n        const clampedIndex = Math.max(0, Math.min(nextIndex, length - 1));\n        inputsRef.current[clampedIndex]?.focus();\n      },\n      [length]\n    );\n\n    // Handle focus — keep focus on the interacted cell\n    const onInputFocus = useCallback(\n      (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n        if (onFocus) {\n          (onFocus as React.FocusEventHandler<HTMLDivElement>)(event as unknown as React.FocusEvent<HTMLDivElement>);\n        }\n      },\n      [onFocus]\n    );\n\n    // Render separator\n    const renderSeparator = useMemo(() => {\n      if (!separator) return null;\n      return (index: number) => {\n        const separatorNode =\n          typeof separator === 'function' ? separator(index) : separator;\n        if (!separatorNode) return null;\n        return (\n          <span className={`${prefixCls}__separator`}>\n            {separatorNode}\n          </span>\n        );\n      };\n    }, [separator, prefixCls]);\n\n    const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n      [`${prefixCls}_disabled`]: disabled,\n    });\n\n    return (\n      <div\n        {...otherProps}\n        ref={containerRef}\n        className={cls}\n        style={style}\n        role=\"group\"\n      >\n        {Array.from({ length }).map((_, index) => {\n          const singleValue = valueCells[index] || '';\n          return (\n            <React.Fragment key={`otp-${index}`}>\n              <OTPInput\n                ref={(el) => {\n                  inputsRef.current[index] = el;\n                }}\n                index={index}\n                size={inputSize}\n                prefixCls={prefixCls}\n                value={singleValue}\n                disabled={disabled}\n                mask={mask}\n                autoFocus={index === 0 && autoFocus}\n                autoComplete={autoComplete}\n                onChange={onInputChange}\n                onActiveChange={onInputActiveChange}\n                onFocus={(e) => onInputFocus(e, index)}\n              />\n              {index < length - 1 && renderSeparator?.(index)}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport default InputOTP;\n"],"mappings":"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"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/input-otp/input-otp.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, useContext, useCallback, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputOTPProps } from './types';\nimport OTPInput from './otp-input';\n\nfunction strToArr(str: string): string[] {\n  return (str || '').split('');\n}\n\nexport interface InputOTPRef {\n  focus: () => void;\n  blur: () => void;\n  nativeElement: HTMLDivElement | null;\n}\n\nconst InputOTP = React.forwardRef<InputOTPRef, InputOTPProps>(\n  (props, ref) => {\n    const {\n      length = 6,\n      size = 'md',\n      defaultValue,\n      value,\n      onChange,\n      formatter,\n      separator,\n      disabled = false,\n      mask,\n      autoFocus,\n      autoComplete,\n      className,\n      style,\n      prefixCls: customisedCls,\n      onFocus,\n      ...otherProps\n    } = props;\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('input-otp', configContext.prefixCls, customisedCls);\n    const inputSize = size || configContext.componentSize || 'md';\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputsRef = useRef<Record<number, HTMLInputElement | null>>({});\n\n    // Formatter helper\n    const internalFormatter = useCallback(\n      (txt: string) => (formatter ? formatter(txt) : txt),\n      [formatter]\n    );\n\n    // Value state\n    const [valueCells, setValueCells] = useState<string[]>(() =>\n      strToArr(internalFormatter(defaultValue || ''))\n    );\n\n    useEffect(() => {\n      if (value !== undefined) {\n        setValueCells(strToArr(value));\n      }\n    }, [value]);\n\n    // Imperative handle\n    React.useImperativeHandle(ref, () => ({\n      focus: () => {\n        // Focus first empty cell (or last cell if all filled)\n        let nextIndex = 0;\n        for (let i = 0; i < length; i += 1) {\n          if (!inputsRef.current[i]?.value) {\n            nextIndex = i;\n            break;\n          }\n          nextIndex = i;\n        }\n        inputsRef.current[nextIndex]?.focus();\n      },\n      blur: () => {\n        for (let i = 0; i < length; i += 1) {\n          inputsRef.current[i]?.blur();\n        }\n      },\n      nativeElement: containerRef.current,\n    }));\n\n    // Trigger onChange when value cells change\n    const triggerValueCellsChange = useCallback(\n      (nextValueCells: string[]) => {\n        const prevValue = valueCells.join('');\n        const nextValue = nextValueCells.join('');\n        setValueCells(nextValueCells);\n        if (onChange && prevValue !== nextValue) {\n          onChange(nextValue);\n        }\n      },\n      [onChange, valueCells]\n    );\n\n    // Patch value at given index\n    const patchValue = useCallback(\n      (index: number, txt: string) => {\n        let nextCells = [...valueCells];\n\n        // Fill cells till index\n        for (let i = 0; i < index; i += 1) {\n          if (!nextCells[i]) {\n            nextCells[i] = '';\n          }\n        }\n\n        if (txt.length <= 1) {\n          nextCells[index] = txt;\n        } else {\n          nextCells = nextCells.slice(0, index).concat(strToArr(txt));\n        }\n        nextCells = nextCells.slice(0, length);\n\n        // Clean trailing empty cells\n        for (let i = nextCells.length - 1; i >= 0; i -= 1) {\n          if (nextCells[i]) {\n            break;\n          }\n          nextCells.pop();\n        }\n\n        // Format if needed\n        const formattedValue = internalFormatter(\n          nextCells.map((c) => c || ' ').join('')\n        );\n        nextCells = strToArr(formattedValue).map((c, i) => {\n          if (c === ' ' && !nextCells[i]) {\n            return nextCells[i];\n          }\n          return c;\n        });\n\n        return nextCells;\n      },\n      [valueCells, length, internalFormatter]\n    );\n\n    // Handle input change\n    const onInputChange = useCallback(\n      (index: number, txt: string) => {\n        const nextCells = patchValue(index, txt);\n        const nextIndex = Math.min(index + txt.length, length - 1);\n        if (nextIndex !== index && nextCells[index] !== undefined) {\n          inputsRef.current[nextIndex]?.focus();\n        }\n        triggerValueCellsChange(nextCells);\n      },\n      [patchValue, length, triggerValueCellsChange]\n    );\n\n    // Handle active change (arrow keys, backspace)\n    const onInputActiveChange = useCallback(\n      (nextIndex: number) => {\n        const clampedIndex = Math.max(0, Math.min(nextIndex, length - 1));\n        inputsRef.current[clampedIndex]?.focus();\n      },\n      [length]\n    );\n\n    // Handle focus — keep focus on the interacted cell\n    const onInputFocus = useCallback(\n      (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n        if (onFocus) {\n          (onFocus as React.FocusEventHandler<HTMLDivElement>)(event as unknown as React.FocusEvent<HTMLDivElement>);\n        }\n      },\n      [onFocus]\n    );\n\n    // Render separator\n    const renderSeparator = useMemo(() => {\n      if (!separator) return null;\n      return (index: number) => {\n        const separatorNode =\n          typeof separator === 'function' ? separator(index) : separator;\n        if (!separatorNode) return null;\n        return (\n          <span className={`${prefixCls}__separator`}>\n            {separatorNode}\n          </span>\n        );\n      };\n    }, [separator, prefixCls]);\n\n    const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n      [`${prefixCls}_disabled`]: disabled,\n    });\n\n    return (\n      <div\n        {...otherProps}\n        ref={containerRef}\n        className={cls}\n        style={style}\n        role=\"group\"\n      >\n        {Array.from({ length }).map((_, index) => {\n          const singleValue = valueCells[index] || '';\n          return (\n            <React.Fragment key={`otp-${index}`}>\n              <OTPInput\n                ref={(el) => {\n                  inputsRef.current[index] = el;\n                }}\n                index={index}\n                size={inputSize}\n                prefixCls={prefixCls}\n                value={singleValue}\n                disabled={disabled}\n                mask={mask}\n                autoFocus={index === 0 && autoFocus}\n                autoComplete={autoComplete}\n                onChange={onInputChange}\n                onActiveChange={onInputActiveChange}\n                onFocus={(e) => onInputFocus(e, index)}\n              />\n              {index < length - 1 && renderSeparator?.(index)}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport default InputOTP;\n"],"mappings":"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"}

package/es/list/list.js

@@ -51,7 +51,7 @@ const List = React.forwardRef((props, ref) => {
 			});
 			if (renderItem) {
 				const [start, end] = visibleRange;
-				const visibleItems = dataSource.slice(start, end + 1).map((item, i) => renderItem(item, start + i));
+				const visibleItems = dataSource.slice(start, end + 1).map((item, i) => /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, start + i) }, start + i));
 				return /* @__PURE__ */ jsx("div", {
 					style: {
 						height: totalHeight,
@@ -77,7 +77,7 @@ const List = React.forwardRef((props, ref) => {
 			children: locale?.emptyText ?? "No Data"
 		});
 		if (renderItem) {
-			const rendered = items.map((item, index) => renderItem(item, index));
+			const rendered = items.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, index) }, index));
 			if (grid) return /* @__PURE__ */ jsx("div", {
 				className: `${prefixCls}__grid`,
 				style: {

package/es/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["Pagination"],"sources":["../../src/list/list.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useVirtualScroll } from '../_utils/use-virtual-scroll';\nimport Pagination from '../pagination';\nimport { ListProps } from './types';\n\nconst ITEM_HEIGHT_MAP = { sm: 41, md: 49, lg: 57 } as const;\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {\n  const {\n    dataSource = [],\n    renderItem,\n    header,\n    footer,\n    loading = false,\n    bordered = false,\n    split = true,\n    size,\n    grid,\n    locale,\n    virtual = false,\n    height,\n    itemHeight: itemHeightProp,\n    pagination,\n    prefixCls: customisedCls,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('list', configContext.prefixCls, customisedCls);\n  const listSize = size || configContext.componentSize || 'md';\n\n  if (virtual && height == null) {\n    console.warn('[tiny-design: List] `height` is required when `virtual` is enabled.');\n  }\n  if (virtual && grid) {\n    console.warn('[tiny-design: List] `virtual` is not supported with `grid` mode. Falling back to normal rendering.');\n  }\n\n  const isVirtual = virtual && height != null && !grid;\n\n  const [currentPage, setCurrentPage] = useState(1);\n  const pageSize = pagination && pagination.pageSize ? pagination.pageSize : 10;\n\n  const itemHeight = itemHeightProp ?? ITEM_HEIGHT_MAP[listSize] ?? ITEM_HEIGHT_MAP.md;\n  const { visibleRange, totalHeight, offsetY, onScroll } = useVirtualScroll({\n    itemCount: dataSource.length,\n    itemHeight,\n    containerHeight: height ?? 0,\n  });\n\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${listSize}`]: listSize,\n    [`${prefixCls}_bordered`]: bordered,\n    [`${prefixCls}_split`]: split,\n    [`${prefixCls}_loading`]: loading,\n    [`${prefixCls}_grid`]: grid,\n  });\n\n  const paginatedData = () => {\n    if (!pagination) return dataSource;\n    const page = pagination.current ?? currentPage;\n    const start = (page - 1) * pageSize;\n    return dataSource.slice(start, start + pageSize);\n  };\n\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page);\n    pagination && pagination.onChange?.(page, pageSize);\n  };\n\n  const renderItems = () => {\n    if (isVirtual) {\n      if (dataSource.length === 0) {\n        return (\n          <div className={`${prefixCls}__empty`}>\n            {locale?.emptyText ?? 'No Data'}\n          </div>\n        );\n      }\n      if (renderItem) {\n        const [start, end] = visibleRange;\n        const visibleItems = dataSource.slice(start, end + 1).map((item, i) => renderItem(item, start + i));\n        return (\n          <div style={{ height: totalHeight, position: 'relative' }}>\n            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${offsetY}px)` }}>\n              {visibleItems}\n            </div>\n          </div>\n        );\n      }\n      return children;\n    }\n\n    const items = paginatedData();\n    if (items.length === 0 && !children) {\n      return (\n        <div className={`${prefixCls}__empty`}>\n          {locale?.emptyText ?? 'No Data'}\n        </div>\n      );\n    }\n    if (renderItem) {\n      const rendered = items.map((item, index) => renderItem(item, index));\n      if (grid) {\n        return (\n          <div\n            className={`${prefixCls}__grid`}\n            style={{\n              display: 'grid',\n              gridTemplateColumns: `repeat(${grid.column || 3}, 1fr)`,\n              gap: grid.gutter ? `${grid.gutter}px` : undefined,\n            }}\n          >\n            {rendered}\n          </div>\n        );\n      }\n      return rendered;\n    }\n    return children;\n  };\n\n  const showPagination = pagination && !isVirtual;\n  const paginationConfig = pagination && typeof pagination === 'object' ? pagination : undefined;\n  const totalItems = paginationConfig?.total ?? dataSource.length;\n  const activePage = paginationConfig?.current ?? currentPage;\n\n  const bodyCls = classNames(`${prefixCls}__body`, {\n    [`${prefixCls}__body_virtual`]: isVirtual,\n  });\n\n  const bodyStyle: React.CSSProperties | undefined = isVirtual\n    ? { height, overflowY: 'auto' }\n    : undefined;\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={style}>\n      {header && <div className={`${prefixCls}__header`}>{header}</div>}\n      <div className={bodyCls} style={bodyStyle} onScroll={isVirtual ? onScroll : undefined}>\n        {loading ? (\n          <div className={`${prefixCls}__loading`}>Loading...</div>\n        ) : (\n          renderItems()\n        )}\n      </div>\n      {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}\n      {showPagination && (\n        <Pagination\n          current={activePage}\n          total={totalItems}\n          pageSize={pageSize}\n          align={paginationConfig?.align ?? 'right'}\n          size={paginationConfig?.size}\n          disabled={paginationConfig?.disabled}\n          onChange={(page) => handlePageChange(page)}\n          style={{ padding: 16 }}\n        />\n      )}\n    </div>\n  );\n});\n\nList.displayName = 'List';\nexport default List;\n"],"mappings":"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"}
+{"version":3,"file":"list.js","names":["Pagination"],"sources":["../../src/list/list.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useVirtualScroll } from '../_utils/use-virtual-scroll';\nimport Pagination from '../pagination';\nimport { ListProps } from './types';\n\nconst ITEM_HEIGHT_MAP = { sm: 41, md: 49, lg: 57 } as const;\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {\n  const {\n    dataSource = [],\n    renderItem,\n    header,\n    footer,\n    loading = false,\n    bordered = false,\n    split = true,\n    size,\n    grid,\n    locale,\n    virtual = false,\n    height,\n    itemHeight: itemHeightProp,\n    pagination,\n    prefixCls: customisedCls,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('list', configContext.prefixCls, customisedCls);\n  const listSize = size || configContext.componentSize || 'md';\n\n  if (virtual && height == null) {\n    console.warn('[tiny-design: List] `height` is required when `virtual` is enabled.');\n  }\n  if (virtual && grid) {\n    console.warn('[tiny-design: List] `virtual` is not supported with `grid` mode. Falling back to normal rendering.');\n  }\n\n  const isVirtual = virtual && height != null && !grid;\n\n  const [currentPage, setCurrentPage] = useState(1);\n  const pageSize = pagination && pagination.pageSize ? pagination.pageSize : 10;\n\n  const itemHeight = itemHeightProp ?? ITEM_HEIGHT_MAP[listSize] ?? ITEM_HEIGHT_MAP.md;\n  const { visibleRange, totalHeight, offsetY, onScroll } = useVirtualScroll({\n    itemCount: dataSource.length,\n    itemHeight,\n    containerHeight: height ?? 0,\n  });\n\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${listSize}`]: listSize,\n    [`${prefixCls}_bordered`]: bordered,\n    [`${prefixCls}_split`]: split,\n    [`${prefixCls}_loading`]: loading,\n    [`${prefixCls}_grid`]: grid,\n  });\n\n  const paginatedData = () => {\n    if (!pagination) return dataSource;\n    const page = pagination.current ?? currentPage;\n    const start = (page - 1) * pageSize;\n    return dataSource.slice(start, start + pageSize);\n  };\n\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page);\n    pagination && pagination.onChange?.(page, pageSize);\n  };\n\n  const renderItems = () => {\n    if (isVirtual) {\n      if (dataSource.length === 0) {\n        return (\n          <div className={`${prefixCls}__empty`}>\n            {locale?.emptyText ?? 'No Data'}\n          </div>\n        );\n      }\n      if (renderItem) {\n        const [start, end] = visibleRange;\n        const visibleItems = dataSource.slice(start, end + 1).map((item, i) => (\n          <React.Fragment key={start + i}>{renderItem(item, start + i)}</React.Fragment>\n        ));\n        return (\n          <div style={{ height: totalHeight, position: 'relative' }}>\n            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${offsetY}px)` }}>\n              {visibleItems}\n            </div>\n          </div>\n        );\n      }\n      return children;\n    }\n\n    const items = paginatedData();\n    if (items.length === 0 && !children) {\n      return (\n        <div className={`${prefixCls}__empty`}>\n          {locale?.emptyText ?? 'No Data'}\n        </div>\n      );\n    }\n    if (renderItem) {\n      const rendered = items.map((item, index) => (\n        <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n      ));\n      if (grid) {\n        return (\n          <div\n            className={`${prefixCls}__grid`}\n            style={{\n              display: 'grid',\n              gridTemplateColumns: `repeat(${grid.column || 3}, 1fr)`,\n              gap: grid.gutter ? `${grid.gutter}px` : undefined,\n            }}\n          >\n            {rendered}\n          </div>\n        );\n      }\n      return rendered;\n    }\n    return children;\n  };\n\n  const showPagination = pagination && !isVirtual;\n  const paginationConfig = pagination && typeof pagination === 'object' ? pagination : undefined;\n  const totalItems = paginationConfig?.total ?? dataSource.length;\n  const activePage = paginationConfig?.current ?? currentPage;\n\n  const bodyCls = classNames(`${prefixCls}__body`, {\n    [`${prefixCls}__body_virtual`]: isVirtual,\n  });\n\n  const bodyStyle: React.CSSProperties | undefined = isVirtual\n    ? { height, overflowY: 'auto' }\n    : undefined;\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={style}>\n      {header && <div className={`${prefixCls}__header`}>{header}</div>}\n      <div className={bodyCls} style={bodyStyle} onScroll={isVirtual ? onScroll : undefined}>\n        {loading ? (\n          <div className={`${prefixCls}__loading`}>Loading...</div>\n        ) : (\n          renderItems()\n        )}\n      </div>\n      {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}\n      {showPagination && (\n        <Pagination\n          current={activePage}\n          total={totalItems}\n          pageSize={pageSize}\n          align={paginationConfig?.align ?? 'right'}\n          size={paginationConfig?.size}\n          disabled={paginationConfig?.disabled}\n          onChange={(page) => handlePageChange(page)}\n          style={{ padding: 16 }}\n        />\n      )}\n    </div>\n  );\n});\n\nList.displayName = 'List';\nexport default List;\n"],"mappings":"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"}

package/es/strength-indicator/strength-indicator.js

@@ -9,10 +9,11 @@ const StrengthIndicator = React.forwardRef((props, ref) => {
 		"#f44336",
 		"#ff9800",
 		"#52c41a"
-	], className, prefixCls: customisedCls, ...otherProps } = props;
+	], labels, className, prefixCls: customisedCls, ...otherProps } = props;
 	const prefixCls = getPrefixCls("strength-indicator", useContext(ConfigContext).prefixCls, customisedCls);
 	const cls = classNames(prefixCls, className);
-	const displayLabels = Array.isArray(props.labels) ? props.labels : [
+	const showLabels = labels !== void 0;
+	const displayLabels = Array.isArray(labels) ? labels : [
 		"Weak",
 		"Medium",
 		"Strong"
@@ -33,7 +34,7 @@ const StrengthIndicator = React.forwardRef((props, ref) => {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: `${prefixCls}__inner`,
 					style: { backgroundColor: bgColor }
-				}), "labels" in props && /* @__PURE__ */ jsx("div", {
+				}), showLabels && /* @__PURE__ */ jsx("div", {
 					className: `${prefixCls}__label`,
 					children: displayLabels[idx]
 				})]

package/es/strength-indicator/strength-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"strength-indicator.js","names":[],"sources":["../../src/strength-indicator/strength-indicator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { StrengthIndicatorProps } from './types';\n\nconst StrengthIndicator = React.forwardRef<HTMLDivElement, StrengthIndicatorProps>(\n  (props: StrengthIndicatorProps, ref): React.ReactElement => {\n    const {\n      current = 0,\n      blocks = 3,\n      colors = ['#f44336', '#ff9800', '#52c41a'],\n      className,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('strength-indicator', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className);\n    const displayLabels: React.ReactNode[] = Array.isArray(props.labels)\n      ? props.labels\n      : ['Weak', 'Medium', 'Strong'];\n\n    return (\n      <div {...otherProps} className={cls} ref={ref} role=\"progressbar\" aria-valuenow={current} aria-valuemin={0} aria-valuemax={blocks}>\n        {Array.from(new Array(blocks)).map((item, idx) => {\n          const itemCls = classNames(`${prefixCls}__item`, {\n            [`${prefixCls}__item_active`]: idx < current,\n          });\n          const bgColor = idx < current ? colors[current - 1] : undefined;\n          return (\n            <div key={idx} className={itemCls}>\n              <div className={`${prefixCls}__inner`} style={{ backgroundColor: bgColor }} />\n              {'labels' in props && (\n                <div className={`${prefixCls}__label`}>{displayLabels[idx]}</div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nStrengthIndicator.displayName = 'StrengthIndicator';\n\nexport default StrengthIndicator;\n"],"mappings":";;;;;;AAMA,MAAM,oBAAoB,MAAM,YAC7B,OAA+B,QAA4B;CAC1D,MAAM,EACJ,UAAU,GACV,SAAS,GACT,SAAS;EAAC;EAAW;EAAW;EAAU,EAC1C,WACA,WAAW,eACX,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,sBADT,WAAW,cAAc,CACoB,WAAW,cAAc;CAC5F,MAAM,MAAM,WAAW,WAAW,UAAU;CAC5C,MAAM,gBAAmC,MAAM,QAAQ,MAAM,OAAO,GAChE,MAAM,SACN;EAAC;EAAQ;EAAU;EAAS;AAEhC,QACE,oBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAU;EAAK,MAAK;EAAc,iBAAe;EAAS,iBAAe;EAAG,iBAAe;YACxH,MAAM,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,KAAK,MAAM,QAAQ;GAChD,MAAM,UAAU,WAAW,GAAG,UAAU,SAAS,GAC9C,GAAG,UAAU,iBAAiB,MAAM,SACtC,CAAC;GACF,MAAM,UAAU,MAAM,UAAU,OAAO,UAAU,KAAK,KAAA;AACtD,UACE,qBAAC,OAAD;IAAe,WAAW;cAA1B,CACE,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;KAAU,OAAO,EAAE,iBAAiB,SAAS;KAAI,CAAA,EAC7E,YAAY,SACX,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,cAAc;KAAW,CAAA,CAE/D;MALI,IAKJ;IAER;EACE,CAAA;EAGX;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"strength-indicator.js","names":[],"sources":["../../src/strength-indicator/strength-indicator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { StrengthIndicatorProps } from './types';\n\nconst StrengthIndicator = React.forwardRef<HTMLDivElement, StrengthIndicatorProps>(\n  (props: StrengthIndicatorProps, ref): React.ReactElement => {\n    const {\n      current = 0,\n      blocks = 3,\n      colors = ['#f44336', '#ff9800', '#52c41a'],\n      labels,\n      className,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('strength-indicator', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className);\n    const showLabels = labels !== undefined;\n    const displayLabels: React.ReactNode[] = Array.isArray(labels)\n      ? labels\n      : ['Weak', 'Medium', 'Strong'];\n\n    return (\n      <div {...otherProps} className={cls} ref={ref} role=\"progressbar\" aria-valuenow={current} aria-valuemin={0} aria-valuemax={blocks}>\n        {Array.from(new Array(blocks)).map((item, idx) => {\n          const itemCls = classNames(`${prefixCls}__item`, {\n            [`${prefixCls}__item_active`]: idx < current,\n          });\n          const bgColor = idx < current ? colors[current - 1] : undefined;\n          return (\n            <div key={idx} className={itemCls}>\n              <div className={`${prefixCls}__inner`} style={{ backgroundColor: bgColor }} />\n              {showLabels && (\n                <div className={`${prefixCls}__label`}>{displayLabels[idx]}</div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nStrengthIndicator.displayName = 'StrengthIndicator';\n\nexport default StrengthIndicator;\n"],"mappings":";;;;;;AAMA,MAAM,oBAAoB,MAAM,YAC7B,OAA+B,QAA4B;CAC1D,MAAM,EACJ,UAAU,GACV,SAAS,GACT,SAAS;EAAC;EAAW;EAAW;EAAU,EAC1C,QACA,WACA,WAAW,eACX,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,sBADT,WAAW,cAAc,CACoB,WAAW,cAAc;CAC5F,MAAM,MAAM,WAAW,WAAW,UAAU;CAC5C,MAAM,aAAa,WAAW,KAAA;CAC9B,MAAM,gBAAmC,MAAM,QAAQ,OAAO,GAC1D,SACA;EAAC;EAAQ;EAAU;EAAS;AAEhC,QACE,oBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAU;EAAK,MAAK;EAAc,iBAAe;EAAS,iBAAe;EAAG,iBAAe;YACxH,MAAM,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,KAAK,MAAM,QAAQ;GAChD,MAAM,UAAU,WAAW,GAAG,UAAU,SAAS,GAC9C,GAAG,UAAU,iBAAiB,MAAM,SACtC,CAAC;GACF,MAAM,UAAU,MAAM,UAAU,OAAO,UAAU,KAAK,KAAA;AACtD,UACE,qBAAC,OAAD;IAAe,WAAW;cAA1B,CACE,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;KAAU,OAAO,EAAE,iBAAiB,SAAS;KAAI,CAAA,EAC7E,cACC,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,cAAc;KAAW,CAAA,CAE/D;MALI,IAKJ;IAER;EACE,CAAA;EAGX;AAED,kBAAkB,cAAc"}

package/es/tag/tag.js

@@ -6,8 +6,8 @@ import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/tag/tag.tsx
 const Tag = React.memo(forwardRef((props, ref) => {
-	const { closable = false, defaultVisible = true, prefixCls: customisedCls, color, onClose, onClick, className, style, children, ...otherProps } = props;
-	const [visible, setVisible] = useState("visible" in props ? props.visible : defaultVisible);
+	const { closable = false, visible: visibleProp, defaultVisible = true, prefixCls: customisedCls, color, onClose, onClick, className, style, children, ...otherProps } = props;
+	const [visible, setVisible] = useState(visibleProp !== void 0 ? visibleProp : defaultVisible);
 	const prefixCls = getPrefixCls("tag", useContext(ConfigContext).prefixCls, customisedCls);
 	const cls = classNames(prefixCls, className, {
 		[`${prefixCls}_${color}`]: color && PresetColors.includes(color),
@@ -21,7 +21,7 @@ const Tag = React.memo(forwardRef((props, ref) => {
 	const closeBtnOnClick = (e) => {
 		onClose && onClose(e);
 		if (e.defaultPrevented) return;
-		!("visible" in props) && setVisible(false);
+		visibleProp === void 0 && setVisible(false);
 	};
 	const tagStyle = {
 		backgroundColor: color ? PresetColors.includes(color) ? void 0 : color : void 0,
@@ -30,8 +30,8 @@ const Tag = React.memo(forwardRef((props, ref) => {
 		...style
 	};
 	useEffect(() => {
-		"visible" in props && setVisible(props.visible);
-	}, [props]);
+		if (visibleProp !== void 0) setVisible(visibleProp);
+	}, [visibleProp]);
 	return /* @__PURE__ */ jsxs("div", {
 		...otherProps,
 		ref,

package/es/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import React, { useState, useEffect, MouseEvent, useContext, forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { PresetColors, TagProps } from './types';\n\nconst Tag = React.memo(forwardRef<HTMLDivElement, TagProps>((props, ref) => {\n  const {\n    closable = false,\n    defaultVisible = true,\n    prefixCls: customisedCls,\n    color,\n    onClose,\n    onClick,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const [visible, setVisible] = useState<boolean>(\n    'visible' in props ? (props.visible as boolean) : defaultVisible\n  );\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('tag', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${color}`]: color && PresetColors.includes(color),\n    [`${prefixCls}_visible`]: visible,\n    [`${prefixCls}_closeable`]: closable,\n  });\n\n  /**\n   * Callback when the close button is clicked.\n   * @param e\n   */\n  const closeBtnOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    onClose && onClose(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n    !('visible' in props) && setVisible(false);\n  };\n\n  const tagStyle: React.CSSProperties = {\n    backgroundColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    borderColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    color: color ? (PresetColors.includes(color) ? undefined : '#fff') : undefined,\n    ...style,\n  };\n\n  useEffect(() => {\n    'visible' in props && setVisible(props.visible as boolean);\n  }, [props]);\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={tagStyle} onClick={onClick}>\n      {children}\n      {closable && (\n        <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Remove\">\n          ✕\n        </button>\n      )}\n    </div>\n  );\n}));\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;AAMA,MAAM,MAAM,MAAM,KAAK,YAAsC,OAAO,QAAQ;CAC1E,MAAM,EACJ,WAAW,OACX,iBAAiB,MACjB,WAAW,eACX,OACA,SACA,SACA,WACA,OACA,UACA,GAAG,eACD;CACJ,MAAM,CAAC,SAAS,cAAc,SAC5B,aAAa,QAAS,MAAM,UAAsB,eACnD;CAED,MAAM,YAAY,aAAa,OADT,WAAW,cAAc,CACK,WAAW,cAAc;CAC7E,MAAM,MAAM,WAAW,WAAW,WAAW;GAC1C,GAAG,UAAU,GAAG,UAAU,SAAS,aAAa,SAAS,MAAM;GAC/D,GAAG,UAAU,YAAY;GACzB,GAAG,UAAU,cAAc;EAC7B,CAAC;;;;;CAMF,MAAM,mBAAmB,MAAyC;AAChE,aAAW,QAAQ,EAAE;AACrB,MAAI,EAAE,iBACJ;AAEF,IAAE,aAAa,UAAU,WAAW,MAAM;;CAG5C,MAAM,WAAgC;EACpC,iBAAiB,QAAS,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC9E,aAAa,QAAS,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC1E,OAAO,QAAS,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,SAAU,KAAA;EACrE,GAAG;EACJ;AAED,iBAAgB;AACd,eAAa,SAAS,WAAW,MAAM,QAAmB;IACzD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAK,OAAO;EAAmB;YAAzE,CACG,UACA,YACC,oBAAC,UAAD;GAAQ,MAAK;GAAS,WAAW,GAAG,UAAU;GAAc,SAAS;GAAiB,cAAW;aAAS;GAEjG,CAAA,CAEP;;EAER,CAAC;AAEH,IAAI,cAAc"}
+{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import React, { useState, useEffect, MouseEvent, useContext, forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { PresetColors, TagProps } from './types';\n\nconst Tag = React.memo(forwardRef<HTMLDivElement, TagProps>((props, ref) => {\n  const {\n    closable = false,\n    visible: visibleProp,\n    defaultVisible = true,\n    prefixCls: customisedCls,\n    color,\n    onClose,\n    onClick,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const [visible, setVisible] = useState<boolean>(\n    visibleProp !== undefined ? visibleProp : defaultVisible\n  );\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('tag', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${color}`]: color && PresetColors.includes(color),\n    [`${prefixCls}_visible`]: visible,\n    [`${prefixCls}_closeable`]: closable,\n  });\n\n  /**\n   * Callback when the close button is clicked.\n   * @param e\n   */\n  const closeBtnOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    onClose && onClose(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n    visibleProp === undefined && setVisible(false);\n  };\n\n  const tagStyle: React.CSSProperties = {\n    backgroundColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    borderColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined,\n    color: color ? (PresetColors.includes(color) ? undefined : '#fff') : undefined,\n    ...style,\n  };\n\n  useEffect(() => {\n    if (visibleProp !== undefined) setVisible(visibleProp);\n  }, [visibleProp]);\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={tagStyle} onClick={onClick}>\n      {children}\n      {closable && (\n        <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Remove\">\n          ✕\n        </button>\n      )}\n    </div>\n  );\n}));\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;AAMA,MAAM,MAAM,MAAM,KAAK,YAAsC,OAAO,QAAQ;CAC1E,MAAM,EACJ,WAAW,OACX,SAAS,aACT,iBAAiB,MACjB,WAAW,eACX,OACA,SACA,SACA,WACA,OACA,UACA,GAAG,eACD;CACJ,MAAM,CAAC,SAAS,cAAc,SAC5B,gBAAgB,KAAA,IAAY,cAAc,eAC3C;CAED,MAAM,YAAY,aAAa,OADT,WAAW,cAAc,CACK,WAAW,cAAc;CAC7E,MAAM,MAAM,WAAW,WAAW,WAAW;GAC1C,GAAG,UAAU,GAAG,UAAU,SAAS,aAAa,SAAS,MAAM;GAC/D,GAAG,UAAU,YAAY;GACzB,GAAG,UAAU,cAAc;EAC7B,CAAC;;;;;CAMF,MAAM,mBAAmB,MAAyC;AAChE,aAAW,QAAQ,EAAE;AACrB,MAAI,EAAE,iBACJ;AAEF,kBAAgB,KAAA,KAAa,WAAW,MAAM;;CAGhD,MAAM,WAAgC;EACpC,iBAAiB,QAAS,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC9E,aAAa,QAAS,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,QAAS,KAAA;EAC1E,OAAO,QAAS,aAAa,SAAS,MAAM,GAAG,KAAA,IAAY,SAAU,KAAA;EACrE,GAAG;EACJ;AAED,iBAAgB;AACd,MAAI,gBAAgB,KAAA,EAAW,YAAW,YAAY;IACrD,CAAC,YAAY,CAAC;AAEjB,QACE,qBAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAK,OAAO;EAAmB;YAAzE,CACG,UACA,YACC,oBAAC,UAAD;GAAQ,MAAK;GAAS,WAAW,GAAG,UAAU;GAAc,SAAS;GAAiB,cAAW;aAAS;GAEjG,CAAA,CAEP;;EAER,CAAC;AAEH,IAAI,cAAc"}

package/es/waterfall/waterfall.js

@@ -57,13 +57,18 @@ const Waterfall = React.forwardRef((props, ref) => {
 		for (const [, el] of itemRefsMap.current) if (el) observer.observe(el);
 		return () => observer.disconnect();
 	}, [items, collectItemSizes]);
+	const prevLayoutRef = useRef("");
 	useEffect(() => {
 		if (!onLayoutChange || !items || items.length === 0) return;
 		if (!items.every((item) => itemPositions.has(item.key))) return;
-		onLayoutChange(items.map((item) => ({
+		const sortInfo = items.map((item) => ({
 			key: item.key,
 			column: itemPositions.get(item.key).column
-		})));
+		}));
+		const layoutKey = sortInfo.map((s) => `${s.key}:${s.column}`).join(",");
+		if (layoutKey === prevLayoutRef.current) return;
+		prevLayoutRef.current = layoutKey;
+		onLayoutChange(sortInfo);
 	}, [
 		itemPositions,
 		items,

package/es/waterfall/waterfall.js.map

@@ -1 +1 @@
-{"version":3,"file":"waterfall.js","names":["Transition"],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ============== Exiting items (replaces TransitionGroup) ==============\n  const prevItemsRef = useRef<WaterfallItem[]>(items || []);\n  const [exitingItems, setExitingItems] = useState<Map<React.Key, WaterfallItem>>(new Map());\n\n  useEffect(() => {\n    const currentKeys = new Set((items || []).map((item, i) => item.key ?? i));\n    const removed = new Map<React.Key, WaterfallItem>();\n\n    prevItemsRef.current.forEach((item, index) => {\n      const key = item.key ?? index;\n      if (!currentKeys.has(key)) {\n        removed.set(key, item);\n      }\n    });\n\n    if (removed.size > 0) {\n      setExitingItems((prev) => {\n        const next = new Map(prev);\n        removed.forEach((item, key) => next.set(key, item));\n        return next;\n      });\n    }\n\n    prevItemsRef.current = items || [];\n  }, [items]);\n\n  const handleExited = useCallback((key: React.Key) => {\n    itemRefsMap.current.delete(key);\n    setExitingItems((prev) => {\n      const next = new Map(prev);\n      next.delete(key);\n      return next;\n    });\n    collectItemSizes();\n  }, [collectItemSizes]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  const renderItem = (item: WaterfallItem, index: number, isExiting: boolean) => {\n    const key = item.key ?? index;\n    const position = itemPositions.get(key);\n    const hasPosition = !!position;\n    const columnIndex = position?.column ?? 0;\n\n    const itemStyle: React.CSSProperties = {\n      position: 'absolute',\n      width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n      left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n      top: position?.top ?? 0,\n      // Only transition position changes after initial placement\n      transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n      // Hide until position is computed so items don't flash at (0,0)\n      opacity: hasPosition ? 1 : 0,\n    };\n\n    const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n    return (\n      <Transition\n        key={key}\n        in={!isExiting}\n        timeout={300}\n        appear={false}\n        unmountOnExit={true}\n        classNames={`${prefixCls}__item-fade`}\n        onExited={() => handleExited(key)}\n      >\n        <div\n          ref={(el) => setItemRef(key, el)}\n          className={`${prefixCls}__item`}\n          style={itemStyle}\n        >\n          {content}\n        </div>\n      </Transition>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      {mergedItems.map((item, index) => renderItem(item, index, false))}\n      {Array.from(exitingItems.entries()).map(([key, item]) =>\n        renderItem(item, Number(key), true)\n      )}\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":"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"}
+{"version":3,"file":"waterfall.js","names":["Transition"],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  const prevLayoutRef = useRef<string>('');\n\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n\n    const layoutKey = sortInfo.map((s) => `${s.key}:${s.column}`).join(',');\n    if (layoutKey === prevLayoutRef.current) return;\n    prevLayoutRef.current = layoutKey;\n\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ============== Exiting items (replaces TransitionGroup) ==============\n  const prevItemsRef = useRef<WaterfallItem[]>(items || []);\n  const [exitingItems, setExitingItems] = useState<Map<React.Key, WaterfallItem>>(new Map());\n\n  useEffect(() => {\n    const currentKeys = new Set((items || []).map((item, i) => item.key ?? i));\n    const removed = new Map<React.Key, WaterfallItem>();\n\n    prevItemsRef.current.forEach((item, index) => {\n      const key = item.key ?? index;\n      if (!currentKeys.has(key)) {\n        removed.set(key, item);\n      }\n    });\n\n    if (removed.size > 0) {\n      setExitingItems((prev) => {\n        const next = new Map(prev);\n        removed.forEach((item, key) => next.set(key, item));\n        return next;\n      });\n    }\n\n    prevItemsRef.current = items || [];\n  }, [items]);\n\n  const handleExited = useCallback((key: React.Key) => {\n    itemRefsMap.current.delete(key);\n    setExitingItems((prev) => {\n      const next = new Map(prev);\n      next.delete(key);\n      return next;\n    });\n    collectItemSizes();\n  }, [collectItemSizes]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  const renderItem = (item: WaterfallItem, index: number, isExiting: boolean) => {\n    const key = item.key ?? index;\n    const position = itemPositions.get(key);\n    const hasPosition = !!position;\n    const columnIndex = position?.column ?? 0;\n\n    const itemStyle: React.CSSProperties = {\n      position: 'absolute',\n      width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n      left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n      top: position?.top ?? 0,\n      // Only transition position changes after initial placement\n      transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n      // Hide until position is computed so items don't flash at (0,0)\n      opacity: hasPosition ? 1 : 0,\n    };\n\n    const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n    return (\n      <Transition\n        key={key}\n        in={!isExiting}\n        timeout={300}\n        appear={false}\n        unmountOnExit={true}\n        classNames={`${prefixCls}__item-fade`}\n        onExited={() => handleExited(key)}\n      >\n        <div\n          ref={(el) => setItemRef(key, el)}\n          className={`${prefixCls}__item`}\n          style={itemStyle}\n        >\n          {content}\n        </div>\n      </Transition>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      {mergedItems.map((item, index) => renderItem(item, index, false))}\n      {Array.from(exitingItems.entries()).map(([key, item]) =>\n        renderItem(item, Number(key), true)\n      )}\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":"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"}

package/lib/alert/alert.js

@@ -27,7 +27,7 @@ const Alert = react.default.forwardRef((props, forwardedRef) => {
 	const closeBtnOnClick = (e) => {
 		ref.current && setClosedStyle(ref.current);
 		setShow(false);
-		onClose && onClose(e);
+		onClose?.(e);
 	};
 	const closeIcon = (closable || closeText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -75,7 +75,7 @@ const Alert = react.default.forwardRef((props, forwardedRef) => {
 			children: [
 				icon && renderIcon(),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: `${prefixCls}__title`,
+					className: (0, classnames.default)(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children }),
 					children: title
 				}), children] }),
 				closeIcon