@tiny-design/react 1.0.4

package/lib/transfer/transfer-panel.js

@@ -0,0 +1,98 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_input = require("../input/input.js");
+const require_checkbox = require("../checkbox/checkbox.js");
+const require_checkbox_group = require("../checkbox/checkbox-group.js");
+const require_index = require("../empty/index.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/transfer/transfer-panel.tsx
+const TransferPanel = react.default.forwardRef((props, ref) => {
+	const { dataSource, checkedKeys, title, placeholder, footer, showSearch, className, onChange, renderItem, filterOption, disabled: allDisabled, prefixCls: customisedCls, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("transfer-panel", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className);
+	const [query, setQuery] = (0, react.useState)("");
+	const getFilteredData = () => {
+		return dataSource.filter((item) => {
+			if (typeof filterOption === "function") return filterOption(query, item);
+			else if (query.trim().length > 0) return item.label.toLowerCase().includes(query.toLowerCase());
+			else return true;
+		});
+	};
+	const filteredData = getFilteredData();
+	const checkableData = filteredData.filter((item) => !item.disabled);
+	const isAllChecked = checkableData.length > 0 && checkedKeys.length === checkableData.length;
+	const isIndeterminate = checkedKeys.length > 0 && checkedKeys.length < checkableData.length;
+	/**
+	* Footer checkbox onChange event
+	*/
+	const handleAllCheckedChange = (e) => {
+		onChange(e.currentTarget.checked ? checkableData.map((item) => item.key) : []);
+	};
+	const checkedSummary = () => {
+		if (isIndeterminate || isAllChecked) return `${checkedKeys.length} / ${filteredData.length} checked`;
+		return `${filteredData.length} items`;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...otherProps,
+		className: cls,
+		ref,
+		children: [
+			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__header`,
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefixCls}__body`,
+				children: [showSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefixCls}__input-container`,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.default, {
+						clearable: true,
+						size: "sm",
+						placeholder,
+						value: query,
+						onChange: (e) => {
+							setQuery(e.currentTarget.value);
+						},
+						onClearClick: () => setQuery("")
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefixCls}__list-container`,
+					children: filteredData.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox_group.default, {
+						value: checkedKeys,
+						onChange: (values) => onChange(values),
+						className: `${prefixCls}__list`,
+						children: filteredData.map((item) => {
+							const { key, label, disabled } = item;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.default, {
+								value: key,
+								disabled: allDisabled || disabled,
+								className: `${prefixCls}__list-item`,
+								children: renderItem ? renderItem(item) : label
+							}, key);
+						})
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { className: `${prefixCls}__not-found` })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefixCls}__footer`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.default, {
+					disabled: allDisabled,
+					checked: isAllChecked,
+					onChange: handleAllCheckedChange,
+					indeterminate: isIndeterminate,
+					children: checkedSummary()
+				}), footer]
+			})
+		]
+	});
+});
+TransferPanel.displayName = "TransferPanel";
+//#endregion
+exports.default = TransferPanel;
+
+//# sourceMappingURL=transfer-panel.js.map

package/lib/transfer/transfer-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transfer-panel.js","names":["React","getPrefixCls","ConfigContext","Input","CheckboxGroup","Checkbox","Empty"],"sources":["../../src/transfer/transfer-panel.tsx"],"sourcesContent":["import React, { ChangeEvent, ReactNode, useContext, useState } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { BaseProps } from '../_utils/props';\nimport { TransferItem } from './types';\nimport Checkbox from '../checkbox/checkbox';\nimport CheckboxGroup from '../checkbox/checkbox-group';\nimport Empty from '../empty';\nimport Input from '../input/input';\n\nexport interface TransferPanelProps\n  extends BaseProps,\n    Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'title' | 'onChange'> {\n  dataSource: TransferItem[];\n  checkedKeys: string[];\n  onChange: (checkedKeys: string[]) => void;\n  disabled: boolean;\n  title?: ReactNode;\n  footer?: ReactNode;\n  placeholder?: string;\n  showSearch?: boolean;\n  renderItem?: (item: TransferItem) => ReactNode;\n  filterOption?: (input: string, item: TransferItem) => boolean;\n}\n\nconst TransferPanel = React.forwardRef<HTMLDivElement, TransferPanelProps>(\n  (props: TransferPanelProps, ref): React.ReactElement => {\n    const {\n      dataSource,\n      checkedKeys,\n      title,\n      placeholder,\n      footer,\n      showSearch,\n      className,\n      onChange,\n      renderItem,\n      filterOption,\n      disabled: allDisabled,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('transfer-panel', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className);\n    const [query, setQuery] = useState('');\n\n    const getFilteredData = (): TransferItem[] => {\n      return dataSource.filter((item) => {\n        if (typeof filterOption === 'function') {\n          return filterOption(query, item);\n        } else if (query.trim().length > 0) {\n          const label = item.label;\n          return label.toLowerCase().includes(query.toLowerCase());\n        } else {\n          return true;\n        }\n      });\n    };\n\n    const filteredData = getFilteredData();\n    const checkableData = filteredData.filter((item) => !item.disabled);\n    const isAllChecked = checkableData.length > 0 && checkedKeys.length === checkableData.length;\n    const isIndeterminate = checkedKeys.length > 0 && checkedKeys.length < checkableData.length;\n\n    /**\n     * Footer checkbox onChange event\n     */\n    const handleAllCheckedChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const isChecked = e.currentTarget.checked;\n      const checkedKeys = isChecked ? checkableData.map((item) => item.key) : [];\n      onChange(checkedKeys);\n    };\n\n    const checkedSummary = (): string => {\n      if (isIndeterminate || isAllChecked) {\n        return `${checkedKeys.length} / ${filteredData.length} checked`;\n      }\n      return `${filteredData.length} items`;\n    };\n\n    return (\n      <div {...otherProps} className={cls} ref={ref}>\n        {title && <div className={`${prefixCls}__header`}>{title}</div>}\n        <div className={`${prefixCls}__body`}>\n          {showSearch && (\n            <div className={`${prefixCls}__input-container`}>\n              <Input\n                clearable\n                size=\"sm\"\n                placeholder={placeholder}\n                value={query}\n                onChange={(e) => {\n                  setQuery(e.currentTarget.value);\n                }}\n                onClearClick={() => setQuery('')}\n              />\n            </div>\n          )}\n          <div className={`${prefixCls}__list-container`}>\n            {filteredData.length > 0 ? (\n              <CheckboxGroup\n                value={checkedKeys}\n                onChange={(values) => onChange(values)}\n                className={`${prefixCls}__list`}>\n                {filteredData.map((item) => {\n                  const { key, label, disabled } = item;\n                  return (\n                    <Checkbox\n                      key={key}\n                      value={key}\n                      disabled={allDisabled || disabled}\n                      className={`${prefixCls}__list-item`}>\n                      {renderItem ? renderItem(item) : label}\n                    </Checkbox>\n                  );\n                })}\n              </CheckboxGroup>\n            ) : (\n              <Empty className={`${prefixCls}__not-found`} />\n            )}\n          </div>\n        </div>\n        <div className={`${prefixCls}__footer`}>\n          <Checkbox\n            disabled={allDisabled}\n            checked={isAllChecked}\n            onChange={handleAllCheckedChange}\n            indeterminate={isIndeterminate}>\n            {checkedSummary()}\n          </Checkbox>\n          {footer}\n        </div>\n      </div>\n    );\n  }\n);\n\nTransferPanel.displayName = 'TransferPanel';\n\nexport default TransferPanel;\n"],"mappings":";;;;;;;;;;;;;AA0BA,MAAM,gBAAgBA,MAAAA,QAAM,YACzB,OAA2B,QAA4B;CACtD,MAAM,EACJ,YACA,aACA,OACA,aACA,QACA,YACA,WACA,UACA,YACA,cACA,UAAU,aACV,WAAW,eACX,GAAG,eACD;CAEJ,MAAM,YAAYC,gBAAAA,aAAa,mBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACgB,WAAW,cAAc;CACxF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;CAC5C,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,GAAG;CAEtC,MAAM,wBAAwC;AAC5C,SAAO,WAAW,QAAQ,SAAS;AACjC,OAAI,OAAO,iBAAiB,WAC1B,QAAO,aAAa,OAAO,KAAK;YACvB,MAAM,MAAM,CAAC,SAAS,EAE/B,QADc,KAAK,MACN,aAAa,CAAC,SAAS,MAAM,aAAa,CAAC;OAExD,QAAO;IAET;;CAGJ,MAAM,eAAe,iBAAiB;CACtC,MAAM,gBAAgB,aAAa,QAAQ,SAAS,CAAC,KAAK,SAAS;CACnE,MAAM,eAAe,cAAc,SAAS,KAAK,YAAY,WAAW,cAAc;CACtF,MAAM,kBAAkB,YAAY,SAAS,KAAK,YAAY,SAAS,cAAc;;;;CAKrF,MAAM,0BAA0B,MAAqC;AAGnE,WAFkB,EAAE,cAAc,UACF,cAAc,KAAK,SAAS,KAAK,IAAI,GAAG,EAAE,CACrD;;CAGvB,MAAM,uBAA+B;AACnC,MAAI,mBAAmB,aACrB,QAAO,GAAG,YAAY,OAAO,KAAK,aAAa,OAAO;AAExD,SAAO,GAAG,aAAa,OAAO;;AAGhC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAU;YAA1C;GACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAAY;IAAY,CAAA;GAC/D,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAA7B,CACG,cACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAC3B,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;MACE,WAAA;MACA,MAAK;MACQ;MACb,OAAO;MACP,WAAW,MAAM;AACf,gBAAS,EAAE,cAAc,MAAM;;MAEjC,oBAAoB,SAAS,GAAG;MAChC,CAAA;KACE,CAAA,EAER,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAC1B,aAAa,SAAS,IACrB,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,SAAD;MACE,OAAO;MACP,WAAW,WAAW,SAAS,OAAO;MACtC,WAAW,GAAG,UAAU;gBACvB,aAAa,KAAK,SAAS;OAC1B,MAAM,EAAE,KAAK,OAAO,aAAa;AACjC,cACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAD;QAEE,OAAO;QACP,UAAU,eAAe;QACzB,WAAW,GAAG,UAAU;kBACvB,aAAa,WAAW,KAAK,GAAG;QACxB,EALJ,IAKI;QAEb;MACY,CAAA,GAEhB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD,EAAO,WAAW,GAAG,UAAU,cAAgB,CAAA;KAE7C,CAAA,CACF;;GACN,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAA7B,CACE,iBAAA,GAAA,kBAAA,KAACD,iBAAAA,SAAD;KACE,UAAU;KACV,SAAS;KACT,UAAU;KACV,eAAe;eACd,gBAAgB;KACR,CAAA,EACV,OACG;;GACF;;EAGX;AAED,cAAc,cAAc"}

package/lib/transfer/transfer.d.ts

@@ -0,0 +1,8 @@
+import { TransferProps } from "./types.js";
+import React from "react";
+
+//#region src/transfer/transfer.d.ts
+declare const Transfer: React.ForwardRefExoticComponent<Omit<TransferProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Transfer };
+//# sourceMappingURL=transfer.d.ts.map

package/lib/transfer/transfer.js

@@ -0,0 +1,125 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_components = require("../_utils/components.js");
+const require_button = require("../button/button.js");
+const require_transfer_panel = require("./transfer-panel.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/transfer/transfer.tsx
+const Transfer = react.default.forwardRef((props, ref) => {
+	const { dataSource = [], defaultValue = [], buttonTexts = [], showSearch = false, disabled = false, value, titles, placeholders, className, onChange, renderItem, filterOption, prefixCls: customisedCls, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("transfer", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className);
+	const [leftData, rightData] = (0, react.useCallback)(() => {
+		const rightKeys = "value" in props ? value : defaultValue;
+		const rightData = dataSource.filter((item) => rightKeys.includes(item.key));
+		return [dataSource.filter((item) => !rightKeys.includes(item.key)), rightData];
+	}, [
+		props,
+		value,
+		dataSource,
+		defaultValue
+	])();
+	const [sourceData, setSourceData] = (0, react.useState)(leftData);
+	const [targetData, setTargetData] = (0, react.useState)(rightData);
+	const [leftCheckedKeys, setLeftCheckedKeys] = (0, react.useState)([]);
+	const [rightCheckedKeys, setRightCheckedKeys] = (0, react.useState)([]);
+	const addToLeft = () => {
+		const leftKeys = sourceData.map((item) => item.key);
+		const currKeys = leftKeys.slice();
+		rightCheckedKeys.forEach((key) => {
+			if (!leftKeys.includes(key)) currKeys.push(key);
+		});
+		const targetData = dataSource.filter((item) => !currKeys.includes(item.key));
+		if (!("value" in props)) {
+			setRightCheckedKeys([]);
+			setSourceData([...dataSource.filter((item) => currKeys.includes(item.key))]);
+			setTargetData([...targetData]);
+		}
+		const targetKey = targetData.map((item) => item.key);
+		onChange && onChange(targetKey, "left", rightCheckedKeys);
+	};
+	const addToRight = () => {
+		const rightKeys = targetData.map((item) => item.key);
+		const currKeys = rightKeys.slice();
+		leftCheckedKeys.forEach((key) => {
+			if (!rightKeys.includes(key)) currKeys.push(key);
+		});
+		if (!("value" in props)) {
+			setLeftCheckedKeys([]);
+			setSourceData([...dataSource.filter((item) => !currKeys.includes(item.key))]);
+			setTargetData([...dataSource.filter((item) => currKeys.includes(item.key))]);
+		}
+		onChange && onChange(currKeys, "right", leftCheckedKeys);
+	};
+	(0, react.useEffect)(() => {
+		if ("value" in props) {
+			const rightKeys = props.value;
+			const rightData = dataSource.filter((item) => rightKeys.includes(item.key));
+			setSourceData(dataSource.filter((item) => !rightKeys.includes(item.key)));
+			setTargetData(rightData);
+			setLeftCheckedKeys([]);
+			setRightCheckedKeys([]);
+		}
+	}, [props, dataSource]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...otherProps,
+		className: cls,
+		ref,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_transfer_panel.default, {
+				title: titles && titles[0],
+				placeholder: placeholders && placeholders[0] || "search",
+				showSearch,
+				dataSource: sourceData,
+				checkedKeys: leftCheckedKeys,
+				disabled,
+				onChange: (keys) => setLeftCheckedKeys(keys),
+				renderItem,
+				filterOption
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefixCls}__buttons`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.default, {
+					btnType: "primary",
+					size: "sm",
+					onClick: addToRight,
+					disabled: leftCheckedKeys.length === 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ArrowDown, {
+						size: 12,
+						className: `${prefixCls}__left-arrow`
+					}), buttonTexts && buttonTexts[0] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: buttonTexts[0] })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.default, {
+					btnType: "primary",
+					size: "sm",
+					onClick: addToLeft,
+					disabled: rightCheckedKeys.length === 0,
+					children: [buttonTexts && buttonTexts[1] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: buttonTexts[1] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ArrowDown, {
+						size: 12,
+						className: `${prefixCls}__right-arrow`
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_transfer_panel.default, {
+				title: titles && titles[1],
+				placeholder: placeholders && placeholders[1] || "search",
+				showSearch,
+				dataSource: targetData,
+				checkedKeys: rightCheckedKeys,
+				disabled,
+				onChange: (keys) => setRightCheckedKeys(keys),
+				renderItem,
+				filterOption
+			})
+		]
+	});
+});
+Transfer.displayName = "Transfer";
+//#endregion
+exports.default = Transfer;
+
+//# sourceMappingURL=transfer.js.map

