bootstrap-rn 0.4.6 → 0.4.7

package/src/components/helpers/Dialog.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import { BackHandler } from 'react-native';
+import { Portal } from '@rn-primitives/portal';
+import type { ViewRef } from '../View';
+
+type DialogProps = {
+  children: React.ReactNode;
+  id: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  dialogRef: React.RefObject<ViewRef | null>;
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundRef: React.RefObject<ViewRef | null>;
+  onClose?: () => void;
+  backdrop: boolean | 'static';
+  backdropElement: React.ReactNode;
+  // eslint-disable-next-line react/no-unused-prop-types
+  scroll?: boolean;
+};
+
+function Dialog({
+  children,
+  id,
+  backdrop,
+  backdropElement,
+  onClose: handleClose,
+}: DialogProps) {
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        handleClose?.();
+        return true;
+      },
+    );
+
+    return () => {
+      backHandler.remove();
+    };
+  }, []);
+
+  return (
+    <Portal name={id}>
+      {backdrop && backdropElement}
+      {children}
+    </Portal>
+  );
+}
+
+export default Dialog;

package/src/components/helpers/Dialog.web.tsx

@@ -0,0 +1,145 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { FocusScope } from '@react-aria/focus';
+import Portal from './Portal';
+import type { ViewRef } from '../View';
+import Context from '../../Context';
+
+type DialogProps = {
+  children: React.ReactNode;
+  id: string;
+  dialogRef: React.RefObject<ViewRef | null>;
+  backgroundRef: React.RefObject<ViewRef | null>;
+  onClose?: () => void;
+  backdrop: boolean | 'static';
+  backdropElement: React.ReactNode;
+  scroll?: boolean;
+};
+
+function Dialog({
+  children,
+  id,
+  dialogRef,
+  backgroundRef,
+  onClose: handleClose,
+  backdrop,
+  backdropElement,
+  scroll = false,
+}: DialogProps) {
+  const context = useContext(Context);
+
+  // Handle scrollbars
+  useEffect(() => {
+    if (!context || scroll) {
+      return undefined;
+    }
+
+    context.scrollbars.hide();
+
+    return () => {
+      context.scrollbars.show();
+    };
+  }, [context, scroll]);
+
+  // Handle ESC key press
+  useEffect(() => {
+    const dialog = dialogRef.current as HTMLDivElement | null;
+
+    if (!dialog) {
+      return undefined;
+    }
+
+    // Auto-focus dialog element
+    dialog.focus();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleClose?.();
+      }
+    };
+
+    dialog.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      dialog.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClose]);
+
+  // Handle outside click
+  const state = useRef<{
+    waitingForMouseUp: boolean;
+    handleClick: ((event: MouseEvent) => void) | null;
+  }>({
+    waitingForMouseUp: false,
+    handleClick: null,
+  });
+
+  useEffect(() => {
+    const ref = backgroundRef.current as HTMLDivElement | null;
+
+    // @ts-expect-error getScrollableNode exists on web only
+    const isScrollView = typeof ref?.getScrollableNode === 'function';
+
+    // If the ref refers to a scroll view, we need the first child, otherwise the ref itself.
+    const background = isScrollView ? ref?.firstElementChild : ref;
+
+    if (!background) {
+      return undefined;
+    }
+
+    const handleMouseDown = (event: MouseEvent) => {
+      // It might be that a click starts inside the window and ends outside the window, so that
+      // only the on mouse down event is dispatched and we need to remove the click listener
+      // before the next click event is dispatched.
+      if (state.current.waitingForMouseUp && state.current.handleClick) {
+        background.removeEventListener('click', state.current.handleClick);
+      }
+
+      // A bad trick to segregate clicks that may start inside dialog but end outside, and avoid
+      // listen to scrollbar clicks.
+      const handleClick = (event2: MouseEvent) => {
+        if (background !== event.target || background !== event2.target) {
+          return;
+        }
+
+        if (backdrop === 'static') {
+          // TODO: triggerBackdropTransition()
+          return;
+        }
+
+        if (backdrop) {
+          handleClose?.();
+        }
+      };
+
+      state.current = {
+        waitingForMouseUp: true,
+        handleClick,
+      };
+
+      background.addEventListener('click', handleClick, { once: true });
+    };
+
+    const handleMouseUp = () => {
+      state.current.waitingForMouseUp = false;
+    };
+
+    background.addEventListener('mousedown', handleMouseDown);
+    background.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      background.removeEventListener('mousedown', handleMouseDown);
+      background.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [backdrop, handleClose]);
+
+  return (
+    <Portal name={id}>
+      {backdrop && backdropElement}
+      <FocusScope contain restoreFocus>
+        {children}
+      </FocusScope>
+    </Portal>
+  );
+}
+
+export default Dialog;

