未验证 提交 41b107fd 编写于 作者: J Jason Quense 提交者: GitHub

chore: bump react-overlays to v5 (#5685)

* chore: bump react-overlays to v5

* fix tests

* Update src/DropdownMenu.tsx
上级 b123f57d
......@@ -145,7 +145,11 @@ const Dropdown: Dropdown = (React.forwardRef((pProps: DropdownProps, ref) => {
const handleToggle = useEventCallback(
(nextShow, event, source = event.type) => {
if (event.currentTarget === document) source = 'rootClose';
if (
event.currentTarget === document &&
(source !== 'keydown' || event.key === 'Escape')
)
source = 'rootClose';
if (onToggle) {
onToggle(nextShow, event, { source });
}
......@@ -168,21 +172,18 @@ const Dropdown: Dropdown = (React.forwardRef((pProps: DropdownProps, ref) => {
focusFirstItemOnShow={focusFirstItemOnShow}
itemSelector={`.${prefix}-item:not(.disabled):not(:disabled)`}
>
{({ props: dropdownProps }) => (
<Component
{...props}
{...dropdownProps}
ref={ref}
className={classNames(
className,
show && 'show',
(!drop || drop === 'down') && prefix,
drop === 'up' && 'dropup',
drop === 'right' && 'dropright',
drop === 'left' && 'dropleft',
)}
/>
)}
<Component
{...props}
ref={ref}
className={classNames(
className,
show && 'show',
(!drop || drop === 'down') && prefix,
drop === 'up' && 'dropup',
drop === 'right' && 'dropright',
drop === 'left' && 'dropleft',
)}
/>
</BaseDropdown>
</SelectableContext.Provider>
);
......
......@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import {
useDropdownMenu,
UseDropdownMenuValue,
UseDropdownMenuOptions,
} from 'react-overlays/DropdownMenu';
import useMergedRefs from '@restart/hooks/useMergedRefs';
......@@ -116,8 +115,6 @@ const defaultProps: Partial<DropdownMenuProps> = {
flip: true,
};
// TODO: remove this hack
type UseDropdownMenuValueHack = UseDropdownMenuValue & { placement: any };
const DropdownMenu: DropdownMenu = React.forwardRef(
(
......@@ -168,14 +165,10 @@ const DropdownMenu: DropdownMenu = React.forwardRef(
}
}
const {
hasShown,
placement,
show,
alignEnd,
close,
props: menuProps,
} = useDropdownMenu({
const [
menuProps,
{ hasShown, popper, show, alignEnd, toggle },
] = useDropdownMenu({
flip,
rootCloseEvent,
show: showProps,
......@@ -185,7 +178,7 @@ const DropdownMenu: DropdownMenu = React.forwardRef(
...popperConfig,
modifiers: marginModifiers.concat(popperConfig?.modifiers || []),
},
}) as UseDropdownMenuValueHack;
});
menuProps.ref = useMergedRefs(
popperRef,
......@@ -200,16 +193,16 @@ const DropdownMenu: DropdownMenu = React.forwardRef(
// For custom components provide additional, non-DOM, props;
if (typeof Component !== 'string') {
(menuProps as any).show = show;
(menuProps as any).close = close;
(menuProps as any).close = () => toggle?.(false);
(menuProps as any).alignRight = alignEnd;
}
let style = (props as any).style;
if (placement) {
if (popper?.placement) {
// we don't need the default popper style,
// menus are display: none when not shown.
style = { ...(props as any).style, ...menuProps.style };
props['x-placement'] = placement;
props['x-placement'] = popper.placement;
}
return (
......
......@@ -72,7 +72,7 @@ const DropdownToggle: DropdownToggle = React.forwardRef(
(props as any).bsPrefix = childBsPrefix;
}
const [toggleProps, { toggle }] = useDropdownToggle();
const [toggleProps] = useDropdownToggle();
toggleProps.ref = useMergedRefs(
toggleProps.ref,
......@@ -83,7 +83,6 @@ const DropdownToggle: DropdownToggle = React.forwardRef(
// underlying component, to allow it to render size and style variants.
return (
<Component
onClick={toggle}
className={classNames(className, prefix, split && `${prefix}-split`)}
{...toggleProps}
{...props}
......
import { mount } from 'enzyme';
import React from 'react';
import ReactDOM from 'react-dom';
import simulant from 'simulant';
import Dropdown from '../src/Dropdown';
describe('<Dropdown>', () => {
......@@ -247,14 +248,17 @@ describe('<Dropdown>', () => {
const spy = sinon.spy();
const wrapper = mount(
<Dropdown onToggle={spy}>{dropdownChildren}</Dropdown>,
{ attachTo: focusableContainer },
);
wrapper.find('button').simulate('keyDown', { key: 'ArrowDown' });
simulant.fire(wrapper.find('button').getDOMNode(), 'keydown', {
key: 'ArrowDown',
});
expect(spy).to.have.been.calledOnce;
expect(spy.getCall(0).args.length).to.equal(3);
expect(spy.getCall(0).args[0]).to.equal(true);
expect(spy.getCall(0).args[1]).to.be.an('object');
expect(spy.getCall(0).args[1]).to.be.an('event');
assert.deepEqual(spy.getCall(0).args[2], { source: 'keydown' });
});
});
......
......@@ -7666,10 +7666,10 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-overlays@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-4.1.1.tgz#0060107cbe1c5171a744ccda3fbf0556d064bc5f"
integrity sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==
react-overlays@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.0.0.tgz#b50351de194dda0706b40f9632d261c9f0011c4c"
integrity sha512-TKbqfAv23TFtCJ2lzISdx76p97G/DP8Rp4TOFdqM9n8GTruVYgE3jX7Zgb8+w7YJ18slTVcDTQ1/tFzdCqjVhA==
dependencies:
"@babel/runtime" "^7.12.1"
"@popperjs/core" "^2.5.3"
......@@ -8275,6 +8275,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
simulant@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/simulant/-/simulant-0.2.2.tgz#f1bce52712b6a7a0da38ddfdda7e83b20b1da01e"
integrity sha1-8bzlJxK2p6DaON392n6DsgsdoB4=
sinon-chai@^3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-3.5.0.tgz#c9a78304b0e15befe57ef68e8a85a00553f5c60e"
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册