diff --git a/src/components/Dropdown/Menu/Menu.module.css b/src/components/Dropdown/Menu/Menu.module.css index 1edee9e9..88d9cbbf 100644 --- a/src/components/Dropdown/Menu/Menu.module.css +++ b/src/components/Dropdown/Menu/Menu.module.css @@ -11,6 +11,7 @@ transition: opacity 200ms var(--rvr-easeInOutQuad); opacity: 0; display: block; + overflow-y: auto; } .entering { diff --git a/src/components/Dropdown/story.tsx b/src/components/Dropdown/story.tsx index cf4a745d..e384d78b 100644 --- a/src/components/Dropdown/story.tsx +++ b/src/components/Dropdown/story.tsx @@ -51,12 +51,15 @@ storiesOf('Star Systems/Dropdown', module) 'Overview', () => ( {text('children', 'Dropdown children')} + + {text('Dropdown.Menu children', 'Dropdown menu children')} + ), { @@ -104,6 +107,29 @@ storiesOf('Star Systems/Dropdown', module) className="inline" /> +
+ ( +
+ Item {i + 1} +
+ )), + /* eslint-enable @typescript-eslint/no-explicit-any, react/no-array-index-key */ + style: { + maxHeight: '100px', + }, + }} + /> +
= ({ className = '', disabled, + fauxDisabled, formatTime, forwardedRef, fuzzyInputProps = {}, @@ -206,6 +207,7 @@ const AsString: React.FC = ({ = ({ />
= ({ /> {showDropdown && ( = ({ disabled, formatTime, max, + menuProps, min, onSelectMenuItem, + passedProps, showDropdown, step: customStep, stepFrom, toggleAriaLabel = 'Toggle time dropdown', + toggleProps, value, }) => { const menuItems = useMemo(() => { @@ -135,21 +138,29 @@ const Dropdown: React.FC = ({ return ( {}} - toggleProps={{ - disabled, - }} - defaultIsOpen={false} menuItems={menuItems} - menuProps={{ position: 'bottomLeft' }} + menuProps={{ + className: styles.menu, + position: 'bottomLeft', + ...menuProps, + }} + onToggle={() => {}} + toggleProps={toggleProps} + {...passedProps} >