@carbon/ibm-products 2.68.0 → 2.69.0-rc.0

package/es/components/SidePanel/resizer/Resizer.js

@@ -0,0 +1,271 @@
+/**
+ * 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.
+ */
+
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import cx from 'classnames';
+import debounce from '../../../_virtual/index2.js';
+
+var _span;
+const DEBOUNCE_DELAY = 100;
+/** Primary UI component for user interaction */
+
+const getRefElement = ref => {
+  if (!ref || !('current' in ref)) {
+    return null;
+  }
+  return ref.current;
+};
+const Resizer = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    orientation,
+    onResize,
+    onResizeEnd,
+    onDoubleClick,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = 'clabs';
+  const blockClass = `${prefix}__resizer`;
+  const internalRef = useRef(null);
+  const ref = forwardedRef || internalRef; // combine refs, forwarded ref takes priority over internal ref
+  const [isResizing, setIsResizing] = useState(false);
+  const startPos = useRef({
+    x: 0,
+    y: 0
+  });
+  // Sizes of the previous and next siblings, gets modified during resizing
+  const sizes = useRef({
+    prevSiblingSize: {
+      width: 0,
+      height: 0
+    },
+    nextSiblingSize: {
+      width: 0,
+      height: 0
+    }
+  });
+  // Initial sizes of the previous and next siblings, a static reference
+  const initialSizes = useRef({
+    prevSiblingSize: {
+      width: 0,
+      height: 0
+    },
+    nextSiblingSize: {
+      width: 0,
+      height: 0
+    }
+  });
+
+  // Debounced function to handle resize end events
+  // This is used to prevent multiple calls during a resize operation especially from keyboard when the key is held down
+  // It will only call the onResizeEnd after the user has stopped resizing
+  const debouncedResizeEnd = useRef(debounce(event => {
+    const element = getRefElement(ref);
+    if (element && onResizeEnd) {
+      onResizeEnd(event, ref);
+    }
+  }, DEBOUNCE_DELAY));
+  useEffect(() => {
+    const element = getRefElement(ref);
+    if (!element) {
+      return;
+    }
+    const prevSibling = element.previousElementSibling;
+    const nextSibling = element.nextElementSibling;
+    const rect = el => el?.getBoundingClientRect();
+    initialSizes.current = {
+      prevSiblingSize: prevSibling ? {
+        width: rect(prevSibling).width,
+        height: rect(prevSibling).height
+      } : {
+        width: 0,
+        height: 0
+      },
+      nextSiblingSize: nextSibling ? {
+        width: rect(nextSibling).width,
+        height: rect(nextSibling).height
+      } : {
+        width: 0,
+        height: 0
+      }
+    };
+  }, [ref]);
+  const updateSizes = useCallback((event, delta) => {
+    const element = getRefElement(ref);
+    if (!element) {
+      return;
+    }
+    if (onResize) {
+      onResize(event, delta);
+      return;
+    }
+    const prevSibling = element.previousElementSibling;
+    const nextSibling = element.nextElementSibling;
+    const prop = orientation === 'horizontal' ? 'height' : 'width';
+    if (prevSibling) {
+      const newSize = sizes.current.prevSiblingSize[prop] + delta;
+      prevSibling.style[prop] = `${newSize}px`;
+    }
+    if (nextSibling) {
+      const newSize = sizes.current.nextSiblingSize[prop] - delta;
+      nextSibling.style[prop] = `${newSize}px`;
+    }
+  }, [onResize, orientation, ref]);
+  const handleMouseMove = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const delta = orientation === 'horizontal' ? event.clientY - startPos.current.y : event.clientX - startPos.current.x;
+    updateSizes(event, delta);
+  }, [orientation, updateSizes]);
+  const handleMouseUp = useCallback(event => {
+    const element = getRefElement(ref);
+    if (!element) {
+      return;
+    }
+    setIsResizing(false);
+    if (onResizeEnd) {
+      onResizeEnd(event, ref);
+    }
+    const prevSibling = element.previousElementSibling;
+    const nextSibling = element.nextElementSibling;
+    if (prevSibling) {
+      prevSibling.style.transition = '';
+    }
+    if (nextSibling) {
+      nextSibling.style.transition = '';
+    }
+  }, [onResizeEnd, ref]);
+
+  // Effect to add/remove mousemove and mouseup listeners during resizing
+  useEffect(() => {
+    if (!isResizing) {
+      return;
+    }
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing, handleMouseMove, handleMouseUp]);
+  const handleMouseDown = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const element = getRefElement(ref);
+    if (!element) {
+      return;
+    }
+    const prevSibling = element.previousElementSibling;
+    const nextSibling = element.nextElementSibling;
+    const rect = el => el?.getBoundingClientRect();
+    prevSibling && (prevSibling.style.transition = 'none');
+    nextSibling && (nextSibling.style.transition = 'none');
+    setIsResizing(true);
+    startPos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    sizes.current = {
+      prevSiblingSize: prevSibling ? {
+        width: rect(prevSibling).width,
+        height: rect(prevSibling).height
+      } : {
+        width: 0,
+        height: 0
+      },
+      nextSiblingSize: nextSibling ? {
+        width: rect(nextSibling).width,
+        height: rect(nextSibling).height
+      } : {
+        width: 0,
+        height: 0
+      }
+    };
+  }, [ref]);
+  const handleKeyDown = useCallback(event => {
+    const navigationKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+    if (![...navigationKeys, 'PageUp', 'PageDown'].includes(event.key)) {
+      return;
+    }
+    const element = getRefElement(ref);
+    if (!element) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const prevSibling = element.previousElementSibling;
+    const nextSibling = element.nextElementSibling;
+    const getSize = el => {
+      const rect = el?.getBoundingClientRect();
+      return {
+        width: rect?.width || 0,
+        height: rect?.height || 0
+      };
+    };
+    sizes.current = {
+      prevSiblingSize: getSize(prevSibling),
+      nextSiblingSize: getSize(nextSibling)
+    };
+    const step = event.shiftKey ? 25 : 5;
+    let delta = 0;
+    const isHorizontal = orientation === 'horizontal';
+    const keyMap = {
+      ArrowUp: () => isHorizontal ? delta = -step : null,
+      ArrowDown: () => isHorizontal ? delta = step : null,
+      ArrowLeft: () => !isHorizontal ? delta = -step : null,
+      ArrowRight: () => !isHorizontal ? delta = step : null,
+      Home: () => delta = isHorizontal ? -sizes.current.prevSiblingSize.height : -sizes.current.prevSiblingSize.width,
+      End: () => delta = isHorizontal ? sizes.current.nextSiblingSize.height : sizes.current.nextSiblingSize.width
+    };
+    keyMap[event.key]?.();
+    updateSizes(event, delta);
+    debouncedResizeEnd?.current(event);
+  }, [orientation, updateSizes, debouncedResizeEnd, ref]);
+  const handleDoubleClick = event => {
+    event.preventDefault();
+    const element = getRefElement(ref);
+    if (!element) {
+      return;
+    }
+    const prevSibling = element.previousElementSibling;
+    const nextSibling = element.nextElementSibling;
+    if (onDoubleClick) {
+      onDoubleClick(event);
+    } else {
+      const prop = orientation === 'horizontal' ? 'height' : 'width';
+      if (prevSibling) {
+        prevSibling.style[prop] = `${initialSizes.current.prevSiblingSize[prop]}px`;
+      }
+      if (nextSibling) {
+        nextSibling.style[prop] = `${initialSizes.current.nextSiblingSize[prop]}px`;
+      }
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React__default.createElement("div", _extends({}, rest, {
+      ref: ref,
+      role: "separator"
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0,
+      "aria-orientation": orientation,
+      "aria-live": "assertive",
+      onMouseDown: handleMouseDown,
+      onDoubleClick: handleDoubleClick,
+      onKeyDown: handleKeyDown,
+      className: cx([className, blockClass, `${blockClass}--${orientation}`])
+    }), _span || (_span = /*#__PURE__*/React__default.createElement("span", {
+      className: "sr-only"
+    }, "Use arrow keys to resize, hold Shift for larger steps. Double-click to reset.")))
+  );
+});
+Resizer.displayName = 'Resizer';
+
+export { DEBOUNCE_DELAY, Resizer, Resizer as default };

