refactor(Modals): replace context with use-sync-external-store

docs/MigrationGuide.mdx

@@ -65,7 +65,7 @@ Most variables can be replaced by applying the corresponding CSS classes from th
 ### Common CSS substitute classes
 
 <details>
-    <summary>Show</summary>
+  <summary>Show</summary>
 
 | Removed Variable                    | Equivalent Common CSS Class   |
 | ----------------------------------- | ----------------------------- |
@@ -125,7 +125,7 @@ Most variables can be replaced by applying the corresponding CSS classes from th
 ### Removed variables without substitute
 
 <details>
-    <summary>Show</summary>
+  <summary>Show</summary>
 
 | Removed Variable      | Property and Value             |
 | --------------------- | ------------------------------ |
@@ -181,9 +181,9 @@ The `DynamicPage` component has been replaced with the `ui5-dynamic-page` web co
 #### Replaced Props
 
 - `backgroundDesign` is not available anymore. To set the background of the page you can use standard CSS and the respective CSS variables instead:
-  - **List:** `var(--sapGroup_ContentBackground)`
-  - **Solid:** `var(--sapBackgroundColor)`
-  - **Transparent:** `transparent`
+- **List:** `var(--sapGroup_ContentBackground)`
+- **Solid:** `var(--sapBackgroundColor)`
+- **Transparent:** `transparent`
 - `alwaysShowContentHeader` has been renamed to `headerPinned`
 - `headerCollapsed` has been renamed to `headerSnapped`
 - `headerContentPinnable` (default: `true`) has been replaced by `hidePinButton` (default: `false`)
@@ -196,37 +196,37 @@ The `DynamicPage` component has been replaced with the `ui5-dynamic-page` web co
 - `onPinnedStateChange` has been replaced by `onPinButtonToggle`.
 - `onToggleHeaderContent` has been replaced by `onTitleToggle`.
 
-  ```jsx
-  // v1
-  function DynamicPageComponent(props) {
-    const [pinned, setPinned] = useState(false);
-    const [expanded, setExpanded] = useState(true);
-    return (
-      <DynamicPage
-        {...props}
-        onPinnedStateChange={(pinned) => setPinned(pinned)}
-        onToggleHeaderContent={(visible) => {
-          setExpanded(visible);
-        }}
-      />
-    );
-  }
+```jsx
+// v1
+function DynamicPageComponent(props) {
+  const [pinned, setPinned] = useState(false);
+  const [expanded, setExpanded] = useState(true);
+  return (
+    <DynamicPage
+      {...props}
+      onPinnedStateChange={(pinned) => setPinned(pinned)}
+      onToggleHeaderContent={(visible) => {
+        setExpanded(visible);
+      }}
+    />
+  );
+}
 
-  // v2
-  function DynamicPageComponent(props) {
-    const [pinned, setPinned] = useState(false);
-    const [expanded, setExpanded] = useState(true);
-    return (
-      <DynamicPage
-        {...props}
-        onPinButtonToggle={(event) => setPinned(event.target.headerPinned)}
-        onTitleToggle={(event) => {
-          setExpanded(!event.target.headerSnapped);
-        }}
-      />
-    );
-  }
-  ```
+// v2
+function DynamicPageComponent(props) {
+  const [pinned, setPinned] = useState(false);
+  const [expanded, setExpanded] = useState(true);
+  return (
+    <DynamicPage
+      {...props}
+      onPinButtonToggle={(event) => setPinned(event.target.headerPinned)}
+      onTitleToggle={(event) => {
+        setExpanded(!event.target.headerSnapped);
+      }}
+    />
+  );
+}
+```
 
 #### Removed Props
 
@@ -250,16 +250,16 @@ Since the `ObjectPage` isn't compatible with the `DynamicPageTitle` web componen
 - `subHeader` has been renamed to `subheading` and is now a slot.
 - `header` has been renamed to `heading` and is now a `slot`. The `font-size` isn't automatically adjusted anymore, so to keep the intended design you can leverage the new `snappedHeading` prop and apply the corresponding CSS Variables yourself. (see example below)
 
