@carbon/ibm-products 2.71.0 → 2.72.0-rc.0

package/lib/components/PageHeader/next/utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+/**
+ * ----------
+ * Utilities
+ * ----------
+ */
+export declare const getHeaderOffset: (el: HTMLElement) => number;
+/**
+ * Walks up the parent nodes to identify the first scrollable ancestor
+ *
+ * @param {HTMLElement} target
+ * @returns {HTMLElement}
+ */
+export declare const scrollableAncestor: (target: HTMLElement) => ParentNode | null;

package/lib/components/PageHeader/next/utils.js

@@ -0,0 +1,71 @@
+/**
+ * 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';
+
+/**
+ * ----------
+ * Utilities
+ * ----------
+ */
+
+const getHeaderOffset = el => {
+  const scrollableContainer = scrollableAncestor(el);
+  const scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
+  const offsetMeasuringTop = el ? el.getBoundingClientRect().top : 0;
+  const totalHeaderOffset = offsetMeasuringTop !== 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
+  return totalHeaderOffset;
+};
+const windowExists = typeof window !== `undefined`;
+
+/**
+ * Determines if the given target is scrollable
+ *
+ * @param {HTMLElement} target
+ * @returns {boolean}
+ */
+const scrollable = target => {
+  const style = window.getComputedStyle(target);
+  return /(auto|scroll|hidden)/.test(style.overflow);
+};
+
+/**
+ * Recursively looks for the scrollable ancestor
+ */
+const scrollableAncestorInner = target => {
+  if (target.parentNode && target.parentNode !== document) {
+    if (scrollable(target.parentNode)) {
+      return target.parentNode;
+    } else {
+      return scrollableAncestorInner(target.parentNode);
+    }
+  } else {
+    return document.scrollingElement;
+  }
+};
+
+/**
+ * Walks up the parent nodes to identify the first scrollable ancestor
+ *
+ * @param {HTMLElement} target
+ * @returns {HTMLElement}
+ */
+const scrollableAncestor = target => {
+  if (!windowExists || !target) {
+    return null;
+  }
+
+  // based on https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
+  const style = window.getComputedStyle(target);
+  if (!target || !style || style.position === 'fixed') {
+    return document.scrollingElement;
+  }
+  return scrollableAncestorInner(target);
+};
+
+exports.getHeaderOffset = getHeaderOffset;
+exports.scrollableAncestor = scrollableAncestor;

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -19,6 +19,7 @@ const componentName = 'ProductiveCard';
 exports.ProductiveCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     actionsPlacement = 'top',
+    children,
     ...rest
   } = _ref;
   const validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
@@ -26,7 +27,7 @@ exports.ProductiveCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     actionsPlacement,
     ref,
     productive: true
-  }, devtools.getDevtoolsProps(componentName)));
+  }, devtools.getDevtoolsProps(componentName)), children);
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -140,8 +140,7 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
     onScroll: onScroll,
     ref: setRefs,
