@carbon/ibm-products 2.68.0 → 2.69.0

package/lib/components/Datagrid/useSortableColumns.js

@@ -56,6 +56,7 @@ const getAriaPressedValue = col => {
   return 'false';
 };
 const useSortableColumns = hooks => {
+  const carbonPrefix = react.usePrefix();
   const sortableVisibleColumns = (visibleColumns, _ref) => {
     let {
       instance
@@ -64,7 +65,7 @@ const useSortableColumns = hooks => {
       onSort
     } = instance;
     const onSortClick = (event, column) => {
-      const aiLabel = event.target.classList.contains(`${settings.carbon.prefix}--slug`) || event.target.closest(`.${settings.carbon.prefix}--slug`);
+      const aiLabel = event.target.classList.contains(`${carbonPrefix}--slug`) || event.target.closest(`.${carbonPrefix}--slug`);
       // Do not continue with sorting if we find a slug
       if (aiLabel) {
         event.stopPropagation();
@@ -86,7 +87,7 @@ const useSortableColumns = hooks => {
         const iconProps = {
           size: 16,
           ...props,
-          className: `${blockClass}__sortable-icon ${settings.carbon.prefix}--btn__icon`
+          className: `${blockClass}__sortable-icon ${carbonPrefix}--btn__icon`
         };
         if (col?.isSorted) {
           switch (col.isSortedDesc) {
@@ -118,7 +119,7 @@ const useSortableColumns = hooks => {
           }), icon(headerProp?.column, props));
         },
         id: column?.id,
-        className: cx(`${settings.carbon.prefix}--table-sort ${blockClass}--table-sort`, {
+        className: cx(`${carbonPrefix}--table-sort ${blockClass}--table-sort`, {
           [`${blockClass}--table-sort--desc`]: headerProp?.column.isSortedDesc,
           [`${blockClass}--table-sort--asc`]: headerProp?.column.isSortedDesc === false
         }),

package/lib/components/EditInPlace/EditInPlace.d.ts

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

@@ -51,6 +51,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const inputRef = React.useRef(null);
   const canSave = value !== initialValue && !invalid;
   const escaping = React.useRef(false);
+  const carbonPrefix = react.usePrefix();
   const tipAlignIsObject = typeof tooltipAlignment === 'object';
   const tipAlignments = ['edit', 'save', 'cancel'].reduce((acc, tips) => {
     acc[tips] = (tipAlignIsObject ? tooltipAlignment[tips] : tooltipAlignment) ?? defaults.tooltipAlignment;
@@ -158,7 +159,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onBlur: onBlurHandler
   }, /*#__PURE__*/React.createElement("input", {
     id: id,
-    className: cx(`${blockClass}__text-input`, `${settings.carbon.prefix}--text-input`, `${settings.carbon.prefix}--text-input--${size}`),
+    className: cx(`${blockClass}__text-input`, `${carbonPrefix}--text-input`, `${carbonPrefix}--text-input--${size}`),
     type: "text",
     placeholder: placeholder,
     value: value,

package/lib/components/EmptyStates/EmptyStateContent.d.ts

@@ -32,5 +32,34 @@ interface EmptyStateProps {
      */
     title: string | ReactNode;
 }
-export declare const EmptyStateContent: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export declare const EmptyStateContent: {
+    (props: EmptyStateProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Empty state action button
+         */
+        action: any;
+        /**
+         * Empty state headingAs allows you to customize the type of heading element
+         */
+        headingAs: any;
+        /**
+         * Empty state link object
+         */
+        link: any;
+        /**
+         * Empty state size
+         */
+        size: any;
+        /**
+         * Empty state subtitle
+         */
+        subtitle: any;
+        /**
+         * Empty state title
+         */
+        title: any;
+    };
+};
 export {};

package/lib/components/EmptyStates/EmptyStateContent.js

@@ -17,7 +17,7 @@ var react = require('@carbon/react');
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${settings.pkg.prefix}--empty-state`;
 const componentName = 'EmptyStateContent';
-const EmptyStateContent = /*#__PURE__*/React.forwardRef(props => {
+const EmptyStateContent = props => {
   const {
     action,
     link,
@@ -47,7 +47,7 @@ const EmptyStateContent = /*#__PURE__*/React.forwardRef(props => {
     className: `${blockClass}__link`,
     href: link.href
   }), link.text));
-});
+};
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.

package/lib/components/ExportModal/ExportModal.js

@@ -67,6 +67,7 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   // by default (if it exists) use the first extension in the extension array
   const [extension, setExtension] = React.useState('');
   const renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  const carbonPrefix = react.usePrefix();
   React.useEffect(() => {
     setName(filename);
     if (preformattedExtensions && preformattedExtensions.length > 0 && preformattedExtensions[0]?.extension) {
@@ -75,10 +76,10 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, [filename, preformattedExtensions, open]);
   React.useEffect(() => {
     if (successful) {
-      const button = document.querySelector(`.${blockClass} .${settings.carbon.prefix}--modal-close-button button`);
+      const button = document.querySelector(`.${blockClass} .${carbonPrefix}--modal-close-button button`);
       button?.focus();
     }
-  }, [successful, blockClass]);
+  }, [successful, blockClass, carbonPrefix]);
   const onNameChangeHandler = evt => {
     setName(evt.target.value);
   };
@@ -143,7 +144,8 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     orientation: "vertical",
     onChange: onExtensionChangeHandler,
     valueSelected: extension,
-    name: "extensions"
+    name: "extensions",
+    "aria-label": "extensions"
   }, preformattedExtensions.map(o => /*#__PURE__*/React.createElement(react.RadioButton, {
     key: o.extension,
     id: o.extension,

package/lib/components/FeatureFlags/index.d.ts

@@ -1,40 +1,59 @@
 /**
- * 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.
  */
-import React from 'react';
+import React, { ReactNode, type JSX } from 'react';
+export interface FeatureFlagsProps {
+    children?: ReactNode;
+    flags?: Record<string, boolean>;
+    defaultPortalTargetBody?: boolean;
+    enableDatagridUseInlineEdit?: boolean;
+    enableDatagridUseEditableCell?: boolean;
+    enableDatagridUseCustomizeColumns?: boolean;
+    enableSidepanelResizer?: boolean;
+    enableTestFlagA?: boolean;
+    enableTestFlagB?: boolean;
+}
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
  */
 declare const FeatureFlagContext: React.Context<any>;
 /**
- * Supports individual feature flag values as props, merging them
+ * Supports an object of feature flag values with the `flags` prop, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, ...newFlags }: {
-    [x: string]: any;
-    children: any;
-    flags?: {} | undefined;
-}): React.JSX.Element;
+declare function FeatureFlags({ children, flags, defaultPortalTargetBody, enableDatagridUseInlineEdit, enableDatagridUseEditableCell, enableDatagridUseCustomizeColumns, enableSidepanelResizer, enableTestFlagA, enableTestFlagB, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: any;
         /**
-         * Provide the feature flags to enabled or disabled in the current React tree, this has been deprecated. as we are going to pass individual boolean props for each flag.
+         * Provide the feature flags to enabled or disabled in the current React tree
          */
-        flags: any;
+        defaultPortalTargetBody: any;
+        enableDatagridUseCustomizeColumns: any;
+        enableDatagridUseEditableCell: any;
+        enableDatagridUseInlineEdit: any;
+        enableSidepanelResizer: any;
+        enableTestFlagA: any;
+        enableTestFlagB: any;
+        flags: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
     };
 }
 /**
- * Access whether a given flag is enabled or disabled in a given FeatureFlagContext
+ * Access whether a given flag is enabled or disabled in a given
+ * FeatureFlagContext
+ *
+ * @returns {boolean}
  */
-declare function useFeatureFlag(flag: string): boolean;
+declare function useFeatureFlag(flag: any): any;
 /**
  * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
  */
 declare function useFeatureFlags(): any;
 export { FeatureFlags, FeatureFlagContext, useFeatureFlags, useFeatureFlag };

package/lib/components/FeatureFlags/index.js

@@ -7,9 +7,10 @@
 
 'use strict';
 
-var React = require('react');
-var index = require('../../_virtual/index.js');
 var FeatureFlags$1 = require('@carbon/feature-flags');
+var index = require('../../_virtual/index.js');
+var React = require('react');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -18,7 +19,7 @@ var FeatureFlags$1 = require('@carbon/feature-flags');
 const FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
 
 /**
- * Supports individual feature flag values as props, merging them
+ * Supports an object of feature flag values with the `flags` prop, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
@@ -26,18 +27,30 @@ function FeatureFlags(_ref) {
   let {
     children,
     flags = {},
-    ...newFlags
+    defaultPortalTargetBody = true,
+    enableDatagridUseInlineEdit = false,
+    enableDatagridUseEditableCell = false,
+    enableDatagridUseCustomizeColumns = false,
+    // exampleComponentSecondaryIcon = false,
+    // exampleComponentUseExample = false,
+    enableSidepanelResizer = false,
+    enableTestFlagA = false,
+    enableTestFlagB = false
   } = _ref;
   const parentScope = React.useContext(FeatureFlagContext);
-  const newFlagsObject = Object.keys(newFlags).reduce((acc, key) => {
-    acc[key] = newFlags[key];
-    return acc;
-  }, {});
+  const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
   const combinedFlags = {
-    ...newFlagsObject,
+    'default-portal-target-body': defaultPortalTargetBody,
+    'enable-datagrid-useInlineEdit': enableDatagridUseInlineEdit,
+    'enable-datagrid-useEditableCell': enableDatagridUseEditableCell,
+    'enable-datagrid-useCustomizeColumns': enableDatagridUseCustomizeColumns,
+    // 'ExampleComponent.secondaryIcon': exampleComponentSecondaryIcon,
+    // 'ExampleComponent.useExample': exampleComponentUseExample,
+    enableSidepanelResizer: enableSidepanelResizer,
+    'enable-test-flag-a': enableTestFlagA,
+    'enable-test-flag-b': enableTestFlagB,
     ...flags
   };
-  const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
   const [scope, updateScope] = React.useState(() => {
     const scope = FeatureFlags$1.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
@@ -50,8 +63,9 @@ function FeatureFlags(_ref) {
     setPrevParentScope(parentScope);
   }
 
-  // We use a custom hook to detect if any of the individual flag props or their values change
-  // If any flags have changed, we re-create the FeatureFlagScope using the updated flags
+  // We use a custom hook to detect if any of the keys or their values change
+  // for flags that are passed in. If they have changed, then we re-create the
+  // FeatureFlagScope using the new flags
   useChangedValue(combinedFlags, isEqual, changedFlags => {
     const scope = FeatureFlags$1.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
@@ -64,9 +78,18 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: index.default.node,
   /**
-   * Provide the feature flags to enabled or disabled in the current React tree, this has been deprecated. as we are going to pass individual boolean props for each flag.
+   * Provide the feature flags to enabled or disabled in the current React tree
    */
-  flags: index.default.objectOf(index.default.bool)
+  defaultPortalTargetBody: index.default.bool,
+  enableDatagridUseCustomizeColumns: index.default.bool,
+  enableDatagridUseEditableCell: index.default.bool,
+  enableDatagridUseInlineEdit: index.default.bool,
+  enableSidepanelResizer: index.default.bool,
+  enableTestFlagA: index.default.bool,
+  enableTestFlagB: index.default.bool,
+  // exampleComponentSecondaryIcon: PropTypes.bool,
+  // exampleComponentUseExample: PropTypes.bool,
+  flags: propsHelper.deprecateProp(index.default.objectOf(index.default.bool), 'The `flags` prop for `FeatureFlag` has been deprecated. Please pass the flags directly as props in camelCase')
 };
 
 /**
@@ -101,7 +124,10 @@ function useChangedValue(value, compare, callback) {
 }
 
 /**
- * Access whether a given flag is enabled or disabled in a given FeatureFlagContext
+ * Access whether a given flag is enabled or disabled in a given
+ * FeatureFlagContext
+ *
+ * @returns {boolean}
  */
 function useFeatureFlag(flag) {
   const scope = React.useContext(FeatureFlagContext);
@@ -110,6 +136,8 @@ function useFeatureFlag(flag) {
 
 /**
  * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
  */
 function useFeatureFlags() {
   return React.useContext(FeatureFlagContext);
@@ -120,6 +148,9 @@ function useFeatureFlags() {
  * comparison since the objects we are comparing are objects with boolean flags
  * from the flags prop in the `FeatureFlags` component
  *
+ * @param {object} a
+ * @param {object} b
+ * @returns {boolean}
  */
 function isEqual(a, b) {
   if (a === b) {

package/lib/components/InterstitialScreen/InterstitialScreenBody.js

@@ -18,7 +18,7 @@ var settings = require('../../settings.js');
 var Carousel = require('../Carousel/Carousel.js');
 require('../Carousel/CarouselItem.js');
 
-const InterstitialScreenBody = /*#__PURE__*/React.forwardRef(props => {
+const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     className = '',
     contentRenderer,
@@ -79,7 +79,7 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef(props => {
   const onScrollHandler = scrollPercent => setScrollPercent(scrollPercent);
   const renderBody = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: `${blockClass}--body ${className}`,
-    ref: bodyScrollRef
+    ref: bodyScrollRef ?? ref
   }, rest), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--content`
   }, stepType === 'multi' ? /*#__PURE__*/React.createElement("div", {
@@ -90,6 +90,7 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef(props => {
     onScroll: onScrollHandler
   }, bodyChildrenData)) : stepType === 'single' ? bodyChildrenData : ''));
   return isFullScreen ? renderBody() : /*#__PURE__*/React.createElement(react.ModalBody, {
+    ref: ref,
     className: bodyBlockClass
   }, renderBody());
 });

package/lib/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -19,7 +19,7 @@ var clamp = require('../../global/js/utils/clamp.js');
 var icons = require('@carbon/react/icons');
 
 var _InlineLoading, _InlineLoading2, _InlineLoading3, _InlineLoading4;
-const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(props => {
+const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     className = '',
     skipButtonLabel = 'Skip',
@@ -83,6 +83,7 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(props => {
     return {};
   }, [loadingAction, isMultiStep, progStep, progStepCeil]);
   const getFooterContent = () => /*#__PURE__*/React.createElement("div", {
+    ref: ref,
     className: `${blockClass}--footer ${className}`
   }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
     className: `${blockClass}--skip-btn`,
@@ -126,7 +127,9 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(props => {
       disableButtonConfig
     }));
   }
-  return isFullScreen ? getFooterContent() : /*#__PURE__*/React.createElement(react.ModalFooter, null, getFooterContent());
+  return isFullScreen ? getFooterContent() : /*#__PURE__*/React.createElement(react.ModalFooter, {
+    ref: ref
+  }, getFooterContent());
 });
 InterstitialScreenFooter.propTypes = {
   /**

package/lib/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -17,7 +17,7 @@ var cx = require('classnames');
 var InterstitialScreen = require('./InterstitialScreen.js');
 var useId = require('../../global/js/utils/useId.js');
 
-const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(props => {
+const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _h, _h2;
   const {
     className = '',
@@ -62,10 +62,12 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(props => {
     }, "Step ", progStep + 1, " of ", stepCount)));
   };
   return isFullScreen ? /*#__PURE__*/React.createElement("header", {
+    ref: ref,
     className: cx(headerBlockClass, className, {
       [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
     })
   }, headerContent()) : /*#__PURE__*/React.createElement(react.ModalHeader, {
+    ref: ref,
     className: cx(headerBlockClass, className, {
       [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
     }),

package/lib/components/ProductiveCard/ProductiveCard.d.ts

@@ -5,7 +5,7 @@ type overflowAction = {
     id?: string;
     itemText?: string;
     onClick?: (event: MouseEvent) => void;
-    onKeydown?: (event: KeyboardEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
 };
 type PlacementType = 'top' | 'bottom';
 type ClickZoneType = 'one' | 'two' | 'three';

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var constants = require('./constants.js');
+var react = require('@carbon/react');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 const blockClass = `${settings.pkg.prefix}--scroll-gradient`;
@@ -21,7 +22,6 @@ const componentName = 'ScrollGradient';
 
 // Default values for props
 const defaults = {
-  color: `var(--${settings.carbon.prefix}-layer-01)`,
   hideStartGradient: false,
   onScroll: () => {},
   getScrollElementRef: () => {}
@@ -34,7 +34,7 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     className,
-    color = defaults.color,
+    color,
     onScroll = defaults.onScroll,
     scrollElementClassName,
     getScrollElementRef = defaults.getScrollElementRef,
@@ -45,6 +45,8 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const intersectionEndRef = React.useRef();
   const intersectionLeftRef = React.useRef();
   const intersectionRightRef = React.useRef();
+  const carbonPrefix = react.usePrefix();
+  const fallbackColor = `var(--${carbonPrefix}-layer-01)`;
   const scrollContainer = React.useRef(undefined);
   const contentChildrenContainer = React.useRef(undefined);
   const {
@@ -62,18 +64,18 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   useIsomorphicEffect.useIsomorphicEffect(() => {
     // start vertical styles
     startVerticalRef.current.style.right = gradientRight;
-    startVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, transparent, ${color} 90%)`;
+    startVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, transparent, ${color ?? fallbackColor} 90%)`;
     // start horizontal styles
-    startHorizontalRef.current.backgroundImage = `linear-gradient(-90deg, transparent, ${color} 90%)`;
+    startHorizontalRef.current.backgroundImage = `linear-gradient(-90deg, transparent, ${color ?? fallbackColor} 90%)`;
     startHorizontalRef.current.bottom = gradientBottom;
     // end vertical styles
     endVerticalRef.current.style.right = gradientRight;
     endVerticalRef.current.style.bottom = gradientBottom;
-    endVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, ${color} 10%, transparent)`;
+    endVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, ${color ?? fallbackColor} 10%, transparent)`;
     // end horizontal styles
     endHorizontalRef.current.style.right = gradientRight;
     endHorizontalRef.current.style.bottom = gradientBottom;
-    endHorizontalRef.current.style.backgroundImage = `linear-gradient(-90deg, ${color} 10%, transparent)`;
+    endHorizontalRef.current.style.backgroundImage = `linear-gradient(-90deg, ${color ?? fallbackColor} 10%, transparent)`;
   }, [color, gradientRight, gradientBottom]);
   const setGradientOnIntersection = (entry, gradientRef) => {
     if (gradientRef.current) {

package/lib/components/SidePanel/SidePanel.js

@@ -10,8 +10,10 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
+var index$1 = require('../FeatureFlags/index.js');
 var React = require('react');
 var ActionSet = require('../ActionSet/ActionSet.js');
+var Resizer = require('./resizer/Resizer.js');
 var index = require('../../_virtual/index.js');
 var constants = require('./constants.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
@@ -100,6 +102,9 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = useFocus.useFocus(sidePanelRef);
   const panelRefValue = sidePanelRef.current;
   const previousOpen = usePreviousValue.usePreviousValue(open);
+  const enableResizer = index$1.useFeatureFlag('enableSidepanelResizer');
+  const sidePanelWidth = React.useRef(undefined);
+  const accumulatedDeltaRef = React.useRef(0);
   const shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
   const exitAnimationName = shouldReduceMotion ? 'side-panel-exit-reduced' : placement === 'right' ? 'side-panel-exit-right' : 'side-panel-exit-left';
   const {
@@ -113,6 +118,21 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onRequestClose?.();
     }
   };
+  React.useEffect(() => {
+    if (!enableResizer) {
+      return;
+    }
+    const parentEl = sidePanelRef.current?.parentElement;
+    if (parentEl) {
+      parentEl.style.removeProperty('--c4p-side-panel-modified-size');
+    }
+  }, [size, enableResizer, sidePanelRef]);
+  React.useEffect(() => {
+    if (!enableResizer) {
+      return;
+    }
+    sidePanelWidth.current = sidePanelRef?.current?.clientWidth;
+  }, [sidePanelRef, sidePanelRef?.current?.clientWidth, enableResizer]);
   React.useEffect(() => {
     if (open && !titleRef?.current) {
       setDoAnimateTitle(false);
@@ -120,6 +140,52 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       setDoAnimateTitle(animateTitle);
     }
   }, [animateTitle, open]);
+  const onResize = React.useCallback((event, delta) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const setWidth = width => {
+      const parentEl = sidePanelRef.current?.parentElement;
+      if (parentEl) {
+        parentEl.style.setProperty('--c4p-side-panel-modified-size', typeof width === 'number' ? `${width}px` : width);
+      }
+    };
+    if (event.type === 'keydown') {
+      const key = event.key;
+      switch (key) {
+        case 'Home':
+          setWidth('75vw');
+          break;
+        case 'End':
+          setWidth(constants.SIDE_PANEL_SIZES['xs']);
+          break;
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          accumulatedDeltaRef.current += delta;
+          setWidth((sidePanelWidth.current ?? 0) - (placement === 'right' ? accumulatedDeltaRef.current : -accumulatedDeltaRef.current));
+          break;
+      }
+      return;
+    }
+    if (sidePanelRef.current?.style) {
+      sidePanelRef.current.style.transition = 'none';
+    }
+    setWidth((sidePanelWidth.current ?? 0) - (placement === 'right' ? delta : -delta));
+  }, [placement, sidePanelRef, sidePanelWidth]);
+  const onResizeEnd = React.useCallback((_, ref) => {
+    accumulatedDeltaRef.current = 0;
+    sidePanelRef.current?.style?.removeProperty('transition');
+    const percent = Math.round((sidePanelRef.current.clientWidth || 0) / window.innerWidth * 100);
+    // custom a11y announcements
+    ref.current.setAttribute('aria-label', `side panel is covering ${percent}% of screen`);
+    sidePanelWidth.current = sidePanelRef.current?.clientWidth;
+  }, [sidePanelRef]);
+  const onDoubleClick = React.useCallback(() => {
+    sidePanelWidth.current = Math.min(parseFloat(constants.SIDE_PANEL_SIZES[size]) * 16, window.innerWidth * 0.75);
+    const parentEl = sidePanelRef.current?.parentElement;
+    if (parentEl) {
+      parentEl.style.removeProperty('--c4p-side-panel-modified-size');
+    }
+  }, [sidePanelRef, size]);
   const titleItemsStyles = React.useCallback(progress => {
     if (subtitleRef?.current) {
       const subtitleEl = subtitleRef?.current;
@@ -319,6 +385,7 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     [`${blockClass}--right-placement`]: placement === 'right',
     [`${blockClass}--left-placement`]: placement === 'left',
     [`${blockClass}--slide-in`]: slideIn,
+    [`${blockClass}--enable-sidepanel-resizer`]: enableResizer && window.innerWidth > 768,
     [`${blockClass}--has-decorator`]: decorator,
     [`${blockClass}--has-slug`]: slug,
     [`${blockClass}--has-ai-label`]: aiLabel,
@@ -462,6 +529,13 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
     onKeyDown: handleKeyDown
+  }), !slideIn && enableResizer && window.innerWidth > 768 && /*#__PURE__*/React.createElement(Resizer.Resizer, {
+    className: `${blockClass}__resizer`,
+    orientation: "vertical",
+    "aria-valuenow": sidePanelWidth.current,
+    onResize: onResize,
+    onResizeEnd: onResizeEnd,
+    onDoubleClick: onDoubleClick
   }), renderHeader(), renderMain(), /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
     actions: actions ?? [],
     className: primaryActionContainerClassNames,

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

@@ -1,8 +1,14 @@
-export namespace SIDE_PANEL_SIZES {
-    let xs: string;
-    let sm: string;
-    let md: string;
-    let lg: string;
-    let xl: string;
-    let max: string;
-}
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 const SIDE_PANEL_SIZES: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};

package/lib/components/SidePanel/constants.js

@@ -13,7 +13,7 @@ const SIDE_PANEL_SIZES = {
   md: '30rem',
   lg: '40rem',
   xl: '65rem',
-  max: '75%'
+  '2xl': '80rem'
 };
 
 exports.SIDE_PANEL_SIZES = SIDE_PANEL_SIZES;

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

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