bootstrap-rn 0.4.7 → 0.4.8

package/lib/module/components/forms/Picker.js

@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
     &:focus {
       border-color: $form-select-focus-border-color;
       @include platform(web) {
-        outline-width: 0;
+        outline-style: none; // outline: 0;
         box-shadow: $form-select-focus-box-shadow;
       }
     }

package/lib/module/components/helpers/Portal.web.js

@@ -1,12 +1,27 @@
 "use strict";
 
+import { useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
 function Portal({
   hostName = DEFAULT_PORTAL_HOST,
   children
 }) {
-  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;
   }

package/lib/module/components/helpers/Portal.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["createPortal","DEFAULT_PORTAL_HOST","Portal","hostName","children","element","document","getElementById"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/helpers/Portal.web.tsx"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,WAAW;AASxC,MAAMC,mBAAmB,GAAG,sCAAsC;AAElE,SAASC,MAAMA,CAAC;EAAEC,QAAQ,GAAGF,mBAAmB;EAAEG;AAAsB,CAAC,EAAE;EACzE,MAAMC,OAAO,GAAGC,QAAQ,CAACC,cAAc,CAACJ,QAAQ,CAAC;EAEjD,IAAI,CAACE,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBAAOL,YAAY,CAACI,QAAQ,EAAEC,OAAO,CAAC;AACxC;AAEA,eAAeH,MAAM","ignoreList":[]}
+{"version":3,"names":["useLayoutEffect","useState","createPortal","DEFAULT_PORTAL_HOST","Portal","hostName","children","element","setElement","document","getElementById","host","console","warn"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/helpers/Portal.web.tsx"],"mappings":";;AAAA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AACjD,SAASC,YAAY,QAAQ,WAAW;AASxC,MAAMC,mBAAmB,GAAG,sCAAsC;AAElE,SAASC,MAAMA,CAAC;EAAEC,QAAQ,GAAGF,mBAAmB;EAAEG;AAAsB,CAAC,EAAE;EACzE,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGP,QAAQ,CAAC,MACrCQ,QAAQ,CAACC,cAAc,CAACL,QAAQ,CAClC,CAAC;;EAED;EACA;EACAL,eAAe,CAAC,MAAM;IACpB,IAAI,CAACO,OAAO,EAAE;MACZ,MAAMI,IAAI,GAAGF,QAAQ,CAACC,cAAc,CAACL,QAAQ,CAAC;MAE9C,IAAIM,IAAI,EAAE;QACRH,UAAU,CAACG,IAAI,CAAC;MAClB,CAAC,MAAM;QACL;QACAC,OAAO,CAACC,IAAI,CACV,0CAA0CR,QAAQ,gEACpD,CAAC;MACH;IACF;EACF,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAI,CAACE,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBAAOL,YAAY,CAACI,QAAQ,EAAEC,OAAO,CAAC;AACxC;AAEA,eAAeH,MAAM","ignoreList":[]}

package/lib/typescript/components/helpers/Portal.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.web.d.ts","sourceRoot":"","sources":["../../../../src/components/helpers/Portal.web.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAID,iBAAS,MAAM,CAAC,EAAE,QAA8B,EAAE,QAAQ,EAAE,EAAE,WAAW,sCAQxE;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Portal.web.d.ts","sourceRoot":"","sources":["../../../../src/components/helpers/Portal.web.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAID,iBAAS,MAAM,CAAC,EAAE,QAA8B,EAAE,QAAQ,EAAE,EAAE,WAAW,sCA2BxE;AAED,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,92 +1,92 @@
-{
-  "name": "bootstrap-rn",
-  "version": "0.4.7",
-  "description": "Bootstrap RN provides Bootstrap components for React Native.",
-  "author": "Markus Wetzel <markuswetzel@gmx.net>",
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "native",
-    "react-native",
-    "bootstrap",
-    "ui",
-    "style"
-  ],
-  "repository": "https://github.com/examunity/bootstrap-rn.git",
-  "bugs": {
-    "url": "https://github.com/examunity/bootstrap-rn/issues"
-  },
-  "main": "lib/module/index.js",
-  "module": "lib/module/index.js",
-  "source": "src/index.ts",
-  "types": "./lib/typescript/index.d.ts",
-  "scripts": {
-    "check-types": "tsc --noEmit",
-    "build": "bob build",
-    "prepare": "packsy validate && yarn build",
-    "lint": "packsy pre-commit && yarn check-types"
-  },
-  "files": [
-    "src",
-    "lib"
-  ],
-  "dependencies": {
-    "@floating-ui/react": "^0.27.16",
-    "@react-aria/focus": "^3.21.3",
-    "@rn-primitives/hooks": "^1.3.0",
-    "@rn-primitives/portal": "^1.3.0",
-    "css-to-react-native": "^3.2.0",
-    "tiny-invariant": "^1.3.1"
-  },
-  "devDependencies": {
-    "@types/react": "~19.1.10",
-    "@types/react-dom": "~19.1.10",
-    "packsy": "^0.2.5",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-builder-bob": "^0.40.17",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-svg": "15.12.1",
-    "react-native-web": "^0.21.0",
-    "typescript": "~5.9.2"
-  },
-  "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19",
-    "react-native": ">=0.78",
-    "react-native-safe-area-context": ">=5",
-    "react-native-svg": ">=15",
-    "react-native-web": ">=0.20"
-  },
-  "peerDependenciesMeta": {
-    "react-dom": {
-      "optional": true
-    },
-    "react-native-web": {
-      "optional": true
-    }
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "packsy pre-commit"
-    }
-  },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      "typescript"
-    ]
-  },
-  "engines": {
-    "node": ">= 16",
-    "npm": ">= 8"
-  }
-}
+{
+  "name": "bootstrap-rn",
+  "version": "0.4.8",
+  "description": "Bootstrap RN provides Bootstrap components for React Native.",
+  "author": "Markus Wetzel <markuswetzel@gmx.net>",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "native",
+    "react-native",
+    "bootstrap",
+    "ui",
+    "style"
+  ],
+  "repository": "https://github.com/examunity/bootstrap-rn.git",
+  "bugs": {
+    "url": "https://github.com/examunity/bootstrap-rn/issues"
+  },
+  "main": "lib/module/index.js",
+  "module": "lib/module/index.js",
+  "source": "src/index.ts",
+  "types": "./lib/typescript/index.d.ts",
+  "scripts": {
+    "check-types": "tsc --noEmit",
+    "build": "bob build",
+    "prepare": "packsy validate && yarn build",
+    "lint": "packsy pre-commit && yarn check-types"
+  },
+  "files": [
+    "src",
+    "lib"
+  ],
+  "dependencies": {
+    "@floating-ui/react": "^0.27.16",
+    "@react-aria/focus": "^3.21.3",
+    "@rn-primitives/hooks": "^1.3.0",
+    "@rn-primitives/portal": "^1.3.0",
+    "css-to-react-native": "^3.2.0",
+    "tiny-invariant": "^1.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.10",
+    "@types/react-dom": "~19.1.10",
+    "packsy": "^0.2.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-web": "^0.21.0",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-native": ">=0.78",
+    "react-native-safe-area-context": ">=5",
+    "react-native-svg": ">=15",
+    "react-native-web": ">=0.20"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "packsy pre-commit"
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "engines": {
+    "node": ">= 16",
+    "npm": ">= 8"
+  }
+}