-    className: cx(`${blockClass}__content`, scrollElementClassName),
-    tabIndex: 0
+    className: cx(`${blockClass}__content`, scrollElementClassName)
   }, /*#__PURE__*/React.createElement("span", {
     ref: intersectionStartRef,
     "data-start-vertical": true

package/lib/components/SidePanel/SidePanel.d.ts

@@ -36,6 +36,10 @@ type SidePanelBaseProps = {
      * Sets the close button icon description
      */
     closeIconDescription?: string;
+    /**
+     * Sets the close button tooltip alignment
+     */
+    closeIconTooltipAlignment?: string;
     /**
      * Determines whether the side panel should render the condensed version (affects action buttons primarily)
      */

package/lib/components/SidePanel/SidePanel.js

@@ -34,6 +34,7 @@ const componentName = 'SidePanel';
 const defaults = {
   animateTitle: true,
   closeIconDescription: 'Close',
+  closeIconTooltipAlignment: 'left',
   currentStep: 0,
   hideCloseButton: false,
   navigationBackIconDescription: 'Back',
@@ -53,6 +54,7 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     className,
     closeIconDescription = defaults.closeIconDescription,
+    closeIconTooltipAlignment = defaults.closeIconTooltipAlignment,
     condensedActions,
     currentStep = defaults.currentStep,
     decorator,
@@ -467,9 +469,9 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClick: onRequestClose,
       onKeyDown: slideIn ? undefined : handleEscapeKey,
       ref: closeRef,
-      align: "left"
+      align: closeIconTooltipAlignment
     }, /*#__PURE__*/React.createElement(icons.Close, {
-      size: 20,
+      size: 16,
       "aria-hidden": "true",
       tabIndex: "-1",
       className: `${blockClass}--btn__icon`
@@ -629,6 +631,10 @@ SidePanel.propTypes = {
    * Sets the close button icon description
    */
   closeIconDescription: index.default.string,
+  /**
+   * Sets the close button tooltip alignment
+   */
+  closeIconTooltipAlignment: index.default.string,
   /**
    * Determines whether the side panel should render the condensed version (affects action buttons primarily)
    */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -260,7 +260,7 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${bc}__container`, ...selectorsFloatingMenus],
+      selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${bc}__container`, `.${carbonPrefix}--menu`, ...selectorsFloatingMenus],
       size: "sm"
     }), includeHeader && /*#__PURE__*/React.createElement(react.ModalHeader, {
       className: cx(`${bc}__header`, {
@@ -300,7 +300,8 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       neverRender: influencerPosition === 'right',
       element: SectionLevel3
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      element: react.Layer
+      element: react.Layer,
+      className: `${bc}__layer`
     }, influencer)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__right`
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
@@ -310,8 +311,9 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       className: `${bc}__content`,
       alwaysRender: !!(influencer && influencerPosition === 'right'),
       element: SectionLevel3
-    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      element: !wide ? react.Layer : undefined
+    }, wide ? children : /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      element: react.Layer,
+      className: `${bc}__layer`
     }, children)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: cx({
         [`${bc}__influencer`]: true,
@@ -320,7 +322,8 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       neverRender: influencerPosition !== 'right',
       element: SectionLevel3
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      element: react.Layer
+      element: react.Layer,
+      className: `${bc}__layer`
     }, influencer))), includeActions && /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__button-container`
     }, /*#__PURE__*/React.createElement(ActionSet.ActionSet, {

package/lib/components/TruncatedText/TruncatedText.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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 React from 'react';
+import { PopoverAlignment } from '@carbon/react';
+interface TruncatedTextProps {
+    /**
+     * Specify how the tooltip should align with the content in tooltip variant. Refer to Carbon tooltip docs for additional information.
+     */
+    align?: PopoverAlignment;
+    /**
+     * Specify whether a auto align functionality should be applied in tooltip variant. Refer to Carbon tooltip docs for additional information.
+     */
+    autoAlign?: boolean;
+    /**
+     * Optional class.
+     */
+    className?: string;
+    /**
+     * The label on the collapse button.
+     */
+    collapseLabel?: string;
+    /**
+     * The label on expand button.
+     */
+    expandLabel?: string;
+    /**
+     * Unique identifier for the element.
+     */
+    id: string;
+    /**
+     * The maximum number of lines to display before truncation.
+     */
+    lines?: number;
+    /**
+     * The method to display the full text when truncated. Options are "tooltip" or "expand". if not passed, the text would just be truncated with ellipsis.
+     */
+    type?: 'tooltip' | 'expand';
+    /**
+     * The string value to be truncated.
+     */
+    value?: string;
+}
+export declare let TruncatedText: React.ForwardRefExoticComponent<TruncatedTextProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/TruncatedText/TruncatedText.js

@@ -0,0 +1,86 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var settings = require('../../settings.js');
+var devtools = require('../../global/js/utils/devtools.js');
+var useTruncatedText = require('./useTruncatedText.js');
+
+const blockClass = `${settings.pkg.prefix}--truncated-text`;
+const componentName = 'TruncatedText';
+exports.TruncatedText = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    align = 'top',
+    autoAlign = false,
+    className,
+    collapseLabel,
+    expandLabel,
+    id = `${blockClass}-default-id`,
+    lines = 2,
+    value,
+    type = 'tooltip',
+    ...rest
+  } = props;
+  const [expanded, setExpanded] = React.useState(false);
+  const {
+    ref: contentRef,
+    truncated
+  } = useTruncatedText.default({
+    lines,
+    value,
+    expanded
+  });
+  const textContentStyles = {
+    WebkitLineClamp: type === 'expand' && !expanded || type === 'tooltip' ? lines : 'none'
+  };
+  const textContentClasses = cx(`${blockClass}__text-content`, {
+    [`${blockClass}__text-content--expanded`]: expanded
+  });
+  const handleExpand = () => {
+    setExpanded(!expanded);
+  };
+  const handleExpandKey = evt => {
+    const {
+      key
+    } = evt;
+    if (key === 'Enter' || key === ' ') {
+      handleExpand();
+    }
+  };
+  const valueBody = /*#__PURE__*/React.createElement("span", {
+    ref: contentRef,
+    className: textContentClasses,
+    id: id,
+    style: textContentStyles
+  }, value);
+  const tooltipVariant = /*#__PURE__*/React.createElement(react.Tooltip, {
+    align: align,
+    autoAlign: autoAlign,
+    label: value
+  }, valueBody);
+  const expandVariant = /*#__PURE__*/React.createElement(React.Fragment, null, valueBody, /*#__PURE__*/React.createElement("span", {
+    "aria-controls": id,
+    "aria-expanded": expanded,
+    className: `${blockClass}__expand-toggle`,
+    onClick: handleExpand,
+    onKeyDown: handleExpandKey,
+    role: "button",
+    tabIndex: 0
+  }, expanded ? collapseLabel : expandLabel));
+  const truncatedBody = type === 'expand' ? expandVariant : tooltipVariant;
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), truncated ? truncatedBody : valueBody);
+});
+exports.TruncatedText = settings.pkg.checkComponentEnabled(exports.TruncatedText, componentName);
+exports.TruncatedText.displayName = componentName;

package/lib/components/TruncatedText/index.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 { TruncatedText } from './TruncatedText';

package/lib/components/TruncatedText/useTruncatedText.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 Params {
+    lines?: number;
+    value?: string;
+    expanded?: boolean;
+}
+export default function useTruncatedText({ lines, value, expanded }: Params): {
+    ref: import("react").RefObject<HTMLElement | null>;
+    truncated: boolean;
+};
+export {};

package/lib/components/TruncatedText/useTruncatedText.js

@@ -0,0 +1,45 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
+
+function useTruncatedText(_ref) {
+  let {
+    lines,
+    value,
+    expanded
+  } = _ref;
+  const [truncated, setTruncated] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (!expanded) {
+        const result = checkForOverflow.checkHeightOverflow(ref.current);
+        if (result !== truncated) {
+          setTruncated(result);
+        }
+      }
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [expanded, lines, value, truncated]);
+  return {
+    ref,
+    truncated
+  };
+}
+
+exports.default = useTruncatedText;

