fix(pickers): fix the spacing of the searchbox is not uniform in all …

…pickers (#3565)

docs/next.config.js

@@ -169,6 +169,7 @@ module.exports = {
     // preventing "more than one copy of React" error
     if (__USE_SRC__) {
       Object.assign(config.resolve.alias, {
+        '@/internal': path.resolve(__dirname, '../src/internal'),
         rsuite: path.resolve(__dirname, '../src'),
         react: path.resolve(__dirname, './node_modules/react'),
         'react-dom': path.resolve(__dirname, './node_modules/react-dom')

docs/pages/components/cascader/fragments/basic.md

@@ -1,7 +1,7 @@
 <!--start-code-->
 
 ```js
-import { Cascader } from 'rsuite';
+import { Cascader, Stack } from 'rsuite';
 import { mockTreeData } from './mock';
 
 const data = mockTreeData({
@@ -14,9 +14,15 @@ const data = mockTreeData({
 
 const App = () => {
   return (
-    <>
+    <Stack spacing={10} direction="column" alignItems="flex-start">
       <Cascader data={data} style={{ width: 224 }} />
-    </>
+      <Cascader
+        data={data}
+        searchable={false}
+        style={{ width: 224 }}
+        placeholder="Select without search"
+      />
+    </Stack>
   );
 };
 

docs/pages/components/cascader/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Cascader, Button, RadioGroup, Radio } from 'rsuite';
+import { Cascader, Button, RadioGroup, Radio, Stack } from 'rsuite';
 import DefaultPage from '@/components/Page';
 import AdminIcon from '@rsuite/icons/Admin';
 import FolderFillIcon from '@rsuite/icons/FolderFill';
@@ -34,6 +34,7 @@ export default function Page() {
         AdminIcon,
         FolderFillIcon,
         PageIcon,
+        Stack,
         mockAsyncData,
         mockTreeData
       }}

docs/pages/components/check-picker/fragments/basic.md

@@ -1,7 +1,7 @@
 <!--start-code-->
 
 ```js
-import { CheckPicker } from 'rsuite';
+import { CheckPicker, Stack } from 'rsuite';
 
 const data = [
   'Eugenia',
@@ -25,9 +25,15 @@ const data = [
 ].map(item => ({ label: item, value: item }));
 
 const App = () => (
-  <>
+  <Stack spacing={10} direction="column" alignItems="flex-start">
     <CheckPicker data={data} style={{ width: 224 }} />
-  </>
+    <CheckPicker
+      data={data}
+      searchable={false}
+      style={{ width: 224 }}
+      placeholder="Select without search"
+    />
+  </Stack>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

docs/pages/components/check-picker/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { CheckPicker, Button, Checkbox, RadioGroup, Radio } from 'rsuite';
+import { CheckPicker, Button, Checkbox, RadioGroup, Radio, Stack } from 'rsuite';
 import DefaultPage from '@/components/Page';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 
 export default function Page() {
   return (
     <DefaultPage
       dependencies={{
+        Stack,
         CheckPicker,
         Button,
         Checkbox,

docs/pages/components/check-tree-picker/fragments/basic.md

@@ -1,7 +1,7 @@
 <!--start-code-->
 
 ```js
-import { CheckTreePicker } from 'rsuite';
+import { CheckTreePicker, Stack } from 'rsuite';
 import { mockTreeData } from './mock';
 
 const data = mockTreeData({
@@ -13,9 +13,16 @@ const data = mockTreeData({
 });
 
 const App = () => (
-  <>
+  <Stack spacing={10} direction="column" alignItems="flex-start">
     <CheckTreePicker defaultExpandAll data={data} style={{ width: 280 }} />
-  </>
+    <CheckTreePicker
+      defaultExpandAll
+      data={data}
+      searchable={false}
+      style={{ width: 280 }}
+      placeholder="Select without search"
+    />
+  </Stack>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

docs/pages/components/check-tree-picker/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CheckTreePicker, Button, Toggle, Checkbox } from 'rsuite';
+import { CheckTreePicker, Button, Toggle, Checkbox, Stack } from 'rsuite';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 import PeoplesIcon from '@rsuite/icons/Peoples';
 import AdminIcon from '@rsuite/icons/Admin';
@@ -33,6 +33,7 @@ export default function Page() {
         SpinnerIcon,
         PeoplesIcon,
         AdminIcon,
+        Stack,
         mockTreeData,
         mockAsyncData
       }}

docs/pages/components/multi-cascader/fragments/basic.md

@@ -1,7 +1,7 @@
 <!--start-code-->
 
 ```js
-import { MultiCascader } from 'rsuite';
+import { MultiCascader, Stack } from 'rsuite';
 import { mockTreeData } from './mock';
 
 const data = mockTreeData({
@@ -13,9 +13,15 @@ const data = mockTreeData({
 });
 
 const App = () => (
-  <>
+  <Stack spacing={10} direction="column" alignItems="flex-start">
     <MultiCascader data={data} style={{ width: 224 }} />
-  </>
+    <MultiCascader
+      data={data}
+      searchable={false}
+      style={{ width: 224 }}
+      placeholder="Select without search"
+    />
+  </Stack>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

docs/pages/components/multi-cascader/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MultiCascader, Button, Toggle, RadioGroup, Radio } from 'rsuite';
+import { MultiCascader, Button, Toggle, RadioGroup, Radio, Stack } from 'rsuite';
 import DefaultPage from '@/components/Page';
 import PeoplesIcon from '@rsuite/icons/Peoples';
 import AdminIcon from '@rsuite/icons/Admin';
@@ -32,6 +32,7 @@ export default function Page() {
         Radio,
         PeoplesIcon,
         AdminIcon,
+        Stack,
         mockAsyncData,
         mockTreeData
       }}

docs/pages/components/select-picker/fragments/basic.md

@@ -1,16 +1,22 @@
 <!--start-code-->
 
 ```js
-import { SelectPicker } from 'rsuite';
+import { SelectPicker, Stack } from 'rsuite';
 
 const data = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
   item => ({ label: item, value: item })
 );
 
 const App = () => (
-  <>
+  <Stack spacing={10} direction="column" alignItems="flex-start">
     <SelectPicker data={data} style={{ width: 224 }} />
-  </>
+    <SelectPicker
+      data={data}
+      searchable={false}
+      style={{ width: 224 }}
+      placeholder="Select without search"
+    />
+  </Stack>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

docs/pages/components/select-picker/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SelectPicker, Button, RadioGroup, Radio, Loader } from 'rsuite';
+import { SelectPicker, Button, RadioGroup, Radio, Loader, Stack } from 'rsuite';
 import DefaultPage from '@/components/Page';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 
@@ -12,7 +12,8 @@ export default function Page() {
         Button,
         SpinnerIcon,
         RadioGroup,
-        Radio
+        Radio,
+        Stack
       }}
     />
   );

docs/pages/components/tree-picker/fragments/basic.md

@@ -1,7 +1,7 @@
 <!--start-code-->
 
 ```js
-import { TreePicker } from 'rsuite';
+import { TreePicker, Stack } from 'rsuite';
 import { mockTreeData } from './mock';
 
 const data = mockTreeData({
@@ -13,9 +13,16 @@ const data = mockTreeData({
 });
 
 const App = () => (
-  <>
+  <Stack spacing={10} direction="column" alignItems="flex-start">
     <TreePicker defaultExpandAll data={data} style={{ width: 246 }} />
-  </>
+    <TreePicker
+      defaultExpandAll
+      data={data}
+      searchable={false}
+      style={{ width: 246 }}
+      placeholder="Select without search"
+    />
+  </Stack>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

docs/pages/components/tree-picker/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TreePicker, Button } from 'rsuite';
+import { TreePicker, Button, Stack } from 'rsuite';
 import DefaultPage from '@/components/Page';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 import PeoplesIcon from '@rsuite/icons/Peoples';
@@ -31,6 +31,7 @@ export default function Page() {
       dependencies={{
         TreePicker,
         Button,
+        Stack,
         SpinnerIcon,
         PeoplesIcon,
         AdminIcon,

docs/tsconfig.json

@@ -19,6 +19,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "baseUrl": ".",
     "paths": {
+      "@/internals/*": ["../src/internals/*"],
       "@/*": ["./*"]
     }
   },

src/AutoComplete/AutoComplete.tsx

@@ -23,8 +23,8 @@ import {
   pickTriggerPropKeys,
   PositionChildProps,
   PickerComponent
-} from '../Picker';
-
+} from '../internals/Picker';
+import Plaintext from '../internals/Plaintext';
 import {
   WithAsProps,
   FormControlPickerProps,
@@ -33,7 +33,7 @@ import {
 } from '../@types/common';
 
 import { transformData, shouldDisplay } from './utils';
-import Plaintext from '../Plaintext';
+
 import Combobox from './Combobox';
 
 export type ValueType = string;

src/AutoComplete/Combobox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useCombobox } from '../Picker';
+import { useCombobox } from '../internals/Picker';
 import Input, { type InputProps } from '../Input';
 
 interface ComboboxProps extends InputProps {

src/AutoComplete/styles/index.less

@@ -2,14 +2,12 @@
 @import '../../styles/mixins/listbox';
 @import '../../Input/styles/index';
 @import '../../InputGroup/styles/index';
-@import '../../Picker/styles/index';
+@import '../../internals/Picker/styles/index';
 
 .rs-auto-complete {
   &-menu > {
     // Auto complete items style the same to Picker menu items
     .picker-menu-items-reset();
-
-    margin-top: @border-radius;
   }
 
   // The same to Picker select menu item

src/AutoComplete/test/AutoCompleteStylesSpec.tsx

@@ -4,7 +4,7 @@ import AutoComplete from '../index';
 import { getStyle, toRGB, inChrome } from '@test/utils';
 
 import '../styles/index.less';
-import { PickerHandle } from '../../Picker';
+import { PickerHandle } from '../../internals/Picker';
 
 describe('AutoComplete styles', () => {
   it('Input should render the correct styles', () => {

src/Button/Button.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroupContext } from '../ButtonGroup';
 import SafeAnchor from '../SafeAnchor';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
 import { isOneOf, useClassNames } from '../utils';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 

src/Button/styles/index.less

@@ -1,5 +1,5 @@
 @import '../../styles/common';
-@import '../../Ripple/styles/mixins';
+@import '../../internals/Ripple/styles/mixins';
 @import 'mixin.less';
 
 //

src/Calendar/MonthDropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { AutoSizer, FixedSizeList, ListChildComponentProps } from '../Windowing';
+import { AutoSizer, FixedSizeList, ListChildComponentProps } from '../internals/Windowing';
 import { DateUtils, useClassNames } from '../utils';
 import MonthDropdownItem from './MonthDropdownItem';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';

src/Calendar/styles/index.less

@@ -1,7 +1,7 @@
 @import '../../styles/common';
 @import '../../styles/mixins/listbox';
 @import '../../Button/styles/index';
-@import '../../Picker/styles/mixin';
+@import '../../internals/Picker/styles/mixin';
 
 // Calendar panel
 // ----------------------

src/Cascader/Cascader.tsx

@@ -24,7 +24,6 @@ import {
 import {
   PickerToggle,
   PickerPopup,
-  SearchBar,
   PickerToggleTrigger,
   usePickerClassName,
   usePickerRef,
@@ -36,8 +35,8 @@ import {
   listPickerPropTypes,
   PickerHandle,
   PickerToggleProps
-} from '../Picker';
-
+} from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import { useMap } from '../utils/useMap';
 
@@ -519,7 +518,7 @@ const Cascader = React.forwardRef(<T extends number | string>(props: CascaderPro
         onKeyDown={onPickerKeyDown}
       >
         {searchable && (
-          <SearchBar
+          <SearchBox
             placeholder={locale?.searchPlaceholder}
             onChange={handleSearch}
             value={searchKeyword}

src/Cascader/DropdownMenu.tsx

@@ -3,7 +3,7 @@ import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import { shallowEqual, useClassNames, mergeRefs, useCustom, useEventCallback } from '../utils';
-import { ListItem, useCombobox } from '../Picker';
+import { ListItem, useCombobox } from '../internals/Picker';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './Cascader';
 import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';