@carbon-labs/react-animated-header 0.18.0 → 0.20.0

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

@@ -9,14 +9,14 @@ export const headerTiles: ({
         id: string;
         href: string;
         title: string;
-        mainIcon: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
         subtitle?: undefined;
     } | {
         id: string;
         href: string;
         title: string;
         subtitle: string;
-        mainIcon: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
     })[];
 } | {
     id: number;
@@ -26,16 +26,34 @@ export const headerTiles: ({
         href: string;
         title: string;
         subtitle: string;
-        mainIcon: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
+        secondaryIcon?: undefined;
+    } | {
+        id: string;
+        href: string;
+        title: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
+        secondaryIcon: import("@carbon/react/icons").CarbonIconType;
+        subtitle?: undefined;
+    })[];
+} | {
+    id: number;
+    label: string;
+    tiles: ({
+        id: string;
+        href: string;
+        title: string;
+        subtitle: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
         isLoading: boolean;
         isDisabled?: undefined;
         secondaryIcon?: undefined;
     } | {
         id: string;
-        href: string;
         title: string;
         subtitle: string;
-        mainIcon: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
+        href?: undefined;
         isLoading?: undefined;
         isDisabled?: undefined;
         secondaryIcon?: undefined;
@@ -44,7 +62,7 @@ export const headerTiles: ({
         href: string;
         title: string;
         subtitle: string;
-        mainIcon: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
         isDisabled: boolean;
         isLoading?: undefined;
         secondaryIcon?: undefined;
@@ -52,8 +70,8 @@ export const headerTiles: ({
         id: string;
         href: string;
         title: string;
-        mainIcon: string;
-        secondaryIcon: string;
+        mainIcon: import("@carbon/react/icons").CarbonIconType;
+        secondaryIcon: import("@carbon/react/icons").CarbonIconType;
         subtitle?: undefined;
         isLoading?: undefined;
         isDisabled?: undefined;
@@ -89,14 +107,14 @@ export namespace tasksControllerConfigDropdown {
                 id: string;
                 href: string;
                 title: string;
-                mainIcon: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
                 subtitle?: undefined;
             } | {
                 id: string;
                 href: string;
                 title: string;
                 subtitle: string;
-                mainIcon: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
             })[];
         } | {
             id: number;
@@ -106,16 +124,34 @@ export namespace tasksControllerConfigDropdown {
                 href: string;
                 title: string;
                 subtitle: string;
-                mainIcon: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
+                secondaryIcon?: undefined;
+            } | {
+                id: string;
+                href: string;
+                title: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
+                secondaryIcon: import("@carbon/react/icons").CarbonIconType;
+                subtitle?: undefined;
+            })[];
+        } | {
+            id: number;
+            label: string;
+            tiles: ({
+                id: string;
+                href: string;
+                title: string;
+                subtitle: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
                 isLoading: boolean;
                 isDisabled?: undefined;
                 secondaryIcon?: undefined;
             } | {
                 id: string;
-                href: string;
                 title: string;
                 subtitle: string;
-                mainIcon: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
+                href?: undefined;
                 isLoading?: undefined;
                 isDisabled?: undefined;
                 secondaryIcon?: undefined;
@@ -124,7 +160,7 @@ export namespace tasksControllerConfigDropdown {
                 href: string;
                 title: string;
                 subtitle: string;
-                mainIcon: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
                 isDisabled: boolean;
                 isLoading?: undefined;
                 secondaryIcon?: undefined;
@@ -132,8 +168,8 @@ export namespace tasksControllerConfigDropdown {
                 id: string;
                 href: string;
                 title: string;
-                mainIcon: string;
-                secondaryIcon: string;
+                mainIcon: import("@carbon/react/icons").CarbonIconType;
+                secondaryIcon: import("@carbon/react/icons").CarbonIconType;
                 subtitle?: undefined;
                 isLoading?: undefined;
                 isDisabled?: undefined;

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

@@ -1,17 +1,18 @@
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { TasksControllerProps } from '../TasksController/TasksController';
 import { WorkspaceSelectorProps } from '../WorkspaceSelector/WorkspaceSelector';
 /** Animated Header */
 export interface Tile {
     href?: string | null;
     id: string;
-    mainIcon?: string | null;
-    secondaryIcon?: string | null;
+    mainIcon?: ElementType | null;
+    secondaryIcon?: ElementType | null;
     subtitle?: string | null;
     title?: string | null;
     customContent?: ReactNode | null;
     isLoading?: boolean;
     isDisabled?: boolean;
+    onClick?: () => void;
 }
 export interface TileGroup {
     id: number;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -10,6 +10,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { Grid, Column, Tooltip, Button } from '@carbon/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';
 import TasksController from '../TasksController/TasksController.js';
 import WorkspaceSelector from '../WorkspaceSelector/WorkspaceSelector.js';
@@ -138,7 +139,7 @@ const AnimatedHeader = _ref => {
     md: 8,
     lg: 12,
     className: `${blockClass}__content`
-  }, workspaceSelectorConfig?.allWorkspaces?.length && /*#__PURE__*/React.createElement("div", {
+  }, !!workspaceSelectorConfig?.allWorkspaces?.length && /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__workspace--container${!open ? ` ${contentCollapsed}` : ''}`
   }, /*#__PURE__*/React.createElement(WorkspaceSelector, {
     workspaceSelectorConfig: workspaceSelectorConfig,
@@ -148,7 +149,10 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
     return /*#__PURE__*/React.createElement(BaseTile, {
-      onClick: () => tileClickHandler?.(tile),
+      onClick: tile.href || tile.onClick ? () => {
+        tileClickHandler?.(tile);
+        tile.onClick?.();
+      } : null,
       key: tile.id,
       id: tile.id,
       open: open,

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

@@ -9,7 +9,7 @@
 import { ButtonBaseProps, DropdownProps } from '@carbon/react';
 import { TileGroup } from '../AnimatedHeader/AnimatedHeader';
 export interface TasksControllerConfig {
-    type: 'button' | 'dropdown';
+    type: 'button' | 'dropdown' | null;
     isLoading?: boolean;
     button?: {
         text: string;
@@ -20,10 +20,10 @@ export interface TasksControllerConfig {
     };
 }
 export type TasksControllerProps = {
-    tasksControllerConfig?: TasksControllerConfig;
+    tasksControllerConfig?: TasksControllerConfig | null;
     isLoading?: boolean;
     allTileGroups?: TileGroup[];
-    selectedTileGroup?: TileGroup;
+    selectedTileGroup?: TileGroup | null;
     setSelectedTileGroup: (e: any) => void;
 };
 declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => import("react/jsx-runtime").JSX.Element | null;

package/es/components/TasksController/TasksController.js

@@ -42,7 +42,7 @@ const TasksController = _ref => {
       hideLabel: true,
       type: 'inline',
       items: allTileGroups,
-      selectedItem: selectedTileGroup,
+      selectedItem: selectedTileGroup ?? undefined,
       onChange: e => {
         setSelectedTileGroup?.(e);
         dropdownCustomOnChange?.(e);
@@ -50,6 +50,9 @@ const TasksController = _ref => {
       ...dropdownOverrideProps
     };
   }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange]);
+  if (!tasksControllerConfig?.type) {
+    return null;
+  }
   if (isLoading || tasksControllerConfig?.isLoading) {
     return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
       className: `${blockClass}__task-controller-skeleton`

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

@@ -6,18 +6,19 @@
  * 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 React, { ElementType } from 'react';
 /** Primary UI component for user interaction */
 interface AIPromptTileProps {
     href?: string | null;
     id?: string;
-    mainIcon?: string | null;
+    mainIcon?: ElementType | null;
     open?: boolean;
     productName?: string;
     title?: string | null;
     isLoading?: boolean;
     isDisabled?: boolean;
     disabledTaskLabel?: string;
+    onClick?: (() => void) | null;
 }
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;
 export {};

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

@@ -7,11 +7,10 @@
 
 import React, { useState } from 'react';
 import { SkeletonPlaceholder, AILabel, TextInput, IconButton, Button } from '@carbon/react';
-import * as index from '../../../node_modules/@carbon/icons-react/es/index.js';
 import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
-import { Send } from '../../../node_modules/@carbon/icons-react/es/generated/bucket-15.js';
+import { Send } from '@carbon/react/icons';
 
-var _AILabel;
+var _AILabel, _Send;
 
 /** Primary UI component for user interaction */
 
@@ -19,21 +18,20 @@ const AIPromptTile = _ref => {
   let {
     href,
     id,
-    mainIcon,
+    mainIcon: MainIcon,
     open,
     productName,
     title,
     isLoading,
     isDisabled,
-    disabledTaskLabel
+    disabledTaskLabel,
+    onClick
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
   const collapsed = `${blockClass}--collapsed`;
   const disabled = `${blockClass}--disabled`;
   const [textInput, setTextInput] = useState('');
-  const MainIcon = mainIcon ? index[mainIcon] : null;
-  const Send$1 = Send;
   const handleTextInput = e => {
     setTextInput(e.target.value);
   };
@@ -92,9 +90,12 @@ const AIPromptTile = _ref => {
     size: "sm",
     disabled: !textInput,
     align: "top-right",
-    onClick: () => openInNewTab(`${href}&primed_chat=${textInput}`),
+    onClick: () => {
+      onClick?.();
+      openInNewTab(`${href}&primed_chat=${textInput}`);
+    },
     onKeyDown: handleTextInputKeyDown
-  }, /*#__PURE__*/React.createElement(Send$1, null))), /*#__PURE__*/React.createElement("div", {
+  }, _Send || (_Send = /*#__PURE__*/React.createElement(Send, null)))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--footer`
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",

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

@@ -6,14 +6,14 @@
  * 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, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 /** Base Tile */
 interface BaseTileProps {
     id?: string;
     open?: boolean;
     href?: string | null;
-    mainIcon?: string | null;
-    secondaryIcon?: string | null;
+    mainIcon?: ElementType | null;
+    secondaryIcon?: ElementType | null;
     title?: string | null;
     subtitle?: string | null;
     productName?: string;
@@ -21,7 +21,7 @@ interface BaseTileProps {
     isLoading?: boolean;
     isDisabled?: boolean;
     disabledTaskLabel?: string;
-    onClick?: () => void;
+    onClick?: (() => void) | null;
 }
 export declare const BaseTile: React.FC<BaseTileProps>;
 export {};

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

@@ -6,21 +6,15 @@
  * 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, { ReactNode } from 'react';
+import React from 'react';
 /** Primary UI component for user interaction */
 interface GlassTileProps {
     href?: string | null;
     id?: string;
-    mainIcon?: string | null;
-    open?: boolean;
-    secondaryIcon?: string | null;
-    subtitle?: string | null;
-    title?: string | null;
-    customContent?: ReactNode;
     isLoading?: boolean;
     isDisabled?: boolean;
     disabledTaskLabel?: string;
-    onClick?: () => void;
+    onClick?: (() => void) | null;
 }
 export declare const GlassTile: React.FC<GlassTileProps>;
 export {};

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

@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import { Link, SkeletonPlaceholder } from '@carbon/react';
-import * as index from '../../../node_modules/@carbon/icons-react/es/index.js';
+import { Link } from '@carbon/react';
 import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+import { GlassTileBody } from './GlassTileBody.js';
 
 /** Primary UI component for user interaction */
 
@@ -29,9 +29,23 @@ const GlassTile = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
-  const collapsed = `${blockClass}--collapsed`;
-  const MainIcon = mainIcon ? index[mainIcon] : null;
-  const SecondaryIcon = secondaryIcon ? index[secondaryIcon] : null;
+  const body = /*#__PURE__*/React.createElement(GlassTileBody, {
+    mainIcon: mainIcon,
+    open: open,
+    secondaryIcon: secondaryIcon,
+    title: title,
+    subtitle: subtitle,
+    customContent: customContent,
+    isLoading: isLoading
+  });
+
+  // Non-interactive tile
+  if (!href && !glassTileClickHandler) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${prefix}--animated-header__tile ${blockClass}`,
+      key: id
+    }, body);
+  }
   return /*#__PURE__*/React.createElement(Link, {
     onClick: () => {
       glassTileClickHandler?.();
@@ -41,29 +55,7 @@ const GlassTile = _ref => {
     href: href ?? undefined,
     disabled: isDisabled || isLoading,
     title: isDisabled ? disabledTaskLabel ?? '' : ''
-  }, isLoading ? /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
-    className: `${blockClass}--loading-skeleton`
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body-background`
-  }), customContent ? /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--custom-content`
-  }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--icons`
-  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
-    fill: `var(--cds-icon-secondary)`,
-    size: 24
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--title`
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--footer`
-  }, subtitle && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--subtitle`
-  }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
-    size: 16,
-    fill: `var(--cds-icon-secondary)`
-  })))));
+  }, body);
 };
 
 export { GlassTile };

package/es/components/Tiles/GlassTile/GlassTileBody.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 GlassTileBodyProps = {
+    mainIcon?: ElementType | null;
+    open?: boolean;
+    secondaryIcon?: ElementType | null;
+    subtitle?: string | null;
+    title?: string | null;
+    customContent?: ReactNode;
+    isLoading?: boolean;
+};
+export declare const GlassTileBody: ({ mainIcon: MainIcon, open, secondaryIcon: SecondaryIcon, subtitle, title, customContent, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+/**
+ * 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 from 'react';
+import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+import { SkeletonPlaceholder } from '@carbon/react';
+
+const GlassTileBody = _ref => {
+  let {
+    mainIcon: MainIcon,
+    open,
+    secondaryIcon: SecondaryIcon,
+    subtitle,
+    title,
+    customContent,
+    isLoading
+  } = _ref;
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header__glass-tile`;
+  const collapsed = `${blockClass}--collapsed`;
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
+      className: `${blockClass}--loading-skeleton`
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-background`
+  }), customContent ? /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--custom-content`
+  }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--icons`
+  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
+    fill: `var(--cds-icon-secondary)`,
+    size: 24
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--title`
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--footer`
+  }, subtitle && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--subtitle`
+  }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
+    size: 16,
+    fill: `var(--cds-icon-secondary)`
+  }))));
+};
+
+export { GlassTileBody };

package/es/components/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -14,12 +14,12 @@ export interface Workspace {
 export type WorkspaceSelectorConfig = {
     propsOverrides: Partial<Omit<DropdownProps<Workspace>, 'id' | 'items' | 'selectedItem' | 'setSelectedWorkspace'>>;
     allWorkspaces: Workspace[];
-    selectedWorkspace?: Workspace;
+    selectedWorkspace?: Workspace | null;
     setSelectedWorkspace: (e: any) => void;
     isLoading?: boolean;
 };
 export type WorkspaceSelectorProps = {
-    workspaceSelectorConfig?: WorkspaceSelectorConfig;
+    workspaceSelectorConfig?: WorkspaceSelectorConfig | null;
     userName?: string;
     isLoading?: boolean;
 };

package/es/components/WorkspaceSelector/WorkspaceSelector.js

@@ -35,7 +35,7 @@ const WorkspaceSelector = _ref => {
       hideLabel: true,
       type: 'inline',
       items: workspaceSelectorConfig?.allWorkspaces,
-      selectedItem: workspaceSelectorConfig?.selectedWorkspace,
+      selectedItem: workspaceSelectorConfig?.selectedWorkspace ?? undefined,
       onChange: e => {
         workspaceSelectorConfig?.setSelectedWorkspace?.(e);
         dropdownCustomOnChange?.(e);

package/es/index.js

@@ -8,6 +8,7 @@
 export { default as AnimatedHeader } from './components/AnimatedHeader/AnimatedHeader.js';
 import 'react';
 import '@carbon/react';
+import '@carbon/react/icons';
 export { BaseTile } from './components/Tiles/BaseTile/BaseTile.js';
 export { default as dataFabricAnimatedLight } from './assets/animated/header_1312x738_data_fabric_light_03.json.js';
 export { default as dataFabricAnimatedDark } from './assets/animated/header_1312x738_data_fabric_dark_06.json.js';