@carbon-labs/react-animated-header 0.31.0 → 0.33.0

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

@@ -1,230 +1,57 @@
-export const workspaceData: {
+/**
+ * @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 { TileGroup } from '../../components/AnimatedHeader/types';
+export declare const workspaceData: {
     id: string;
     label: string;
 }[];
-export const headerTiles: ({
-    id: number;
-    label: string;
-    tiles: ({
-        id: string;
-        href: string;
-        title: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        ariaLabel: string;
-        subtitle?: undefined;
-    } | {
-        id: string;
+export declare const headerTiles: TileGroup[];
+export declare const tasksControllerConfigButton: {
+    type: string;
+    button: {
         href: string;
-        title: string;
-        subtitle: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        ariaLabel: string;
-    })[];
-} | {
-    id: number;
-    label: string;
-    tiles: ({
-        id: string;
-        href: string;
-        title: string;
-        subtitle: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        ariaLabel: string;
-        secondaryIcon?: undefined;
-    } | {
-        id: string;
-        href: string;
-        title: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        secondaryIcon: import("@carbon/react/icons").CarbonIconType;
-        ariaLabel: string;
-        subtitle?: undefined;
-    })[];
-} | {
-    id: number;
-    label: string;
-    tiles: ({
-        id: string;
-        href: string;
-        title: string;
-        subtitle: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        isLoading: boolean;
-        ariaLabel: string;
-        isDisabled?: undefined;
-        secondaryIcon?: undefined;
-    } | {
-        id: string;
-        title: string;
-        subtitle: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        ariaLabel: string;
-        href?: undefined;
-        isLoading?: undefined;
-        isDisabled?: undefined;
-        secondaryIcon?: undefined;
-    } | {
-        id: string;
-        href: string;
-        title: string;
-        subtitle: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        isDisabled: boolean;
-        ariaLabel: string;
-        isLoading?: undefined;
-        secondaryIcon?: undefined;
-    } | {
-        id: string;
-        href: string;
-        title: string;
-        mainIcon: import("@carbon/react/icons").CarbonIconType;
-        secondaryIcon: import("@carbon/react/icons").CarbonIconType;
-        ariaLabel: string;
-        subtitle?: undefined;
-        isLoading?: undefined;
-        isDisabled?: undefined;
-    })[];
-} | {
-    id: number;
-    label: string;
-    tiles: {
-        id: string;
-        customContent: import("react/jsx-runtime").JSX.Element;
-        ariaLabel: string;
+        icon: import("@carbon/react/icons").CarbonIconType;
+        text: string;
+        type: "tertiary";
+    };
+};
+export declare const tasksControllerConfigDropdown: {
+    type: string;
+    dropdown: {
+        label: string;
+        allTileGroups: TileGroup[];
+        selectedTileGroup: TileGroup;
+        setSelectedTileGroup: () => void;
+        ariaLabel: string;
+    };
+};
+export declare const tasksControllerConfigLoading: {
+    type: string;
+    isLoading: boolean;
+};
+export declare const workspaceSelectorConfig: {
+    allWorkspaces: {
+        id: string;
+        label: string;
+    }[];
+    setSelectedWorkspace: () => void;
+    propsOverrides: {
+        label: string;
+        renderSelectedItem: (item: any) => string;
+    };
+    ariaLabel: string;
+};
+export declare const workspaceSelectorConfigLoading: {
+    allWorkspaces: {
+        id: string;
+        label: string;
     }[];
-})[];
-export namespace tasksControllerConfigButton {
-    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 tasksControllerConfigDropdown {
-    let type_2: string;
-    export { type_2 as type };
-    export namespace dropdown {
-        export let label: string;
-        export { headerTiles as allTileGroups };
-        export let selectedTileGroup: {
-            id: number;
-            label: string;
-            tiles: ({
-                id: string;
-                href: string;
-                title: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                ariaLabel: string;
-                subtitle?: undefined;
-            } | {
-                id: string;
-                href: string;
-                title: string;
-                subtitle: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                ariaLabel: string;
-            })[];
-        } | {
-            id: number;
-            label: string;
-            tiles: ({
-                id: string;
-                href: string;
-                title: string;
-                subtitle: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                ariaLabel: string;
-                secondaryIcon?: undefined;
-            } | {
-                id: string;
-                href: string;
-                title: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                secondaryIcon: import("@carbon/react/icons").CarbonIconType;
-                ariaLabel: string;
-                subtitle?: undefined;
-            })[];
-        } | {
-            id: number;
-            label: string;
-            tiles: ({
-                id: string;
-                href: string;
-                title: string;
-                subtitle: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                isLoading: boolean;
-                ariaLabel: string;
-                isDisabled?: undefined;
-                secondaryIcon?: undefined;
-            } | {
-                id: string;
-                title: string;
-                subtitle: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                ariaLabel: string;
-                href?: undefined;
-                isLoading?: undefined;
-                isDisabled?: undefined;
-                secondaryIcon?: undefined;
-            } | {
-                id: string;
-                href: string;
-                title: string;
-                subtitle: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                isDisabled: boolean;
-                ariaLabel: string;
-                isLoading?: undefined;
-                secondaryIcon?: undefined;
-            } | {
-                id: string;
-                href: string;
-                title: string;
-                mainIcon: import("@carbon/react/icons").CarbonIconType;
-                secondaryIcon: import("@carbon/react/icons").CarbonIconType;
-                ariaLabel: string;
-                subtitle?: undefined;
-                isLoading?: undefined;
-                isDisabled?: undefined;
-            })[];
-        } | {
-            id: number;
-            label: string;
-            tiles: {
-                id: string;
-                customContent: import("react/jsx-runtime").JSX.Element;
-                ariaLabel: string;
-            }[];
-        };
-        export function setSelectedTileGroup(): void;
-        export let ariaLabel: string;
-    }
-}
-export namespace tasksControllerConfigLoading {
-    let type_3: string;
-    export { type_3 as type };
-    export let isLoading: boolean;
-}
-export namespace workspaceSelectorConfig {
-    export { workspaceData as allWorkspaces };
-    export function setSelectedWorkspace(): void;
-    export namespace propsOverrides {
-        let label_1: string;
-        export { label_1 as label };
-        export function renderSelectedItem(item: any): string;
-    }
-    let ariaLabel_1: string;
-    export { ariaLabel_1 as ariaLabel };
-}
-export namespace workspaceSelectorConfigLoading {
-    export { workspaceData as allWorkspaces };
-    export function setSelectedWorkspace_1(): void;
-    export { setSelectedWorkspace_1 as setSelectedWorkspace };
-    let isLoading_1: boolean;
-    export { isLoading_1 as isLoading };
-}
-import { Add } from '@carbon/react/icons';
+    setSelectedWorkspace: () => void;
+    isLoading: boolean;
+};

package/es/_virtual/lottie.js

@@ -8,7 +8,7 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { __require as requireLottie } from '../node_modules/lottie-web/build/player/lottie.js';
 
-var lottieExports = requireLottie();
+var lottieExports = /*@__PURE__*/ requireLottie();
 var lottie = /*@__PURE__*/getDefaultExportFromCjs(lottieExports);
 
 export { lottie as default };

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

@@ -1,37 +1,21 @@
-import React, { ElementType, ReactNode } from 'react';
+/**
+ * @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';
 import { TasksControllerProps } from '../TasksController/TasksController';
 import { WorkspaceSelectorProps } from '../WorkspaceSelector/WorkspaceSelector';
+import { Tile, TileGroup, AriaLabels } from './types';
 /** Animated Header */
-export interface AriaLabels {
-    welcome?: string;
-    description?: string;
-    collapseButton?: string;
-    expandButton?: string;
-    tilesContainer?: string;
-}
-export interface Tile {
-    href?: string | null;
-    id: string;
-    mainIcon?: ElementType | null;
-    secondaryIcon?: ElementType | null;
-    subtitle?: string | null;
-    title?: string | null;
-    customContent?: ReactNode | null;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    onClick?: () => void;
-    ariaLabel?: string;
-}
-export interface TileGroup {
-    id: number;
-    label: string;
-    tiles: Tile[];
-}
 export type AnimatedHeaderProps = {
     allTileGroups?: TileGroup[];
     ariaLabels?: AriaLabels;
     selectedTileGroup?: TileGroup;
-    setSelectedTileGroup: (e: any) => void;
+    setSelectedTileGroup?: (e: any) => void;
     description?: string;
     headerAnimation?: object;
     headerStatic?: React.JSX.Element | string;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes from 'prop-types';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import lottie from '../../_virtual/lottie.js';
 import { Grid, Column, Button } from '@carbon/react';
 import { ChevronUp, ChevronDown } from '@carbon/icons-react';
-import lottie from '../../_virtual/lottie.js';
 import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
 import '@carbon/react/icons';
 import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
@@ -42,14 +43,10 @@ const AnimatedHeader = ({
   const blockClass = `${prefix}--animated-header`;
   const animationContainer = useRef(null);
   const animRef = useRef(null);
-  const [open, setOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(true);
   const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
-  const collapsed = `${blockClass}--collapsed`;
-  const contentCollapsed = `${blockClass}__content--collapsed`;
-  const descriptionCollapsed = `${blockClass}__left-area-container--collapsed`;
-  const lottieCollapsed = `${blockClass}__lottie-animation--collapsed`;
   const handleButtonCollapseClick = () => {
-    setOpen(!open);
+    setIsOpen(!isOpen);
   };
   useEffect(() => {
     // Make sure any prior instance is destroyed before creating a new one
@@ -99,8 +96,11 @@ const AnimatedHeader = ({
     // Re-init when the JSON or reduced-motion preference changes
   }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("header", {
-    className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
+    className: blockClass,
+    "data-expanded": isOpen
+  }, /*#__PURE__*/React.createElement(Grid, {
+    className: `${blockClass}__grid`
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__container--gradient`
@@ -118,7 +118,8 @@ const AnimatedHeader = ({
     className: `${blockClass}__lottie-animation--container`
   }, /*#__PURE__*/React.createElement("div", {
     ref: animationContainer,
-    className: `${blockClass}__lottie-animation${!open ? ` ${lottieCollapsed}` : ''}`,
+    className: `${blockClass}__lottie-animation`,
+    "data-expanded": isOpen,
     "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement(Column, {
     sm: 4,
@@ -127,14 +128,15 @@ const AnimatedHeader = ({
   }, /*#__PURE__*/React.createElement(HeaderTitle, {
     userName: userName,
     welcomeText: welcomeText,
-    headerExpanded: open,
+    headerExpanded: isOpen,
     ariaLabels: ariaLabels
   })), (description || tasksControllerConfig) && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 4,
     id: `${blockClass}-content`,
-    className: `${blockClass}__left-area-container${!open ? ` ${descriptionCollapsed}` : ''}`
+    className: `${blockClass}__left-area-container`,
+    "data-expanded": isOpen
   }, description && /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`,
     "aria-label": ariaLabels?.description ?? `Header description`
@@ -150,7 +152,8 @@ const AnimatedHeader = ({
     lg: 12,
     className: `${blockClass}__content`
   }, !!workspaceSelectorConfig?.allWorkspaces?.length && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__workspace--container${!open ? ` ${contentCollapsed}` : ''}`
+    className: `${blockClass}__workspace--container`,
+    "data-expanded": isOpen
   }, /*#__PURE__*/React.createElement(WorkspaceSelector, {
     workspaceSelectorConfig: workspaceSelectorConfig,
     userName: userName,
@@ -159,27 +162,30 @@ const AnimatedHeader = ({
     className: `${blockClass}__tiles-container`,
     "aria-label": ariaLabels?.tilesContainer ?? `Feature tiles`,
     role: "list"
-  }, selectedTileGroup.tiles.map(tile => {
-    return /*#__PURE__*/React.createElement(BaseTile, {
-      onClick: tile.href || tile.onClick ? () => {
-        tileClickHandler?.(tile);
-        tile.onClick?.();
-      } : null,
-      key: tile.id,
-      id: tile.id,
-      open: open,
-      href: tile.href,
-      mainIcon: tile.mainIcon,
-      secondaryIcon: tile.secondaryIcon,
-      title: tile.title,
-      subtitle: tile.subtitle,
+  }, selectedTileGroup.tiles.map((tile, index) => {
+    const {
+      tileId,
+      ...rest
+    } = tile;
+    const legacyId = tile.id; // old configs
+    const resolvedTileId = tileId ?? legacyId;
+    const key = resolvedTileId ?? `tile-${index}`;
+    const hasAction = tile.href || tile.onClick === 'function';
+    return /*#__PURE__*/React.createElement(BaseTile, _extends({
+      key: key,
+      tileId: resolvedTileId
+    }, rest, {
+      open: isOpen,
       productName: productName,
-      customContent: tile.customContent,
       isLoading: isLoading || tile.isLoading,
-      isDisabled: tile.isDisabled,
       disabledTaskLabel: disabledTaskLabel,
-      ariaLabel: tile.ariaLabel
-    });
+      onClick: hasAction ? () => {
+        tileClickHandler?.(tile);
+        if (typeof tile.onClick === 'function') {
+          tile.onClick();
+        }
+      } : undefined
+    }));
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__button-collapse--gradient`
   }), /*#__PURE__*/React.createElement("div", {
@@ -187,12 +193,12 @@ const AnimatedHeader = ({
   }, /*#__PURE__*/React.createElement(Button, {
     id: `${blockClass}__button-collapse`,
     kind: "ghost",
-    renderIcon: open ? ChevronUp : ChevronDown,
+    renderIcon: isOpen ? ChevronUp : ChevronDown,
     onClick: handleButtonCollapseClick,
-    "aria-expanded": open,
+    "aria-expanded": isOpen,
     "aria-controls": `${blockClass}-content`,
-    "aria-label": open ? ariaLabels?.collapseButton ?? 'Collapse header details' : ariaLabels?.expandButton ?? 'Expand header details'
-  }, open ? collapseButtonLabel : expandButtonLabel))));
+    "aria-label": isOpen ? ariaLabels?.collapseButton ?? 'Collapse header details' : ariaLabels?.expandButton ?? 'Expand header details'
+  }, isOpen ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {

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

@@ -0,0 +1,24 @@
+/**
+ * @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 type { BaseTileProps } from '../../components/Tiles/BaseTile/BaseTile';
+export type Tile = Omit<BaseTileProps, 'id'> & {
+    tileId: string;
+};
+export interface TileGroup {
+    id: number;
+    label: string;
+    tiles: Tile[];
+}
+export interface AriaLabels {
+    welcome?: string;
+    description?: string;
+    collapseButton?: string;
+    expandButton?: string;
+    tilesContainer?: string;
+}

package/es/components/HeaderTitle/HeaderTitle.d.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { AriaLabels } from '../AnimatedHeader/AnimatedHeader';
+import { AriaLabels } from '../AnimatedHeader/types';
 export type HeaderTitleProps = {
     userName?: string;
     welcomeText?: string;

package/es/components/TasksController/TasksController.d.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { ButtonBaseProps, DropdownProps } from '@carbon/react';
-import { TileGroup } from '../AnimatedHeader/AnimatedHeader';
+import { TileGroup } from '../AnimatedHeader/types';
 export interface TasksControllerConfig {
     type: 'button' | 'dropdown' | null;
     isLoading?: boolean;

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

@@ -7,19 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ElementType } from 'react';
-/** Primary UI component for user interaction */
-interface AIPromptTileProps {
+export type AIPromptTileProps = {
+    tileId: string | null;
     href?: string | null;
-    id?: string;
-    mainIcon?: ElementType | null;
-    open?: boolean;
-    productName?: string;
     title?: string | null;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    disabledTaskLabel?: string;
+    disabledTaskLabel?: string | null;
+    productName?: string;
+    promptPlaceholder?: string;
+    primaryIcon?: ElementType | null;
     onClick?: (() => void) | null;
     ariaLabel?: string;
-}
+    open?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+} & Record<string, unknown>;
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;
-export {};

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

@@ -11,25 +11,22 @@ import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePr
 import { Send } from '@carbon/react/icons';
 
 var _AILabel, _Send;
-
-/** Primary UI component for user interaction */
-
 const AIPromptTile = ({
+  tileId,
   href,
-  id,
-  mainIcon: MainIcon,
-  open,
-  productName,
   title,
-  isLoading,
-  isDisabled,
   disabledTaskLabel,
+  productName,
+  promptPlaceholder = 'Start chatting...',
+  primaryIcon: PrimaryIcon,
   onClick,
-  ariaLabel
+  ariaLabel,
+  open,
+  isLoading,
+  isDisabled
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
-  const collapsed = `${blockClass}--collapsed`;
   const disabled = `${blockClass}--disabled`;
   const [textInput, setTextInput] = useState('');
   const handleTextInput = e => {
@@ -52,24 +49,25 @@ const AIPromptTile = ({
     "aria-label": ariaLabel ?? title ?? 'AI Tile',
     role: "listitem",
     title: isDisabled ? disabledTaskLabel ?? '' : '',
-    key: id
+    key: tileId
   }, isLoading ? /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
     className: `${blockClass}--loading-skeleton`
   }) : /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
+    className: `${blockClass}--body`,
+    "data-expanded": open
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-gradient`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
-  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
+  }, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
     fill: `var(--cds-icon-secondary)`,
     size: 24
   }), _AILabel || (_AILabel = /*#__PURE__*/React.createElement(AILabel, {
     autoAlign: true,
     aiText: "AI",
-    size: "mini"
+    size: "xs"
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--title`
   }, title), /*#__PURE__*/React.createElement("div", {
@@ -80,7 +78,7 @@ const AIPromptTile = ({
     type: "text",
     labelText: "AI Chat Input",
     hideLabel: true,
-    placeholder: "Start chatting...",
+    placeholder: promptPlaceholder,
     size: "sm",
     onChange: handleTextInput,
     onKeyDown: handleTextInputKeyDown,

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

@@ -0,0 +1,26 @@
+/**
+ * @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, { ElementType } from 'react';
+export type AITileProps = {
+    tileId: string | null;
+    href?: string | null;
+    title?: string | null;
+    subtitle?: string | null;
+    disabledTaskLabel?: string | null;
+    customContent?: React.ReactNode | null;
+    primaryIcon?: ElementType | null;
+    secondaryIcon?: ElementType | null;
+    onClick?: (() => void) | null;
+    ariaLabel?: string;
+    open?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+} & Record<string, unknown>;
+export declare const AITile: React.FC<AITileProps>;
+export default AITile;