ezr-antd 1.0.0

package/lib/tour/panelRender.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { TourStepProps } from './interface';
+interface TourPanelProps {
+    stepProps: Omit<TourStepProps, 'closable'> & {
+        closable?: Exclude<TourStepProps['closable'], boolean>;
+    };
+    current: number;
+    type: TourStepProps['type'];
+    indicatorsRender?: TourStepProps['indicatorsRender'];
+}
+declare const TourPanel: React.FC<TourPanelProps>;
+export default TourPanel;

package/lib/tour/panelRender.js

@@ -0,0 +1,117 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button = _interopRequireDefault(require("../button"));
+var _locale = require("../locale");
+var _en_US = _interopRequireDefault(require("../locale/en_US"));
+function isValidNode(node) {
+  return node !== undefined && node !== null;
+}
+// Due to the independent design of Panel, it will be too coupled to put in rc-tour,
+// so a set of Panel logic is implemented separately in antd.
+const TourPanel = props => {
+  var _a, _b;
+  const {
+    stepProps,
+    current,
+    type,
+    indicatorsRender
+  } = props;
+  const {
+    prefixCls,
+    total = 1,
+    title,
+    onClose,
+    onPrev,
+    onNext,
+    onFinish,
+    cover,
+    description,
+    nextButtonProps,
+    prevButtonProps,
+    type: stepType,
+    closable
+  } = stepProps;
+  const mergedType = stepType !== null && stepType !== void 0 ? stepType : type;
+  const mergedCloseIcon = /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: onClose,
+    className: `${prefixCls}-close`
+  }, (closable === null || closable === void 0 ? void 0 : closable.closeIcon) || /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, {
+    className: `${prefixCls}-close-icon`
+  }));
+  const isLastStep = current === total - 1;
+  const prevBtnClick = () => {
+    var _a;
+    onPrev === null || onPrev === void 0 ? void 0 : onPrev();
+    (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(prevButtonProps);
+  };
+  const nextBtnClick = () => {
+    var _a;
+    if (isLastStep) {
+      onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+    } else {
+      onNext === null || onNext === void 0 ? void 0 : onNext();
+    }
+    (_a = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nextButtonProps);
+  };
+  const headerNode = isValidNode(title) ? (/*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-header`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-title`
+  }, title))) : null;
+  const descriptionNode = isValidNode(description) ? (/*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-description`
+  }, description)) : null;
+  const coverNode = isValidNode(cover) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-cover`
+  }, cover) : null;
+  let mergedIndicatorNode;
+  if (indicatorsRender) {
+    mergedIndicatorNode = indicatorsRender(current, total);
+  } else {
+    mergedIndicatorNode = (0, _toConsumableArray2.default)(Array.from({
+      length: total
+    }).keys()).map((stepItem, index) => (/*#__PURE__*/_react.default.createElement("span", {
+      key: stepItem,
+      className: (0, _classnames.default)(index === current && `${prefixCls}-indicator-active`, `${prefixCls}-indicator`)
+    })));
+  }
+  const mainBtnType = mergedType === 'primary' ? 'default' : 'primary';
+  const secondaryBtnProps = {
+    type: 'default',
+    ghost: mergedType === 'primary'
+  };
+  const [contextLocale] = (0, _locale.useLocale)('Tour', _en_US.default.Tour);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-content`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-inner`
+  }, closable && mergedCloseIcon, coverNode, headerNode, descriptionNode, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-footer`
+  }, total > 1 && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-indicators`
+  }, mergedIndicatorNode), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-buttons`
+  }, current !== 0 ? (/*#__PURE__*/_react.default.createElement(_button.default, Object.assign({}, secondaryBtnProps, prevButtonProps, {
+    onClick: prevBtnClick,
+    size: "small",
+    className: (0, _classnames.default)(`${prefixCls}-prev-btn`, prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.className)
+  }), (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.children) !== null && _a !== void 0 ? _a : contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.Previous)) : null, /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+    type: mainBtnType
+  }, nextButtonProps, {
+    onClick: nextBtnClick,
+    size: "small",
+    className: (0, _classnames.default)(`${prefixCls}-next-btn`, nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.className)
+  }), (_b = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.children) !== null && _b !== void 0 ? _b : isLastStep ? contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.Finish : contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.Next)))));
+};
+var _default = exports.default = TourPanel;

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

@@ -0,0 +1,28 @@
+import type { ArrowOffsetToken } from '../../style/placementArrow';
+import type { ArrowToken } from '../../style/roundedArrow';
+import type { GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken extends ArrowOffsetToken, ArrowToken {
+    /**
+     * @desc 弹层 z-index
+     * @descEN Tour popup z-index
+     */
+    zIndexPopup: number;
+    /**
+     * @desc 关闭按钮尺寸
+     * @descEN Close button size
+     */
+    closeBtnSize: number;
+    /**
+     * @desc Primary 模式上一步按钮背景色
+     * @descEN Background color of previous button in primary type
+     */
+    primaryPrevBtnBg: string;
+    /**
+     * @desc Primary 模式下一步按钮悬浮背景色
+     * @descEN Hover background color of next button in primary type
+     */
+    primaryNextBtnHoverBg: string;
+}
+export declare const prepareComponentToken: GetDefaultToken<'Tour'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

package/lib/tour/style/index.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareComponentToken = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _tinycolor = require("@ctrl/tinycolor");
+var _style = require("../../style");
+var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow"));
+var _roundedArrow = require("../../style/roundedArrow");
+var _internal = require("../../theme/internal");
+// =============================== Base ===============================
+const genBaseStyle = token => {
+  const {
+    componentCls,
+    padding,
+    paddingXS,
+    borderRadius,
+    borderRadiusXS,
+    colorPrimary,
+    colorFill,
+    indicatorHeight,
+    indicatorWidth,
+    boxShadowTertiary,
+    zIndexPopup,
+    colorBgElevated,
+    fontWeightStrong,
+    marginXS,
+    colorTextLightSolid,
+    tourBorderRadius,
+    colorWhite,
+    primaryNextBtnHoverBg,
+    closeBtnSize,
+    motionDurationSlow,
+    antCls,
+    primaryPrevBtnBg
+  } = token;
+  return [{
+    [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
+      position: 'absolute',
+      zIndex: zIndexPopup,
+      maxWidth: 'fit-content',
+      visibility: 'visible',
+      width: 520,
+      '--antd-arrow-background-color': colorBgElevated,
+      '&-pure': {
+        maxWidth: '100%',
+        position: 'relative'
+      },
+      [`&${componentCls}-hidden`]: {
+        display: 'none'
+      },
+      // ============================= panel content ============================
+      [`${componentCls}-content`]: {
+        position: 'relative'
+      },
+      [`${componentCls}-inner`]: {
+        textAlign: 'start',
+        textDecoration: 'none',
+        borderRadius: tourBorderRadius,
+        boxShadow: boxShadowTertiary,
+        position: 'relative',
+        backgroundColor: colorBgElevated,
+        border: 'none',
+        backgroundClip: 'padding-box',
+        [`${componentCls}-close`]: Object.assign({
+          position: 'absolute',
+          top: padding,
+          insetInlineEnd: padding,
+          color: token.colorIcon,
+          background: 'none',
+          border: 'none',
+          width: closeBtnSize,
+          height: closeBtnSize,
+          borderRadius: token.borderRadiusSM,
+          transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          '&:hover': {
+            color: token.colorIconHover,
+            backgroundColor: token.colorBgTextHover
+          },
+          '&:active': {
+            backgroundColor: token.colorBgTextActive
+          }
+        }, (0, _style.genFocusStyle)(token)),
+        [`${componentCls}-cover`]: {
+          textAlign: 'center',
+          padding: `${(0, _cssinjs.unit)(token.calc(padding).add(closeBtnSize).add(paddingXS).equal())} ${(0, _cssinjs.unit)(padding)} 0`,
+          img: {
+            width: '100%'
+          }
+        },
+        [`${componentCls}-header`]: {
+          padding: `${(0, _cssinjs.unit)(padding)} ${(0, _cssinjs.unit)(padding)} ${(0, _cssinjs.unit)(paddingXS)}`,
+          width: `calc(100% - ${(0, _cssinjs.unit)(closeBtnSize)})`,
+          wordBreak: 'break-word',
+          [`${componentCls}-title`]: {
+            fontWeight: fontWeightStrong
+          }
+        },
+        [`${componentCls}-description`]: {
+          padding: `0 ${(0, _cssinjs.unit)(padding)}`,
+          wordWrap: 'break-word'
+        },
+        [`${componentCls}-footer`]: {
+          padding: `${(0, _cssinjs.unit)(paddingXS)} ${(0, _cssinjs.unit)(padding)} ${(0, _cssinjs.unit)(padding)}`,
+          textAlign: 'end',
+          borderRadius: `0 0 ${(0, _cssinjs.unit)(borderRadiusXS)} ${(0, _cssinjs.unit)(borderRadiusXS)}`,
+          display: 'flex',
+          [`${componentCls}-indicators`]: {
+            display: 'inline-block',
+            [`${componentCls}-indicator`]: {
+              width: indicatorWidth,
+              height: indicatorHeight,
+              display: 'inline-block',
+              borderRadius: '50%',
+              background: colorFill,
+              '&:not(:last-child)': {
+                marginInlineEnd: indicatorHeight
+              },
+              '&-active': {
+                background: colorPrimary
+              }
+            }
+          },
+          [`${componentCls}-buttons`]: {
+            marginInlineStart: 'auto',
+            [`${antCls}-btn`]: {
+              marginInlineStart: marginXS
+            }
+          }
+        }
+      },
+      // =============================  primary type  ===========================
+      // `$` for panel, `&$` for pure panel
+      [`${componentCls}-primary, &${componentCls}-primary`]: {
+        '--antd-arrow-background-color': colorPrimary,
+        [`${componentCls}-inner`]: {
+          color: colorTextLightSolid,
+          textAlign: 'start',
+          textDecoration: 'none',
+          backgroundColor: colorPrimary,
+          borderRadius,
+          boxShadow: boxShadowTertiary,
+          [`${componentCls}-close`]: {
+            color: colorTextLightSolid
+          },
+          [`${componentCls}-indicators`]: {
+            [`${componentCls}-indicator`]: {
+              background: primaryPrevBtnBg,
+              '&-active': {
+                background: colorTextLightSolid
+              }
+            }
+          },
+          [`${componentCls}-prev-btn`]: {
+            color: colorTextLightSolid,
+            borderColor: primaryPrevBtnBg,
+            backgroundColor: colorPrimary,
+            '&:hover': {
+              backgroundColor: primaryPrevBtnBg,
+              borderColor: 'transparent'
+            }
+          },
+          [`${componentCls}-next-btn`]: {
+            color: colorPrimary,
+            borderColor: 'transparent',
+            background: colorWhite,
+            '&:hover': {
+              background: primaryNextBtnHoverBg
+            }
+          }
+        }
+      }
+    }),
+    // ============================= mask ===========================
+    [`${componentCls}-mask`]: {
+      [`${componentCls}-placeholder-animated`]: {
+        transition: `all ${motionDurationSlow}`
+      }
+    },
+    // =========== Limit left and right placement radius ==============
+    [['&-placement-left', '&-placement-leftTop', '&-placement-leftBottom', '&-placement-right', '&-placement-rightTop', '&-placement-rightBottom'].join(',')]: {
+      [`${componentCls}-inner`]: {
+        borderRadius: token.min(tourBorderRadius, _placementArrow.MAX_VERTICAL_CONTENT_RADIUS)
+      }
+    }
+  },
+  // ============================= Arrow ===========================
+  (0, _placementArrow.default)(token, 'var(--antd-arrow-background-color)')];
+};
+// ============================== Export ==============================
+const prepareComponentToken = token => Object.assign(Object.assign({
+  zIndexPopup: token.zIndexPopupBase + 70,
+  closeBtnSize: token.fontSize * token.lineHeight,
+  primaryPrevBtnBg: new _tinycolor.TinyColor(token.colorTextLightSolid).setAlpha(0.15).toRgbString(),
+  primaryNextBtnHoverBg: new _tinycolor.TinyColor(token.colorBgTextHover).onBackground(token.colorWhite).toRgbString()
+}, (0, _placementArrow.getArrowOffsetToken)({
+  contentRadius: token.borderRadiusLG,
+  limitVerticalRadius: true
+})), (0, _roundedArrow.getArrowToken)(token));
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Tour', token => {
+  const {
+    borderRadiusLG
+  } = token;
+  const TourToken = (0, _internal.mergeToken)(token, {
+    indicatorWidth: 6,
+    indicatorHeight: 6,
+    tourBorderRadius: borderRadiusLG
+  });
+  return [genBaseStyle(TourToken)];
+}, prepareComponentToken);

package/lib/transfer/ListBody.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { KeyWiseTransferItem } from '.';
+import type { TransferKey } from './interface';
+import type { RenderedItem, TransferListProps } from './list';
+export declare const OmitProps: readonly ["handleFilter", "handleClear", "checkedKeys"];
+export type OmitProp = (typeof OmitProps)[number];
+type PartialTransferListProps<RecordType> = Omit<TransferListProps<RecordType>, OmitProp>;
+export interface TransferListBodyProps<RecordType> extends PartialTransferListProps<RecordType> {
+    filteredItems: RecordType[];
+    filteredRenderItems: RenderedItem<RecordType>[];
+    selectedKeys: TransferKey[];
+}
+export interface ListBodyRef<RecordType extends KeyWiseTransferItem> {
+    items?: RenderedItem<RecordType>[];
+}
+declare const _default: React.ForwardRefExoticComponent<TransferListBodyProps<KeyWiseTransferItem> & React.RefAttributes<ListBodyRef<KeyWiseTransferItem>>>;
+export default _default;

package/lib/transfer/ListBody.js

@@ -0,0 +1,112 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OmitProps = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _pagination = _interopRequireDefault(require("../pagination"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+const OmitProps = exports.OmitProps = ['handleFilter', 'handleClear', 'checkedKeys'];
+const parsePagination = pagination => {
+  const defaultPagination = {
+    simple: true,
+    showSizeChanger: false,
+    showLessItems: false
+  };
+  return Object.assign(Object.assign({}, defaultPagination), pagination);
+};
+const TransferListBody = (props, ref) => {
+  const {
+    prefixCls,
+    filteredRenderItems,
+    selectedKeys,
+    disabled: globalDisabled,
+    showRemove,
+    pagination,
+    onScroll,
+    onItemSelect,
+    onItemRemove
+  } = props;
+  const [current, setCurrent] = React.useState(1);
+  const mergedPagination = React.useMemo(() => {
+    if (!pagination) {
+      return null;
+    }
+    const convertPagination = typeof pagination === 'object' ? pagination : {};
+    return parsePagination(convertPagination);
+  }, [pagination]);
+  const [pageSize, setPageSize] = (0, _useMergedState.default)(10, {
+    value: mergedPagination === null || mergedPagination === void 0 ? void 0 : mergedPagination.pageSize
+  });
+  React.useEffect(() => {
+    if (mergedPagination) {
+      const maxPageCount = Math.ceil(filteredRenderItems.length / pageSize);
+      setCurrent(Math.min(current, maxPageCount));
+    }
+  }, [filteredRenderItems, mergedPagination, pageSize]);
+  const onInternalClick = (item, e) => {
+    onItemSelect(item.key, !selectedKeys.includes(item.key), e);
+  };
+  const onRemove = item => {
+    onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove([item.key]);
+  };
+  const onPageChange = cur => {
+    setCurrent(cur);
+  };
+  const onSizeChange = (cur, size) => {
+    setCurrent(cur);
+    setPageSize(size);
+  };
+  const memoizedItems = React.useMemo(() => {
+    const displayItems = mergedPagination ? filteredRenderItems.slice((current - 1) * pageSize, current * pageSize) : filteredRenderItems;
+    return displayItems;
+  }, [current, filteredRenderItems, mergedPagination, pageSize]);
+  React.useImperativeHandle(ref, () => ({
+    items: memoizedItems
+  }));
+  const paginationNode = mergedPagination ? (/*#__PURE__*/React.createElement(_pagination.default, {
+    size: "small",
+    disabled: globalDisabled,
+    simple: mergedPagination.simple,
+    pageSize: pageSize,
+    showLessItems: mergedPagination.showLessItems,
+    showSizeChanger: mergedPagination.showSizeChanger,
+    className: `${prefixCls}-pagination`,
+    total: filteredRenderItems.length,
+    current: current,
+    onChange: onPageChange,
+    onShowSizeChange: onSizeChange
+  })) : null;
+  const cls = (0, _classnames.default)(`${prefixCls}-content`, {
+    [`${prefixCls}-content-show-remove`]: showRemove
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
+    className: cls,
+    onScroll: onScroll
+  }, (memoizedItems || []).map(({
+    renderedEl,
+    renderedText,
+    item
+  }) => (/*#__PURE__*/React.createElement(_ListItem.default, {
+    key: item.key,
+    item: item,
+    renderedText: renderedText,
+    renderedEl: renderedEl,
+    prefixCls: prefixCls,
+    showRemove: showRemove,
+    onClick: onInternalClick,
+    onRemove: onRemove,
+    checked: selectedKeys.includes(item.key),
+    disabled: globalDisabled || item.disabled
+  })))), paginationNode);
+};
+if (process.env.NODE_ENV !== 'production') {
+  TransferListBody.displayName = 'TransferListBody';
+}
+var _default = exports.default = /*#__PURE__*/React.forwardRef(TransferListBody);

package/lib/transfer/ListItem.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { KeyWiseTransferItem } from '.';
+type ListItemProps<RecordType> = {
+    renderedText?: string | number;
+    renderedEl: React.ReactNode;
+    disabled?: boolean;
+    checked?: boolean;
+    prefixCls: string;
+    onClick: (item: RecordType, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    onRemove?: (item: RecordType) => void;
+    item: RecordType;
+    showRemove?: boolean;
+};
+declare const _default: React.MemoExoticComponent<(<RecordType extends KeyWiseTransferItem>(props: ListItemProps<RecordType>) => React.JSX.Element)>;
+export default _default;

package/lib/transfer/ListItem.js

@@ -0,0 +1,61 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _DeleteOutlined = _interopRequireDefault(require("@ant-design/icons/DeleteOutlined"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _checkbox = _interopRequireDefault(require("../checkbox"));
+var _locale = require("../locale");
+var _en_US = _interopRequireDefault(require("../locale/en_US"));
+const ListItem = props => {
+  const {
+    renderedText,
+    renderedEl,
+    item,
+    checked,
+    disabled,
+    prefixCls,
+    onClick,
+    onRemove,
+    showRemove
+  } = props;
+  const className = (0, _classnames.default)(`${prefixCls}-content-item`, {
+    [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
+    [`${prefixCls}-content-item-checked`]: checked
+  });
+  let title;
+  if (typeof renderedText === 'string' || typeof renderedText === 'number') {
+    title = String(renderedText);
+  }
+  const [contextLocale] = (0, _locale.useLocale)('Transfer', _en_US.default.Transfer);
+  const liProps = {
+    className,
+    title
+  };
+  const labelNode = /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-content-item-text`
+  }, renderedEl);
+  if (showRemove) {
+    return /*#__PURE__*/React.createElement("li", Object.assign({}, liProps), labelNode, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      disabled: disabled || item.disabled,
+      className: `${prefixCls}-content-item-remove`,
+      "aria-label": contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.remove,
+      onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item)
+    }, /*#__PURE__*/React.createElement(_DeleteOutlined.default, null)));
+  }
+  // Default click to select
+  liProps.onClick = disabled || item.disabled ? undefined : event => onClick(item, event);
+  return /*#__PURE__*/React.createElement("li", Object.assign({}, liProps), /*#__PURE__*/React.createElement(_checkbox.default, {
+    className: `${prefixCls}-checkbox`,
+    checked: checked,
+    disabled: disabled || item.disabled
+  }), labelNode);
+};
+var _default = exports.default = /*#__PURE__*/React.memo(ListItem);

