bootstrap-rn 0.4.5 → 0.4.7

package/src/components/close/CloseButton.tsx

@@ -1,138 +1,142 @@
-import React, { useContext } from 'react';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-import StyleSheet from '../../style/StyleSheet';
-import Pressable, { PressableProps, PressableRef } from '../Pressable';
-import ModalContext from '../modal/ModalContext';
-import OffcanvasContext from '../offcanvas/OffcanvasContext';
-import useMedia from '../../hooks/useMedia';
-import useStyle from '../../hooks/useStyle';
-import useInteractionState from '../../hooks/useInteractionState';
-import useBackground from '../../hooks/useBackground';
-import { escapeSvg } from '../../theme/functions';
-import type { ThemeVariables } from '../../types';
-
-export interface CloseButtonProps extends Omit<PressableProps, 'children'> {
-  disabled?: boolean;
-}
-
-const styles = StyleSheet.create({
-  '.btn-close': css`
-    // Workaround for missing box-sizing in react native.
-    $additional-width: $btn-close-padding-x * 2;
-    $additional-height: $btn-close-padding-y * 2;
-
-    // box-sizing: content-box;
-    width: $btn-close-width + $additional-width;
-    height: $btn-close-height + $additional-height;
-    padding: $btn-close-padding-y $btn-close-padding-x;
-    background-color: transparent; // include transparent for button elements
-    background-image: ${(t: ThemeVariables) => escapeSvg(t['btn-close-bg'])};
-    background-position: center;
-    background-size: $btn-close-width auto;
-    background-repeat: no-repeat;
-    border-width: 0; // for button elements
-    // @include border-radius();
-    opacity: $btn-close-opacity;
-
-    &:hover {
-      opacity: $btn-close-hover-opacity;
-    }
-
-    &:focus {
-      // outline: 0;
-      // box-shadow: $btn-close-focus-shadow;
-      opacity: $btn-close-focus-opacity;
-    }
-  `,
-  '.btn-close --text': css`
-    color: $btn-close-color;
-
-    // Override <a>'s hover style
-    &:hover {
-      color: $btn-close-color;
-      text-decoration: none;
-    }
-  `,
-  '.btn-close.disabled': css`
-    pointer-events: none;
-    user-select: none;
-    opacity: $btn-close-disabled-opacity;
-  `,
-  // Modal styles
-  '.modal-header .btn-close': css`
-    padding: $modal-header-padding-y * 0.5 $modal-header-padding-x * 0.5;
-    margin: -0.5 * $modal-header-padding-y -0.5 * $modal-header-padding-x -0.5 *
-      $modal-header-padding-y auto;
-
-    // Workaround for missing box-sizing in react native.
-    width: $btn-close-width + $modal-header-padding-x;
-    height: $btn-close-height + $modal-header-padding-y;
-  `,
-  // Offcanvas styles
-  '.offcanvas-header .btn-close': css`
-    padding: $offcanvas-padding-y * 0.5 $offcanvas-padding-x * 0.5;
-    margin-top: -0.5 * $offcanvas-padding-y;
-    margin-right: -0.5 * $offcanvas-padding-x;
-    margin-bottom: -0.5 * $offcanvas-padding-y;
-
-    // Workaround for missing box-sizing in react native.
-    width: $btn-close-width + $offcanvas-padding-x;
-    height: $btn-close-height + $offcanvas-padding-y;
-  `,
-});
-
-const CloseButton = React.forwardRef<PressableRef, CloseButtonProps>(
-  (props, ref) => {
-    const {
-      disabled = false,
-      style,
-      textStyle,
-      styleName,
-      ...elementProps
-    } = props;
-
-    const media = useMedia();
-
-    const modal = useContext(ModalContext);
-    const offcanvas = useContext(OffcanvasContext);
-
-    const classes = getStyles(styles, [
-      '.btn-close',
-      disabled && '.btn-close.disabled',
-      // Modal styles
-      modal && '.modal-header .btn-close',
-      // Offcanvas styles
-      offcanvas && '.offcanvas-header .btn-close',
-    ]);
-    const textClasses = getStyles(styles, ['.btn-close --text']);
-
-    const resolveStyle = useStyle([classes, style], styleName);
-
-    const { interaction, interactionProps } = useInteractionState(elementProps);
-
-    const background = useBackground(
-      resolveStyle({
-        media,
-        interaction,
-      }),
-    );
-
-    return (
-      <Pressable
-        {...elementProps}
-        {...interactionProps}
-        ref={ref}
-        disabled={disabled}
-        style={background.style}
-        textStyle={[textClasses, textStyle]}
-      >
-        {background.element}
-      </Pressable>
-    );
-  },
-);
-
-CloseButton.displayName = 'CloseButton';
-
-export default CloseButton;
+import React, { useContext } from 'react';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import StyleSheet from '../../style/StyleSheet';
+import Pressable, { PressableProps, PressableRef } from '../Pressable';
+import ModalContext from '../modal/ModalContext';
+import OffcanvasContext from '../offcanvas/OffcanvasContext';
+import useMedia from '../../hooks/useMedia';
+import useStyle from '../../hooks/useStyle';
+import useInteractionState from '../../hooks/useInteractionState';
+import useBackground from '../../hooks/useBackground';
+import { escapeSvg } from '../../theme/functions';
+import type { ThemeVariables } from '../../types';
+
+export interface CloseButtonProps extends Omit<PressableProps, 'children'> {
+  disabled?: boolean;
+}
+
+const styles = StyleSheet.create({
+  '.btn-close': css`
+    // Workaround for missing box-sizing in react native.
+    $additional-width: $btn-close-padding-x * 2;
+    $additional-height: $btn-close-padding-y * 2;
+
+    // box-sizing: content-box;
+    width: $btn-close-width + $additional-width;
+    height: $btn-close-height + $additional-height;
+    padding: $btn-close-padding-y $btn-close-padding-x;
+    background-color: transparent; // include transparent for button elements
+    background-image: ${(t: ThemeVariables) => escapeSvg(t['btn-close-bg'])};
+    background-position: center;
+    background-size: $btn-close-width auto;
+    background-repeat: no-repeat;
+    border-width: 0; // for button elements
+    border-radius: $border-radius;
+    opacity: $btn-close-opacity;
+
+    &:hover {
+      opacity: $btn-close-hover-opacity;
+    }
+
+    &:focus {
+      @include platform(web) {
+        outline-style: none; // outline: 0;
+        box-shadow: $btn-close-focus-shadow;
+      }
+      opacity: $btn-close-focus-opacity;
+    }
+  `,
+  '.btn-close --text': css`
+    color: $btn-close-color;
+
+    // Override <a>'s hover style
+    &:hover {
+      color: $btn-close-color;
+      text-decoration: none;
+    }
+  `,
+  '.btn-close.disabled': css`
+    pointer-events: none;
+    user-select: none;
+    opacity: $btn-close-disabled-opacity;
+  `,
+  // Modal styles
+  '.modal-header .btn-close': css`
+    padding: $modal-header-padding-y * 0.5 $modal-header-padding-x * 0.5;
+    margin: -0.5 * $modal-header-padding-y -0.5 * $modal-header-padding-x -0.5 *
+      $modal-header-padding-y auto;
+
+    // Workaround for missing box-sizing in react native.
+    width: $btn-close-width + $modal-header-padding-x;
+    height: $btn-close-height + $modal-header-padding-y;
+  `,
+  // Offcanvas styles
+  '.offcanvas-header .btn-close': css`
+    padding: $offcanvas-padding-y * 0.5 $offcanvas-padding-x * 0.5;
+    margin-top: -0.5 * $offcanvas-padding-y;
+    margin-right: -0.5 * $offcanvas-padding-x;
+    margin-bottom: -0.5 * $offcanvas-padding-y;
+
+    // Workaround for missing box-sizing in react native.
+    width: $btn-close-width + $offcanvas-padding-x;
+    height: $btn-close-height + $offcanvas-padding-y;
+  `,
+});
+
+const CloseButton = React.forwardRef<PressableRef, CloseButtonProps>(
+  (props, ref) => {
+    const {
+      hitSlop = 12,
+      disabled = false,
+      style,
+      textStyle,
+      styleName,
+      ...elementProps
+    } = props;
+
+    const media = useMedia();
+
+    const modal = useContext(ModalContext);
+    const offcanvas = useContext(OffcanvasContext);
+
+    const classes = getStyles(styles, [
+      '.btn-close',
+      disabled && '.btn-close.disabled',
+      // Modal styles
+      modal && '.modal-header .btn-close',
+      // Offcanvas styles
+      offcanvas && '.offcanvas-header .btn-close',
+    ]);
+    const textClasses = getStyles(styles, ['.btn-close --text']);
+
+    const resolveStyle = useStyle([classes, style], styleName);
+
+    const { interaction, interactionProps } = useInteractionState(elementProps);
+
+    const background = useBackground(
+      resolveStyle({
+        media,
+        interaction,
+      }),
+    );
+
+    return (
+      <Pressable
+        {...elementProps}
+        {...interactionProps}
+        ref={ref}
+        hitSlop={hitSlop}
+        disabled={disabled}
+        style={background.style}
+        textStyle={[textClasses, textStyle]}
+      >
+        {background.element}
+      </Pressable>
+    );
+  },
+);
+
+CloseButton.displayName = 'CloseButton';
+
+export default CloseButton;

