@carbon/react 1.83.0 → 1.84.0

package/es/components/ComboBox/ComboBox.js

@@ -54,11 +54,10 @@ const defaultItemToString = item => {
   return '';
 };
 const defaultShouldFilterItem = () => true;
-const autocompleteCustomFilter = _ref => {
-  let {
-    item,
-    inputValue
-  } = _ref;
+const autocompleteCustomFilter = ({
+  item,
+  inputValue
+}) => {
   if (inputValue === null || inputValue === '') {
     return true; // Show all items if there's no input
   }
@@ -66,13 +65,12 @@ const autocompleteCustomFilter = _ref => {
   const lowercaseInput = inputValue.toLowerCase();
   return lowercaseItem.startsWith(lowercaseInput);
 };
-const getInputValue = _ref2 => {
-  let {
-    initialSelectedItem,
-    itemToString,
-    selectedItem,
-    prevSelectedItem
-  } = _ref2;
+const getInputValue = ({
+  initialSelectedItem,
+  itemToString,
+  selectedItem,
+  prevSelectedItem
+}) => {
   // If there's a current selection (even if it's an object or string), use it.
   if (selectedItem !== null && typeof selectedItem !== 'undefined') {
     return itemToString(selectedItem);
@@ -88,11 +86,10 @@ const getInputValue = _ref2 => {
   // string.
   return '';
 };
-const findHighlightedIndex = (_ref3, inputValue) => {
-  let {
-    items,
-    itemToString = defaultItemToString
-  } = _ref3;
+const findHighlightedIndex = ({
+  items,
+  itemToString = defaultItemToString
+}, inputValue) => {
   if (!inputValue) {
     return -1;
   }
@@ -471,18 +468,16 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     itemToString: item => {
       return itemToString(item);
     },
-    onInputValueChange(_ref4) {
-      let {
-        inputValue
-      } = _ref4;
+    onInputValueChange({
+      inputValue
+    }) {
       const normalizedInput = inputValue || '';
       setInputValue(normalizedInput);
       setHighlightedIndex(indexToHighlight(normalizedInput));
     },
-    onHighlightedIndexChange: _ref5 => {
-      let {
-        highlightedIndex
-      } = _ref5;
+    onHighlightedIndexChange: ({
+      highlightedIndex
+    }) => {
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
         const highlightedItem = itemArray[highlightedIndex];
@@ -501,11 +496,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       return item?.disabled;
     },
     ...downshiftProps,
-    onStateChange: _ref6 => {
-      let {
-        type,
-        selectedItem: newSelectedItem
-      } = _ref6;
+    onStateChange: ({
+      type,
+      selectedItem: newSelectedItem
+    }) => {
       downshiftProps?.onStateChange?.({
         type,
         selectedItem: newSelectedItem

package/es/components/ComboBox/tools/filter.js

@@ -5,17 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const defaultFilterItems = (items, _ref) => {
-  let {
-    itemToString,
-    inputValue
-  } = _ref;
-  return items.filter(item => {
-    if (!inputValue) {
-      return true;
-    }
-    return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
-  });
-};
+const defaultFilterItems = (items, {
+  itemToString,
+  inputValue
+}) => items.filter(item => {
+  if (!inputValue) {
+    return true;
+  }
+  return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
+});
 
 export { defaultFilterItems };

package/es/components/ComboButton/index.js

@@ -36,19 +36,18 @@ const defaultTranslations = {
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
-const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton(_ref, forwardRef) {
-  let {
-    children,
-    className,
-    disabled,
-    label,
-    onClick,
-    size: size$1 = 'lg',
-    menuAlignment = 'bottom',
-    tooltipAlignment,
-    translateWithId: t = defaultTranslateWithId,
-    ...rest
-  } = _ref;
+const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
+  children,
+  className,
+  disabled,
+  label,
+  onClick,
+  size: size$1 = 'lg',
+  menuAlignment = 'bottom',
+  tooltipAlignment,
+  translateWithId: t = defaultTranslateWithId,
+  ...rest
+}, forwardRef) {
   // feature flag utilized to separate out only the dynamic styles from @floating-ui
   // flag is turned on when collision detection (ie. flip, hide) logic is not desired
   const enableOnlyFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles');
@@ -63,11 +62,10 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton(_ref, for
   }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });

package/es/components/ComposedModal/ComposedModal.js

@@ -28,14 +28,13 @@ import { unstable__Dialog } from '../Dialog/index.js';
 import { warning } from '../../internal/warning.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
-const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody(_ref, ref) {
-  let {
-    className: customClassName,
-    children,
-    hasForm,
-    hasScrollingContent,
-    ...rest
-  } = _ref;
+const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
+  className: customClassName,
+  children,
+  hasForm,
+  hasScrollingContent,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const contentRef = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
@@ -93,27 +92,26 @@ ModalBody.propTypes = {
    */
   hasScrollingContent: PropTypes.bool
 };
-const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal(_ref2, ref) {
-  let {
-    ['aria-labelledby']: ariaLabelledBy,
-    ['aria-label']: ariaLabel,
-    children,
-    className: customClassName,
-    containerClassName,
-    danger,
-    decorator,
-    isFullWidth,
-    onClose,
-    onKeyDown,
-    open,
-    preventCloseOnClickOutside,
-    selectorPrimaryFocus = '[data-modal-primary-focus]',
-    selectorsFloatingMenus,
-    size,
-    launcherButtonRef,
-    slug,
-    ...rest
-  } = _ref2;
+const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
+  ['aria-labelledby']: ariaLabelledBy,
+  ['aria-label']: ariaLabel,
+  children,
+  className: customClassName,
+  containerClassName,
+  danger,
+  decorator,
+  isFullWidth,
+  onClose,
+  onKeyDown,
+  open,
+  preventCloseOnClickOutside,
+  selectorPrimaryFocus = '[data-modal-primary-focus]',
+  selectorsFloatingMenus,
+  size,
+  launcherButtonRef,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const [isOpen, setIsOpen] = useState(!!open);
   const [wasOpen, setWasOpen] = useState(!!open);
@@ -174,12 +172,11 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal(_ref2
       closeModal(evt);
     }
   }
-  function handleBlur(_ref3) {
-    let {
-      target: oldActiveNode,
-      relatedTarget: currentActiveNode
-    } = _ref3;
-    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
+  function handleBlur({
+    target: oldActiveNode,
+    relatedTarget: currentActiveNode
+  }) {
+    if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -198,6 +195,23 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal(_ref2
         selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -312,7 +326,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal(_ref2
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: handleBlur,
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

package/es/components/ComposedModal/ModalFooter.js

@@ -16,32 +16,28 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 
-function SecondaryButtonSet(_ref) {
-  let {
-    secondaryButtons,
-    secondaryButtonText,
-    secondaryClassName,
-    closeModal,
-    onRequestClose,
-    disabled
-  } = _ref;
+function SecondaryButtonSet({
+  secondaryButtons,
+  secondaryButtonText,
+  secondaryClassName,
+  closeModal,
+  onRequestClose,
+  disabled
+}) {
   function handleRequestClose(evt) {
     closeModal(evt);
     onRequestClose(evt);
   }
   if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, secondaryButtons.map((_ref2, i) => {
-      let {
-        buttonText,
-        onClick: onButtonClick
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(Button, {
-        key: `${buttonText}-${i}`,
-        className: secondaryClassName,
-        kind: "secondary",
-        onClick: onButtonClick || handleRequestClose
-      }, buttonText);
-    }));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, secondaryButtons.map(({
+      buttonText,
+      onClick: onButtonClick
+    }, i) => /*#__PURE__*/React.createElement(Button, {
+      key: `${buttonText}-${i}`,
+      className: secondaryClassName,
+      kind: "secondary",
+      onClick: onButtonClick || handleRequestClose
+    }, buttonText)));
   }
   if (secondaryButtonText) {
     return /*#__PURE__*/React.createElement(Button, {
@@ -75,27 +71,26 @@ SecondaryButtonSet.propTypes = {
   },
   secondaryClassName: PropTypes.string
 };
-const ModalFooter = /*#__PURE__*/React.forwardRef(function ModalFooter(_ref3, ref) {
-  let {
-    children,
-    className: customClassName,
-    closeModal = noopFn,
-    danger,
-    inputref,
-    onRequestClose = noopFn,
-    onRequestSubmit = noopFn,
-    primaryButtonDisabled,
-    primaryButtonText,
-    primaryClassName,
-    secondaryButtonText,
-    secondaryButtons,
-    secondaryClassName,
-    loadingStatus = 'inactive',
-    loadingDescription,
-    loadingIconDescription,
-    onLoadingSuccess = noopFn,
-    ...rest
-  } = _ref3;
+const ModalFooter = /*#__PURE__*/React.forwardRef(function ModalFooter({
+  children,
+  className: customClassName,
+  closeModal = noopFn,
+  danger,
+  inputref,
+  onRequestClose = noopFn,
+  onRequestSubmit = noopFn,
+  primaryButtonDisabled,
+  primaryButtonText,
+  primaryClassName,
+  secondaryButtonText,
+  secondaryButtons,
+  secondaryClassName,
+  loadingStatus = 'inactive',
+  loadingDescription,
+  loadingIconDescription,
+  onLoadingSuccess = noopFn,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const footerClass = cx(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
   const primaryButtonClass = cx(primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);

package/es/components/ComposedModal/ModalHeader.js

@@ -13,21 +13,20 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
 
-const ModalHeader = /*#__PURE__*/React.forwardRef(function ModalHeader(_ref, ref) {
-  let {
-    buttonOnClick,
-    children,
-    className: customClassName,
-    closeClassName,
-    closeIconClassName,
-    closeModal,
-    iconDescription = 'Close',
-    label,
-    labelClassName,
-    title,
-    titleClassName,
-    ...rest
-  } = _ref;
+const ModalHeader = /*#__PURE__*/React.forwardRef(function ModalHeader({
+  buttonOnClick,
+  children,
+  className: customClassName,
+  closeClassName,
+  closeIconClassName,
+  closeModal,
+  iconDescription = 'Close',
+  label,
+  labelClassName,
+  title,
+  titleClassName,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   function handleCloseButtonClick(evt) {
     closeModal?.(evt);

package/es/components/ContainedList/ContainedList.js

@@ -38,17 +38,16 @@ function renderChildren(children) {
   }
   return children;
 }
-const ContainedList = _ref => {
-  let {
-    action,
-    children,
-    className,
-    isInset,
-    kind = variants[0],
-    label,
-    size,
-    ...rest
-  } = _ref;
+const ContainedList = ({
+  action,
+  children,
+  className,
+  isInset,
+  kind = variants[0],
+  label,
+  size,
+  ...rest
+}) => {
   const labelId = `${useId('contained-list')}-header`;
   const prefix = usePrefix();
   const classes = cx(`${prefix}--contained-list`, {

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -12,16 +12,15 @@ import cx from 'classnames';
 import { LayoutConstraint } from '../../Layout/index.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
-const ContainedListItem = _ref => {
-  let {
-    action,
-    children,
-    className,
-    disabled = false,
-    onClick,
-    renderIcon: IconElement,
-    ...rest
-  } = _ref;
+const ContainedListItem = ({
+  action,
+  children,
+  className,
+  disabled = false,
+  onClick,
+  renderIcon: IconElement,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const isClickable = onClick !== undefined;
   const classes = cx(`${prefix}--contained-list-item`, className, {

package/es/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
-import React, { HTMLAttributes, ReactElement } from 'react';
+import { type HTMLAttributes, type ReactElement } from 'react';
 export interface SwitchEventHandlersParams {
     index?: number;
     name?: string | number;
@@ -46,24 +46,14 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
      */
     selectionMode?: 'automatic' | 'manual';
     /**
-     * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     * Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
      */
     size: 'sm' | 'md' | 'lg';
 }
-export interface ContentSwitcherState {
-    selectedIndex?: number;
-}
-export default class ContentSwitcher extends React.Component<ContentSwitcherProps, ContentSwitcherState> {
-    /**
-     * The DOM references of child `<Switch>`.
-     * @type {Array<Element>}
-     * @private
-     */
-    _switchRefs: HTMLButtonElement[];
-    state: {
-        selectedIndex: undefined;
-    };
-    static propTypes: {
+export declare const ContentSwitcher: {
+    ({ children, className, light, lowContrast, selectedIndex: selectedIndexProp, selectionMode, size, onChange, ...other }: ContentSwitcherProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
         /**
          * Pass in Switch components to be rendered in the ContentSwitcher
          */
@@ -94,18 +84,8 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
          */
         selectionMode: PropTypes.Requireable<string>;
         /**
-         * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+         * Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
          */
         size: PropTypes.Requireable<string>;
     };
-    static contextType: React.Context<string>;
-    static getDerivedStateFromProps({ selectedIndex }: {
-        selectedIndex?: number | undefined;
-    }, state: any): {
-        selectedIndex: number;
-        prevSelectedIndex: number;
-    } | null;
-    handleItemRef: (index: any) => (ref: any) => void;
-    handleChildChange: (data: any) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+};