bootstrap-rn 0.3.4 → 0.3.5

package/src/components/Text.tsx

@@ -1,117 +1,119 @@
-import React, { useContext, useMemo } from 'react';
-import { Text as BaseText, TextProps as BaseTextProps } from 'react-native';
-import StyleSheet from '../style/StyleSheet';
-import css from '../style/css';
-import useMedia from '../hooks/useMedia';
-import TextStyleContext from '../style/TextStyleContext';
-import { getStyles } from '../utils';
-import { THEME_COLORS } from '../theme/proxies';
-import useStyle from '../hooks/useStyle';
-import type { ExtendedTextStyle, StyleProp, StyleName } from '../types';
-
-export type TextRef = BaseText;
-
-type ThemeColors =
-  | keyof typeof THEME_COLORS
-  | 'muted'
-  | 'black-50'
-  | 'white-50';
-
-export interface TextProps extends Omit<BaseTextProps, 'style'> {
-  color?: ThemeColors;
-  small?: boolean;
-  mark?: boolean;
-  bold?: boolean;
-  italic?: boolean;
-  style?: StyleProp<ExtendedTextStyle>;
-  styleName?: StyleName;
-}
-
-const styles = StyleSheet.create({
-  text: css`
-    font-family: $font-family-base;
-    font-size: $font-size-base;
-    font-weight: $font-weight-base;
-    line-height: $font-size-base * $line-height-base;
-  `,
-  strong: css`
-    font-weight: $font-weight-bolder;
-  `,
-  italic: css`
-    font-style: italic;
-  `,
-  small: css`
-    font-size: $small-font-size;
-    line-height: $small-font-size * $line-height-base;
-  `,
-  mark: css`
-    padding: $mark-padding;
-    background-color: $mark-bg;
-  `,
-});
-
-const getStyleName = (styleName?: StyleName, color?: ThemeColors) => {
-  if (!color) {
-    return styleName;
-  }
-  return styleName ? `text-${color} ${styleName}` : `text-${color}`;
-};
-
-const Text = React.forwardRef<TextRef, TextProps>((props, ref) => {
-  const {
-    color, // will be deprecated soon
-    bold = false,
-    italic = false,
-    mark = false,
-    small = false,
-    style,
-    styleName,
-    ...elementProps
-  } = props;
-
-  const media = useMedia();
-  const context = useContext(TextStyleContext);
-
-  const classes = getStyles(styles, [
-    bold && 'strong',
-    italic && 'italic',
-    small && 'small',
-    mark && 'mark',
-  ]);
-
-  const resolveStyle = useStyle(
-    [
-      (!context || !context.hasTextAncestor) && styles.text,
-      context && context.style,
-      classes,
-      style,
-    ],
-    getStyleName(styleName, color),
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      style: null,
-      hasTextAncestor: true,
-    }),
-    [],
-  );
-
-  const element = (
-    <BaseText {...elementProps} ref={ref} style={resolveStyle({ media })} />
-  );
-
-  if (context && context.hasTextAncestor && !context.style) {
-    return element;
-  }
-
-  return (
-    <TextStyleContext.Provider value={contextValue}>
-      {element}
-    </TextStyleContext.Provider>
-  );
-});
-
-Text.displayName = 'Text';
-
-export default Text;
+import React, { useContext, useMemo } from 'react';
+import { Text as BaseText, TextProps as BaseTextProps } from 'react-native';
+import StyleSheet from '../style/StyleSheet';
+import css from '../style/css';
+import useMedia from '../hooks/useMedia';
+import TextStyleContext from '../style/TextStyleContext';
+import { getStyles } from '../utils';
+import { THEME_COLORS } from '../theme/proxies';
+import useStyle from '../hooks/useStyle';
+import type { ExtendedTextStyle, StyleProp, StyleName } from '../types';
+
+export type TextRef = BaseText;
+
+type ThemeColors =
+  | keyof typeof THEME_COLORS
+  | 'body'
+  | 'muted'
+  | 'white'
+  | 'black-50'
+  | 'white-50';
+
+export interface TextProps extends Omit<BaseTextProps, 'style'> {
+  color?: ThemeColors;
+  small?: boolean;
+  mark?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  style?: StyleProp<ExtendedTextStyle>;
+  styleName?: StyleName;
+}
+
+const styles = StyleSheet.create({
+  text: css`
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    font-weight: $font-weight-base;
+    line-height: $font-size-base * $line-height-base;
+  `,
+  strong: css`
+    font-weight: $font-weight-bolder;
+  `,
+  italic: css`
+    font-style: italic;
+  `,
+  small: css`
+    font-size: $small-font-size;
+    line-height: $small-font-size * $line-height-base;
+  `,
+  mark: css`
+    padding: $mark-padding;
+    background-color: $mark-bg;
+  `,
+});
+
+const getStyleName = (styleName?: StyleName, color?: ThemeColors) => {
+  if (!color) {
+    return styleName;
+  }
+  return styleName ? `text-${color} ${styleName}` : `text-${color}`;
+};
+
+const Text = React.forwardRef<TextRef, TextProps>((props, ref) => {
+  const {
+    color, // will be deprecated soon
+    bold = false,
+    italic = false,
+    mark = false,
+    small = false,
+    style,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const classes = getStyles(styles, [
+    bold && 'strong',
+    italic && 'italic',
+    small && 'small',
+    mark && 'mark',
+  ]);
+
+  const resolveStyle = useStyle(
+    [
+      (!context || !context.hasTextAncestor) && styles.text,
+      context && context.style,
+      classes,
+      style,
+    ],
+    getStyleName(styleName, color),
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      style: null,
+      hasTextAncestor: true,
+    }),
+    [],
+  );
+
+  const element = (
+    <BaseText {...elementProps} ref={ref} style={resolveStyle({ media })} />
+  );
+
+  if (context && context.hasTextAncestor && !context.style) {
+    return element;
+  }
+
+  return (
+    <TextStyleContext.Provider value={contextValue}>
+      {element}
+    </TextStyleContext.Provider>
+  );
+});
+
+Text.displayName = 'Text';
+
+export default Text;

