@carbon-labs/react-animated-header 0.33.0 → 0.35.0

package/es/components/HeaderTitle/HeaderTitle.js

@@ -31,13 +31,12 @@ const HeaderTitle = ({
   const blockClass = `${prefix}--animated-header__title`;
   const currentLang = typeof window !== 'undefined' ? document.documentElement.lang || 'en' : 'en';
   const isNameFirst = NAME_FIRST_LANGS.includes(currentLang.slice(0, 2));
-  const headingCollapsed = `${blockClass}-collapsed`;
-  const headingExpanded = `${blockClass}-expanded`;
   return /*#__PURE__*/React.createElement(Tooltip, {
     align: "bottom",
     label: `${welcomeText}, ${userName}`
   }, /*#__PURE__*/React.createElement("h1", {
-    className: `${blockClass} ${headerExpanded ? headingExpanded : headingCollapsed}`,
+    className: blockClass,
+    "data-expanded": headerExpanded,
     "aria-label": ariaLabels?.welcome ?? `${welcomeText}, ${userName}`
   }, isNameFirst ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `${blockClass}-first`

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

@@ -17,6 +17,7 @@ export interface TasksControllerConfig {
     };
     dropdown?: {
         propsOverrides?: Partial<Omit<DropdownProps<TileGroup>, 'id' | 'items' | 'selectedItem'>>;
+        label?: string;
         ariaLabel?: string;
     };
 }
@@ -25,7 +26,9 @@ export type TasksControllerProps = {
     isLoading?: boolean;
     allTileGroups?: TileGroup[];
     selectedTileGroup?: TileGroup | null;
-    setSelectedTileGroup: (e: any) => void;
+    setSelectedTileGroup?: (group: TileGroup | {
+        selectedItem: TileGroup;
+    }) => 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

@@ -6,8 +6,8 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { SkeletonPlaceholder, Button, Dropdown } from '@carbon/react';
 import React, { useMemo } from 'react';
+import { SkeletonPlaceholder, Button, Dropdown } from '@carbon/react';
 import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
 
 const TasksController = ({
@@ -17,54 +17,64 @@ const TasksController = ({
   selectedTileGroup,
   setSelectedTileGroup
 }) => {
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header`;
+
+  /** Button overrides */
   const {
     className: buttonCustomClass,
     ...buttonOverrideProps
   } = tasksControllerConfig?.button?.propsOverrides || {};
+
+  /** Dropdown overrides */
   const {
     className: dropdownCustomClass,
     onChange: dropdownCustomOnChange,
     ...dropdownOverrideProps
   } = tasksControllerConfig?.dropdown?.propsOverrides || {};
-  const prefix = usePrefix();
-  const blockClass = `${prefix}--animated-header`;
+
+  /** 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}` : ''}`,
       size: 'md',
       titleText: 'Label',
-      label: allTileGroups[0]?.label ?? '',
+      label: tasksControllerConfig?.dropdown?.label ?? allTileGroups[0]?.label ?? '',
       hideLabel: true,
       type: 'inline',
       items: allTileGroups,
       selectedItem: selectedTileGroup ?? undefined,
       onChange: e => {
-        setSelectedTileGroup?.(e);
+        if (e.selectedItem) {
+          setSelectedTileGroup?.({
+            selectedItem: e.selectedItem
+          });
+        }
         dropdownCustomOnChange?.(e);
       },
       'aria-label': tasksControllerConfig?.dropdown?.ariaLabel ?? 'Select a task group',
       ...dropdownOverrideProps
     };
-  }, [allTileGroups, blockClass, dropdownCustomClass, selectedTileGroup, tasksControllerConfig?.dropdown?.ariaLabel, dropdownOverrideProps, setSelectedTileGroup, dropdownCustomOnChange]);
-  if (!tasksControllerConfig?.type) {
-    return null;
-  }
-  if (isLoading || tasksControllerConfig?.isLoading) {
-    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
-      className: `${blockClass}__task-controller-skeleton`
-    });
-  }
+  }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange, tasksControllerConfig?.dropdown?.label, tasksControllerConfig?.dropdown?.ariaLabel]);
 
-  // Button
-  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", {
       className: `${blockClass}__header-dropdown--container`

package/es/index.d.ts

@@ -8,9 +8,10 @@
  */
 import AnimatedHeader from './components/AnimatedHeader/AnimatedHeader';
 import { AriaLabels, TileGroup } from './components/AnimatedHeader/types';
+import HeaderAction from './components/HeaderAction/HeaderAction';
 import HeaderTitle from './components/HeaderTitle/HeaderTitle';
 import { BaseTile } from './components/Tiles/index';
 export * from './assets';
 export type { Workspace, WorkspaceSelectorConfig, } from './components/WorkspaceSelector/WorkspaceSelector';
 export type { TasksControllerConfig } from './components/TasksController/TasksController';
-export { AnimatedHeader, BaseTile, HeaderTitle, type AriaLabels, type TileGroup, };
+export { AnimatedHeader, BaseTile, HeaderAction, HeaderTitle, type AriaLabels, type TileGroup, };

package/es/index.js

@@ -6,6 +6,7 @@
  */
 
 export { default as AnimatedHeader } from './components/AnimatedHeader/AnimatedHeader.js';
+export { default as HeaderAction } from './components/HeaderAction/HeaderAction.js';
 export { default as HeaderTitle } from './components/HeaderTitle/HeaderTitle.js';
 import 'react';
 import '@carbon/react';
@@ -13,8 +14,8 @@ import '@carbon/react/icons';
 export { BaseTile } from './components/Tiles/BaseTile/BaseTile.js';
 export { default as dataFabricStaticLight } from './assets/static/header_static_data_fabric_light_06.svg.js';
 export { default as dataFabricStaticDark } from './assets/static/header_static_data_fabric_dark_06.svg.js';
-export { default as db2StaticLight } from './assets/static/header_static_db2_light_02.svg.js';
-export { default as db2StaticDark } from './assets/static/header_static_db2_dark_02.svg.js';
+export { default as db2StaticLight } from './assets/static/header_static_db2_light_01.svg.js';
+export { default as db2StaticDark } from './assets/static/header_static_db2_dark_01.svg.js';
 export { default as watsonXStaticLight } from './assets/static/header_static_watsonx_data_light_06.svg.js';
 export { default as watsonXStaticDark } from './assets/static/header_static_watsonx_data_dark_05.svg.js';
 export { default as watsonXAStaticLight } from './assets/static/header_static_watsonx_a_light_01.svg.js';
@@ -23,6 +24,8 @@ export { default as wxbiaStaticLight } from './assets/static/header_static_wxbia
 export { default as wxbiaStaticDark } from './assets/static/header_static_wxbia_dark_01.svg.js';
 export { default as dataFabricAnimatedLight } from './assets/animated/header_animated_data_fabric_light_03.json.js';
 export { default as dataFabricAnimatedDark } from './assets/animated/header_animated_data_fabric_dark_06.json.js';
+export { default as db2AnimatedLight } from './assets/animated/header_animated_db2_light_03.json.js';
+export { default as db2AnimatedDark } from './assets/animated/header_animated_db2_dark_03.json.js';
 export { default as watsonXAnimatedLight } from './assets/animated/header_animated_watsonx_data_light_04.json.js';
 export { default as watsonXAnimatedDark } from './assets/animated/header_animated_watsonx_data_dark_03.json.js';
 export { default as watsonXAAnimatedLight } from './assets/animated/header_animated_watsonx_a_light_06.json.js';