package/lib/components/index.d.ts

@@ -38,6 +38,7 @@ 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';
@@ -47,8 +48,9 @@ export * from './CoachmarkStack';
 export * from './Guidebanner';
 export * from './InlineTip';
 export * from './NonLinearReading';
-export * from './BigNumbers';
+export * from './BigNumber';
 export * from './TruncatedList';
+export * from './TruncatedText';
 export * from './InterstitialScreen';
 export * from './DelimitedList';
 export * from './Decorator';
@@ -68,5 +70,5 @@ export { ActionBar } from './ActionBar';
 export * from './FilterPanel';
 export * from './ConditionBuilder';
 export * from './GetStartedCard';
-export * as unstable__PageHeader from './PageHeader/next/PageHeader';
+export * as preview__PageHeader from './PageHeader/next/PageHeader';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, } from './FeatureFlags';

package/lib/global/js/hooks/useOverflowString.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { RefObject } from 'react';
-export declare function useOverflowStringWidth(elementRef: RefObject<HTMLElement>): boolean | undefined;
-export declare const useOverflowStringHeight: (elementRef: RefObject<HTMLElement>) => boolean | undefined;
+export declare function useOverflowStringWidth(elementRef: RefObject<HTMLElement | null>): boolean | undefined;
+export declare const useOverflowStringHeight: (elementRef: RefObject<HTMLElement | null>) => boolean | undefined;

package/lib/global/js/hooks/usePortalTarget.js

@@ -10,7 +10,7 @@
 require('../../../feature-flags.js');
 var React = require('react');
 var settings = require('../../../settings.js');
-var reactDom = require('react-dom');
+var ReactDOM = require('react-dom');
 var index = require('../../../components/FeatureFlags/index.js');
 
 const usePortalTarget = portalTargetIn => {
@@ -25,7 +25,7 @@ const usePortalTarget = portalTargetIn => {
       }
     }
   }, [portalTargetIn, enablePortalTarget]);
