@ucloud-fe/react-components 1.5.1 → 1.5.4

package/lib/components/ActionList/ActionList.d.ts

@@ -22,6 +22,8 @@ export interface DefinedActionListProps {
     actionList: ActionInfo[];
     /** 暴露的操作数量 */
     exposeCount?: number;
+    /** 是否自动按照宽度调整展示数量 */
+    autoAdjustment?: boolean;
     /** 控件尺寸 */
     size?: Size;
     /** 操作数量等于 exposeCount+1 时是否直接显示按钮而不是显示下拉菜单 */
@@ -34,5 +36,5 @@ export interface DefinedActionListProps {
     popoverProps?: any;
 }
 export declare type ActionListProps = DefinedActionListProps & Override<HTMLAttributes<HTMLDivElement>, DefinedActionListProps>;
-declare const _default: React.MemoExoticComponent<({ actionList, exposeCount, size, smart, buttonStyleType, popoverProps, dropdownButton, className, ...rest }: ActionListProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ autoAdjustment: _autoAdjustment, ...rest }: ActionListProps) => JSX.Element>;
 export default _default;

package/lib/components/ActionList/ActionList.js

@@ -33,18 +33,24 @@ var _Popover = _interopRequireDefault(require("../../components/Popover"));
 
 var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
 
-var _Combine = _interopRequireDefault(require("../../components/Combine"));
-
 var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
 
 var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
 
+var _useOverflow3 = _interopRequireDefault(require("../../hooks/useOverflow"));
+
 var _style = require("./style");
 
+var _useConfig2 = _interopRequireDefault(require("../../hooks/useConfig"));
+
+var _config = _interopRequireDefault(require("../../config"));
+
 var _excluded = ["onClick", "disabled", "handleHide"],
     _excluded2 = ["label", "tooltip"],
     _excluded3 = ["label", "disabled", "onClick"],
-    _excluded4 = ["actionList", "exposeCount", "size", "smart", "buttonStyleType", "popoverProps", "dropdownButton", "className"];
+    _excluded4 = ["actionList", "exposeCount", "size", "smart", "buttonStyleType", "popoverProps", "dropdownButton", "className"],
+    _excluded5 = ["actionList", "exposeCount", "smart"],
+    _excluded6 = ["autoAdjustment"];
 
 var _this = void 0;
 
@@ -190,7 +196,10 @@ var ActionMenu = function ActionMenu(_ref3) {
   }));
 }.bind(void 0);
 
-var ActionList = function ActionList(_ref4) {
+var _uid = 0;
+var ID_KEY = 'data-urc-action_list-id';
+
+var PureActionList = function PureActionList(_ref4) {
   (0, _newArrowCheck2.default)(this, _this);
   var _ref4$actionList = _ref4.actionList,
       actionList = _ref4$actionList === void 0 ? [] : _ref4$actionList,
@@ -229,7 +238,7 @@ var ActionList = function ActionList(_ref4) {
     size: size,
     buttonStyleType: buttonStyleType
   };
-  return /*#__PURE__*/_react.default.createElement(_Combine.default, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_style.SWrap, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(_style.prefixCls, className),
     sharedProps: {
       size: size
@@ -245,6 +254,70 @@ var ActionList = function ActionList(_ref4) {
   })) : null);
 }.bind(void 0);
 
