@carbon-labs/react-animated-header 0.3.0 → 0.5.0

package/es/__stories__/data/index.d.ts

@@ -1,18 +1,10 @@
-/**
- * @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.
- */
 export const workspaceData: {
     id: string;
-    text: string;
+    label: string;
 }[];
 export const headerTiles: ({
     id: number;
-    name: string;
+    label: string;
     tiles: ({
         id: string;
         href: string;
@@ -28,7 +20,7 @@ export const headerTiles: ({
     })[];
 } | {
     id: number;
-    name: string;
+    label: string;
     tiles: ({
         id: string;
         href: string;
@@ -45,3 +37,21 @@ export const headerTiles: ({
         subtitle?: undefined;
     })[];
 })[];
+export namespace tasksConfigButton {
+    let type: string;
+    namespace button {
+        export let href: string;
+        export { Add as icon };
+        export let text: string;
+        let type_1: "tertiary";
+        export { type_1 as type };
+    }
+}
+export namespace tasksConfigDropdown {
+    let type_2: string;
+    export { type_2 as type };
+    export namespace dropdown {
+        let label: string;
+    }
+}
+import { Add } from '@carbon/react/icons';

package/es/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -1,39 +1,52 @@
 import React from 'react';
 import { ButtonKind } from '@carbon/react';
 /** Animated Header */
+export interface TasksConfig {
+    type: 'button' | 'dropdown' | string;
+    button?: {
+        href?: string;
+        icon?: any;
+        text?: string;
+        type?: ButtonKind;
+    };
+    dropdown?: {
+        label?: string;
+    };
+}
 export interface SelectedWorkspace {
     id: string;
-    text: string;
+    label: string;
 }
 export interface Tile {
-    id: string;
     href: string | null;
-    title: string | null;
-    subtitle: string | null;
+    id: string;
     mainIcon: string | null;
-    secondaryIcon: string | null;
+    secondaryIcon?: string | null;
+    subtitle?: string | null;
+    title: string | null;
 }
 export interface TileGroup {
     id: number;
-    name: string;
+    label: string;
     tiles: Tile[];
 }
 export interface AnimatedHeaderProps {
-    name?: string;
+    allTiles: TileGroup[];
+    allWorkspaces?: SelectedWorkspace[];
     description?: string;
-    buttonText?: string;
-    buttonType?: ButtonKind;
-    buttonIcon?: any;
-    headerDropdown?: boolean;
+    handleHeaderItemsToString: (item: TileGroup | null) => string;
+    handleWorkspaceItemsToString: (item: SelectedWorkspace | null) => string;
+    headerAnimation?: object;
+    headerStatic?: React.JSX.Element;
     productName?: string;
-    selectedWorkspace?: SelectedWorkspace[] | any;
-    setSelectedWorkspace: (e: any) => void;
-    allWorkspaces?: SelectedWorkspace[];
     selectedTileGroup: TileGroup[] | any;
+    selectedWorkspace?: SelectedWorkspace | any;
     setSelectedTileGroup: (e: any) => void;
-    allTiles: TileGroup[];
-    headerAnimation?: object;
-    headerStatic?: React.JSX.Element;
+    setSelectedWorkspace: (e: any) => void;
+    tasksConfig?: TasksConfig;
+    userName?: string;
+    welcomeText?: string;
+    workspaceLabel?: string;
 }
 declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
 export default AnimatedHeader;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -7,7 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, createRef } from 'react';
-import { ButtonKinds, Grid, Column, Tooltip, Button, Dropdown, IconButton } from '@carbon/react';
+import { Grid, Column, Tooltip, Button, Dropdown, IconButton } from '@carbon/react';
 import lottie from '../../_virtual/lottie.js';
 import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
 import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
@@ -21,25 +21,26 @@ var _PauseFilled, _PlayFilledAlt;
 
 const AnimatedHeader = _ref => {
   let {
-    name,
+    allTiles,
+    allWorkspaces,
     description,
-    buttonText,
-    buttonType = 'tertiary',
-    buttonIcon = null,
-    headerDropdown = false,
+    handleHeaderItemsToString,
+    handleWorkspaceItemsToString,
+    headerAnimation,
+    headerStatic,
     productName = '[Product name]',
-    selectedWorkspace,
-    setSelectedWorkspace,
-    allWorkspaces,
     selectedTileGroup,
+    selectedWorkspace,
     setSelectedTileGroup,
-    allTiles,
-    headerAnimation,
-    headerStatic
+    setSelectedWorkspace,
+    tasksConfig,
+    userName,
+    welcomeText,
+    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header`;
-  let animationContainer = /*#__PURE__*/createRef();
+  const animationContainer = /*#__PURE__*/createRef();
   const [open, setOpen] = useState(true);
   const [playing, setPlaying] = useState(true);
   const [headingTextAnimation, setHeadingTextAnimation] = useState('');
@@ -63,7 +64,7 @@ const AnimatedHeader = _ref => {
     setPlaying(!playing);
   };
   useEffect(() => {
-    let animation = lottie.loadAnimation({
+    const animation = lottie.loadAnimation({
       container: animationContainer.current,
       animationData: headerAnimation,
       renderer: 'svg',
@@ -84,7 +85,7 @@ const AnimatedHeader = _ref => {
       animation.setSpeed(lottieLoopSpeed);
       animation.playSegments([animationData.markers.at(1).tm, animationData.op], true);
     }
-    if (!!isReduced) {
+    if (isReduced) {
       // reduced motion on
       animation.addEventListener('DOMLoaded', reducedMotion);
     } else {
@@ -96,9 +97,15 @@ const AnimatedHeader = _ref => {
       // Run Looped Animation
       animation.addEventListener('complete', loop);
     }
-  }, []);
+    return () => {
+      animation?.removeEventListener('DOMLoaded', reducedMotion);
+      animation?.removeEventListener('DOMLoaded', load);
+      animation?.removeEventListener('complete', loop);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("section", {
-    className: `${blockClass} ${!open && collapsed}`
+    className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
@@ -121,14 +128,14 @@ const AnimatedHeader = _ref => {
     lg: 16
   }, /*#__PURE__*/React.createElement(Tooltip, {
     align: "bottom",
-    label: `Welcome, ${name}`
+    label: `${welcomeText}, ${userName}`
   }, /*#__PURE__*/React.createElement("h1", {
     className: `${blockClass}__heading ${headingTextAnimation}`
   }, /*#__PURE__*/React.createElement("span", {
     className: `${blockClass}__heading-welcome`
-  }, "Welcome,", ' '), /*#__PURE__*/React.createElement("span", {
+  }, welcomeText, ",", ' '), /*#__PURE__*/React.createElement("span", {
     className: `${blockClass}__heading-name`
-  }, name)))), (description || buttonText || headerDropdown) && /*#__PURE__*/React.createElement(Column, {
+  }, userName)))), (description || tasksConfig && tasksConfig.type === 'button' && tasksConfig.button?.text || tasksConfig && tasksConfig.type === 'dropdown' && tasksConfig.dropdown?.label) && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 4,
@@ -138,24 +145,23 @@ const AnimatedHeader = _ref => {
     label: description
   }, /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`
-  }, description)), buttonText && /*#__PURE__*/React.createElement(Button, {
+  }, description)), tasksConfig?.button?.text && /*#__PURE__*/React.createElement(Button, {
     className: `${blockClass}__button`,
-    kind: buttonType,
-    renderIcon: buttonIcon
-  }, buttonText), !buttonText && headerDropdown && allTiles && /*#__PURE__*/React.createElement("div", {
+    kind: tasksConfig.button.type,
+    renderIcon: tasksConfig.button.icon,
+    href: tasksConfig.button.href
+  }, tasksConfig.button.text), !tasksConfig?.button?.text && tasksConfig && tasksConfig.type === 'dropdown' && allTiles && /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__header-dropdown--container`
   }, /*#__PURE__*/React.createElement(Dropdown, {
     id: `${blockClass}__header-dropdown`,
     className: `${blockClass}__header-dropdown`,
     size: "md",
-    autoAlign: true,
     titleText: "Label",
-    initialSelectedItem: allTiles[0],
-    label: allTiles[0].name || 'Select an option below',
+    label: tasksConfig.dropdown?.label || allTiles[0].label,
     hideLabel: true,
     type: "inline",
     items: allTiles,
-    itemToString: item => item ? item.name : '',
+    itemToString: item => handleHeaderItemsToString(item),
     onChange: e => setSelectedTileGroup(e)
   }))), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
@@ -169,11 +175,11 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__workspace`,
     size: "sm",
     titleText: "Label",
-    label: `Open in: ${name}'s workspace` || 'Select a workspace',
+    label: workspaceLabel,
     hideLabel: true,
     type: "inline",
     items: allWorkspaces,
-    itemToString: item => item ? item['text'] : '',
+    itemToString: item => handleWorkspaceItemsToString(item),
     onChange: e => setSelectedWorkspace(e)
   })), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
