bootstrap-rn 0.4.7 → 0.4.9

package/src/components/forms/internals/PickerNative.tsx

@@ -107,90 +107,90 @@ function DefaultMenuComponent({
 }
 /* eslint-enable */
 
-const PickerNative = React.forwardRef<PressableRef, PickerNativeProps>(
-  (props, ref) => {
-    const {
-      children,
-      selectedValue,
-      onValueChange = () => {},
-      onFocus = () => {},
-      onBlur = () => {},
-      placeholder,
-      placeholderTextColor,
-      disabled = false,
-      MenuComponent = DefaultMenuComponent,
-      style,
-      ...elementProps
-    } = props;
-
-    const background = useBackground(style);
-
-    const [visible, setVisible] = useState(false);
-
-    const textStyle = extractTextStyles(background.style);
-
-    const showPlaceholder =
-      selectedValue === undefined || selectedValue === null;
-
-    const handleValueChange = (nextValue: string) => {
-      onValueChange(nextValue);
-      setVisible(false);
-    };
-    const handleClose = () => {
-      setVisible(false);
-    };
-
-    const handleFocus = (event: FocusEvent) => {
-      onFocus(event);
-    };
-
-    const handleBlur = (event: BlurEvent) => {
-      onBlur(event);
-    };
-
-    return (
-      <>
-        <Pressable
-          {...elementProps}
-          ref={ref}
-          role="combobox"
-          onPress={() => {
-            setVisible(true);
-          }}
-          onFocus={(event: FocusEvent) => {
-            handleFocus(event);
-          }}
-          onBlur={(event: BlurEvent) => {
-            handleBlur(event);
-          }}
-          disabled={disabled}
-          style={background.style}
+function PickerNative(
+  props: PickerNativeProps & React.RefAttributes<PressableRef>,
+) {
+  const {
+    ref,
+    children,
+    selectedValue,
+    onValueChange = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    placeholder,
+    placeholderTextColor,
+    disabled = false,
+    MenuComponent = DefaultMenuComponent,
+    style,
+    ...elementProps
+  } = props;
+
+  const background = useBackground(style);
+
+  const [visible, setVisible] = useState(false);
+
+  const textStyle = extractTextStyles(background.style);
+
+  const showPlaceholder = selectedValue === undefined || selectedValue === null;
+
+  const handleValueChange = (nextValue: string) => {
+    onValueChange(nextValue);
+    setVisible(false);
+  };
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  const handleFocus = (event: FocusEvent) => {
+    onFocus(event);
+  };
+
+  const handleBlur = (event: BlurEvent) => {
+    onBlur(event);
+  };
+
+  return (
+    <>
+      <Pressable
+        {...elementProps}
+        ref={ref}
+        role="combobox"
+        onPress={() => {
+          setVisible(true);
+        }}
+        onFocus={(event: FocusEvent) => {
+          handleFocus(event);
+        }}
+        onBlur={(event: BlurEvent) => {
+          handleBlur(event);
+        }}
+        disabled={disabled}
+        style={background.style}
+      >
+        {background.element}
+        <Text
+          numberOfLines={1}
+          style={[
+            textStyle,
+            showPlaceholder && { color: placeholderTextColor },
+          ]}
+        >
+          {showPlaceholder
+            ? placeholder || <Text>&nbsp;</Text>
+            : getText({ children, selectedValue })}
+        </Text>
+      </Pressable>
+      {visible && (
+        <MenuComponent
+          selectedValue={selectedValue}
+          onValueChange={handleValueChange}
+          onClose={handleClose}
         >
-          {background.element}
-          <Text
-            numberOfLines={1}
-            style={[
-              textStyle,
-              showPlaceholder && { color: placeholderTextColor },
-            ]}
-          >
-            {showPlaceholder
-              ? placeholder || <Text>&nbsp;</Text>
-              : getText({ children, selectedValue })}
-          </Text>
-        </Pressable>
-        {visible && (
-          <MenuComponent
-            selectedValue={selectedValue}
-            onValueChange={handleValueChange}
-            onClose={handleClose}
-          >
-            {children}
-          </MenuComponent>
-        )}
-      </>
-    );
-  },
-);
+          {children}
+        </MenuComponent>
+      )}
+    </>
+  );
+}
 
 export default PickerNative;

package/src/components/forms/internals/PickerNativeItem.tsx

@@ -24,36 +24,34 @@ const styles = StyleSheet.create({
   itemDisabled: css``,
 });
 
-const PickerNativeItem = React.forwardRef<ViewRef, PickerNativeItemProps>(
-  (props, ref) => {
-    const { label, value, disabled = false } = props;
-
-    const { selectedValue, handleValueChange } =
-      useForcedContext(PickerNativeContext);
-    const media = useMedia();
-
-    const classes = getStyles(styles, ['item', disabled && 'itemDisabled']);
-
-    const resolveStyle = useStyle(classes);
-
-    const selected = value === selectedValue;
-
-    return (
-      <Pressable
-        ref={ref}
-        onPress={() => {
-          handleValueChange(value);
-        }}
-        aria-selected={selected}
-        disabled={disabled}
-        style={resolveStyle({ media })}
-      >
-        <Text styleName={selected ? 'text-primary' : undefined}>{label}</Text>
-      </Pressable>
-    );
-  },
-);
-
-PickerNativeItem.displayName = 'PickerNativeItem';
+function PickerNativeItem(
+  props: PickerNativeItemProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, label, value, disabled = false } = props;
+
+  const { selectedValue, handleValueChange } =
+    useForcedContext(PickerNativeContext);
+  const media = useMedia();
+
+  const classes = getStyles(styles, ['item', disabled && 'itemDisabled']);
+
+  const resolveStyle = useStyle(classes);
+
+  const selected = value === selectedValue;
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={() => {
+        handleValueChange(value);
+      }}
+      aria-selected={selected}
+      disabled={disabled}
+      style={resolveStyle({ media })}
+    >
+      <Text styleName={selected ? 'text-primary' : undefined}>{label}</Text>
+    </Pressable>
+  );
+}
 
 export default PickerNativeItem;

