@carbon-labs/react-animated-header 0.15.0 → 0.17.0

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

@@ -27,6 +27,26 @@ export const headerTiles: ({
         title: string;
         subtitle: string;
         mainIcon: string;
+        isLoading: boolean;
+        isDisabled?: undefined;
+        secondaryIcon?: undefined;
+    } | {
+        id: string;
+        href: string;
+        title: string;
+        subtitle: string;
+        mainIcon: string;
+        isLoading?: undefined;
+        isDisabled?: undefined;
+        secondaryIcon?: undefined;
+    } | {
+        id: string;
+        href: string;
+        title: string;
+        subtitle: string;
+        mainIcon: string;
+        isDisabled: boolean;
+        isLoading?: undefined;
         secondaryIcon?: undefined;
     } | {
         id: string;
@@ -35,6 +55,8 @@ export const headerTiles: ({
         mainIcon: string;
         secondaryIcon: string;
         subtitle?: undefined;
+        isLoading?: undefined;
+        isDisabled?: undefined;
     })[];
 } | {
     id: number;
@@ -44,7 +66,7 @@ export const headerTiles: ({
         customContent: import("react/jsx-runtime").JSX.Element;
     }[];
 })[];
-export namespace tasksConfigButton {
+export namespace tasksControllerConfigButton {
     let type: string;
     namespace button {
         export let href: string;
@@ -54,11 +76,98 @@ export namespace tasksConfigButton {
         export { type_1 as type };
     }
 }
-export namespace tasksConfigDropdown {
+export namespace tasksControllerConfigDropdown {
     let type_2: string;
     export { type_2 as type };
     export namespace dropdown {
-        let label: string;
+        export let label: string;
+        export { headerTiles as allTileGroups };
+        export let selectedTileGroup: {
+            id: number;
+            label: string;
+            tiles: ({
+                id: string;
+                href: string;
+                title: string;
+                mainIcon: string;
+                subtitle?: undefined;
+            } | {
+                id: string;
+                href: string;
+                title: string;
+                subtitle: string;
+                mainIcon: string;
+            })[];
+        } | {
+            id: number;
+            label: string;
+            tiles: ({
+                id: string;
+                href: string;
+                title: string;
+                subtitle: string;
+                mainIcon: string;
+                isLoading: boolean;
+                isDisabled?: undefined;
+                secondaryIcon?: undefined;
+            } | {
+                id: string;
+                href: string;
+                title: string;
+                subtitle: string;
+                mainIcon: string;
+                isLoading?: undefined;
+                isDisabled?: undefined;
+                secondaryIcon?: undefined;
+            } | {
+                id: string;
+                href: string;
+                title: string;
+                subtitle: string;
+                mainIcon: string;
+                isDisabled: boolean;
+                isLoading?: undefined;
+                secondaryIcon?: undefined;
+            } | {
+                id: string;
+                href: string;
+                title: string;
+                mainIcon: string;
+                secondaryIcon: string;
+                subtitle?: undefined;
+                isLoading?: undefined;
+                isDisabled?: undefined;
+            })[];
+        } | {
+            id: number;
+            label: string;
+            tiles: {
+                id: string;
+                customContent: import("react/jsx-runtime").JSX.Element;
+            }[];
+        };
+        export function setSelectedTileGroup(): void;
     }
 }
+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;
+    }
+}
+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';

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

@@ -1,22 +1,7 @@
 import React, { ReactNode } from 'react';
-import { ButtonKind } from '@carbon/react';
+import { TasksControllerProps } from '../TasksController/TasksController';
+import { WorkspaceSelectorProps } from '../WorkspaceSelector/WorkspaceSelector';
 /** Animated Header */
-export interface TasksConfig {
-    type: 'button' | 'dropdown' | string;
-    button?: {
-        href?: string;
-        icon?: any;
-        text?: string;
-        type?: ButtonKind;
-    };
-    dropdown?: {
-        label?: string;
-    };
-}
-export interface SelectedWorkspace {
-    id: string;
-    label: string;
-}
 export interface Tile {
     href?: string | null;
     id: string;
@@ -25,34 +10,29 @@ export interface Tile {
     subtitle?: string | null;
     title?: string | null;
     customContent?: ReactNode | null;
+    isLoading?: boolean;
+    isDisabled?: boolean;
 }
 export interface TileGroup {
     id: number;
     label: string;
     tiles: Tile[];
 }
-export interface AnimatedHeaderProps {
-    allTiles: TileGroup[];
-    allWorkspaces?: SelectedWorkspace[];
+export type AnimatedHeaderProps = {
+    allTileGroups?: TileGroup[];
+    selectedTileGroup?: TileGroup;
+    setSelectedTileGroup: (e: any) => void;
     description?: string;
-    handleHeaderItemsToString?: (item: TileGroup | null) => string;
-    renderHeaderSelectedItem?: (item: TileGroup | null) => ReactNode;
-    handleWorkspaceItemsToString?: (item: SelectedWorkspace | null) => string;
-    renderWorkspaceSelectedItem?: (item: SelectedWorkspace | null) => ReactNode;
     headerAnimation?: object;
     headerStatic?: React.JSX.Element;
     productName?: string;
-    selectedTileGroup: TileGroup[] | any;
-    selectedWorkspace?: SelectedWorkspace | any;
-    setSelectedTileGroup: (e: any) => void;
-    setSelectedWorkspace: (e: any) => void;
-    tasksConfig?: TasksConfig;
     userName?: string;
     welcomeText?: string;
-    workspaceLabel?: string;
+    isLoading?: boolean;
+    disabledTaskLabel?: string;
     expandButtonLabel?: string;
     collapseButtonLabel?: string;
     tileClickHandler?: (tile: Tile) => void;
-}
+} & TasksControllerProps & WorkspaceSelectorProps;
 declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
 export default AnimatedHeader;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -5,37 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect } from 'react';
-import { Grid, Column, Tooltip, Button, Dropdown } from '@carbon/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 { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
+import TasksController from '../TasksController/TasksController.js';
+import WorkspaceSelector from '../WorkspaceSelector/WorkspaceSelector.js';
 import { ChevronUp, ChevronDown } from '../../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
 
 /** Animated Header */
 
 const AnimatedHeader = _ref => {
   let {
-    allTiles,
-    allWorkspaces,
+    allTileGroups,
+    selectedTileGroup,
+    setSelectedTileGroup,
     description,
-    handleHeaderItemsToString,
-    handleWorkspaceItemsToString,
     headerAnimation,
     headerStatic,
     productName = '[Product name]',
-    renderHeaderSelectedItem,
-    renderWorkspaceSelectedItem,
-    selectedTileGroup,
-    selectedWorkspace,
-    setSelectedTileGroup,
-    setSelectedWorkspace,
-    tasksConfig,
     userName,
     welcomeText,
-    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`,
+    tasksControllerConfig,
+    workspaceSelectorConfig,
+    isLoading,
+    disabledTaskLabel,
     expandButtonLabel = 'Expand',
     collapseButtonLabel = 'Collapse',
     tileClickHandler
@@ -100,7 +96,9 @@ const AnimatedHeader = _ref => {
   }), !headerAnimation && headerStatic && /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__static--container`
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static`,
+    className: `${blockClass}__static`
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
     style: {
       backgroundImage: `url(${headerStatic})`
     }
@@ -122,58 +120,31 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__heading-welcome`
   }, welcomeText, ",", ' '), /*#__PURE__*/React.createElement("span", {
     className: `${blockClass}__heading-name`
-  }, userName)))), (description || tasksConfig && tasksConfig.type === 'button' && tasksConfig.button?.text || tasksConfig && tasksConfig.type === 'dropdown' && tasksConfig.dropdown?.label) && /*#__PURE__*/React.createElement(Column, {
+  }, userName)))), (description || tasksControllerConfig) && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 4,
     className: `${blockClass}__left-area-container${!open ? ` ${descriptionCollapsed}` : ''}`
   }, description && /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`
-  }, description), tasksConfig?.button?.text && /*#__PURE__*/React.createElement(Button, {
-    className: `${blockClass}__button`,
-    kind: tasksConfig.button.type,
-    renderIcon: tasksConfig.button.icon,
-    href: tasksConfig.button.href
-  }, tasksConfig.button.text), !tasksConfig?.button?.text && tasksConfig && tasksConfig.type === 'dropdown' && allTiles && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__header-dropdown--container`
-  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
-    id: `${blockClass}__header-dropdown`,
-    className: `${blockClass}__header-dropdown`,
-    size: "md",
-    titleText: "Label",
-    label: tasksConfig.dropdown?.label || allTiles[0].label,
-    hideLabel: true,
-    type: "inline",
-    items: allTiles,
-    onChange: e => setSelectedTileGroup(e)
-  }, handleHeaderItemsToString ? {
-    itemToString: handleHeaderItemsToString
-  } : {}, renderHeaderSelectedItem ? {
-    renderSelectedItem: renderHeaderSelectedItem
-  } : {})))), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
+  }, description), /*#__PURE__*/React.createElement(TasksController, {
+    tasksControllerConfig: tasksControllerConfig,
+    isLoading: isLoading,
+    allTileGroups: allTileGroups,
+    selectedTileGroup: selectedTileGroup,
+    setSelectedTileGroup: setSelectedTileGroup
+  })), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 12,
     className: `${blockClass}__content`