-  const renderPortalUse = React.useCallback(children => portalTarget ? /*#__PURE__*/reactDom.createPortal(children, portalTarget) : children, [portalTarget]);
+  const renderPortalUse = React.useCallback(children => portalTarget ? /*#__PURE__*/ReactDOM.createPortal(children, portalTarget) : children, [portalTarget]);
   return renderPortalUse;
 };
 

package/lib/global/js/hooks/useResizeObserver.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { RefObject } from 'react';
-export declare const useResizeObserver: (ref: RefObject<HTMLElement>, onResize?: (rect: DOMRectReadOnly) => void) => {
+export declare const useResizeObserver: (ref: RefObject<HTMLElement | null>, onResize?: (rect: DOMRectReadOnly) => void) => {
     width: number;
     height: number;
 };

package/lib/global/js/package-settings.d.ts

@@ -81,8 +81,9 @@ declare namespace defaults {
         let Nav: boolean;
         let NavItem: boolean;
         let NavList: boolean;
-        let BigNumbers: boolean;
+        let BigNumber: boolean;
         let TruncatedList: boolean;
+        let TruncatedText: boolean;
         let DelimitedList: boolean;
         let ScrollGradient: boolean;
         let StringFormatter: boolean;

package/lib/global/js/package-settings.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-// Copyright IBM Corp. 2020, 2024
+// 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.
@@ -81,8 +81,9 @@ const defaults = {
     Nav: false,
     NavItem: false,
     NavList: false,
-    BigNumbers: false,
+    BigNumber: false,
     TruncatedList: false,
+    TruncatedText: false,
     DelimitedList: false,
     ScrollGradient: false,
     StringFormatter: false,

package/lib/global/js/utils/checkForOverflow.js

@@ -0,0 +1,23 @@
+/**
+ * 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';
+
+// Copyright IBM Corp. 2024, 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.
+//
+
+const checkHeightOverflow = el => {
+  if (el) {
+    return el?.offsetHeight < el?.scrollHeight;
+  }
+  return false;
+};
+
+exports.checkHeightOverflow = checkHeightOverflow;

package/lib/global/js/utils/makeDraggable/index.d.ts

@@ -0,0 +1 @@
+export { makeDraggable } from "./makeDraggable";

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

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+interface DraggableProps {
+    el: HTMLElement;
+    dragHandle?: HTMLElement;
+    focusableDragHandle?: HTMLElement;
+    dragStep?: number;
+    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 {};

package/lib/global/js/utils/makeDraggable/makeDraggable.js

@@ -0,0 +1,93 @@
+/**
+ * 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';
+
+/**
+ * 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) {
+  let {
+    el,
+    dragHandle,
+    focusableDragHandle,
+    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 onKeyDown(e) {
+    const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        break;
+      case 'ArrowLeft':
+        el.style.left = `${el.offsetLeft - distance}px`;
+        break;
+      case 'ArrowRight':
+        el.style.left = `${el.offsetLeft + distance}px`;
+        break;
+      case 'ArrowUp':
+        el.style.top = `${el.offsetTop - distance}px`;
+        break;
+      case 'ArrowDown':
+        el.style.top = `${el.offsetTop + distance}px`;
+        break;
+    }
+  }
+  function onMouseDown(e) {
+    const isTargetInHandle = dragHandle ? dragHandle.contains(e.target) : el.contains(e.target);
+    if (!isTargetInHandle) {
+      return;
+    }
+    offsetX = e.clientX - el.offsetLeft;
+    offsetY = e.clientY - el.offsetTop;
+    isDragging = true;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp, {
+      once: true
+    });
+  }
+  function onMouseMove(e) {
+    if (!isDragging) {
+      return;
+    }
+    el.style.left = `${e.clientX - offsetX}px`;
+    el.style.top = `${e.clientY - offsetY}px`;
+  }
+  function onMouseUp() {
+    if (!isDragging) {
+      return;
+    }
+    isDragging = false;
+    document.removeEventListener('mousemove', onMouseMove);
+  }
+  if (dragHandle) {
+    dragHandle.addEventListener('mousedown', onMouseDown);
+  } else {
+    el.addEventListener('mousedown', onMouseDown);
+  }
+  focusableDragHandle?.addEventListener('keydown', onKeyDown);
+}
+
+exports.makeDraggable = makeDraggable;