@carbon-labs/react-animated-header 0.36.0 → 0.38.0

package/es/__stories__/AnimatedHeader.stories.d.ts

@@ -15065,7 +15065,7 @@ export declare const ThemeG10: {
                     type: string;
                     button: {
                         href: string;
-                        icon: import("@carbon/icons-react").CarbonIconType;
+                        icon: import("@carbon/react/icons").CarbonIconType;
                         text: string;
                         type: "tertiary";
                     };
@@ -30258,7 +30258,7 @@ export declare const ThemeG100: {
                     type: string;
                     button: {
                         href: string;
-                        icon: import("@carbon/icons-react").CarbonIconType;
+                        icon: import("@carbon/react/icons").CarbonIconType;
                         text: string;
                         type: "tertiary";
                     };

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -58,7 +58,9 @@ const AnimatedHeader = ({
       animRef.current.destroy();
       animRef.current = null;
     }
-    if (!animationContainer.current || !headerAnimation) return;
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
     const animation = lottie.loadAnimation({
       container: animationContainer.current,
       animationData: headerAnimation,
@@ -183,7 +185,7 @@ const AnimatedHeader = ({
     const legacyId = tile.id; // old configs
     const resolvedTileId = tileId ?? legacyId;
     const key = resolvedTileId ?? `tile-${index}`;
-    const hasAction = tile.href || tile.onClick === 'function';
+    const hasAction = tile.href || typeof tile.onClick === 'function';
     return /*#__PURE__*/React.createElement(BaseTile, _extends({
       key: key,
       tileId: resolvedTileId
@@ -192,11 +194,9 @@ const AnimatedHeader = ({
       productName: productName,
       isLoading: isLoading || tile.isLoading,
       disabledTaskLabel: disabledTaskLabel,
-      onClick: hasAction ? () => {
+      onClick: hasAction ? event => {
         tileClickHandler?.(tile);
-        if (typeof tile.onClick === 'function') {
-          tile.onClick();
-        }
+        tile.onClick?.(event);
       } : undefined
     }));
   }))), /*#__PURE__*/React.createElement("div", {

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

@@ -7,9 +7,7 @@
  * 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 type Tile = BaseTileProps;
 export interface TileGroup {
     id: number;
     label: string;

package/es/components/ContentSwitcherSelector/ContentSwitcherSelector.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { SkeletonPlaceholder, ContentSwitcher, Switch } from '@carbon/react';
 import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
 
@@ -17,11 +17,8 @@ const ContentSwitcherSelector = ({
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__content-switcher`;
-  if (!contentSwitcherConfig) return null;
-  if (isLoading || contentSwitcherConfig.isLoading) {
-    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
-      className: `${blockClass}-skeleton`
-    });
+  if (!contentSwitcherConfig) {
+    return null;
   }
   const {
     items = [],
@@ -34,16 +31,18 @@ const ContentSwitcherSelector = ({
   } = contentSwitcherConfig;
   const count = visibleCount === 3 ? 3 : 2;
   const visibleItems = items.slice(0, count);
+  const selectedIndexSafe = Math.min(Math.max(selectedIndex, 0), visibleItems.length - 1);
+  if (isLoading || contentSwitcherConfig.isLoading) {
+    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
+      className: `${blockClass}-skeleton`
+    });
+  }
   if (visibleItems.length < 2 || visibleItems.length > 3) {
     if (process.env.NODE_ENV !== 'production') {
       console.warn('[ContentSwitcherSelector] contentSwitcherConfig.items must contain 2 or 3 items.');
     }
     return null;
   }
-  const selectedIndexSafe = useMemo(() => {
-    const idx = typeof selectedIndex === 'number' ? selectedIndex : 0;
-    return Math.min(Math.max(idx, 0), visibleItems.length - 1);
-  }, [selectedIndex, visibleItems.length]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--container`,
     "data-expanded": headerExpanded

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

@@ -25,10 +25,8 @@ export type TasksControllerProps = {
     tasksControllerConfig?: TasksControllerConfig | null;
     isLoading?: boolean;
     allTileGroups?: TileGroup[];
-    selectedTileGroup?: TileGroup | null;
-    setSelectedTileGroup?: (group: TileGroup | {
-        selectedItem: TileGroup;
-    }) => void;
+    selectedTileGroup?: TileGroup;
+    setSelectedTileGroup?: (e: any) => void;
 };
 declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TasksController;

package/es/components/TasksController/TasksController.js

@@ -33,24 +33,11 @@ const TasksController = ({
     ...dropdownOverrideProps
   } = tasksControllerConfig?.dropdown?.propsOverrides || {};
 
-  /** Early outs */
-  if (!tasksControllerConfig?.type) return null;
-  if (isLoading || tasksControllerConfig?.isLoading) {
-    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
-      className: `${blockClass}__task-controller-skeleton`
-    });
-  }
-
-  /** Button mode */
-  if (tasksControllerConfig?.type === 'button' && tasksControllerConfig?.button?.text) {
-    return /*#__PURE__*/React.createElement(Button, _extends({
-      className: `${blockClass}__button${buttonCustomClass ? ` ${buttonCustomClass}` : ''}`
-    }, buttonOverrideProps), tasksControllerConfig.button.text);
-  }
-
   /** Build Dropdown props (uses top-level list/selection/setter) */
   const dropdownProps = useMemo(() => {
-    if (!allTileGroups?.length) return null;
+    if (!allTileGroups?.length) {
+      return null;
+    }
     return {
       id: `${blockClass}__header-dropdown`,
       className: `${blockClass}__header-dropdown${dropdownCustomClass ? ` ${dropdownCustomClass}` : ''}`,
@@ -74,6 +61,23 @@ const TasksController = ({
     };
   }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange, tasksControllerConfig?.dropdown?.label, tasksControllerConfig?.dropdown?.ariaLabel]);
 
+  /** Early outs */
+  if (!tasksControllerConfig?.type) {
+    return null;
+  }
+  if (isLoading || tasksControllerConfig?.isLoading) {
+    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
+      className: `${blockClass}__task-controller-skeleton`
+    });
+  }
+
+  /** Button mode */
+  if (tasksControllerConfig?.type === 'button' && tasksControllerConfig?.button?.text) {
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      className: `${blockClass}__button${buttonCustomClass ? ` ${buttonCustomClass}` : ''}`
+    }, buttonOverrideProps), tasksControllerConfig.button.text);
+  }
+
   /** Dropdown mode */
   if (tasksControllerConfig?.type === 'dropdown' && dropdownProps) {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -8,17 +8,18 @@
  */
 import React, { ElementType } from 'react';
 export type AIPromptTileProps = {
-    tileId: string | null;
+    variant: 'aiPrompt';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     disabledTaskLabel?: string | null;
     productName?: string;
     promptPlaceholder?: string;
     primaryIcon?: ElementType | null;
-    onClick?: (() => void) | null;
+    onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     ariaLabel?: string;
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;

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

@@ -90,8 +90,8 @@ const AIPromptTile = ({
     size: "sm",
     disabled: !textInput,
     align: "top-end",
-    onClick: () => {
-      onClick?.();
+    onClick: event => {
+      onClick?.(event);
       openInNewTab(`${href}&primed_chat=${textInput}`);
     },
     onKeyDown: handleTextInputKeyDown

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type AITileProps = {
-    tileId: string | null;
+    variant: 'ai';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -16,11 +17,11 @@ export type AITileProps = {
     customContent?: React.ReactNode | null;
     primaryIcon?: ElementType | null;
     secondaryIcon?: ElementType | null;
-    onClick?: (() => void) | null;
+    onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     ariaLabel?: string;
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const AITile: React.FC<AITileProps>;
 export default AITile;

package/es/components/Tiles/AITile/AITile.js

@@ -48,8 +48,8 @@ const AITile = ({
     }, body);
   }
   return /*#__PURE__*/React.createElement(Link, {
-    onClick: () => {
-      aiTileClickHandler?.();
+    onClick: event => {
+      aiTileClickHandler?.(event);
     },
     className: `${prefix}--animated-header__tile ${blockClass}`,
     "aria-label": ariaLabel ?? title ?? 'AI Tile',

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

@@ -12,14 +12,5 @@ import { type AIPromptTileProps } from '../AIPromptTile/AIPromptTile';
 import { type GlassTileProps } from '../GlassTile/GlassTile';
 /** Base Tile router */
 export type TileVariant = 'glass' | 'aiPrompt' | 'ai';
-export type BaseTileProps = ({
-    variant?: 'glass';
-} & GlassTileProps) | ({
-    variant: 'aiPrompt';
-} & AIPromptTileProps) | (({
-    variant: 'ai';
-} & AITileProps) & {
-    id?: string;
-    tileId?: string | null;
-});
+export type BaseTileProps = GlassTileProps | AIPromptTileProps | AITileProps;
 export declare const BaseTile: React.FC<BaseTileProps>;

package/es/components/Tiles/BaseTile/BaseTile.js

@@ -16,7 +16,7 @@ function inferVariant(props) {
   if (props.variant) {
     return props.variant;
   }
-  if (props.id === 'ai-tile') {
+  if (props.tileId === 'ai-tile') {
     return 'aiPrompt';
   }
   return 'glass';

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type GlassTileProps = {
-    tileId: string | null;
+    variant?: 'glass';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -16,10 +17,10 @@ export type GlassTileProps = {
     customContent?: React.ReactNode | null;
     primaryIcon?: ElementType | null;
     secondaryIcon?: ElementType | null;
-    onClick?: (() => void) | null;
+    onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     ariaLabel?: string;
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const GlassTile: React.FC<GlassTileProps>;

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

@@ -48,8 +48,8 @@ const GlassTile = ({
     }, body);
   }
   return /*#__PURE__*/React.createElement(Link, {
-    onClick: () => {
-      glassTileClickHandler?.();
+    onClick: event => {
+      glassTileClickHandler?.(event);
     },
     className: `${prefix}--animated-header__tile ${blockClass}`,
     "aria-label": ariaLabel ?? title ?? 'Glass Tile',

package/lib/__stories__/AnimatedHeader.stories.d.ts

@@ -15065,7 +15065,7 @@ export declare const ThemeG10: {
                     type: string;
                     button: {
                         href: string;
-                        icon: import("@carbon/icons-react").CarbonIconType;
+                        icon: import("@carbon/react/icons").CarbonIconType;
                         text: string;
                         type: "tertiary";
                     };
@@ -30258,7 +30258,7 @@ export declare const ThemeG100: {
                     type: string;
                     button: {
                         href: string;
-                        icon: import("@carbon/icons-react").CarbonIconType;
+                        icon: import("@carbon/react/icons").CarbonIconType;
                         text: string;
                         type: "tertiary";
                     };

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -62,7 +62,9 @@ const AnimatedHeader = ({
       animRef.current.destroy();
       animRef.current = null;
     }
-    if (!animationContainer.current || !headerAnimation) return;
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
     const animation = lottie.default.loadAnimation({
       container: animationContainer.current,
       animationData: headerAnimation,
@@ -187,7 +189,7 @@ const AnimatedHeader = ({
     const legacyId = tile.id; // old configs
     const resolvedTileId = tileId ?? legacyId;
     const key = resolvedTileId ?? `tile-${index}`;
-    const hasAction = tile.href || tile.onClick === 'function';
+    const hasAction = tile.href || typeof tile.onClick === 'function';
     return /*#__PURE__*/React.createElement(BaseTile.BaseTile, _rollupPluginBabelHelpers.extends({
       key: key,
       tileId: resolvedTileId
@@ -196,11 +198,9 @@ const AnimatedHeader = ({
       productName: productName,
       isLoading: isLoading || tile.isLoading,
       disabledTaskLabel: disabledTaskLabel,
-      onClick: hasAction ? () => {
+      onClick: hasAction ? event => {
         tileClickHandler?.(tile);
-        if (typeof tile.onClick === 'function') {
-          tile.onClick();
-        }
+        tile.onClick?.(event);
       } : undefined
     }));
   }))), /*#__PURE__*/React.createElement("div", {

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

@@ -7,9 +7,7 @@
  * 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 type Tile = BaseTileProps;
 export interface TileGroup {
     id: number;
     label: string;

package/lib/components/ContentSwitcherSelector/ContentSwitcherSelector.js

@@ -21,11 +21,8 @@ const ContentSwitcherSelector = ({
 }) => {
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__content-switcher`;
-  if (!contentSwitcherConfig) return null;
-  if (isLoading || contentSwitcherConfig.isLoading) {
-    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
-      className: `${blockClass}-skeleton`
-    });
+  if (!contentSwitcherConfig) {
+    return null;
   }
   const {
     items = [],
@@ -38,16 +35,18 @@ const ContentSwitcherSelector = ({
   } = contentSwitcherConfig;
   const count = visibleCount === 3 ? 3 : 2;
   const visibleItems = items.slice(0, count);
+  const selectedIndexSafe = Math.min(Math.max(selectedIndex, 0), visibleItems.length - 1);
+  if (isLoading || contentSwitcherConfig.isLoading) {
+    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
+      className: `${blockClass}-skeleton`
+    });
+  }
   if (visibleItems.length < 2 || visibleItems.length > 3) {
     if (process.env.NODE_ENV !== 'production') {
       console.warn('[ContentSwitcherSelector] contentSwitcherConfig.items must contain 2 or 3 items.');
     }
     return null;
   }
-  const selectedIndexSafe = React.useMemo(() => {
-    const idx = typeof selectedIndex === 'number' ? selectedIndex : 0;
-    return Math.min(Math.max(idx, 0), visibleItems.length - 1);
-  }, [selectedIndex, visibleItems.length]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--container`,
     "data-expanded": headerExpanded

package/lib/components/TasksController/TasksController.d.ts

@@ -25,10 +25,8 @@ export type TasksControllerProps = {
     tasksControllerConfig?: TasksControllerConfig | null;
     isLoading?: boolean;
     allTileGroups?: TileGroup[];
-    selectedTileGroup?: TileGroup | null;
-    setSelectedTileGroup?: (group: TileGroup | {
-        selectedItem: TileGroup;
-    }) => void;
+    selectedTileGroup?: TileGroup;
+    setSelectedTileGroup?: (e: any) => void;
 };
 declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TasksController;

package/lib/components/TasksController/TasksController.js

@@ -37,24 +37,11 @@ const TasksController = ({
     ...dropdownOverrideProps
   } = tasksControllerConfig?.dropdown?.propsOverrides || {};
 
-  /** Early outs */
-  if (!tasksControllerConfig?.type) return null;
-  if (isLoading || tasksControllerConfig?.isLoading) {
-    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
-      className: `${blockClass}__task-controller-skeleton`
-    });
-  }
-
-  /** Button mode */
-  if (tasksControllerConfig?.type === 'button' && tasksControllerConfig?.button?.text) {
-    return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
-      className: `${blockClass}__button${buttonCustomClass ? ` ${buttonCustomClass}` : ''}`
-    }, buttonOverrideProps), tasksControllerConfig.button.text);
-  }
-
   /** Build Dropdown props (uses top-level list/selection/setter) */
   const dropdownProps = React.useMemo(() => {
-    if (!allTileGroups?.length) return null;
+    if (!allTileGroups?.length) {
+      return null;
+    }
     return {
       id: `${blockClass}__header-dropdown`,
       className: `${blockClass}__header-dropdown${dropdownCustomClass ? ` ${dropdownCustomClass}` : ''}`,
@@ -78,6 +65,23 @@ const TasksController = ({
     };
   }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange, tasksControllerConfig?.dropdown?.label, tasksControllerConfig?.dropdown?.ariaLabel]);
 
+  /** Early outs */
+  if (!tasksControllerConfig?.type) {
+    return null;
+  }
+  if (isLoading || tasksControllerConfig?.isLoading) {
+    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
+      className: `${blockClass}__task-controller-skeleton`
+    });
+  }
+
+  /** Button mode */
+  if (tasksControllerConfig?.type === 'button' && tasksControllerConfig?.button?.text) {
+    return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
+      className: `${blockClass}__button${buttonCustomClass ? ` ${buttonCustomClass}` : ''}`
+    }, buttonOverrideProps), tasksControllerConfig.button.text);
+  }
+
   /** Dropdown mode */
   if (tasksControllerConfig?.type === 'dropdown' && dropdownProps) {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -8,17 +8,18 @@
  */
 import React, { ElementType } from 'react';
 export type AIPromptTileProps = {
-    tileId: string | null;
+    variant: 'aiPrompt';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     disabledTaskLabel?: string | null;
     productName?: string;
     promptPlaceholder?: string;
     primaryIcon?: ElementType | null;
-    onClick?: (() => void) | null;
+    onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     ariaLabel?: string;
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;

package/lib/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -92,8 +92,8 @@ const AIPromptTile = ({
     size: "sm",
     disabled: !textInput,
     align: "top-end",
-    onClick: () => {
-      onClick?.();
+    onClick: event => {
+      onClick?.(event);
       openInNewTab(`${href}&primed_chat=${textInput}`);
     },
     onKeyDown: handleTextInputKeyDown

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type AITileProps = {
-    tileId: string | null;
+    variant: 'ai';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -16,11 +17,11 @@ export type AITileProps = {
     customContent?: React.ReactNode | null;
     primaryIcon?: ElementType | null;
     secondaryIcon?: ElementType | null;
-    onClick?: (() => void) | null;
+    onClick?: ((event: React.MouseEvent<HTMLElement>) => 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

@@ -52,8 +52,8 @@ const AITile = ({
     }, body);
   }
   return /*#__PURE__*/React.createElement(react.Link, {
-    onClick: () => {
-      aiTileClickHandler?.();
+    onClick: event => {
+      aiTileClickHandler?.(event);
     },
     className: `${prefix}--animated-header__tile ${blockClass}`,
     "aria-label": ariaLabel ?? title ?? 'AI Tile',

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

@@ -12,14 +12,5 @@ import { type AIPromptTileProps } from '../AIPromptTile/AIPromptTile';
 import { type GlassTileProps } from '../GlassTile/GlassTile';
 /** Base Tile router */
 export type TileVariant = 'glass' | 'aiPrompt' | 'ai';
-export type BaseTileProps = ({
-    variant?: 'glass';
-} & GlassTileProps) | ({
-    variant: 'aiPrompt';
-} & AIPromptTileProps) | (({
-    variant: 'ai';
-} & AITileProps) & {
-    id?: string;
-    tileId?: string | null;
-});
+export type BaseTileProps = GlassTileProps | AIPromptTileProps | AITileProps;
 export declare const BaseTile: React.FC<BaseTileProps>;

package/lib/components/Tiles/BaseTile/BaseTile.js

@@ -18,7 +18,7 @@ function inferVariant(props) {
   if (props.variant) {
     return props.variant;
   }
-  if (props.id === 'ai-tile') {
+  if (props.tileId === 'ai-tile') {
     return 'aiPrompt';
   }
   return 'glass';

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type GlassTileProps = {
-    tileId: string | null;
+    variant?: 'glass';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -16,10 +17,10 @@ export type GlassTileProps = {
     customContent?: React.ReactNode | null;
     primaryIcon?: ElementType | null;
     secondaryIcon?: ElementType | null;
-    onClick?: (() => void) | null;
+    onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     ariaLabel?: string;
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const GlassTile: React.FC<GlassTileProps>;

package/lib/components/Tiles/GlassTile/GlassTile.js

@@ -50,8 +50,8 @@ const GlassTile = ({
     }, body);
   }
   return /*#__PURE__*/React.createElement(react.Link, {
-    onClick: () => {
-      glassTileClickHandler?.();
+    onClick: event => {
+      glassTileClickHandler?.(event);
     },
     className: `${prefix}--animated-header__tile ${blockClass}`,
     "aria-label": ariaLabel ?? title ?? 'Glass Tile',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "269b91d0aa83d525616e8bc8ea9a36072e097499"
+  "gitHead": "f339f983db13e1cc4af78c6f9dcd20370b07290d"
 }