+var AutoAdjustmentActionList = function AutoAdjustmentActionList(_ref5) {
+  var _this6 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+
+  var _ref5$actionList = _ref5.actionList,
+      actionList = _ref5$actionList === void 0 ? [] : _ref5$actionList,
+      _ref5$exposeCount = _ref5.exposeCount,
+      _exposeCount = _ref5$exposeCount === void 0 ? 3 : _ref5$exposeCount,
+      smart = _ref5.smart,
+      rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+
+  var _useState3 = (0, _react.useState)(function () {
+    (0, _newArrowCheck2.default)(this, _this6);
+    return _uid++;
+  }.bind(this)),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+      uid = _useState4[0];
+
+  var l = actionList.length;
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this6);
+    containerRef.current = document.querySelector("[".concat(ID_KEY, "=\"").concat(uid, "\"]"));
+  }.bind(this), [uid]);
+  var maxCount = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this6);
+    var maxCount = Math.min(l, Math.max(_exposeCount, 0));
+    if (maxCount === l - 1 && smart) maxCount = l;
+    return maxCount;
+  }.bind(this), [_exposeCount, l, smart]);
+
+  var _useOverflow = (0, _useOverflow3.default)({
+    containerRef: containerRef,
+    defaultCount: maxCount,
+    maxCount: maxCount
+  }),
+      _useOverflow2 = (0, _slicedToArray2.default)(_useOverflow, 1),
+      exposeCount = _useOverflow2[0];
+
+  return /*#__PURE__*/_react.default.createElement(PureActionList, (0, _extends2.default)({}, rest, {
+    actionList: actionList,
+    exposeCount: exposeCount,
+    smart: false
+  }, (0, _defineProperty2.default)({}, ID_KEY, uid)));
+}.bind(void 0);
+
+var ActionList = function ActionList(_ref7) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var _autoAdjustment = _ref7.autoAdjustment,
+      rest = (0, _objectWithoutProperties2.default)(_ref7, _excluded6);
+
+  var _useConfig = (0, _useConfig2.default)(),
+      actionListAutoAdjustment = _useConfig.actionListAutoAdjustment;
+
+  var autoAdjustment = _autoAdjustment === undefined ? actionListAutoAdjustment === undefined ? _config.default.actionListAutoAdjustment : actionListAutoAdjustment : _autoAdjustment;
+
+  if (autoAdjustment) {
+    return /*#__PURE__*/_react.default.createElement(AutoAdjustmentActionList, rest);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(PureActionList, rest);
+  }
+}.bind(void 0);
+
 ActionList.propTypes = {
   actionList: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.node,
@@ -266,6 +339,7 @@ ActionList.propTypes = {
     disabled: _propTypes.default.bool
   })).isRequired,
   exposeCount: _propTypes.default.number,
+  autoAdjustment: _propTypes.default.bool,
   smart: _propTypes.default.bool,
   popoverProps: _propTypes.default.any
 };

