bootstrap-rn 0.4.6 → 0.4.7

package/src/components/popover/injectPopover.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
-import { OverlayContainer } from '@react-native-aria/overlays';
-import Overlay from '../helpers/Overlay';
-import BackdropHandler from '../helpers/BackdropHandler';
-import useTrigger, { TriggerProps } from '../../hooks/useTrigger';
+import useOverlay from '../../hooks/useOverlay';
 import { normalizeNumber } from '../../style/math';
 import StyleSheet from '../../style/StyleSheet';
+import Portal from '../helpers/Portal';
+import BackdropHandler from '../helpers/BackdropHandler';
 import Popover from './Popover';
 import type { ViewRef } from '../View';
-import type { Trigger, Axis } from '../../types';
+import type {
+  OverlayTrigger,
+  OverlayPlacement,
+  OverlayProps,
+} from '../../types';
+import { concatRefs, optional } from '../../utils';
 
-export interface InjectPopoverProps {
+export interface InjectPopoverProps extends OverlayProps {
   popover: {
     title?: React.ReactNode;
     content: React.ReactNode;
-    autoClose?: boolean | 'inside' | 'outside';
-    trigger?: Trigger;
-    placement?: Axis;
-  } & TriggerProps;
+    trigger?: OverlayTrigger;
+    placement?: OverlayPlacement;
+  };
 }
 
 export default function injectPopover<Props>(
@@ -28,63 +31,68 @@ export default function injectPopover<Props>(
         popover: {
           title,
           content,
-          autoClose = 'outside',
           trigger = 'press',
           placement = 'right',
           ...popoverProps
         },
+        defaultVisible = false,
+        visible: controlledVisible,
+        onToggle = () => {},
         ...elementProps
       } = props;
 
-      const { visible, setVisible, targetProps, targetRef, templateProps } =
-        useTrigger(trigger, popoverProps, elementProps, ref);
-
       const offset = normalizeNumber(StyleSheet.value('popover-arrow-height'));
 
+      const overlay = useOverlay({
+        defaultVisible,
+        controlledVisible,
+        onToggle,
+        offset,
+        align: 'center',
+        placement,
+        trigger,
+      });
+
+      if ('maxWidth' in overlay.content.style) {
+        // @ts-expect-error We remove maxWidth, because maxWidth is set as style on Popover component.
+        delete overlay.content.style.maxWidth;
+      }
+
       return (
         <>
-          <Target {...(elementProps as Props)} {...targetProps} />
-          {visible && (
-            <OverlayContainer>
-              <Overlay
-                placement={placement}
-                offset={offset}
-                arrowOffset={offset}
-                targetRef={targetRef}
-                visible={visible}
+          <Target
+            {...(elementProps as Props)}
+            {...overlay.trigger.getProps(elementProps)}
+            ref={concatRefs(ref, overlay.trigger.ref)}
+            {...optional(overlay.visible, {
+              'aria-describedby': overlay.identifier,
+            })}
+          />
+          {overlay.visible && (
+            <Portal name={overlay.identifier}>
+              <BackdropHandler
+                onClose={() => {
+                  overlay.setVisible(false);
+                }}
+              />
+              <Popover
+                {...popoverProps}
+                {...overlay.content.getProps(popoverProps)}
+                ref={overlay.content.ref}
+                id={overlay.identifier}
+                placement={overlay.placement}
+                style={overlay.content.style}
+                floating
               >
-                {(overlay, overlayRef) => (
-                  <>
-                    <BackdropHandler
-                      toggleRef={targetRef}
-                      dialogRef={overlayRef}
-                      onClose={() => {
-                        setVisible(false);
-                      }}
-                      autoClose={autoClose}
-                    />
-                    <Popover
-                      {...templateProps}
-                      ref={overlayRef}
-                      placement={overlay.placement}
-                      popper={overlay.rendered}
-                      style={[
-                        overlay.overlayProps.style,
-                        {
-                          maxHeight: 'auto',
-                          opacity: overlay.rendered ? 1 : 0,
-                        },
-                      ]}
-                      arrowStyle={overlay.arrowProps.style}
-                    >
-                      <Popover.Arrow />
-                      {title && <Popover.Header>{title}</Popover.Header>}
-                      <Popover.Body>{content}</Popover.Body>
-                    </Popover>
-                  </>
-                )}
-              </Overlay>
-            </OverlayContainer>
+                <Popover.Arrow
+                  {...overlay.arrow.getProps({})}
+                  ref={overlay.arrow.ref}
+                  style={overlay.arrow.style}
+                />
+                {title && <Popover.Header>{title}</Popover.Header>}
+                <Popover.Body>{content}</Popover.Body>
+              </Popover>
+            </Portal>
           )}
         </>
       );

package/src/components/tooltip/Tooltip.tsx

@@ -1,98 +1,79 @@
-import React, { useMemo } from 'react';
-import { Platform } from 'react-native';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import { getStyles, transformPlacement } from '../../utils';
-import css from '../../style/css';
-import TooltipArrow from './TooltipArrow';
-import TooltipInner from './TooltipInner';
-import TooltipContext from './TooltipContext';
-import { ExtendedViewStyle, StyleProp, PlacementAxis } from '../../types';
-
-export interface TooltipProps extends ViewProps {
-  placement?: PlacementAxis;
-  popper?: boolean;
-  arrowStyle?: StyleProp<ExtendedViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  '.tooltip': css`
-    position: absolute;
-    z-index: $zindex-tooltip;
-    // display: block;
-    margin: $tooltip-margin;
-    // opacity: 0;
-  `,
-  '.tooltip --text': css`
-    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-    // So reset our font and text properties to avoid inheriting weird values.
-    // @include reset-text();
-    font-size: $tooltip-font-size;
-    // Allow breaking very long words so they don't overflow the tooltip's bounds
-    // word-wrap: break-word;
-  `,
-  '.bs-tooltip-top': css`
-    padding: $tooltip-arrow-height 0;
-  `,
-  '.bs-tooltip-end': css`
-    padding: 0 $tooltip-arrow-height;
-  `,
-  '.bs-tooltip-bottom': css`
-    padding: $tooltip-arrow-height 0;
-  `,
-  '.bs-tooltip-start': css`
-    padding: 0 $tooltip-arrow-height;
-  `,
-});
-
-const Tooltip = React.forwardRef<ViewRef, TooltipProps>((props, ref) => {
-  const {
-    children,
-    placement = 'top',
-    popper,
-    style,
-    textStyle,
-    arrowStyle,
-    ...elementProps
-  } = props;
-
-  const tooltip = useMemo(
-    () => ({
-      placement: transformPlacement(placement),
-      arrowStyle,
-      popper,
-    }),
-    [placement, arrowStyle, popper],
-  );
-
-  const classes = getStyles(styles, [
-    '.tooltip',
-    // Wait for rendering (of Overlay) before setting the offset.
-    popper && `.bs-tooltip-${tooltip.placement}`,
-  ]);
-  const textClasses = getStyles(styles, ['.tooltip --text']);
-
-  // Accessiblity role tooltip is only supported on web.
-  const role = Platform.OS === 'web' ? 'tooltip' : undefined;
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      role={role}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      <TooltipContext.Provider value={tooltip}>
-        {children}
-      </TooltipContext.Provider>
-    </View>
-  );
-});
-
-Tooltip.displayName = 'Tooltip';
-
-export default Object.assign(Tooltip, {
-  Arrow: TooltipArrow,
-  Inner: TooltipInner,
-});
+import React, { useMemo } from 'react';
+import { Platform } from 'react-native';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import TooltipArrow from './TooltipArrow';
+import TooltipInner from './TooltipInner';
+import TooltipContext from './TooltipContext';
+import type { OverlayPhysicalPlacement } from '../../types';
+
+export interface TooltipProps extends ViewProps {
+  placement?: OverlayPhysicalPlacement;
+  floating?: boolean;
+}
+
+const styles = StyleSheet.create({
+  '.tooltip': css`
+    position: absolute;
+    // z-index: $zindex-tooltip;
+    // display: block;
+    margin: $tooltip-margin;
+    // opacity: 0;
+  `,
+  '.tooltip --text': css`
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    // @include reset-text();
+    font-size: $tooltip-font-size;
+    // Allow breaking very long words so they don't overflow the tooltip's bounds
+    // word-wrap: break-word;
+  `,
+});
+
+const Tooltip = React.forwardRef<ViewRef, TooltipProps>((props, ref) => {
+  const {
+    children,
+    placement = 'top',
+    floating,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const tooltip = useMemo(
+    () => ({
+      placement,
+      floating,
+    }),
+    [placement, floating],
+  );
+
+  const classes = getStyles(styles, ['.tooltip']);
+  const textClasses = getStyles(styles, ['.tooltip --text']);
+
+  // Accessiblity role tooltip is only supported on web.
+  const role = Platform.OS === 'web' ? 'tooltip' : undefined;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      <TooltipContext.Provider value={tooltip}>
+        {children}
+      </TooltipContext.Provider>
+    </View>
+  );
+});
+
+Tooltip.displayName = 'Tooltip';
+
+export default Object.assign(Tooltip, {
+  Arrow: TooltipArrow,
+  Inner: TooltipInner,
+});

package/src/components/tooltip/TooltipArrow.tsx

@@ -5,6 +5,7 @@ import { getStyles } from '../../utils';
 import css from '../../style/css';
 import useForcedContext from '../../hooks/useForcedContext';
 import TooltipContext from './TooltipContext';
+import type { OverlayPlacement } from '../../types';
 
 export interface TooltipArrowProps extends ViewProps {}
 
@@ -29,7 +30,7 @@ const styles = StyleSheet.create({
     border-style: solid;
   `,
   '.bs-tooltip-top .tooltip-arrow': css`
-    bottom: 0;
+    bottom: -1 * $tooltip-arrow-height;
   `,
   '.bs-tooltip-top .tooltip-arrow::before': css`
     top: -1px;
@@ -43,7 +44,7 @@ const styles = StyleSheet.create({
     border-bottom-color: transparent; // added for bootstrap-rn
   `,
   '.bs-tooltip-end .tooltip-arrow': css`
-    left: 0;
+    left: -1 * $tooltip-arrow-height;
     width: $tooltip-arrow-height;
     height: $tooltip-arrow-width;
   `,
@@ -59,7 +60,7 @@ const styles = StyleSheet.create({
     border-bottom-color: transparent; // added for bootstrap-rn
   `,
   '.bs-tooltip-bottom .tooltip-arrow': css`
-    top: 0;
+    top: -1 * $tooltip-arrow-height;
   `,
   '.bs-tooltip-bottom .tooltip-arrow::before': css`
     bottom: -1px;
@@ -73,7 +74,7 @@ const styles = StyleSheet.create({
     border-bottom-color: $tooltip-arrow-color;
   `,
   '.bs-tooltip-start .tooltip-arrow': css`
-    right: 0;
+    right: -1 * $tooltip-arrow-height;
     width: $tooltip-arrow-height;
     height: $tooltip-arrow-width;
   `,
@@ -90,23 +91,40 @@ const styles = StyleSheet.create({
   `,
 });
 
+const transformPlacement = (placement: OverlayPlacement) => {
+  if (placement === 'left') {
+    return 'start';
+  }
+
+  if (placement === 'right') {
+    return 'end';
+  }
+
+  return placement;
+};
+
 const TooltipArrow = React.forwardRef<ViewRef, TooltipArrowProps>(
   (props, ref) => {
     const { style, ...elementProps } = props;
 
-    const { placement, arrowStyle, popper } = useForcedContext(TooltipContext);
+    const context = useForcedContext(TooltipContext);
+
+    // For some reason the classes are named start/end, but they always define
+    // the overlay on the left/right placement, so it has no effect on RTL.
+    // Hint: RTL is already handled by the useOverlay hook.
+    const placement = transformPlacement(context.placement);
 
     const classes = getStyles(styles, [
       '.tooltip-arrow',
-      popper && `.bs-tooltip-${placement} .tooltip-arrow`,
+      context.floating && `.bs-tooltip-${placement} .tooltip-arrow`,
     ]);
     const beforeClasses = getStyles(styles, [
       '.tooltip-arrow::before',
-      popper && `.bs-tooltip-${placement} .tooltip-arrow::before`,
+      context.floating && `.bs-tooltip-${placement} .tooltip-arrow::before`,
     ]);
 
     return (
-      <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
+      <View {...elementProps} ref={ref} style={[classes, style]}>
         <View style={beforeClasses} />
       </View>
     );

package/src/components/tooltip/TooltipContext.ts

@@ -1,18 +1,13 @@
-import React from 'react';
-import {
-  ExtendedViewStyle,
-  StyleProp,
-  TransformedPlacementAxis,
-} from '../../types';
-
-type TooltipContextType = {
-  placement: TransformedPlacementAxis;
-  popper?: boolean;
-  arrowStyle?: StyleProp<ExtendedViewStyle>;
-};
-
-const TooltipContext = React.createContext<TooltipContextType | null>(null);
-
-TooltipContext.displayName = 'TooltipContext';
-
-export default TooltipContext;
+import React from 'react';
+import type { OverlayPlacement } from '../../types';
+
+type TooltipContextType = {
+  placement: OverlayPlacement;
+  floating?: boolean;
+};
+
+const TooltipContext = React.createContext<TooltipContextType | null>(null);
+
+TooltipContext.displayName = 'TooltipContext';
+
+export default TooltipContext;

package/src/components/tooltip/injectTooltip.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
-import { OverlayContainer } from '@react-native-aria/overlays';
-import Overlay from '../helpers/Overlay';
-import BackdropHandler from '../helpers/BackdropHandler';
-import useTrigger, { TriggerProps } from '../../hooks/useTrigger';
+import useOverlay from '../../hooks/useOverlay';
 import { normalizeNumber } from '../../style/math';
 import StyleSheet from '../../style/StyleSheet';
+import Portal from '../helpers/Portal';
+import BackdropHandler from '../helpers/BackdropHandler';
 import Tooltip from './Tooltip';
 import type { ViewRef } from '../View';
-import type { Trigger, Axis } from '../../types';
+import type {
+  OverlayTrigger,
+  OverlayPlacement,
+  OverlayProps,
+} from '../../types';
+import { concatRefs, optional } from '../../utils';
 
-export interface InjectTooltipProps {
+export interface InjectTooltipProps extends OverlayProps {
   tooltip: {
     title: React.ReactNode;
-    autoClose?: boolean | 'inside' | 'outside';
-    trigger?: Trigger;
-    placement?: Axis;
-  } & TriggerProps;
+    trigger?: OverlayTrigger;
+    placement?: OverlayPlacement;
+  };
 }
 
 export default function injectTooltip<Props>(
@@ -26,61 +29,67 @@ export default function injectTooltip<Props>(
       const {
         tooltip: {
           title,
-          autoClose = 'outside',
           trigger = 'hover focus',
           placement = 'top',
           ...tooltipProps
         },
+        defaultVisible = false,
+        visible: controlledVisible,
+        onToggle = () => {},
         ...elementProps
       } = props;
 
-      const { visible, setVisible, targetProps, targetRef, templateProps } =
-        useTrigger(trigger, tooltipProps, elementProps, ref);
-
       const offset = normalizeNumber(StyleSheet.value('tooltip-arrow-height'));
 
+      const overlay = useOverlay({
+        defaultVisible,
+        controlledVisible,
+        onToggle,
+        offset,
+        align: 'center',
+        placement,
+        trigger,
+      });
+
+      if ('maxWidth' in overlay.content.style) {
+        // @ts-expect-error We remove maxWidth, because maxWidth is set as style on Tooltip component.
+        delete overlay.content.style.maxWidth;
+      }
+
       return (
         <>
-          <Target {...(elementProps as Props)} {...targetProps} />
-          {visible && (
-            <OverlayContainer>
-              <Overlay
-                placement={placement}
-                targetRef={targetRef}
-                arrowOffset={offset}
-                visible={visible}
+          <Target
+            {...(elementProps as Props)}
+            {...overlay.trigger.getProps(elementProps)}
+            ref={concatRefs(ref, overlay.trigger.ref)}
+            {...optional(overlay.visible, {
+              'aria-describedby': overlay.identifier,
+            })}
+          />
+          {overlay.visible && (
+            <Portal name={overlay.identifier}>
+              <BackdropHandler
+                onClose={() => {
+                  overlay.setVisible(false);
+                }}
+              />
+              <Tooltip
+                {...tooltipProps}
+                {...overlay.content.getProps(tooltipProps)}
+                ref={overlay.content.ref}
+                id={overlay.identifier}
+                placement={overlay.placement}
+                style={overlay.content.style}
+                floating
               >
-                {(overlay, overlayRef) => (
-                  <>
-                    <BackdropHandler
-                      toggleRef={targetRef}
-                      dialogRef={overlayRef}
-                      onClose={() => {
-                        setVisible(false);
-                      }}
-                      autoClose={autoClose}
-                    />
-                    <Tooltip
-                      {...templateProps}
-                      ref={overlayRef}
-                      placement={overlay.placement}
-                      popper={overlay.rendered}
-                      style={[
-                        overlay.overlayProps.style,
-                        {
-                          maxHeight: 'auto',
-                          opacity: overlay.rendered ? 1 : 0,
-                        },
-                      ]}
-                      arrowStyle={overlay.arrowProps.style}
-                    >
-                      <Tooltip.Arrow />
-                      <Tooltip.Inner>{title}</Tooltip.Inner>
-                    </Tooltip>
-                  </>
-                )}
-              </Overlay>
-            </OverlayContainer>
+                <Tooltip.Arrow
+                  {...overlay.arrow.getProps({})}
+                  ref={overlay.arrow.ref}
+                  style={overlay.arrow.style}
+                />
+                <Tooltip.Inner>{title}</Tooltip.Inner>
+              </Tooltip>
+            </Portal>
           )}
         </>
       );