package/src/components/forms/internals/PickerWeb.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, forwardRef } from 'react';
+import React, { useMemo } from 'react';
 import {
   // @ts-expect-error web only import
   Picker as BasePicker,
@@ -33,8 +33,9 @@ const getOptionStyle = (
   return null;
 };
 
-const PickerWeb = forwardRef<PressableRef, PickerWebProps>((props, ref) => {
+function PickerWeb(props: PickerWebProps & React.RefAttributes<PressableRef>) {
   const {
+    ref,
     children,
     selectedValue,
     onValueChange = () => {},
@@ -80,6 +81,6 @@ const PickerWeb = forwardRef<PressableRef, PickerWebProps>((props, ref) => {
       </PickerWebContext.Provider>
     </BasePicker>
   );
-});
+}
 
 export default PickerWeb;

package/src/components/forms/internals/PickerWebItem.tsx

@@ -13,24 +13,22 @@ export interface PickerWebItemProps extends ViewProps {
   disabled?: boolean;
 }
 
-const PickerWebItem = React.forwardRef<ViewRef, PickerWebItemProps>(
-  (props, ref) => {
-    const { label, value, disabled = false } = props;
+function PickerWebItem(
+  props: PickerWebItemProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, label, value, disabled = false } = props;
 
-    const { optionColor } = useForcedContext(PickerWebContext);
+  const { optionColor } = useForcedContext(PickerWebContext);
 
-    return (
-      <WebPicker.Item
-        ref={ref}
-        label={label}
-        value={value}
-        disabled={disabled}
-        color={optionColor}
-      />
-    );
-  },
-);
-
-PickerWebItem.displayName = 'PickerWebItem';
+  return (
+    <WebPicker.Item
+      ref={ref}
+      label={label}
+      value={value}
+      disabled={disabled}
+      color={optionColor}
+    />
+  );
+}
 
 export default PickerWebItem;

package/src/components/grid/Col.tsx

@@ -1,97 +1,96 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { GRID_BREAKPOINTS, GRID_COLUMNS } from '../../theme/proxies';
-import { infix } from '../../theme/breakpoints';
-import { getStyles, each, makeArray, normalize } from '../../utils';
-
-export interface ColProps extends ViewProps {
-  size: 'auto' | number;
-  sizeSm?: 'auto' | number;
-  sizeMd?: 'auto' | number;
-  sizeLg?: 'auto' | number;
-  sizeXl?: 'auto' | number;
-}
-
-const styles = StyleSheet.create({
-  '*': css`
-    // Add box sizing if only the grid is loaded
-    /* box-sizing: if(
-      variable-exists(include-column-box-sizing) and $include-column-box-sizing,
-      border-box,
-      null
-    ); */
-    // Prevent columns from becoming too narrow when at smaller grid tiers by
-    // always setting "width: 100%;". This works because we set the width
-    // later on to override this initial width.
-    flex-shrink: 0;
-    width: 100%;
-    @include platform(web) {
-      max-width: 100%; // Prevent ".col-auto", ".col" (& responsive variants) from breaking out the grid
-    }
-    padding-right: $grid-gutter-width * 0.5;
-    padding-left: $grid-gutter-width * 0.5;
-    margin-top: 0;
-  `,
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.col${infix(breakpoint)}`]: css`
-      @include media-breakpoint-up(${breakpoint}) {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      }
-    `,
-    [`.col${infix(breakpoint)}-auto`]: css`
-      @include media-breakpoint-up(${breakpoint}) {
-        flex: 0 0 auto;
-        width: auto;
-      }
-    `,
-    ...normalize(
-      makeArray(GRID_COLUMNS - 1, (i: number) => ({
-        [`.col${infix(breakpoint)}-${i + 1}`]: css`
-          @include media-breakpoint-up(${breakpoint}) {
-            flex: 0 0 auto;
-            width: ${String(((i + 1) / GRID_COLUMNS) * 100)}%;
-          }
-        `,
-        [`.offset${infix(breakpoint)}-${i}`]: css`
-          @include media-breakpoint-up(${breakpoint}) {
-            margin-left: ${String((i / GRID_COLUMNS) * 100)}%;
-          }
-        `,
-      })),
-    ),
-  })),
-});
-
-const Col = React.forwardRef<ViewRef, ColProps>((props, ref) => {
-  const {
-    children,
-    size,
-    sizeSm,
-    sizeMd,
-    sizeLg,
-    sizeXl,
-    style,
-    ...elementProps
-  } = props;
-
-  const classes = getStyles(styles, [
-    '*',
-    `.col-${size.toString()}`,
-    sizeSm && `.col-sm-${sizeSm.toString()}`,
-    sizeMd && `.col-md-${sizeMd.toString()}`,
-    sizeLg && `.col-lg-${sizeLg.toString()}`,
-    sizeXl && `.col-xl-${sizeXl.toString()}`,
-  ]);
-
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      {children}
-    </View>
-  );
-});
-
-Col.displayName = 'Col';
-
-export default Col;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { GRID_BREAKPOINTS, GRID_COLUMNS } from '../../theme/proxies';
+import { infix } from '../../theme/breakpoints';
+import { getStyles, each, makeArray, normalize } from '../../utils';
+
+export interface ColProps extends ViewProps {
+  size: 'auto' | number;
+  sizeSm?: 'auto' | number;
+  sizeMd?: 'auto' | number;
+  sizeLg?: 'auto' | number;
+  sizeXl?: 'auto' | number;
+}
+
+const styles = StyleSheet.create({
+  '*': css`
+    // Add box sizing if only the grid is loaded
+    /* box-sizing: if(
+      variable-exists(include-column-box-sizing) and $include-column-box-sizing,
+      border-box,
+      null
+    ); */
+    // Prevent columns from becoming too narrow when at smaller grid tiers by
+    // always setting "width: 100%;". This works because we set the width
+    // later on to override this initial width.
+    flex-shrink: 0;
+    width: 100%;
+    @include platform(web) {
+      max-width: 100%; // Prevent ".col-auto", ".col" (& responsive variants) from breaking out the grid
+    }
+    padding-right: $grid-gutter-width * 0.5;
+    padding-left: $grid-gutter-width * 0.5;
+    margin-top: 0;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.col${infix(breakpoint)}`]: css`
+      @include media-breakpoint-up(${breakpoint}) {
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      }
+    `,
+    [`.col${infix(breakpoint)}-auto`]: css`
+      @include media-breakpoint-up(${breakpoint}) {
+        flex: 0 0 auto;
+        width: auto;
+      }
+    `,
+    ...normalize(
+      makeArray(GRID_COLUMNS - 1, (i: number) => ({
+        [`.col${infix(breakpoint)}-${i + 1}`]: css`
+          @include media-breakpoint-up(${breakpoint}) {
+            flex: 0 0 auto;
+            width: ${String(((i + 1) / GRID_COLUMNS) * 100)}%;
+          }
+        `,
+        [`.offset${infix(breakpoint)}-${i}`]: css`
+          @include media-breakpoint-up(${breakpoint}) {
+            margin-left: ${String((i / GRID_COLUMNS) * 100)}%;
+          }
+        `,
+      })),
+    ),
+  })),
+});
+
+function Col(props: ColProps & React.RefAttributes<ViewRef>) {
+  const {
+    ref,
+    children,
+    size,
+    sizeSm,
+    sizeMd,
+    sizeLg,
+    sizeXl,
+    style,
+    ...elementProps
+  } = props;
+
+  const classes = getStyles(styles, [
+    '*',
+    `.col-${size.toString()}`,
+    sizeSm && `.col-sm-${sizeSm.toString()}`,
+    sizeMd && `.col-md-${sizeMd.toString()}`,
+    sizeLg && `.col-lg-${sizeLg.toString()}`,
+    sizeXl && `.col-xl-${sizeXl.toString()}`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default Col;

package/src/components/grid/Row.tsx

@@ -1,34 +1,32 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { getStyles } from '../../utils';
-
-export interface RowProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.row': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    flex-wrap: wrap;
-    margin-top: 0;
-    margin-right: -0.5 * $grid-gutter-width;
-    margin-left: -0.5 * $grid-gutter-width;
-  `,
-});
-
-const Row = React.forwardRef<ViewRef, RowProps>((props, ref) => {
-  const { children, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.row']);
-
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      {children}
-    </View>
-  );
-});
-
-Row.displayName = 'Row';
-
-export default Row;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles } from '../../utils';
+
+export interface RowProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.row': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    margin-top: 0;
+    margin-right: -0.5 * $grid-gutter-width;
+    margin-left: -0.5 * $grid-gutter-width;
+  `,
+});
+
+function Row(props: RowProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.row']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default Row;

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

@@ -33,10 +33,10 @@ function Dialog({
       return undefined;
     }
 
-    context.scrollbars.hide();
+    context.scrollbar.hide();
 
     return () => {
-      context.scrollbars.show();
+      context.scrollbar.show();
     };
   }, [context, scroll]);
 

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

@@ -1,3 +1,4 @@
+import { useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 export interface PortalProps {
@@ -10,7 +11,26 @@ export interface PortalProps {
 const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
 
 function Portal({ hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
-  const element = document.getElementById(hostName);
+  const [element, setElement] = useState(() =>
+    document.getElementById(hostName),
+  );
+
+  // Retry lookup after mount, before paint, in case the host element
+  // was not yet committed to the DOM during the initial render.
+  useLayoutEffect(() => {
+    if (!element) {
+      const host = document.getElementById(hostName);
+
+      if (host) {
+        setElement(host);
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Portal: No host element found with id "${hostName}". Make sure <PortalHost /> is rendered in the component tree.`,
+        );
+      }
+    }
+  }, [hostName]);
 
   if (!element) {
     return null;