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