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

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -58,7 +58,9 @@ const AnimatedHeader = ({
       animRef.current.destroy();
       animRef.current = null;
     }
-    if (!animationContainer.current || !headerAnimation) return;
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
     const animation = lottie.loadAnimation({
       container: animationContainer.current,
       animationData: headerAnimation,
@@ -183,7 +185,7 @@ const AnimatedHeader = ({
     const legacyId = tile.id; // old configs
     const resolvedTileId = tileId ?? legacyId;
     const key = resolvedTileId ?? `tile-${index}`;
-    const hasAction = tile.href || tile.onClick === 'function';
+    const hasAction = tile.href || typeof tile.onClick === 'function';
     return /*#__PURE__*/React.createElement(BaseTile, _extends({
       key: key,
       tileId: resolvedTileId

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

@@ -7,9 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import type { BaseTileProps } from '../../components/Tiles/BaseTile/BaseTile';
-export type Tile = Omit<BaseTileProps, 'id'> & {
-    tileId: string;
-};
+export type Tile = BaseTileProps;
 export interface TileGroup {
     id: number;
     label: string;

package/es/components/ContentSwitcherSelector/ContentSwitcherSelector.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { SkeletonPlaceholder, ContentSwitcher, Switch } from '@carbon/react';
 import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
 
@@ -17,11 +17,8 @@ const ContentSwitcherSelector = ({
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__content-switcher`;
-  if (!contentSwitcherConfig) return null;
-  if (isLoading || contentSwitcherConfig.isLoading) {
-    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
-      className: `${blockClass}-skeleton`
-    });
+  if (!contentSwitcherConfig) {
+    return null;
   }
   const {
     items = [],
@@ -34,16 +31,18 @@ const ContentSwitcherSelector = ({
   } = contentSwitcherConfig;
   const count = visibleCount === 3 ? 3 : 2;
   const visibleItems = items.slice(0, count);
+  const selectedIndexSafe = Math.min(Math.max(selectedIndex, 0), visibleItems.length - 1);
+  if (isLoading || contentSwitcherConfig.isLoading) {
+    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
+      className: `${blockClass}-skeleton`
+    });
+  }
   if (visibleItems.length < 2 || visibleItems.length > 3) {
     if (process.env.NODE_ENV !== 'production') {
       console.warn('[ContentSwitcherSelector] contentSwitcherConfig.items must contain 2 or 3 items.');
     }
     return null;
   }
-  const selectedIndexSafe = useMemo(() => {
-    const idx = typeof selectedIndex === 'number' ? selectedIndex : 0;
-    return Math.min(Math.max(idx, 0), visibleItems.length - 1);
-  }, [selectedIndex, visibleItems.length]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--container`,
     "data-expanded": headerExpanded

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

@@ -25,10 +25,8 @@ export type TasksControllerProps = {
     tasksControllerConfig?: TasksControllerConfig | null;
     isLoading?: boolean;
     allTileGroups?: TileGroup[];
-    selectedTileGroup?: TileGroup | null;
-    setSelectedTileGroup?: (group: TileGroup | {
-        selectedItem: TileGroup;
-    }) => void;
+    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

@@ -33,24 +33,11 @@ const TasksController = ({
     ...dropdownOverrideProps
   } = tasksControllerConfig?.dropdown?.propsOverrides || {};
 
-  /** 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}` : ''}`,
@@ -74,6 +61,23 @@ const TasksController = ({
     };
   }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange, tasksControllerConfig?.dropdown?.label, tasksControllerConfig?.dropdown?.ariaLabel]);
 
+  /** 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);
+  }
+
   /** Dropdown mode */
   if (tasksControllerConfig?.type === 'dropdown' && dropdownProps) {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type AIPromptTileProps = {
-    tileId: string | null;
+    variant: 'aiPrompt';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     disabledTaskLabel?: string | null;
@@ -20,5 +21,5 @@ export type AIPromptTileProps = {
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type AITileProps = {
-    tileId: string | null;
+    variant: 'ai';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -21,6 +22,6 @@ export type AITileProps = {
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const AITile: React.FC<AITileProps>;
 export default AITile;

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

@@ -12,14 +12,5 @@ import { type AIPromptTileProps } from '../AIPromptTile/AIPromptTile';
 import { type GlassTileProps } from '../GlassTile/GlassTile';
 /** Base Tile router */
 export type TileVariant = 'glass' | 'aiPrompt' | 'ai';
-export type BaseTileProps = ({
-    variant?: 'glass';
-} & GlassTileProps) | ({
-    variant: 'aiPrompt';
-} & AIPromptTileProps) | (({
-    variant: 'ai';
-} & AITileProps) & {
-    id?: string;
-    tileId?: string | null;
-});
+export type BaseTileProps = GlassTileProps | AIPromptTileProps | AITileProps;
 export declare const BaseTile: React.FC<BaseTileProps>;

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

@@ -16,7 +16,7 @@ function inferVariant(props) {
   if (props.variant) {
     return props.variant;
   }
-  if (props.id === 'ai-tile') {
+  if (props.tileId === 'ai-tile') {
     return 'aiPrompt';
   }
   return 'glass';

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type GlassTileProps = {
-    tileId: string | null;
+    variant?: 'glass';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -21,5 +22,5 @@ export type GlassTileProps = {
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const GlassTile: React.FC<GlassTileProps>;

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -62,7 +62,9 @@ const AnimatedHeader = ({
       animRef.current.destroy();
       animRef.current = null;
     }
-    if (!animationContainer.current || !headerAnimation) return;
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
     const animation = lottie.default.loadAnimation({
       container: animationContainer.current,
       animationData: headerAnimation,
@@ -187,7 +189,7 @@ const AnimatedHeader = ({
     const legacyId = tile.id; // old configs
     const resolvedTileId = tileId ?? legacyId;
     const key = resolvedTileId ?? `tile-${index}`;
-    const hasAction = tile.href || tile.onClick === 'function';
+    const hasAction = tile.href || typeof tile.onClick === 'function';
     return /*#__PURE__*/React.createElement(BaseTile.BaseTile, _rollupPluginBabelHelpers.extends({
       key: key,
       tileId: resolvedTileId

package/lib/components/AnimatedHeader/types.d.ts

@@ -7,9 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import type { BaseTileProps } from '../../components/Tiles/BaseTile/BaseTile';
-export type Tile = Omit<BaseTileProps, 'id'> & {
-    tileId: string;
-};
+export type Tile = BaseTileProps;
 export interface TileGroup {
     id: number;
     label: string;

package/lib/components/ContentSwitcherSelector/ContentSwitcherSelector.js

@@ -21,11 +21,8 @@ const ContentSwitcherSelector = ({
 }) => {
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__content-switcher`;
-  if (!contentSwitcherConfig) return null;
-  if (isLoading || contentSwitcherConfig.isLoading) {
-    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
-      className: `${blockClass}-skeleton`
-    });
+  if (!contentSwitcherConfig) {
+    return null;
   }
   const {
     items = [],
@@ -38,16 +35,18 @@ const ContentSwitcherSelector = ({
   } = contentSwitcherConfig;
   const count = visibleCount === 3 ? 3 : 2;
   const visibleItems = items.slice(0, count);
+  const selectedIndexSafe = Math.min(Math.max(selectedIndex, 0), visibleItems.length - 1);
+  if (isLoading || contentSwitcherConfig.isLoading) {
+    return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
+      className: `${blockClass}-skeleton`
+    });
+  }
   if (visibleItems.length < 2 || visibleItems.length > 3) {
     if (process.env.NODE_ENV !== 'production') {
       console.warn('[ContentSwitcherSelector] contentSwitcherConfig.items must contain 2 or 3 items.');
     }
     return null;
   }
-  const selectedIndexSafe = React.useMemo(() => {
-    const idx = typeof selectedIndex === 'number' ? selectedIndex : 0;
-    return Math.min(Math.max(idx, 0), visibleItems.length - 1);
-  }, [selectedIndex, visibleItems.length]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--container`,
     "data-expanded": headerExpanded

package/lib/components/TasksController/TasksController.d.ts

@@ -25,10 +25,8 @@ export type TasksControllerProps = {
     tasksControllerConfig?: TasksControllerConfig | null;
     isLoading?: boolean;
     allTileGroups?: TileGroup[];
-    selectedTileGroup?: TileGroup | null;
-    setSelectedTileGroup?: (group: TileGroup | {
-        selectedItem: TileGroup;
-    }) => void;
+    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/lib/components/TasksController/TasksController.js

@@ -37,24 +37,11 @@ const TasksController = ({
     ...dropdownOverrideProps
   } = tasksControllerConfig?.dropdown?.propsOverrides || {};
 
-  /** 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}` : ''}`,
@@ -78,6 +65,23 @@ const TasksController = ({
     };
   }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange, tasksControllerConfig?.dropdown?.label, tasksControllerConfig?.dropdown?.ariaLabel]);
 
+  /** 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);
+  }
+
   /** Dropdown mode */
   if (tasksControllerConfig?.type === 'dropdown' && dropdownProps) {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type AIPromptTileProps = {
-    tileId: string | null;
+    variant: 'aiPrompt';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     disabledTaskLabel?: string | null;
@@ -20,5 +21,5 @@ export type AIPromptTileProps = {
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type AITileProps = {
-    tileId: string | null;
+    variant: 'ai';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -21,6 +22,6 @@ export type AITileProps = {
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const AITile: React.FC<AITileProps>;
 export default AITile;

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

@@ -12,14 +12,5 @@ import { type AIPromptTileProps } from '../AIPromptTile/AIPromptTile';
 import { type GlassTileProps } from '../GlassTile/GlassTile';
 /** Base Tile router */
 export type TileVariant = 'glass' | 'aiPrompt' | 'ai';
-export type BaseTileProps = ({
-    variant?: 'glass';
-} & GlassTileProps) | ({
-    variant: 'aiPrompt';
-} & AIPromptTileProps) | (({
-    variant: 'ai';
-} & AITileProps) & {
-    id?: string;
-    tileId?: string | null;
-});
+export type BaseTileProps = GlassTileProps | AIPromptTileProps | AITileProps;
 export declare const BaseTile: React.FC<BaseTileProps>;

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

@@ -18,7 +18,7 @@ function inferVariant(props) {
   if (props.variant) {
     return props.variant;
   }
-  if (props.id === 'ai-tile') {
+  if (props.tileId === 'ai-tile') {
     return 'aiPrompt';
   }
   return 'glass';

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

@@ -8,7 +8,8 @@
  */
 import React, { ElementType } from 'react';
 export type GlassTileProps = {
-    tileId: string | null;
+    variant?: 'glass';
+    tileId: string;
     href?: string | null;
     title?: string | null;
     subtitle?: string | null;
@@ -21,5 +22,5 @@ export type GlassTileProps = {
     open?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-} & Record<string, unknown>;
+};
 export declare const GlassTile: React.FC<GlassTileProps>;

package/package.json

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