@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.1

package/src/components/ExpandableCard/ExpandableCardExpandedContent.tsx

@@ -20,7 +20,7 @@ const ExpandableCardExpandedContent = ({
     <View style={styles.container}>
       <Expandable expanded={isExpanded} duration={duration} animateOpacity={animateOpacity}>
         <View>
-          <Divider space="none" />
+          <Divider spacing="none" />
           <View style={styles.content}>{children}</View>
         </View>
       </Expandable>

package/src/components/Flex/Flex.docs.mdx

@@ -25,7 +25,7 @@ When you need to center-align content, the Center component comes in handy. It i
 
 <UsageWrap>
   <Center>
-    <Flex space="lg">
+    <Flex spacing="lg">
       <BodyText>Spaced out text</BodyText>
       <BodyText>Spaced out text</BodyText>
       <BodyText>Flexed</BodyText>
@@ -39,7 +39,7 @@ When you need to center-align content, the Center component comes in handy. It i
 import { Flex, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Flex space="lg">
+  <Flex spacing="lg">
     <BodyText>Spaced out text</BodyText>
     <BodyText>Spaced out text</BodyText>
     <BodyText>Flexed</BodyText>
@@ -57,4 +57,4 @@ const MyComponent = () => (
 | `wrap`      | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                  | `nowrap`     | The wrap of the flex container.            |
 | `justify`   | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'space-between' \| 'space-around' \| 'space-evenly'` | `flex-start` | The justify content of the flex container. |
 | `align`     | `'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'`                                     | `flex-start` | The align items of the flex container.     |
-| `space`     | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                      | `md`         | The space between the content.             |
+| `spacing`   | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                      | `md`         | The space between the content.             |

package/src/components/Flex/Flex.props.ts

@@ -6,6 +6,11 @@ interface FlexProps extends ViewProps {
   align?: FlexAlignType;
   justify?: ViewStyle['justifyContent'];
   wrap?: ViewStyle['flexWrap'];
+  spacing?: SpacingValues;
+  /**
+   * The space between child elements (gap).
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+   */
   space?: SpacingValues;
 }
 

package/src/components/Flex/Flex.stories.tsx

@@ -39,7 +39,7 @@ const meta = {
       control: 'select',
       description: 'The justify of the flex container.',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'The space of the flex container.',
@@ -51,7 +51,7 @@ const meta = {
     align: 'center',
     wrap: 'wrap',
     justify: 'flex-start',
-    space: 'sm',
+    spacing: 'sm',
   },
 } satisfies Meta<typeof Flex>;
 

package/src/components/Flex/Flex.tsx

@@ -9,7 +9,8 @@ const Flex = ({
   align = 'flex-start',
   justify = 'flex-start',
   wrap = 'nowrap',
-  space = 'md',
+  spacing = 'md',
+  space,
   ...rest
 }: FlexProps) => {
   const propStyle: ViewStyle = {
@@ -19,7 +20,7 @@ const Flex = ({
     flexWrap: wrap,
   };
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
 
   return (
     <View style={[propStyle, styles.flex, style]} {...rest}>
@@ -34,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
   flex: {
     display: 'flex',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
 }));

package/src/components/FormField/FormField.docs.mdx

@@ -313,7 +313,7 @@ const MyComponent = () => {
     <FormField validationStatus="invalid">
       <Checkbox alignItems="flex-start">
         <CheckboxIndicator />
-        <Flex direction="column" space="xs">
+        <Flex direction="column" spacing="xs">
           <CheckboxLabel nested={false}>I accept the terms and conditions</CheckboxLabel>
           <FormFieldHelper>
             <FormFieldHelperText>Read and accept the terms and conditions</FormFieldHelperText>

package/src/components/FormField/FormField.stories.tsx

@@ -87,7 +87,7 @@ export const Playground: Story = {
 export const Variants: Story = {
   render: () => {
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <FormField label="Label">
             <Input />

package/src/components/Grid/Grid.docs.mdx

@@ -25,7 +25,7 @@ The Grid component helps you create responsive grid layouts with configurable co
 
 <UsageWrap>
   <Center>
-    <Grid columns={2} space="md" width={300}>
+    <Grid columns={2} spacing="md" width={300}>
       <Box backgroundColor="green400" height={100} padding="200">
         <BodyText color="white">Item 1</BodyText>
       </Box>
@@ -46,7 +46,7 @@ The Grid component helps you create responsive grid layouts with configurable co
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Grid columns={2} space="md" width={300}>
+  <Grid columns={2} spacing="md" width={300}>
     <Box backgroundColor="green400" height={100} padding="200">
       <BodyText color="white">Item 1</BodyText>
     </Box>
@@ -76,7 +76,7 @@ The Grid component supports responsive column layouts based on screen size break
         md: 3,
         lg: 4,
       }}
-      space="md"
+      spacing="md"
       width="100%"
     >
       <Box backgroundColor="green400" height={100} padding="200">
@@ -106,7 +106,7 @@ const MyComponent = () => (
       md: 3,
       lg: 4,
     }}
-    space="md"
+    spacing="md"
     width="100%"
   >
     <Box backgroundColor="green400" height={100} padding="200">
@@ -176,7 +176,7 @@ The Grid component extends all the props from the [View component](https://react
 | Name             | Type                                                               | Default | Description                                                   |
 | ---------------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------- |
 | `columns`        | `number` or `GridColumns`                                          | 2       | Number of columns or responsive object with breakpoint values |
-| `space`          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | -       | Spacing between grid items (both rows and columns)            |
+| `spacing`        | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | -       | Spacing between grid items (both rows and columns)            |
 | `columnGap`      | `number`                                                           | -       | Gap between columns (overrides spacing if provided)           |
 | `rowGap`         | `number`                                                           | -       | Gap between rows (overrides spacing if provided)              |
 | `containerStyle` | `StyleProp\<ViewStyle\>`                                           | -       | Style for the grid container                                  |

package/src/components/Grid/Grid.props.ts

@@ -17,6 +17,12 @@ export interface GridProps extends ViewProps {
   /**
    * Spacing between grid items (applies to both rows and columns)
    */
+  spacing?: SpacingValues;
+
+  /**
+   * Spacing between grid items (applies to both rows and columns)
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+   */
   space?: SpacingValues;
 
   /**

package/src/components/Grid/Grid.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
       control: 'object',
       description: 'Number of columns or responsive object with breakpoints',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'Responsive spacing between grid items (applied to both rows and columns).',
@@ -33,7 +33,7 @@ const meta = {
   },
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
 } satisfies Meta<typeof Grid>;
 
@@ -69,7 +69,7 @@ export const Playground: Story = {
     controls: {
       include: [
         'columns',
-        'space',
+        'spacing',
         'gap',
         'columnGap',
         'rowGap',
@@ -81,7 +81,7 @@ export const Playground: Story = {
   },
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 400 }}>
@@ -98,7 +98,7 @@ export const Playground: Story = {
 export const ThreeColumns: Story = {
   args: {
     columns: 3,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 500 }}>
@@ -124,7 +124,7 @@ export const ResponsiveColumns: Story = {
       lg: 4,
       xl: 5,
     },
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: '100%' }}>
@@ -145,7 +145,7 @@ export const ResponsiveColumns: Story = {
 export const DifferentSizes: Story = {
   args: {
     columns: 3,
-    space: 'sm',
+    spacing: 'sm',
   },
   render: args => (
     <Grid {...args} style={{ width: 500 }}>
@@ -178,7 +178,7 @@ export const CustomGaps: Story = {
 export const WithContent: Story = {
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 400 }}>

package/src/components/Grid/Grid.tsx

@@ -9,6 +9,7 @@ const Grid = ({
   containerStyle,
   itemStyle,
   rowStyle,
+  spacing,
   space,
   children,
   ...props
@@ -19,7 +20,7 @@ const Grid = ({
   const { width } = useWindowDimensions();
   const { gap, columnGap, rowGap } = { ...remainingProps, ...computedStyles };
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
 
   const getColumnsForWidth = useMemo(() => {
     // If columns is a number, use that number
@@ -124,14 +125,14 @@ const styles = StyleSheet.create(theme => ({
   rowsContainer: {
     width: '100%',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
   row: {
     flexDirection: 'row',
     width: '100%',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
   item: {

package/src/components/HighlightBanner/HighlightBanner.docs.mdx

@@ -83,7 +83,7 @@ const MyComponent = () => (
 | button               | `ReactElement`                                                                                     | Optional Button component displayed below description         | `-`          |
 | variant              | `'emphasis' \| 'subtle'`                                                                           | Visual style variant with strong or subtle borders            | `'emphasis'` |
 
-The component also accepts all standard Card props except `noPadding`, `colorScheme`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
+The component also accepts all standard Card props except `noPadding`, `colorScheme`, `spacing`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
 ### `HighlightBannerImage` Props
 

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -103,7 +103,7 @@ export const ColorVariants: Story = {
   render: args => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column" align="stretch">
+        <Flex spacing="lg" direction="column" align="stretch">
           <HighlightBanner
             {...args}
             heading="Energy Blue"
@@ -237,7 +237,7 @@ export const SubtleCard: Story = {
 export const DifferentImages: Story = {
   render: args => {
     return (
-      <Flex space="lg" direction="column">
+      <Flex spacing="lg" direction="column">
         <View style={{ width: 400 }}>
           <HighlightBanner
             {...args}

package/src/components/Icon/Icon.docs.mdx

@@ -38,7 +38,7 @@ The following example shows how to use the icons directly from the `@utilityware
 
 <UsageWrap>
   <Center>
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <ElectricityMediumIcon color={lightTheme.color.energyBlue['700']} />
       <MobileMediumIcon color={lightTheme.color.mobileRose['700']} />
       <BroadbandMediumIcon color={lightTheme.color.broadbandGreen['700']} />
@@ -59,7 +59,7 @@ import {
 const MyComponent = () => {
   const { color } = useTheme();
   return (
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <ElectricityMediumIcon color={color.energyBlue['700']} />
       <MobileMediumIcon color={color.mobileRose['700']} />
       <BroadbandMediumIcon color={color.broadbandGreen['700']} />
@@ -82,7 +82,7 @@ import {
 
 const MyComponent = () => {
   return (
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <Icon as={ElectricityMediumIcon} color="energyBlue700" />
       <Icon as={MobileMediumIcon} color="mobileRose700" />
       <Icon as={BroadbandMediumIcon} color="broadbandGreen700" />

package/src/components/IconButton/IconButton.stories.tsx

@@ -94,7 +94,7 @@ export const Variants: Story = {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return (
-      <ButtonGroup flexDirection="column" space="md">
+      <ButtonGroup flexDirection="column" spacing="md">
         <>
           {args.colorScheme === 'highlight' && (
             <VariantTitle title="Emphasis" invert={args.inverted}>
@@ -137,9 +137,9 @@ export const KitchenSink: Story = {
     const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
-      <Flex direction="row" space="lg" wrap="wrap">
+      <Flex direction="row" spacing="lg" wrap="wrap">
         {schemes.map(scheme => (
-          <Flex direction="column" space="lg" key={scheme}>
+          <Flex direction="column" spacing="lg" key={scheme}>
             {variants
               .filter(variant => {
                 if (inverted) {
@@ -166,7 +166,7 @@ export const KitchenSink: Story = {
                       {scheme} - {variant}
                     </DetailText>
                   </Box>
-                  <Flex direction="column" space="lg">
+                  <Flex direction="column" spacing="lg">
                     <VariantTitle title="Default" invert={inverted}>
                       {/* @ts-expect-error - story loop types don't match */}
                       <IconButton
@@ -224,7 +224,7 @@ export const KitchenSink: Story = {
 export const ServiceIconButtons: Story = {
   render: () => {
     return (
-      <ButtonGroup space="md">
+      <ButtonGroup spacing="md">
         <IconButton
           icon={ElectricityMediumIcon}
           backgroundColor="energyBlue200"

package/src/components/IconContainer/IconContainer.docs.mdx

@@ -36,7 +36,7 @@ Wrap an icon with the `IconContainer` to apply sizing + background styles withou
 
 <UsageWrap>
   <Center>
-    <Flex direction="row" space="lg" alignItems="center">
+    <Flex direction="row" spacing="lg" alignItems="center">
       <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
       <IconContainer icon={BroadbandMediumIcon} size="md" variant="emphasis" color="broadband" />
       <IconContainer icon={MobileMediumIcon} size="md" variant="emphasis" color="mobile" />

package/src/components/IconContainer/IconContainer.stories.tsx

@@ -92,11 +92,11 @@ export const KitchenSink: Story = {
       'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight'
     > = ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'];
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         {sizes.map(size => (
           <Box key={size} gap="300">
             <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" space="md">
+            <Flex direction="row" wrap="wrap" spacing="md">
               {colors.map(color => (
                 <IconContainer
                   key={`${size}-subtle-${color}`}
@@ -108,7 +108,7 @@ export const KitchenSink: Story = {
               ))}
             </Flex>
             <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" space="md">
+            <Flex direction="row" wrap="wrap" spacing="md">
               {colors.map(
                 color =>
                   color !== 'highlight' && (

package/src/components/IndicatorIconButton/IndicatorIconButton.stories.tsx

@@ -2,9 +2,9 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { VariantTitle } from '../../../docs/components';
+import { useTheme } from '../../hooks';
 import { Box } from '../Box';
 import { Flex } from '../Flex';
-import { useTheme } from '../../hooks';
 import IndicatorIconButton from './IndicatorIconButton';
 
 const meta = {
@@ -57,8 +57,8 @@ export const Variants: Story = {
   render: args => {
     const icon = typeof args.icon === 'string' ? Icons[args.icon as keyof typeof Icons] : args.icon;
     return (
-      <Flex direction="column" space="xl">
-        <Flex direction="row" space="lg">
+      <Flex direction="column" spacing="xl">
+        <Flex direction="row" spacing="lg">
           <Box>
             <VariantTitle title="Without Indicator" invert={args.inverted}>
               <IndicatorIconButton {...args} icon={icon} indicator={false} />
@@ -70,7 +70,7 @@ export const Variants: Story = {
             </VariantTitle>
           </Box>
         </Flex>
-        <Flex direction="row" space="lg">
+        <Flex direction="row" spacing="lg">
           <Box style={{ backgroundColor: 'purple', padding: 10, borderRadius: 8 }}>
             <VariantTitle title="Inverted" invert={!args.inverted}>
               <IndicatorIconButton {...args} icon={icon} inverted={true} />
@@ -88,13 +88,21 @@ export const Colourful: Story = {
     const theme = useTheme();
 
     return (
-      <Flex direction="column" space="xl">
-        <Flex direction="row" space="lg">
+      <Flex direction="column" spacing="xl">
+        <Flex direction="row" spacing="lg">
           <Box>
-            <IndicatorIconButton {...args} icon={icon} iconStyle={{ color: theme.color.energyBlue[500] }} />
+            <IndicatorIconButton
+              {...args}
+              icon={icon}
+              iconStyle={{ color: theme.color.energyBlue[500] }}
+            />
           </Box>
           <Box>
-            <IndicatorIconButton {...args} icon={icon} iconStyle={{ color: theme.color.cashbackLilac[500] }} />
+            <IndicatorIconButton
+              {...args}
+              icon={icon}
+              iconStyle={{ color: theme.color.cashbackLilac[500] }}
+            />
           </Box>
         </Flex>
       </Flex>
@@ -105,7 +113,7 @@ export const Colourful: Story = {
 export const WithAccessibilityLabel: Story = {
   render: args => {
     return (
-      <Flex direction="column" space="xl">
+      <Flex direction="column" spacing="xl">
         <Box>
           <VariantTitle title="Notification label" invert={args.inverted}>
             <IndicatorIconButton

package/src/components/InlineLink/InlineLink.stories.tsx

@@ -1,5 +1,5 @@
-import { InlineLink } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { InlineLink } from '.';
 import { BodyText } from '../BodyText';
 import { Flex } from '../Flex';
 import { List } from '../List';
@@ -55,7 +55,7 @@ export const Playground: Story = {};
 export const Variants: Story = {
   render: ({ children }) => {
     return (
-      <Flex direction="column" space="sm">
+      <Flex direction="column" spacing="sm">
         <List></List>
         <BodyText>
           This is the body text style, and it contains an{' '}

package/src/components/Input/Input.stories.tsx

@@ -107,7 +107,7 @@ export const Variants: Story = {
       setClearableSearchValue('');
     };
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <Input />
         </VariantTitle>
@@ -202,7 +202,7 @@ export const RefTest: Story = {
     };
 
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Ref Test">
           <Input
             ref={inputRef}
@@ -211,8 +211,8 @@ export const RefTest: Story = {
           />
         </VariantTitle>
         <VariantTitle title="Status">
-          <Flex direction="column" space="sm">
-            <Flex direction="row" space="sm">
+          <Flex direction="column" spacing="sm">
+            <Flex direction="row" spacing="sm">
               <Button onPress={handleFocus}>Focus Input</Button>
               <Button onPress={handleBlur}>Blur Input</Button>
               <Button onPress={handleClear}>Clear Input</Button>

package/src/components/List/List.stories.tsx

@@ -408,7 +408,7 @@ export const KitchenSink: Story = {
       { text: 'List Item 3', helperText: 'Supporting Text 3' },
     ];
     return (
-      <Flex space="sm" direction="column" style={{ width: '100%' }}>
+      <Flex spacing="sm" direction="column" style={{ width: '100%' }}>
         <VariantTitle title="List with title and supporting text">
           <List heading="List Heading" helperText="Supporting Text">
             {list.map((item, index) => (

package/src/components/Menu/Menu.docs.mdx

@@ -67,11 +67,14 @@ const MyComponent = () => {
 
 ### Menu
 
-| Prop               | Type                             | Default | Description                                         |
-| ------------------ | -------------------------------- | ------- | --------------------------------------------------- |
-| `heading`          | `string`                         | -       | Heading text displayed at the top of the menu       |
-| `children`         | `ReactNode`                      | -       | Menu items to display                               |
-| `bottomSheetProps` | `Partial<BottomSheetModalProps>` | -       | Optional bottom sheet modal props for customization |
+| Prop       | Type        | Default | Description                                   |
+| ---------- | ----------- | ------- | --------------------------------------------- |
+| `heading`  | `string`    | -       | Heading text displayed at the top of the menu |
+| `children` | `ReactNode` | -       | Menu items to display                         |
+
+The rest of the props are passed down to the underlying `BottomSheetModal` component, so you can use any of its
+props for additional configuration (e.g. `snapPoints`, `backgroundStyle`, etc.).
+See the [BottomSheetModal docs](/?path=/docs/components-bottomsheet--docs) for more details.
 
 ### MenuItem
 

package/src/components/Menu/Menu.figma.tsx

@@ -1,30 +1,30 @@
-import React from "react"
-import Menu from "./Menu"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { useRef } from 'react';
+import { Button, Menu, MenuTrigger } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+figma.connect(Menu, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832', {
+  props: {
+    menuItems: figma.children('Menu Item'),
+    heading: figma.boolean('Heading?', {
+      true: figma.string('Heading'),
+    }),
+    showHandle: figma.boolean('Grabber?', {
+      true: true,
+    }),
+  },
+  example: props => {
+    const menuRef = useRef(null);
+
+    return (
+      <>
+        <MenuTrigger onPress={() => menuRef.current?.present()}>
+          <Button>Open Menu</Button>
+        </MenuTrigger>
 
-figma.connect(
-  Menu,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      heading: figma.string("Heading"),
-      // No matching props could be found for these Figma properties:
-      // "heading": figma.string('Heading'),
-      // "heading": figma.boolean('Heading?'),
-      // "grabber": figma.boolean('Grabber?'),
-      // "deviceType": figma.enum('Device type', {
-      //   "Web": "web",
-      //   "App": "app"
-      // })
-    },
-    example: (props) => <Menu heading={props.heading} />,
+        <Menu ref={menuRef} heading={props.heading} showHandle={props.showHandle}>
+          {props.menuItems}
+        </Menu>
+      </>
+    );
   },
-)
+});

package/src/components/Menu/Menu.props.ts

@@ -1,12 +1,12 @@
-import type { BottomSheetModalProps } from '@gorhom/bottom-sheet';
 import type { ReactNode } from 'react';
+import { BottomSheetProps } from '../BottomSheet';
 
 export interface MenuMethods {
   present: () => void;
   dismiss: () => void;
 }
 
-export interface MenuProps {
+export interface MenuProps extends BottomSheetProps {
   /**
    * Heading text displayed at the top of the menu
    */
@@ -15,10 +15,6 @@ export interface MenuProps {
    * Menu items to display
    */
   children: ReactNode;
-  /**
-   * Optional bottom sheet modal props to customise the menu behavior
-   */
-  bottomSheetProps?: Partial<BottomSheetModalProps>;
 }
 
 export default MenuProps;