diff --git a/package.json b/package.json index a5b85620..6920d555 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.4.6", + "version": "0.4.7", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx index 520b0ddf..c9600c41 100644 --- a/src/dropdown/DropdownButton.tsx +++ b/src/dropdown/DropdownButton.tsx @@ -20,6 +20,7 @@ export interface DropdownButtonProps extends AddonableProps { isQuiet?: boolean; /** Whether the button is disabled. */ isDisabled?: boolean; + isActive?: boolean; /** The content to display in the button. */ children?: ReactNode; style?: CSSProperties; @@ -90,6 +91,7 @@ function DropdownButton( const { isQuiet = false, isDisabled, + isActive, children, style, addonBefore, @@ -103,7 +105,7 @@ function DropdownButton( {...mergeProps(buttonProps, hoverProps, otherProps)} ref={domRef} className={classNames('ac-dropdown-button', { - 'is-active': isPressed, + 'is-active': isActive || isPressed, 'is-disabled': isDisabled, 'is-hovered': isHovered, })} diff --git a/src/dropdown/DropdownMenu.tsx b/src/dropdown/DropdownMenu.tsx index 60f10c1d..873d20aa 100644 --- a/src/dropdown/DropdownMenu.tsx +++ b/src/dropdown/DropdownMenu.tsx @@ -26,7 +26,7 @@ export function DropdownMenu({ padding: ${isPadded ? theme.spacing.padding8 : 0}px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); border: 1px solid ${theme.components.dropdown.borderColor}; - overflow: hidden; + max-height: inherit; `} style={style} > diff --git a/src/listbox/ListBoxBase.tsx b/src/listbox/ListBoxBase.tsx index c76172e4..5e2ae54d 100644 --- a/src/listbox/ListBoxBase.tsx +++ b/src/listbox/ListBoxBase.tsx @@ -139,7 +139,7 @@ function ListBoxBase( focusedKey={state.selectionManager.focusedKey} sizeToFit="height" scrollDirection="vertical" - className="ac-Menu" + className="ac-menu" layout={layout} collection={state.collection} // @ts-ignore assume there is a header diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index ef6e3ba5..caf6c3fc 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -101,6 +101,8 @@ function Picker( // @ts-ignore layout={layout} state={state} + // Set max height: inherit so dropdown menu scrolling works + style={{ maxHeight: 'inherit' }} isLoading={isLoadingMore} onLoadMore={props.onLoadMore} /> diff --git a/stories/Picker.stories.tsx b/stories/Picker.stories.tsx index 86817d2a..0b2db7df 100644 --- a/stories/Picker.stories.tsx +++ b/stories/Picker.stories.tsx @@ -211,3 +211,33 @@ const ItemsViaProps: Story> = args => { // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test // https://storybook.js.org/docs/react/workflows/unit-testing export const itemsViaProps = ItemsViaProps.bind({}); + +let longList = []; + +for (var i = 0; i < 100; i++) { + longList.push({ id: i, name: `Item ${i}` }); +} + +const Long: Story> = args => { + const [frequency, setFrequency] = React.useState('rarely'); + return ( + + setFrequency(selected as string)} + items={longList} + isOpen + > + {item => {item.name}} + +
+ Selected Value: {frequency} +
+ ); +}; + +// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test +// https://storybook.js.org/docs/react/workflows/unit-testing +export const long = Long.bind({});