package/lib/transfer/transfer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transfer.js","names":["React","getPrefixCls","ConfigContext","TransferPanel","Button","ArrowDown"],"sources":["../../src/transfer/transfer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { ArrowDown } from '../_utils/components';\nimport { TransferProps, TransferItem } from './types';\nimport TransferPanel from './transfer-panel';\nimport Button from '../button/button';\n\nconst Transfer = React.forwardRef<HTMLDivElement, TransferProps>(\n  (props: TransferProps, ref): React.ReactElement => {\n    const {\n      dataSource = [],\n      defaultValue = [],\n      buttonTexts = [],\n      showSearch = false,\n      disabled = false,\n      value,\n      titles,\n      placeholders,\n      className,\n      onChange,\n      renderItem,\n      filterOption,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('transfer', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className);\n\n    const getDataKeys = useCallback((): [TransferItem[], TransferItem[]] => {\n      const rightKeys: string[] = 'value' in props ? (value as string[]) : defaultValue;\n      const rightData: TransferItem[] = dataSource.filter((item) => rightKeys.includes(item.key));\n      const leftData: TransferItem[] = dataSource.filter((item) => !rightKeys.includes(item.key));\n      return [leftData, rightData];\n    }, [props, value, dataSource, defaultValue]);\n\n    const [leftData, rightData] = getDataKeys();\n    const [sourceData, setSourceData] = useState<TransferItem[]>(leftData);\n    const [targetData, setTargetData] = useState<TransferItem[]>(rightData);\n    const [leftCheckedKeys, setLeftCheckedKeys] = useState<string[]>([]);\n    const [rightCheckedKeys, setRightCheckedKeys] = useState<string[]>([]);\n\n    const addToLeft = () => {\n      const leftKeys = sourceData.map((item) => item.key);\n      const currKeys = leftKeys.slice();\n      rightCheckedKeys.forEach((key) => {\n        if (!leftKeys.includes(key)) {\n          currKeys.push(key);\n        }\n      });\n\n      const targetData = dataSource.filter((item) => !currKeys.includes(item.key));\n      if (!('value' in props)) {\n        setRightCheckedKeys([]);\n        setSourceData([...dataSource.filter((item) => currKeys.includes(item.key))]);\n        setTargetData([...targetData]);\n      }\n      const targetKey = targetData.map((item) => item.key);\n      onChange && onChange(targetKey, 'left', rightCheckedKeys);\n    };\n\n    const addToRight = () => {\n      const rightKeys = targetData.map((item) => item.key);\n      const currKeys = rightKeys.slice();\n      leftCheckedKeys.forEach((key) => {\n        if (!rightKeys.includes(key)) {\n          currKeys.push(key);\n        }\n      });\n\n      if (!('value' in props)) {\n        setLeftCheckedKeys([]);\n        setSourceData([...dataSource.filter((item) => !currKeys.includes(item.key))]);\n        setTargetData([...dataSource.filter((item) => currKeys.includes(item.key))]);\n      }\n      onChange && onChange(currKeys, 'right', leftCheckedKeys);\n    };\n\n    useEffect(() => {\n      if ('value' in props) {\n        const rightKeys = props.value as string[];\n        const rightData: TransferItem[] = dataSource.filter((item) => rightKeys.includes(item.key));\n        const leftData: TransferItem[] = dataSource.filter((item) => !rightKeys.includes(item.key));\n        setSourceData(leftData);\n        setTargetData(rightData);\n        setLeftCheckedKeys([]);\n        setRightCheckedKeys([]);\n      }\n    }, [props, dataSource]);\n\n    return (\n      <div {...otherProps} className={cls} ref={ref}>\n        <TransferPanel\n          title={titles && titles[0]}\n          placeholder={(placeholders && placeholders[0]) || 'search'}\n          showSearch={showSearch}\n          dataSource={sourceData}\n          checkedKeys={leftCheckedKeys}\n          disabled={disabled}\n          onChange={(keys: string[]) => setLeftCheckedKeys(keys)}\n          renderItem={renderItem}\n          filterOption={filterOption}\n        />\n        <div className={`${prefixCls}__buttons`}>\n          <Button\n            btnType=\"primary\"\n            size=\"sm\"\n            onClick={addToRight}\n            disabled={leftCheckedKeys.length === 0}>\n            <ArrowDown size={12} className={`${prefixCls}__left-arrow`} />\n            {buttonTexts && buttonTexts[0] !== undefined && <span>{buttonTexts[0]}</span>}\n          </Button>\n          <Button\n            btnType=\"primary\"\n            size=\"sm\"\n            onClick={addToLeft}\n            disabled={rightCheckedKeys.length === 0}>\n            {buttonTexts && buttonTexts[1] !== undefined && <span>{buttonTexts[1]}</span>}\n            <ArrowDown size={12} className={`${prefixCls}__right-arrow`} />\n          </Button>\n        </div>\n        <TransferPanel\n          title={titles && titles[1]}\n          placeholder={(placeholders && placeholders[1]) || 'search'}\n          showSearch={showSearch}\n          dataSource={targetData}\n          checkedKeys={rightCheckedKeys}\n          disabled={disabled}\n          onChange={(keys: string[]) => setRightCheckedKeys(keys)}\n          renderItem={renderItem}\n          filterOption={filterOption}\n        />\n      </div>\n    );\n  }\n);\n\nTransfer.displayName = 'Transfer';\n\nexport default Transfer;\n"],"mappings":"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"}

package/lib/transfer/types.d.ts

@@ -0,0 +1,25 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { ReactNode } from "react";
+
+//#region src/transfer/types.d.ts
+type TransferItem = {
+  key: string;
+  label: string;
+  disabled: boolean;
+};
+interface TransferProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'onChange'> {
+  dataSource?: TransferItem[];
+  value?: string[];
+  defaultValue?: string[];
+  disabled?: boolean;
+  showSearch?: boolean;
+  titles?: [ReactNode, ReactNode];
+  placeholders?: [string, string];
+  buttonTexts?: [ReactNode, ReactNode];
+  onChange?: (targetKeys: string[], direction: string, moveKeys: string[]) => void;
+  renderItem?: (item: TransferItem) => ReactNode;
+  filterOption?: (input: string, item: TransferItem) => boolean;
+}
+//#endregion
+export { TransferProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/transition/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/transition/index.tsx
+var transition_default = require("./transition.js").default;
+//#endregion
+exports.default = transition_default;
+
+//# sourceMappingURL=index.js.map

package/lib/transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Transition"],"sources":["../../src/transition/index.tsx"],"sourcesContent":["import Transition from './transition';\n\nexport type { AnimationName, TransitionProps } from './transition';\nexport default Transition;\n"],"mappings":";AAGA,IAAA,gDAAeA"}

package/lib/transition/style/_index.scss

@@ -0,0 +1,20 @@
+@use "./mixin" as *;
+
+// Only scale in one direction
+@include zoom-animation('center-top', scaleY(0), scaleY(1), center bottom);
+@include zoom-animation('center-left', scaleX(0), scaleX(1), right center);
+@include zoom-animation('center-right', scaleX(0), scaleX(1), left center);
+@include zoom-animation('center-bottom', scaleY(0), scaleY(1), center top);
+
+// Scale both horizontal and vertical direction
+@include zoom-animation('top-start', scale(0, 0), scale(1, 1), left bottom);
+@include zoom-animation('top', scale(0, 0), scale(1, 1), center bottom);
+@include zoom-animation('top-end', scale(0, 0), scale(1, 1), right bottom);
+@include zoom-animation('bottom-start', scale(0, 0), scale(1, 1), left top);
+@include zoom-animation('bottom', scale(0, 0), scale(1, 1), center top);
+@include zoom-animation('bottom-end', scale(0, 0), scale(1, 1), right top);
+@include zoom-animation('left', scale(0, 0), scale(1, 1), right center);
+@include zoom-animation('right', scale(0, 0), scale(1, 1), left center);
+
+@include slide-animation('down', translateY(-10px), translateY(0));
+@include slide-animation('up', translateY(10px), translateY(0));

package/lib/transition/style/_mixin.scss

@@ -0,0 +1,58 @@
+@use "../../style/variables" as *;
+
+@mixin zoom-animation(
+  $direction: 'top',
+  $scaleStart: scaleY(0),
+  $scaleEnd: scaleY(1),
+  $origin: center top,
+) {
+  .#{$prefix}-zoom-#{$direction} {
+    &-enter {
+      opacity: 0;
+      transform: $scaleStart;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transform: $scaleEnd;
+      transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+      transform-origin: $origin
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: $scaleStart;
+      transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+      transform-origin: $origin;
+    }
+  }
+}
+
+@mixin slide-animation($direction, $moveStart, $moveEnd) {
+  .#{$prefix}-slide-#{$direction} {
+    &-enter {
+      opacity: 0;
+      transform: $moveStart;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transform: $moveEnd;
+      transition: transform 300ms, opacity 300ms;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: $moveStart;
+      transition: transform 300ms, opacity 300ms;
+    }
+  }
+}

package/lib/transition/style/index.css

@@ -0,0 +1,275 @@
+.ty-zoom-center-top-enter {
+  opacity: 0;
+  transform: scaleY(0);
+}
+.ty-zoom-center-top-enter-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center bottom;
+}
+.ty-zoom-center-top-exit {
+  opacity: 1;
+}
+.ty-zoom-center-top-exit-active {
+  opacity: 0;
+  transform: scaleY(0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center bottom;
+}
+
+.ty-zoom-center-left-enter {
+  opacity: 0;
+  transform: scaleX(0);
+}
+.ty-zoom-center-left-enter-active {
+  opacity: 1;
+  transform: scaleX(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right center;
+}
+.ty-zoom-center-left-exit {
+  opacity: 1;
+}
+.ty-zoom-center-left-exit-active {
+  opacity: 0;
+  transform: scaleX(0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right center;
+}
+
+.ty-zoom-center-right-enter {
+  opacity: 0;
+  transform: scaleX(0);
+}
+.ty-zoom-center-right-enter-active {
+  opacity: 1;
+  transform: scaleX(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left center;
+}
+.ty-zoom-center-right-exit {
+  opacity: 1;
+}
+.ty-zoom-center-right-exit-active {
+  opacity: 0;
+  transform: scaleX(0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left center;
+}
+
+.ty-zoom-center-bottom-enter {
+  opacity: 0;
+  transform: scaleY(0);
+}
+.ty-zoom-center-bottom-enter-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center top;
+}
+.ty-zoom-center-bottom-exit {
+  opacity: 1;
+}
+.ty-zoom-center-bottom-exit-active {
+  opacity: 0;
+  transform: scaleY(0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center top;
+}
+
+.ty-zoom-top-start-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-top-start-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left bottom;
+}
+.ty-zoom-top-start-exit {
+  opacity: 1;
+}
+.ty-zoom-top-start-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left bottom;
+}
+
+.ty-zoom-top-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-top-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center bottom;
+}
+.ty-zoom-top-exit {
+  opacity: 1;
+}
+.ty-zoom-top-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center bottom;
+}
+
+.ty-zoom-top-end-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-top-end-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right bottom;
+}
+.ty-zoom-top-end-exit {
+  opacity: 1;
+}
+.ty-zoom-top-end-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right bottom;
+}
+
+.ty-zoom-bottom-start-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-bottom-start-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left top;
+}
+.ty-zoom-bottom-start-exit {
+  opacity: 1;
+}
+.ty-zoom-bottom-start-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left top;
+}
+
+.ty-zoom-bottom-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-bottom-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center top;
+}
+.ty-zoom-bottom-exit {
+  opacity: 1;
+}
+.ty-zoom-bottom-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center top;
+}
+
+.ty-zoom-bottom-end-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-bottom-end-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right top;
+}
+.ty-zoom-bottom-end-exit {
+  opacity: 1;
+}
+.ty-zoom-bottom-end-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right top;
+}
+
+.ty-zoom-left-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-left-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right center;
+}
+.ty-zoom-left-exit {
+  opacity: 1;
+}
+.ty-zoom-left-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: right center;
+}
+
+.ty-zoom-right-enter {
+  opacity: 0;
+  transform: scale(0, 0);
+}
+.ty-zoom-right-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left center;
+}
+.ty-zoom-right-exit {
+  opacity: 1;
+}
+.ty-zoom-right-exit-active {
+  opacity: 0;
+  transform: scale(0, 0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: left center;
+}
+
+.ty-slide-down-enter {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.ty-slide-down-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 300ms, opacity 300ms;
+}
+.ty-slide-down-exit {
+  opacity: 1;
+}
+.ty-slide-down-exit-active {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: transform 300ms, opacity 300ms;
+}
+
+.ty-slide-up-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.ty-slide-up-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 300ms, opacity 300ms;
+}
+.ty-slide-up-exit {
+  opacity: 1;
+}
+.ty-slide-up-exit-active {
+  opacity: 0;
+  transform: translateY(10px);
+  transition: transform 300ms, opacity 300ms;
+}

package/lib/transition/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/transition/style/index.js

@@ -0,0 +1 @@
+require("./index.css");