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

package/lib/__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/lib/_virtual/lottie.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _commonjsHelpers = require('./_commonjsHelpers.js');
 var lottie$1 = require('../node_modules/lottie-web/build/player/lottie.js');
 
-var lottieExports = lottie$1.__require();
+var lottieExports = /*@__PURE__*/ lottie$1.__require();
 var lottie = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lottieExports);
 
 exports.default = lottie;

package/lib/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/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -9,11 +9,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var PropTypes = require('prop-types');
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var PropTypes = require('prop-types');
+var lottie = require('../../_virtual/lottie.js');
 var react = require('@carbon/react');
 var iconsReact = require('@carbon/icons-react');
-var lottie = require('../../_virtual/lottie.js');
 var usePrefix = require('../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
 require('@carbon/react/icons');
 var BaseTile = require('../Tiles/BaseTile/BaseTile.js');
@@ -163,27 +164,30 @@ const AnimatedHeader = ({
     className: `${blockClass}__tiles-container`,
     "aria-label": ariaLabels?.tilesContainer ?? `Feature tiles`,
     role: "list"
-  }, selectedTileGroup.tiles.map(tile => {
-    return /*#__PURE__*/React.createElement(BaseTile.BaseTile, {
-      onClick: tile.href || tile.onClick ? () => {
-        tileClickHandler?.(tile);
-        tile.onClick?.();
-      } : null,
-      key: tile.id,
-      id: tile.id,
+  }, 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.BaseTile, _rollupPluginBabelHelpers.extends({
+      key: key,
+      tileId: resolvedTileId
+    }, rest, {
       open: open,
-      href: tile.href,
-      mainIcon: tile.mainIcon,
-      secondaryIcon: tile.secondaryIcon,
-      title: tile.title,
-      subtitle: tile.subtitle,
       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", {

package/lib/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/lib/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/lib/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/lib/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/lib/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -13,21 +13,19 @@ var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePref
 var icons = require('@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.usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
@@ -54,7 +52,7 @@ const AIPromptTile = ({
     "aria-label": ariaLabel ?? title ?? 'AI Tile',
     role: "listitem",
     title: isDisabled ? disabledTaskLabel ?? '' : '',
-    key: id
+    key: tileId
   }, isLoading ? /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
     className: `${blockClass}--loading-skeleton`
   }) : /*#__PURE__*/React.createElement("div", {
@@ -65,13 +63,13 @@ const AIPromptTile = ({
     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(react.AILabel, {
     autoAlign: true,
     aiText: "AI",
-    size: "mini"
+    size: "xs"
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--title`
   }, title), /*#__PURE__*/React.createElement("div", {
@@ -82,7 +80,7 @@ const AIPromptTile = ({
     type: "text",
     labelText: "AI Chat Input",
     hideLabel: true,
-    placeholder: "Start chatting...",
+    placeholder: promptPlaceholder,
     size: "sm",
     onChange: handleTextInput,
     onKeyDown: handleTextInputKeyDown,

package/lib/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;

package/lib/components/Tiles/AITile/AITile.js

@@ -0,0 +1,70 @@
+/**
+ * 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 react = require('@carbon/react');
+var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+var AITileBody = require('./AITileBody.js');
+
+const AITile = ({
+  tileId,
+  href,
+  title,
+  subtitle,
+  disabledTaskLabel,
+  customContent,
+  primaryIcon: PrimaryIcon,
+  secondaryIcon: SecondaryIcon,
+  onClick: aiTileClickHandler,
+  ariaLabel,
+  open,
+  isLoading,
+  isDisabled
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header__ai-tile`;
+  const body = /*#__PURE__*/React.createElement(AITileBody.AITileBody, {
+    open: open,
+    primaryIcon: PrimaryIcon,
+    secondaryIcon: SecondaryIcon,
+    title: title,
+    subtitle: subtitle,
+    customContent: customContent,
+    isLoading: isLoading
+  });
+
+  // Non-interactive tile
+  if (!href && !aiTileClickHandler) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${prefix}--animated-header__tile ${blockClass}`,
+      key: tileId,
+      "aria-label": ariaLabel ?? title ?? 'AI Tile',
+      title: isDisabled ? disabledTaskLabel ?? '' : '',
+      tabIndex: -1
+    }, body);
+  }
+  return /*#__PURE__*/React.createElement(react.Link, {
+    onClick: () => {
+      aiTileClickHandler?.();
+    },
+    className: `${prefix}--animated-header__tile ${blockClass}`,
+    "aria-label": ariaLabel ?? title ?? 'AI Tile',
+    role: "listitem",
+    tabIndex: isDisabled || isLoading ? -1 : 0,
+    key: tileId,
+    href: href ?? undefined,
+    disabled: isDisabled || isLoading,
+    title: isDisabled ? disabledTaskLabel ?? '' : ''
+  }, body);
+};
+
+exports.AITile = AITile;
+exports.default = AITile;

package/lib/components/Tiles/AITile/AITileBody.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 { ElementType, ReactNode } from 'react';
+export type AITileBodyProps = {
+    open?: boolean;
+    title?: string | null;
+    subtitle?: string | null;
+    customContent?: ReactNode;
+    primaryIcon?: ElementType | null;
+    secondaryIcon?: ElementType | null;
+    isLoading?: boolean;
+};
+export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;