@rc-component/select 1.2.0-alpha.0 → 1.2.0-alpha.2

package/assets/index.css

@@ -57,6 +57,12 @@
   border-radius: 8px;
   margin-right: 4px;
 }
+.rc-select.rc-select-multiple .rc-select-placeholder {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .rc-select.rc-select-multiple .rc-select-input {
   width: calc(var(--select-input-width, 10) * 1px);
   min-width: 4px;

package/assets/patch.less

@@ -75,6 +75,13 @@
       margin-right: 4px;
     }
 
+    .@{select-prefix}-placeholder {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
     .@{select-prefix}-input {
       width: calc(var(--select-input-width, 10) * 1px);
       min-width: 4px;

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/Select.d.ts

@@ -125,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

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
@@ -129,15 +134,14 @@ export default /*#__PURE__*/React.forwardRef(function MultipleContent({
   };
 
   // ======================= Render =======================
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Placeholder, {
-    show: !searchValue || !triggerOpen
-  }), /*#__PURE__*/React.createElement(Overflow, {
+  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,
-    renderRest: renderRest
-    // suffix={inputNode}
-    ,
+    renderRest: renderRest,
     suffix: /*#__PURE__*/React.createElement(Input, _extends({
       ref: ref,
       disabled: disabled,
@@ -148,5 +152,5 @@ export default /*#__PURE__*/React.forwardRef(function MultipleContent({
     })),
     itemKey: itemKey,
     maxCount: maxTagCount
-  }));
+  });
 });

package/es/SelectInput/Content/Placeholder.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 export interface PlaceholderProps {
-    show: boolean;
+    show?: boolean;
 }
 export default function Placeholder(props: PlaceholderProps): React.JSX.Element;

package/es/SelectInput/Content/Placeholder.js

@@ -1,5 +1,7 @@
 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,
@@ -7,15 +9,20 @@ export default function Placeholder(props) {
     displayValues
   } = useSelectInputContext();
   const {
-    show
+    classNames,
+    styles
+  } = useBaseProps();
+  const {
+    show = true
   } = props;
   if (displayValues.length) {
     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/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/Select.d.ts

@@ -125,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

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
@@ -138,15 +143,14 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Multiple
   };
 
   // ======================= Render =======================
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Placeholder.default, {
-    show: !searchValue || !triggerOpen
-  }), /*#__PURE__*/React.createElement(_rcOverflow.default, {
+  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,
-    renderRest: renderRest
-    // suffix={inputNode}
-    ,
+    renderRest: renderRest,
     suffix: /*#__PURE__*/React.createElement(_Input.default, _extends({
       ref: ref,
       disabled: disabled,
@@ -157,5 +161,5 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Multiple
     })),
     itemKey: itemKey,
     maxCount: maxTagCount
-  }));
+  });
 });

package/lib/SelectInput/Content/Placeholder.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 export interface PlaceholderProps {
-    show: boolean;
+    show?: boolean;
 }
 export default function Placeholder(props: PlaceholderProps): React.JSX.Element;

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) {
@@ -15,15 +18,20 @@ function Placeholder(props) {
     displayValues
   } = (0, _context.useSelectInputContext)();
   const {
-    show
+    classNames,
+    styles
+  } = (0, _useBaseProps.default)();
+  const {
+    show = true
   } = props;
   if (displayValues.length) {
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.2.0-alpha.0",
+  "version": "1.2.0-alpha.2",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"
@@ -53,7 +53,7 @@
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1",
-    "rc-overflow": "^1.4.0",
+    "rc-overflow": "^1.5.0",
     "rc-virtual-list": "^3.5.2"
   },
   "devDependencies": {