refactor: use shared renderability and value guards

package.json

@@ -50,7 +50,7 @@
   "dependencies": {
     "@rc-component/overflow": "^1.0.0",
     "@rc-component/trigger": "^3.0.0",
-    "@rc-component/util": "^1.11.1",
+    "@rc-component/util": "^1.13.0",
     "@rc-component/virtual-list": "^1.2.0",
     "clsx": "^2.1.1"
   },

src/BaseSelect/index.tsx

@@ -1,6 +1,6 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
 import { clsx } from 'clsx';
-import { getDOM, useEvent } from '@rc-component/util';
+import { getDOM, isNonNullable, useEvent } from '@rc-component/util';
 import type { ScrollConfig, ScrollTo } from '@rc-component/virtual-list';
 import * as React from 'react';
 import { useAllowClear } from '../hooks/useAllowClear';
@@ -744,7 +744,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     [`${prefixCls}-multiple`]: multiple,
     [`${prefixCls}-single`]: !multiple,
     [`${prefixCls}-allow-clear`]: mergedAllowClear,
-    [`${prefixCls}-show-arrow`]: mergedSuffixIcon !== undefined && mergedSuffixIcon !== null,
+    [`${prefixCls}-show-arrow`]: isNonNullable(mergedSuffixIcon),
     [`${prefixCls}-disabled`]: disabled,
     [`${prefixCls}-loading`]: loading,
     [`${prefixCls}-open`]: mergedOpen,

src/Select.tsx

@@ -29,7 +29,7 @@
  * - `combobox` mode not support `optionLabelProp`
  */
 
-import { useControlledState, useId, warning } from '@rc-component/util';
+import { isNonNullable, useControlledState, useId, warning } from '@rc-component/util';
 import * as React from 'react';
 import type {
   BaseSelectProps,
@@ -51,7 +51,7 @@ import useFilterOptions from './hooks/useFilterOptions';
 import useOptions from './hooks/useOptions';
 import useRefFunc from './hooks/useRefFunc';
 import type { FlattenOptionData } from './interface';
-import { hasValue, isComboNoValue, toArray } from './utils/commonUtil';
+import { isComboNoValue, toArray } from './utils/commonUtil';
 import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil';
 import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
 import useSearchConfig from './hooks/useSearchConfig';
@@ -392,7 +392,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
     React.useEffect(() => {
       if (mode === 'combobox') {
         const strValue = mergedValues[0]?.value;
-        setSearchValue(hasValue(strValue) ? String(strValue) : '');
+        setSearchValue(isNonNullable(strValue) ? String(strValue) : '');
       }
     }, [mergedValues]);
 

src/SelectInput/Affix.tsx

@@ -1,3 +1,4 @@
+import { isReactRenderable } from '@rc-component/util';
 import * as React from 'react';
 
 export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -8,7 +9,7 @@ export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
 export default function Affix(props: AffixProps) {
   const { children, ...restProps } = props;
 
-  if (!children) {
+  if (!isReactRenderable(children)) {
     return null;
   }
 

src/SelectInput/index.tsx

@@ -4,7 +4,15 @@ import SelectContent from './Content';
 import SelectInputContext from './context';
 import type { DisplayValueType, Mode, RenderNode } from '../interface';
 import useBaseProps from '../hooks/useBaseProps';
-import { composeRef, getDOM, KeyCode, omit, pickAttrs, useEvent } from '@rc-component/util';
+import {
+  composeRef,
+  getDOM,
+  isReactRenderable,
+  KeyCode,
+  omit,
+  pickAttrs,
+  useEvent,
+} from '@rc-component/util';
 import { isValidateOpenKey } from '../utils/keyUtil';
 import { clsx } from 'clsx';
 import type { ComponentsConfig } from '../hooks/useComponents';
@@ -298,7 +306,7 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
           {suffix}
         </Affix>
         {/* Clear Icon */}
-        {clearIcon && (
+        {isReactRenderable(clearIcon) && (
           <button
             type="button"
             aria-label={clearLabel}

src/hooks/useAllowClear.tsx

@@ -1,5 +1,6 @@
 import type { DisplayValueType, Mode } from '../interface';
 import type React from 'react';
+import { isReactRenderable } from '@rc-component/util';
 import { useMemo } from 'react';
 
 export interface AllowClearConfig {
@@ -37,7 +38,13 @@ export const useAllowClear = (
 
     return {
       allowClear: mergedAllowClear,
-      clearIcon: mergedAllowClear ? allowClearConfig.clearIcon || clearIcon || '×' : null,
+      clearIcon: mergedAllowClear
+        ? isReactRenderable(allowClearConfig.clearIcon)
+          ? allowClearConfig.clearIcon
+          : isReactRenderable(clearIcon)
+            ? clearIcon
+            : '×'
+        : null,
       label: mergedAllowClear ? (allowClearConfig.label ?? 'Clear') : '',
     };
   }, [allowClearConfig, clearIcon, disabled, displayValues.length, mergedSearchValue, mode]);

src/utils/commonUtil.ts

@@ -13,10 +13,6 @@ export const isClient =
 /** Is client side and not jsdom */
 export const isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;
 
-export function hasValue(value) {
-  return value !== undefined && value !== null;
-}
-
 /** combo mode no value judgment function */
 export function isComboNoValue(value) {
   return !value && value !== 0;

tests/Multiple.test.tsx

@@ -431,6 +431,28 @@ describe('Select.Multiple', () => {
     expect(container.querySelector('.rc-select-suffix')).toBeTruthy();
   });
 
+  it('should render numeric affixes', () => {
+    const { container } = render(<Select mode="multiple" value={['']} prefix={0} suffix={0} />);
+
+    expect(container.querySelector('.rc-select-prefix').textContent).toBe('0');
+    expect(container.querySelector('.rc-select-suffix').textContent).toBe('0');
+    expect(container.querySelector('.rc-select')).toHaveClass('rc-select-show-arrow');
+  });
+
+  it.each([
+    ['false', false],
+    ['empty string', ''],
+    ['null', null],
+    ['undefined', undefined],
+  ])('should hide non-renderable %s affixes', (_, affix) => {
+    const { container } = render(
+      <Select mode="multiple" value={['']} prefix={affix} suffix={affix} />,
+    );
+
+    expect(container.querySelector('.rc-select-prefix')).toBeFalsy();
+    expect(container.querySelector('.rc-select-suffix')).toBeFalsy();
+  });
+
   it('show static prefix', () => {
     render(
       <Select mode="multiple" value={['']} prefix="Foobar">

tests/Select.test.tsx

@@ -385,6 +385,12 @@ describe('Select.Basic', () => {
     expect(container6.querySelector('.custom-clear-icon')).toBeFalsy();
   });
 
+  it('should render numeric clear icon', () => {
+    const { container } = render(<Select allowClear clearIcon={0} value="1" />);
+
+    expect(container.querySelector('.rc-select-clear')).toHaveTextContent('0');
+  });
+
   it('should direction rtl', () => {
     const Hooker = () => {
       const { direction } = useBaseProps();