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

package/lib/components/HeaderTitle/HeaderTitle.js

@@ -35,13 +35,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(react.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/lib/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/lib/components/TasksController/TasksController.js

@@ -10,8 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var react = require('@carbon/react');
 var React = require('react');
+var react = require('@carbon/react');
 var usePrefix = require('../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
 
 const TasksController = ({
@@ -21,54 +21,64 @@ const TasksController = ({
   selectedTileGroup,
   setSelectedTileGroup
 }) => {
+  const prefix = usePrefix.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.usePrefix();
-  const blockClass = `${prefix}--animated-header`;
+
+  /** 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}` : ''}`,
       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(react.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(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", {
       className: `${blockClass}__header-dropdown--container`

package/lib/index.d.ts

@@ -8,9 +8,12 @@
  */
 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 type { HeaderActionConfig } from './components/HeaderAction/header-action.types';
+export type { ContentSwitcherConfig } from './components/ContentSwitcherSelector/ContentSwitcherSelector';
+export { AnimatedHeader, BaseTile, HeaderAction, HeaderTitle, type AriaLabels, type TileGroup, };

package/lib/index.js

@@ -8,6 +8,7 @@
 'use strict';
 
 var AnimatedHeader = require('./components/AnimatedHeader/AnimatedHeader.js');
+var HeaderAction = require('./components/HeaderAction/HeaderAction.js');
 var HeaderTitle = require('./components/HeaderTitle/HeaderTitle.js');
 require('react');
 require('@carbon/react');
@@ -37,6 +38,7 @@ var header_animated_wxbia_dark_06 = require('./assets/animated/header_animated_w
 
 
 exports.AnimatedHeader = AnimatedHeader.default;
+exports.HeaderAction = HeaderAction.default;
 exports.HeaderTitle = HeaderTitle.default;
 exports.BaseTile = BaseTile.BaseTile;
 exports.dataFabricStaticLight = header_static_data_fabric_light_06.default;

package/package.json

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

package/scss/AnimatedHeader/animated-header.scss

@@ -258,6 +258,80 @@ body {
   inline-size: 100%;
 }
 
+.#{$prefix}__title-and-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-07;
+  min-block-size: $spacing-09;
+}
+
+.#{$prefix}__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.#{$prefix}__content-switcher--container {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  inline-size: max-content;
+  isolation: isolate;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear,
+      margin 500ms motion.motion(standard, expressive);
+  }
+
+  &[data-expanded='true'] {
+    margin: $spacing-08 0 $spacing-05 0;
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    margin: $spacing-02 0 $spacing-02 0;
+    line-height: 1.25;
+
+    opacity: 0;
+    transition-delay: 0ms;
+  }
+}
+
+.#{$prefix}__content-switcher--container::before {
+  position: absolute;
+  border-radius: inherit;
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  content: '';
+  inset: 0;
+  pointer-events: none;
+}
+
+.#{$prefix}__content-switcher {
+  position: relative;
+  z-index: 1;
+
+  animation: 500ms motion.motion(standard, expressive) 0ms 1 slide-in;
+  animation-delay: 383.333ms;
+  animation-fill-mode: both;
+}
+
+.#{$prefix}__content-switcher-skeleton {
+  background: $layer-01;
+  block-size: $spacing-08;
+  inline-size: 27rem;
+  max-inline-size: 18rem;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}__content-switcher-skeleton::before {
+  background: $layer-02;
+}
+
 .#{$prefix}__content {
   z-index: 2;
   display: flex;
@@ -438,6 +512,10 @@ body {
     display: none;
   }
 
+  .#{$prefix}__header-switcher {
+    display: none;
+  }
+
   .#{$prefix}__content {
     display: none;
   }
@@ -457,6 +535,10 @@ body {
     display: block;
   }
 
+  .#{$prefix}__header-switcher {
+    display: inline-flex;
+  }
+
   .#{$prefix}__static {
     display: flex;
 

package/scss/HeaderAction/header-action.scss

@@ -0,0 +1,54 @@
+/**
+ * @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.
+ */
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/react/scss/theme' as *;
+
+$prefix: 'clabs--animated-header__header-action' !default;
+
+.#{$prefix} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-05;
+  min-block-size: 2.5rem;
+
+  &::after {
+    position: absolute;
+    z-index: 2;
+    display: block;
+    background-color: $border-subtle;
+    block-size: $spacing-06;
+    content: '';
+    inline-size: 0.0625rem;
+    inset-inline-end: 0;
+  }
+
+  button.cds--btn {
+    z-index: 3;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear, visibility 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    visibility: hidden;
+  }
+}

package/scss/HeaderTitle/header-title.scss

@@ -13,17 +13,30 @@
 $prefix: 'clabs--animated-header__title' !default;
 
 .#{$prefix} {
-  @include type-style('heading-05');
-
   position: relative;
   z-index: 2;
   overflow: hidden;
-  margin: $spacing-08 0 $spacing-05 0;
   text-overflow: ellipsis;
-  transition: font-size 500ms motion.motion(standard, expressive),
-    margin 500ms motion.motion(standard, expressive);
   white-space: nowrap;
 
+  @media (prefers-reduced-motion: no-preference) {
+    transition: font-size 500ms motion.motion(standard, expressive),
+      margin 500ms motion.motion(standard, expressive);
+  }
+
+  &[data-expanded='true'] {
+    @include type-style('heading-05');
+
+    margin: $spacing-08 0 $spacing-05 0;
+  }
+
+  &[data-expanded='false'] {
+    @include type-style('heading-03');
+
+    margin: calc($spacing-04 - 0.5px) 0 calc($spacing-04 - 0.5px) 0;
+    line-height: 1.25;
+  }
+
   @supports (-webkit-line-clamp: 3) {
     display: -webkit-box;
     overflow: hidden;
@@ -41,13 +54,6 @@ $prefix: 'clabs--animated-header__title' !default;
   }
 }
 
-.#{$prefix}-collapsed {
-  @include type-style('heading-03');
-
-  margin: $spacing-03 0 $spacing-04 0;
-  line-height: 1.25;
-}
-
 .#{$prefix}-first {
   animation: 250ms ease-in fade-in;
   animation-fill-mode: both;

package/scss/animated-header.scss

@@ -6,6 +6,7 @@
  */
 
 @use 'AnimatedHeader/animated-header.scss';
+@use 'HeaderAction/header-action.scss';
 @use 'HeaderTitle/header-title.scss';
 @use 'Tiles/AITile/ai-tile.scss';
 @use 'Tiles/AIPromptTile/ai-prompt-tile.scss';