fix(1980): add portal option to DatePicker, MenuPopover, and Popover …

…components (#1991)
vtex · Oct 9, 2024 · 43aa37f · 43aa37f
2 parents 6dcab66 + 10fa6c8
commit 43aa37f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/packages/shoreline/src/components/date-picker/date-picker.tsx b/packages/shoreline/src/components/date-picker/date-picker.tsx
@@ -22,7 +22,13 @@ import { useStore } from '@vtex/shoreline-utils'
  * <DatePicker />
  */
 export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
-  const { className, id: defaultId, error: defaultError, ...domProps } = props
+  const {
+    className,
+    id: defaultId,
+    error: defaultError,
+    portal = true,
+    ...domProps
+  } = props
   const state = useDatePickerState(domProps)
   const ref = useRef(null)
   const anchorRef = useRef<HTMLDivElement>(null)
@@ -68,6 +74,7 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
         </div>
       </div>
       <Popover
+        portal={portal}
         getAnchorRect={() => {
           if (anchorRef?.current) {
             return anchorRef.current.getBoundingClientRect()
@@ -92,6 +99,11 @@ export interface DatePickerOptions<T extends DateValue>
    * Wether has error
    */
   error?: boolean
+  /**
+   * Should activate portal
+   * @default true
+   */
+  portal?: boolean
 }
 
 export type DatePickerProps<T extends DateValue> = DatePickerOptions<T>
diff --git a/packages/shoreline/src/components/menu/menu-popover.tsx b/packages/shoreline/src/components/menu/menu-popover.tsx
@@ -8,15 +8,15 @@ import { Menu } from '@ariakit/react'
  */
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
   function MenuPopover(props, ref) {
-    const { children, asChild = false, ...otherProps } = props
+    const { children, asChild = false, portal = true, ...otherProps } = props
 
     return (
       <Menu
         data-sl-menu-popover
         ref={ref}
         render={asChild && (children as any)}
         gutter={4}
-        portal
+        portal={portal}
         {...otherProps}
       >
         {children}
@@ -31,6 +31,11 @@ export interface MenuPopoverOptions {
    * @default false
    */
   asChild?: boolean
+  /**
+   * Should activate portal
+   * @default true
+   */
+  portal?: boolean
 }
 
 export type MenuPopoverProps = MenuPopoverOptions &

diff --git a/packages/shoreline/src/components/popover/popover.tsx b/packages/shoreline/src/components/popover/popover.tsx
@@ -15,14 +15,14 @@ import { Popover as BasePopover } from '@ariakit/react'
  */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   function Popover(props, ref) {
-    const { children, asChild = false, ...otherProps } = props
+    const { children, asChild = false, portal = true, ...otherProps } = props
 
     return (
       <BasePopover
         data-sl-popover
         ref={ref}
         render={asChild && (children as any)}
-        portal
+        portal={portal}
         gutter={4}
         {...otherProps}
       >
@@ -38,6 +38,11 @@ export interface PopoverOptions extends Pick<BaseProps, 'getAnchorRect'> {
    * @default false
    */
   asChild?: boolean
+  /**
+   * Should activate portal
+   * @default true
+   */
+  portal?: boolean
 }
 
 export type PopoverProps = PopoverOptions & ComponentPropsWithoutRef<'div'>