bootstrap-rn 0.4.10 → 0.4.12

package/src/components/forms/internals/{FormCheckInputWeb.tsx → FormCheckInput.web.tsx}

@@ -9,7 +9,7 @@ import useBackground from '../../../hooks/useBackground';
 import type { PressableRef } from '../../Pressable';
 import type { FormCheckInputProps } from '../FormCheckInput';
 
-export interface FormCheckInputWebProps extends FormCheckInputProps {
+export interface BaseFormCheckInputProps extends FormCheckInputProps {
   style: ViewStyle[];
 }
 
@@ -38,8 +38,8 @@ const Input = ({
 }: InputProps & React.RefAttributes<HTMLInputElement>) =>
   createElement('input', { ...props, ref, style: [styles.reboot, style] });
 
-function FormCheckInputWeb(
-  props: FormCheckInputWebProps & React.RefAttributes<PressableRef>,
+function FormCheckInput(
+  props: BaseFormCheckInputProps & React.RefAttributes<PressableRef>,
 ) {
   const {
     ref,
@@ -76,4 +76,4 @@ function FormCheckInputWeb(
   );
 }
 
-export default FormCheckInputWeb;
+export default FormCheckInput;

package/src/components/forms/internals/{PickerNative.tsx → Picker.tsx}

@@ -15,7 +15,7 @@ import PickerNativeContext from './PickerNativeContext';
 import type { PickerProps, MenuComponentProps } from '../Picker';
 import type { PickerItemProps } from '../PickerItem';
 
-export interface PickerNativeProps extends PickerProps {
+export interface BasePickerProps extends PickerProps {
   style: TextStyle[];
 }
 
@@ -107,9 +107,7 @@ function DefaultMenuComponent({
 }
 /* eslint-enable */
 
-function PickerNative(
-  props: PickerNativeProps & React.RefAttributes<PressableRef>,
-) {
+function Picker(props: BasePickerProps & React.RefAttributes<PressableRef>) {
   const {
     ref,
     children,
@@ -193,4 +191,4 @@ function PickerNative(
   );
 }
 
-export default PickerNative;
+export default Picker;

package/src/components/forms/internals/{PickerWeb.tsx → Picker.web.tsx}

@@ -10,7 +10,7 @@ import PickerWebContext from './PickerWebContext';
 import type { PickerProps } from '../Picker';
 import type { PressableRef } from '../../Pressable';
 
-interface PickerWebProps extends PickerProps {
+interface BasePickerProps extends PickerProps {
   style: TextStyle[];
 }
 
@@ -33,7 +33,7 @@ const getOptionStyle = (
   return null;
 };
 
-function PickerWeb(props: PickerWebProps & React.RefAttributes<PressableRef>) {
+function Picker(props: BasePickerProps & React.RefAttributes<PressableRef>) {
   const {
     ref,
     children,
@@ -83,4 +83,4 @@ function PickerWeb(props: PickerWebProps & React.RefAttributes<PressableRef>) {
   );
 }
 
-export default PickerWeb;
+export default Picker;

package/src/components/forms/internals/{PickerNativeItem.tsx → PickerItem.tsx}

@@ -10,7 +10,7 @@ import useForcedContext from '../../../hooks/useForcedContext';
 import PickerNativeContext from './PickerNativeContext';
 import { ViewProps, ViewRef } from '../../View';
 
-export interface PickerNativeItemProps extends ViewProps {
+export interface PickerItemProps extends ViewProps {
   label: string;
   value: string;
   disabled?: boolean;
@@ -24,9 +24,7 @@ const styles = StyleSheet.create({
   itemDisabled: css``,
 });
 
-function PickerNativeItem(
-  props: PickerNativeItemProps & React.RefAttributes<ViewRef>,
-) {
+function PickerItem(props: PickerItemProps & React.RefAttributes<ViewRef>) {
   const { ref, label, value, disabled = false } = props;
 
   const { selectedValue, handleValueChange } =
@@ -54,4 +52,4 @@ function PickerNativeItem(
   );
 }
 
-export default PickerNativeItem;
+export default PickerItem;

package/src/components/forms/internals/{PickerWebItem.tsx → PickerItem.web.tsx}

@@ -7,15 +7,13 @@ import useForcedContext from '../../../hooks/useForcedContext';
 import PickerWebContext from './PickerWebContext';
 import type { ViewProps, ViewRef } from '../../View';
 
-export interface PickerWebItemProps extends ViewProps {
+export interface PickerItemProps extends ViewProps {
   label: string;
   value: string;
   disabled?: boolean;
 }
 
-function PickerWebItem(
-  props: PickerWebItemProps & React.RefAttributes<ViewRef>,
-) {
+function PickerItem(props: PickerItemProps & React.RefAttributes<ViewRef>) {
   const { ref, label, value, disabled = false } = props;
 
   const { optionColor } = useForcedContext(PickerWebContext);
@@ -31,4 +29,4 @@ function PickerWebItem(
   );
 }
 
-export default PickerWebItem;
+export default PickerItem;

package/src/components/forms/internals/PickerNativeContext.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-
-type PickerNativeContextType = {
-  selectedValue?: string | null | undefined;
-  handleValueChange: (value: string) => void;
-};
-
-const PickerNativeContext = React.createContext<PickerNativeContextType | null>(
-  null,
-);
-
-PickerNativeContext.displayName = 'PickerNativeContext';
-
-export default PickerNativeContext;
+import React from 'react';
+
+type PickerNativeContextType = {
+  selectedValue?: string | null | undefined;
+  handleValueChange: (value: string) => void;
+};
+
+const PickerNativeContext = React.createContext<PickerNativeContextType | null>(
+  null,
+);
+
+PickerNativeContext.displayName = 'PickerNativeContext';
+
+export default PickerNativeContext;

package/src/components/helpers/Portal.tsx

@@ -1,10 +1,24 @@
-import { Portal } from '@rn-primitives/portal';
+import React from 'react';
+import { Portal as BasePortal } from '@rn-primitives/portal';
+import usePortalRegistry from '../../hooks/usePortalRegistry';
+import TextStyleContext from '../../style/TextStyleContext';
 
 export interface PortalProps {
-  // eslint-disable-next-line react/no-unused-prop-types
   name: string;
   hostName?: string;
   children: React.ReactNode;
 }
 
+function Portal({ name, hostName, children }: PortalProps) {
+  usePortalRegistry(name, hostName);
+
+  return (
+    <BasePortal name={name} hostName={hostName}>
+      <TextStyleContext.Provider value={null}>
+        {children}
+      </TextStyleContext.Provider>
+    </BasePortal>
+  );
+}
+
 export default Portal;

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

@@ -1,8 +1,9 @@
-import { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import usePortalRegistry from '../../hooks/usePortalRegistry';
+import TextStyleContext from '../../style/TextStyleContext';
 
 export interface PortalProps {
-  // eslint-disable-next-line react/no-unused-prop-types
   name: string;
   hostName?: string;
   children: React.ReactNode;
@@ -10,11 +11,17 @@ export interface PortalProps {
 
 const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
 
-function Portal({ hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
+function Portal({
+  name,
+  hostName = DEFAULT_PORTAL_HOST,
+  children,
+}: PortalProps) {
   const [element, setElement] = useState(() =>
     document.getElementById(hostName),
   );
 
+  usePortalRegistry(name, hostName);
+
   // Retry lookup after mount, before paint, in case the host element
   // was not yet committed to the DOM during the initial render.
   useLayoutEffect(() => {
@@ -36,7 +43,12 @@ function Portal({ hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
     return null;
   }
 
-  return createPortal(children, element);
+  return createPortal(
+    <TextStyleContext.Provider value={null}>
+      {children}
+    </TextStyleContext.Provider>,
+    element,
+  );
 }
 
 export default Portal;

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

@@ -8,7 +8,7 @@ export interface PortalHostProps {
 const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
 
 function PortalHost({ name = DEFAULT_PORTAL_HOST }: PortalHostProps) {
-  return <View id={name} />;
+  return <View id={name} style={{ position: 'absolute' }} />;
 }
 
 export default PortalHost;

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

@@ -70,6 +70,7 @@ function ListGroup(props: ListGroupProps & React.RefAttributes<ViewRef>) {
 }
 
 export default Object.assign(ListGroup, {
+  Context: ListGroupContext,
   Item: ListGroupItem,
   ItemAction: ListGroupItemAction,
 });

package/src/components/list-group/ListGroupContext.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-
-interface ListGroupContextType {
-  flush?: boolean;
-}
-
-const ListGroupContext = React.createContext<ListGroupContextType | null>(null);
-
-ListGroupContext.displayName = 'ListGroupContext';
-
-export default ListGroupContext;
+import React from 'react';
+
+type ListGroupContextType = {
+  flush?: boolean;
+};
+
+const ListGroupContext = React.createContext<ListGroupContextType | null>(null);
+
+ListGroupContext.displayName = 'ListGroupContext';
+
+export default ListGroupContext;

package/src/components/popover/Popover.tsx

@@ -80,6 +80,7 @@ function Popover(props: PopoverProps & React.RefAttributes<ViewRef>) {
 }
 
 export default Object.assign(Popover, {
+  Context: PopoverContext,
   Arrow: PopoverArrow,
   Header: PopoverHeader,
   Body: PopoverBody,

package/src/components/popover/PopoverContext.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import type { OverlayPlacement } from '../../types';
-
-type PopoverContextType = {
-  placement: OverlayPlacement;
-  floating?: boolean;
-};
-
-const PopoverContext = React.createContext<PopoverContextType | null>(null);
-
-PopoverContext.displayName = 'PopoverContext';
-
-export default PopoverContext;
+import React from 'react';
+import type { OverlayPlacement } from '../../types';
+
+type PopoverContextType = {
+  placement: OverlayPlacement;
+  floating?: boolean;
+};
+
+const PopoverContext = React.createContext<PopoverContextType | null>(null);
+
+PopoverContext.displayName = 'PopoverContext';
+
+export default PopoverContext;

package/src/components/progress/Progress.tsx

@@ -60,5 +60,6 @@ function Progress(props: ProgressProps & React.RefAttributes<ViewRef>) {
 }
 
 export default Object.assign(Progress, {
+  Context: ProgressContext,
   Bar: ProgressBar,
 });

package/src/components/tooltip/Tooltip.tsx

@@ -73,6 +73,7 @@ function Tooltip(props: TooltipProps & React.RefAttributes<ViewRef>) {
 }
 
 export default Object.assign(Tooltip, {
+  Context: TooltipContext,
   Arrow: TooltipArrow,
   Inner: TooltipInner,
 });

package/src/components/tooltip/TooltipContext.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import type { OverlayPlacement } from '../../types';
-
-type TooltipContextType = {
-  placement: OverlayPlacement;
-  floating?: boolean;
-};
-
-const TooltipContext = React.createContext<TooltipContextType | null>(null);
-
-TooltipContext.displayName = 'TooltipContext';
-
-export default TooltipContext;
+import React from 'react';
+import type { OverlayPlacement } from '../../types';
+
+type TooltipContextType = {
+  placement: OverlayPlacement;
+  floating?: boolean;
+};
+
+const TooltipContext = React.createContext<TooltipContextType | null>(null);
+
+TooltipContext.displayName = 'TooltipContext';
+
+export default TooltipContext;

package/src/components/type/Paragraph.tsx

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-function Heading(props: ParagraphProps & React.RefAttributes<TextRef>) {
+function Paragraph(props: ParagraphProps & React.RefAttributes<TextRef>) {
   const { ref, children, lead, style, ...elementProps } = props;
 
   const classes = getStyles(styles, ['paragraph', lead && '.lead']);
@@ -37,4 +37,4 @@ function Heading(props: ParagraphProps & React.RefAttributes<TextRef>) {
   );
 }
 
-export default Heading;
+export default Paragraph;

package/src/hooks/useBackground.tsx

@@ -1,5 +1,204 @@
-import { Platform } from 'react-native';
-import useBackgroundWeb from './useBackgroundWeb';
-import useBackgroundNative from './useBackgroundNative';
+import React from 'react';
+import { I18nManager, StyleSheet, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import type { BaseStyle } from '../types';
 
-export default Platform.OS === 'web' ? useBackgroundWeb : useBackgroundNative;
+type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
+
+type BackgroundSize = 'cover' | 'contain' | { width: number; height: number };
+
+type BackgroundResult = {
+  containerStyle: BaseStyle;
+  objectStyle: BaseStyle;
+  xml: string | null;
+};
+
+const styles = StyleSheet.create({
+  container: { overflow: 'hidden' },
+  object: { aspectRatio: 1 },
+});
+
+const horizontalPositions = {
+  left: (offset: number = 0) => ({
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+    paddingLeft: offset,
+  }),
+  right: (offset: number = 0) => ({
+    alignItems: I18nManager.isRTL ? 'flex-start' : 'flex-end',
+    paddingRight: offset,
+  }),
+  center: (offset?: number) => {
+    if (offset !== undefined) {
+      return null;
+    }
+
+    return {
+      alignItems: 'center',
+    };
+  },
+  top: undefined,
+  bottom: undefined,
+};
+
+const verticalPositions = {
+  top: (offset: number = 0) => ({
+    justifyContent: 'flex-start',
+    paddingTop: offset,
+  }),
+  bottom: (offset: number = 0) => ({
+    justifyContent: 'flex-end',
+    paddingBottom: offset,
+  }),
+  center: (offset?: number) => {
+    if (offset !== undefined) {
+      return null;
+    }
+
+    return {
+      justifyContent: 'center',
+    };
+  },
+  left: undefined,
+  right: undefined,
+};
+
+const getXml = (value: string) => {
+  const match = value.match(/^url\("data:image\/svg\+xml,(.*?)"\)$/);
+
+  if (!match) {
+    return null;
+  }
+
+  return decodeURIComponent(match[1]);
+};
+
+const transforms = {
+  backgroundSize(value: BackgroundSize) {
+    if (value === 'cover') {
+      return {
+        width: '100%',
+        // TODO: Support cover for views with height > width.
+        // height: '100%',
+      };
+    }
+
+    if (value === 'contain') {
+      return {
+        width: '100%',
+        height: '100%',
+      };
+    }
+
+    const { width, height = width } = value;
+
+    return {
+      width,
+      height,
+    };
+  },
+  backgroundPosition(value: Position) {
+    if (value === 'center') {
+      return {
+        alignItems: 'center',
+        justifyContent: 'center',
+      };
+    }
+
+    const horizontalPosition = horizontalPositions[value];
+
+    if (horizontalPosition !== undefined) {
+      return {
+        ...horizontalPosition(),
+        justifyContent: 'center',
+      };
+    }
+
+    const verticalPosition = verticalPositions[value];
+
+    if (verticalPosition) {
+      return {
+        alignItems: 'center',
+        ...verticalPosition(),
+      };
+    }
+
+    return null;
+  },
+  backgroundPositionX(
+    value: Position | { position: Position; offset: number },
+  ) {
+    const { position = 'left', offset } =
+      typeof value === 'object'
+        ? value
+        : { position: value, offset: undefined };
+
+    const horizontalPosition = horizontalPositions[position];
+
+    if (!horizontalPosition) {
+      return null;
+    }
+
+    return horizontalPosition(offset);
+  },
+  backgroundPositionY(
+    value: Position | { position: Position; offset: number },
+  ) {
+    const { position = 'top', offset } =
+      typeof value === 'object'
+        ? value
+        : { position: value, offset: undefined };
+
+    const verticalPosition = verticalPositions[position];
+
+    if (!verticalPosition) {
+      return null;
+    }
+
+    return verticalPosition(offset);
+  },
+};
+
+export default function useBackground(style: BaseStyle[]) {
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  const background: BackgroundResult = {
+    containerStyle: {},
+    objectStyle: {},
+    xml: null,
+  };
+
+  Object.entries(flattenedStyle).forEach(([key, value]) => {
+    if (!value) {
+      return;
+    }
+
+    if (key === 'backgroundImage') {
+      background.xml = getXml(value);
+    } else if (key === 'backgroundSize') {
+      Object.assign(background.objectStyle, transforms[key](value));
+    } else if (
+      key === 'backgroundPosition' ||
+      key === 'backgroundPositionX' ||
+      key === 'backgroundPositionY'
+    ) {
+      Object.assign(background.containerStyle, transforms[key](value));
+    }
+  });
+
+  return {
+    style: flattenedStyle,
+    element: (
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          styles.container,
+          background.containerStyle,
+        ]}
+      >
+        <View style={[styles.object, background.objectStyle]}>
+          {background.xml && <SvgXml xml={background.xml} />}
+        </View>
+      </View>
+    ),
+  };
+}

package/src/hooks/{useBackgroundWeb.tsx → useBackground.web.tsx}

@@ -102,7 +102,7 @@ const resolveBackgroundPosition = (style: BackgroundWebStyle) => {
   return `${valueX} ${valueY}`;
 };
 
-export default function useBackgroundWeb(style: BaseStyle[]) {
+export default function useBackground(style: BaseStyle[]) {
   const flattenedStyle = StyleSheet.flatten(style);
 
   const backgroundStyle: BaseStyle = {

package/src/hooks/useOverlay.web.ts

@@ -1,5 +1,5 @@
 import { type HTMLProps, useId, useMemo, useRef } from 'react';
-import { I18nManager } from 'react-native';
+import { GestureResponderEvent, I18nManager } from 'react-native';
 import {
   useFloating,
   arrow,
@@ -61,10 +61,27 @@ const getAlignedPlacement = (
 
 const transformReferenceProps =
   (handle: UseInteractionsReturn['getReferenceProps']) =>
-  (props: HTMLProps<Element> | undefined) => {
+  (
+    props:
+      | (HTMLProps<Element> & { onPress?: (event: unknown) => void })
+      | undefined,
+  ) => {
+    const handlePress = props?.onPress;
     const { onClick, ...referenceProps } = handle(props);
 
-    return { ...referenceProps, onPress: onClick };
+    const handleClick = onClick as
+      | ((event: GestureResponderEvent) => void)
+      | undefined;
+
+    return {
+      ...referenceProps,
+      onPress: handlePress
+        ? (event: GestureResponderEvent) => {
+            handleClick?.(event);
+            handlePress(event);
+          }
+        : handleClick,
+    };
   };
 
 export default function useOverlay({

package/src/hooks/usePortalRegistry.ts

@@ -0,0 +1,36 @@
+import { useLayoutEffect } from 'react';
+
+const DEFAULT_PORTAL_HOST = 'INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME';
+
+const registry = new Map<string, Set<string>>();
+
+export default function usePortalRegistry(
+  name: string,
+  hostName: string = DEFAULT_PORTAL_HOST,
+) {
+  useLayoutEffect(() => {
+    let names = registry.get(hostName);
+
+    if (!names) {
+      names = new Set();
+      registry.set(hostName, names);
+    }
+
+    if (names.has(name)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Portal: A portal with name "${name}" is already registered on host "${hostName}".`,
+      );
+    }
+
+    names.add(name);
+
+    return () => {
+      names.delete(name);
+
+      if (names.size === 0) {
+        registry.delete(hostName);
+      }
+    };
+  }, [name, hostName]);
+}

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

@@ -1,7 +0,0 @@
-"use strict";
-
-import React from 'react';
-const PickerContext = /*#__PURE__*/React.createContext(null);
-PickerContext.displayName = 'PickerContext';
-export default PickerContext;
-//# sourceMappingURL=PickerContext.js.map

package/lib/module/components/forms/PickerContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","PickerContext","createContext","displayName"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/forms/PickerContext.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAMzB,MAAMC,aAAa,gBAAGD,KAAK,CAACE,aAAa,CAA2B,IAAI,CAAC;AAEzED,aAAa,CAACE,WAAW,GAAG,eAAe;AAE3C,eAAeF,aAAa","ignoreList":[]}

package/lib/module/components/forms/internals/FormCheckInputNative.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Pressable","useBackground","jsx","_jsx","FormCheckInputNative","props","ref","type","value","onValueChange","handleValueChange","onFocus","onBlur","hitSlop","disabled","style","id","inputBackground","role","onPress","children","element"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/forms/internals/FormCheckInputNative.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,SAAS,MAAwB,oBAAiB;AACzD,OAAOC,aAAa,MAAM,iCAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOzD,SAASC,oBAAoBA,CAC3BC,KAAoE,EACpE;EACA,MAAM;IACJC,GAAG;IACHC,IAAI;IACJC,KAAK;IACLC,aAAa,EAAEC,iBAAiB;IAChCC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;IAClBC,MAAM,GAAGA,CAAA,KAAM,CAAC,CAAC;IACjBC,OAAO,GAAG,CAAC;IACXC,QAAQ,GAAG,KAAK;IAChBC,KAAK;IACLC;EACF,CAAC,GAAGX,KAAK;EAET,MAAMY,eAAe,GAAGhB,aAAa,CAACc,KAAK,CAAC;EAE5C,oBACEZ,IAAA,CAACH,SAAS;IACRM,GAAG,EAAEA,GAAI;IACTY,IAAI,EAAEX,IAAK;IACX,gBAAcC,KAAM;IACpBW,OAAO,EAAEA,CAAA,KAAM;MACb,IAAIT,iBAAiB,EAAEA,iBAAiB,CAAC,CAACF,KAAK,CAAC;IAClD,CAAE;IACFG,OAAO,EAAEA,OAAQ;IACjBC,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEE,eAAe,CAACF,KAAM;IAC7BC,EAAE,EAAEA,EAAG;IAAAI,QAAA,EAENH,eAAe,CAACI;EAAO,CACf,CAAC;AAEhB;AAEA,eAAejB,oBAAoB","ignoreList":[]}