chore(SF-0.131): downport consolidates API of ObjectPage and DynamicPage

docs/2-MigrationGuide.stories.mdx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import { MessageStrip, MessageStripType } from '@ui5/webcomponents-react';
 
 <Meta title="Migration Guide" />
 
@@ -14,13 +15,189 @@ or the [changelog](https://github.com/SAP/ui5-webcomponents-react/blob/master/CH
 
 ## Table of Contents
 
+- [0.16.x to 0.17.0](#migrating-from-016x-to-0170)
+- [0.15.x to 0.16.0](#migrating-from-015x-to-0160)
+- [0.14.x to 0.15.0](#migrating-from-014x-to-0150)
 - [0.13.x to 0.14.0](#migrating-from-013x-to-0140)
 - [0.12.x to 0.13.0](#migrating-from-012x-to-0130)
 - [0.11.x to 0.12.0](#migrating-from-011x-to-0120)
 - [0.10.x to 0.11.0](#migrating-from-010x-to-0110)
 - [0.9.x to 0.10.0](#migrating-from-09x-to-0100)
 - [0.8.x to 0.9.0](#migrating-from-08x-to-090)
 
+## Migrating from 0.16.x to 0.17.0
+
+### Consolidate API of ObjectPage and DynamicPage
+
+The DynamicPage and the ObjectPage are very similar but had completely different APIs and props.
+We streamlined those APIs by adding components used by the `DynamicPage` to the `ObjectPage`.
+
+#### DynamicPage changes
+
+- `title` has been renamed to `headerTitle`.
+- `header` has been renamed to `headerContent`.
+- **`DynamicPageTitle`:** `subHeading` has been renamed to `subheading`.
+- **`DynamicPageHeader`:** `children` are no longer displayed as `flex` items to support other display types like `grid`. To align children you now need to add the container (like `FlexBox`) and CSS yourself.
+  <br />
+  <br />
+  Example for aligning items next to each other:
+
+```jsx
+// Before
+<DynamicPageHeader>
+  <div>Content 1</div>
+  <div>Content 2</div>
+</DynamicPageHeader>
+
+// Now
+<DynamicPageHeader>
+  <FlexBox>
+    <div>Content 1</div>
+    <div>Content 2</div>
+  </FlexBox>
+</DynamicPageHeader>
+```
+
+#### ObjectPage changes
+
+- **`ObjectPageSection`:** `title` and `titleUppercase` has been renamed. Please use `heading` and `headingUppercase` instead.
+- **`ObjectPageSubSection`:** `title` has been renamed to `heading`.
+- `title` has been renamed to `headerTitle` and is now defining the upper, static, title section of the `ObjectPage`. It expects to receive the `DynamicPageTitle` component.
+- `headerContent` now expects the `DynamicPageHeader` component to be passed.
+- `noHeader` has been removed. It is now sufficient not to set `headerTitle` and `headerContent` to achieve the same behavior.
+- `title`, `subTitle`, `headerActions`, `breadcrumbs` and `keyInfos` should now be passed to the corresponding `DynamicPageTitle` props.
+
+Setting the title section of the `ObjectPage`:
+
+```jsx
+//Before
+<ObjectPage
+  title="Heading"
+  subTitle="Subheading"
+  breadcrumbs={
+    <Breadcrumbs currentLocationText="current Breadcrumb">
+      <Link>Breadcrumb 1</Link>
+      <Link>Breadcrumb 2</Link>
+    </Breadcrumbs>
+  }
+  headerActions={
+    <>
+      <Button>Action 1</Button>
+      <Button>Action 2</Button>
+    </>
+  }
+  keyInfos={<ObjectStatus>keyInfo</ObjectStatus>}
+>
+  ObjectPage Content
+</ObjectPage>
+
+//Now
+<ObjectPage
+  headerTitle={
+    <DynamicPageTitle
+      heading="Heading" // replaces `title`
+      subheading="Subheading" // replaces `subTitle`
+      breadcrumbs={
+        <Breadcrumbs currentLocationText="current Breadcrumb">
+          <Link>Breadcrumb 1</Link>
+          <Link>Breadcrumb 2</Link>
+        </Breadcrumbs>
+      }
+      actions={ /* replaces `headerActions`*/
+        <>
+          <Button>Action 1</Button>
+          <Button>Action 2</Button>
+        </>
+      }
+    >
+      <ObjectStatus>keyInfo</ObjectStatus>  {/* replaces `keyInfos` */}
+    </DynamicPageTitle>
+  }
+>
+  ObjectPage Content
+</ObjectPage>
+```
+
+## Migrating from 0.15.x to 0.16.0
+
+<br />
+
+### Changed import path for `ComposedChartPlaceholder`
+
+The import path of the `ComposedChartPlaceholder` has changed. You can now import the placeholder from `@ui5/webcomponents-react-charts/dist/ComposedChartPlaceholder` or directly from `@ui5/webcomponents-react-charts`.
+
+```jsx
+import { ComposedChartPlaceholder } from '@ui5/webcomponents-react-charts/dist/ComposedChartPlaceholder';
+//or
+import { ComposedChartPlaceholder } from '@ui5/webcomponents-react-charts';
+```
+
+### API Updates
+
+#### FilterBar
+
+If `useToolbar` is set to false, the entire toolbar above the filter items is hidden. The search input, variants, and the "Show/Hide FilterBar" button is not available with this mode. The rest of the buttons are displayed next to the filter items.
+
+If you have used the `useToolbar` prop to hide the "Show/Hide Filters" button, but still want to display the search or variants, you can now use the `hideToggleFiltersButton`.
+
+Before:
+
+```jsx
+<FilterBar search={<Input placeholder={'Search'} />} useToolbar={false}>
+  ...
+</FilterBar>
+```
+
+Now:
+
+```jsx
+<FilterBar search={<Input placeholder={'Search'} />} hideToggleFiltersButton>
+  ...
+</FilterBar>
+```
+
+## Migrating from 0.14.x to 0.15.0
+
+<br />
+
+### Replaced `lib` folder with `dist` folder
+
+UI5 Web Components for React was publishing the individual components in a `lib` folder, while our Assets were published
+in `dist`. As UI5 Web Components is also publishing all files in the `dist` directory, we have now dropped our `lib` folder and publish everything to `dist`.
+
+In case you are importing directly from `@ui5/webcomponents-react`, `@ui5/webcomponents-react-charts` or `@ui5/webcomponents-react-base`
+(e.g. `import { Button } from '@ui5/webcomponents-react';`) no action is required.
+
+If you are importing from the `lib` folders, e.g. `import { Button } from '@ui5/webcomponents-react/lib/Button';` you will have to modify your codebase:
+
+You can either change all imports manually:
+
+- replace `@ui5/webcomponents-react/lib/` with `@ui5/webcomponents-react/dist/`
+- replace `@ui5/webcomponents-react-base/lib/` with `@ui5/webcomponents-react-base/dist/`
+- replace `@ui5/webcomponents-react-charts/lib/` with `@ui5/webcomponents-react-charts/dist/`
+
+or use [jscodeshift](https://github.com/facebook/jscodeshift) with our codemod by running this command in your project
+
+```bash
+# replace 'src' with the directory where your src files are located
+npx jscodeshift --transform node_modules/@ui5/webcomponents-react-base/codemods/transformLibToDist.js --extensions js,jsx src
+
+# in case you are using typescript
+npx jscodeshift --transform node_modules/@ui5/webcomponents-react-base/codemods/transformLibToDist.js --extensions js,jsx,ts,tsx --parser tsx src
+```
+
+<MessageStrip type={MessageStripType.Warning} noCloseButton>
+  Please make sure that you have committed all changes before running this codemod.
+  <br />
+  <br />
+  Keep in mind that the codemod output will not always match your project’s coding style, so you might want to run <a
+    href="https://prettier.io"
+    target="_blank"
+  >
+    Prettier
+  </a> after the codemod finishes for consistent formatting.
+</MessageStrip>
+
 ## Migrating from 0.13.x to 0.14.0
 
 <br />
@@ -96,7 +273,7 @@ becomes
 
 ```js
 import { createUseStyles } from 'react-jss';
-import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
 const useStyles = createUseStyles((context) => ({
   myClass: {

packages/base/src/dist/Utils.ts

@@ -0,0 +1,3 @@
+import { deprecationNotice, enrichEventWithDetails } from '../utils';
+
+export { deprecationNotice,  enrichEventWithDetails };

packages/base/src/hooks/useIsRTL.ts

@@ -1,10 +1,13 @@
 import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
 import { useIsomorphicLayoutEffect } from '@ui5/webcomponents-react-base/lib/hooks';
-import { RefObject, useState } from 'react';
+import { RefObject, useRef, useState } from 'react';
 
 const GLOBAL_DIR_CSS_VAR = '--_ui5_dir';
 
 const detectRTL = (elementRef: RefObject<HTMLElement>) => {
+  if (!elementRef.current) {
+    return getRTL();
+  }
   const doc = window.document;
   const dirValues = ['ltr', 'rtl']; // exclude "auto" and "" from all calculations
   const locallyAppliedDir = getComputedStyle(elementRef.current).getPropertyValue(GLOBAL_DIR_CSS_VAR);
@@ -29,14 +32,17 @@ const detectRTL = (elementRef: RefObject<HTMLElement>) => {
 
 const useIsRTL = (elementRef: RefObject<HTMLElement>): boolean => {
   const [isRTL, setRTL] = useState<boolean>(getRTL()); // use config RTL as best guess
-
+  const isMounted = useRef(false);
   useIsomorphicLayoutEffect(() => {
+    isMounted.current = true;
     setRTL(detectRTL(elementRef)); // update immediately while rendering
     const targets = [document.documentElement, document.body, elementRef.current].filter(Boolean);
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === 'dir') {
-          setRTL(detectRTL(elementRef));
+          if (isMounted.current) {
+            setRTL(detectRTL(elementRef));
+          }
         }
       });
     });
@@ -46,9 +52,10 @@ const useIsRTL = (elementRef: RefObject<HTMLElement>): boolean => {
     });
 
     return () => {
+      isMounted.current = false;
       observer.disconnect();
     };
-  }, []);
+  }, [isMounted]);
 
   return isRTL;
 };

packages/base/src/index.ts

@@ -10,12 +10,11 @@ import { StyleClassHelper } from './lib/StyleClassHelper';
 import { ThemingParameters } from './lib/ThemingParameters';
 import { useConsolidatedRef } from './lib/useConsolidatedRef';
 import { usePassThroughHtmlProps } from './lib/usePassThroughHtmlProps';
-import { deprecationNotice, enrichEventWithDetails, getScrollBarWidth } from './lib/Utils';
+import { deprecationNotice, enrichEventWithDetails } from './lib/Utils';
 
 export {
   StyleClassHelper,
   deprecationNotice,
-  getScrollBarWidth,
   Logger,
   LOG_LEVEL,
   useConsolidatedRef,

packages/base/src/lib/Utils.ts

@@ -1,3 +1,3 @@
-import { deprecationNotice, getScrollBarWidth, enrichEventWithDetails } from '../utils';
+import { deprecationNotice, enrichEventWithDetails } from '../utils';
 
-export { deprecationNotice, getScrollBarWidth, enrichEventWithDetails };
+export { deprecationNotice, enrichEventWithDetails };

packages/base/src/utils/index.ts

@@ -8,35 +8,10 @@ export const deprecationNotice = (component: string, message: string) => {
   }
 };
 
-export const getScrollBarWidth = () => {
-  const inner = document.createElement('p');
-  inner.style.width = '100%';
-  inner.style.height = '200px';
-
-  const outer = document.createElement('div');
-  outer.style.position = 'absolute';
-  outer.style.top = '0px';
-  outer.style.left = '0px';
-  outer.style.visibility = 'hidden';
-  outer.style.width = '200px';
-  outer.style.height = '150px';
-  outer.style.overflow = 'hidden';
-  outer.appendChild(inner);
-
-  document.body.appendChild(outer);
-  const w1 = inner.offsetWidth;
-  outer.style.overflow = 'scroll';
-  let w2 = inner.offsetWidth;
-
-  if (w1 === w2) {
-    w2 = outer.clientWidth;
-  }
-
-  document.body.removeChild(outer);
-  return w1 - w2;
-};
-
-export const enrichEventWithDetails = <T extends Record<string, unknown>>(event: UIEvent, payload: T = null) => {
+export const enrichEventWithDetails = <T extends Record<string, unknown>, ReturnType = CustomEvent<T>>(
+  event: UIEvent,
+  payload: T = null
+) => {
   if (event.hasOwnProperty('persist')) {
     // if there is a persist method, it's an SyntheticEvent so we need to persist it
     event.persist();
@@ -50,5 +25,5 @@ export const enrichEventWithDetails = <T extends Record<string, unknown>>(event:
     configurable: true
   });
   Object.assign(event.detail, payload);
-  return (event as unknown) as CustomEvent<T>;
+  return event as unknown as ReturnType;
 };

packages/main/src/components/DynamicPage/DynamicPage.jss.ts

@@ -1,11 +1,10 @@
-import { sapUiResponsiveContentPadding } from '@ui5/webcomponents-react-base/lib/spacing';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 
 export const DynamicPageCssVariables = {
   headerDisplay: '--ui5wcr_DynamicPage_header_display'
 };
 
-const styles = {
+export const styles = {
   dynamicPage: {
     width: '100%',
     height: '100%',
@@ -43,8 +42,7 @@ const styles = {
     backgroundColor: ThemingParameters.sapObjectHeader_Background
   },
   contentContainer: {
-    ...sapUiResponsiveContentPadding,
-    paddingTop: '1rem !important',
+    paddingTop: '1rem',
     boxSizing: 'border-box',
     width: '100%',
     height: 'auto',
@@ -62,7 +60,10 @@ const styles = {
   },
   backgroundTransparent: {
     background: 'transparent'
+  },
+  footer: {
+    position: 'sticky',
+    bottom: '0.5rem',
+    margin: '0 0.5rem'
   }
 };
-
-export default styles;