@carbon/ibm-products 2.74.0 → 2.75.0-rc.0

package/es/components/UserAvatar/UserAvatar.js

@@ -29,7 +29,7 @@ const componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-let UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     backgroundColor = 'order-1-cyan',
     className,
@@ -107,7 +107,6 @@ let UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-UserAvatar = pkg.checkComponentEnabled(UserAvatar, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.

package/es/components/UserProfileImage/UserProfileImage.d.ts

@@ -65,5 +65,5 @@ export type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  * @deprecated This component is deprecated.
  */
-export declare let UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
+export declare const UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/UserProfileImage/UserProfileImage.js

@@ -26,7 +26,7 @@ const componentName = 'UserProfileImage';
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  * @deprecated This component is deprecated.
  */
-let UserProfileImage = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const UserProfileImage = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   var _FillItem;
   const {
     backgroundColor,
@@ -116,7 +116,7 @@ UserProfileImage.deprecated = {
 };
 
 // Return a placeholder if not released and not enabled by feature flag
-UserProfileImage = pkg.checkComponentEnabled(UserProfileImage, componentName);
+
 UserProfileImage.displayName = componentName;
 UserProfileImage.propTypes = {
   /**

package/es/components/WebTerminal/WebTerminal.d.ts

@@ -48,5 +48,5 @@ export interface WebTerminalProps extends PropsWithChildren {
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
-export declare let WebTerminal: React.ForwardRefExoticComponent<WebTerminalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const WebTerminal: React.ForwardRefExoticComponent<WebTerminalProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/WebTerminal/WebTerminal.js

@@ -31,7 +31,7 @@ const defaults = {
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
-let WebTerminal = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const WebTerminal = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
 
@@ -148,7 +148,6 @@ let WebTerminal = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-WebTerminal = pkg.checkComponentEnabled(WebTerminal, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.

package/es/components/WebTerminal/WebTerminalContentWrapper.d.ts

@@ -11,4 +11,4 @@ export interface WebTerminalContentWrapperProps {
      */
     children: ReactNode;
 }
-export declare let WebTerminalContentWrapper: React.ForwardRefExoticComponent<WebTerminalContentWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export declare const WebTerminalContentWrapper: React.ForwardRefExoticComponent<WebTerminalContentWrapperProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/WebTerminal/WebTerminalContentWrapper.js

@@ -15,7 +15,7 @@ import { useWebTerminal } from './hooks/index.js';
 // The block part of our conventional BEM class names (blockClass__E--M).
 const componentName = 'WebTerminalContentWrapper';
 const blockClass = `${pkg.prefix}--web-terminal-content-wrapper`;
-let WebTerminalContentWrapper = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const WebTerminalContentWrapper = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
     children,
@@ -33,9 +33,6 @@ let WebTerminalContentWrapper = /*#__PURE__*/React__default.forwardRef((_ref, re
   }, rest), children);
 });
 
-// Return a placeholder if not released and not enabled by feature flag
-WebTerminalContentWrapper = pkg.checkComponentEnabled(WebTerminalContentWrapper, componentName);
-
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 WebTerminalContentWrapper.displayName = componentName;

package/es/components/WebTerminal/hooks/index.d.ts

@@ -12,6 +12,6 @@ interface WebTerminalProviderProps {
      */
     children: ReactNode | ReactNode[];
 }
-export declare let WebTerminalProvider: React.FC<WebTerminalProviderProps>;
+export declare const WebTerminalProvider: React.FC<WebTerminalProviderProps>;
 export declare const useWebTerminal: () => WebTerminalContextType;
 export {};

package/es/components/WebTerminal/hooks/index.js

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useState, useCallback, createContext, useContext } from 'react';
+import React__default, { useContext, createContext, useState, useCallback } from 'react';
 import PropTypes from '../../../_virtual/index.js';
-import { pkg } from '../../../settings.js';
 
 // Copyright IBM Corp. 2022, 2022
 //
@@ -16,8 +15,7 @@ import { pkg } from '../../../settings.js';
 //
 
 const WebTerminalContext = /*#__PURE__*/createContext({});
-const componentName = 'WebTerminalProvider';
-let WebTerminalProvider = _ref => {
+const WebTerminalProvider = _ref => {
   let {
     children
   } = _ref;
@@ -34,9 +32,6 @@ let WebTerminalProvider = _ref => {
     }
   }, children);
 };
