feat(ModalPresence): add higher-order function

packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx

@@ -95,3 +95,16 @@ to a different level:
   <ComposedModal ... />
 </ComposedModalPresence>
 ```
+
+Instead of wrapping your component with `ComposedModalPresence`, you can also use the higher-order function `withComposedModalPresence`.
+This will automatically wrap your component and handle the props as well as their types for you:
+
+```jsx
+export const MyComposedModal = withComposedModalPresence(
+  ({ onSubmit, onClose }) => {
+    ...
+  },
+);
+
+<MyComposedModal open={open} onSubmit={noop} onClose={noop} />
+```

packages/react/src/components/ComposedModal/ComposedModalPresence.tsx

@@ -9,6 +9,8 @@ import React, {
   createContext,
   useContext,
   useMemo,
+  type ComponentType,
+  type FC,
   type PropsWithChildren,
 } from 'react';
 import {
@@ -80,3 +82,28 @@ export const useExclusiveComposedModalPresenceContext = (id: string) => {
   const ctx = useContext(ComposedModalPresenceContext);
   return ctx?.isPresenceExclusive(id) ? ctx : undefined;
 };
+
+type WithComposedModalPresenceProps = Pick<ComposedModalPresenceProps, 'open'>;
+
+/**
+ * Higher-order function that wraps a component with ComposedModalPresence
+ */
+export const withComposedModalPresence = <TProps extends object>(
+  Component: ComponentType<TProps>
+): FC<TProps & WithComposedModalPresenceProps> => {
+  const WithComposedModalPresence: FC<
+    TProps & WithComposedModalPresenceProps
+  > = (props) => {
+    const { open, ...componentProps } = props;
+
+    return (
+      <ComposedModalPresence open={open}>
+        <Component {...(componentProps as TProps)} />
+      </ComposedModalPresence>
+    );
+  };
+
+  WithComposedModalPresence.displayName = `withComposedModalPresence(${Component.displayName || Component.name || 'Component'})`;
+
+  return WithComposedModalPresence;
+};

packages/react/src/components/ComposedModal/index.tsx

@@ -13,6 +13,7 @@ export {
 } from './ComposedModal';
 export {
   ComposedModalPresence,
+  withComposedModalPresence,
   type ComposedModalPresenceProps,
 } from './ComposedModalPresence';
 

packages/react/src/components/Modal/Modal.featureflag.mdx

@@ -97,3 +97,16 @@ different level:
   <ComposedModal ... />
 </ModalPresence>
 ```
+
+Instead of wrapping your component with `ModalPresence`, you can also use the higher-order function `withModalPresence`.
+This will automatically wrap your component and handle the props as well as their types for you:
+
+```jsx
+export const MyModal = withModalPresence(
+  ({ onSubmit, onClose }) => {
+    ...
+  },
+);
+
+<MyModal open={open} onSubmit={noop} onClose={noop} />
+```

packages/react/src/components/Modal/ModalPresence.tsx

@@ -9,6 +9,8 @@ import React, {
   createContext,
   useContext,
   useMemo,
+  type ComponentType,
+  type FC,
   type PropsWithChildren,
 } from 'react';
 import {
@@ -73,3 +75,26 @@ export const useExclusiveModalPresenceContext = (id: string) => {
   const ctx = useContext(ModalPresenceContext);
   return ctx?.isPresenceExclusive(id) ? ctx : undefined;
 };
+
+type WithModalPresenceProps = Pick<ModalPresenceProps, 'open'>;
+
+/**
+ * Higher-order function that wraps a component with ModalPresence
+ */
+export const withModalPresence = <TProps extends object>(
+  Component: ComponentType<TProps>
+): FC<TProps & WithModalPresenceProps> => {
+  const WithModalPresence: FC<TProps & WithModalPresenceProps> = (props) => {
+    const { open, ...componentProps } = props;
+
+    return (
+      <ModalPresence open={open}>
+        <Component {...(componentProps as TProps)} />
+      </ModalPresence>
+    );
+  };
+
+  WithModalPresence.displayName = `withModalPresence(${Component.displayName || Component.name || 'Component'})`;
+
+  return WithModalPresence;
+};

packages/react/src/components/Modal/index.ts

@@ -5,7 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Modal, { type ModalProps } from './Modal';
-import { ModalPresence, type ModalPresenceProps } from './ModalPresence';
+import {
+  ModalPresence,
+  withModalPresence,
+  type ModalPresenceProps,
+} from './ModalPresence';
 
 export default Modal;
-export { Modal, ModalPresence, type ModalProps, type ModalPresenceProps };
+export {
+  Modal,
+  ModalPresence,
+  withModalPresence,
+  type ModalProps,
+  type ModalPresenceProps,
+};