diff --git a/docs/next.config.js b/docs/next.config.js
index d2103421e..cd302bf42 100644
--- a/docs/next.config.js
+++ b/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')
diff --git a/docs/pages/components/cascader/fragments/basic.md b/docs/pages/components/cascader/fragments/basic.md
index 6824b07fd..85f0205ce 100644
--- a/docs/pages/components/cascader/fragments/basic.md
+++ b/docs/pages/components/cascader/fragments/basic.md
@@ -1,7 +1,7 @@
```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 (
- <>
+
- >
+
+
);
};
diff --git a/docs/pages/components/cascader/index.tsx b/docs/pages/components/cascader/index.tsx
index c91295fbb..5320e3f68 100644
--- a/docs/pages/components/cascader/index.tsx
+++ b/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
}}
diff --git a/docs/pages/components/check-picker/fragments/basic.md b/docs/pages/components/check-picker/fragments/basic.md
index d5e43795c..b01197684 100644
--- a/docs/pages/components/check-picker/fragments/basic.md
+++ b/docs/pages/components/check-picker/fragments/basic.md
@@ -1,7 +1,7 @@
```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 = () => (
- <>
+
- >
+
+
);
ReactDOM.render(, document.getElementById('root'));
diff --git a/docs/pages/components/check-picker/index.tsx b/docs/pages/components/check-picker/index.tsx
index f6a21e0d2..bdf17b4a4 100644
--- a/docs/pages/components/check-picker/index.tsx
+++ b/docs/pages/components/check-picker/index.tsx
@@ -1,5 +1,5 @@
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';
@@ -7,6 +7,7 @@ export default function Page() {
return (
```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 = () => (
- <>
+
- >
+
+
);
ReactDOM.render(, document.getElementById('root'));
diff --git a/docs/pages/components/check-tree-picker/index.tsx b/docs/pages/components/check-tree-picker/index.tsx
index 70997b9f9..2b3ef046d 100644
--- a/docs/pages/components/check-tree-picker/index.tsx
+++ b/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
}}
diff --git a/docs/pages/components/multi-cascader/fragments/basic.md b/docs/pages/components/multi-cascader/fragments/basic.md
index b7f4aa8fb..dfdb82335 100644
--- a/docs/pages/components/multi-cascader/fragments/basic.md
+++ b/docs/pages/components/multi-cascader/fragments/basic.md
@@ -1,7 +1,7 @@
```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 = () => (
- <>
+
- >
+
+
);
ReactDOM.render(, document.getElementById('root'));
diff --git a/docs/pages/components/multi-cascader/index.tsx b/docs/pages/components/multi-cascader/index.tsx
index 53abb9906..29132382b 100644
--- a/docs/pages/components/multi-cascader/index.tsx
+++ b/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
}}
diff --git a/docs/pages/components/select-picker/fragments/basic.md b/docs/pages/components/select-picker/fragments/basic.md
index 4aff8272c..41178b697 100644
--- a/docs/pages/components/select-picker/fragments/basic.md
+++ b/docs/pages/components/select-picker/fragments/basic.md
@@ -1,16 +1,22 @@
```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 = () => (
- <>
+
- >
+
+
);
ReactDOM.render(, document.getElementById('root'));
diff --git a/docs/pages/components/select-picker/index.tsx b/docs/pages/components/select-picker/index.tsx
index 342a01761..dad688c02 100644
--- a/docs/pages/components/select-picker/index.tsx
+++ b/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
}}
/>
);
diff --git a/docs/pages/components/tree-picker/fragments/basic.md b/docs/pages/components/tree-picker/fragments/basic.md
index b2c8f029f..f0c38a093 100644
--- a/docs/pages/components/tree-picker/fragments/basic.md
+++ b/docs/pages/components/tree-picker/fragments/basic.md
@@ -1,7 +1,7 @@
```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 = () => (
- <>
+
- >
+
+
);
ReactDOM.render(, document.getElementById('root'));
diff --git a/docs/pages/components/tree-picker/index.tsx b/docs/pages/components/tree-picker/index.tsx
index 2231b5a2b..61859dc43 100644
--- a/docs/pages/components/tree-picker/index.tsx
+++ b/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,
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index b5397c0e2..4913b5a30 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -19,6 +19,7 @@
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": ".",
"paths": {
+ "@/internals/*": ["../src/internals/*"],
"@/*": ["./*"]
}
},
diff --git a/src/AutoComplete/AutoComplete.tsx b/src/AutoComplete/AutoComplete.tsx
index f0c3262e7..f3d13fc5f 100644
--- a/src/AutoComplete/AutoComplete.tsx
+++ b/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;
diff --git a/src/AutoComplete/Combobox.tsx b/src/AutoComplete/Combobox.tsx
index ccd992c62..2a5be7a1e 100644
--- a/src/AutoComplete/Combobox.tsx
+++ b/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 {
diff --git a/src/AutoComplete/styles/index.less b/src/AutoComplete/styles/index.less
index b70873141..c541bc737 100644
--- a/src/AutoComplete/styles/index.less
+++ b/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
diff --git a/src/AutoComplete/test/AutoCompleteStylesSpec.tsx b/src/AutoComplete/test/AutoCompleteStylesSpec.tsx
index c5cea2223..d425057a9 100644
--- a/src/AutoComplete/test/AutoCompleteStylesSpec.tsx
+++ b/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', () => {
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 38ce16e3f..7545df9fe 100644
--- a/src/Button/Button.tsx
+++ b/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';
diff --git a/src/Button/styles/index.less b/src/Button/styles/index.less
index 916b79290..2d7bb51e1 100644
--- a/src/Button/styles/index.less
+++ b/src/Button/styles/index.less
@@ -1,5 +1,5 @@
@import '../../styles/common';
-@import '../../Ripple/styles/mixins';
+@import '../../internals/Ripple/styles/mixins';
@import 'mixin.less';
//
diff --git a/src/Calendar/MonthDropdown.tsx b/src/Calendar/MonthDropdown.tsx
index 29ddc9975..80ec6ca4a 100644
--- a/src/Calendar/MonthDropdown.tsx
+++ b/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';
diff --git a/src/Calendar/styles/index.less b/src/Calendar/styles/index.less
index 0271b1134..42b5dd24d 100644
--- a/src/Calendar/styles/index.less
+++ b/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
// ----------------------
diff --git a/src/Cascader/Cascader.tsx b/src/Cascader/Cascader.tsx
index 49fa49e88..a6102abcc 100644
--- a/src/Cascader/Cascader.tsx
+++ b/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((props: CascaderPro
onKeyDown={onPickerKeyDown}
>
{searchable && (
-
{searchable && (
- = React.forwardRef(
target={trigger}
>
{searchable ? (
- .rs-check-tree-node-label .rs-check-tree-node-text-wrapper {
.ellipsis();
diff --git a/src/CheckTreePicker/test/CheckTreePickerSpec.tsx b/src/CheckTreePicker/test/CheckTreePickerSpec.tsx
index b120d1d80..f41173a0a 100644
--- a/src/CheckTreePicker/test/CheckTreePickerSpec.tsx
+++ b/src/CheckTreePicker/test/CheckTreePickerSpec.tsx
@@ -7,7 +7,7 @@ import { mockTreeData } from '@test/mocks/data-mock';
import CheckTreePicker from '../CheckTreePicker';
import { KEY_VALUES } from '../../utils';
import { data, originMockData, changedMockData, controlledData } from './mocks';
-import { PickerHandle } from '../../Picker';
+import { PickerHandle } from '../../internals/Picker';
import {
testStandardProps,
testControlledUnControlled,
diff --git a/src/CheckTreePicker/test/CheckTreePickerStylesSpec.tsx b/src/CheckTreePicker/test/CheckTreePickerStylesSpec.tsx
index 04aeb1a8b..29fda1649 100644
--- a/src/CheckTreePicker/test/CheckTreePickerStylesSpec.tsx
+++ b/src/CheckTreePicker/test/CheckTreePickerStylesSpec.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import CheckTreePicker from '../index';
-import { getStyle, itChrome } from '@test/utils';
+import { itChrome } from '@test/utils';
import { mockTreeData } from '@test/mocks/data-mock';
import '../styles/index.less';
@@ -11,18 +11,20 @@ const data = mockTreeData([['Master', 'tester0', ['tester1', 'tester2']], 'disab
describe('CheckTreePicker styles', () => {
itChrome('Should render the correct styles', () => {
render();
- const itemLabel = document.body.querySelector(
- '.rs-check-tree .rs-checkbox-checker label'
- ) as HTMLLabelElement;
- assert.equal(getStyle(itemLabel, 'padding'), '8px 12px 8px 50px');
+
+ expect(screen.getByRole('tree').querySelector('.rs-checkbox-checker label')).to.have.style(
+ 'padding',
+ '8px 12px 8px 50px'
+ );
});
itChrome('Should render the correct styles when data has only one level structure', () => {
render();
- const itemLabel = document.body.querySelector(
- '.rs-check-tree .rs-checkbox-checker label'
- ) as HTMLLabelElement;
- assert.equal(getStyle(itemLabel, 'padding'), '8px 12px 8px 32px');
+
+ expect(screen.getByRole('tree').querySelector('.rs-checkbox-checker label')).to.have.style(
+ 'padding',
+ '8px 12px 8px 32px'
+ );
});
itChrome('Should render the correct styles when first level data is unchecked', () => {
@@ -36,9 +38,10 @@ describe('CheckTreePicker styles', () => {
open
/>
);
- const itemLabel = document.body.querySelector(
- '.rs-check-tree .rs-checkbox-checker label'
- ) as HTMLLabelElement;
- assert.equal(getStyle(itemLabel, 'padding'), '8px 12px 8px 22px');
+
+ expect(screen.getByRole('tree').querySelector('.rs-checkbox-checker label')).to.have.style(
+ 'padding',
+ '8px 12px 8px 22px'
+ );
});
});
diff --git a/src/CheckboxGroup/CheckboxGroup.tsx b/src/CheckboxGroup/CheckboxGroup.tsx
index 2d5398df4..d07c967bc 100644
--- a/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/src/CheckboxGroup/CheckboxGroup.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import cloneDeep from 'lodash/cloneDeep';
import remove from 'lodash/remove';
import { useClassNames, useControlled, shallowEqual } from '../utils';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
import { WithAsProps, FormControlBaseProps, RsRefForwardingComponent } from '../@types/common';
import type { ValueType } from '../Checkbox';
import { CheckboxGroupContext } from './CheckboxGroupContext';
diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
index 2cabd0894..bf0b3064d 100644
--- a/src/DatePicker/DatePicker.tsx
+++ b/src/DatePicker/DatePicker.tsx
@@ -50,11 +50,11 @@ import {
usePickerClassName,
usePickerRef,
onMenuKeyDown
-} from '../Picker';
+} from '../internals/Picker';
+import { OverlayCloseCause } from '../internals/Overlay/OverlayTrigger';
import DateInput from '../DateInput';
import InputGroup from '../InputGroup';
import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
-import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
import { deprecatePropTypeNew } from '../utils/deprecatePropType';
import { getAriaLabel } from '../Calendar/utils';
import { splitRanges } from './utils';
diff --git a/src/DatePicker/styles/index.less b/src/DatePicker/styles/index.less
index b8683257c..d3e4654da 100644
--- a/src/DatePicker/styles/index.less
+++ b/src/DatePicker/styles/index.less
@@ -1,7 +1,7 @@
@import '../../styles/common';
@import '../../styles/mixins/listbox';
@import '../../Button/styles/mixin';
-@import '../../Picker/styles/mixin';
+@import '../../internals/Picker/styles/mixin';
@import '../../Stack/styles/index';
@import 'mixin';
diff --git a/src/DateRangePicker/DateRangePicker.tsx b/src/DateRangePicker/DateRangePicker.tsx
index 57d69c41d..7b2386f30 100644
--- a/src/DateRangePicker/DateRangePicker.tsx
+++ b/src/DateRangePicker/DateRangePicker.tsx
@@ -25,7 +25,7 @@ import {
usePickerClassName,
usePickerRef,
onMenuKeyDown
-} from '../Picker';
+} from '../internals/Picker';
import {
createChainedFunction,
DATERANGE_DISABLED_TARGET,
diff --git a/src/DateRangePicker/styles/index.less b/src/DateRangePicker/styles/index.less
index 89c8fd7e7..8d45a4dd8 100644
--- a/src/DateRangePicker/styles/index.less
+++ b/src/DateRangePicker/styles/index.less
@@ -1,6 +1,6 @@
@import '../../styles/common';
@import '../../Button/styles/index';
-@import '../../Picker/styles/index';
+@import '../../internals/Picker/styles/index';
@import '../../DatePicker/styles/index';
@import '../../Calendar/styles/index';
diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx
index dd4e3b12f..63b85fffa 100644
--- a/src/Dropdown/Dropdown.tsx
+++ b/src/Dropdown/Dropdown.tsx
@@ -9,7 +9,7 @@ import { IconProps } from '@rsuite/icons/lib/Icon';
import deprecatePropType from '../utils/deprecatePropType';
import DropdownItem from './DropdownItem';
import DropdownContext, { DropdownContextProps } from './DropdownContext';
-import Menu, { MenuButtonTrigger } from '../Menu/Menu';
+import Menu, { MenuButtonTrigger } from '../internals/Menu/Menu';
import DropdownToggle from './DropdownToggle';
import kebabCase from 'lodash/kebabCase';
import NavContext from '../Nav/NavContext';
diff --git a/src/Dropdown/DropdownItem.tsx b/src/Dropdown/DropdownItem.tsx
index 24c5193b8..9abca2530 100644
--- a/src/Dropdown/DropdownItem.tsx
+++ b/src/Dropdown/DropdownItem.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import { IconProps } from '@rsuite/icons/lib/Icon';
import deprecatePropType, { deprecatePropTypeNew } from '../utils/deprecatePropType';
-import MenuItem from '../Menu/MenuItem';
+import MenuItem from '../internals/Menu/MenuItem';
import DropdownContext from './DropdownContext';
import isNil from 'lodash/isNil';
import { mergeRefs, shallowEqual, useClassNames } from '../utils';
diff --git a/src/Dropdown/DropdownMenu.tsx b/src/Dropdown/DropdownMenu.tsx
index bcbbbd41b..c53405186 100644
--- a/src/Dropdown/DropdownMenu.tsx
+++ b/src/Dropdown/DropdownMenu.tsx
@@ -1,7 +1,8 @@
import React, { useCallback, useContext, useMemo } from 'react';
import omit from 'lodash/omit';
-import Menu from '../Menu/Menu';
-import MenuItem from '../Menu/MenuItem';
+import Menu from '../internals/Menu/Menu';
+import MenuItem from '../internals/Menu/MenuItem';
+import Menubar from '../internals/Menu/Menubar';
import { mergeRefs, useClassNames } from '../utils';
import PropTypes from 'prop-types';
import { StandardProps } from '../@types/common';
@@ -10,7 +11,6 @@ import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
import AngleRight from '@rsuite/icons/legacy/AngleRight';
import useCustom from '../utils/useCustom';
import DropdownContext from './DropdownContext';
-import Menubar from '../Menu/Menubar';
import Nav from '../Nav';
import NavContext from '../Nav/NavContext';
import warnOnce from '../utils/warnOnce';
diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
index 80af202ee..29a71ac21 100644
--- a/src/Input/Input.tsx
+++ b/src/Input/Input.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { FormGroupContext } from '../FormGroup/FormGroup';
import { InputGroupContext } from '../InputGroup/InputGroup';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
import { createChainedFunction, TypeChecker, mergeRefs, useClassNames, KEY_VALUES } from '../utils';
import {
WithAsProps,
diff --git a/src/InputPicker/InputPicker.tsx b/src/InputPicker/InputPicker.tsx
index d77249d69..498ab376e 100644
--- a/src/InputPicker/InputPicker.tsx
+++ b/src/InputPicker/InputPicker.tsx
@@ -11,7 +11,7 @@ import pick from 'lodash/pick';
import getWidth from 'dom-lib/getWidth';
import shallowEqual from '../utils/shallowEqual';
import { filterNodesOfTree } from '../utils/treeUtils';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
import {
createChainedFunction,
tplTransform,
@@ -43,7 +43,7 @@ import {
PickerComponent,
listPickerPropTypes,
PickerToggleProps
-} from '../Picker';
+} from '../internals/Picker';
import Tag from '../Tag';
import InputAutosize from './InputAutosize';
diff --git a/src/InputPicker/TagList.tsx b/src/InputPicker/TagList.tsx
index c6fa05c77..9250a1b68 100644
--- a/src/InputPicker/TagList.tsx
+++ b/src/InputPicker/TagList.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { useClassNames } from '../utils';
-import useCombobox from '../Picker/hooks/useCombobox';
+import useCombobox from '../internals/Picker/hooks/useCombobox';
const TagList = React.forwardRef(
(props: React.HTMLAttributes, ref: React.Ref) => {
diff --git a/src/InputPicker/styles/index.less b/src/InputPicker/styles/index.less
index ef28b4af9..949b54bbf 100644
--- a/src/InputPicker/styles/index.less
+++ b/src/InputPicker/styles/index.less
@@ -1,7 +1,7 @@
@import '../../styles/common';
@import '../../Form/styles/mixin';
@import '../../Input/styles/index';
-@import '../../Picker/styles/index';
+@import '../../internals/Picker/styles/index';
.rs-picker-input {
position: relative;
diff --git a/src/InputPicker/test/InputPickerSpec.tsx b/src/InputPicker/test/InputPickerSpec.tsx
index 7b7379a48..6240ea0a9 100644
--- a/src/InputPicker/test/InputPickerSpec.tsx
+++ b/src/InputPicker/test/InputPickerSpec.tsx
@@ -12,7 +12,7 @@ import {
import { mockGroupData } from '@test/mocks/data-mock';
import InputPicker from '../InputPicker';
import Button from '../../Button';
-import { PickerHandle } from '../../Picker';
+import { PickerHandle } from '../../internals/Picker';
import userEvent from '@testing-library/user-event';
const data = mockGroupData(['Eugenia', 'Kariane', 'Louisa'], { role: 'Master' });
diff --git a/src/Message/Message.tsx b/src/Message/Message.tsx
index cc070cfda..7790b16d6 100644
--- a/src/Message/Message.tsx
+++ b/src/Message/Message.tsx
@@ -2,7 +2,7 @@ import React, { useState, useCallback, useContext } from 'react';
import PropTypes from 'prop-types';
import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, STATUS, useIsMounted } from '../utils';
import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
-import CloseButton from '../CloseButton';
+import CloseButton from '../internals/CloseButton';
import ToastContext from '../toaster/ToastContext';
export interface MessageProps extends WithAsProps {
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index 151913906..60f1051c1 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import pick from 'lodash/pick';
import on from 'dom-lib/on';
import getAnimationEnd from 'dom-lib/getAnimationEnd';
-import BaseModal, { BaseModalProps, modalPropTypes } from '../Overlay/Modal';
+import BaseModal, { BaseModalProps, modalPropTypes } from '../internals/Overlay/Modal';
import Bounce from '../Animation/Bounce';
import { useClassNames, mergeRefs, useWillUnmount } from '../utils';
import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
diff --git a/src/Modal/ModalHeader.tsx b/src/Modal/ModalHeader.tsx
index 08b23935e..05e7038ff 100644
--- a/src/Modal/ModalHeader.tsx
+++ b/src/Modal/ModalHeader.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { createChainedFunction, useClassNames } from '../utils';
import { ModalContext } from './ModalContext';
-import CloseButton from '../CloseButton';
+import CloseButton from '../internals/CloseButton';
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
import Close from '@rsuite/icons/Close';
import IconButton from '../IconButton';
diff --git a/src/MultiCascader/MultiCascader.tsx b/src/MultiCascader/MultiCascader.tsx
index b04a26487..5e3e0fd97 100644
--- a/src/MultiCascader/MultiCascader.tsx
+++ b/src/MultiCascader/MultiCascader.tsx
@@ -24,7 +24,6 @@ import {
import {
PickerToggle,
PickerPopup,
- SearchBar,
SelectedElement,
PickerToggleTrigger,
usePickerClassName,
@@ -37,8 +36,8 @@ import {
listPickerPropTypes,
PickerComponent,
PickerToggleProps
-} from '../Picker';
-
+} from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
import { FormControlPickerProps, ItemDataType } from '../@types/common';
export type ValueType = (number | string)[];
@@ -475,7 +474,7 @@ const MultiCascader: PickerComponent = React.forwardRef(
onKeyDown={onPickerKeyDown}
>
{searchable && (
- ;
- onChange?: (value: string, event: React.ChangeEvent) => void;
-}
-
-const SearchBar: RsRefForwardingComponent<'div', SearchBarProps> = React.forwardRef(
- (props: SearchBarProps, ref) => {
- const {
- as: Component = 'div',
- classPrefix = 'picker-search-bar',
- value,
- children,
- className,
- placeholder,
- inputRef,
- onChange,
- ...rest
- } = props;
- const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
- const classes = merge(className, withClassPrefix());
- const handleChange = useEventCallback((event: React.ChangeEvent) => {
- onChange?.(event.target?.value, event);
- });
- return (
-
-
-
- {children}
-
- );
- }
-);
-
-SearchBar.displayName = 'SearchBar';
-SearchBar.propTypes = {
- as: PropTypes.elementType,
- classPrefix: PropTypes.string,
- value: PropTypes.string,
- placeholder: PropTypes.string,
- className: PropTypes.string,
- children: PropTypes.node,
- onChange: PropTypes.func
-};
-
-export default SearchBar;
diff --git a/src/Picker/test/SearchBarSpec.tsx b/src/Picker/test/SearchBarSpec.tsx
deleted file mode 100644
index 946fb1a05..000000000
--- a/src/Picker/test/SearchBarSpec.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
-
-import SearchBar from '../SearchBar';
-import { getDOMNode } from '@test/utils';
-import Sinon from 'sinon';
-
-const searchInputClassName = '.rs-picker-search-bar-input';
-
-describe('SearchBar', () => {
- it('Should output a input', () => {
- const instance = getDOMNode();
- assert.equal((instance.querySelector(searchInputClassName) as HTMLElement).tagName, 'INPUT');
- assert.ok(instance.className.match(/\bpicker-search-bar\b/));
- });
-
- it('Should call `onChange` callback', () => {
- const onChange = Sinon.spy();
- const instance = getDOMNode();
- ReactTestUtils.Simulate.change(instance.querySelector(searchInputClassName) as HTMLElement);
-
- expect(onChange).to.have.been.calledOnce;
- });
-
- it('Should have a custom className', () => {
- const instance = getDOMNode();
- assert.ok(instance.className.match(/\bcustom\b/));
- });
-
- it('Should have a custom style', () => {
- const fontSize = '12px';
- const instance = getDOMNode();
- assert.equal(instance.style.fontSize, fontSize);
- });
-
- it('Should have a custom className prefix', () => {
- const instance = getDOMNode();
- assert.ok(instance.className.match(/\bcustom-prefix\b/));
- });
-});
diff --git a/src/RadioGroup/RadioGroup.tsx b/src/RadioGroup/RadioGroup.tsx
index f5bfbbb47..1fb70417c 100644
--- a/src/RadioGroup/RadioGroup.tsx
+++ b/src/RadioGroup/RadioGroup.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useClassNames, useControlled } from '../utils';
import { WithAsProps, FormControlBaseProps, RsRefForwardingComponent } from '../@types/common';
import { ValueType } from '../Radio';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
export interface RadioContextProps {
inline?: boolean;
diff --git a/src/Rate/Rate.tsx b/src/Rate/Rate.tsx
index e48d59f31..d0c78172f 100644
--- a/src/Rate/Rate.tsx
+++ b/src/Rate/Rate.tsx
@@ -6,7 +6,7 @@ import Star from '@rsuite/icons/legacy/Star';
import { useClassNames, useControlled, shallowEqualArray, SIZE, KEY_VALUES } from '../utils';
import { transformValueToCharacterMap, transformCharacterMapToValue, CharacterType } from './utils';
import Character from './Character';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
import {
WithAsProps,
TypeAttributes,
diff --git a/src/SelectPicker/SelectPicker.tsx b/src/SelectPicker/SelectPicker.tsx
index 807efc5ff..79ddca3cb 100644
--- a/src/SelectPicker/SelectPicker.tsx
+++ b/src/SelectPicker/SelectPicker.tsx
@@ -22,7 +22,6 @@ import {
PickerToggle,
PickerToggleTrigger,
PickerPopup,
- SearchBar,
useFocusItemValue,
usePickerClassName,
useSearch,
@@ -34,9 +33,9 @@ import {
listPickerPropTypes,
PickerHandle,
PickerToggleProps
-} from '../Picker';
-
-import { ListProps } from '../Windowing';
+} from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
+import { ListProps } from '../internals/Windowing';
import { FormControlPickerProps, ItemDataType } from '../@types/common';
export interface SelectProps {
@@ -371,7 +370,7 @@ const SelectPicker = React.forwardRef(
target={trigger}
>
{searchable && (
-
extends WithAsProps,
diff --git a/src/Sidenav/SidenavDropdown.tsx b/src/Sidenav/SidenavDropdown.tsx
index 44ced8deb..1fd655354 100644
--- a/src/Sidenav/SidenavDropdown.tsx
+++ b/src/Sidenav/SidenavDropdown.tsx
@@ -7,8 +7,8 @@ import { SidenavContext } from './Sidenav';
import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
import { IconProps } from '@rsuite/icons/lib/Icon';
import deprecatePropType from '../utils/deprecatePropType';
-import Menu, { MenuButtonTrigger } from '../Menu/Menu';
-import MenuItem from '../Menu/MenuItem';
+import Menu, { MenuButtonTrigger } from '../internals/Menu/Menu';
+import MenuItem from '../internals/Menu/MenuItem';
import kebabCase from 'lodash/kebabCase';
import ExpandedSidenavDropdown from './ExpandedSidenavDropdown';
import Button from '../Button';
diff --git a/src/Sidenav/SidenavDropdownItem.tsx b/src/Sidenav/SidenavDropdownItem.tsx
index 0a67f79ff..9bca3fe8e 100644
--- a/src/Sidenav/SidenavDropdownItem.tsx
+++ b/src/Sidenav/SidenavDropdownItem.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { IconProps } from '@rsuite/icons/lib/Icon';
import { SidenavContext } from './Sidenav';
import deprecatePropType from '../utils/deprecatePropType';
-import MenuItem from '../Menu/MenuItem';
+import MenuItem from '../internals/Menu/MenuItem';
import isNil from 'lodash/isNil';
import { mergeRefs, shallowEqual, useClassNames } from '../utils';
import NavContext from '../Nav/NavContext';
diff --git a/src/Sidenav/SidenavDropdownMenu.tsx b/src/Sidenav/SidenavDropdownMenu.tsx
index 76864fc92..932a69b87 100644
--- a/src/Sidenav/SidenavDropdownMenu.tsx
+++ b/src/Sidenav/SidenavDropdownMenu.tsx
@@ -1,7 +1,7 @@
import React, { useCallback, useContext } from 'react';
import omit from 'lodash/omit';
-import Menu from '../Menu/Menu';
-import MenuItem from '../Menu/MenuItem';
+import Menu from '../internals/Menu/Menu';
+import MenuItem from '../internals/Menu/MenuItem';
import { mergeRefs, useClassNames } from '../utils';
import PropTypes from 'prop-types';
import { StandardProps } from '../@types/common';
diff --git a/src/Sidenav/SidenavItem.tsx b/src/Sidenav/SidenavItem.tsx
index c20d10b3b..6c2821196 100644
--- a/src/Sidenav/SidenavItem.tsx
+++ b/src/Sidenav/SidenavItem.tsx
@@ -4,10 +4,10 @@ import isNil from 'lodash/isNil';
import { useClassNames, shallowEqual, mergeRefs, createChainedFunction } from '../utils';
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
import { IconProps } from '@rsuite/icons/lib/Icon';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
import SafeAnchor from '../SafeAnchor';
import NavContext, { NavContextProps } from '../Nav/NavContext';
-import MenuItem from '../Menu/MenuItem';
+import MenuItem from '../internals/Menu/MenuItem';
import omit from 'lodash/omit';
import { SidenavContext } from './Sidenav';
import Whisper, { WhisperInstance } from '../Whisper';
diff --git a/src/Sidenav/styles/index.less b/src/Sidenav/styles/index.less
index 33d313d0e..a85b729ca 100644
--- a/src/Sidenav/styles/index.less
+++ b/src/Sidenav/styles/index.less
@@ -1,6 +1,6 @@
@import '../../styles/common';
@import '../../styles//mixins/menu';
-@import '../../Ripple/styles/mixins';
+@import '../../internals/Ripple/styles/mixins';
@import 'mixin';
//
diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx
index 955825644..3e6e2ecc3 100644
--- a/src/Slider/Slider.tsx
+++ b/src/Slider/Slider.tsx
@@ -9,7 +9,7 @@ import Graduated from './Graduated';
import { useClassNames, useControlled, useCustom } from '../utils';
import { precisionMath, checkValue } from './utils';
import { WithAsProps, FormControlBaseProps, Offset } from '../@types/common';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
export interface LocaleType {
placeholder?: string;
diff --git a/src/Tag/Tag.tsx b/src/Tag/Tag.tsx
index 0f7ed8d4a..7b5fa4675 100644
--- a/src/Tag/Tag.tsx
+++ b/src/Tag/Tag.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useClassNames, useCustom } from '../utils';
import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
-import CloseButton from '../CloseButton';
+import CloseButton from '../internals/CloseButton';
export interface TagProps extends WithAsProps {
/** Different sizes */
diff --git a/src/TagInput/index.tsx b/src/TagInput/index.tsx
index 6f28223ff..2666f798e 100644
--- a/src/TagInput/index.tsx
+++ b/src/TagInput/index.tsx
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import InputPicker, { InputPickerProps } from '../InputPicker/InputPicker';
import InputPickerContext, { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../Picker/types';
+import type { PickerComponent } from '../internals/Picker/types';
export type TagInputProps = Omit, 'data'> &
Partial;
diff --git a/src/TagInput/test/TagInputSpec.tsx b/src/TagInput/test/TagInputSpec.tsx
index 3dffcb0f9..d459633e6 100644
--- a/src/TagInput/test/TagInputSpec.tsx
+++ b/src/TagInput/test/TagInputSpec.tsx
@@ -5,7 +5,7 @@ import { testStandardProps, testControlledUnControlled, testFormControl } from '
import userEvent from '@testing-library/user-event';
import sinon from 'sinon';
-import { PickerHandle } from '../../Picker';
+import { PickerHandle } from '../../internals/Picker';
describe('TagInput', () => {
testStandardProps(, {
diff --git a/src/TagPicker/index.tsx b/src/TagPicker/index.tsx
index ee1ab736d..fd2a331f1 100644
--- a/src/TagPicker/index.tsx
+++ b/src/TagPicker/index.tsx
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import InputPicker, { InputPickerProps } from '../InputPicker/InputPicker';
import InputPickerContext, { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../Picker/types';
+import type { PickerComponent } from '../internals/Picker/types';
import type { CheckboxProps } from '../Checkbox';
export interface TagPickerProps extends InputPickerProps, Partial {
diff --git a/src/TagPicker/styles/index.less b/src/TagPicker/styles/index.less
index 54b0949e8..a4e49371a 100644
--- a/src/TagPicker/styles/index.less
+++ b/src/TagPicker/styles/index.less
@@ -1,6 +1,6 @@
@import '../../styles/common';
@import '../../Form/styles/mixin';
-@import '../../Picker/styles/mixin';
+@import '../../internals/Picker/styles/mixin';
@import '../../InputPicker/styles/index';
.rs-picker-tag {
diff --git a/src/TagPicker/test/TagPickerSpec.tsx b/src/TagPicker/test/TagPickerSpec.tsx
index e76d66ebc..90cec9fb3 100644
--- a/src/TagPicker/test/TagPickerSpec.tsx
+++ b/src/TagPicker/test/TagPickerSpec.tsx
@@ -11,7 +11,7 @@ import {
import { mockGroupData } from '@test/mocks/data-mock';
import TagPicker from '../index';
import Button from '../../Button';
-import { PickerHandle } from '../../Picker';
+import { PickerHandle } from '../../internals/Picker';
const data = mockGroupData(['Eugenia', 'Kariane', 'Louisa'], {
role: 'Master',
diff --git a/src/Toggle/Toggle.tsx b/src/Toggle/Toggle.tsx
index 85f31e0dd..468c12507 100644
--- a/src/Toggle/Toggle.tsx
+++ b/src/Toggle/Toggle.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react';
import PropTypes from 'prop-types';
import { partitionHTMLProps, useClassNames, useControlled, useCustom } from '../utils';
import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
import { ToggleLocale } from '../locales';
import Loader from '../Loader';
diff --git a/src/Tree/Tree.tsx b/src/Tree/Tree.tsx
index 36f0dcd81..44600bcec 100644
--- a/src/Tree/Tree.tsx
+++ b/src/Tree/Tree.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
import TreePicker from '../TreePicker';
import TreeContext from './TreeContext';
import { StandardProps, ItemDataType, RsRefForwardingComponent } from '../@types/common';
-import { ListProps } from '../Windowing';
+import { ListProps } from '../internals/Windowing';
/**
* Tree Node Drag Type
diff --git a/src/Tree/test/TreeSpec.tsx b/src/Tree/test/TreeSpec.tsx
index 24f569e3b..c3f9c54dc 100644
--- a/src/Tree/test/TreeSpec.tsx
+++ b/src/Tree/test/TreeSpec.tsx
@@ -2,8 +2,8 @@ import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import sinon from 'sinon';
import Tree from '../Tree';
-import { PickerHandle } from '../../Picker';
-import { ListHandle } from '../../Windowing';
+import { PickerHandle } from '../../internals/Picker';
+import { ListHandle } from '../../internals/Windowing';
import userEvent from '@testing-library/user-event';
import { mockTreeData } from '@test/mocks/data-mock';
diff --git a/src/Tree/test/TreeStylesSpec.tsx b/src/Tree/test/TreeStylesSpec.tsx
index bb6e5cbb5..cd0af9c59 100644
--- a/src/Tree/test/TreeStylesSpec.tsx
+++ b/src/Tree/test/TreeStylesSpec.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
import Tree from '../index';
import { getStyle, inChrome } from '@test/utils';
import { mockTreeData } from '@test/mocks/data-mock';
-import { PickerHandle } from '../../Picker';
+import { PickerHandle } from '../../internals/Picker';
const data = mockTreeData([['Master', 'tester0', ['tester1', 'tester2']], 'disabled']);
diff --git a/src/TreePicker/TreePicker.tsx b/src/TreePicker/TreePicker.tsx
index 6c59d5270..4cb6f1b09 100644
--- a/src/TreePicker/TreePicker.tsx
+++ b/src/TreePicker/TreePicker.tsx
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useContext, useMemo } from 'react';
import PropTypes from 'prop-types';
import { pick, omit, isUndefined, isNil, isFunction } from 'lodash';
-import { List, AutoSizer, ListChildComponentProps } from '../Windowing';
+import { List, AutoSizer, ListChildComponentProps } from '../internals/Windowing';
import TreeNode from './TreeNode';
import {
createDragPreview,
@@ -53,7 +53,6 @@ import {
PickerToggle,
PickerPopup,
TreeView,
- SearchBar,
PickerToggleTrigger,
createConcatChildrenFunction,
usePickerClassName,
@@ -66,8 +65,8 @@ import {
PickerComponent,
useToggleKeyDownEvent,
PickerToggleProps
-} from '../Picker';
-
+} from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
import { TreeDragProps, TreeBaseProps, DropData } from '../Tree/Tree';
import { FormControlPickerProps, ItemDataType } from '../@types/common';
@@ -737,7 +736,7 @@ const TreePicker: PickerComponent = React.forwardRef((props, re
target={trigger}
>
{searchable ? (
- {
- it('Should render the correct styles', () => {
- const instanceRef = React.createRef();
+ itChrome('Should render the correct styles', () => {
+ render();
- render();
+ const tree = screen.getByRole('tree');
+ const treeNode = screen.queryAllByRole('treeitem')[0];
- const pickerMenuDom = document.querySelector('.rs-picker-tree-menu') as HTMLElement;
- const treeWrapperDom = pickerMenuDom.querySelector('.rs-tree') as HTMLElement;
- const treeNodeDom = pickerMenuDom.querySelector('.rs-tree-node') as HTMLElement;
- inChrome &&
- assert.equal(
- getStyle(treeWrapperDom, 'padding'),
- '0px 12px 12px 0px',
- 'Picker tree wrapper padding'
- );
- assert.equal(getStyle(treeNodeDom, 'fontSize'), '0px', 'Picker tree node font-size');
- assert.equal(getStyle(treeNodeDom, 'height'), '36px', 'Picker tree node height');
+ expect(tree).to.have.style('padding', '0px 12px 0px 0px');
+ expect(treeNode).to.have.style('font-size', '0px');
+ expect(treeNode).to.have.style('height', '36px');
});
});
diff --git a/src/Uploader/UploadFileItem.tsx b/src/Uploader/UploadFileItem.tsx
index 2993007d0..9cc4c304d 100644
--- a/src/Uploader/UploadFileItem.tsx
+++ b/src/Uploader/UploadFileItem.tsx
@@ -6,7 +6,7 @@ import Reload from '@rsuite/icons/Reload';
import { previewFile, useClassNames } from '../utils';
import { FileType } from './Uploader';
import { UploaderLocale } from '../locales';
-import CloseButton from '../CloseButton';
+import CloseButton from '../internals/CloseButton';
import { WithAsProps } from '../@types/common';
export interface UploadFileItemProps extends WithAsProps {
diff --git a/src/Uploader/Uploader.tsx b/src/Uploader/Uploader.tsx
index 7602d1dca..0e892c56e 100644
--- a/src/Uploader/Uploader.tsx
+++ b/src/Uploader/Uploader.tsx
@@ -5,7 +5,7 @@ import FileItem from './UploadFileItem';
import UploadTrigger, { UploadTriggerInstance, UploadTriggerProps } from './UploadTrigger';
import { ajaxUpload, useClassNames, useCustom, guid, useWillUnmount } from '../utils';
import { WithAsProps } from '../@types/common';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
import { UploaderLocale } from '../locales';
import type { ErrorStatus } from '../utils/ajaxUpload';
diff --git a/src/Whisper/Whisper.tsx b/src/Whisper/Whisper.tsx
index a69b9a310..988f6f21f 100644
--- a/src/Whisper/Whisper.tsx
+++ b/src/Whisper/Whisper.tsx
@@ -1,9 +1,9 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
-import OverlayTrigger, { OverlayTriggerHandle } from '../Overlay/OverlayTrigger';
+import OverlayTrigger, { OverlayTriggerHandle } from '../internals/Overlay/OverlayTrigger';
import { createChainedFunction, placementPolyfill, PLACEMENT } from '../utils';
import { CustomContext } from '../CustomProvider';
-import { OverlayTriggerProps } from '../Overlay/OverlayTrigger';
+import { OverlayTriggerProps } from '../internals/Overlay/OverlayTrigger';
export type WhisperProps = OverlayTriggerProps;
diff --git a/src/index.tsx b/src/index.tsx
index 0b672a969..31d38bb14 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -304,6 +304,5 @@ export type {
ToggleLocale
} from './locales';
-export type { PickerHandle } from './Picker';
-
+export type { PickerHandle } from './internals/Picker';
export { default as useMediaQuery } from './useMediaQuery';
diff --git a/src/CloseButton/CloseButton.tsx b/src/internals/CloseButton/CloseButton.tsx
similarity index 84%
rename from src/CloseButton/CloseButton.tsx
rename to src/internals/CloseButton/CloseButton.tsx
index a78e4b88e..f90c5a343 100644
--- a/src/CloseButton/CloseButton.tsx
+++ b/src/internals/CloseButton/CloseButton.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import Close from '@rsuite/icons/Close';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-import { useClassNames, useCustom } from '../utils';
-import { CloseButtonLocale } from '../locales';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
+import { useClassNames, useCustom } from '../../utils';
+import { CloseButtonLocale } from '../../locales';
export interface CloseButtonProps extends WithAsProps {
/** Custom locale */
diff --git a/src/CloseButton/index.tsx b/src/internals/CloseButton/index.tsx
similarity index 100%
rename from src/CloseButton/index.tsx
rename to src/internals/CloseButton/index.tsx
diff --git a/src/CloseButton/styles/index.less b/src/internals/CloseButton/styles/index.less
similarity index 91%
rename from src/CloseButton/styles/index.less
rename to src/internals/CloseButton/styles/index.less
index 38150246b..3bbd65960 100644
--- a/src/CloseButton/styles/index.less
+++ b/src/internals/CloseButton/styles/index.less
@@ -1,4 +1,4 @@
-@import '../../styles/common';
+@import '../../../styles/common';
// Close button
.rs-btn-close {
diff --git a/src/CloseButton/test/CloseButtonSpec.tsx b/src/internals/CloseButton/test/CloseButtonSpec.tsx
similarity index 100%
rename from src/CloseButton/test/CloseButtonSpec.tsx
rename to src/internals/CloseButton/test/CloseButtonSpec.tsx
diff --git a/src/Disclosure/Disclosure.tsx b/src/internals/Disclosure/Disclosure.tsx
similarity index 98%
rename from src/Disclosure/Disclosure.tsx
rename to src/internals/Disclosure/Disclosure.tsx
index ae03368f9..2bfd6b827 100644
--- a/src/Disclosure/Disclosure.tsx
+++ b/src/internals/Disclosure/Disclosure.tsx
@@ -9,7 +9,7 @@ import DisclosureContext, {
} from './DisclosureContext';
import DisclosureButton from './DisclosureButton';
import DisclosureContent from './DisclosureContent';
-import useClickOutside from '../utils/useClickOutside';
+import useClickOutside from '../../utils/useClickOutside';
export type DisclosureTrigger = 'click' | 'hover';
diff --git a/src/Disclosure/DisclosureButton.tsx b/src/internals/Disclosure/DisclosureButton.tsx
similarity index 97%
rename from src/Disclosure/DisclosureButton.tsx
rename to src/internals/Disclosure/DisclosureButton.tsx
index 5f2214473..f517bda74 100644
--- a/src/Disclosure/DisclosureButton.tsx
+++ b/src/internals/Disclosure/DisclosureButton.tsx
@@ -1,6 +1,6 @@
import React, { useCallback, useRef } from 'react';
import { DisclosureActionTypes } from './DisclosureContext';
-import { KEY_VALUES } from '../utils';
+import { KEY_VALUES } from '../../utils';
import useDisclosureContext from './useDisclosureContext';
export interface DisclosureButtonRenderProps {
diff --git a/src/Disclosure/DisclosureContent.tsx b/src/internals/Disclosure/DisclosureContent.tsx
similarity index 100%
rename from src/Disclosure/DisclosureContent.tsx
rename to src/internals/Disclosure/DisclosureContent.tsx
diff --git a/src/Disclosure/DisclosureContext.ts b/src/internals/Disclosure/DisclosureContext.ts
similarity index 100%
rename from src/Disclosure/DisclosureContext.ts
rename to src/internals/Disclosure/DisclosureContext.ts
diff --git a/src/Disclosure/index.tsx b/src/internals/Disclosure/index.tsx
similarity index 100%
rename from src/Disclosure/index.tsx
rename to src/internals/Disclosure/index.tsx
diff --git a/src/Disclosure/test/DisclosureSpec.tsx b/src/internals/Disclosure/test/DisclosureSpec.tsx
similarity index 100%
rename from src/Disclosure/test/DisclosureSpec.tsx
rename to src/internals/Disclosure/test/DisclosureSpec.tsx
diff --git a/src/Disclosure/useDisclosureContext.ts b/src/internals/Disclosure/useDisclosureContext.ts
similarity index 100%
rename from src/Disclosure/useDisclosureContext.ts
rename to src/internals/Disclosure/useDisclosureContext.ts
diff --git a/src/Menu/Menu.tsx b/src/internals/Menu/Menu.tsx
similarity index 97%
rename from src/Menu/Menu.tsx
rename to src/internals/Menu/Menu.tsx
index 289ee5930..4b5cfa2cb 100644
--- a/src/Menu/Menu.tsx
+++ b/src/internals/Menu/Menu.tsx
@@ -2,13 +2,13 @@ import React, { useCallback, useContext, useRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import isNil from 'lodash/isNil';
import MenuContext, { MenuActionTypes, MenuContextProps, MoveFocusTo } from './MenuContext';
-import { KEY_VALUES, useCustom } from '../utils';
-import useUniqueId from '../utils/useUniqueId';
+import { KEY_VALUES, useCustom } from '../../utils';
+import useUniqueId from '../../utils/useUniqueId';
import useMenu from './useMenu';
-import useFocus from '../utils/useFocus';
-import useClickOutside from '../utils/useClickOutside';
-import { isFocusLeaving } from '../utils/events';
-import { isFocusableElement } from '../utils/dom';
+import useFocus from '../../utils/useFocus';
+import useClickOutside from '../../utils/useClickOutside';
+import { isFocusLeaving } from '../../utils/events';
+import { isFocusableElement } from '../../utils/dom';
export interface MenuProps {
/**
diff --git a/src/Menu/MenuContext.ts b/src/internals/Menu/MenuContext.ts
similarity index 100%
rename from src/Menu/MenuContext.ts
rename to src/internals/Menu/MenuContext.ts
diff --git a/src/Menu/MenuItem.tsx b/src/internals/Menu/MenuItem.tsx
similarity index 98%
rename from src/Menu/MenuItem.tsx
rename to src/internals/Menu/MenuItem.tsx
index 92f2e658c..4164374c3 100644
--- a/src/Menu/MenuItem.tsx
+++ b/src/internals/Menu/MenuItem.tsx
@@ -1,7 +1,7 @@
import React, { useCallback, useContext, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import isNil from 'lodash/isNil';
-import useUniqueId from '../utils/useUniqueId';
+import useUniqueId from '../../utils/useUniqueId';
import MenuContext, { MenuActionTypes, MoveFocusTo } from './MenuContext';
export interface MenuItemProps {
diff --git a/src/Menu/Menubar.tsx b/src/internals/Menu/Menubar.tsx
similarity index 96%
rename from src/Menu/Menubar.tsx
rename to src/internals/Menu/Menubar.tsx
index 1a2c09b2d..6cb4f0bad 100644
--- a/src/Menu/Menubar.tsx
+++ b/src/internals/Menu/Menubar.tsx
@@ -2,10 +2,10 @@
import React, { useCallback, useRef } from 'react';
import isNil from 'lodash/isNil';
import MenuContext, { MenuActionTypes, MoveFocusTo } from './MenuContext';
-import { KEY_VALUES, useCustom } from '../utils';
-import { isFocusEntering, isFocusLeaving } from '../utils/events';
+import { KEY_VALUES, useCustom } from '../../utils';
+import { isFocusEntering, isFocusLeaving } from '../../utils/events';
import useMenu from './useMenu';
-import { isFocusableElement } from '../utils/dom';
+import { isFocusableElement } from '../../utils/dom';
export interface MenubarProps {
/** Whether menubar is arranged in vertical form, defaults to false */
diff --git a/src/Menu/index.tsx b/src/internals/Menu/index.tsx
similarity index 100%
rename from src/Menu/index.tsx
rename to src/internals/Menu/index.tsx
diff --git a/src/Menu/test/MenuItemSpec.tsx b/src/internals/Menu/test/MenuItemSpec.tsx
similarity index 100%
rename from src/Menu/test/MenuItemSpec.tsx
rename to src/internals/Menu/test/MenuItemSpec.tsx
diff --git a/src/Menu/test/MenuSpec.tsx b/src/internals/Menu/test/MenuSpec.tsx
similarity index 100%
rename from src/Menu/test/MenuSpec.tsx
rename to src/internals/Menu/test/MenuSpec.tsx
diff --git a/src/Menu/useMenu.ts b/src/internals/Menu/useMenu.ts
similarity index 100%
rename from src/Menu/useMenu.ts
rename to src/internals/Menu/useMenu.ts
diff --git a/src/Overlay/Modal.tsx b/src/internals/Overlay/Modal.tsx
similarity index 98%
rename from src/Overlay/Modal.tsx
rename to src/internals/Overlay/Modal.tsx
index 7b8cc9df1..7e20db7bc 100644
--- a/src/Overlay/Modal.tsx
+++ b/src/internals/Overlay/Modal.tsx
@@ -4,8 +4,8 @@ import classNames from 'classnames';
import contains from 'dom-lib/contains';
import on from 'dom-lib/on';
import ModalManager, { ModalInstance } from './ModalManager';
-import Fade from '../Animation/Fade';
-import { animationPropTypes } from '../Animation/utils';
+import Fade from '../../Animation/Fade';
+import { animationPropTypes } from '../../Animation/utils';
import {
mergeRefs,
usePortal,
@@ -13,8 +13,8 @@ import {
useWillUnmount,
useEventCallback,
KEY_VALUES
-} from '../utils';
-import { WithAsProps, AnimationEventProps, RsRefForwardingComponent } from '../@types/common';
+} from '../../utils';
+import { WithAsProps, AnimationEventProps, RsRefForwardingComponent } from '../../@types/common';
import OverlayContext from './OverlayContext';
export interface BaseModalProps extends WithAsProps, AnimationEventProps {
diff --git a/src/Overlay/ModalManager.ts b/src/internals/Overlay/ModalManager.ts
similarity index 100%
rename from src/Overlay/ModalManager.ts
rename to src/internals/Overlay/ModalManager.ts
diff --git a/src/Overlay/Overlay.tsx b/src/internals/Overlay/Overlay.tsx
similarity index 97%
rename from src/Overlay/Overlay.tsx
rename to src/internals/Overlay/Overlay.tsx
index 7ee2c0987..a20a944f8 100644
--- a/src/Overlay/Overlay.tsx
+++ b/src/internals/Overlay/Overlay.tsx
@@ -2,9 +2,9 @@ import React, { useState, useRef, useCallback, useContext } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Position, { PositionChildProps, PositionProps } from './Position';
-import { TypeAttributes, AnimationEventProps, CursorPosition } from '../@types/common';
-import { mergeRefs, useRootClose } from '../utils';
-import Fade from '../Animation/Fade';
+import { TypeAttributes, AnimationEventProps, CursorPosition } from '../../@types/common';
+import { mergeRefs, useRootClose } from '../../utils';
+import Fade from '../../Animation/Fade';
import OverlayContext from './OverlayContext';
export interface OverlayProps extends AnimationEventProps {
diff --git a/src/Overlay/OverlayContext.ts b/src/internals/Overlay/OverlayContext.ts
similarity index 100%
rename from src/Overlay/OverlayContext.ts
rename to src/internals/Overlay/OverlayContext.ts
diff --git a/src/Overlay/OverlayTrigger.tsx b/src/internals/Overlay/OverlayTrigger.tsx
similarity index 99%
rename from src/Overlay/OverlayTrigger.tsx
rename to src/internals/Overlay/OverlayTrigger.tsx
index ac4150f87..67b308c61 100644
--- a/src/Overlay/OverlayTrigger.tsx
+++ b/src/internals/Overlay/OverlayTrigger.tsx
@@ -11,14 +11,14 @@ import get from 'lodash/get';
import isNil from 'lodash/isNil';
import contains from 'dom-lib/contains';
import Overlay, { OverlayProps } from './Overlay';
-import { createChainedFunction, usePortal, useControlled } from '../utils';
-import isOneOf from '../utils/isOneOf';
+import { createChainedFunction, usePortal, useControlled } from '../../utils';
+import isOneOf from '../../utils/isOneOf';
import {
AnimationEventProps,
CursorPosition,
StandardProps,
TypeAttributes
-} from '../@types/common';
+} from '../../@types/common';
import { PositionChildProps, PositionInstance } from './Position';
import { isUndefined } from 'lodash';
import OverlayContext from './OverlayContext';
diff --git a/src/Overlay/Position.tsx b/src/internals/Overlay/Position.tsx
similarity index 96%
rename from src/Overlay/Position.tsx
rename to src/internals/Overlay/Position.tsx
index 5333f43c9..8e0d97912 100644
--- a/src/Overlay/Position.tsx
+++ b/src/internals/Overlay/Position.tsx
@@ -15,11 +15,11 @@ import on from 'dom-lib/on';
import addClass from 'dom-lib/addClass';
import addStyle from 'dom-lib/addStyle';
import { ResizeObserver } from '@juggle/resize-observer';
-import isElement from '../DOMHelper/isElement';
+import isElement from '../../DOMHelper/isElement';
import positionUtils, { PositionType } from './positionUtils';
-import { getDOMNode } from '../utils';
-import { CursorPosition, TypeAttributes } from '../@types/common';
-import { useUpdateEffect } from '../utils';
+import { getDOMNode } from '../../utils';
+import { CursorPosition, TypeAttributes } from '../../@types/common';
+import { useUpdateEffect } from '../../utils';
export interface PositionChildProps {
className: string;
diff --git a/src/Overlay/index.tsx b/src/internals/Overlay/index.tsx
similarity index 100%
rename from src/Overlay/index.tsx
rename to src/internals/Overlay/index.tsx
diff --git a/src/Overlay/positionUtils.ts b/src/internals/Overlay/positionUtils.ts
similarity index 99%
rename from src/Overlay/positionUtils.ts
rename to src/internals/Overlay/positionUtils.ts
index d858ac7ee..2f335306d 100644
--- a/src/Overlay/positionUtils.ts
+++ b/src/internals/Overlay/positionUtils.ts
@@ -7,7 +7,7 @@ import scrollTop from 'dom-lib/scrollTop';
import scrollLeft from 'dom-lib/scrollLeft';
import getPosition from 'dom-lib/getPosition';
-import { CursorPosition, TypeAttributes } from '../@types/common';
+import { CursorPosition, TypeAttributes } from '../../@types/common';
import getStyle from 'dom-lib/getStyle';
import nodeName from 'dom-lib/nodeName';
diff --git a/src/Overlay/test/OverlayTriggerSpec.tsx b/src/internals/Overlay/test/OverlayTriggerSpec.tsx
similarity index 99%
rename from src/Overlay/test/OverlayTriggerSpec.tsx
rename to src/internals/Overlay/test/OverlayTriggerSpec.tsx
index a6e6e9366..8f8f268a7 100644
--- a/src/Overlay/test/OverlayTriggerSpec.tsx
+++ b/src/internals/Overlay/test/OverlayTriggerSpec.tsx
@@ -3,7 +3,7 @@ import { Simulate } from 'react-dom/test-utils';
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import sinon from 'sinon';
import OverlayTrigger, { OverlayTriggerHandle } from '../OverlayTrigger';
-import Tooltip from '../../Tooltip';
+import Tooltip from '@/Tooltip';
describe('OverlayTrigger', () => {
it('Should create Whisper element', () => {
diff --git a/src/Overlay/test/positionUtilsSpec.tsx b/src/internals/Overlay/test/positionUtilsSpec.tsx
similarity index 100%
rename from src/Overlay/test/positionUtilsSpec.tsx
rename to src/internals/Overlay/test/positionUtilsSpec.tsx
diff --git a/src/Picker/ListCheckItem.tsx b/src/internals/Picker/ListCheckItem.tsx
similarity index 93%
rename from src/Picker/ListCheckItem.tsx
rename to src/internals/Picker/ListCheckItem.tsx
index e7080c433..d0ccd1d96 100644
--- a/src/Picker/ListCheckItem.tsx
+++ b/src/internals/Picker/ListCheckItem.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { useClassNames, useEventCallback } from '../utils';
-import Checkbox, { CheckboxProps } from '../Checkbox';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { useClassNames, useEventCallback } from '../../utils';
+import Checkbox, { CheckboxProps } from '../../Checkbox';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
import useCombobox from './hooks/useCombobox';
export interface ListCheckItemProps extends WithAsProps {
diff --git a/src/Picker/ListItem.tsx b/src/internals/Picker/ListItem.tsx
similarity index 92%
rename from src/Picker/ListItem.tsx
rename to src/internals/Picker/ListItem.tsx
index e8534374f..6dd22a1c3 100644
--- a/src/Picker/ListItem.tsx
+++ b/src/internals/Picker/ListItem.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { useClassNames, useEventCallback } from '../utils';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { useClassNames, useEventCallback } from '../../utils';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
import useCombobox from './hooks/useCombobox';
export interface ListItemProps
diff --git a/src/Picker/ListItemGroup.tsx b/src/internals/Picker/ListItemGroup.tsx
similarity index 90%
rename from src/Picker/ListItemGroup.tsx
rename to src/internals/Picker/ListItemGroup.tsx
index fc39906ed..aaa32ea9e 100644
--- a/src/Picker/ListItemGroup.tsx
+++ b/src/internals/Picker/ListItemGroup.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { useClassNames } from '../utils';
-import { WithAsProps } from '../@types/common';
+import { useClassNames } from '../../utils';
+import { WithAsProps } from '../../@types/common';
import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
export interface ListItemGroupProps extends WithAsProps, React.HTMLAttributes {}
diff --git a/src/Picker/Listbox.tsx b/src/internals/Picker/Listbox.tsx
similarity index 96%
rename from src/Picker/Listbox.tsx
rename to src/internals/Picker/Listbox.tsx
index ddb537d4d..ac5890f69 100644
--- a/src/Picker/Listbox.tsx
+++ b/src/internals/Picker/Listbox.tsx
@@ -16,12 +16,12 @@ import {
ListHandle,
VariableSizeList,
ListChildComponentProps
-} from '../Windowing';
-import shallowEqual from '../utils/shallowEqual';
-import { mergeRefs, useClassNames, useMount, useEventCallback } from '../utils';
+} from '../../internals/Windowing';
+import shallowEqual from '../../utils/shallowEqual';
+import { mergeRefs, useClassNames, useMount, useEventCallback } from '../../utils';
import ListItemGroup from './ListItemGroup';
-import { KEY_GROUP, KEY_GROUP_TITLE } from '../utils/getDataGroupBy';
-import { StandardProps, ItemDataType, Offset } from '../@types/common';
+import { KEY_GROUP, KEY_GROUP_TITLE } from '../../utils/getDataGroupBy';
+import { StandardProps, ItemDataType, Offset } from '../../@types/common';
import useCombobox from './hooks/useCombobox';
export interface ListboxProps
@@ -72,7 +72,7 @@ const Listbox: ListboxComponent = React.forwardRef {
diff --git a/src/Picker/hooks/usePickerClassName.ts b/src/internals/Picker/hooks/usePickerClassName.ts
similarity index 92%
rename from src/Picker/hooks/usePickerClassName.ts
rename to src/internals/Picker/hooks/usePickerClassName.ts
index d02953d45..a374f9277 100644
--- a/src/Picker/hooks/usePickerClassName.ts
+++ b/src/internals/Picker/hooks/usePickerClassName.ts
@@ -1,7 +1,7 @@
import kebabCase from 'lodash/kebabCase';
import omit from 'lodash/omit';
-import { TypeAttributes } from '../../@types/common';
-import { useClassNames, placementPolyfill } from '../../utils';
+import { TypeAttributes } from '../../../@types/common';
+import { useClassNames, placementPolyfill } from '../../../utils';
export interface PickerClassNameProps {
name?: string;
diff --git a/src/Picker/hooks/usePickerRef.ts b/src/internals/Picker/hooks/usePickerRef.ts
similarity index 94%
rename from src/Picker/hooks/usePickerRef.ts
rename to src/internals/Picker/hooks/usePickerRef.ts
index 737ad1cda..91f2f040d 100644
--- a/src/Picker/hooks/usePickerRef.ts
+++ b/src/internals/Picker/hooks/usePickerRef.ts
@@ -1,7 +1,7 @@
import { useImperativeHandle, useRef } from 'react';
-import useEventCallback from '../../utils/useEventCallback';
+import useEventCallback from '../../../utils/useEventCallback';
import type { OverlayTriggerHandle } from '../PickerToggleTrigger';
-import type { ListHandle } from '../../Windowing';
+import type { ListHandle } from '../../../internals/Windowing';
export interface PickerDependentParameters {
inline?: boolean;
diff --git a/src/Picker/hooks/useSearch.ts b/src/internals/Picker/hooks/useSearch.ts
similarity index 100%
rename from src/Picker/hooks/useSearch.ts
rename to src/internals/Picker/hooks/useSearch.ts
diff --git a/src/Picker/hooks/useToggleKeyDownEvent.ts b/src/internals/Picker/hooks/useToggleKeyDownEvent.ts
similarity index 97%
rename from src/Picker/hooks/useToggleKeyDownEvent.ts
rename to src/internals/Picker/hooks/useToggleKeyDownEvent.ts
index a64031ceb..a7429a294 100644
--- a/src/Picker/hooks/useToggleKeyDownEvent.ts
+++ b/src/internals/Picker/hooks/useToggleKeyDownEvent.ts
@@ -1,4 +1,4 @@
-import { useEventCallback, KEY_VALUES } from '../../utils';
+import { useEventCallback, KEY_VALUES } from '../../../utils';
interface ToggleKeyDownEventProps {
toggle?: boolean;
diff --git a/src/Picker/index.ts b/src/internals/Picker/index.ts
similarity index 95%
rename from src/Picker/index.ts
rename to src/internals/Picker/index.ts
index d5775ac86..85a440ebd 100644
--- a/src/Picker/index.ts
+++ b/src/internals/Picker/index.ts
@@ -19,7 +19,6 @@ export { default as PickerToggle } from './PickerToggle';
export { default as PickerLabel } from './PickerLabel';
export { default as PickerIndicator } from './PickerIndicator';
export { default as PickerToggleTrigger } from './PickerToggleTrigger';
-export { default as SearchBar } from './SearchBar';
export { default as SelectedElement } from './SelectedElement';
export { pickTriggerPropKeys, omitTriggerPropKeys };
diff --git a/src/Picker/propTypes.ts b/src/internals/Picker/propTypes.ts
similarity index 92%
rename from src/Picker/propTypes.ts
rename to src/internals/Picker/propTypes.ts
index c8bbd5ac0..2c7e79686 100644
--- a/src/Picker/propTypes.ts
+++ b/src/internals/Picker/propTypes.ts
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import { PLACEMENT } from '../utils';
-import { animationPropTypes } from '../Animation/utils';
+import { PLACEMENT } from '../../utils';
+import { animationPropTypes } from '../../Animation/utils';
export const pickerPropTypes = {
...animationPropTypes,
diff --git a/src/Picker/styles/index.less b/src/internals/Picker/styles/index.less
similarity index 86%
rename from src/Picker/styles/index.less
rename to src/internals/Picker/styles/index.less
index 43f0cfc88..ee8f51e40 100644
--- a/src/Picker/styles/index.less
+++ b/src/internals/Picker/styles/index.less
@@ -1,9 +1,9 @@
-@import '../../styles/common.less';
-@import '../../styles/mixins/listbox.less';
-@import '../../styles/mixins/combobox.less';
-@import (reference) '../../Button/styles/index.less';
-@import '../../Form/styles/mixin.less';
-@import 'mixin.less';
+@import '../../../styles/common.less';
+@import '../../../styles/mixins/listbox.less';
+@import '../../../styles/mixins/combobox.less';
+@import (reference) '../../../Button/styles/index.less';
+@import '../../../Form/styles/mixin.less';
+@import './mixin.less';
//
// Pickers
@@ -145,7 +145,6 @@
}
}
-.rs-btn,
.rs-picker-toggle {
.rs-picker-default & {
transition: @picker-transition;
@@ -299,6 +298,7 @@
transition: none;
display: flex;
flex-direction: column;
+ padding: @border-radius 0;
.high-contrast-mode({
border: 1px solid var(--rs-border-primary);
@@ -314,44 +314,15 @@
z-index: (@zindex-drawer + @zindex-picker-toggle);
}
- // Select picker menu & Check select picker menu always has 6px gap
- &.rs-picker-select-menu,
- &.rs-picker-check-menu {
- padding-top: @border-radius;
- }
-
- // Searchbar
- .rs-picker-search-bar {
- position: relative;
- padding: (@picker-menu-padding - @border-radius) @picker-menu-padding @picker-menu-padding;
-
- .rs-picker-search-bar-input {
- .default-input();
-
- min-width: @picker-content-min-width;
- padding-right: @picker-search-bar-icon-width + (@input-padding-x - @input-border-width) * 2;
- }
-
- .rs-picker-search-bar-search-icon {
- position: absolute;
- width: @picker-search-bar-icon-width;
- color: var(--rs-text-secondary);
- font-size: @font-size-base;
- height: @line-height-computed;
- top: (@picker-menu-padding - @border-radius + @input-padding-y);
- right: (@picker-menu-padding + @input-padding-x);
-
- .rs-@{tree-picker-prefix}-menu&,
- .rs-@{check-tree-picker-prefix}-menu& {
- top: (@input-padding-y - @input-border-width);
- }
- }
- }
-
&.rs-picker-inline {
position: relative;
box-shadow: none;
}
+
+ .rs-search-box {
+ padding: (@picker-menu-padding - @border-radius) @picker-menu-padding
+ (@picker-menu-padding - @border-radius);
+ }
}
// Make sure styles the same with
diff --git a/src/Picker/styles/mixin.less b/src/internals/Picker/styles/mixin.less
similarity index 97%
rename from src/Picker/styles/mixin.less
rename to src/internals/Picker/styles/mixin.less
index ca383ff74..9f141935b 100644
--- a/src/Picker/styles/mixin.less
+++ b/src/internals/Picker/styles/mixin.less
@@ -1,11 +1,9 @@
-@import '../../styles/variables';
-@import '../../styles/mixins/color-modes';
-@import '../../Dropdown/styles/mixin';
+@import '../../../styles/variables.less';
+@import '../../../styles/mixins/color-modes.less';
+@import '../../../Dropdown/styles/mixin.less';
// Picker Menu items common styles
.picker-menu-items-reset() {
- // Set aside border-radius borders
- margin-bottom: @border-radius;
overflow-y: auto;
ul {
diff --git a/src/Picker/test/ListCheckItemSpec.tsx b/src/internals/Picker/test/ListCheckItemSpec.tsx
similarity index 100%
rename from src/Picker/test/ListCheckItemSpec.tsx
rename to src/internals/Picker/test/ListCheckItemSpec.tsx
diff --git a/src/Picker/test/ListItemGroupSpec.tsx b/src/internals/Picker/test/ListItemGroupSpec.tsx
similarity index 100%
rename from src/Picker/test/ListItemGroupSpec.tsx
rename to src/internals/Picker/test/ListItemGroupSpec.tsx
diff --git a/src/Picker/test/ListItemSpec.tsx b/src/internals/Picker/test/ListItemSpec.tsx
similarity index 100%
rename from src/Picker/test/ListItemSpec.tsx
rename to src/internals/Picker/test/ListItemSpec.tsx
diff --git a/src/Picker/test/ListboxSpec.tsx b/src/internals/Picker/test/ListboxSpec.tsx
similarity index 98%
rename from src/Picker/test/ListboxSpec.tsx
rename to src/internals/Picker/test/ListboxSpec.tsx
index 278c989f1..c4a0acbaf 100644
--- a/src/Picker/test/ListboxSpec.tsx
+++ b/src/internals/Picker/test/ListboxSpec.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
import { testStandardProps } from '@test/utils';
import Listbox from '../Listbox';
import ListItem from '../ListItem';
-import { getDataGroupBy } from '../../utils/getDataGroupBy';
+import { getDataGroupBy } from '../../../utils/getDataGroupBy';
import Sinon from 'sinon';
const classPrefix = 'dropdown-menu';
diff --git a/src/Picker/test/PickerPopupSpec.tsx b/src/internals/Picker/test/PickerPopupSpec.tsx
similarity index 98%
rename from src/Picker/test/PickerPopupSpec.tsx
rename to src/internals/Picker/test/PickerPopupSpec.tsx
index a337a8897..8bf449f1d 100644
--- a/src/Picker/test/PickerPopupSpec.tsx
+++ b/src/internals/Picker/test/PickerPopupSpec.tsx
@@ -4,7 +4,7 @@ import getWidth from 'dom-lib/getWidth';
import { render, screen } from '@testing-library/react';
import sinon from 'sinon';
import { testStandardProps } from '@test/utils';
-import * as utils from '../../utils';
+import * as utils from '../../../utils';
import useElementResize from '@test/stubs/useElementResize';
import { OverlayTriggerHandle } from '../PickerToggleTrigger';
diff --git a/src/Picker/test/PickerToggleSpec.tsx b/src/internals/Picker/test/PickerToggleSpec.tsx
similarity index 100%
rename from src/Picker/test/PickerToggleSpec.tsx
rename to src/internals/Picker/test/PickerToggleSpec.tsx
diff --git a/src/Picker/test/useSearchSpec.ts b/src/internals/Picker/test/useSearchSpec.ts
similarity index 100%
rename from src/Picker/test/useSearchSpec.ts
rename to src/internals/Picker/test/useSearchSpec.ts
diff --git a/src/Picker/types.ts b/src/internals/Picker/types.ts
similarity index 72%
rename from src/Picker/types.ts
rename to src/internals/Picker/types.ts
index 701e2226a..117058c0b 100644
--- a/src/Picker/types.ts
+++ b/src/internals/Picker/types.ts
@@ -1,5 +1,5 @@
-import { RsRefForwardingComponent } from '../@types/common';
-import type { ListHandle } from '../Windowing';
+import { RsRefForwardingComponent } from '../../@types/common';
+import type { ListHandle } from '../../internals/Windowing';
export interface PickerHandle {
root: HTMLElement | null;
diff --git a/src/Picker/utils.ts b/src/internals/Picker/utils.ts
similarity index 95%
rename from src/Picker/utils.ts
rename to src/internals/Picker/utils.ts
index b6f5bed1c..b979bc8ab 100644
--- a/src/Picker/utils.ts
+++ b/src/internals/Picker/utils.ts
@@ -1,7 +1,7 @@
import React from 'react';
import trim from 'lodash/trim';
-import { findNodeOfTree } from '../utils/treeUtils';
-import { KEY_VALUES, reactToString } from '../utils';
+import { findNodeOfTree } from '../../utils/treeUtils';
+import { KEY_VALUES, reactToString } from '../../utils';
export interface NodeKeys {
valueKey: string;
diff --git a/src/Plaintext/Plaintext.tsx b/src/internals/Plaintext/Plaintext.tsx
similarity index 90%
rename from src/Plaintext/Plaintext.tsx
rename to src/internals/Plaintext/Plaintext.tsx
index 8a800fe91..091cf02b9 100644
--- a/src/Plaintext/Plaintext.tsx
+++ b/src/internals/Plaintext/Plaintext.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { WithAsProps } from '../@types/common';
-import { useClassNames, useCustom } from '../utils';
+import { WithAsProps } from '../../@types/common';
+import { useClassNames, useCustom } from '../../utils';
type LocaleKey = 'unfilled' | 'notSelected' | 'notUploaded';
diff --git a/src/Plaintext/index.tsx b/src/internals/Plaintext/index.tsx
similarity index 100%
rename from src/Plaintext/index.tsx
rename to src/internals/Plaintext/index.tsx
diff --git a/src/Plaintext/test/PlaintextSpec.tsx b/src/internals/Plaintext/test/PlaintextSpec.tsx
similarity index 100%
rename from src/Plaintext/test/PlaintextSpec.tsx
rename to src/internals/Plaintext/test/PlaintextSpec.tsx
diff --git a/src/Ripple/Ripple.tsx b/src/internals/Ripple/Ripple.tsx
similarity index 94%
rename from src/Ripple/Ripple.tsx
rename to src/internals/Ripple/Ripple.tsx
index 231dd65b6..41febe464 100644
--- a/src/Ripple/Ripple.tsx
+++ b/src/internals/Ripple/Ripple.tsx
@@ -2,9 +2,9 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import getOffset from 'dom-lib/getOffset';
import on from 'dom-lib/on';
-import Transition from '../Animation/Transition';
-import { mergeRefs, useClassNames, useCustom } from '../utils';
-import { Offset, WithAsProps } from '../@types/common';
+import Transition from '../../Animation/Transition';
+import { mergeRefs, useClassNames, useCustom } from '../../utils';
+import { Offset, WithAsProps } from '../../@types/common';
export interface RippleProps extends WithAsProps {
onMouseDown?: (position: any, event: React.MouseEvent) => void;
diff --git a/src/Ripple/index.tsx b/src/internals/Ripple/index.tsx
similarity index 100%
rename from src/Ripple/index.tsx
rename to src/internals/Ripple/index.tsx
diff --git a/src/Ripple/styles/index.less b/src/internals/Ripple/styles/index.less
similarity index 94%
rename from src/Ripple/styles/index.less
rename to src/internals/Ripple/styles/index.less
index c005cf45c..0b990ec9a 100644
--- a/src/Ripple/styles/index.less
+++ b/src/internals/Ripple/styles/index.less
@@ -1,4 +1,4 @@
-@import '../../styles/common';
+@import '../../../styles/common';
.rs-ripple {
position: absolute;
diff --git a/src/Ripple/styles/mixins.less b/src/internals/Ripple/styles/mixins.less
similarity index 100%
rename from src/Ripple/styles/mixins.less
rename to src/internals/Ripple/styles/mixins.less
diff --git a/src/Ripple/test/RippleSpec.tsx b/src/internals/Ripple/test/RippleSpec.tsx
similarity index 100%
rename from src/Ripple/test/RippleSpec.tsx
rename to src/internals/Ripple/test/RippleSpec.tsx
diff --git a/src/internals/SearchBox/SearchBox.tsx b/src/internals/SearchBox/SearchBox.tsx
new file mode 100644
index 000000000..f6994fbde
--- /dev/null
+++ b/src/internals/SearchBox/SearchBox.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import Search from '@rsuite/icons/legacy/Search';
+import Input from '../../Input';
+import InputGroup from '../..//InputGroup';
+
+import { useClassNames } from '../../utils';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
+
+export interface SearchBoxProps extends WithAsProps {
+ value?: string;
+ placeholder?: string;
+ className?: string;
+ inputRef?: React.Ref;
+ onChange?: (value: string, event: React.ChangeEvent) => void;
+}
+
+const SearchBox: RsRefForwardingComponent<'div', SearchBoxProps> = React.forwardRef(
+ (props: SearchBoxProps, ref) => {
+ const {
+ as: Component = 'div',
+ classPrefix = 'search-box',
+ value,
+ className,
+ placeholder,
+ inputRef,
+ onChange,
+ ...rest
+ } = props;
+ const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
+ const classes = merge(className, withClassPrefix());
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ }
+);
+
+SearchBox.displayName = 'SearchBox';
+
+export default SearchBox;
diff --git a/src/internals/SearchBox/index.tsx b/src/internals/SearchBox/index.tsx
new file mode 100644
index 000000000..f3a0944cc
--- /dev/null
+++ b/src/internals/SearchBox/index.tsx
@@ -0,0 +1,3 @@
+import SearchBox from './SearchBox';
+
+export default SearchBox;
diff --git a/src/internals/SearchBox/styles/index.less b/src/internals/SearchBox/styles/index.less
new file mode 100644
index 000000000..af573baed
--- /dev/null
+++ b/src/internals/SearchBox/styles/index.less
@@ -0,0 +1,9 @@
+@import '../../../styles/common.less';
+
+.rs-search-box {
+ position: relative;
+
+ &-icon {
+ color: var(--rs-text-secondary);
+ }
+}
diff --git a/src/internals/SearchBox/test/SearchBoxSpec.tsx b/src/internals/SearchBox/test/SearchBoxSpec.tsx
new file mode 100644
index 000000000..eb1e4a2d9
--- /dev/null
+++ b/src/internals/SearchBox/test/SearchBoxSpec.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import SearchBox from '../SearchBox';
+import { testStandardProps } from '@test/utils';
+import Sinon from 'sinon';
+
+describe('SearchBox', () => {
+ testStandardProps();
+
+ it('Should output a input', () => {
+ render();
+ expect(screen.getByRole('searchbox')).to.be.exist;
+ });
+
+ it('Should call `onChange` callback', () => {
+ const onChange = Sinon.spy();
+ render();
+ fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'a' } });
+
+ expect(onChange).to.have.been.calledOnce;
+ });
+});
diff --git a/src/Windowing/AutoSizer.tsx b/src/internals/Windowing/AutoSizer.tsx
similarity index 98%
rename from src/Windowing/AutoSizer.tsx
rename to src/internals/Windowing/AutoSizer.tsx
index 6e6b32c99..5eea77273 100644
--- a/src/Windowing/AutoSizer.tsx
+++ b/src/internals/Windowing/AutoSizer.tsx
@@ -1,7 +1,7 @@
import React, { useState, useRef } from 'react';
import { useCallback } from 'react';
import getStyle from 'dom-lib/getStyle';
-import { mergeRefs, useElementResize, useMount } from '../utils';
+import { mergeRefs, useElementResize, useMount } from '../../utils';
export interface Size {
height: number;
diff --git a/src/Windowing/List.tsx b/src/internals/Windowing/List.tsx
similarity index 96%
rename from src/Windowing/List.tsx
rename to src/internals/Windowing/List.tsx
index 680763821..f299cbb0e 100644
--- a/src/Windowing/List.tsx
+++ b/src/internals/Windowing/List.tsx
@@ -6,8 +6,8 @@ import {
ListOnScrollProps,
ListOnItemsRenderedProps
} from 'react-window';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-import { useCustom } from '../utils';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
+import { useCustom } from '../../utils';
export interface ListProps extends WithAsProps {
/**
diff --git a/src/Windowing/README.md b/src/internals/Windowing/README.md
similarity index 91%
rename from src/Windowing/README.md
rename to src/internals/Windowing/README.md
index 952824076..c16528e2b 100644
--- a/src/Windowing/README.md
+++ b/src/internals/Windowing/README.md
@@ -1,4 +1,4 @@
-# rsuite/Windowing
+# rsuite/internals/Windowing
The "windowing" technology used by components such as Pickers in rsuite, most of the code comes from `react-window`.
diff --git a/src/Windowing/index.ts b/src/internals/Windowing/index.ts
similarity index 100%
rename from src/Windowing/index.ts
rename to src/internals/Windowing/index.ts
diff --git a/src/Windowing/test/AutoSizerSpec.tsx b/src/internals/Windowing/test/AutoSizerSpec.tsx
similarity index 100%
rename from src/Windowing/test/AutoSizerSpec.tsx
rename to src/internals/Windowing/test/AutoSizerSpec.tsx
diff --git a/src/Windowing/test/ListSpec.tsx b/src/internals/Windowing/test/ListSpec.tsx
similarity index 100%
rename from src/Windowing/test/ListSpec.tsx
rename to src/internals/Windowing/test/ListSpec.tsx
diff --git a/src/internals/index.tsx b/src/internals/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/styles/index.less b/src/styles/index.less
index d7ece603f..f36f62202 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -50,14 +50,12 @@
@import '../Pagination/styles/index';
@import '../Panel/styles/index';
@import '../PanelGroup/styles/index';
-@import '../Picker/styles/index';
@import '../Placeholder/styles/index';
@import '../Popover/styles/index';
@import '../Progress/styles/index';
@import '../Radio/styles/index';
@import '../RadioGroup/styles/index';
@import '../RadioTile/styles/index';
-@import '../Ripple/styles/index';
@import '../Row/styles/index';
@import '../SelectPicker/styles/index';
@import '../Sidebar/styles/index';
@@ -75,5 +73,10 @@
@import '../Uploader/styles/index';
@import '../Rate/styles/index';
@import '../toaster/styles/index';
-@import '../CloseButton/styles/index';
@import '../Stack/styles/index';
+
+// Internal Components
+@import '../internals/Ripple/styles/index';
+@import '../internals/CloseButton/styles/index';
+@import '../internals/Picker/styles/index';
+@import '../internals/SearchBox/styles/index';
diff --git a/src/styles/variables.less b/src/styles/variables.less
index baa88847e..95b643506 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -713,7 +713,6 @@
// Picker content width
@picker-content-min-width: 200px;
-@picker-search-bar-icon-width: @font-size-base;
@picker-default-toggle-border-width: 1px;
@picker-toggle-clean-width: 12px;
@picker-toggle-clean-right: 30px;
diff --git a/src/utils/treeUtils.ts b/src/utils/treeUtils.ts
index a567f1486..e44eaa8b3 100644
--- a/src/utils/treeUtils.ts
+++ b/src/utils/treeUtils.ts
@@ -5,9 +5,9 @@ import { TreeNodeType, TreeNodesType, getNodeCheckState } from '../CheckTreePick
import { TREE_NODE_DROP_POSITION, shallowEqual } from '../utils';
import { CheckTreePickerProps } from '../CheckTreePicker/CheckTreePicker';
import { TreePickerProps } from '../TreePicker/TreePicker';
-import { shouldDisplay } from '../Picker';
+import { shouldDisplay } from '../internals/Picker';
import reactToString from './reactToString';
-import { ListHandle } from '../Windowing';
+import { ListHandle } from '../internals/Windowing';
import { TREE_NODE_PADDING, TREE_NODE_ROOT_PADDING } from './constants';
import { attachParent } from './attachParent';
diff --git a/test/validateBuilds.js b/test/validateBuilds.js
index d2512fc80..a2e29ae6f 100644
--- a/test/validateBuilds.js
+++ b/test/validateBuilds.js
@@ -15,13 +15,10 @@ const unstyledComponents = [
'DOMHelper',
'Whisper',
'SafeAnchor',
- 'Menu',
'Affix',
'RangeSlider',
'utils',
- 'Plaintext',
- 'Disclosure',
- 'Overlay',
+ 'internals',
'CustomProvider',
'locales',
'CheckTree',
@@ -30,8 +27,7 @@ const unstyledComponents = [
'TagGroup',
'MaskedInput',
'DateInput',
- 'DateRangeInput',
- 'Windowing'
+ 'DateRangeInput'
];
const styledComponents = components.filter(
diff --git a/tsconfig.json b/tsconfig.json
index b511fdee1..f99c67233 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
- "@test/*": ["./test/*"]
+ "@test/*": ["./test/*"],
+ "@/*": ["./src/*"]
}
},
"include": ["./src/**/*.ts", "./src/**/*.tsx"]
diff --git a/webpack.karma.js b/webpack.karma.js
index 133c11ce1..6c2c9fa06 100644
--- a/webpack.karma.js
+++ b/webpack.karma.js
@@ -13,7 +13,8 @@ module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js'],
alias: {
- '@test': path.resolve(__dirname, './test')
+ '@test': path.resolve(__dirname, './test'),
+ '@': path.resolve(__dirname, './src')
},
/**
* Polyfill Node.js util module which is used by sinon