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

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

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

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

@@ -9,14 +9,17 @@
 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>;

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

@@ -24,6 +24,9 @@ const GlassTile = _ref => {
     subtitle,
     title,
     customContent,
+    isLoading,
+    isDisabled,
+    disabledTaskLabel,
     onClick: glassTileClickHandler
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -37,8 +40,12 @@ const GlassTile = _ref => {
     },
     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(react.SkeletonPlaceholder, {
+    className: `${blockClass}--loading-skeleton`
+  }) : /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`

package/lib/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/lib/components/WorkspaceSelector/WorkspaceSelector.js

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@carbon/react');
+var usePrefix = require('../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+var React = require('react');
+
+const WorkspaceSelector = _ref => {
+  let {
+    workspaceSelectorConfig,
+    userName,
+    isLoading
+  } = _ref;
+  const {
+    className: dropdownCustomClass,
+    onChange: dropdownCustomOnChange,
+    ...dropdownOverrideProps
+  } = workspaceSelectorConfig?.propsOverrides || {};
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header`;
+  const dropdownProps = React.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(react.SkeletonPlaceholder, {
+      className: `${blockClass}__workspace-selector-skeleton`
+    });
+  }
+  if (!dropdownProps) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(react.Dropdown, dropdownProps);
+};
+
+exports.default = WorkspaceSelector;

package/lib/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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "d2ecbcb99660bd0d7c5ce5721a9ed9182e3a1a21"
+  "gitHead": "b2adf21b63ab6a230373abe160cde8fc36251197"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -49,11 +49,11 @@ body {
   overflow: visible;
   background: $background;
   inline-size: 100%;
-  max-block-size: 90vh;
+  max-block-size: 200vh;
   outline: 1px solid transparent;
   padding-block: 0 $spacing-10;
   transition: padding 500ms motion.motion(standard, expressive),
-    max-height 500ms motion.motion(standard, expressive), color 200ms linear,
+    max-block-size 500ms motion.motion(standard, expressive), color 200ms linear,
     background-color 200ms linear,
     outline 500ms motion.motion(standard, expressive);
   writing-mode: horizontal-tb;
@@ -226,6 +226,32 @@ body {
   max-inline-size: fit-content;
 }
 
+.#{$prefix}__task-controller-skeleton {
+  background: $layer-01;
+  block-size: $spacing-08;
+  inline-size: auto;
+  max-inline-size: 18rem;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}__task-controller-skeleton::before {
+  background: $layer-02;
+}
+
+.#{$prefix}__workspace-selector-skeleton {
+  background: $layer-01;
+  block-size: $spacing-07;
+  inline-size: auto;
+  max-inline-size: 18rem;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}__workspace-selector-skeleton::before {
+  background: $layer-02;
+}
+
 .#{$prefix}__header-dropdown--container {
   inline-size: auto;
   max-inline-size: 18rem;
@@ -284,6 +310,13 @@ body {
   animation-fill-mode: both;
 }
 
+/* support for Safari */
+@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  .#{$prefix}__tile {
+    animation: none;
+  }
+}
+
 .#{$prefix}__tile:nth-child(1) {
   animation-delay: 383.333ms;
 }
@@ -482,10 +515,8 @@ body {
     inline-size: calc(100% - 16px);
   }
 
-  .#{$prefix}__tiles-container:has(> :first-child)
-    > ##{$prefix}__ai-prompt-tile
-    ~ .#{$prefix}__glass-tile {
-    inline-size: calc(50% - 16px);
+  .#{$prefix}__tiles-container > ##{$prefix}__ai-prompt-tile {
+    flex-grow: 0.5;
   }
 }
 

package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss

@@ -23,6 +23,16 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   text-decoration: none;
 }
 
+.#{$prefix}--disabled {
+  outline: 0;
+
+  * {
+    color: $text-disabled;
+    fill: $text-disabled;
+    pointer-events: none;
+  }
+}
+
 .#{$prefix}:hover,
 .#{$prefix}:active,
 .#{$prefix}:focus {
@@ -192,6 +202,18 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   z-index: 4;
 }
 
+.#{$prefix}--loading-skeleton {
+  background: $layer-01;
+  block-size: 100%;
+  inline-size: 100%;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}--loading-skeleton::before {
+  background: $layer-02;
+}
+
 @keyframes animate-border {
   0% {
     background-position: 100% 0%;

package/scss/Tiles/GlassTile/glass-tile.scss

@@ -23,6 +23,16 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   text-decoration: none;
 }
 
+.#{$prefix}[aria-disabled='true'] {
+  outline: none;
+
+  * {
+    color: $text-disabled;
+    fill: $text-disabled;
+    pointer-events: none;
+  }
+}
+
 .#{$prefix}:hover,
 .#{$prefix}:active,
 .#{$prefix}:focus {
@@ -133,3 +143,15 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
 .#{$prefix}--custom-content {
   z-index: 2;
 }
+
+.#{$prefix}--loading-skeleton {
+  background: $layer-01;
+  block-size: 100%;
+  inline-size: 100%;
+
+  opacity: 0.7;
+}
+
+.#{$prefix}--loading-skeleton::before {
+  background: $layer-02;
+}