-  Example:
+Example:
 
-  ```jsx
-  <DynamicPageTitle
-    heading={<Title style={{ fontSize: 'var(--sapObjectHeader_Title_FontSize)' }}>Header Title</Title>}
-    snappedHeading={
-      <Title style={{ fontSize: 'var(--sapObjectHeader_Title_SnappedFontSize)' }}>Snapped Header Title</Title>
-    }
-  />
-  ```
+```jsx
+<DynamicPageTitle
+  heading={<Title style={{ fontSize: 'var(--sapObjectHeader_Title_FontSize)' }}>Header Title</Title>}
+  snappedHeading={
+    <Title style={{ fontSize: 'var(--sapObjectHeader_Title_SnappedFontSize)' }}>Snapped Header Title</Title>
+  }
+/>
+```
 
 #### Removed Props
 
@@ -269,24 +269,24 @@ Since the `ObjectPage` isn't compatible with the `DynamicPageTitle` web componen
 - `expandedContent` is now part of the `subheading` prop, so if you've rendered a `MessageStrip` below the `subHeader` for example, you can now render the subheading and additional content both in the same slot.
 - `snappedContent` is now part of the `snappedSubheading` prop, so if you've rendered a `MessageStrip` below the `subHeader` for example, you can now render the subheading and additional content both in the same slot.
 
-  Example for combined `subHeader` and `expanded/snappedContent` in `subheading`/`snappedSubheading`:
-
-  ```jsx
-  <DynamicPageTitle
-    subheading={
-      <>
-        <Label>Subheader</Label>
-        <MessageStrip>Information (only visible if header content is expanded)</MessageStrip>
-      </>
-    }
-    snappedSubheading={
-      <>
-        <Label>Snapped Subheader</Label>
-        <MessageStrip>Information (only visible if header content is collapsed (snapped))</MessageStrip>
-      </>
-    }
-  />
-  ```
+Example for combined `subHeader` and `expanded/snappedContent` in `subheading`/`snappedSubheading`:
+
+```jsx
+<DynamicPageTitle
+  subheading={
+    <>
+      <Label>Subheader</Label>
+      <MessageStrip>Information (only visible if header content is expanded)</MessageStrip>
+    </>
+  }
+  snappedSubheading={
+    <>
+      <Label>Snapped Subheader</Label>
+      <MessageStrip>Information (only visible if header content is collapsed (snapped))</MessageStrip>
+    </>
+  }
+/>
+```
 
 ### Form
 
@@ -610,6 +610,19 @@ function MyComponent() {
 
 ```
 
+### Modals
+
+All Modal helper hooks have been removed. They can be replaced with the regular methods:
+
+- `useShowDialog` --> `showDialog`
+- `useShowPopover` --> `showPopover`
+- `useShowResponsivePopover` --> `showResponsivePopover`
+- `useShowMenu` --> `showMenu`
+- `useShowMessageBox` --> `showMessageBox`
+- `useShowToast` --> `showToast`
+
+The regular methods are now general purpose, so they can be used both inside the React content (components) as well as outside of the React context (redux, redux-saga, etc.).
+
 ### ObjectPageSection
 
 The prop `titleText` is now required and the default value `true` has been removed for the `titleTextUppercase` prop to comply with the updated Fiori design guidelines.
@@ -622,6 +635,11 @@ The prop `titleText` is now required.
 
 For better alignment with the UI5 Web Components the `active` prop has been renamed to `interactive`.
 
+### ThemeProvider
+
+The prop `withoutModalsProvider` has been removed.
+In order to provide a place for the `Modals` helper to mount the popovers, you have to render the new `Modals` component in your application tree.
+
 ## Enum Changes
 
 For better alignment with the UI5 Web Components, the following enums have been renamed:

packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json

@@ -486,6 +486,9 @@
         "valueState": "ValueState"
       }
     },
+    "ThemeProvider": {
+      "removedProps": ["withoutModalsProvider"]
+    },
     "TimePicker": {
       "renamedEnums": {
         "valueState": "ValueState"