-
-// Return a placeholder if not released and not enabled by feature flag
-WebTerminalProvider = pkg.checkComponentEnabled(WebTerminalProvider, componentName);
 WebTerminalProvider.propTypes = {
   /**
    * Provide your own terminal component as children to show up in the web terminal

package/es/components/index.d.ts

@@ -1,74 +1,84 @@
 import '../feature-flags';
+/**
+ * Stable components
+ */
 export * from './AboutModal';
+export { ActionBar } from './ActionBar';
 export * from './APIKeyModal';
 export * from './Cascade';
-export * from './ComboButton';
+export * from './Checklist';
 export * from './CreateFullPage';
 export * from './CreateModal';
 export * from './CreateSidePanel';
 export * from './CreateTearsheet';
 export * from './CreateTearsheetNarrow';
+export * from './EditSidePanel';
+export * from './EditInPlace';
 export * from './EmptyStates';
 export * from './ExportModal';
 export * from './ExpressiveCard';
-export * from './HTTPErrors';
+export * from './FullPageError';
 export * from './ImportModal';
+export * from './InterstitialScreen';
 export * from './MultiAddSelect';
 export * from './NotificationsPanel';
+export * from './OptionsTile';
 export * from './PageHeader';
 export * from './ProductiveCard';
 export * from './RemoveModal';
 export * from './Saving';
+export * from './ScrollGradient';
 export * from './SidePanel';
 export * from './SingleAddSelect';
 export * from './StatusIcon';
+export * from './StringFormatter';
+export * from './TagOverflow';
 export * from './TagSet';
 export * from './Tearsheet';
-export * from './Toolbar';
-export * from './UserProfileImage';
+export * from './TruncatedText';
+export * from './UserAvatar';
 export * from './WebTerminal';
-export * from './EditSidePanel';
-export * from './OptionsTile';
-export * from './EditInPlace';
-export * from './DataSpreadsheet';
+/**
+ * Non-stable components
+ * draft | previewCandidate | preview
+ */
+export * as preview__Coachmark from './Coachmark/next/Coachmark';
+export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags, } from './FeatureFlags';
+export * as preview__PageHeader from './PageHeader/next/PageHeader';
+export * as previewCandidate__BigNumber from './BigNumber';
+export { Coachmark as previewCandidate__Coachmark, BEACON_KIND, COACHMARK_OVERLAY_KIND, COACHMARK_ALIGNMENT, useCoachmark, type CoachmarkProps, } from './Coachmark';
+export { CoachmarkBeacon as previewCandidate__CoachmarkBeacon, type CoachmarkBeaconProps, } from './CoachmarkBeacon';
+export { CoachmarkButton as previewCandidate__CoachmarkButton, type CoachmarkButtonProps, } from './CoachmarkButton';
+export { CoachmarkFixed as previewCandidate__CoachmarkFixed, type CoachmarkFixedProps, } from './CoachmarkFixed';
+export { CoachmarkOverlayElement as previewCandidate__CoachmarkOverlayElement, type CoachmarkOverlayElementProps, } from './CoachmarkOverlayElement';
+export { CoachmarkOverlayElements as previewCandidate__CoachmarkOverlayElements, type CoachmarkOverlayElementsProps, } from './CoachmarkOverlayElements';
+export { CoachmarkStack as previewCandidate__CoachmarkStack } from './CoachmarkStack';
+export * as previewCandidate__ConditionBuilder from './ConditionBuilder';
+export * as previewCandidate__DataSpreadsheet from './DataSpreadsheet';
+export * as previewCandidate__DelimitedList from './DelimitedList';
+export * as previewCandidate__Decorator from './Decorator';
+export * as previewCandidate__GetStartedCard from './GetStartedCard';
+export { Guidebanner as previewCandidate__Guidebanner, GuidebannerElement as previewCandidate__GuidebannerElement, GuidebannerElementButton as previewCandidate__GuidebannerElementButton, GuidebannerElementLink as previewCandidate__GuidebannerElementLink, type GuidebannerProps, type GuidebannerElementProps, type GuidebannerElementButtonProps, type GuidebannerElementLinkProps, } from './Guidebanner';
+export { InlineTip as previewCandidate__InlineTip, InlineTipButton as previewCandidate__InlineTipButton, InlineTipLink as previewCandidate__InlineTipLink, type InlineTipProps, type InlineTipButtonProps, type InlineTipLinkProps, } from './InlineTip';
+export * as previewCandidate__NonLinearReading from './NonLinearReading';
+export * as previewCandidate__SearchBar from './SearchBar';
+export { Toolbar as previewCandidate__Toolbar, ToolbarButton as previewCandidate__ToolbarButton, ToolbarGroup as previewCandidate__ToolbarGroup, type ToolbarProps, type ToolbarButtonProps, type ToolbarGroupProps, } from './Toolbar';
+export * as previewCandidate__TruncatedList from './TruncatedList';
+/**
+ * Deprecated
+ */
+export * from './ComboButton';
 export * from './Datagrid';
