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

package/scss/components/SidePanel/_side-panel.scss

@@ -16,6 +16,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/utilities';
+@use '@carbon-labs/react-resizer/scss/resizer';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 
 // Standard imports.
@@ -30,7 +31,7 @@
 
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
-$clabs-prefix: 'clabs'; // TODO: remove when resizer available in labs
+$clabs-prefix: 'clabs';
 
 @property --panel-transform {
   inherits: true;
@@ -638,54 +639,3 @@ $clabs-prefix: 'clabs'; // TODO: remove when resizer available in labs
 .#{$block-class}--has-decorator + .#{$block-class}__overlay {
   background-color: $ai-overlay;
 }
-
-// TODO: remove along with prefix after resizer available in labs
-.#{$clabs-prefix}__resizer {
-  position: relative;
-  flex: none;
-  background-color: $border-subtle-01;
-
-  &:hover {
-    @media (prefers-reduced-motion: no-preference) {
-      background-color: $border-interactive;
-      transition: background-color $duration-moderate-01;
-    }
-  }
-
-  &:focus {
-    background-color: $border-interactive;
-    outline: none;
-  }
-
-  &:active {
-    background-color: $border-interactive;
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: none;
-  }
-
-  &--horizontal {
-    block-size: $spacing-02;
-    cursor: ns-resize;
-  }
-
-  &--vertical {
-    cursor: ew-resize;
-    inline-size: $spacing-02;
-  }
-}
-
-.sr-only {
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  margin: -1px;
-  block-size: 1px;
-  clip: rect(0, 0, 0, 0);
-  inline-size: 1px;
-  white-space: nowrap;
-}
-// END TODO: remove along with prefix after resizer available in labs

package/scss/components/_index-released-only.scss

@@ -40,3 +40,4 @@
 @use './UserProfileImage';
 @use './WebTerminal';
 @use './UserAvatar';
+@use './InterstitialScreen';

package/telemetry.yml

@@ -40,6 +40,7 @@ collect:
         - batchActionMenuButtonLabel
         - batchActions
         - body
+        - border
         - breadcrumbOverflowTooltipAlign
         - breadcrumbs
         - button
@@ -51,6 +52,7 @@ collect:
         - clickZone
         - closeButtonLabel
         - closeIconDescription
+        - closePopover
         - collapseButtonLabel
         - collapsible
         - column
@@ -99,6 +101,7 @@ collect:
         - ExpandedRowContentComponent
         - expandedRowIds
         - fetchMoreData
+        - fieldsetLegendId
         - fieldsetLegendText
         - filterByLabel
         - filterProps
@@ -267,6 +270,7 @@ collect:
         - overflowTags
         - overflowTooltipAlign
         - overflowType
+        - pageActions
         - parentId
         - path
         - pictogram
@@ -600,7 +604,6 @@ collect:
         - experimentalSecondarySubmitText
         # CreateTearsheetStep
         - experimentalSecondarySubmit
-        - fieldsetLegendId
         # CustomizeColumnsTearsheet
         - columnDefinitions
         - onSaveColumnPrefs
@@ -628,8 +631,6 @@ collect:
         - magnitude
         # DelimitedList
         - delimiter
-        # DescriptionList
-        - border
         # DraggableElement
         - classList
         - elementId
@@ -742,7 +743,6 @@ collect:
         - narrow
         - tertiaryButtonLabel
         # InterstitialScreen
-        - interstitialAriaLabel
         - isFullScreen
         # InterstitialScreenBody
         - contentRenderer
@@ -840,10 +840,17 @@ collect:
         - hasBackgroundAlways
         - hasCollapseHeaderToggle
         - narrowGrid
-        - pageActions
         - pageActionsMenuOptionsClass
         - pageActionsOverflowLabel
         - withoutBackground
+        # PageHeaderBreadcrumbBar
+        - contentActions
+        - contentActionsFlush
+        - pageActionsFlush
+        # PageHeaderContent
+        - contextualActions
+        # PageHeaderContentPageActions
+        - menuButtonLabel
         # PageHeaderTitle
         - blockClass
         - hasBreadcrumbRow
@@ -854,11 +861,6 @@ collect:
         - primaryDangerDescription
         - resourceName
         - textConfirmation
-        # Resizer
-        - onDoubleClick
-        - onResize
-        - onResizeEnd
-        - orientation
         # RowSizeDropdown
         - datagridName
         - light
@@ -1199,9 +1201,6 @@ collect:
         - short
         # PageHeader - fullWidthGrid
         - xl
-        # Resizer - orientation
-        - horizontal
-        - vertical
   npm:
     dependencies: null
   js:

package/es/_virtual/index3.js

@@ -1,10 +0,0 @@
-/**
- * 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.
- */
-
-var propTypes = {exports: {}};
-
-export { propTypes as __module };

package/es/components/SidePanel/resizer/Resizer.d.ts

@@ -1,21 +0,0 @@
-/**
- * @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.
- */
-import React from 'react';
-export declare const DEBOUNCE_DELAY = 100;
-/** Primary UI component for user interaction */
-interface ResizerProps {
-    orientation: 'horizontal' | 'vertical';
-    onResize?: (event: MouseEvent | KeyboardEvent, delta: number) => void;
-    onResizeEnd?: (event: MouseEvent | KeyboardEvent, ref: React.RefObject<HTMLDivElement>) => void;
-    onDoubleClick?: (event: MouseEvent) => string | void;
-    className?: string;
-    [key: string]: any;
-}
-export declare const Resizer: React.ForwardRefExoticComponent<Omit<ResizerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default Resizer;

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

@@ -1,271 +0,0 @@
-/**
- * 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 };