@rc-component/select 1.2.0-alpha.1 → 1.2.0-alpha.3

package/es/BaseSelect/index.d.ts

@@ -3,7 +3,7 @@ import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
 import type { ComponentsConfig } from '../hooks/useComponents';
-export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
+export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear' | 'placeholder' | 'content' | 'item' | 'itemContent' | 'itemRemove';
 /**
  * ZombieJ:
  * We are currently refactoring the semantic structure of the component. Changelog:

package/es/BaseSelect/index.js

@@ -318,7 +318,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
     if (!disabled) {
-      triggerOpen(false);
+      triggerOpen(false, {
+        lazy: true
+      });
       onBlur?.(event);
     }
   };
@@ -331,7 +333,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     // We should give focus back to selector if clicked item is not focusable
     if (popupElement?.contains(target) && triggerOpen) {
       // Tell `open` not to close since it's safe in the popup
-      triggerOpen(true, true);
+      triggerOpen(true, {
+        ignoreNext: true
+      });
     }
     onMouseDown?.(event, ...restArgs);
   };

package/es/SelectInput/Content/MultipleContent.js

@@ -35,7 +35,9 @@ export default /*#__PURE__*/React.forwardRef(function MultipleContent({
     tagRender: tagRenderFromContext,
     maxTagPlaceholder: maxTagPlaceholderFromContext,
     maxTagTextLength,
-    maxTagCount
+    maxTagCount,
+    classNames,
+    styles
   } = useBaseProps();
   const selectionItemPrefixCls = `${prefixCls}-selection-item`;
 
@@ -65,11 +67,14 @@ export default /*#__PURE__*/React.forwardRef(function MultipleContent({
     title: getTitle(item),
     className: clsx(selectionItemPrefixCls, {
       [`${selectionItemPrefixCls}-disabled`]: itemDisabled
-    })
+    }, classNames?.item),
+    style: styles?.item
   }, /*#__PURE__*/React.createElement("span", {
-    className: `${selectionItemPrefixCls}-content`
+    className: clsx(`${selectionItemPrefixCls}-content`, classNames?.itemContent),
+    style: styles?.itemContent
   }, content), closable && /*#__PURE__*/React.createElement(TransBtn, {
-    className: `${selectionItemPrefixCls}-remove`,
+    className: clsx(`${selectionItemPrefixCls}-remove`, classNames?.itemRemove),
+    style: styles?.itemRemove,
     onMouseDown: onPreventMouseDown,
     onClick: onClose,
     customizeIcon: removeIcon
@@ -131,6 +136,8 @@ export default /*#__PURE__*/React.forwardRef(function MultipleContent({
   // ======================= Render =======================
   return /*#__PURE__*/React.createElement(Overflow, {
     prefixCls: `${prefixCls}-content`,
+    className: classNames?.content,
+    style: styles?.content,
     prefix: !displayValues.length && (!searchValue || !triggerOpen) ? /*#__PURE__*/React.createElement(Placeholder, null) : null,
     data: displayValues,
     renderItem: renderItem,

package/es/SelectInput/Content/Placeholder.js

@@ -1,11 +1,17 @@
 import * as React from 'react';
+import { clsx } from 'clsx';
 import { useSelectInputContext } from "../context";
+import useBaseProps from "../../hooks/useBaseProps";
 export default function Placeholder(props) {
   const {
     prefixCls,
     placeholder,
     displayValues
   } = useSelectInputContext();
+  const {
+    classNames,
+    styles
+  } = useBaseProps();
   const {
     show = true
   } = props;
@@ -13,9 +19,10 @@ export default function Placeholder(props) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-placeholder`,
+    className: clsx(`${prefixCls}-placeholder`, classNames?.placeholder),
     style: {
-      visibility: show ? 'visible' : 'hidden'
+      visibility: show ? 'visible' : 'hidden',
+      ...styles?.placeholder
     }
   }, placeholder);
 }

package/es/SelectInput/Content/SingleContent.js

@@ -21,7 +21,9 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
   const {
     triggerOpen,
     title: rootTitle,
-    showSearch
+    showSearch,
+    classNames,
+    styles
   } = useBaseProps();
   const selectContext = React.useContext(SelectContext);
   const [inputChanged, setInputChanged] = React.useState(false);
@@ -81,7 +83,8 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     }
   }, [combobox, activeValue]);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-content`
+    className: clsx(`${prefixCls}-content`, classNames?.content),
+    style: styles?.content
   }, displayValue ? /*#__PURE__*/React.createElement("div", optionProps, displayValue.label) : /*#__PURE__*/React.createElement(Placeholder, {
     show: !mergedSearchValue
   }), /*#__PURE__*/React.createElement(Input, _extends({

package/es/hooks/useOpen.d.ts

@@ -2,7 +2,10 @@
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
  * ignoreNext will skip next call in the macro task queue.
  */
-export type TriggerOpenType = (nextOpen?: boolean, ignoreNext?: boolean) => void;
+export type TriggerOpenType = (nextOpen?: boolean, config?: {
+    ignoreNext?: boolean;
+    lazy?: boolean;
+}) => void;
 /**
  * When `open` is controlled, follow the controlled value;
  * Otherwise use uncontrolled logic.

package/es/hooks/useOpen.js

@@ -48,27 +48,33 @@ export default function useOpen(propOpen, onOpen, postOpen) {
     }
     internalSetOpen(nextOpen);
   });
-  const toggleOpen = useEvent((nextOpen, ignoreNext = false) => {
+  const toggleOpen = useEvent((nextOpen, config = {}) => {
+    const {
+      ignoreNext = false,
+      lazy = false
+    } = config;
     taskIdRef.current += 1;
     const id = taskIdRef.current;
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
 
     // Since `mergedOpen` is post-processed, we need to check if the value really changed
-    if (nextOpenVal) {
-      triggerEvent(true);
+    if (nextOpenVal || !lazy) {
+      if (!taskLockRef.current) {
+        triggerEvent(nextOpenVal);
 
-      // Lock if needed
-      if (ignoreNext) {
-        taskLockRef.current = ignoreNext;
-        macroTask(() => {
-          taskLockRef.current = false;
-        }, 2);
+        // Lock if needed
+        if (ignoreNext) {
+          taskLockRef.current = ignoreNext;
+          macroTask(() => {
+            taskLockRef.current = false;
+          }, 2);
+        }
       }
       return;
     }
     macroTask(() => {
       if (id === taskIdRef.current && !taskLockRef.current) {
-        triggerEvent(false);
+        triggerEvent(nextOpenVal);
       }
     });
   });

package/lib/BaseSelect/index.d.ts

@@ -3,7 +3,7 @@ import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
 import type { ComponentsConfig } from '../hooks/useComponents';
-export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
+export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear' | 'placeholder' | 'content' | 'item' | 'itemContent' | 'itemRemove';
 /**
  * ZombieJ:
  * We are currently refactoring the semantic structure of the component. Changelog:

package/lib/BaseSelect/index.js

@@ -327,7 +327,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
     if (!disabled) {
-      triggerOpen(false);
+      triggerOpen(false, {
+        lazy: true
+      });
       onBlur?.(event);
     }
   };
@@ -340,7 +342,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     // We should give focus back to selector if clicked item is not focusable
     if (popupElement?.contains(target) && triggerOpen) {
       // Tell `open` not to close since it's safe in the popup
-      triggerOpen(true, true);
+      triggerOpen(true, {
+        ignoreNext: true
+      });
     }
     onMouseDown?.(event, ...restArgs);
   };

package/lib/SelectInput/Content/MultipleContent.js

@@ -44,7 +44,9 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Multiple
     tagRender: tagRenderFromContext,
     maxTagPlaceholder: maxTagPlaceholderFromContext,
     maxTagTextLength,
-    maxTagCount
+    maxTagCount,
+    classNames,
+    styles
   } = (0, _useBaseProps.default)();
   const selectionItemPrefixCls = `${prefixCls}-selection-item`;
 
@@ -74,11 +76,14 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Multiple
     title: (0, _commonUtil.getTitle)(item),
     className: (0, _clsx.clsx)(selectionItemPrefixCls, {
       [`${selectionItemPrefixCls}-disabled`]: itemDisabled
-    })
+    }, classNames?.item),
+    style: styles?.item
   }, /*#__PURE__*/React.createElement("span", {
-    className: `${selectionItemPrefixCls}-content`
+    className: (0, _clsx.clsx)(`${selectionItemPrefixCls}-content`, classNames?.itemContent),
+    style: styles?.itemContent
   }, content), closable && /*#__PURE__*/React.createElement(_TransBtn.default, {
-    className: `${selectionItemPrefixCls}-remove`,
+    className: (0, _clsx.clsx)(`${selectionItemPrefixCls}-remove`, classNames?.itemRemove),
+    style: styles?.itemRemove,
     onMouseDown: onPreventMouseDown,
     onClick: onClose,
     customizeIcon: removeIcon
@@ -140,6 +145,8 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Multiple
   // ======================= Render =======================
   return /*#__PURE__*/React.createElement(_rcOverflow.default, {
     prefixCls: `${prefixCls}-content`,
+    className: classNames?.content,
+    style: styles?.content,
     prefix: !displayValues.length && (!searchValue || !triggerOpen) ? /*#__PURE__*/React.createElement(_Placeholder.default, null) : null,
     data: displayValues,
     renderItem: renderItem,

package/lib/SelectInput/Content/Placeholder.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Placeholder;
 var React = _interopRequireWildcard(require("react"));
+var _clsx = require("clsx");
 var _context = require("../context");
+var _useBaseProps = _interopRequireDefault(require("../../hooks/useBaseProps"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function Placeholder(props) {
@@ -14,6 +17,10 @@ function Placeholder(props) {
     placeholder,
     displayValues
   } = (0, _context.useSelectInputContext)();
+  const {
+    classNames,
+    styles
+  } = (0, _useBaseProps.default)();
   const {
     show = true
   } = props;
@@ -21,9 +28,10 @@ function Placeholder(props) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-placeholder`,
+    className: (0, _clsx.clsx)(`${prefixCls}-placeholder`, classNames?.placeholder),
     style: {
-      visibility: show ? 'visible' : 'hidden'
+      visibility: show ? 'visible' : 'hidden',
+      ...styles?.placeholder
     }
   }, placeholder);
 }

package/lib/SelectInput/Content/SingleContent.js

@@ -30,7 +30,9 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
   const {
     triggerOpen,
     title: rootTitle,
-    showSearch
+    showSearch,
+    classNames,
+    styles
   } = (0, _useBaseProps.default)();
   const selectContext = React.useContext(_SelectContext.default);
   const [inputChanged, setInputChanged] = React.useState(false);
@@ -90,7 +92,8 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     }
   }, [combobox, activeValue]);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-content`
+    className: (0, _clsx.clsx)(`${prefixCls}-content`, classNames?.content),
+    style: styles?.content
   }, displayValue ? /*#__PURE__*/React.createElement("div", optionProps, displayValue.label) : /*#__PURE__*/React.createElement(_Placeholder.default, {
     show: !mergedSearchValue
   }), /*#__PURE__*/React.createElement(_Input.default, _extends({

package/lib/hooks/useOpen.d.ts

@@ -2,7 +2,10 @@
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
  * ignoreNext will skip next call in the macro task queue.
  */
-export type TriggerOpenType = (nextOpen?: boolean, ignoreNext?: boolean) => void;
+export type TriggerOpenType = (nextOpen?: boolean, config?: {
+    ignoreNext?: boolean;
+    lazy?: boolean;
+}) => void;
 /**
  * When `open` is controlled, follow the controlled value;
  * Otherwise use uncontrolled logic.

package/lib/hooks/useOpen.js

@@ -54,27 +54,33 @@ function useOpen(propOpen, onOpen, postOpen) {
     }
     internalSetOpen(nextOpen);
   });
-  const toggleOpen = (0, _util.useEvent)((nextOpen, ignoreNext = false) => {
+  const toggleOpen = (0, _util.useEvent)((nextOpen, config = {}) => {
+    const {
+      ignoreNext = false,
+      lazy = false
+    } = config;
     taskIdRef.current += 1;
     const id = taskIdRef.current;
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
 
     // Since `mergedOpen` is post-processed, we need to check if the value really changed
-    if (nextOpenVal) {
-      triggerEvent(true);
+    if (nextOpenVal || !lazy) {
+      if (!taskLockRef.current) {
+        triggerEvent(nextOpenVal);
 
-      // Lock if needed
-      if (ignoreNext) {
-        taskLockRef.current = ignoreNext;
-        macroTask(() => {
-          taskLockRef.current = false;
-        }, 2);
+        // Lock if needed
+        if (ignoreNext) {
+          taskLockRef.current = ignoreNext;
+          macroTask(() => {
+            taskLockRef.current = false;
+          }, 2);
+        }
       }
       return;
     }
     macroTask(() => {
       if (id === taskIdRef.current && !taskLockRef.current) {
-        triggerEvent(false);
+        triggerEvent(nextOpenVal);
       }
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.2.0-alpha.1",
+  "version": "1.2.0-alpha.3",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"