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

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

@@ -14,6 +14,7 @@ var React = require('react');
 var react = require('@carbon/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');
 var TasksController = require('../TasksController/TasksController.js');
 var WorkspaceSelector = require('../WorkspaceSelector/WorkspaceSelector.js');
@@ -142,7 +143,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.default, {
     workspaceSelectorConfig: workspaceSelectorConfig,
@@ -152,7 +153,10 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
     return /*#__PURE__*/React.createElement(BaseTile.BaseTile, {
-      onClick: () => tileClickHandler?.(tile),
+      onClick: tile.href || tile.onClick ? () => {
+        tileClickHandler?.(tile);
+        tile.onClick?.();
+      } : null,
       key: tile.id,
       id: tile.id,
       open: open,

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

@@ -46,7 +46,7 @@ const TasksController = _ref => {
       hideLabel: true,
       type: 'inline',
       items: allTileGroups,
-      selectedItem: selectedTileGroup,
+      selectedItem: selectedTileGroup ?? undefined,
       onChange: e => {
         setSelectedTileGroup?.(e);
         dropdownCustomOnChange?.(e);
@@ -54,6 +54,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(react.SkeletonPlaceholder, {
       className: `${blockClass}__task-controller-skeleton`

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

@@ -9,11 +9,10 @@
 
 var React = require('react');
 var react = require('@carbon/react');
-var index = require('../../../node_modules/@carbon/icons-react/es/index.js');
 var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
-var bucket15 = require('../../../node_modules/@carbon/icons-react/es/generated/bucket-15.js');
+var icons = require('@carbon/react/icons');
 
-var _AILabel;
+var _AILabel, _Send;
 
 /** Primary UI component for user interaction */
 
@@ -21,21 +20,20 @@ const AIPromptTile = _ref => {
   let {
     href,
     id,
-    mainIcon,
+    mainIcon: MainIcon,
     open,
     productName,
     title,
     isLoading,
     isDisabled,
-    disabledTaskLabel
+    disabledTaskLabel,
+    onClick
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
   const collapsed = `${blockClass}--collapsed`;
   const disabled = `${blockClass}--disabled`;
   const [textInput, setTextInput] = React.useState('');
-  const MainIcon = mainIcon ? index[mainIcon] : null;
-  const Send = bucket15.Send;
   const handleTextInput = e => {
     setTextInput(e.target.value);
   };
@@ -94,9 +92,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, null))), /*#__PURE__*/React.createElement("div", {
+  }, _Send || (_Send = /*#__PURE__*/React.createElement(icons.Send, null)))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--footer`
   }, /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",

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

@@ -9,8 +9,8 @@
 
 var React = require('react');
 var react = require('@carbon/react');
-var index = require('../../../node_modules/@carbon/icons-react/es/index.js');
 var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+var GlassTileBody = require('./GlassTileBody.js');
 
 /** Primary UI component for user interaction */
 
@@ -31,9 +31,23 @@ const GlassTile = _ref => {
   } = _ref;
   const prefix = usePrefix.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.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(react.Link, {
     onClick: () => {
       glassTileClickHandler?.();
@@ -43,29 +57,7 @@ const GlassTile = _ref => {
     href: href ?? undefined,
     disabled: isDisabled || isLoading,
     title: isDisabled ? disabledTaskLabel ?? '' : ''
-  }, isLoading ? /*#__PURE__*/React.createElement(react.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);
 };
 
 exports.GlassTile = GlassTile;

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

@@ -0,0 +1,55 @@
+/**
+ * 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';
+
+var React = require('react');
+var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+var react = require('@carbon/react');
+
+const GlassTileBody = _ref => {
+  let {
+    mainIcon: MainIcon,
+    open,
+    secondaryIcon: SecondaryIcon,
+    subtitle,
+    title,
+    customContent,
+    isLoading
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header__glass-tile`;
+  const collapsed = `${blockClass}--collapsed`;
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(react.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)`
+  }))));
+};
+
+exports.GlassTileBody = GlassTileBody;

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

@@ -39,7 +39,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/lib/index.js

@@ -10,6 +10,7 @@
 var AnimatedHeader = require('./components/AnimatedHeader/AnimatedHeader.js');
 require('react');
 require('@carbon/react');
+require('@carbon/react/icons');
 var BaseTile = require('./components/Tiles/BaseTile/BaseTile.js');
 var header_1312x738_data_fabric_light_03 = require('./assets/animated/header_1312x738_data_fabric_light_03.json.js');
 var header_1312x738_data_fabric_dark_06 = require('./assets/animated/header_1312x738_data_fabric_dark_06.json.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "32db778ed99198b683351e0701b7a5e52738231e"
+  "gitHead": "72a646fa862d36c040b7f205167464831f6d59c5"
 }

package/scss/Tiles/GlassTile/glass-tile.scss

@@ -50,7 +50,6 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   padding: $spacing-05;
   background-color: transparent;
   color: $text-primary;
-  cursor: pointer;
   opacity: 1;
   transition: opacity 500ms linear;
 }