package/lib/transfer/hooks/useData.d.ts

@@ -0,0 +1,5 @@
+import type { TransferProps } from '..';
+import type { AnyObject } from '../../_util/type';
+import type { TransferKey } from '../interface';
+declare const useData: <RecordType extends AnyObject>(dataSource?: RecordType[], rowKey?: TransferProps<RecordType>["rowKey"], targetKeys?: TransferKey[]) => RecordType[][];
+export default useData;

package/lib/transfer/hooks/useData.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _transKeys = require("../../_util/transKeys");
+const useData = (dataSource, rowKey, targetKeys) => {
+  const mergedDataSource = React.useMemo(() => (dataSource || []).map(record => {
+    if (rowKey) {
+      return Object.assign(Object.assign({}, record), {
+        key: rowKey(record)
+      });
+    }
+    return record;
+  }), [dataSource, rowKey]);
+  const [leftDataSource, rightDataSource] = React.useMemo(() => {
+    const leftData = [];
+    const rightData = new Array((targetKeys || []).length);
+    const targetKeysMap = (0, _transKeys.groupKeysMap)(targetKeys || []);
+    mergedDataSource.forEach(record => {
+      // rightData should be ordered by targetKeys
+      // leftData should be ordered by dataSource
+      if (targetKeysMap.has(record.key)) {
+        rightData[targetKeysMap.get(record.key)] = record;
+      } else {
+        leftData.push(record);
+      }
+    });
+    return [leftData, rightData];
+  }, [mergedDataSource, targetKeys, rowKey]);
+  return [mergedDataSource, leftDataSource, rightDataSource];
+};
+var _default = exports.default = useData;

package/lib/transfer/hooks/useSelection.d.ts

@@ -0,0 +1,9 @@
+import type { TransferKey } from '../interface';
+export default function useSelection<T extends {
+    key: TransferKey;
+}>(leftDataSource: T[], rightDataSource: T[], selectedKeys?: TransferKey[]): [
+    sourceSelectedKeys: TransferKey[],
+    targetSelectedKeys: TransferKey[],
+    setSourceSelectedKeys: (srcKeys: TransferKey[]) => void,
+    setTargetSelectedKeys: (srcKeys: TransferKey[]) => void
+];