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

package/lib/components/TruncatedList/index.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2020, 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 strict';
+
+var TruncatedList = require('./TruncatedList.js');
+
+
+
+exports.TruncatedList = TruncatedList.TruncatedList;

package/lib/components/UserAvatar/UserAvatar.d.ts

@@ -56,5 +56,5 @@ type UserAvatarBaseProps = {
     tooltipText?: string;
 };
 type UserAvatarProps = UserAvatarBaseProps & ImageProps;
-export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/UserAvatar/UserAvatar.js

@@ -31,7 +31,7 @@ const componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-exports.UserAvatar = /*#__PURE__*/React.forwardRef((props, ref) => {
+const UserAvatar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     backgroundColor = 'order-1-cyan',
     className,
@@ -109,16 +109,15 @@ exports.UserAvatar = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-exports.UserAvatar = settings.pkg.checkComponentEnabled(exports.UserAvatar, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
-exports.UserAvatar.displayName = componentName;
+UserAvatar.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.UserAvatar.propTypes = {
+UserAvatar.propTypes = {
   /**
    * Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
    * For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
@@ -161,3 +160,5 @@ exports.UserAvatar.propTypes = {
   tooltipText: index.default.string
   /* TODO: add types and DocGen for all props. */
 };
+
+exports.UserAvatar = UserAvatar;

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

@@ -28,7 +28,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.
  */
-exports.UserProfileImage = /*#__PURE__*/React.forwardRef((props, ref) => {
+const UserProfileImage = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _FillItem;
   const {
     backgroundColor,
@@ -112,15 +112,15 @@ exports.UserProfileImage = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 
 /**@ts-ignore*/
-exports.UserProfileImage.deprecated = {
+UserProfileImage.deprecated = {
   level: 'warn',
   details: `Please replace ${componentName} with UserAvatar`
 };
 
 // Return a placeholder if not released and not enabled by feature flag
-exports.UserProfileImage = settings.pkg.checkComponentEnabled(exports.UserProfileImage, componentName);
-exports.UserProfileImage.displayName = componentName;
-exports.UserProfileImage.propTypes = {
+
+UserProfileImage.displayName = componentName;
+UserProfileImage.propTypes = {
   /**
    * The background color passed should match one of the background colors in the library documentation:
    * https://pages.github.ibm.com/carbon/ibm-products/patterns/user-profile-images/
@@ -169,3 +169,5 @@ exports.UserProfileImage.propTypes = {
    */
   tooltipText: index.default.string
 };
+
+exports.UserProfileImage = UserProfileImage;

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

@@ -33,7 +33,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.
  */
-exports.WebTerminal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const WebTerminal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
 
@@ -150,16 +150,15 @@ exports.WebTerminal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-exports.WebTerminal = settings.pkg.checkComponentEnabled(exports.WebTerminal, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
-exports.WebTerminal.displayName = componentName;
+WebTerminal.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.WebTerminal.propTypes = {
+WebTerminal.propTypes = {
   /**
    * An array of actions to be displayed in the web terminal header bar
    */
@@ -201,3 +200,5 @@ exports.WebTerminal.propTypes = {
    */
   webTerminalAriaLabel: index.default.string
 };
+
+exports.WebTerminal = WebTerminal;

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

@@ -17,7 +17,7 @@ var index$1 = require('./hooks/index.js');
 // The block part of our conventional BEM class names (blockClass__E--M).
 const componentName = 'WebTerminalContentWrapper';
 const blockClass = `${settings.pkg.prefix}--web-terminal-content-wrapper`;
-exports.WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
     children,
@@ -35,19 +35,18 @@ exports.WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) =>
   }, rest), children);
 });
 
-// Return a placeholder if not released and not enabled by feature flag
-exports.WebTerminalContentWrapper = settings.pkg.checkComponentEnabled(exports.WebTerminalContentWrapper, componentName);
-
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
-exports.WebTerminalContentWrapper.displayName = componentName;
+WebTerminalContentWrapper.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.WebTerminalContentWrapper.propTypes = {
+WebTerminalContentWrapper.propTypes = {
   /**
    * Pass in content as children.
    */
   children: index.default.oneOfType([index.default.arrayOf(index.default.node), index.default.node]).isRequired
 };
+
+exports.WebTerminalContentWrapper = WebTerminalContentWrapper;

package/lib/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/lib/components/WebTerminal/hooks/index.js

@@ -9,7 +9,6 @@
 
 var React = require('react');
 var index = require('../../../_virtual/index.js');
-var settings = require('../../../settings.js');
 
 // Copyright IBM Corp. 2022, 2022
 //
@@ -18,8 +17,7 @@ var settings = require('../../../settings.js');
 //
 
 const WebTerminalContext = /*#__PURE__*/React.createContext({});
-const componentName = 'WebTerminalProvider';
-exports.WebTerminalProvider = _ref => {
+const WebTerminalProvider = _ref => {
   let {
     children
   } = _ref;
@@ -36,10 +34,7 @@ exports.WebTerminalProvider = _ref => {
     }
   }, children);
 };
-
-// Return a placeholder if not released and not enabled by feature flag
-exports.WebTerminalProvider = settings.pkg.checkComponentEnabled(exports.WebTerminalProvider, componentName);
-exports.WebTerminalProvider.propTypes = {
+WebTerminalProvider.propTypes = {
   /**
    * Provide your own terminal component as children to show up in the web terminal
    */
@@ -52,4 +47,5 @@ const useWebTerminal = () => {
 };
 
 exports.WebTerminalContext = WebTerminalContext;
+exports.WebTerminalProvider = WebTerminalProvider;
 exports.useWebTerminal = useWebTerminal;

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/global/js/utils/makeDraggable/makeDraggable.js

@@ -7,12 +7,13 @@
 
 'use strict';
 
+/* 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,
@@ -20,28 +21,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;
     }
@@ -76,9 +72,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;
     }
@@ -92,15 +92,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;
     }
@@ -109,13 +109,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
+  };
+};
 
 exports.makeDraggable = makeDraggable;

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