package/lib/components/ActionList/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ActionListProps } from './ActionList';
 declare const ExportActionList: import("react").NamedExoticComponent<import("./ActionList").DefinedActionListProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("./ActionList").DefinedActionListProps>> & {
-    readonly type: ({ actionList, exposeCount, size, smart, buttonStyleType, popoverProps, dropdownButton, className, ...rest }: ActionListProps) => JSX.Element;
+    readonly type: ({ autoAdjustment: _autoAdjustment, ...rest }: ActionListProps) => JSX.Element;
 } & {
     Sizes: ["sm", "md", "lg"];
     ButtonStyleTypes: ["primary", "border", "border-gray"];

package/lib/components/ActionList/style/index.d.ts

@@ -1 +1,3 @@
+/// <reference types="react" />
 export declare const prefixCls: string;
+export declare const SWrap: import("@emotion/styled-base").StyledComponent<import("../../Combine/Combine").DefinedCombineProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("../../Combine/Combine").DefinedCombineProps>, Pick<import("../../Combine/Combine").DefinedCombineProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("../../Combine/Combine").DefinedCombineProps>, "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | keyof import("../../Combine/Combine").DefinedCombineProps>, object>;

package/lib/components/ActionList/style/index.js

@@ -5,10 +5,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prefixCls = void 0;
+exports.SWrap = exports.prefixCls = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
+var _Combine = _interopRequireDefault(require("../../../components/Combine"));
 
 var _config = _interopRequireDefault(require("../../../config"));
 
+var _this = void 0;
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
 var _prefixCls = _config.default.prefixCls;
 var prefixCls = _prefixCls + '-actionlist';
-exports.prefixCls = prefixCls;
+exports.prefixCls = prefixCls;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1rn6kt6-SWrap",
+  styles: "white-space:nowrap;;label:SWrap;"
+} : {
+  name: "1rn6kt6-SWrap",
+  styles: "white-space:nowrap;;label:SWrap;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0FjdGlvbkxpc3Qvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVWMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQWN0aW9uTGlzdC9zdHlsZS9pbmRleC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgQ29tYmluZSBmcm9tICdzcmMvY29tcG9uZW50cy9Db21iaW5lJztcbmltcG9ydCBjb25maWcgZnJvbSAnc3JjL2NvbmZpZyc7XG5cbmNvbnN0IHsgcHJlZml4Q2xzOiBfcHJlZml4Q2xzIH0gPSBjb25maWc7XG5leHBvcnQgY29uc3QgcHJlZml4Q2xzID0gX3ByZWZpeENscyArICctYWN0aW9ubGlzdCc7XG5cbmV4cG9ydCBjb25zdCBTV3JhcCA9IHN0eWxlZChDb21iaW5lKSgoKSA9PiB7XG4gICAgcmV0dXJuIGNzc2BcbiAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICBgO1xufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var SWrap = ( /*#__PURE__*/0, _styledBase.default)(_Combine.default, {
+  target: "e17ez9160",
+  label: "SWrap"
+})(function () {
+  (0, _newArrowCheck2.default)(this, _this);
+  return _ref;
+}.bind(void 0), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0FjdGlvbkxpc3Qvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU3FCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0FjdGlvbkxpc3Qvc3R5bGUvaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IENvbWJpbmUgZnJvbSAnc3JjL2NvbXBvbmVudHMvQ29tYmluZSc7XG5pbXBvcnQgY29uZmlnIGZyb20gJ3NyYy9jb25maWcnO1xuXG5jb25zdCB7IHByZWZpeENsczogX3ByZWZpeENscyB9ID0gY29uZmlnO1xuZXhwb3J0IGNvbnN0IHByZWZpeENscyA9IF9wcmVmaXhDbHMgKyAnLWFjdGlvbmxpc3QnO1xuXG5leHBvcnQgY29uc3QgU1dyYXAgPSBzdHlsZWQoQ29tYmluZSkoKCkgPT4ge1xuICAgIHJldHVybiBjc3NgXG4gICAgICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gICAgYDtcbn0pO1xuIl19 */");
+exports.SWrap = SWrap;

package/lib/components/ConfigProvider/ConfigContext.d.ts

@@ -4,6 +4,6 @@ export declare const defaultConfig: {
     forwardPopupContainer: boolean;
     preventFormDefaultAction: boolean;
 };
-export declare type ConfigContextType = Pick<ConfigProviderProps, 'forwardPopupContainer' | 'popover' | 'preventFormDefaultAction' | 'iconDefaultPrefix'>;
+export declare type ConfigContextType = Pick<ConfigProviderProps, 'forwardPopupContainer' | 'popover' | 'preventFormDefaultAction' | 'iconDefaultPrefix' | 'actionListAutoAdjustment'>;
 declare const _default: import("react").Context<ConfigContextType>;
 export default _default;

package/lib/components/ConfigProvider/ConfigProvider.d.ts

@@ -33,6 +33,8 @@ export interface ConfigProviderProps {
     theme?: any;
     /** 提供时会使用 LocaleProvider 包裹 */
     locale?: AllLocaleMap;
+    /** 是否默认启用 ActionList 的 autoAdJustment 参数 */
+    actionListAutoAdjustment?: boolean;
 }
 declare const ConfigProvider: ({ children, theme, locale, ...rest }: ConfigProviderProps) => JSX.Element;
 export default ConfigProvider;

package/lib/components/ConfigProvider/ConfigProvider.js

@@ -68,7 +68,8 @@ ConfigProvider.propTypes = {
   }),
   preventFormDefaultAction: _propTypes.default.bool,
   iconDefaultPrefix: _propTypes.default.string,
-  theme: _propTypes.default.any
+  theme: _propTypes.default.any,
+  actionListAutoAdjustment: _propTypes.default.bool
 };
 var _default = ConfigProvider;
 exports.default = _default;