package/es/components/TruncatedList/TruncatedList.d.ts

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

package/es/components/TruncatedList/TruncatedList.js

@@ -7,8 +7,8 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { Children, useState, useRef, useEffect } from 'react';
-import { pkg, carbon } from '../../settings.js';
-import { Button } from '@carbon/react';
+import { pkg } from '../../settings.js';
+import { usePrefix, Button } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -56,6 +56,7 @@ let TruncatedList = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   //   (difference of the guessed height to rendered height - a few pixels)
   const [listHeight, setListHeight] = useState(minItems * 16);
   const listRef = useRef(undefined);
+  const carbonPrefix = usePrefix();
   const handleToggle = () => {
     setIsCollapsed(prev => !prev);
   };
@@ -97,7 +98,7 @@ let TruncatedList = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${blockClass}__list`,
     ref: listRef
   }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React__default.createElement(Button, {
-    className: cx(`${blockClass}__button`, `${carbon.prefix}--link`, buttonClassName),
+    className: cx(`${blockClass}__button`, `${carbonPrefix}--link`, buttonClassName),
     kind: "ghost",
     size: "sm",
     onClick: handleToggle

package/es/feature-flags.js

@@ -14,5 +14,9 @@ FeatureFlags.merge({
   'enable-datagrid-useCustomizeColumns': false,
   'ExampleComponent.secondaryIcon': false,
   'ExampleComponent.useExample': false,
-  'enable-example-flag': false
+  'enable-test-flag-a': false,
+  // used in testing
+  'enable-test-flag-b': true,
+  // used in testing
+  enableSidepanelResizer: false
 });

package/es/index.js

@@ -80,6 +80,7 @@ export { EditFullPage } from './components/EditFullPage/EditFullPage.js';
 export { EditUpdateCards } from './components/EditUpdateCards/EditUpdateCards.js';
 export { Checklist } from './components/Checklist/Checklist.js';
 export { Coachmark } from './components/Coachmark/Coachmark.js';
+import './components/Coachmark/CoachmarkTagline.js';
 export { CoachmarkBeacon } from './components/CoachmarkBeacon/CoachmarkBeacon.js';
 export { CoachmarkButton } from './components/CoachmarkButton/CoachmarkButton.js';
 export { CoachmarkFixed } from './components/CoachmarkFixed/CoachmarkFixed.js';

package/es/node_modules/@carbon/{icons-react/node_modules/@carbon/icon-helpers → icon-helpers}/es/index.js

@@ -40,8 +40,8 @@ function _objectWithoutProperties(e, t) {
     r,
     i = _objectWithoutPropertiesLoose(e, t);
   if (Object.getOwnPropertySymbols) {
-    var s = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
   return i;
 }
@@ -49,7 +49,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
+import { getAttributes } from '../../icon-helpers/es/index.js';
 import PropTypes from '../../../../_virtual/index.js';
 import React__default from 'react';