@carbon-labs/react-animated-header 0.14.0 → 0.16.0

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -5,39 +5,36 @@
  * 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'
+    collapseButtonLabel = 'Collapse',
+    tileClickHandler
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header`;
@@ -99,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})`
     }
@@ -121,61 +120,35 @@ 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, {
+      onClick: () => tileClickHandler?.(tile),
       key: tile.id,
       id: tile.id,
       open: open,
@@ -185,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`
@@ -203,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
    */
@@ -224,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)
@@ -249,45 +207,48 @@ AnimatedHeader.propTypes = {
    */
   headerStatic: PropTypes.object,
   /**
-   * Provide current product name
+   * Check if is loading
    */
-  productName: PropTypes.string,
-  /**
-   * 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,
+  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 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.
+   */
+  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
    */
-  tasksConfig: PropTypes.object,
+  tileClickHandler: PropTypes.func,
   /**
    * Specify the current username of active user
    */
@@ -297,9 +258,15 @@ AnimatedHeader.propTypes = {
    */
   welcomeText: PropTypes.string,
   /**
-   * Specify the default workspace label above the tiles
+   * Configuration for Carbon dropdown for workspace selection. To override Carbon Dropdown props use workspaceSelectorConfig.propsOverride
    */
-  workspaceLabel: PropTypes.string
+  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,17 @@ 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>;
 export {};

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

@@ -11,31 +11,11 @@ import { GlassTile } from '../GlassTile/GlassTile.js';
 
 /** Base Tile */
 
-const BaseTile = _ref => {
-  let {
-    id,
-    open,
-    href,
-    mainIcon,
-    secondaryIcon,
-    title,
-    subtitle,
-    productName,
-    customContent
-  } = _ref;
-  const props = {
-    id,
-    open,
-    href,
-    mainIcon,
-    secondaryIcon,
-    title,
-    subtitle,
-    productName,
-    customContent
-  };
-  const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile, props);
-  return tile;
+const BaseTile = props => {
+  if (props.id === 'ai-tile') {
+    return /*#__PURE__*/React.createElement(AIPromptTile, props);
+  }
+  return /*#__PURE__*/React.createElement(GlassTile, props);
 };
 
 export { BaseTile };

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

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

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Link } from '@carbon/react';
+import { Link, SkeletonPlaceholder } 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';
 
@@ -21,7 +21,11 @@ const GlassTile = _ref => {
     secondaryIcon,
     subtitle,
     title,
-    customContent
+    customContent,
+    isLoading,
+    isDisabled,
+    disabledTaskLabel,
+    onClick: glassTileClickHandler
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
@@ -29,10 +33,17 @@ const GlassTile = _ref => {
   const MainIcon = mainIcon ? index[mainIcon] : null;
   const SecondaryIcon = secondaryIcon ? index[secondaryIcon] : null;
   return /*#__PURE__*/React.createElement(Link, {
+    onClick: () => {
+      glassTileClickHandler?.();
+    },
     className: `${prefix}--animated-header__tile ${blockClass}`,
     key: id,
-    href: href
-  }, /*#__PURE__*/React.createElement("div", {
+    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`

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

@@ -0,0 +1,27 @@
+/**
+ * @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 { DropdownProps } from '@carbon/react';
+export interface Workspace {
+    id: string;
+    label: string;
+}
+export type WorkspaceSelectorConfig = {
+    propsOverrides: Partial<Omit<DropdownProps<Workspace>, 'id' | 'items' | 'selectedItem' | 'setSelectedWorkspace'>>;
+    allWorkspaces: Workspace[];
+    selectedWorkspace?: Workspace;
+    setSelectedWorkspace: (e: any) => void;
+    isLoading?: boolean;
+};
+export type WorkspaceSelectorProps = {
+    workspaceSelectorConfig?: WorkspaceSelectorConfig;
+    userName?: string;
+    isLoading?: boolean;
+};
+declare const WorkspaceSelector: ({ workspaceSelectorConfig, userName, isLoading, }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+export default WorkspaceSelector;

package/es/components/WorkspaceSelector/WorkspaceSelector.js

@@ -0,0 +1,57 @@
+/**
+ * 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 { SkeletonPlaceholder, Dropdown } from '@carbon/react';
+import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+import React, { useMemo } from 'react';
+
+const WorkspaceSelector = _ref => {
+  let {
+    workspaceSelectorConfig,
+    userName,
+    isLoading
+  } = _ref;
+  const {
+    className: dropdownCustomClass,
+    onChange: dropdownCustomOnChange,
+    ...dropdownOverrideProps
+  } = workspaceSelectorConfig?.propsOverrides || {};
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header`;
+  const dropdownProps = useMemo(() => {
+    if (!workspaceSelectorConfig?.allWorkspaces) {
+      return null;
+    }
+    return {
+      id: `${blockClass}__workspace`,
+      className: `${blockClass}__workspace${dropdownCustomClass ? ` ${dropdownCustomClass}` : ''}`,
+      size: 'sm',
+      titleText: 'Label',
+      label: `Open in: ${userName}'s workspace` || `Select a workspace`,
+      hideLabel: true,
+      type: 'inline',
+      items: workspaceSelectorConfig?.allWorkspaces,
+      selectedItem: workspaceSelectorConfig?.selectedWorkspace,
+      onChange: e => {
+        workspaceSelectorConfig?.setSelectedWorkspace?.(e);
+        dropdownCustomOnChange?.(e);
+      },
+      ...dropdownOverrideProps
+    };
+  }, [blockClass, dropdownCustomClass, dropdownOverrideProps, userName, workspaceSelectorConfig, dropdownCustomOnChange]);
+  if (isLoading || workspaceSelectorConfig?.isLoading) {
+    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
+      className: `${blockClass}__workspace-selector-skeleton`
+    });
+  }
+  if (!dropdownProps) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Dropdown, dropdownProps);
+};
+
+export { WorkspaceSelector as default };

package/es/index.d.ts

@@ -9,4 +9,6 @@
 import AnimatedHeader from './components/AnimatedHeader/AnimatedHeader';
 import { BaseTile } from './components/Tiles/index.js';
 export * from './assets';
+export type { Workspace, WorkspaceSelectorConfig, } from './components/WorkspaceSelector/WorkspaceSelector';
+export type { TasksControllerConfig } from './components/TasksController/TasksController';
 export { AnimatedHeader, BaseTile };