-export * from './EditTearsheet';
-export * from './EditTearsheetNarrow';
-export * from './EditFullPage';
-export * from './EditUpdateCards';
-export * from './Checklist';
-export { Coachmark } from './Coachmark';
-export { Coachmark as preview__Coachmark } from './Coachmark/next/Coachmark';
-export * from './CoachmarkBeacon';
-export * from './CoachmarkButton';
-export * from './CoachmarkFixed';
-export * from './CoachmarkOverlayElement';
-export * from './CoachmarkOverlayElements';
-export * from './CoachmarkStack';
-export * from './Guidebanner';
-export * from './InlineTip';
-export * from './NonLinearReading';
-export * from './BigNumber';
-export * from './TruncatedList';
-export * from './TruncatedText';
-export * from './InterstitialScreen';
-export * from './DelimitedList';
-export * from './Decorator';
 export * from './DecoratorLink';
-export * from './DecoratorSingleButton';
 export * from './DecoratorDualButton';
+export * from './DecoratorSingleButton';
 export * from './DescriptionList';
-export * from './FullPageError';
-export * from './SearchBar';
+export * from './EditFullPage';
+export * from './EditTearsheet';
+export * from './EditTearsheetNarrow';
+export * from './EditUpdateCards';
+export * from './FilterPanel';
+export * from './HTTPErrors';
 export * from './Nav';
-export * from './StringFormatter';
-export * from './UserAvatar';
-export * from './ScrollGradient';
 export * from './StatusIndicator';
-export * from './TagOverflow';
-export { ActionBar } from './ActionBar';
-export * from './FilterPanel';
-export * from './ConditionBuilder';
-export * from './GetStartedCard';
-export * as preview__PageHeader from './PageHeader/next/PageHeader';
-export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, } from './FeatureFlags';
+export * from './UserProfileImage';

package/es/global/js/utils/carousel/carousel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { InitCarousel, Config } from './types';
+/**
+ * Initializes a carousel with the given configuration.
+ * @param carouselContainer - The HTMLElement representing the carousel container.
+ * @param config - Optional configuration object.
+ * @returns An object containing methods to control the carousel.
+ */
+export declare const initCarousel: (carouselContainer: HTMLElement, config?: Config) => InitCarousel;

package/es/global/js/utils/carousel/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export * from './carousel';
+export * from './types';

package/es/global/js/utils/carousel/swipeEvents.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare const registerSwipeEvents: (carousel: HTMLElement, next: () => void, prev: () => void, destroy: boolean) => void;

package/es/global/js/utils/carousel/types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @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.
+ */
+interface CarouselStackHistory {
+    id: number;
+    elem: HTMLLIElement;
+}
+type CarouselResponse = {
+    currentIndex: number;
+    lastIndex: number;
+    totalViews: number;
+    historyStack: CarouselStackHistory[];
+};
+type ActiveItem = {
+    index: number;
+    item: HTMLElement | null;
+};
+export type Config = {
+    onViewChangeStart?: (args: CarouselResponse) => void;
+    onViewChangeEnd?: (args: CarouselResponse) => void;
+    excludeSwipeSupport?: boolean;
+};
+interface InitCarousel {
+    next: () => void;
+    prev: () => void;
+    reset: () => void;
+    goToIndex: (index: number) => void;
+    getActiveItem: () => ActiveItem;
+    destroyEvents: (() => void) | null;
+    allViews: Record<number, HTMLElement | null>;
+}
+export type { CarouselStackHistory, CarouselResponse, InitCarousel };

package/es/global/js/utils/makeDraggable/makeDraggable.d.ts