package/src/components/dropdown/DropdownContext.ts

@@ -3,7 +3,7 @@ import type { ViewRef } from '../View';
 
 export type DropdownDirection = 'up' | 'down' | 'start' | 'end';
 
-type DropdownContextProps = {
+export interface DropdownContextProps {
   identifier: string;
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -12,7 +12,7 @@ type DropdownContextProps = {
   center: boolean;
   display: string;
   autoClose: string | boolean;
-};
+}
 
 const DropdownContext = createContext<DropdownContextProps | null>(null);
 

package/src/components/dropdown/DropdownMenu.tsx

@@ -18,7 +18,7 @@ import type { MediaHandler, Placement } from '../../types';
 
 type AlignmentBreakpoints = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
-export interface DropdownProps extends ViewProps {
+export interface DropdownMenuProps extends ViewProps {
   start?: AlignmentBreakpoints;
   right?: AlignmentBreakpoints;
   end?: AlignmentBreakpoints;
@@ -137,145 +137,147 @@ const transformPlacement = (
   return `${direction} top`;
 };
 
-const DropdownMenu = React.forwardRef<ViewRef, DropdownProps>((props, ref) => {
-  const {
-    children,
-    start = true,
-    right,
-    end = false,
-    style,
-    textStyle,
-    ...elementProps
-  } = props;
+const DropdownMenu = React.forwardRef<ViewRef, DropdownMenuProps>(
+  (props, ref) => {
+    const {
+      children,
+      start = true,
+      right,
+      end = false,
+      style,
+      textStyle,
+      ...elementProps
+    } = props;
 
-  if (right !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn('Prop "right" is deprecated, please use "end" instead.');
-  }
-
-  const navbar = useContext(NavbarContext);
-  const media = useMedia();
-  const dialogRef = useRef(null);
+    if (right !== undefined) {
+      // eslint-disable-next-line no-console
+      console.warn('Prop "right" is deprecated, please use "end" instead.');
+    }
 
-  const dropdown = useForcedContext(DropdownContext);
+    const navbar = useContext(NavbarContext);
+    const media = useMedia();
+    const dialogRef = useRef(null);
 
-  const {
-    identifier,
-    toggleRef,
-    visible,
-    setVisible,
-    direction,
-    display,
-    autoClose,
-  } = dropdown;
+    const dropdown = useForcedContext(DropdownContext);
 
-  if (!visible) {
-    return null;
-  }
+    const {
+      identifier,
+      toggleRef,
+      visible,
+      setVisible,
+      direction,
+      display,
+      autoClose,
+    } = dropdown;
 
-  const isStatic = Platform.OS === 'web' && display === 'static';
-  const isCollapsedNavbar =
-    navbar &&
-    !(navbar.expand && (navbar.expand === true || media.up(navbar.expand)));
-  const hasStaticStyle = isStatic && !isCollapsedNavbar;
+    if (!visible) {
+      return null;
+    }
 
-  const classes = getStyles(styles, [
-    '.dropdown-menu',
-    // Non-Popper styles
-    hasStaticStyle && '.dropdown-menu[data-bs-popper]',
-    hasStaticStyle &&
-      start &&
-      `.dropdown-menu${
-        start === true ? '' : `-${start}`
-      }-start[data-bs-popper]`,
-    hasStaticStyle &&
-      end &&
-      `.dropdown-menu${end === true ? '' : `-${end}`}-end[data-bs-popper]`,
-    hasStaticStyle &&
-      direction === 'up' &&
-      '.dropup .dropdown-menu[data-bs-popper]',
-    hasStaticStyle &&
-      direction === 'end' &&
-      '.dropend .dropdown-menu[data-bs-popper]',
-    hasStaticStyle &&
-      direction === 'start' &&
-      '.dropstart .dropdown-menu[data-bs-popper]',
-    // Navbar styles
-    navbar && '.navbar-nav .dropdown-menu',
-    navbar &&
-      navbar.expand &&
-      `.navbar-expand${
-        navbar.expand === true ? '' : `-${navbar.expand}`
-      } .navbar-nav .dropdown-menu`,
-  ]);
-  const textClasses = getStyles(styles, ['.dropdown-menu --text']);
+    const isStatic = Platform.OS === 'web' && display === 'static';
+    const isCollapsedNavbar =
+      navbar &&
+      !(navbar.expand && (navbar.expand === true || media.up(navbar.expand)));
+    const hasStaticStyle = isStatic && !isCollapsedNavbar;
 
-  if (isStatic || isCollapsedNavbar) {
-    return (
-      <>
-        {!isCollapsedNavbar && (
-          <BackdropHandler
-            toggleRef={toggleRef}
-            dialogRef={dialogRef}
-            onClose={() => {
-              setVisible(false);
-            }}
-            autoClose={autoClose}
-          />
-        )}
-        <View
-          {...elementProps}
-          ref={concatRefs(dialogRef, ref)}
-          aria-labelledby={identifier}
-          style={[classes, style]}
-          textStyle={[textClasses, textStyle]}
-        >
-          {children}
-        </View>
-      </>
-    );
-  }
+    const classes = getStyles(styles, [
+      '.dropdown-menu',
+      // Non-Popper styles
+      hasStaticStyle && '.dropdown-menu[data-bs-popper]',
+      hasStaticStyle &&
+        start &&
+        `.dropdown-menu${
+          start === true ? '' : `-${start}`
+        }-start[data-bs-popper]`,
+      hasStaticStyle &&
+        end &&
+        `.dropdown-menu${end === true ? '' : `-${end}`}-end[data-bs-popper]`,
+      hasStaticStyle &&
+        direction === 'up' &&
+        '.dropup .dropdown-menu[data-bs-popper]',
+      hasStaticStyle &&
+        direction === 'end' &&
+        '.dropend .dropdown-menu[data-bs-popper]',
+      hasStaticStyle &&
+        direction === 'start' &&
+        '.dropstart .dropdown-menu[data-bs-popper]',
+      // Navbar styles
+      navbar && '.navbar-nav .dropdown-menu',
+      navbar &&
+        navbar.expand &&
+        `.navbar-expand${
+          navbar.expand === true ? '' : `-${navbar.expand}`
+        } .navbar-nav .dropdown-menu`,
+    ]);
+    const textClasses = getStyles(styles, ['.dropdown-menu --text']);
 
-  return (
-    <OverlayContainer>
-      <Overlay
-        placement={transformPlacement(media, direction, start, end)}
-        targetRef={toggleRef}
-        offset={normalizeNumber(StyleSheet.value('dropdown-spacer'))}
-        visible={visible}
-      >
-        {(overlay, overlayRef) => (
-          <>
+    if (isStatic || isCollapsedNavbar) {
+      return (
+        <>
+          {!isCollapsedNavbar && (
             <BackdropHandler
               toggleRef={toggleRef}
-              dialogRef={overlayRef}
+              dialogRef={dialogRef}
               onClose={() => {
                 setVisible(false);
               }}
               autoClose={autoClose}
             />
-            <View
-              {...elementProps}
-              ref={concatRefs(overlayRef, ref)}
-              aria-labelledby={identifier}
-              style={[
-                classes,
-                overlay.overlayProps.style,
-                { maxHeight: 'auto', opacity: overlay.rendered ? 1 : 0 },
-                style,
-              ]}
-              textStyle={[textClasses, textStyle]}
-            >
-              <DropdownContext.Provider value={dropdown}>
-                {children}
-              </DropdownContext.Provider>
-            </View>
-          </>
-        )}
-      </Overlay>
-    </OverlayContainer>
-  );
-});
+          )}
+          <View
+            {...elementProps}
+            ref={concatRefs(dialogRef, ref)}
+            aria-labelledby={identifier}
+            style={[classes, style]}
+            textStyle={[textClasses, textStyle]}
+          >
+            {children}
+          </View>
+        </>
+      );
+    }
+
+    return (
+      <OverlayContainer>
+        <Overlay
+          placement={transformPlacement(media, direction, start, end)}
+          targetRef={toggleRef}
+          offset={normalizeNumber(StyleSheet.value('dropdown-spacer'))}
+          visible={visible}
+        >
+          {(overlay, overlayRef) => (
+            <>
+              <BackdropHandler
+                toggleRef={toggleRef}
+                dialogRef={overlayRef}
+                onClose={() => {
+                  setVisible(false);
+                }}
+                autoClose={autoClose}
+              />
+              <View
+                {...elementProps}
+                ref={concatRefs(overlayRef, ref)}
+                aria-labelledby={identifier}
+                style={[
+                  classes,
+                  overlay.overlayProps.style,
+                  { maxHeight: 'auto', opacity: overlay.rendered ? 1 : 0 },
+                  style,
+                ]}
+                textStyle={[textClasses, textStyle]}
+              >
+                <DropdownContext.Provider value={dropdown}>
+                  {children}
+                </DropdownContext.Provider>
+              </View>
+            </>
+          )}
+        </Overlay>
+      </OverlayContainer>
+    );
+  },
+);
 
 DropdownMenu.displayName = 'DropdownMenu';
 

package/src/components/dropdown/DropdownToggle.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import useToggleDropdown, { UseToggleDropdownProps } from './useToggleDropdown';
 
-type DropdownToggleProps = {
+export interface DropdownToggleProps {
   children: (args: UseToggleDropdownProps) => React.ReactNode;
-};
+}
 
 function DropdownToggle(props: DropdownToggleProps) {
   const { children } = props;

package/src/components/list-group/ListGroupItemAction.tsx

@@ -13,7 +13,7 @@ import ListContext from '../helpers/ListContext';
 import ListGroupContext from './ListGroupContext';
 import type { ThemeVariables, UseTabbableProps } from '../../types';
 
-export interface ListGroupItemUseActionProps
+export interface ListGroupItemActionProps
   extends UseTabbableProps,
     PressableProps {
   color?: keyof typeof THEME_COLORS;
@@ -112,7 +112,7 @@ const actionStyles = StyleSheet.create({
 
 const ListGroupItemAction = React.forwardRef<
   PressableRef,
-  ListGroupItemUseActionProps
+  ListGroupItemActionProps
 >((props, ref) => {
   const [modifierProps, modifierRef] = useModifier('useTabbable', props, ref);
 

package/src/components/modal/ModalContext.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 
-type ModalContextType = {
+export interface ModalContextProps {
   scrollable: boolean;
-};
+}
 
-const ModalContext = React.createContext<ModalContextType | null>(null);
+const ModalContext = React.createContext<ModalContextProps | null>(null);
 
 ModalContext.displayName = 'ModalContext';
 

package/src/components/nav/Nav.tsx

@@ -6,10 +6,10 @@ import View, { ViewProps, ViewRef } from '../View';
 import { GRID_BREAKPOINTS } from '../../theme/proxies';
 import { infix, next } from '../../theme/breakpoints';
 import { getStyles, each } from '../../utils';
-import NavbarContext, { NavbarContextType } from '../navbar/NavbarContext';
+import NavbarContext, { NavbarContextProps } from '../navbar/NavbarContext';
 import NavContext, { NavVariant } from './NavContext';
 import NavLink from './NavLink';
-import TabContext, { TabContextType } from './TabContext';
+import TabContext, { TabContextProps } from './TabContext';
 
 export interface NavProps extends ViewProps {
   variant?: NavVariant;
@@ -47,8 +47,8 @@ const styles = StyleSheet.create({
 });
 
 const getRole = (
-  tabbable: TabContextType | null,
-  navbar: NavbarContextType | null,
+  tabbable: TabContextProps | null,
+  navbar: NavbarContextProps | null,
 ) => {
   if (tabbable) {
     return 'tablist';

package/src/components/nav/NavContext.ts

@@ -2,11 +2,11 @@ import { createContext } from 'react';
 
 export type NavVariant = 'tabs' | 'pills';
 
-type NavContextType = {
+export interface NavContextProps {
   variant?: NavVariant;
-};
+}
 
-const NavContext = createContext<NavContextType | null>(null);
+const NavContext = createContext<NavContextProps | null>(null);
 
 NavContext.displayName = 'NavContext';
 

package/src/components/nav/TabContext.ts

@@ -1,12 +1,12 @@
 import { createContext } from 'react';
 
-export type TabContextType = {
+export interface TabContextProps {
   identifier: string;
   activeTarget: string;
   setActiveTarget: (target: string) => void;
-};
+}
 
-const TabContext = createContext<TabContextType | null>(null);
+const TabContext = createContext<TabContextProps | null>(null);
 
 TabContext.displayName = 'TabContext';
 

package/src/components/navbar/NavbarBrand.tsx

@@ -6,7 +6,7 @@ import useForcedContext from '../../hooks/useForcedContext';
 import { getStyles } from '../../utils';
 import NavbarContext from './NavbarContext';
 
-export interface NavbarBrand extends PressableProps {}
+export interface NavbarBrandProps extends PressableProps {}
 
 const styles = StyleSheet.create({
   '.navbar-brand': css`
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const NavbarBrand = React.forwardRef<PressableRef, NavbarBrand>(
+const NavbarBrand = React.forwardRef<PressableRef, NavbarBrandProps>(
   (props, ref) => {
     const { children, style, textStyle, ...elementProps } = props;