@carbon/ibm-products 2.68.0 → 2.69.0

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

@@ -0,0 +1,277 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var index = require('../../../_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__*/React.forwardRef((_ref, forwardedRef) => {
+  let {
+    orientation,
+    onResize,
+    onResizeEnd,
+    onDoubleClick,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = 'clabs';
+  const blockClass = `${prefix}__resizer`;
+  const internalRef = React.useRef(null);
+  const ref = forwardedRef || internalRef; // combine refs, forwarded ref takes priority over internal ref
+  const [isResizing, setIsResizing] = React.useState(false);
+  const startPos = React.useRef({
+    x: 0,
+    y: 0
+  });
+  // Sizes of the previous and next siblings, gets modified during resizing
+  const sizes = React.useRef({
+    prevSiblingSize: {
+      width: 0,
+      height: 0
+    },
+    nextSiblingSize: {
+      width: 0,
+      height: 0
+    }
+  });
+  // Initial sizes of the previous and next siblings, a static reference
+  const initialSizes = React.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 = React.useRef(index.default(event => {
+    const element = getRefElement(ref);
+    if (element && onResizeEnd) {
+      onResizeEnd(event, ref);
+    }
+  }, DEBOUNCE_DELAY));
+  React.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 = React.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 = React.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 = React.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
+  React.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 = React.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 = React.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.createElement("div", _rollupPluginBabelHelpers.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.createElement("span", {
+      className: "sr-only"
+    }, "Use arrow keys to resize, hold Shift for larger steps. Double-click to reset.")))
+  );
+});
+Resizer.displayName = 'Resizer';
+
+exports.DEBOUNCE_DELAY = DEBOUNCE_DELAY;
+exports.Resizer = Resizer;
+exports.default = Resizer;

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

@@ -58,6 +58,7 @@ exports.TruncatedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   //   (difference of the guessed height to rendered height - a few pixels)
   const [listHeight, setListHeight] = React.useState(minItems * 16);
   const listRef = React.useRef(undefined);
+  const carbonPrefix = react.usePrefix();
   const handleToggle = () => {
     setIsCollapsed(prev => !prev);
   };
@@ -99,7 +100,7 @@ exports.TruncatedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: `${blockClass}__list`,
     ref: listRef
   }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React.createElement(react.Button, {
-    className: cx(`${blockClass}__button`, `${settings.carbon.prefix}--link`, buttonClassName),
+    className: cx(`${blockClass}__button`, `${carbonPrefix}--link`, buttonClassName),
     kind: "ghost",
     size: "sm",
     onClick: handleToggle

package/lib/feature-flags.js

@@ -35,5 +35,9 @@ FeatureFlags__namespace.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/lib/index.js

@@ -82,6 +82,7 @@ var EditFullPage = require('./components/EditFullPage/EditFullPage.js');
 var EditUpdateCards = require('./components/EditUpdateCards/EditUpdateCards.js');
 var Checklist = require('./components/Checklist/Checklist.js');
 var Coachmark = require('./components/Coachmark/Coachmark.js');
+require('./components/Coachmark/CoachmarkTagline.js');
 var CoachmarkBeacon = require('./components/CoachmarkBeacon/CoachmarkBeacon.js');
 var CoachmarkButton = require('./components/CoachmarkButton/CoachmarkButton.js');
 var CoachmarkFixed = require('./components/CoachmarkFixed/CoachmarkFixed.js');

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

@@ -42,8 +42,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;
 }
@@ -51,7 +51,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/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
+var index = require('../../icon-helpers/es/index.js');
 var index$1 = require('../../../../_virtual/index.js');
 var React = require('react');