bootstrap-rn 0.4.7 → 0.4.9

package/src/components/type/Paragraph.tsx

@@ -1,42 +1,40 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Text, { TextProps, TextRef } from '../Text';
-import { getStyles } from '../../utils';
-
-export interface ParagraphProps extends TextProps {
-  lead?: boolean;
-}
-
-const styles = StyleSheet.create({
-  paragraph: css`
-    margin-top: 0;
-    margin-bottom: $paragraph-margin-bottom;
-  `,
-  '.lead': css`
-    font-size: $lead-font-size;
-    line-height: $lead-font-size * $line-height-base; // added for bootstrap-rn
-    font-weight: $lead-font-weight;
-  `,
-});
-
-const Heading = React.forwardRef<TextRef, ParagraphProps>((props, ref) => {
-  const { children, lead, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['paragraph', lead && '.lead']);
-
-  // Accessiblity role paragraph is only supported on web.
-  const role = Platform.OS === 'web' ? 'paragraph' : undefined;
-
-  return (
-    // @ts-expect-error web only role
-    <Text {...elementProps} ref={ref} role={role} style={[classes, style]}>
-      {children}
-    </Text>
-  );
-});
-
-Heading.displayName = 'Heading';
-
-export default Heading;
+import React from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Text, { TextProps, TextRef } from '../Text';
+import { getStyles } from '../../utils';
+
+export interface ParagraphProps extends TextProps {
+  lead?: boolean;
+}
+
+const styles = StyleSheet.create({
+  paragraph: css`
+    margin-top: 0;
+    margin-bottom: $paragraph-margin-bottom;
+  `,
+  '.lead': css`
+    font-size: $lead-font-size;
+    line-height: $lead-font-size * $line-height-base; // added for bootstrap-rn
+    font-weight: $lead-font-weight;
+  `,
+});
+
+function Heading(props: ParagraphProps & React.RefAttributes<TextRef>) {
+  const { ref, children, lead, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['paragraph', lead && '.lead']);
+
+  // Accessiblity role paragraph is only supported on web.
+  const role = Platform.OS === 'web' ? 'paragraph' : undefined;
+
+  return (
+    // @ts-expect-error web only role
+    <Text {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export default Heading;

package/src/hooks/useFocusRing.ts

@@ -1,7 +1,7 @@
 import type { AriaFocusRingProps, FocusRingAria } from '@react-aria/focus';
 
 export default function useFocusRing(
-  // @ts-expect-error Argument props is used on web only
+  // @ts-expect-error Parameter is used on web only.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   props?: AriaFocusRingProps,
 ): FocusRingAria {

package/src/hooks/useScrollbarEffects.ts

@@ -1,15 +1,16 @@
-import { useMemo, RefObject } from 'react';
-import type { ViewRef } from '../components/View';
+import { useMemo } from 'react';
 
-export default function useScrollbarEffects(
-  // @ts-expect-error Argument elements is used on the web only.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  elements: RefObject<ViewRef | null>[],
-) {
+export default function useScrollbarEffects() {
   return useMemo(
     () => ({
       hide() {},
       show() {},
+      subscribe() {
+        return () => {};
+      },
+      getOffset() {
+        return 0;
+      },
     }),
     [],
   );

package/src/hooks/useScrollbarEffects.web.ts

@@ -1,10 +1,10 @@
-import { useRef, useMemo, RefObject } from 'react';
-import type { ViewRef } from '../components/View';
+import { useRef, useMemo } from 'react';
 
 type ScrollbarEffectsState = {
   counter: number;
-  elements: HTMLElement[];
-  originalWidths: string[];
+  offset: number;
+  listeners: Set<() => void>;
+  originalBodyWidth: string;
   originalBodyOverflow: string;
 };
 
@@ -13,13 +13,12 @@ const computeScrollbarWidth = () => {
   return Math.abs(window.innerWidth - documentWidth);
 };
 
-export default function useScrollbarEffects(
-  elements: RefObject<ViewRef | null>[],
-) {
+export default function useScrollbarEffects() {
   const state = useRef<ScrollbarEffectsState>({
     counter: 0,
-    elements: [],
-    originalWidths: [],
+    offset: 0,
+    listeners: new Set(),
+    originalBodyWidth: '',
     originalBodyOverflow: '',
   });
 
@@ -35,27 +34,15 @@ export default function useScrollbarEffects(
         const rect = document.body.getBoundingClientRect();
         const isBodyOverflowing = rect.left + rect.right < window.innerWidth;
 
-        // Set body and fixed elements padding adjustments.
-        const fixedElements = elements
-          .filter((ref) => ref.current)
-          .map((ref) => ref.current);
-
-        // @ts-expect-error fixedElements should be of type HTMLElement[]
-        state.current.elements = [document.body, ...fixedElements];
-
-        state.current.originalWidths = state.current.elements.map(
-          (el) => el.style.width || '',
-        );
-
+        state.current.originalBodyWidth = document.body.style.width || '';
         state.current.originalBodyOverflow = document.body.style.overflow || '';
 
         if (isBodyOverflowing) {
           const scrollbarWidth = computeScrollbarWidth();
 
-          state.current.elements.forEach((el) => {
-            // eslint-disable-next-line no-param-reassign
-            el.style.width = `calc(100% - ${scrollbarWidth}px)`;
-          });
+          document.body.style.width = `calc(100% - ${scrollbarWidth}px)`;
+          state.current.offset = scrollbarWidth;
+          state.current.listeners.forEach((listener) => listener());
         }
 
         // Add "overflow: hidden" to body element.
@@ -71,11 +58,20 @@ export default function useScrollbarEffects(
         // Remove "overflow: hidden" from body element.
         document.body.style.overflow = state.current.originalBodyOverflow;
 
-        // Reset body padding adjustments.
-        state.current.elements.forEach((el, key) => {
-          // eslint-disable-next-line no-param-reassign
-          el.style.width = state.current.originalWidths[key] || '';
-        });
+        // Reset body width adjustment.
+        document.body.style.width = state.current.originalBodyWidth;
+        state.current.offset = 0;
+        state.current.listeners.forEach((listener) => listener());
+      },
+      subscribe(listener: () => void) {
+        state.current.listeners.add(listener);
+
+        return () => {
+          state.current.listeners.delete(listener);
+        };
+      },
+      getOffset() {
+        return state.current.offset;
       },
     }),
     [],

package/src/hooks/useScrollbarOffset.ts

@@ -0,0 +1,12 @@
+import { useSyncExternalStore } from 'react';
+import Context from '../Context';
+import useForcedContext from './useForcedContext';
+
+export default function useScrollbarOffset() {
+  const context = useForcedContext(Context);
+
+  return useSyncExternalStore(
+    context.scrollbar.subscribe,
+    context.scrollbar.getOffset,
+  );
+}

package/src/index.ts

@@ -4,7 +4,7 @@ import makeTheme from './style/makeTheme';
 import StyleSheet from './style/StyleSheet';
 import Context from './Context';
 import Provider from './Provider';
-import useFixedElement from './hooks/useFixedElement';
+import useScrollbarOffset from './hooks/useScrollbarOffset';
 import useMedia from './hooks/useMedia';
 import useStyle from './hooks/useStyle';
 
@@ -15,7 +15,7 @@ export {
   makeTheme,
   Provider,
   StyleSheet,
-  useFixedElement,
+  useScrollbarOffset,
   useMedia,
   useStyle,
 };
@@ -194,7 +194,7 @@ export type { PortalProps } from './components/helpers/Portal';
 export type { PortalHostProps } from './components/helpers/PortalHost';
 
 export { default as Pressable } from './components/Pressable';
-export type { PressableProps } from './components/Pressable';
+export type { PressableProps, PressableRef } from './components/Pressable';
 
 export { default as Pagination } from './components/pagination/Pagination';
 export type { PaginationProps } from './components/pagination/Pagination';

package/src/utils.ts

@@ -52,7 +52,7 @@ export function getStyles<T extends string>(
 
 export function concatRefs<T>(
   ...refs: (React.Ref<T> | undefined)[]
-): React.Ref<T> {
+): (instance: T | null) => void {
   return (element) => {
     refs.forEach((ref) => {
       if (typeof ref === 'function') {

package/lib/module/hooks/useFixedElement.js

@@ -1,17 +0,0 @@
-"use strict";
-
-import { useRef, useEffect } from 'react';
-import Context from "../Context.js";
-import useForcedContext from "./useForcedContext.js";
-export default function useFixedElement() {
-  const context = useForcedContext(Context);
-  const ref = useRef(null);
-  useEffect(() => {
-    const link = context.addFixedElement(ref);
-    return () => {
-      link.remove();
-    };
-  }, [context]);
-  return ref;
-}
-//# sourceMappingURL=useFixedElement.js.map

package/lib/module/hooks/useFixedElement.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useRef","useEffect","Context","useForcedContext","useFixedElement","context","ref","link","addFixedElement","remove"],"sourceRoot":"..\\..\\..\\src","sources":["hooks/useFixedElement.ts"],"mappings":";;AAAA,SAASA,MAAM,EAAEC,SAAS,QAAQ,OAAO;AACzC,OAAOC,OAAO,MAAM,eAAY;AAChC,OAAOC,gBAAgB,MAAM,uBAAoB;AAEjD,eAAe,SAASC,eAAeA,CAAA,EAAG;EACxC,MAAMC,OAAO,GAAGF,gBAAgB,CAACD,OAAO,CAAC;EACzC,MAAMI,GAAG,GAAGN,MAAM,CAAC,IAAI,CAAC;EAExBC,SAAS,CAAC,MAAM;IACd,MAAMM,IAAI,GAAGF,OAAO,CAACG,eAAe,CAACF,GAAG,CAAC;IAEzC,OAAO,MAAM;MACXC,IAAI,CAACE,MAAM,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACJ,OAAO,CAAC,CAAC;EAEb,OAAOC,GAAG;AACZ","ignoreList":[]}

package/lib/typescript/hooks/useFixedElement.d.ts

@@ -1,2 +0,0 @@
-export default function useFixedElement(): import("react").RefObject<null>;
-//# sourceMappingURL=useFixedElement.d.ts.map

package/lib/typescript/hooks/useFixedElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFixedElement.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFixedElement.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,eAAe,oCAatC"}

package/src/hooks/useFixedElement.ts

@@ -1,18 +0,0 @@
-import { useRef, useEffect } from 'react';
-import Context from '../Context';
-import useForcedContext from './useForcedContext';
-
-export default function useFixedElement() {
-  const context = useForcedContext(Context);
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const link = context.addFixedElement(ref);
-
-    return () => {
-      link.remove();
-    };
-  }, [context]);
-
-  return ref;
-}