From f4588a817307b93dd33db5bb58cb094c71ed5ad8 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Fri, 11 Aug 2023 09:35:02 +0200 Subject: [PATCH 1/4] fix(Menu): allow scrolling inside --- src/components/pickers/Menu/styled.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/pickers/Menu/styled.tsx b/src/components/pickers/Menu/styled.tsx index 2dbaee63..5408c1a1 100644 --- a/src/components/pickers/Menu/styled.tsx +++ b/src/components/pickers/Menu/styled.tsx @@ -19,7 +19,7 @@ export const StyledMenu = tasty({ sections: '0', // has sections inside }, overflow: { - '': 'hidden', + '': 'auto', section: '', }, border: { @@ -33,6 +33,7 @@ export const StyledMenu = tasty({ '': '', popover: '0px 5px 15px #dark.05', }, + styledScrollbar: true, }, }); From 9bffbe5416c6419c948a89808e622619d19e4e28 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Fri, 11 Aug 2023 10:11:19 +0200 Subject: [PATCH 2/4] fix(DialogTrigger): specify type --- .../overlays/Dialog/DialogTrigger.tsx | 20 +++++++++++++++---- src/components/overlays/Modal/Modal.tsx | 6 +++--- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/overlays/Dialog/DialogTrigger.tsx b/src/components/overlays/Dialog/DialogTrigger.tsx index 29d738ba..c4cb4b7c 100644 --- a/src/components/overlays/Dialog/DialogTrigger.tsx +++ b/src/components/overlays/Dialog/DialogTrigger.tsx @@ -3,6 +3,7 @@ import { useOverlayTriggerState } from '@react-stately/overlays'; import { PressResponder } from '@react-aria/interactions'; import { useMediaQuery } from '@react-spectrum/utils'; import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays'; +import { OverlayTriggerProps, PositionProps } from '@react-types/overlays'; import { Modal, Popover, Tray, WithCloseBehavior } from '../Modal'; import { Styles } from '../../../tasty'; @@ -11,7 +12,10 @@ import { DialogContext } from './context'; export type CubeDialogClose = (close: () => void) => ReactElement; -export interface CubeDialogTriggerProps extends WithCloseBehavior { +export interface CubeDialogTriggerProps + extends OverlayTriggerProps, + PositionProps, + WithCloseBehavior { /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */ children: [ReactElement, CubeDialogClose | ReactElement]; /** @@ -33,7 +37,7 @@ export interface CubeDialogTriggerProps extends WithCloseBehavior { hideArrow?: boolean; /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */ targetRef?: RefObject; - /** Whether a modal type Dialog should be dismissable. */ + /** Whether a modal type Dialog should be dismissible. */ isDismissable?: boolean; /** Whether pressing the escape key to close the dialog should be disabled. */ isKeyboardDismissDisabled?: boolean; @@ -42,9 +46,10 @@ export interface CubeDialogTriggerProps extends WithCloseBehavior { /** The style map for the overlay **/ styles?: Styles; shouldCloseOnInteractOutside?: (element: Element) => boolean; + onDismiss?: (action?: string) => void; } -function DialogTrigger(props) { +function DialogTrigger(props: CubeDialogTriggerProps) { let { children, type = 'modal', @@ -193,6 +198,7 @@ function PopoverTrigger(allProps) { isKeyboardDismissDisabled, hideOnClose, shouldCloseOnInteractOutside, + keepOpenOnScroll, ...props } = allProps; @@ -215,9 +221,15 @@ function PopoverTrigger(allProps) { isOpen: state.isOpen, }); + let overlayTriggerState = state; + + if (keepOpenOnScroll) { + overlayTriggerState = { ...state, close: updatePosition }; + } + let { triggerProps, overlayProps } = useOverlayTrigger( { type: 'dialog' }, - state, + overlayTriggerState, triggerRef, ); diff --git a/src/components/overlays/Modal/Modal.tsx b/src/components/overlays/Modal/Modal.tsx index e86cb76e..8db8bbbb 100644 --- a/src/components/overlays/Modal/Modal.tsx +++ b/src/components/overlays/Modal/Modal.tsx @@ -70,12 +70,12 @@ const ModalElement = tasty({ }); export interface CubeModalProps - extends Omit, + extends Omit, WithCloseBehavior { container?: HTMLElement; qa?: BaseProps['qa']; onClose?: (action?: string) => void; - type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'; + type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel'; styles?: Styles; shouldCloseOnInteractOutside?: (element: Element) => boolean; } @@ -107,7 +107,7 @@ interface ModalWrapperProps extends TransitionState { children?: ReactNode; qa?: BaseProps['qa']; isOpen?: boolean; - type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'; + type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel'; placement?: 'top' | 'bottom'; styles?: Styles; overlayProps?: Props; From b748ffc0d643f8c10703f8d3a882439c4f81f169 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Fri, 11 Aug 2023 10:13:11 +0200 Subject: [PATCH 3/4] fix(DialogTrigger): specify type * 2 --- src/components/overlays/Dialog/DialogTrigger.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/overlays/Dialog/DialogTrigger.tsx b/src/components/overlays/Dialog/DialogTrigger.tsx index c4cb4b7c..12f24dd3 100644 --- a/src/components/overlays/Dialog/DialogTrigger.tsx +++ b/src/components/overlays/Dialog/DialogTrigger.tsx @@ -37,7 +37,7 @@ export interface CubeDialogTriggerProps hideArrow?: boolean; /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */ targetRef?: RefObject; - /** Whether a modal type Dialog should be dismissible. */ + /** Whether a modal type Dialog should be dismissable. */ isDismissable?: boolean; /** Whether pressing the escape key to close the dialog should be disabled. */ isKeyboardDismissDisabled?: boolean; From 93e96aa079d88c828c08950fda826b0dcd0fa056 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Fri, 11 Aug 2023 11:21:32 +0200 Subject: [PATCH 4/4] Create wet-jars-joke.md --- .changeset/wet-jars-joke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-jars-joke.md diff --git a/.changeset/wet-jars-joke.md b/.changeset/wet-jars-joke.md new file mode 100644 index 00000000..56b3f840 --- /dev/null +++ b/.changeset/wet-jars-joke.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Allow scrolling inside the Menu component.