@carbon/ibm-products 2.68.0 → 2.69.0

package/es/components/FeatureFlags/index.js

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useContext, createContext, useState, useRef, useEffect } from 'react';
-import PropTypes from '../../_virtual/index.js';
 import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
+import PropTypes from '../../_virtual/index.js';
+import React__default, { useContext, createContext, useState, useRef, useEffect } from 'react';
+import { deprecateProp } from '../../global/js/utils/props-helper.js';
 
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -16,7 +17,7 @@ import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-fla
 const FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
 
 /**
- * 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
  */
@@ -24,18 +25,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 = useContext(FeatureFlagContext);
-  const newFlagsObject = Object.keys(newFlags).reduce((acc, key) => {
-    acc[key] = newFlags[key];
-    return acc;
-  }, {});
+  const [prevParentScope, setPrevParentScope] = 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] = useState(parentScope);
   const [scope, updateScope] = useState(() => {
     const scope = createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
@@ -48,8 +61,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 = createScope(changedFlags);
     scope.mergeWithScope(parentScope);
@@ -62,9 +76,18 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: PropTypes.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: PropTypes.objectOf(PropTypes.bool)
+  defaultPortalTargetBody: PropTypes.bool,
+  enableDatagridUseCustomizeColumns: PropTypes.bool,
+  enableDatagridUseEditableCell: PropTypes.bool,
+  enableDatagridUseInlineEdit: PropTypes.bool,
+  enableSidepanelResizer: PropTypes.bool,
+  enableTestFlagA: PropTypes.bool,
+  enableTestFlagB: PropTypes.bool,
+  // exampleComponentSecondaryIcon: PropTypes.bool,
+  // exampleComponentUseExample: PropTypes.bool,
+  flags: deprecateProp(PropTypes.objectOf(PropTypes.bool), 'The `flags` prop for `FeatureFlag` has been deprecated. Please pass the flags directly as props in camelCase')
 };
 
 /**
@@ -99,7 +122,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 = useContext(FeatureFlagContext);
@@ -108,6 +134,8 @@ function useFeatureFlag(flag) {
 
 /**
  * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
  */
 function useFeatureFlags() {
   return useContext(FeatureFlagContext);
@@ -118,6 +146,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/es/components/InterstitialScreen/InterstitialScreenBody.js

@@ -14,7 +14,7 @@ import { pkg } from '../../settings.js';
 import { Carousel } from '../Carousel/Carousel.js';
 import '../Carousel/CarouselItem.js';
 
-const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef(props => {
+const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     className = '',
     contentRenderer,
@@ -75,7 +75,7 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef(props => {
   const onScrollHandler = scrollPercent => setScrollPercent(scrollPercent);
   const renderBody = () => /*#__PURE__*/React__default.createElement("div", _extends({
     className: `${blockClass}--body ${className}`,
-    ref: bodyScrollRef
+    ref: bodyScrollRef ?? ref
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}--content`
   }, stepType === 'multi' ? /*#__PURE__*/React__default.createElement("div", {
@@ -86,6 +86,7 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef(props => {
     onScroll: onScrollHandler
   }, bodyChildrenData)) : stepType === 'single' ? bodyChildrenData : ''));
   return isFullScreen ? renderBody() : /*#__PURE__*/React__default.createElement(ModalBody, {
+    ref: ref,
     className: bodyBlockClass
   }, renderBody());
 });

package/es/components/InterstitialScreen/InterstitialScreenFooter.js

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

package/es/components/InterstitialScreen/InterstitialScreenHeader.js

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

package/es/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/es/components/ScrollGradient/ScrollGradient.js

@@ -10,8 +10,9 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { carbon, pkg } from '../../settings.js';
+import { pkg } from '../../settings.js';
 import { useIsOverflow, ScrollStates } from './constants.js';
+import { usePrefix } from '@carbon/react';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 const blockClass = `${pkg.prefix}--scroll-gradient`;
@@ -19,7 +20,6 @@ const componentName = 'ScrollGradient';
 
 // Default values for props
 const defaults = {
-  color: `var(--${carbon.prefix}-layer-01)`,
   hideStartGradient: false,
   onScroll: () => {},
   getScrollElementRef: () => {}
@@ -32,7 +32,7 @@ let ScrollGradient = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     children,
     className,
-    color = defaults.color,
+    color,
     onScroll = defaults.onScroll,
     scrollElementClassName,
     getScrollElementRef = defaults.getScrollElementRef,
@@ -43,6 +43,8 @@ let ScrollGradient = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const intersectionEndRef = useRef();
   const intersectionLeftRef = useRef();
   const intersectionRightRef = useRef();
+  const carbonPrefix = usePrefix();
+  const fallbackColor = `var(--${carbonPrefix}-layer-01)`;
   const scrollContainer = useRef(undefined);
   const contentChildrenContainer = useRef(undefined);
   const {
@@ -60,18 +62,18 @@ let ScrollGradient = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   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/es/components/SidePanel/SidePanel.js

@@ -8,8 +8,10 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ArrowLeft, Close } from '@carbon/react/icons';
 import { Button, Section, IconButton, Heading } from '@carbon/react';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
+import { Resizer } from './resizer/Resizer.js';
 import PropTypes from '../../_virtual/index.js';
 import { SIDE_PANEL_SIZES } from './constants.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
@@ -98,6 +100,9 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = useFocus(sidePanelRef);
   const panelRefValue = sidePanelRef.current;
   const previousOpen = usePreviousValue(open);
+  const enableResizer = useFeatureFlag('enableSidepanelResizer');
+  const sidePanelWidth = useRef(undefined);
+  const accumulatedDeltaRef = useRef(0);
   const shouldReduceMotion = usePrefersReducedMotion();
   const exitAnimationName = shouldReduceMotion ? 'side-panel-exit-reduced' : placement === 'right' ? 'side-panel-exit-right' : 'side-panel-exit-left';
   const {
@@ -111,6 +116,21 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       onRequestClose?.();
     }
   };
+  useEffect(() => {
+    if (!enableResizer) {
+      return;
+    }
+    const parentEl = sidePanelRef.current?.parentElement;
+    if (parentEl) {
+      parentEl.style.removeProperty('--c4p-side-panel-modified-size');
+    }
+  }, [size, enableResizer, sidePanelRef]);
+  useEffect(() => {
+    if (!enableResizer) {
+      return;
+    }
+    sidePanelWidth.current = sidePanelRef?.current?.clientWidth;
+  }, [sidePanelRef, sidePanelRef?.current?.clientWidth, enableResizer]);
   useEffect(() => {
     if (open && !titleRef?.current) {
       setDoAnimateTitle(false);
@@ -118,6 +138,52 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       setDoAnimateTitle(animateTitle);
     }
   }, [animateTitle, open]);
+  const onResize = 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(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 = 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 = useCallback(() => {
+    sidePanelWidth.current = Math.min(parseFloat(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 = useCallback(progress => {
     if (subtitleRef?.current) {
       const subtitleEl = subtitleRef?.current;
@@ -317,6 +383,7 @@ const SidePanelBase = /*#__PURE__*/React__default.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,
@@ -460,6 +527,13 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
     onKeyDown: handleKeyDown
+  }), !slideIn && enableResizer && window.innerWidth > 768 && /*#__PURE__*/React__default.createElement(Resizer, {
+    className: `${blockClass}__resizer`,
+    orientation: "vertical",
+    "aria-valuenow": sidePanelWidth.current,
+    onResize: onResize,
+    onResizeEnd: onResizeEnd,
+    onDoubleClick: onDoubleClick
   }), renderHeader(), renderMain(), /*#__PURE__*/React__default.createElement(ActionSet, {
     actions: actions ?? [],
     className: primaryActionContainerClassNames,

package/es/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/es/components/SidePanel/constants.js

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

package/es/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;