package/src/components/helpers/Portal.tsx

@@ -0,0 +1,10 @@
+import { Portal } from '@rn-primitives/portal';
+
+export interface PortalProps {
+  // eslint-disable-next-line react/no-unused-prop-types
+  name: string;
+  hostName?: string;
+  children: React.ReactNode;
+}
+
+export default Portal;

package/src/components/helpers/Portal.web.tsx

@@ -0,0 +1,22 @@
+import { createPortal } from 'react-dom';
+
+export interface PortalProps {
+  // eslint-disable-next-line react/no-unused-prop-types
+  name: string;
+  hostName?: string;
+  children: React.ReactNode;
+}
+
+const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
+
+function Portal({ hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
+  const element = document.getElementById(hostName);
+
+  if (!element) {
+    return null;
+  }
+
+  return createPortal(children, element);
+}
+
+export default Portal;

package/src/components/helpers/PortalHost.tsx

@@ -0,0 +1,7 @@
+import { PortalHost } from '@rn-primitives/portal';
+
+export interface PortalHostProps {
+  name?: string;
+}
+
+export default PortalHost;

package/src/components/helpers/PortalHost.web.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+
+export interface PortalHostProps {
+  name?: string;
+}
+
+const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
+
+function PortalHost({ name = DEFAULT_PORTAL_HOST }: PortalHostProps) {
+  return <View id={name} />;
+}
+
+export default PortalHost;

package/src/components/modal/Modal.tsx

@@ -1,13 +1,12 @@
 import React, { useRef } from 'react';
-import { Modal as BaseModal, Platform } from 'react-native';
-import { OverlayProvider } from '@react-native-aria/overlays';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import StyleSheet from '../../style/StyleSheet';
-import { getStyles } from '../../utils';
+import { concatRefs, getStyles } from '../../utils';
 import css from '../../style/css';
 import ScrollView, { ScrollViewRef, ScrollViewProps } from '../ScrollView';
 import View, { ViewRef } from '../View';
+import Dialog from '../helpers/Dialog';
 import BackdropHandler from '../helpers/BackdropHandler';
-import SafeAreaView from '../SafeAreaView';
 import useModal from './useModal';
 import ModalContext from './ModalContext';
 import ModalHeader from './ModalHeader';
@@ -22,7 +21,7 @@ export interface ModalProps extends ScrollViewProps {
   backdrop?: boolean | 'static';
   scrollable?: boolean;
   centered?: boolean;
-  onToggle: () => void;
+  onClose: () => void;
   dialogStyle?: StyleProp<ExtendedViewStyle>;
   contentStyle?: StyleProp<ExtendedViewStyle>;
   dialogTextStyle?: StyleProp<ExtendedTextStyle>;
@@ -39,19 +38,24 @@ type JustifyContentValue =
 
 const styles = StyleSheet.create({
   '.modal': css`
-    position: absolute; // fixed;
+    position: absolute; // added for bootstrap-rn
+    @include platform(web) {
+      position: fixed;
+    }
     top: 0;
     left: 0;
-    z-index: $zindex-modal;
+    bottom: 0; // added for bootstrap-rn
+    right: 0; // added for bootstrap-rn
+    // z-index: $zindex-modal;
     // display: none;
-    width: 100%;
-    height: 100%;
+    // width: 100%;
+    // height: 100%;
     // overflow-x: hidden;
     // overflow-y: auto;
     // Prevent Chrome on Windows from adding a focus outline. For details, see
     // https://github.com/twbs/bootstrap/pull/10951.
     @include platform(web) {
-      outline-width: 0; // outline: 0;
+      outline-style: none; // outline: 0;
     }
     // We deliberately don't use "-webkit-overflow-scrolling: touch;" due to a
     // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
@@ -96,7 +100,9 @@ const styles = StyleSheet.create({
     border-radius: $modal-content-border-radius;
     // @include box-shadow($modal-content-box-shadow-xs);
     // Remove focus outline from opened modal
-    // outline: 0;
+    @include platform(web) {
+      outline-style: none; // outline: 0;
+    }
 
     @include media-breakpoint-up(sm) {
       // @include box-shadow($modal-content-box-shadow-sm-up);
@@ -106,12 +112,17 @@ const styles = StyleSheet.create({
     color: $modal-content-color;
   `,
   '.modal-backdrop': css`
-    position: absolute;
+    position: absolute; // added for bootstrap-rn
+    @include platform(web) {
+      position: fixed;
+    }
     top: 0;
     left: 0;
-    z-index: $zindex-modal-backdrop;
-    width: 100%;
-    height: 100%;
+    bottom: 0; // added for bootstrap-rn
+    right: 0; // added for bootstrap-rn
+    // z-index: $zindex-modal-backdrop;
+    // width: 100vw;
+    // height: 100vh;
     background-color: $modal-backdrop-bg;
     opacity: $modal-backdrop-opacity;
   `,
@@ -144,7 +155,7 @@ const Modal = React.forwardRef<ViewRef | ScrollViewRef, ModalProps>(
       backdrop = true,
       scrollable = false,
       centered = false,
-      onToggle: handleToggle,
+      onClose: handleClose,
       style,
       contentContainerStyle,
       dialogStyle,
@@ -155,9 +166,11 @@ const Modal = React.forwardRef<ViewRef | ScrollViewRef, ModalProps>(
       ...elementProps
     } = props;
 
-    const dialogRef = useRef(null);
+    const modalRef = useRef<ViewRef>(null);
+
+    const insets = useSafeAreaInsets();
 
-    const modal = useModal(visible, scrollable);
+    const modal = useModal(scrollable);
 
     const backdropClasses = getStyles(styles, ['.modal-backdrop']);
     const classes = getStyles(styles, ['.modal']);
@@ -182,22 +195,28 @@ const Modal = React.forwardRef<ViewRef | ScrollViewRef, ModalProps>(
       justifyContent: 'center' as JustifyContentValue,
     };
 
+    if (!visible) {
+      return null;
+    }
+
     return (
-      <BaseModal
-        transparent
-        // Modal is only shown correctly on older Android versions if we set this.
-        navigationBarTranslucent={
-          Platform.OS === 'android' && Platform.constants.Version < 35
-        }
-        visible={visible}
-        onRequestClose={handleToggle}
+      <Dialog
+        id={modal.identifier}
+        dialogRef={modalRef}
+        backgroundRef={modalRef}
+        onClose={handleClose}
+        backdrop={backdrop}
+        backdropElement={<View style={backdropClasses} />}
       >
-        {backdrop && <View style={backdropClasses} />}
         <FlexView
           {...elementProps}
           // @ts-expect-error Type of ref depends on component.
-          ref={ref}
-          style={[classes, scrollable && centeredStyle, style]}
+          ref={concatRefs(ref, modalRef)}
+          role="dialog"
+          aria-modal
+          aria-labelledby={`${modal.identifier}-title`}
+          tabIndex={-1}
+          style={[classes, insets, scrollable && centeredStyle, style]}
           textStyle={textStyle}
           contentContainerStyle={
             scrollable
@@ -205,29 +224,22 @@ const Modal = React.forwardRef<ViewRef | ScrollViewRef, ModalProps>(
               : [{ flexGrow: 1 }, centeredStyle, contentContainerStyle]
           }
         >
-          <BackdropHandler
-            dialogRef={dialogRef}
-            onClose={handleToggle}
-            backdrop={backdrop}
-          />
-          <SafeAreaView style={scrollable && { flexShrink: 1 }}>
+          <BackdropHandler onClose={handleClose} backdrop={backdrop} />
+          <View
+            style={[dialogClasses, dialogStyle]}
+            textStyle={dialogTextStyle}
+          >
             <View
-              ref={dialogRef}
-              style={[dialogClasses, dialogStyle]}
-              textStyle={dialogTextStyle}
+              style={[contentClasses, contentStyle]}
+              textStyle={[contentTextClasses, contentTextStyle]}
             >
-              <View
-                style={[contentClasses, contentStyle]}
-                textStyle={[contentTextClasses, contentTextStyle]}
-              >
-                <ModalContext.Provider value={modal}>
-                  <OverlayProvider>{children}</OverlayProvider>
-                </ModalContext.Provider>
-              </View>
+              <ModalContext.Provider value={modal}>
+                {children}
+              </ModalContext.Provider>
             </View>
-          </SafeAreaView>
+          </View>
         </FlexView>
-      </BaseModal>
+      </Dialog>
     );
   },
 );

package/src/components/modal/ModalContext.ts

@@ -1,11 +1,12 @@
-import React from 'react';
-
-export interface ModalContextProps {
-  scrollable: boolean;
-}
-
-const ModalContext = React.createContext<ModalContextProps | null>(null);
-
-ModalContext.displayName = 'ModalContext';
-
-export default ModalContext;
+import React from 'react';
+
+export interface ModalContextProps {
+  identifier: string;
+  scrollable: boolean;
+}
+
+const ModalContext = React.createContext<ModalContextProps | null>(null);
+
+ModalContext.displayName = 'ModalContext';
+
+export default ModalContext;

package/src/components/modal/ModalTitle.tsx

@@ -1,31 +1,41 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Heading from '../Heading';
-import { getStyles } from '../../utils';
-import type { TextProps, TextRef } from '../Text';
-
-export interface ModalTitleProps extends TextProps {}
-
-const styles = StyleSheet.create({
-  '.modal-title': css`
-    margin-bottom: 0;
-    line-height: $font-size-base * $modal-title-line-height;
-  `,
-});
-
-const ModalTitle = React.forwardRef<TextRef, ModalTitleProps>((props, ref) => {
-  const { children, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.modal-title']);
-
-  return (
-    <Heading size={5} {...elementProps} ref={ref} style={[classes, style]}>
-      {children}
-    </Heading>
-  );
-});
-
-ModalTitle.displayName = 'ModalTitle';
-
-export default ModalTitle;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Heading from '../Heading';
+import { getStyles } from '../../utils';
+import type { TextProps, TextRef } from '../Text';
+import useForcedContext from '../../hooks/useForcedContext';
+import ModalContext from './ModalContext';
+
+export interface ModalTitleProps extends TextProps {}
+
+const styles = StyleSheet.create({
+  '.modal-title': css`
+    margin-bottom: 0;
+    line-height: $font-size-base * $modal-title-line-height;
+  `,
+});
+
+const ModalTitle = React.forwardRef<TextRef, ModalTitleProps>((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const { identifier } = useForcedContext(ModalContext);
+
+  const classes = getStyles(styles, ['.modal-title']);
+
+  return (
+    <Heading
+      id={`${identifier}-title`}
+      size={5}
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+    >
+      {children}
+    </Heading>
+  );
+});
+
+ModalTitle.displayName = 'ModalTitle';
+
+export default ModalTitle;

package/src/components/modal/useModal.ts

@@ -1,25 +1,13 @@
-import { useContext, useEffect, useMemo } from 'react';
-import Context from '../../Context';
-
-export default function useModal(visible: boolean, scrollable: boolean) {
-  const context = useContext(Context);
-
-  useEffect(() => {
-    if (!visible || !context) {
-      return undefined;
-    }
-
-    context.scrollbars.hide();
-
-    return () => {
-      context.scrollbars.show();
-    };
-  }, [visible, context]);
-
-  return useMemo(
-    () => ({
-      scrollable,
-    }),
-    [scrollable],
-  );
-}
+import { useId, useMemo } from 'react';
+
+export default function useModal(scrollable: boolean) {
+  const identifier = useId();
+
+  return useMemo(
+    () => ({
+      identifier,
+      scrollable,
+    }),
+    [scrollable],
+  );
+}

package/src/components/nav/useTabbable.ts

@@ -1,32 +1,31 @@
-import { useMemo } from 'react';
-import useIdentifier from '../../hooks/useIdentifier';
-import useControlledState from '../../hooks/useControlledState';
-
-type UseTabbableReturnType = {
-  identifier: string;
-  activeTarget: string;
-  setActiveTarget: (target: string) => void;
-};
-
-export default function useTabbable(
-  defaultActiveTarget: string,
-  controlledActiveTarget?: string,
-  onChange?: () => void,
-): UseTabbableReturnType {
-  const identifier = useIdentifier('tabbable');
-
-  const [activeTarget, setActiveTarget] = useControlledState(
-    defaultActiveTarget,
-    controlledActiveTarget,
-    onChange,
-  );
-
-  return useMemo(
-    () => ({
-      identifier,
-      activeTarget,
-      setActiveTarget,
-    }),
-    [activeTarget],
-  );
-}
+import { useId, useMemo } from 'react';
+import useControlledState from '../../hooks/useControlledState';
+
+type UseTabbableReturnType = {
+  identifier: string;
+  activeTarget: string;
+  setActiveTarget: (target: string) => void;
+};
+
+export default function useTabbable(
+  defaultActiveTarget: string,
+  controlledActiveTarget?: string,
+  onChange?: () => void,
+): UseTabbableReturnType {
+  const identifier = useId();
+
+  const [activeTarget, setActiveTarget] = useControlledState(
+    defaultActiveTarget,
+    controlledActiveTarget,
+    onChange,
+  );
+
+  return useMemo(
+    () => ({
+      identifier,
+      activeTarget,
+      setActiveTarget,
+    }),
+    [activeTarget],
+  );
+}