@carbon-labs/react-animated-header 0.42.0 → 0.43.0

package/es/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface AnimatedBackgroundProps {
+    headerAnimation?: object;
+    isOpen: boolean;
+}
+declare const AnimatedBackground: React.FC<AnimatedBackgroundProps>;
+export default AnimatedBackground;

package/es/components/AnimatedBackground/AnimatedBackground.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useRef, useEffect } from 'react';
+import lottie from 'lottie-web';
+import { usePrefix } from '@carbon-labs/utilities/usePrefix';
+
+const AnimatedBackground = ({
+  headerAnimation,
+  isOpen
+}) => {
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header__lottie-animation`;
+  const animationContainer = useRef(null);
+  const animRef = useRef(null);
+  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
+  useEffect(() => {
+    // Make sure any prior instance is destroyed before creating a new one
+    if (animRef.current) {
+      animRef.current.destroy();
+      animRef.current = null;
+    }
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
+    const animation = lottie.loadAnimation({
+      container: animationContainer.current,
+      animationData: headerAnimation,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false,
+      rendererSettings: {
+        preserveAspectRatio: 'xMidYMid slice'
+      }
+    });
+    animRef.current = animation;
+    animation.setSpeed(1);
+    const onDomLoaded = () => {
+      const totalFrames = animation.getDuration(true);
+      if (isReduced) {
+        animation.goToAndStop(totalFrames, true);
+      } else {
+        animation.play();
+      }
+    };
+    animation.addEventListener('DOMLoaded', onDomLoaded);
+    return () => {
+      animation.removeEventListener('DOMLoaded', onDomLoaded);
+      animation.destroy();
+      animRef.current = null;
+    };
+    // Re-init when the JSON or reduced-motion preference changes
+  }, [headerAnimation, isReduced]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: animationContainer,
+    className: `${blockClass}`,
+    "data-expanded": isOpen,
+    "aria-hidden": "true"
+  }));
+};
+
+export { AnimatedBackground as default };

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -6,9 +6,8 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState, Suspense, lazy } from 'react';
 import PropTypes from 'prop-types';
-import lottie from 'lottie-web';
 import { Grid, Column, Button } from '@carbon/react';
 import { ChevronUp, ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '@carbon-labs/utilities/usePrefix';
@@ -17,9 +16,12 @@ import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
 import TasksController from '../TasksController/TasksController.js';
 import WorkspaceSelector from '../WorkspaceSelector/WorkspaceSelector.js';
 import HeaderTitle from '../HeaderTitle/HeaderTitle.js';
+import StaticBackground from '../StaticBackground/StaticBackground.js';
 import ContentSwitcherSelector from '../ContentSwitcherSelector/ContentSwitcherSelector.js';
 import HeaderAction from '../HeaderAction/HeaderAction.js';
 
+const AnimatedBackground = /*#__PURE__*/lazy(() => import('../AnimatedBackground/AnimatedBackground.js'));
+
 /** Animated Header */
 
 const AnimatedHeader = ({
@@ -45,62 +47,10 @@ const AnimatedHeader = ({
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header`;
-  const animationContainer = useRef(null);
-  const animRef = useRef(null);
   const [isOpen, setIsOpen] = useState(true);
-  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
   const handleButtonCollapseClick = () => {
     setIsOpen(!isOpen);
   };
-  useEffect(() => {
-    // Make sure any prior instance is destroyed before creating a new one
-    if (animRef.current) {
-      animRef.current.destroy();
-      animRef.current = null;
-    }
-    if (!animationContainer.current || !headerAnimation) {
-      return;
-    }
-    const animation = lottie.loadAnimation({
-      container: animationContainer.current,
-      animationData: headerAnimation,
-      renderer: 'svg',
-      loop: false,
-      autoplay: false,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    });
-    animRef.current = animation;
-    const onDomLoaded = () => {
-      const data = animation.animationData;
-      const markers = data?.markers ?? [];
-      const first = markers?.[0]?.tm ?? 0;
-      const totalFrames = animation.getDuration(true);
-      const second = markers?.[1]?.tm ?? totalFrames;
-      if (isReduced) {
-        // Respect reduced motion
-        const restFrame = (typeof second === 'number' ? second : totalFrames * 0.5) | 0;
-        animation.goToAndStop(restFrame, true);
-        return;
-      }
-      animation.setSpeed(1);
-      requestAnimationFrame(() => {
-        if (typeof first === 'number' && typeof second === 'number') {
-          animation.playSegments([first, second], true);
-        } else {
-          animation.play();
-        }
-      });
-    };
-    animation.addEventListener('DOMLoaded', onDomLoaded);
-    return () => {
-      animation.removeEventListener('DOMLoaded', onDomLoaded);
-      animation.destroy();
-      animRef.current = null;
-    };
-    // Re-init when the JSON or reduced-motion preference changes
-  }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("header", {
     className: blockClass,
     "data-expanded": isOpen
@@ -110,24 +60,14 @@ const AnimatedHeader = ({
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__container--gradient`
-  }), !headerAnimation && headerStatic && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static`
-    // eslint-disable-next-line react/forbid-dom-props
-    ,
-    style: {
-      backgroundImage: `url(${headerStatic})`
-    },
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__lottie-animation--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: animationContainer,
-    className: `${blockClass}__lottie-animation`,
-    "data-expanded": isOpen,
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement(Column, {
+  }), headerAnimation ? typeof window !== 'undefined' && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AnimatedBackground, {
+    headerAnimation: headerAnimation,
+    isOpen: isOpen
+  })) : /*#__PURE__*/React.createElement(StaticBackground, {
+    headerStatic: headerStatic
+  }), /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 16,

package/es/components/StaticBackground/StaticBackground.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface StaticBackgroundProps {
+    headerStatic?: React.JSX.Element | string;
+}
+declare const StaticBackground: React.FC<StaticBackgroundProps>;
+export default StaticBackground;

package/es/components/StaticBackground/StaticBackground.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from '@carbon-labs/utilities/usePrefix';
+import React from 'react';
+
+const StaticBackground = ({
+  headerStatic
+}) => {
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header__static`;
+  if (!headerStatic) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}`
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: {
+      backgroundImage: `url(${headerStatic})`
+    },
+    "aria-hidden": "true"
+  }));
+};
+
+export { StaticBackground as default };

package/lib/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface AnimatedBackgroundProps {
+    headerAnimation?: object;
+    isOpen: boolean;
+}
+declare const AnimatedBackground: React.FC<AnimatedBackgroundProps>;
+export default AnimatedBackground;

package/lib/components/AnimatedBackground/AnimatedBackground.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var lottie = require('lottie-web');
+var usePrefix = require('@carbon-labs/utilities/usePrefix');
+
+const AnimatedBackground = ({
+  headerAnimation,
+  isOpen
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header__lottie-animation`;
+  const animationContainer = React.useRef(null);
+  const animRef = React.useRef(null);
+  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
+  React.useEffect(() => {
+    // Make sure any prior instance is destroyed before creating a new one
+    if (animRef.current) {
+      animRef.current.destroy();
+      animRef.current = null;
+    }
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
+    const animation = lottie.loadAnimation({
+      container: animationContainer.current,
+      animationData: headerAnimation,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false,
+      rendererSettings: {
+        preserveAspectRatio: 'xMidYMid slice'
+      }
+    });
+    animRef.current = animation;
+    animation.setSpeed(1);
+    const onDomLoaded = () => {
+      const totalFrames = animation.getDuration(true);
+      if (isReduced) {
+        animation.goToAndStop(totalFrames, true);
+      } else {
+        animation.play();
+      }
+    };
+    animation.addEventListener('DOMLoaded', onDomLoaded);
+    return () => {
+      animation.removeEventListener('DOMLoaded', onDomLoaded);
+      animation.destroy();
+      animRef.current = null;
+    };
+    // Re-init when the JSON or reduced-motion preference changes
+  }, [headerAnimation, isReduced]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: animationContainer,
+    className: `${blockClass}`,
+    "data-expanded": isOpen,
+    "aria-hidden": "true"
+  }));
+};
+
+exports.default = AnimatedBackground;

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var lottie = require('lottie-web');
 var react = require('@carbon/react');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('@carbon-labs/utilities/usePrefix');
@@ -21,9 +20,12 @@ var BaseTile = require('../Tiles/BaseTile/BaseTile.js');
 var TasksController = require('../TasksController/TasksController.js');
 var WorkspaceSelector = require('../WorkspaceSelector/WorkspaceSelector.js');
 var HeaderTitle = require('../HeaderTitle/HeaderTitle.js');
+var StaticBackground = require('../StaticBackground/StaticBackground.js');
 var ContentSwitcherSelector = require('../ContentSwitcherSelector/ContentSwitcherSelector.js');
 var HeaderAction = require('../HeaderAction/HeaderAction.js');
 
+const AnimatedBackground = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('../AnimatedBackground/AnimatedBackground.js'); }));
+
 /** Animated Header */
 
 const AnimatedHeader = ({
@@ -49,62 +51,10 @@ const AnimatedHeader = ({
 }) => {
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header`;
-  const animationContainer = React.useRef(null);
-  const animRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(true);
-  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
   const handleButtonCollapseClick = () => {
     setIsOpen(!isOpen);
   };
-  React.useEffect(() => {
-    // Make sure any prior instance is destroyed before creating a new one
-    if (animRef.current) {
-      animRef.current.destroy();
-      animRef.current = null;
-    }
-    if (!animationContainer.current || !headerAnimation) {
-      return;
-    }
-    const animation = lottie.loadAnimation({
-      container: animationContainer.current,
-      animationData: headerAnimation,
-      renderer: 'svg',
-      loop: false,
-      autoplay: false,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    });
-    animRef.current = animation;
-    const onDomLoaded = () => {
-      const data = animation.animationData;
-      const markers = data?.markers ?? [];
-      const first = markers?.[0]?.tm ?? 0;
-      const totalFrames = animation.getDuration(true);
-      const second = markers?.[1]?.tm ?? totalFrames;
-      if (isReduced) {
-        // Respect reduced motion
-        const restFrame = (typeof second === 'number' ? second : totalFrames * 0.5) | 0;
-        animation.goToAndStop(restFrame, true);
-        return;
-      }
-      animation.setSpeed(1);
-      requestAnimationFrame(() => {
-        if (typeof first === 'number' && typeof second === 'number') {
-          animation.playSegments([first, second], true);
-        } else {
-          animation.play();
-        }
-      });
-    };
-    animation.addEventListener('DOMLoaded', onDomLoaded);
-    return () => {
-      animation.removeEventListener('DOMLoaded', onDomLoaded);
-      animation.destroy();
-      animRef.current = null;
-    };
-    // Re-init when the JSON or reduced-motion preference changes
-  }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("header", {
     className: blockClass,
     "data-expanded": isOpen
@@ -114,24 +64,14 @@ const AnimatedHeader = ({
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__container--gradient`
-  }), !headerAnimation && headerStatic && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static`
-    // eslint-disable-next-line react/forbid-dom-props
-    ,
-    style: {
-      backgroundImage: `url(${headerStatic})`
-    },
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__lottie-animation--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: animationContainer,
-    className: `${blockClass}__lottie-animation`,
-    "data-expanded": isOpen,
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement(react.Column, {
+  }), headerAnimation ? typeof window !== 'undefined' && /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AnimatedBackground, {
+    headerAnimation: headerAnimation,
+    isOpen: isOpen
+  })) : /*#__PURE__*/React.createElement(StaticBackground.default, {
+    headerStatic: headerStatic
+  }), /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 8,
     lg: 16,

package/lib/components/StaticBackground/StaticBackground.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface StaticBackgroundProps {
+    headerStatic?: React.JSX.Element | string;
+}
+declare const StaticBackground: React.FC<StaticBackgroundProps>;
+export default StaticBackground;

package/lib/components/StaticBackground/StaticBackground.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var usePrefix = require('@carbon-labs/utilities/usePrefix');
+var React = require('react');
+
+const StaticBackground = ({
+  headerStatic
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header__static`;
+  if (!headerStatic) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}`
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: {
+      backgroundImage: `url(${headerStatic})`
+    },
+    "aria-hidden": "true"
+  }));
+};
+
+exports.default = StaticBackground;

package/lib/es/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -0,0 +1,8 @@
+export { AnimatedBackground as default };
+declare function AnimatedBackground({ headerAnimation, isOpen }: {
+    headerAnimation: any;
+    isOpen: any;
+}): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+import React from 'react';

package/lib/es/components/StaticBackground/StaticBackground.d.ts

@@ -0,0 +1,7 @@
+export { StaticBackground as default };
+declare function StaticBackground({ headerStatic }: {
+    headerStatic: any;
+}): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;
+import React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "0.21.0"
   },
-  "gitHead": "b0e1037e0377d84bd08b8808375e1c18f5e89720"
+  "gitHead": "d098948fe99c928fc9884fb0fdb2f2e8a855ae30"
 }