package/src/components/collapse/useCollapse.ts

@@ -1,26 +1,25 @@
-import { useMemo } from 'react';
-import useIdentifier from '../../hooks/useIdentifier';
-import useControlledState from '../../hooks/useControlledState';
-
-export default function useCollapse(
-  defaultVisible: boolean,
-  controlledVisible?: boolean,
-  onToggle?: () => void,
-) {
-  const identifier = useIdentifier('collapse');
-
-  const [visible, setVisible] = useControlledState(
-    defaultVisible,
-    controlledVisible,
-    onToggle,
-  );
-
-  return useMemo(
-    () => ({
-      identifier,
-      visible,
-      setVisible,
-    }),
-    [identifier, visible, setVisible],
-  );
-}
+import { useId, useMemo } from 'react';
+import useControlledState from '../../hooks/useControlledState';
+
+export default function useCollapse(
+  defaultVisible: boolean,
+  controlledVisible?: boolean,
+  onToggle?: () => void,
+) {
+  const identifier = useId();
+
+  const [visible, setVisible] = useControlledState(
+    defaultVisible,
+    controlledVisible,
+    onToggle,
+  );
+
+  return useMemo(
+    () => ({
+      identifier,
+      visible,
+      setVisible,
+    }),
+    [identifier, visible, setVisible],
+  );
+}

