bootstrap-rn 0.4.5 → 0.4.7

package/src/components/offcanvas/OffcanvasTitle.tsx

@@ -1,33 +1,43 @@
-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 OffcanvasTitleProps extends TextProps {}
-
-const styles = StyleSheet.create({
-  '.offcanvas-title': css`
-    margin-bottom: 0;
-    line-height: $font-size-base * $offcanvas-title-line-height;
-  `,
-});
-
-const OffcanvasTitle = React.forwardRef<TextRef, OffcanvasTitleProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const classes = getStyles(styles, ['.offcanvas-title']);
-
-    return (
-      <Heading size={5} {...elementProps} ref={ref} style={[classes, style]}>
-        {children}
-      </Heading>
-    );
-  },
-);
-
-OffcanvasTitle.displayName = 'OffcanvasTitle';
-
-export default OffcanvasTitle;
+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 OffcanvasContext from './OffcanvasContext';
+
+export interface OffcanvasTitleProps extends TextProps {}
+
+const styles = StyleSheet.create({
+  '.offcanvas-title': css`
+    margin-bottom: 0;
+    line-height: $font-size-base * $offcanvas-title-line-height;
+  `,
+});
+
+const OffcanvasTitle = React.forwardRef<TextRef, OffcanvasTitleProps>(
+  (props, ref) => {
+    const { children, style, ...elementProps } = props;
+
+    const { identifier } = useForcedContext(OffcanvasContext);
+
+    const classes = getStyles(styles, ['.offcanvas-title']);
+
+    return (
+      <Heading
+        id={`${identifier}-title`}
+        size={5}
+        {...elementProps}
+        ref={ref}
+        style={[classes, style]}
+      >
+        {children}
+      </Heading>
+    );
+  },
+);
+
+OffcanvasTitle.displayName = 'OffcanvasTitle';
+
+export default OffcanvasTitle;

package/src/components/offcanvas/useOffcanvas.ts

@@ -1,20 +1,12 @@
-import { useContext, useEffect, useMemo } from 'react';
-import Context from '../../Context';
-
-export default function useOffcanvas(visible: boolean, scroll: boolean) {
-  const context = useContext(Context);
-
-  useEffect(() => {
-    if (!visible || scroll) {
-      return () => {}; // No cleanup needed
-    }
-
-    context?.scrollbars.hide();
-
-    return () => {
-      context?.scrollbars.show();
-    };
-  }, [visible, scroll, context?.scrollbars]);
-
-  return useMemo(() => ({}), []); // You can return any memoized value here if needed
-}
+import { useId, useMemo } from 'react';
+
+export default function useOffcanvas() {
+  const identifier = useId();
+
+  return useMemo(
+    () => ({
+      identifier,
+    }),
+    [],
+  );
+}

package/src/components/pagination/PaginationItem.tsx

