feat(ObjectPage & DynamicPage): add onPinnedStateChange, fix setting alwaysShowContentHeader in runtime

cypress.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'cypress';
 import codeCoverageTask from '@cypress/code-coverage/task';
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   component: {
@@ -16,5 +16,6 @@ export default defineConfig({
   viewportWidth: 1920,
   viewportHeight: 1080,
   video: false,
-  screenshotOnRunFailure: false
+  screenshotOnRunFailure: false,
+  scrollBehavior: false
 });

package.json

@@ -7,7 +7,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "start": "lerna run build:i18n && start-storybook -p 6006",
-    "build:prepare": "lerna run build:i18n && node scripts/build-wrappers.js",
+    "build:prepare": "lerna run build:i18n && node scripts/build-wrappers.js && rimraf node_modules/@types/mocha",
     "build:cleanup": "rimraf packages/main/tmp",
     "build": "yarn build:prepare && tsc --build && yarn build:cleanup",
     "build:storybook": "lerna run build:i18n && build-storybook -o .out",

packages/main/src/components/DynamicPage/DynamicPage.cy.tsx

@@ -1,4 +1,5 @@
-import { DynamicPage, DynamicPageHeader, DynamicPageTitle } from '../..';
+import { useState } from 'react';
+import { Button, DynamicPage, DynamicPageHeader, DynamicPagePropTypes, DynamicPageTitle } from '../..';
 
 describe('DynamicPage', () => {
   it('toggle header', () => {
@@ -35,4 +36,164 @@ describe('DynamicPage', () => {
     cy.get('@toggleSpy').should('have.been.calledWith', true);
     cy.get('@toggleSpy').should('have.callCount', 4);
   });
+
+  it('pin header', () => {
+    const pin = cy.spy().as('onPinSpy');
+    cy.mount(
+      <DynamicPage
+        style={{ height: '100vh' }}
+        headerTitle={<DynamicPageTitle header="Heading" subHeader="SubHeading" />}
+        headerContent={<DynamicPageHeader>DynamicPageHeader</DynamicPageHeader>}
+        headerContentPinnable
+        showHideHeaderButton
+        onPinnedStateChange={pin}
+        data-testid="op"
+      >
+        <div style={{ height: '2000px' }} />
+      </DynamicPage>
+    );
+    cy.wait(50);
+    cy.findByTestId('op').scrollTo(0, 500);
+    cy.findByText('DynamicPageHeader').should('not.be.visible');
+
+    cy.findByTestId('op').scrollTo('top');
+
+    cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').click();
+    cy.get('@onPinSpy').should('have.been.calledOnce');
+    cy.get('@onPinSpy').should('have.been.calledWith', true);
+
+    cy.findByTestId('op').scrollTo(0, 500);
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').click();
+    cy.get('@onPinSpy').should('have.been.calledTwice');
+    cy.get('@onPinSpy').should('have.been.calledWith', false);
+    cy.findByTestId('op').scrollTo(0, 501);
+    cy.findByText('DynamicPageHeader').should('not.be.visible');
+  });
+
+  it('programmatically pin header (`alwaysShowContentHeader`)', () => {
+    const TestComp = ({ onPinnedStateChange }: DynamicPagePropTypes) => {
+      const [pinned, setPinned] = useState(false);
+      const handlePinChange = (pinned) => {
+        onPinnedStateChange(pinned);
+        setPinned(pinned);
+      };
+      return (
+        <>
+          <Button
+            data-testid="btn"
+            onClick={() => {
+              setPinned((prev) => !prev);
+            }}
+          >
+            toggle {`${!pinned}`}
+          </Button>
+          <DynamicPage
+            style={{ height: '100vh' }}
+            headerTitle={<DynamicPageTitle header="Heading" subHeader="SubHeading" />}
+            headerContent={<DynamicPageHeader>DynamicPageHeader</DynamicPageHeader>}
+            headerContentPinnable
+            showHideHeaderButton
+            alwaysShowContentHeader={pinned}
+            onPinnedStateChange={handlePinChange}
+            data-testid="op"
+          >
+            <div style={{ height: '2000px' }} />
+          </DynamicPage>
+        </>
+      );
+    };
+    const pin = cy.spy().as('onPinSpy');
+    cy.mount(<TestComp onPinnedStateChange={pin} />);
+    cy.wait(50);
+
+    cy.findByTestId('op').scrollTo(0, 500);
+    cy.findByText('DynamicPageHeader').should('not.be.visible');
+
+    cy.findByTestId('btn').click();
+    cy.get('@onPinSpy').should('have.been.calledOnce');
+    cy.get('@onPinSpy').should('have.been.calledWith', true);
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    cy.findByTestId('op').scrollTo(0, 0);
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    cy.findByTestId('op').scrollTo(0, 800);
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    cy.findByTestId('btn').click();
+    cy.get('@onPinSpy').should('have.been.calledTwice');
+    cy.get('@onPinSpy').should('have.been.calledWith', false);
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    cy.findByTestId('op').scrollTo(0, 801);
+    cy.findByText('DynamicPageHeader').should('not.be.visible');
+
+    cy.findByTestId('btn').click();
+    cy.findByTestId('op').scrollTo(0, 500);
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    cy.findByTestId('btn').click();
+    cy.findByTestId('op').scrollTo(0, 501);
+    cy.findByText('DynamicPageHeader').should('not.be.visible');
+
+    cy.get('[data-component-name="DynamicPageAnchorBarExpandBtn"]').click();
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    // wait for timeout of expand click
+    cy.wait(500);
+
+    cy.findByTestId('op').scrollTo(0, 502);
+    cy.findByText('DynamicPageHeader').should('not.be.visible');
+
+    cy.findByTestId('op').scrollTo(0, 30);
+    cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').click();
+    cy.get('@onPinSpy').should('have.callCount', 5);
+    cy.findByTestId('btn').should('have.text', 'toggle false');
+    cy.findByText('DynamicPageHeader').should('be.visible');
+
+    cy.findByTestId('op').scrollTo(0, 500);
+    cy.findByTestId('btn').click();
+    cy.findByTestId('op').scrollTo(0, 501);
+    cy.findByText('DynamicPageHeader').should('not.be.visible');
+
+    cy.findByTestId('btn').click();
+    cy.findByText('DynamicPageHeader').should('be.visible');
+    cy.get('@onPinSpy').should('have.callCount', 7);
+  });
+
+  it('collapse header when partially visible', () => {
+    cy.viewport(1440, 1080);
+    cy.mount(
+      <DynamicPage
+        style={{ height: '100vh' }}
+        headerTitle={<DynamicPageTitle header="Heading" subHeader="SubHeading" />}
+        headerContent={
+          <DynamicPageHeader>
+            <div style={{ height: '400px', width: '100%', background: 'lightyellow' }}>DynamicPageHeader</div>
+          </DynamicPageHeader>
+        }
+        headerContentPinnable
+        showHideHeaderButton
+        data-testid="op"
+      >
+        <div style={{ height: '2000px' }} />
+      </DynamicPage>
+    );
+    cy.wait(50);
+
+    cy.findByTestId('op').scrollTo(0, 400);
+    cy.get('[data-component-name="DynamicPageAnchorBarExpandBtn"]').click();
+    // wait for timeout of expand click
+    cy.wait(500);
+    cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').should('not.exist');
+
+    cy.findByTestId('op').scrollTo(0, 1);
+    cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').should('not.exist');
+    cy.wait(50);
+    cy.findByTestId('op').scrollTo(0, 0);
+    cy.get('[data-component-name="DynamicPageAnchorBarPinBtn"]').should('be.visible');
+    cy.findByText('DynamicPageHeader').should('be.visible');
+  });
 });

packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap

@@ -264,6 +264,7 @@ exports[`DynamicPage always show content header 1`] = `
         <ui5-button
           accessible-name="Collapse Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonExpandable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          data-component-name="DynamicPageAnchorBarExpandBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="slim-arrow-up"
@@ -273,6 +274,7 @@ exports[`DynamicPage always show content header 1`] = `
         <ui5-toggle-button
           accessible-name="Unpin Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="pushpin-off"
@@ -460,6 +462,7 @@ exports[`DynamicPage hider header button 1`] = `
         <ui5-toggle-button
           accessible-name="Unpin Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable"
+          data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="pushpin-off"
@@ -675,6 +678,7 @@ exports[`DynamicPage render footer 1`] = `
         <ui5-button
           accessible-name="Expand Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonExpandable"
+          data-component-name="DynamicPageAnchorBarExpandBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="slim-arrow-down"
@@ -974,6 +978,7 @@ exports[`DynamicPage with content 1`] = `
         <ui5-button
           accessible-name="Collapse Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonExpandable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          data-component-name="DynamicPageAnchorBarExpandBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="slim-arrow-up"
@@ -983,6 +988,7 @@ exports[`DynamicPage with content 1`] = `
         <ui5-toggle-button
           accessible-name="Pin Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="pushpin-off"
@@ -1976,6 +1982,7 @@ exports[`DynamicPage without content 1`] = `
         <ui5-button
           accessible-name="Collapse Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonExpandable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          data-component-name="DynamicPageAnchorBarExpandBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="slim-arrow-up"
@@ -1985,6 +1992,7 @@ exports[`DynamicPage without content 1`] = `
         <ui5-toggle-button
           accessible-name="Pin Header"
           class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
           icon="pushpin-off"

packages/main/src/components/DynamicPage/index.tsx

@@ -72,6 +72,10 @@ export interface DynamicPagePropTypes extends Omit<CommonProps, 'title'> {
    * Fired when the `headerContent` is expanded or collapsed.
    */
   onToggleHeaderContent?: (visible: boolean) => void;
+  /**
+   * Fired when the `headerContent` changes its `pinned` state.
+   */
+  onPinnedStateChange?: (pinned: boolean) => void;
 }
 
 /**
@@ -107,6 +111,7 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
     footer,
     a11yConfig,
     onToggleHeaderContent,
+    onPinnedStateChange,
     ...rest
   } = props;
   const { onScroll: _1, ...propsWithoutOmitted } = rest;
@@ -117,6 +122,7 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
 
   const [componentRefTopHeader, topHeaderRef] = useSyncRef<HTMLDivElement>((headerTitle as any)?.ref);
   const [componentRefHeaderContent, headerContentRef] = useSyncRef<HTMLDivElement>((headerContent as any)?.ref);
+  const scrollTimeout = useRef(0);
 
   const [headerState, setHeaderState] = useState<HEADER_STATES>(
     alwaysShowContentHeader ? HEADER_STATES.VISIBLE_PINNED : HEADER_STATES.AUTO
@@ -134,7 +140,8 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
     [headerCollapsedInternal, setHeaderCollapsedInternal],
     {
       noHeader: false,
-      fixedHeader: headerState === HEADER_STATES.VISIBLE_PINNED || headerState === HEADER_STATES.HIDDEN_PINNED
+      fixedHeader: headerState === HEADER_STATES.VISIBLE_PINNED || headerState === HEADER_STATES.HIDDEN_PINNED,
+      scrollTimeout
     }
   );
 
@@ -168,19 +175,21 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
   }, []);
 
   useEffect(() => {
+    const dynamicPage = dynamicPageRef.current;
     const oneTimeScrollHandler = () => {
       setHeaderState(HEADER_STATES.AUTO);
       setHeaderCollapsedInternal(true);
     };
     if (headerState === HEADER_STATES.VISIBLE || headerState === HEADER_STATES.HIDDEN) {
-      dynamicPageRef.current?.addEventListener('scroll', oneTimeScrollHandler, { once: true });
+      dynamicPage?.addEventListener('scroll', oneTimeScrollHandler, { once: true });
     }
     return () => {
-      dynamicPageRef.current?.removeEventListener('scroll', oneTimeScrollHandler);
+      dynamicPage?.removeEventListener('scroll', oneTimeScrollHandler);
     };
   }, [dynamicPageRef, headerState]);
 
   const onToggleHeaderContentVisibility = (e) => {
+    scrollTimeout.current = performance.now() + 500;
     const shouldHideHeader = !e.detail.visible;
     setHeaderState((oldState) => {
       if (oldState === HEADER_STATES.VISIBLE_PINNED || oldState === HEADER_STATES.HIDDEN_PINNED) {
@@ -222,10 +231,14 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
   };
 
   useEffect(() => {
-    if (alwaysShowContentHeader) {
-      setHeaderState(HEADER_STATES.VISIBLE_PINNED);
+    if (alwaysShowContentHeader !== undefined) {
+      if (alwaysShowContentHeader) {
+        setHeaderState(HEADER_STATES.VISIBLE_PINNED);
+      } else {
+        setHeaderState(HEADER_STATES.VISIBLE);
+      }
     }
-  }, [alwaysShowContentHeader, setHeaderState]);
+  }, [alwaysShowContentHeader]);
 
   const responsivePaddingClass = useResponsiveContentPadding(dynamicPageRef.current);
 
@@ -297,11 +310,12 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
           headerContentPinnable={headerContentPinnable}
           showHideHeaderButton={showHideHeaderButton}
           headerContentVisible={headerContent && headerCollapsed !== true}
-          onToggleHeaderContentVisibility={onToggleHeaderContentInternal}
-          setHeaderPinned={handleHeaderPinnedChange}
           headerPinned={headerState === HEADER_STATES.VISIBLE_PINNED || headerState === HEADER_STATES.HIDDEN_PINNED}
-          onHoverToggleButton={onHoverToggleButton}
           a11yConfig={a11yConfig}
+          onHoverToggleButton={onHoverToggleButton}
+          onToggleHeaderContentVisibility={onToggleHeaderContentInternal}
+          onPinnedStateChange={onPinnedStateChange}
+          setHeaderPinned={handleHeaderPinnedChange}
         />
       </FlexBox>
       <div