package/lib/components/ConfigProvider/index.d.ts

@@ -1,2 +1,4 @@
-import ConfigProvider from './ConfigProvider';
-export default ConfigProvider;
+declare const ExportConfigProvider: (({ children, theme, locale, ...rest }: import("./ConfigProvider").ConfigProviderProps) => JSX.Element) & {
+    setConfig: (_config: any) => void;
+};
+export default ExportConfigProvider;

package/lib/components/ConfigProvider/index.js

@@ -7,7 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _config = require("../../config");
+
+var _type = require("../../type");
+
 var _ConfigProvider = _interopRequireDefault(require("./ConfigProvider"));
 
-var _default = _ConfigProvider.default;
+var ExportConfigProvider = (0, _type.ExportComponent)(_ConfigProvider.default, {
+  setConfig: _config.setConfig
+});
+var _default = ExportConfigProvider;
 exports.default = _default;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -44,7 +44,11 @@ export declare type DatePickerProps = {
     status?: 'default' | 'error';
     /** placeholder */
     placeholder?: string;
-    /** 面板快捷内容 */
+    /**
+     * @deprecated 新版交互已移除相关展示
+     * @ignore
+     * 面板快捷内容
+     */
     shortcuts?: TShortcut[] | null;
     /** 自定义 popover，参考 popover */
     popoverProps?: any;

package/lib/components/Select/Option.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,9 +15,7 @@ var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/new
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _SelectContext = _interopRequireDefault(require("./SelectContext"));
+var _react = _interopRequireDefault(require("react"));
 
 var _style = require("./style");
 
@@ -28,34 +24,12 @@ var _excluded = ["value", "children"],
 
 var _this = void 0;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Option = function Option(_ref) {
-  var _this2 = this;
-
   (0, _newArrowCheck2.default)(this, _this);
   var value = _ref.value,
       children = _ref.children,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useContext = (0, _react.useContext)(_SelectContext.default),
-      handleSearch = _useContext.handleSearch,
-      searchValue = _useContext.searchValue;
-
-  var visible = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    return handleSearch(value, {
-      value: value,
-      children: children
-    });
-  }.bind(this), // change when searchValue change
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [children, handleSearch, value, searchValue]);
-  return /*#__PURE__*/_react.default.createElement(_style.OptionWrap, (0, _extends2.default)({
-    hidden: !visible
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(_style.OptionWrap, (0, _extends2.default)({}, rest, {
     itemKey: value
   }), children);
 }.bind(void 0);

package/lib/components/Select/Overflow.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Static = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,10 +21,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
-
 var _Tag = _interopRequireDefault(require("../../components/Tag"));
 
+var _useOverflow3 = _interopRequireDefault(require("../../hooks/useOverflow"));
+
 var _style = require("./style");
 
 var _excluded = ["items", "renderItem", "renderRest", "count"],
@@ -33,6 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _uid = 0;
+var ID_KEY = 'data-urc-select_overflow-id';
 
 var Static = function Static(_ref) {
   var _this = this;
@@ -74,69 +77,26 @@ var Overflow = function Overflow(_ref2) {
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
       uid = _useState2[0];
 
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      count = _useState4[0],
-      setCount = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(null),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      latestValidCount = _useState6[0],
-      setLatestValidCount = _useState6[1];
+  var l = items.length;
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    containerRef.current = document.querySelector("[".concat(ID_KEY, "=\"").concat(uid, "\"]"));
+  }.bind(this), [uid]);
 
-  var compute = (0, _react.useCallback)(function () {
-    var _this3 = this;
+  var _useOverflow = (0, _useOverflow3.default)({
+    containerRef: containerRef,
+    defaultCount: 1,
+    maxCount: l
+  }, [changeContent]),
+      _useOverflow2 = (0, _slicedToArray2.default)(_useOverflow, 2),
+      count = _useOverflow2[0],
+      measureCount = _useOverflow2[1];
 
-    (0, _newArrowCheck2.default)(this, _this2);
-    var containerDOM = document.querySelector("[data-urc-overflow-id=\"".concat(uid, "\"]"));
-    if (!containerDOM) return;
-
-    if (count === latestValidCount) {
-      onMeasure(count);
-      return;
-    }
-
-    if (containerDOM.offsetWidth >= containerDOM.scrollWidth) {
-      setLatestValidCount(count);
-      setCount(Math.min(items.length, count + 1));
-    } else if (containerDOM.offsetWidth < containerDOM.scrollWidth) {
-      setCount(function (count) {
-        (0, _newArrowCheck2.default)(this, _this3);
-        return Math.max(0, count - 1);
-      }.bind(this));
-    }
-  }.bind(this), [count, items.length, latestValidCount, onMeasure, uid]);
-  var computeRef = (0, _react.useRef)(compute);
   (0, _react.useEffect)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
-    computeRef.current = compute;
-  }.bind(this), [compute]);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    setLatestValidCount(null);
-  }.bind(this), [changeContent]);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    computeRef.current();
-  }.bind(this), [compute]);
-  (0, _react.useLayoutEffect)(function () {
-    var _this4 = this;
-
-    (0, _newArrowCheck2.default)(this, _this2);
-    var containerDOM = document.querySelector("[data-urc-overflow-id=\"".concat(uid, "\"]"));
-    var resizeObserver = new _resizeObserverPolyfill.default(function () {
-      (0, _newArrowCheck2.default)(this, _this4);
-      setLatestValidCount(null);
-    }.bind(this));
-    if (containerDOM) resizeObserver.observe(containerDOM);
-    return function () {
-      (0, _newArrowCheck2.default)(this, _this4);
-
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    }.bind(this);
-  }.bind(this), [uid]);
+    onMeasure(measureCount);
+  }.bind(this), [measureCount, onMeasure]);
   var renderItems = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
     return items.slice(0, count).map(renderItem);