package/src/components/dropdown/Dropdown.tsx

@@ -1,80 +1,77 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { getStyles } from '../../utils';
-import DropdownContext, { DropdownDirection } from './DropdownContext';
-import DropdownToggle from './DropdownToggle';
-import DropdownMenu from './DropdownMenu';
-import DropdownHeader from './DropdownHeader';
-import DropdownItem from './DropdownItem';
-import DropdownItemText from './DropdownItemText';
-import DropdownDivider from './DropdownDivider';
-import useDropdown from './useDropdown';
-import useDismissDropdown from './useDismissDropdown';
-import useToggleDropdown from './useToggleDropdown';
-
-export interface DropdownProps extends ViewProps {
-  defaultVisible?: boolean;
-  visible?: boolean;
-  onToggle?: () => void;
-  direction?: DropdownDirection;
-  center?: boolean;
-  display?: 'dynamic' | 'static';
-  autoClose?: boolean | 'inside' | 'outside';
-}
-
-const styles = StyleSheet.create({
-  '.dropdown': css`
-    position: relative;
-  `,
-});
-
-const Dropdown = React.forwardRef<ViewRef, DropdownProps>((props, ref) => {
-  const {
-    children,
-    defaultVisible = false,
-    visible,
-    onToggle = () => {},
-    direction = 'down',
-    center = false,
-    display = 'dynamic',
-    autoClose = 'outside',
-    style,
-    ...elementProps
-  } = props;
-
-  const dropdown = useDropdown(
-    defaultVisible,
-    visible,
-    onToggle,
-    direction,
-    center,
-    display,
-    autoClose,
-  );
-
-  const classes = getStyles(styles, ['.dropdown']);
-
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      <DropdownContext.Provider value={dropdown}>
-        {children}
-      </DropdownContext.Provider>
-    </View>
-  );
-});
-
-Dropdown.displayName = 'Dropdown';
-
-export default Object.assign(Dropdown, {
-  Context: DropdownContext,
-  Toggle: DropdownToggle,
-  Menu: DropdownMenu,
-  Header: DropdownHeader,
-  Item: DropdownItem,
-  ItemText: DropdownItemText,
-  Divider: DropdownDivider,
-  useDismiss: useDismissDropdown,
-  useToggle: useToggleDropdown,
-});
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles } from '../../utils';
+import DropdownContext, { DropdownDirection } from './DropdownContext';
+import DropdownToggle from './DropdownToggle';
+import DropdownMenu from './DropdownMenu';
+import DropdownHeader from './DropdownHeader';
+import DropdownItem from './DropdownItem';
+import DropdownItemText from './DropdownItemText';
+import DropdownDivider from './DropdownDivider';
+import useDropdown from './useDropdown';
+import useDismissDropdown from './useDismissDropdown';
+import useToggleDropdown from './useToggleDropdown';
+
+export interface DropdownProps extends ViewProps {
+  defaultVisible?: boolean;
+  visible?: boolean;
+  onToggle?: () => void;
+  direction?: DropdownDirection;
+  center?: boolean;
+  display?: 'dynamic' | 'static';
+}
+
+const styles = StyleSheet.create({
+  '.dropdown': css`
+    position: relative;
+  `,
+});
+
+const Dropdown = React.forwardRef<ViewRef, DropdownProps>((props, ref) => {
+  const {
+    children,
+    defaultVisible = false,
+    visible,
+    onToggle = () => {},
+    direction = 'down',
+    center = false,
+    display = 'dynamic',
+    style,
+    ...elementProps
+  } = props;
+
+  const dropdown = useDropdown(
+    defaultVisible,
+    visible,
+    onToggle,
+    direction,
+    center,
+    display,
+  );
+
+  const classes = getStyles(styles, ['.dropdown']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <DropdownContext.Provider value={dropdown}>
+        {children}
+      </DropdownContext.Provider>
+    </View>
+  );
+});
+
+Dropdown.displayName = 'Dropdown';
+
+export default Object.assign(Dropdown, {
+  Context: DropdownContext,
+  Toggle: DropdownToggle,
+  Menu: DropdownMenu,
+  Header: DropdownHeader,
+  Item: DropdownItem,
+  ItemText: DropdownItemText,
+  Divider: DropdownDivider,
+  useDismiss: useDismissDropdown,
+  useToggle: useToggleDropdown,
+});

package/src/components/dropdown/DropdownContext.ts

@@ -1,5 +1,8 @@
 import { createContext } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { PressableRef } from '../Pressable';
 import type { ViewRef } from '../View';
+import { OverlayAlignment } from '../../types';
 
 export type DropdownDirection = 'up' | 'down' | 'start' | 'end';
 
@@ -7,11 +10,19 @@ export interface DropdownContextProps {
   identifier: string;
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  toggleRef: React.RefObject<ViewRef | null>;
+  align: OverlayAlignment | null;
+  setAlign: React.Dispatch<React.SetStateAction<OverlayAlignment | null>>;
   direction: DropdownDirection;
-  center: boolean;
   display: string;
-  autoClose: string | boolean;
+  trigger: {
+    ref: React.RefObject<PressableRef | null>;
+    getProps: (props: Record<string, unknown>) => Record<string, unknown>;
+  };
+  content: {
+    ref: React.RefObject<ViewRef | null>;
+    getProps: (props: Record<string, unknown>) => Record<string, unknown>;
+    style: StyleProp<ViewStyle>;
+  };
 }
 
 const DropdownContext = createContext<DropdownContextProps | null>(null);