@@ -1,139 +1,139 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-import View, { ViewProps, ViewRef } from '../View';
-import useForcedContext from '../../hooks/useForcedContext';
-import ListContext from '../helpers/ListContext';
-
-export interface PaginationItemProps extends ViewProps {
-  active?: boolean;
-  disabled?: boolean;
-}
-
-const styles = StyleSheet.create({
-  '.pagination-item': css`
-    padding-bottom: $pagination-padding-y;
-    padding-top: $pagination-padding-y;
-    padding-left: $pagination-padding-x;
-    padding-right: $pagination-padding-x;
-    border: $list-group-border-width solid $list-group-border-color;
-
-    &:hover {
-      color: $pagination-hover-color;
-      background-color: $pagination-hover-bg;
-      border-color: $pagination-hover-border-color;
-    }
-
-    &:focus {
-      color: $pagination-focus-color;
-      background-color: $pagination-focus-bg;
-      //$pagination-focus-box-shadow:
-      //$pagination-focus-outline:
-    }
-  `,
-  '.pagination-item:first-child': css`
-    border-top-left-radius: $list-group-border-radius;
-    border-bottom-left-radius: $list-group-border-radius;
-  `,
-  '.pagination-item:last-child': css`
-    border-top-right-radius: $list-group-border-radius;
-    border-bottom-right-radius: $list-group-border-radius;
-  `,
-  '.pagination-item.active': css`
-    color: $pagination-active-color;
-    background-color: $pagination-active-bg;
-    border-color: $pagination-active-border-color;
-  `,
-  '.pagination-item.disabled': css`
-    color: $pagination-disabled-color;
-    background-color: $pagination-disabled-bg;
-    border-color: $pagination-disabled-border-color;
-  `,
-});
-
-const PaginationItem = React.forwardRef<ViewRef, PaginationItemProps>(
-  (props, ref) => {
-    const {
-      children,
-      active = false,
-      disabled = false,
-      style,
-      textStyle,
-      ...elementProps
-    } = props;
-
-    const { first, last } = useForcedContext(ListContext);
-
-    const classes = getStyles(styles, [
-      '.pagination-item',
-      first && '.pagination-item:first-child',
-      last && '.pagination-item:last-child',
-      active && '.pagination-item.active',
-      disabled && '.pagination-item.disabled',
-    ]);
-
-    const textClasses = getStyles(styles, [
-      active && '.pagination-item.active',
-      disabled && '.pagination-item.disabled',
-    ]);
-
-    const role = Platform.OS === 'web' ? 'listitem' : undefined;
-
-    return (
-      <View
-        {...elementProps}
-        ref={ref}
-        role={role}
-        style={[classes, style]}
-        textStyle={[textClasses, textStyle]}
-      >
-        {children}
-      </View>
-    );
-  },
-);
-
-PaginationItem.displayName = 'PaginationItem';
-
-export default PaginationItem;
-
-/*
-$pagination-padding-y:              .375rem;
-$pagination-padding-x:              .75rem;
-$pagination-padding-y-sm:           .25rem;
-$pagination-padding-x-sm:           .5rem;
-$pagination-padding-y-lg:           .75rem;
-$pagination-padding-x-lg:           1.5rem;
-
-$pagination-color:                  $link-color;
-$pagination-bg:                     $white;
-$pagination-border-width:           $border-width;
-$pagination-border-radius:          $border-radius;
-$pagination-margin-start:           -$pagination-border-width;
-$pagination-border-color:           $gray-300;
-
-$pagination-focus-color:            $link-hover-color;
-$pagination-focus-bg:               $gray-200;
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
-$pagination-focus-outline:          0;
-
-$pagination-hover-color:            $link-hover-color;
-$pagination-hover-bg:               $gray-200;
-$pagination-hover-border-color:     $gray-300;
-
-$pagination-active-color:           $component-active-color;
-$pagination-active-bg:              $component-active-bg;
-$pagination-active-border-color:    $pagination-active-bg;
-
-$pagination-disabled-color:         $gray-600;
-$pagination-disabled-bg:            $white;
-$pagination-disabled-border-color:  $gray-300;
-
-$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-$pagination-border-radius-sm:       $border-radius-sm;
-$pagination-border-radius-lg:       $border-radius-lg;
-
-*/
+import React from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import View, { ViewProps, ViewRef } from '../View';
+import useForcedContext from '../../hooks/useForcedContext';
+import ListContext from '../helpers/ListContext';
+
+export interface PaginationItemProps extends ViewProps {
+  active?: boolean;
+  disabled?: boolean;
+}
+
+const styles = StyleSheet.create({
+  '.pagination-item': css`
+    padding-bottom: $pagination-padding-y;
+    padding-top: $pagination-padding-y;
+    padding-left: $pagination-padding-x;
+    padding-right: $pagination-padding-x;
+    border: $list-group-border-width solid $list-group-border-color;
+
+    &:hover {
+      color: $pagination-hover-color;
+      background-color: $pagination-hover-bg;
+      border-color: $pagination-hover-border-color;
+    }
+
+    &:focus {
+      color: $pagination-focus-color;
+      background-color: $pagination-focus-bg;
+      // box-shadow: $pagination-focus-box-shadow;
+      // outline: $pagination-focus-outline;
+    }
+  `,
+  '.pagination-item:first-child': css`
+    border-top-left-radius: $list-group-border-radius;
+    border-bottom-left-radius: $list-group-border-radius;
+  `,
+  '.pagination-item:last-child': css`
+    border-top-right-radius: $list-group-border-radius;
+    border-bottom-right-radius: $list-group-border-radius;
+  `,
+  '.pagination-item.active': css`
+    color: $pagination-active-color;
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border-color;
+  `,
+  '.pagination-item.disabled': css`
+    color: $pagination-disabled-color;
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border-color;
+  `,
+});
+
+const PaginationItem = React.forwardRef<ViewRef, PaginationItemProps>(
+  (props, ref) => {
+    const {
+      children,
+      active = false,
+      disabled = false,
+      style,
+      textStyle,
+      ...elementProps
+    } = props;
+
+    const { first, last } = useForcedContext(ListContext);
+
+    const classes = getStyles(styles, [
+      '.pagination-item',
+      first && '.pagination-item:first-child',
+      last && '.pagination-item:last-child',
+      active && '.pagination-item.active',
+      disabled && '.pagination-item.disabled',
+    ]);
+
+    const textClasses = getStyles(styles, [
+      active && '.pagination-item.active',
+      disabled && '.pagination-item.disabled',
+    ]);
+
+    const role = Platform.OS === 'web' ? 'listitem' : undefined;
+
+    return (
+      <View
+        {...elementProps}
+        ref={ref}
+        role={role}
+        style={[classes, style]}
+        textStyle={[textClasses, textStyle]}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+PaginationItem.displayName = 'PaginationItem';
+
+export default PaginationItem;
+
+/*
+$pagination-padding-y:              .375rem;
+$pagination-padding-x:              .75rem;
+$pagination-padding-y-sm:           .25rem;
+$pagination-padding-x-sm:           .5rem;
+$pagination-padding-y-lg:           .75rem;
+$pagination-padding-x-lg:           1.5rem;
+
+$pagination-color:                  $link-color;
+$pagination-bg:                     $white;
+$pagination-border-width:           $border-width;
+$pagination-border-radius:          $border-radius;
+$pagination-margin-start:           -$pagination-border-width;
+$pagination-border-color:           $gray-300;
+
+$pagination-focus-color:            $link-hover-color;
+$pagination-focus-bg:               $gray-200;
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
+$pagination-focus-outline:          0;
+
+$pagination-hover-color:            $link-hover-color;
+$pagination-hover-bg:               $gray-200;
+$pagination-hover-border-color:     $gray-300;
+
+$pagination-active-color:           $component-active-color;
+$pagination-active-bg:              $component-active-bg;
+$pagination-active-border-color:    $pagination-active-bg;
+
+$pagination-disabled-color:         $gray-600;
+$pagination-disabled-bg:            $white;
+$pagination-disabled-border-color:  $gray-300;
+
+$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+$pagination-border-radius-sm:       $border-radius-sm;
+$pagination-border-radius-lg:       $border-radius-lg;
+
+*/

package/src/components/popover/Popover.tsx

@@ -1,90 +1,87 @@
-import React, { useMemo } from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import { getStyles, transformPlacement } from '../../utils';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import PopoverArrow from './PopoverArrow';
-import PopoverHeader from './PopoverHeader';
-import PopoverBody from './PopoverBody';
-import PopoverContext from './PopoverContext';
-import { ExtendedViewStyle, StyleProp, PlacementAxis } from '../../types';
-
-export interface PopoverProps extends ViewProps {
-  placement?: PlacementAxis;
-  popper?: boolean;
-  arrowStyle?: StyleProp<ExtendedViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  '.popover': css`
-    position: absolute;
-    // top: 0;
-    // left: 0 #{"/* rtl:ignore */"};
-    z-index: $zindex-popover;
-    // display: block;
-    max-width: $popover-max-width;
-    background-color: $popover-bg;
-    // background-clip: padding-box;
-    border: $popover-border-width solid $popover-border-color;
-    border-radius: $popover-border-radius;
-    // @include box-shadow($popover-box-shadow);
-  `,
-  '.popover --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: $popover-font-size;
-    // Allow breaking very long words so they don't overflow the popover's bounds
-    // word-wrap: break-word;
-  `,
-});
-
-const Popover = React.forwardRef<ViewRef, PopoverProps>((props, ref) => {
-  const {
-    children,
-    placement = 'right',
-    popper,
-    style,
-    textStyle,
-    arrowStyle,
-    ...elementProps
-  } = props;
-
-  const popover = useMemo(
-    () => ({
-      placement: transformPlacement(placement),
-      arrowStyle,
-      popper,
-    }),
-    [arrowStyle],
-  );
-
-  const classes = getStyles(styles, ['.popover']);
-  const textClasses = getStyles(styles, ['.popover --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]}
-    >
-      <PopoverContext.Provider value={popover}>
-        {children}
-      </PopoverContext.Provider>
-    </View>
-  );
-});
-
-Popover.displayName = 'Popover';
-
-export default Object.assign(Popover, {
-  Arrow: PopoverArrow,
-  Header: PopoverHeader,
-  Body: PopoverBody,
-});
+import React, { useMemo } from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import PopoverArrow from './PopoverArrow';
+import PopoverHeader from './PopoverHeader';
+import PopoverBody from './PopoverBody';
+import PopoverContext from './PopoverContext';
+import type { OverlayPhysicalPlacement } from '../../types';
+
+export interface PopoverProps extends ViewProps {
+  placement?: OverlayPhysicalPlacement;
+  floating?: boolean;
+}
+
+const styles = StyleSheet.create({
+  '.popover': css`
+    position: absolute;
+    // top: 0;
+    // left: 0 #{"/* rtl:ignore */"};
+    // z-index: $zindex-popover;
+    // display: block;
+    max-width: $popover-max-width;
+    background-color: $popover-bg;
+    // background-clip: padding-box;
+    border: $popover-border-width solid $popover-border-color;
+    border-radius: $popover-border-radius;
+    // @include box-shadow($popover-box-shadow);
+  `,
+  '.popover --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: $popover-font-size;
+    // Allow breaking very long words so they don't overflow the popover's bounds
+    // word-wrap: break-word;
+  `,
+});
+
+const Popover = React.forwardRef<ViewRef, PopoverProps>((props, ref) => {
+  const {
+    children,
+    placement = 'right',
+    floating,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const popover = useMemo(
+    () => ({
+      placement,
+      floating,
+    }),
+    [placement, floating],
+  );
+
+  const classes = getStyles(styles, ['.popover']);
+  const textClasses = getStyles(styles, ['.popover --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]}
+    >
+      <PopoverContext.Provider value={popover}>
+        {children}
+      </PopoverContext.Provider>
+    </View>
+  );
+});
+
+Popover.displayName = 'Popover';
+
+export default Object.assign(Popover, {
+  Arrow: PopoverArrow,
+  Header: PopoverHeader,
+  Body: PopoverBody,
+});

package/src/components/popover/PopoverArrow.tsx

@@ -6,7 +6,7 @@ import { getStyles } from '../../utils';
 import css from '../../style/css';
 import useForcedContext from '../../hooks/useForcedContext';
 import PopoverContext from './PopoverContext';
-import type { ThemeVariables } from '../../types';
+import type { OverlayPlacement, ThemeVariables } from '../../types';
 
 export interface PopoverArrowProps extends ViewProps {}
 
@@ -159,27 +159,43 @@ const styles = StyleSheet.create({
   `,
 });
 
+const transformPlacement = (placement: OverlayPlacement) => {
+  if (placement === 'left') {
+    return 'start';
+  }
+
+  if (placement === 'right') {
+    return 'end';
+  }
+
+  return placement;
+};
+
 const PopoverArrow = React.forwardRef<ViewRef, PopoverArrowProps>(
   (props, ref) => {
     const { style, ...elementProps } = props;
 
-    const { placement, arrowStyle, popper } = useForcedContext(PopoverContext);
+    const context = useForcedContext(PopoverContext);
+
+    // 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.
+    const placement = transformPlacement(context.placement);
 
     const classes = getStyles(styles, [
       '.popover-arrow',
-      popper && `.bs-popover-${placement} .popover-arrow`,
+      context.floating && `.bs-popover-${placement} .popover-arrow`,
     ]);
     const beforeClasses = getStyles(styles, [
       '.popover-arrow::before',
-      popper && `.bs-popover-${placement} .popover-arrow::before`,
+      context.floating && `.bs-popover-${placement} .popover-arrow::before`,
     ]);
     const afterClasses = getStyles(styles, [
       '.popover-arrow::after',
-      popper && `.bs-popover-${placement} .popover-arrow::after`,
+      context.floating && `.bs-popover-${placement} .popover-arrow::after`,
     ]);
 
     return (
-      <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
+      <View {...elementProps} ref={ref} style={[classes, style]}>
         <View style={beforeClasses} />
         <View style={afterClasses} />
       </View>

package/src/components/popover/PopoverContext.ts

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