-  }, allWorkspaces && /*#__PURE__*/React.createElement("div", {
+  }, workspaceSelectorConfig?.allWorkspaces?.length && /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__workspace--container${!open ? ` ${contentCollapsed}` : ''}`
-  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
-    id: `${blockClass}__workspace`,
-    className: `${blockClass}__workspace`,
-    size: "sm",
-    titleText: "Label",
-    label: workspaceLabel,
-    hideLabel: true,
-    type: "inline",
-    items: allWorkspaces,
-    onChange: e => setSelectedWorkspace(e)
-  }, handleWorkspaceItemsToString ? {
-    itemToString: handleWorkspaceItemsToString
-  } : {}, renderWorkspaceSelectedItem ? {
-    renderSelectedItem: renderWorkspaceSelectedItem
-  } : {}, selectedWorkspace ? {
-    selectedItem: selectedWorkspace
-  } : {}))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(WorkspaceSelector, {
+    workspaceSelectorConfig: workspaceSelectorConfig,
+    userName: userName,
+    isLoading: isLoading
+  })), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
     return /*#__PURE__*/React.createElement(BaseTile, {
@@ -187,7 +158,10 @@ const AnimatedHeader = _ref => {
       title: tile.title,
       subtitle: tile.subtitle,
       productName: productName,
-      customContent: tile.customContent
+      customContent: tile.customContent,
+      isLoading: isLoading || tile.isLoading,
+      isDisabled: tile.isDisabled,
+      disabledTaskLabel: disabledTaskLabel
     });
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__button-collapse--gradient`
@@ -205,11 +179,7 @@ AnimatedHeader.propTypes = {
   /**
    * Array of each tile group setup
    */
-  allTiles: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * Array of all workspace options
-   */
-  allWorkspaces: PropTypes.arrayOf(PropTypes.object),
+  allTileGroups: PropTypes.arrayOf(PropTypes.object),
   /**
    * Specify an optional className to be added to your Animated Header
    */
@@ -226,20 +196,6 @@ AnimatedHeader.propTypes = {
    * Custom expand button label
    */
   expandButtonLabel: PropTypes.string,
-  /**
-   * Helper function passed to downshift that allows the library to render a
-   * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list. (Dropdown
-   * under description in header).
-   */
-  handleHeaderItemsToString: PropTypes.func,
-  /**
-   * Helper function passed to downshift that allows the library to render a
-   * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list. (Dropdown
-   * related to workspace selection).
-   */
-  handleWorkspaceItemsToString: PropTypes.func,
   /**
    * In-product imagery / lottie animation (.json) dim. 1312 x 738
    * (to update headerAnimation content storybook requires remount in toolbar)
@@ -251,45 +207,48 @@ AnimatedHeader.propTypes = {
    */
   headerStatic: PropTypes.object,
   /**
-   * Provide current product name
+   * Check if is loading
    */
-  productName: PropTypes.string,
+  isLoading: PropTypes.bool,
   /**
-   * Helper function passed to downshift that allows the library to render a
-   * selected item to as an arbitrary ReactNode. By default it uses standard Carbon renderer that renders only item.label text
-   * (Dropdown under description in header)
-   */
-  renderHeaderSelectedItem: PropTypes.func,
-  /**
-   * Helper function passed to downshift that allows the library to render a
-   * selected item to as an arbitrary ReactNode. By default it uses standard Carbon renderer that renders only item.label text
-   * (Dropdown related to workspace selection)
+   * Provide current product name
    */
-  renderWorkspaceSelectedItem: PropTypes.func,
+  productName: PropTypes.string,
   /**
    * The tile group that is active in the header
    * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
    */
   selectedTileGroup: PropTypes.object,
-  /**
-   * Object containing workspace selection
-   * `Open in: "_"`
-   */
-  selectedWorkspace: PropTypes.object,
   /**
    * Provide function to be called when switching selected tile group
    */
   setSelectedTileGroup: PropTypes.func,
-  /**
-   * Provide function to be called when switching workspace selection
-   */
-  setSelectedWorkspace: PropTypes.func,
   /**
    * Configuration for Carbon button or dropdown menu in header. Customized
    * tasks are used to allow users that have multiple roles and permissions
    * to experience better tailored content based on their need.
+   * It also allows to override Carbon Button props by specifying them in tasksConfig.button.propsOverrides
+   * or to override Carbon Dropdown props by specifying them in tasksConfig.dropdown.propsOverrides.
    */
-  tasksConfig: PropTypes.object,
+  tasksControllerConfig: PropTypes.shape({
+    type: PropTypes.oneOf(['button', 'dropdown']).isRequired,
+    button: PropTypes.shape({
+      text: PropTypes.string.isRequired,
+      // Override Carbon Button props
+      propsOverrides: PropTypes.object
+    }),
+    dropdown: PropTypes.shape({
+      allTileGroups: PropTypes.arrayOf(PropTypes.object),
+      selectedTileGroup: PropTypes.object,
+      setSelectedTileGroup: PropTypes.func.isRequired,
+      // Override Carbon Dropdown props
+      propsOverrides: PropTypes.object
+    })
+  }),
+  /**
+   * Handler for tile clicks
+   */
+  tileClickHandler: PropTypes.func,
   /**
    * Specify the current username of active user
    */
@@ -299,13 +258,15 @@ AnimatedHeader.propTypes = {
    */
   welcomeText: PropTypes.string,
   /**
-   * Specify the default workspace label above the tiles
-   */
-  workspaceLabel: PropTypes.string,
-  /**
-   * Handler for tile clicks
+   * Configuration for Carbon dropdown for workspace selection. To override Carbon Dropdown props use workspaceSelectorConfig.propsOverride
    */
-  tileClickHandler: PropTypes.func
+  workspaceSelectorConfig: PropTypes.shape({
+    // Override Carbon Dropdown props
+    propsOverrides: PropTypes.object,
+    allWorkspaces: PropTypes.arrayOf(PropTypes.object),
+    selectedWorkspace: PropTypes.object,
+    setSelectedWorkspace: PropTypes.func.isRequired
+  })
 };
 
 export { AnimatedHeader as default };

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

@@ -0,0 +1,30 @@
+/**
+ * @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 { ButtonBaseProps, DropdownProps } from '@carbon/react';
+import { TileGroup } from '../AnimatedHeader/AnimatedHeader';
+export interface TasksControllerConfig {
+    type: 'button' | 'dropdown';
+    isLoading?: boolean;
+    button?: {
+        text: string;
+        propsOverrides?: Partial<ButtonBaseProps>;
+    };
+    dropdown?: {
+        propsOverrides?: Partial<Omit<DropdownProps<TileGroup>, 'id' | 'items' | 'selectedItem'>>;
+    };
+}
+export type TasksControllerProps = {
+    tasksControllerConfig?: TasksControllerConfig;
+    isLoading?: boolean;
+    allTileGroups?: TileGroup[];
+    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

@@ -0,0 +1,73 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { SkeletonPlaceholder, Button, Dropdown } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+
+const TasksController = _ref => {
+  let {
+    tasksControllerConfig,
+    isLoading,
+    allTileGroups,
+    selectedTileGroup,
+    setSelectedTileGroup
+  } = _ref;
+  const {
+    className: buttonCustomClass,
+    ...buttonOverrideProps
+  } = tasksControllerConfig?.button?.propsOverrides || {};
+  const {
+    className: dropdownCustomClass,
+    onChange: dropdownCustomOnChange,
+    ...dropdownOverrideProps
+  } = tasksControllerConfig?.dropdown?.propsOverrides || {};
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header`;
+  const dropdownProps = useMemo(() => {
+    if (!allTileGroups?.length) {
+      return null;
+    }
+    return {
+      id: `${blockClass}__header-dropdown`,
+      className: `${blockClass}__header-dropdown${dropdownCustomClass ? ` ${dropdownCustomClass}` : ''}`,
+      size: 'md',
+      titleText: 'Label',
+      label: allTileGroups[0]?.label ?? '',
+      hideLabel: true,
+      type: 'inline',
+      items: allTileGroups,
+      selectedItem: selectedTileGroup,
+      onChange: e => {
+        setSelectedTileGroup?.(e);
+        dropdownCustomOnChange?.(e);
+      },
+      ...dropdownOverrideProps
+    };
+  }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange]);
+  if (isLoading || tasksControllerConfig?.isLoading) {
+    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
+      className: `${blockClass}__task-controller-skeleton`
+    });
+  }
+
+  // Button
+  if (tasksControllerConfig?.type === 'button' && tasksControllerConfig?.button?.text) {
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      className: `${blockClass}__button${buttonCustomClass ? ` ${buttonCustomClass}` : ''}`
+    }, buttonOverrideProps), tasksControllerConfig.button.text);
+  }
+  if (tasksControllerConfig?.type === 'dropdown' && dropdownProps) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${blockClass}__header-dropdown--container`
+    }, /*#__PURE__*/React.createElement(Dropdown, dropdownProps));
+  }
+  return null;
+};
+
+export { TasksController as default };

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