package/src/components/Body.tsx

@@ -1,68 +1,68 @@
-import React, { useMemo } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import StyleSheet from '../style/StyleSheet';
-import css from '../style/css';
-import { getStyles } from '../utils';
-import TextStyleContext from '../style/TextStyleContext';
-import useMedia from '../hooks/useMedia';
-import useStyle from '../hooks/useStyle';
-import View, { ViewProps, ViewRef } from './View';
-
-export interface BodyProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  body: css`
-    background-color: $body-bg;
-    flex-grow: 1; // added for bootstrap-rn
-    flex-shrink: 1; // added for bootstrap-rn
-  `,
-  'body --text': css`
-    color: $body-color;
-    text-align: $body-text-align;
-  `,
-});
-
-const Body = React.forwardRef<ViewRef, BodyProps>((props, ref) => {
-  const { children, style, textStyle, styleName, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['body']);
-  const textClasses = getStyles(styles, ['body --text']);
-
-  const media = useMedia();
-
-  const insets = useSafeAreaInsets();
-
-  const resolveStyle = useStyle(
-    [
-      classes,
-      {
-        marginTop: insets.top,
-        marginBottom: insets.bottom,
-        marginRight: insets.right,
-        marginLeft: insets.left,
-      },
-      style,
-    ],
-    styleName,
-  );
-  const resolveTextStyle = useStyle([textClasses, textStyle]);
-
-  const contextValue = useMemo(
-    () => ({
-      style: resolveTextStyle({ media }),
-    }),
-    [resolveTextStyle, media],
-  );
-
-  return (
-    <View {...elementProps} ref={ref} style={resolveStyle({ media })}>
-      <TextStyleContext.Provider value={contextValue}>
-        {children}
-      </TextStyleContext.Provider>
-    </View>
-  );
-});
-
-Body.displayName = 'Body';
-
-export default Body;
+import React, { useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import StyleSheet from '../style/StyleSheet';
+import css from '../style/css';
+import { getStyles } from '../utils';
+import TextStyleContext from '../style/TextStyleContext';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import View, { ViewProps, ViewRef } from './View';
+
+export interface BodyProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  body: css`
+    background-color: $body-bg;
+    flex-grow: 1; // added for bootstrap-rn
+    flex-shrink: 1; // added for bootstrap-rn
+  `,
+  'body --text': css`
+    color: $body-color;
+    text-align: $body-text-align;
+  `,
+});
+
+const Body = React.forwardRef<ViewRef, BodyProps>((props, ref) => {
+  const { children, style, textStyle, styleName, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['body']);
+  const textClasses = getStyles(styles, ['body --text']);
+
+  const media = useMedia();
+
+  const insets = useSafeAreaInsets();
+
+  const resolveStyle = useStyle(
+    [
+      classes,
+      {
+        marginTop: insets.top,
+        marginBottom: insets.bottom,
+        marginRight: insets.right,
+        marginLeft: insets.left,
+      },
+      style,
+    ],
+    styleName,
+  );
+  const resolveTextStyle = useStyle([textClasses, textStyle]);
+
+  const contextValue = useMemo(
+    () => ({
+      style: resolveTextStyle({ media }),
+    }),
+    [resolveTextStyle, media],
+  );
+
+  return (
+    <View {...elementProps} ref={ref} style={resolveStyle({ media })}>
+      <TextStyleContext.Provider value={contextValue}>
+        {children}
+      </TextStyleContext.Provider>
+    </View>
+  );
+});
+
+Body.displayName = 'Body';
+
+export default Body;

package/src/components/forms/Picker.tsx

@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
     &:focus {
       border-color: $form-select-focus-border-color;
       @include platform(web) {
-        outline-width: 0;
+        outline-style: none; // outline: 0;
         box-shadow: $form-select-focus-box-shadow;
       }
     }

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;