@@ -5,15 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 interface DraggableProps {
+    /**
+     * HTML element to move.
+     */
     el: HTMLElement;
+    /**
+     * HTML element to initiate the drag (e.g., header).
+     */
     dragHandle?: HTMLElement;
+    /**
+     * HTML element to focus on drag for keyboard interaction (e.g., Drag Icon).
+     */
     focusableDragHandle?: HTMLElement;
+    /**
+     * Pixel value that defines the distance to move when dragging with arrow
+     * keys.
+     */
     dragStep?: number;
+    /**
+     * Pixel value that defines the distance to move when dragging with
+     * shift+arrow keys.
+     */
     shiftDragStep?: number;
 }
 /**
  * Makes a given element draggable using a handle element.
  *@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
  */
-export declare function makeDraggable({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep, }: DraggableProps): void;
+export declare const makeDraggable: ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep, }: DraggableProps) => {
+    cleanup: () => void;
+};
 export {};

package/es/global/js/utils/makeDraggable/makeDraggable.js

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable jsdoc/check-param-names */
+
 /**
  * Makes a given element draggable using a handle element.
  *@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
  */
-
-function makeDraggable(_ref) {
+const makeDraggable = _ref => {
   let {
     el,
     dragHandle,
@@ -18,28 +19,23 @@ function makeDraggable(_ref) {
     dragStep,
     shiftDragStep
   } = _ref;
-  const computedStyle = window.getComputedStyle(el);
   if (dragHandle) {
     dragHandle.style.cursor = 'move';
     el.style.cursor = 'default';
   } else {
     el.style.cursor = 'move';
   }
-  const position = computedStyle.position;
-  if (position !== 'absolute' && position !== 'relative' && position !== 'fixed') {
-    el.style.position = 'relative';
-  }
   let isDragging = false;
   let offsetX = 0;
   let offsetY = 0;
-  function dispatch(type) {
-    let detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    el.dispatchEvent(new CustomEvent(type, {
+  const dispatch = (type, detail) => {
+    const eventInit = {
       detail,
       bubbles: true
-    }));
-  }
-  function onKeyDown(e) {
+    };
+    el.dispatchEvent(new CustomEvent(type, eventInit));
+  };
+  const onKeyDown = e => {
     if (e.key === 'Enter') {
       isDragging = !isDragging;
     }
@@ -74,9 +70,13 @@ function makeDraggable(_ref) {
         el.style.top = `${el.offsetTop + distance}px`;
         break;
     }
-  }
-  function onMouseDown(e) {
-    const isTargetInHandle = dragHandle ? dragHandle.contains(e.target) : el.contains(e.target);
+  };
+  const onMouseDown = e => {
+    const target = e.target;
+    if (!(target instanceof Node)) {
+      return;
+    }
+    const isTargetInHandle = dragHandle ? dragHandle.contains(target) : el.contains(target);
     if (!isTargetInHandle) {
       return;
     }
@@ -90,15 +90,15 @@ function makeDraggable(_ref) {
     document.addEventListener('mouseup', onMouseUp, {
       once: true
     });
-  }
-  function onMouseMove(e) {
+  };
+  const onMouseMove = e => {
     if (!isDragging) {
       return;
     }
     el.style.left = `${e.clientX - offsetX}px`;
     el.style.top = `${e.clientY - offsetY}px`;
-  }
-  function onMouseUp() {
+  };
+  const onMouseUp = () => {
     if (!isDragging) {
       return;
     }
@@ -107,13 +107,26 @@ function makeDraggable(_ref) {
       mouse: true
     });
     document.removeEventListener('mousemove', onMouseMove);
-  }
+  };
   if (dragHandle) {
     dragHandle.addEventListener('mousedown', onMouseDown);
   } else {
     el.addEventListener('mousedown', onMouseDown);
   }
   focusableDragHandle?.addEventListener('keydown', onKeyDown);
-}
+  const draggableCleanup = () => {
+    if (dragHandle) {
+      dragHandle.removeEventListener('mousedown', onMouseDown);
+    } else {
+      el.removeEventListener('mousedown', onMouseDown);
+    }
+    focusableDragHandle?.removeEventListener('keydown', onKeyDown);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+  return {
+    cleanup: draggableCleanup
+  };
+};
 
 export { makeDraggable };

package/es/global/js/utils/makeDraggable/makeDraggable.stories.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 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.