@@ -9,12 +9,15 @@
 import React from 'react';
 /** Primary UI component for user interaction */
 interface AIPromptTileProps {
-    href?: string;
+    href?: string | null;
     id?: string;
-    mainIcon?: string;
+    mainIcon?: string | null;
     open?: boolean;
     productName?: string;
-    title?: string;
+    title?: string | null;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    disabledTaskLabel?: string;
 }
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;
 export {};

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

@@ -6,7 +6,7 @@
  */
 
 import React, { useState } from 'react';
-import { AILabel, TextInput, IconButton, Button } from '@carbon/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';
@@ -22,11 +22,15 @@ const AIPromptTile = _ref => {
     mainIcon,
     open,
     productName,
-    title
+    title,
+    isLoading,
+    isDisabled,
+    disabledTaskLabel
   } = _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;
@@ -41,15 +45,17 @@ const AIPromptTile = _ref => {
   };
   const handleTextInputKeyDown = event => {
     if (event.key === 'Enter') {
-      console.log('do validate');
       openInNewTab(`${href}&primed_chat=${textInput}`);
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     id: `${blockClass}`,
-    className: `${prefix}--animated-header__tile ${blockClass}`,
+    className: `${prefix}--animated-header__tile ${blockClass}${isDisabled ? ' ' + disabled : ''}`,
+    title: isDisabled ? disabledTaskLabel ?? '' : '',
     key: id
-  }, /*#__PURE__*/React.createElement("div", {
+  }, 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`
@@ -93,7 +99,7 @@ const AIPromptTile = _ref => {
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     size: "sm",
-    href: href
+    href: href ?? undefined
   }, "Open ", productName))));
 };
 

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

@@ -11,13 +11,16 @@ import React, { ReactNode } from 'react';
 interface BaseTileProps {
     id?: string;
     open?: boolean;
-    href?: string;
-    mainIcon?: string;
-    secondaryIcon?: string;
-    title?: string;
-    subtitle?: string;
+    href?: string | null;
+    mainIcon?: string | null;
+    secondaryIcon?: string | null;
+    title?: string | null;
+    subtitle?: string | null;
     productName?: string;
     customContent?: ReactNode;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    disabledTaskLabel?: string;
     onClick?: () => void;
 }
 export declare const BaseTile: React.FC<BaseTileProps>;