@@ -145,8 +105,7 @@ var Overflow = function Overflow(_ref2) {
     (0, _newArrowCheck2.default)(this, _this2);
     return renderRest(items.slice(count));
   }.bind(this), [count, items, renderRest]);
-  return /*#__PURE__*/_react.default.createElement(_Tag.default.Group, (0, _extends2.default)({}, rest, {
-    "data-urc-overflow-id": uid,
+  return /*#__PURE__*/_react.default.createElement(_Tag.default.Group, (0, _extends2.default)({}, rest, (0, _defineProperty2.default)({}, ID_KEY, uid), {
     className: _style.overflowCls
   }), renderItems, restItems);
 };

package/lib/components/Select/style/index.d.ts

@@ -25,7 +25,7 @@ export declare const SSelector: import("@emotion/styled-base").StyledComponent<P
     styleType: string;
     size: string;
     type: string;
-}, "styleType" | "size" | "type">> & Partial<Pick<{
+}, "size" | "styleType" | "type">> & Partial<Pick<{
     styleType: string;
     size: string;
     type: string;
@@ -37,11 +37,11 @@ export declare const SSelector: import("@emotion/styled-base").StyledComponent<P
     styleType: string;
     size: string;
     type: string;
-}, "styleType" | "size" | "type">> & Partial<Pick<{
+}, "size" | "styleType" | "type">> & Partial<Pick<{
     styleType: string;
     size: string;
     type: string;
-}, never>>, "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "form" | "block" | "loading" | "styleType" | "size" | "checked" | "disabled" | "value" | "type" | "icon" | "shape" | "fakeDisabled" | "checkAble" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name">, object>;
+}, never>>, "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "form" | "size" | "block" | "loading" | "styleType" | "checked" | "disabled" | "value" | "type" | "icon" | "shape" | "fakeDisabled" | "checkAble" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name">, object>;
 export declare const SSelectorMultiple: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "block" | "customStyle" | "disabled" | "status"> & Required<Pick<import("../../../components/Input").InputProps, "size">> & {
     focused?: boolean | undefined;
     empty?: boolean | undefined;