@@ -215,76 +221,85 @@ const AnimatedHeader = _ref => {
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {
   /**
-   * Specify an optional className to be added to your Animated Header
+   * Array of each tile group setup
    */
-  className: PropTypes.string,
+  allTiles: PropTypes.arrayOf(PropTypes.object),
   /**
-   * Specify the current username of active user
+   * Array of all workspace options
    */
-  name: PropTypes.string,
+  allWorkspaces: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Specify an optional className to be added to your Animated Header
+   */
+  className: PropTypes.string,
   /**
    * Provide short sentence in max. 3 lines related to product context
    */
   description: PropTypes.string,
   /**
-   * (optional), Provide content that needs highest attention from
-   * the user or content that triggers an action and allow users to
-   * directly start working and gain value (within one click)
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list. (Dropdown
+   * under description in header).
    */
-  buttonText: PropTypes.string,
+  handleHeaderItemsToString: PropTypes.func,
   /**
-   * Specify the carbon button type
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list. (Dropdown
+   * related to workspace selection).
    */
-  buttonType: ButtonKinds,
+  handleWorkspaceItemsToString: PropTypes.func,
   /**
-   * (optional), Provide the renderIcon used in the button
-   * ex. Launch, Add, ect.
+   * In-product imagery / lottie animation (.json) dim. 1312 x 738
+   * (to update headerAnimation content storybook requires remount in toolbar)
    */
-  buttonIcon: PropTypes.any,
+  headerAnimation: PropTypes.object,
   /**
-   * Header dropdown menu when button/buttonText is not in use
+   * In-product imagery / static imagery dim. 1312 x 738
+   * Only active when headerAnimation is not in use
    */
-  headerDropdown: PropTypes.bool,
+  headerStatic: PropTypes.object,
   /**
    * Provide current product name
    */
   productName: PropTypes.string,
+  /**
+   * The tile group that is active in the header
+   * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
+   */
+  selectedTileGroup: PropTypes.object,
   /**
    * Object containing workspace selection
    * `Open in: "_"`
    */
   selectedWorkspace: PropTypes.object,
   /**
-   * Provide function to be called when switching workspace selection
-   */
-  setSelectedWorkspace: PropTypes.func,
-  /**
-   * Array of all workspace options
+   * Provide function to be called when switching selected tile group
    */
-  allWorkspaces: PropTypes.arrayOf(PropTypes.object),
+  setSelectedTileGroup: PropTypes.func,
   /**
-   * The tile group that is active in the header
-   * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
+   * Provide function to be called when switching workspace selection
    */
-  selectedTileGroup: PropTypes.object,
+  setSelectedWorkspace: PropTypes.func,
   /**
-   * Provide function to be called when switching selected tile group
+   * Configuration for Carbon button or dropdown menu in header. Customized
+   * tasks are used to allow users that have multiple roles and permissions
+   * to experience better tailored content based on their need.
    */
-  setSelectedTileGroup: PropTypes.func,
+  tasksConfig: PropTypes.object,
   /**
-   * Array of each tile group setup
+   * Specify the current username of active user
    */
-  allTiles: PropTypes.arrayOf(PropTypes.object),
+  userName: PropTypes.string,
   /**
-   * In-product imagery / lottie animation (.json) dim. 1312 x 738
-   * (to update headerAnimation content storybook requires remount in toolbar)
+   * Specify the current welcome text on the header
    */
-  headerAnimation: PropTypes.object,
+  welcomeText: PropTypes.string,
   /**
-   * In-product imagery / static imagery dim. 1312 x 738
-   * Only active when headerAnimation is not in use
+   * Specify the default workspace label above the tiles
    */
-  headerStatic: PropTypes.object
+  workspaceLabel: PropTypes.string
 };
 
 export { AnimatedHeader as default };

package/es/components/Tiles/AIPromptTile/AIPromptTile.d.ts

@@ -9,12 +9,12 @@
 import React from 'react';
 /** Primary UI component for user interaction */
 interface AIPromptTileProps {
-    id?: string;
     href?: string;
-    open?: boolean;
+    id?: string;
     mainIcon?: string;
-    title?: string;
+    open?: boolean;
     productName?: string;
+    title?: string;
 }
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;
 export {};

package/es/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -17,12 +17,12 @@ var _AILabel;
 
 const AIPromptTile = _ref => {
   let {
-    id,
     href,
-    open,
+    id,
     mainIcon,
-    title,
-    productName
+    open,
+    productName,
+    title
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
@@ -35,7 +35,9 @@ const AIPromptTile = _ref => {
   };
   const openInNewTab = url => {
     const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-    if (newWindow) newWindow.opener = null;
+    if (newWindow) {
+      newWindow.opener = null;
+    }
   };
   const handleTextInputKeyDown = event => {
     if (event.key === 'Enter') {

package/es/components/Tiles/GlassTile/GlassTile.d.ts

@@ -9,13 +9,13 @@
 import React from 'react';
 /** Primary UI component for user interaction */
 interface GlassTileProps {
-    id?: string;
     href?: string;
-    open?: boolean;
+    id?: string;
     mainIcon?: string;
+    open?: boolean;
     secondaryIcon?: string;
-    title?: string;
     subtitle?: string;
+    title?: string;
 }
 export declare const GlassTile: React.FC<GlassTileProps>;
 export {};

package/es/components/Tiles/GlassTile/GlassTile.js

@@ -14,13 +14,13 @@ import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePr
 
 const GlassTile = _ref => {
   let {
-    id,
     href,
-    open,
+    id,
     mainIcon,
+    open,
     secondaryIcon,
-    title,
-    subtitle
+    subtitle,
+    title
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../../icon-helpers/es/index.js';
+import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';