bootstrap-rn 0.3.6 → 0.4.0

package/lib/types/theme/variables.d.ts

@@ -1,6 +1,6 @@
 declare const variables: {
     (theme: object, key: string): import("react-native").ViewStyle | (Omit<import("react-native").ImageStyle, "overflow"> & {
-        overflow?: "visible" | "hidden" | "scroll" | undefined;
+        overflow?: "visible" | "hidden" | "scroll";
     }) | import("../types").SpecialInteractionStyle<import("../types").BaseStyle>;
     ast: import("../style/transform").RootNode;
 };

package/lib/types/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ExtendedStyle, ThemeVariables, StyleValue, PlacementAxis, TransformedPlacementAxis } from './types';
 export declare function each<T extends Record<string, string | ((t: ThemeVariables) => StyleValue)>>(source: T, apply: (key: keyof T, resolve: (t: ThemeVariables) => StyleValue) => Record<string, any>): Record<string, any>;
 export declare function normalize(value: object[]): object;
@@ -6,7 +5,7 @@ export declare function makeProxy<T extends (string | number)[]>(name: string, k
 export declare function makeArray(length: number, callback: (index: number) => object): object[];
 type FalsyValue = false | undefined | null | '' | 0;
 export declare function getStyles<T extends string>(styles: Record<string, ExtendedStyle>, keys: (T | FalsyValue)[]): ExtendedStyle[];
-export declare function concatRefs(...refs: React.LegacyRef<unknown>[]): React.RefCallback<unknown>;
+export declare function concatRefs<T>(...refs: React.Ref<T>[]): React.Ref<T>;
 export declare function optional(condition: boolean, value: object): object | undefined;
 export declare function getElementId(identifier: string, name: string): string;
 export declare function transformPlacement(placement: PlacementAxis): TransformedPlacementAxis;

package/lib/types/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,aAAa,EACb,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAEjB,wBAAgB,IAAI,CAClB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,CAAC,CAAC,EAEtE,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CACL,GAAG,EAAE,MAAM,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,KAEvC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAQzB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAExC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EACrD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,6BAO2B,cAAc,KAAK,UAAU,IAEhE;AAED,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,YAE5E;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AAEpD,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EACxC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EACrC,IAAI,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,mBAKzB;AAED,wBAAgB,UAAU,CACxB,GAAG,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,GAClC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAY5B;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAEzD;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAE5D;AAED,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,aAAa,GACvB,wBAAwB,CAS1B"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,aAAa,EACb,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAEjB,wBAAgB,IAAI,CAClB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,CAAC,CAAC,EAEtE,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CACL,GAAG,EAAE,MAAM,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,KAEvC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAQzB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAExC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EACrD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,MAOI,GAAG,oBAAoB,cAAc,KAAK,UAAU,IAEhE;AAED,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,YAE5E;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AAEpD,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EACxC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EACrC,IAAI,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,mBAKzB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAWnE;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAEzD;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAE5D;AAED,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,aAAa,GACvB,wBAAwB,CAS1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-rn",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Bootstrap RN provides Bootstrap components for React Native.",
   "author": "Markus Wetzel <markuswetzel@gmx.net>",
   "license": "MIT",
@@ -38,15 +38,15 @@
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@types/react": "18.3.2",
+    "@types/react": "^19.0.7",
     "cpy-cli": "^5.0.0",
     "packsy": "^0.2.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.72.5",
-    "react-native-builder-bob": "^0.23.1",
-    "react-native-svg": "13.9.0",
-    "typescript": "^5.4.5"
+    "react-native": "0.76.6",
+    "react-native-builder-bob": "^0.33.3",
+    "react-native-svg": "15.8.0",
+    "typescript": "^5.5.2"
   },
   "peerDependencies": {
     "@types/react": ">=17",

package/src/components/View.tsx

@@ -1,57 +1,55 @@
-import React, { ForwardedRef, useContext, useMemo } from 'react';
-import { View as BaseView, ViewProps as BaseViewProps } from 'react-native';
-import TextStyleContext from '../style/TextStyleContext';
-import useMedia from '../hooks/useMedia';
-import useStyle from '../hooks/useStyle';
-import type {
-  ExtendedTextStyle,
-  StyleName,
-  StyleProp,
-  ExtendedViewStyle,
-} from '../types';
-
-export type ViewRef = BaseView;
-
-export interface ViewProps extends Omit<BaseViewProps, 'style'> {
-  style?: StyleProp<ExtendedViewStyle>;
-  textStyle?: StyleProp<ExtendedTextStyle>;
-  styleName?: StyleName;
-}
-
-const View = React.forwardRef<ViewRef, ViewProps>(
-  (props, ref: ForwardedRef<BaseView>) => {
-    const { children, style, textStyle, styleName, ...elementProps } = props;
-
-    const media = useMedia();
-    const context = useContext(TextStyleContext);
-
-    const resolveStyle = useStyle(style, styleName);
-    const resolveTextStyle = useStyle([context?.style, textStyle]);
-
-    const hasTextStyle = context?.style || textStyle;
-
-    const contextValue = useMemo(
-      () => ({
-        style: resolveTextStyle({ media }),
-        hasAncestor: context?.hasTextAncestor,
-      }),
-      [resolveTextStyle, media, context],
-    );
-
-    return (
-      <BaseView {...elementProps} ref={ref} style={resolveStyle({ media })}>
-        {hasTextStyle ? (
-          <TextStyleContext.Provider value={contextValue}>
-            {children}
-          </TextStyleContext.Provider>
-        ) : (
-          children
-        )}
-      </BaseView>
-    );
-  },
-);
-
-View.displayName = 'View';
-
-export default View;
+import React, { useContext, useMemo } from 'react';
+import { View as BaseView, ViewProps as BaseViewProps } from 'react-native';
+import TextStyleContext from '../style/TextStyleContext';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import type {
+  ExtendedTextStyle,
+  StyleName,
+  StyleProp,
+  ExtendedViewStyle,
+} from '../types';
+
+export type ViewRef = BaseView;
+
+export interface ViewProps extends Omit<BaseViewProps, 'style'> {
+  style?: StyleProp<ExtendedViewStyle>;
+  textStyle?: StyleProp<ExtendedTextStyle>;
+  styleName?: StyleName;
+}
+
+const View = React.forwardRef<ViewRef, ViewProps>((props, ref) => {
+  const { children, style, textStyle, styleName, ...elementProps } = props;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const resolveStyle = useStyle(style, styleName);
+  const resolveTextStyle = useStyle([context?.style, textStyle]);
+
+  const hasTextStyle = context?.style || textStyle;
+
+  const contextValue = useMemo(
+    () => ({
+      style: resolveTextStyle({ media }),
+      hasAncestor: context?.hasTextAncestor,
+    }),
+    [resolveTextStyle, media, context],
+  );
+
+  return (
+    <BaseView {...elementProps} ref={ref} style={resolveStyle({ media })}>
+      {hasTextStyle ? (
+        <TextStyleContext.Provider value={contextValue}>
+          {children}
+        </TextStyleContext.Provider>
+      ) : (
+        children
+      )}
+    </BaseView>
+  );
+});
+
+View.displayName = 'View';
+
+export default View;

package/src/components/dropdown/DropdownContext.ts

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

package/src/components/dropdown/DropdownToggle.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-import useToggleDropdown, { UseToggleDropdownProps } from './useToggleDropdown';
-
-export interface DropdownToggleProps {
-  children: (args: UseToggleDropdownProps) => React.ReactNode;
-}
-
-function DropdownToggle(props: DropdownToggleProps) {
-  const { children } = props;
-
-  const toggleProps = useToggleDropdown({});
-
-  return children(toggleProps);
-}
-
-DropdownToggle.displayName = 'DropdownToggle';
-
-export default DropdownToggle;
+import React from 'react';
+import useToggleDropdown from './useToggleDropdown';
+
+export interface DropdownToggleProps {
+  children: (args: ReturnType<typeof useToggleDropdown>) => React.ReactNode;
+}
+
+function DropdownToggle(props: DropdownToggleProps) {
+  const { children } = props;
+
+  const toggleProps = useToggleDropdown({});
+
+  return children(toggleProps);
+}
+
+DropdownToggle.displayName = 'DropdownToggle';
+
+export default DropdownToggle;

package/src/components/forms/Picker.tsx

@@ -10,7 +10,7 @@ import useStyle from '../../hooks/useStyle';
 import useModifier from '../../hooks/useModifier';
 import PickerWeb from './internals/PickerWeb';
 import PickerNative from './internals/PickerNative';
-import PickerItem from './PickerItem';
+import PickerItem, { PickerItemProps } from './PickerItem';
 import PickerContext from './PickerContext';
 import type {
   FormValidationState,
@@ -27,7 +27,9 @@ export interface MenuComponentProps {
 }
 
 export interface PickerProps extends UseFormFieldProps, PressableProps {
-  children: React.ReactElement | React.ReactElement[];
+  children:
+    | React.ReactElement<PickerItemProps>
+    | React.ReactElement<PickerItemProps>[];
   selectedValue?: string | null | undefined;
   onValueChange?: (value: string) => void;
   onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

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

@@ -15,6 +15,7 @@ import useBackground from '../../../hooks/useBackground';
 import PickerNativeContext from './PickerNativeContext';
 import type { PickerProps, MenuComponentProps } from '../Picker';
 import type { BaseStyle } from '../../../types';
+import type { PickerItemProps } from '../PickerItem';
 
 export interface PickerNativeProps extends PickerProps {
   style: TextStyle[];
@@ -63,7 +64,9 @@ const extractTextStyles = (style: BaseStyle[]) => {
 };
 
 type GetTextProps = {
-  children: React.ReactElement | React.ReactElement[];
+  children:
+    | React.ReactElement<PickerItemProps>
+    | React.ReactElement<PickerItemProps>[];
   selectedValue?: string | null | undefined;
 };
 

package/src/components/helpers/BackdropHandler.tsx

@@ -1,143 +1,143 @@
-import React, { useEffect, useMemo, RefObject } from 'react';
-import { Platform, findNodeHandle } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Pressable from '../Pressable';
-import { ViewRef } from '../View';
-
-type BackdropType = boolean | 'static';
-type AutoCloseType = boolean | string;
-
-const styles = StyleSheet.create({
-  handler: css`
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    position: absolute;
-    flex-grow: 1;
-  `,
-});
-
-const initialState = {
-  waitingForMouseUp: false,
-  ignoreBackdropClick: false,
-};
-
-interface BackdropHandlerProps {
-  toggleRef?: RefObject<ViewRef>;
-  dialogRef: RefObject<ViewRef>;
-  onClose?: () => void;
-  autoClose?: AutoCloseType;
-  backdrop?: BackdropType;
-}
-
-function BackdropHandler(props: BackdropHandlerProps) {
-  const {
-    toggleRef,
-    dialogRef,
-    onClose: handleClose,
-    backdrop = true,
-    autoClose = 'outside',
-  } = props;
-
-  if (Platform.OS === 'web') {
-    const state = useMemo(() => initialState, []);
-
-    useEffect(() => {
-      const toggle = toggleRef
-        ? // @ts-expect-error web only method for converting to HTMLElement
-          (findNodeHandle(toggleRef.current) as HTMLElement)
-        : undefined;
-      // @ts-expect-error web only method for converting to HTMLElement
-      const dialog = findNodeHandle(dialogRef.current) as HTMLElement;
-
-      const handleDialogMouseDown = () => {
-        state.waitingForMouseUp = true;
-      };
-
-      // Workaround for chrome, because chrome does not fire onMouseDown event
-      // for dialog when clicking on the <select> menu.
-      const handleDialogMouseUp = () => {
-        state.ignoreBackdropClick = true;
-      };
-
-      const handleDocumentClick = ({ target }: MouseEvent) => {
-        const isDialogClick =
-          state.ignoreBackdropClick ||
-          (dialog && dialog.contains(target as Node));
-
-        if (backdrop === 'static' || autoClose === false) {
-          return;
-        }
-
-        // Click outside -> return if autoClose is inside.
-        if (!isDialogClick && autoClose === 'inside') {
-          return;
-        }
-
-        // Click inside / on dialog -> return if autoClose is outside.
-        if (isDialogClick) {
-          state.ignoreBackdropClick = false;
-
-          if (autoClose === 'outside') {
-            return;
-          }
-        }
-
-        // Click on toggle -> return always.
-        if (toggle && (target === toggle || toggle.contains(target as Node))) {
-          return;
-        }
-
-        handleClose?.();
-      };
-
-      const handleDocumentMouseUp = () => {
-        if (state.waitingForMouseUp) {
-          state.ignoreBackdropClick = true;
-        }
-
-        state.waitingForMouseUp = false;
-      };
-
-      if (dialog) {
-        dialog.addEventListener('mousedown', handleDialogMouseDown);
-        dialog.addEventListener('mouseup', handleDialogMouseUp);
-      }
-      // See https://github.com/necolas/react-native-web/issues/2115
-      document.addEventListener('click', handleDocumentClick, true);
-      document.addEventListener('mouseup', handleDocumentMouseUp, true);
-
-      return () => {
-        if (dialog) {
-          dialog.removeEventListener('mousedown', handleDialogMouseDown);
-          dialog.removeEventListener('mouseup', handleDialogMouseUp);
-        }
-        document.removeEventListener('click', handleDocumentClick, true);
-        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
-      };
-    }, [backdrop, autoClose]);
-
-    return null;
-  }
-
-  if (backdrop !== true) {
-    return null;
-  }
-
-  return (
-    <Pressable
-      style={styles.handler}
-      onPress={() => {
-        handleClose?.();
-      }}
-      accessible={false}
-      importantForAccessibility="no"
-    />
-  );
-}
-
-BackdropHandler.displayName = 'BackdropHandler';
-
-export default BackdropHandler;
+import React, { useEffect, useMemo, RefObject } from 'react';
+import { Platform, findNodeHandle } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import { ViewRef } from '../View';
+
+type BackdropType = boolean | 'static';
+type AutoCloseType = boolean | string;
+
+const styles = StyleSheet.create({
+  handler: css`
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    flex-grow: 1;
+  `,
+});
+
+const initialState = {
+  waitingForMouseUp: false,
+  ignoreBackdropClick: false,
+};
+
+interface BackdropHandlerProps {
+  toggleRef?: RefObject<ViewRef | null>;
+  dialogRef: RefObject<ViewRef | null>;
+  onClose?: () => void;
+  autoClose?: AutoCloseType;
+  backdrop?: BackdropType;
+}
+
+function BackdropHandler(props: BackdropHandlerProps) {
+  const {
+    toggleRef,
+    dialogRef,
+    onClose: handleClose,
+    backdrop = true,
+    autoClose = 'outside',
+  } = props;
+
+  if (Platform.OS === 'web') {
+    const state = useMemo(() => initialState, []);
+
+    useEffect(() => {
+      const toggle = toggleRef
+        ? // @ts-expect-error web only method for converting to HTMLElement
+          (findNodeHandle(toggleRef.current) as HTMLElement)
+        : undefined;
+      // @ts-expect-error web only method for converting to HTMLElement
+      const dialog = findNodeHandle(dialogRef.current) as HTMLElement;
+
+      const handleDialogMouseDown = () => {
+        state.waitingForMouseUp = true;
+      };
+
+      // Workaround for chrome, because chrome does not fire onMouseDown event
+      // for dialog when clicking on the <select> menu.
+      const handleDialogMouseUp = () => {
+        state.ignoreBackdropClick = true;
+      };
+
+      const handleDocumentClick = ({ target }: MouseEvent) => {
+        const isDialogClick =
+          state.ignoreBackdropClick ||
+          (dialog && dialog.contains(target as Node));
+
+        if (backdrop === 'static' || autoClose === false) {
+          return;
+        }
+
+        // Click outside -> return if autoClose is inside.
+        if (!isDialogClick && autoClose === 'inside') {
+          return;
+        }
+
+        // Click inside / on dialog -> return if autoClose is outside.
+        if (isDialogClick) {
+          state.ignoreBackdropClick = false;
+
+          if (autoClose === 'outside') {
+            return;
+          }
+        }
+
+        // Click on toggle -> return always.
+        if (toggle && (target === toggle || toggle.contains(target as Node))) {
+          return;
+        }
+
+        handleClose?.();
+      };
+
+      const handleDocumentMouseUp = () => {
+        if (state.waitingForMouseUp) {
+          state.ignoreBackdropClick = true;
+        }
+
+        state.waitingForMouseUp = false;
+      };
+
+      if (dialog) {
+        dialog.addEventListener('mousedown', handleDialogMouseDown);
+        dialog.addEventListener('mouseup', handleDialogMouseUp);
+      }
+      // See https://github.com/necolas/react-native-web/issues/2115
+      document.addEventListener('click', handleDocumentClick, true);
+      document.addEventListener('mouseup', handleDocumentMouseUp, true);
+
+      return () => {
+        if (dialog) {
+          dialog.removeEventListener('mousedown', handleDialogMouseDown);
+          dialog.removeEventListener('mouseup', handleDialogMouseUp);
+        }
+        document.removeEventListener('click', handleDocumentClick, true);
+        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
+      };
+    }, [backdrop, autoClose]);
+
+    return null;
+  }
+
+  if (backdrop !== true) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      style={styles.handler}
+      onPress={() => {
+        handleClose?.();
+      }}
+      accessible={false}
+      importantForAccessibility="no"
+    />
+  );
+}
+
+BackdropHandler.displayName = 'BackdropHandler';
+
+export default BackdropHandler;