@carbon/react 1.31.3 → 1.32.0-rc.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -13,6 +13,7 @@ import useResizeObserver from 'use-resize-observer/polyfilled';
 import { ChevronDown } from '@carbon/icons-react';
 import Copy from '../Copy/Copy.js';
 import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 import CopyButton from '../CopyButton/CopyButton.js';
 import uniqueId from '../../tools/uniqueId.js';
 import copy from 'copy-to-clipboard';

package/es/components/ComboButton/index.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
 import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 import { IconButton } from '../IconButton/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -0,0 +1,70 @@
+import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode } from 'react';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Specify the content to be placed in the ModalBody. */
+    children?: ReactNode;
+    /**
+     * Provide whether the modal content has a form element.
+     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     */
+    hasForm?: boolean;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+}
+export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the aria-label for bx--modal-container
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the aria-labelledby for bx--modal-container
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Specify the content to be placed in the ComposedModal
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an optional className to be applied to the modal node
+     */
+    containerClassName?: string;
+    /**
+     * Specify whether the primary button should be replaced with danger button.
+     * Note that this prop is not applied if you render primary/danger button by yourself
+     */
+    danger?: boolean;
+    /**
+     * Specify whether the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Specify an optional handler for closing modal.
+     * Returning `false` here prevents closing modal.
+     */
+    onClose?(event: MouseEvent): void | boolean;
+    /**
+     * Called for all `onKeyDown` events that do not close the modal
+     */
+    onKeyDown?(evt: KeyboardEvent): void;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /** Specify the CSS selectors that match the floating menus. */
+    selectorsFloatingMenus?: Array<string | null | undefined>;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
+export default ComposedModal;

package/es/components/ComposedModal/ComposedModal.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect } from 'react';
+import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
@@ -15,6 +16,8 @@ import toggleClass from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
   let {
@@ -25,12 +28,7 @@ const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const contentClass = cx({
-    [`${prefix}--modal-content`]: true,
-    [`${prefix}--modal-content--with-form`]: hasForm,
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent,
-    [customClassName]: customClassName
-  });
+  const contentClass = cx(`${prefix}--modal-content`, hasForm && `${prefix}--modal-content--with-form`, hasScrollingContent && `${prefix}--modal-scroll-content`, customClassName);
   const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
     role: 'region'
@@ -47,6 +45,7 @@ ModalBody.propTypes = {
   /**
    * Required props for the accessibility label of the header
    */
+  // @ts-expect-error: Built-in prop-types > TS logic doesn't jive well with custom validators
   ['aria-label']: requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
   /**
    * Specify the content to be placed in the ModalBody
@@ -85,28 +84,38 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     ...rest
   } = _ref2;
   const prefix = usePrefix();
-  const [isOpen, setisOpen] = useState(open);
-  const [prevOpen, setPrevOpen] = useState(open);
-  const innerModal = useRef();
-  const button = useRef();
-  const startSentinel = useRef();
-  const endSentinel = useRef();
-  if (open !== prevOpen) {
-    setisOpen(open);
-    setPrevOpen(open);
-  }
+  const [isOpen, setIsOpen] = useState(!!open);
+  const [wasOpen, setWasOpen] = useState(!!open);
+  const innerModal = useRef(null);
+  const button = useRef(null);
+  const startSentinel = useRef(null);
+  const endSentinel = useRef(null);
+
+  // Kepp track of modal open/close state
+  // and propagate it to the document.body
+  useEffect(() => {
+    if (open !== wasOpen) {
+      setIsOpen(!!open);
+      setWasOpen(!!open);
+      toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
+    }
+  }, [open, wasOpen, prefix]);
+  // Remove the document.body className on unmount
+  useEffect(() => {
+    return () => {
+      toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   function handleKeyDown(evt) {
-    // Esc key
-    if (evt.which === 27) {
+    if (match(evt, Escape)) {
       closeModal(evt);
     }
-    onKeyDown(evt);
+    onKeyDown?.(evt);
   }
   function handleMousedown(evt) {
-    if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
-      return;
-    }
-    if (innerModal.current && !innerModal.current.contains(evt.target)) {
+    const isInside = innerModal.current?.contains(evt.target);
+    if (!isInside && !preventCloseOnClickOutside) {
       closeModal(evt);
     }
   }
@@ -115,7 +124,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref3;
-    if (open && currentActiveNode && oldActiveNode) {
+    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -127,62 +136,46 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       } = endSentinel;
       wrapFocus({
         bodyNode,
-        startSentinelNode,
-        endSentinelNode,
+        startTrapNode: startSentinelNode,
+        endTrapNode: endSentinelNode,
         currentActiveNode,
         oldActiveNode,
-        selectorsFloatingMenus
+        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
-      setisOpen(false);
+      setIsOpen(false);
     }
   }
-  const modalClass = cx({
-    [`${prefix}--modal`]: true,
-    'is-visible': isOpen,
-    [customClassName]: customClassName,
-    [`${prefix}--modal--danger`]: danger
-  });
-  const containerClass = cx({
-    [`${prefix}--modal-container`]: true,
-    [`${prefix}--modal-container--${size}`]: size,
-    [`${prefix}--modal-container--full-width`]: isFullWidth,
-    [containerClassName]: containerClassName
-  });
+  const modalClass = cx(`${prefix}--modal`, isOpen && 'is-visible', danger && `${prefix}--modal--danger`, customClassName);
+  const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
   let generatedAriaLabel;
   const childrenWithProps = React__default.Children.toArray(children).map(child => {
-    switch (child.type) {
-      case React__default.createElement(ModalHeader).type:
-        generatedAriaLabel = child.props.label;
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          closeModal: closeModal
-        });
-      case React__default.createElement(ModalFooter).type:
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          closeModal: closeModal,
-          inputref: button
-        });
+    switch (true) {
+      case isElement(child) && child.type === React__default.createElement(ModalHeader).type:
+        {
+          const el = child;
+          generatedAriaLabel = el.props.label;
+          return /*#__PURE__*/React__default.cloneElement(el, {
+            closeModal
+          });
+        }
+      case isElement(child) && child.type === React__default.createElement(ModalFooter).type:
+        {
+          const el = child;
+          return /*#__PURE__*/React__default.cloneElement(el, {
+            closeModal,
+            inputref: button
+          });
+        }
       default:
         return child;
     }
   });
-  useEffect(() => {
-    if (prevOpen !== isOpen) {
-      toggleClass(document.body, `${prefix}--body--with-modal-open`, isOpen);
-    }
-  });
-  useEffect(() => {
-    return () => toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    toggleClass(document.body, `${prefix}--body--with-modal-open`, open);
-  }, [open, prefix]);
   useEffect(() => {
     const focusButton = focusContainerElement => {
       if (focusContainerElement) {
@@ -257,7 +250,7 @@ ComposedModal.propTypes = {
    */
   danger: PropTypes.bool,
   /**
-   * Specify whether or not the Modal content should have any inner padding.
+   * Specify whether the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes.bool,
   /**
@@ -290,9 +283,7 @@ ComposedModal.propTypes = {
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
 };
 ComposedModal.defaultProps = {
-  onKeyDown: () => {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'
 };
-var ComposedModal$1 = ComposedModal;
 
-export { ModalBody, ComposedModal$1 as default };
+export { ModalBody, ComposedModal as default };

package/es/components/ComposedModal/ModalFooter.d.ts

@@ -0,0 +1,71 @@
+import React, { type ReactNode, type MouseEvent, type Ref } from 'react';
+interface SecondaryButtonProps {
+    buttonText: ReactNode;
+    onClick(evt: MouseEvent): void;
+}
+export interface SecondaryButtonSetProps {
+    closeModal(evt: MouseEvent): void;
+    onRequestClose(evt: MouseEvent): void;
+    secondaryButtonText?: string;
+    secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
+    secondaryClassName?: string;
+}
+export interface ModalFooterProps {
+    /**
+     * Pass in content that will be rendered in the Modal Footer
+     */
+    children: ReactNode;
+    /**
+     * Specify a custom className to be applied to the Modal Footer container
+     */
+    className?: string;
+    /**
+     * Specify an optional function that is called whenever the modal is closed
+     */
+    closeModal?(evt: MouseEvent): void;
+    /**
+     * Specify whether the primary button should be replaced with danger button.
+     * Note that this prop is not applied if you render primary/danger button by yourself
+     */
+    danger?: boolean;
+    /**
+     * The `ref` callback for the primary button.
+     */
+    inputref?: Ref<HTMLButtonElement>;
+    /**
+     * Specify an optional function for when the modal is requesting to be
+     * closed
+     */
+    onRequestClose?(): void;
+    /**
+     * Specify an optional function for when the modal is requesting to be
+     * submitted
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specify whether the primary button should be disabled
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Specify a custom className to be applied to the primary button
+     */
+    primaryClassName?: string;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
+    /**
+     * Specify a custom className to be applied to the secondary button
+     */
+    secondaryClassName?: string;
+}
+export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLElement>>;
+export {};

package/es/components/ComposedModal/ModalFooter.js

@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -87,11 +88,7 @@ const ModalFooter = /*#__PURE__*/React__default.forwardRef(function ModalFooter(
     ...rest
   } = _ref3;
   const prefix = usePrefix();
-  const footerClass = cx({
-    [`${prefix}--modal-footer`]: true,
-    [customClassName]: customClassName,
-    [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
-  });
+  const footerClass = cx(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
   const secondaryButtonProps = {
     closeModal,
     secondaryButtons,
@@ -99,17 +96,21 @@ const ModalFooter = /*#__PURE__*/React__default.forwardRef(function ModalFooter(
     secondaryClassName,
     onRequestClose
   };
-  return /*#__PURE__*/React__default.createElement(ButtonSet, _extends({
-    className: footerClass
-  }, rest, {
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
-    onClick: onRequestSubmit,
-    className: primaryClassName,
-    disabled: primaryButtonDisabled,
-    kind: danger ? 'danger' : 'primary',
-    ref: inputref
-  }, primaryButtonText), children);
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
+    React__default.createElement(ButtonSet, _extends({
+      className: footerClass
+    }, rest, {
+      ref: ref
+    }), /*#__PURE__*/React__default.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
+      onClick: onRequestSubmit,
+      className: primaryClassName,
+      disabled: primaryButtonDisabled,
+      kind: danger ? 'danger' : 'primary',
+      ref: inputref
+    }, primaryButtonText), children)
+  );
 });
 ModalFooter.propTypes = {
   /**
@@ -132,6 +133,7 @@ ModalFooter.propTypes = {
   /**
    * The `ref` callback for the primary button.
    */
+  // @ts-expect-error: Invalid derived type
   inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
@@ -188,10 +190,11 @@ ModalFooter.propTypes = {
    */
   secondaryClassName: PropTypes.string
 };
+const noop = () => {};
 ModalFooter.defaultProps = {
-  onRequestClose: () => {},
-  onRequestSubmit: () => {},
-  closeModal: () => {}
+  onRequestClose: noop,
+  onRequestSubmit: noop,
+  closeModal: noop
 };
 
 export { ModalFooter };

package/es/components/ComposedModal/ModalHeader.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { type ReactNode, type MouseEvent, type HTMLAttributes } from 'react';
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
+export interface ModalHeaderProps extends DivProps {
+    /**
+     * Provide an optional function to be called when the close button is
+     * clicked
+     */
+    buttonOnClick?(event: MouseEvent): void;
+    /**
+     * Specify the content to be placed in the ModalHeader
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal header
+     */
+    className?: string;
+    /**
+     * Specify an optional className to be applied to the modal close node
+     */
+    closeClassName?: string;
+    /**
+     * Specify an optional className to be applied to the modal close icon node
+     */
+    closeIconClassName?: string;
+    /**
+     * Provide an optional function to be called when the modal is closed
+     */
+    closeModal?(event: MouseEvent): void;
+    /**
+     * Specify a description for the close icon that can be read by screen
+     * readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify an optional label to be displayed
+     */
+    label?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal header label
+     */
+    labelClassName?: string;
+    /**
+     * Specify an optional title to be displayed
+     */
+    title?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal heading
+     */
+    titleClassName?: string;
+}
+export declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/ComposedModal/ModalHeader.js

@@ -29,29 +29,14 @@ const ModalHeader = /*#__PURE__*/React__default.forwardRef(function ModalHeader(
   } = _ref;
   const prefix = usePrefix();
   function handleCloseButtonClick(evt) {
-    closeModal(evt);
-    buttonOnClick();
+    closeModal?.(evt);
+    buttonOnClick?.(evt);
   }
-  const headerClass = cx({
-    [`${prefix}--modal-header`]: true,
-    [customClassName]: customClassName
-  });
-  const labelClass = cx({
-    [`${prefix}--modal-header__label ${prefix}--type-delta`]: true,
-    [labelClassName]: labelClassName
-  });
-  const titleClass = cx({
-    [`${prefix}--modal-header__heading ${prefix}--type-beta`]: true,
-    [titleClassName]: titleClassName
-  });
-  const closeClass = cx({
-    [`${prefix}--modal-close`]: true,
-    [closeClassName]: closeClassName
-  });
-  const closeIconClass = cx({
-    [`${prefix}--modal-close__icon`]: true,
-    [closeIconClassName]: closeIconClassName
-  });
+  const headerClass = cx(`${prefix}--modal-header`, customClassName);
+  const labelClass = cx(`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
+  const titleClass = cx(`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
+  const closeClass = cx(`${prefix}--modal-close`, closeClassName);
+  const closeIconClass = cx(`${prefix}--modal-close__icon`, closeIconClassName);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: headerClass
   }, rest, {
@@ -120,9 +105,7 @@ ModalHeader.propTypes = {
   titleClassName: PropTypes.string
 };
 ModalHeader.defaultProps = {
-  iconDescription: 'Close',
-  buttonOnClick: () => {},
-  closeModal: () => {}
+  iconDescription: 'Close'
 };
 
 export { ModalHeader };

package/es/components/ComposedModal/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
+export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
+export { ModalFooter, type ModalFooterProps } from './ModalFooter';

package/es/components/ContainedList/ContainedList.js

@@ -70,7 +70,18 @@ function ContainedList(_ref) {
       max: 'xl'
     },
     className: `${prefix}--contained-list__action`
-  }, action)), children && /*#__PURE__*/React__default.createElement("ul", {
+  }, action)), children &&
+  /*#__PURE__*/
+  /**
+   * Webkit removes implicit "list" semantics when "list-style-type: none" is set.
+   * Explicitly setting the "list" role ensures assistive technology in webkit
+   * browsers correctly announce the semantics.
+   *
+   * Ref https://bugs.webkit.org/show_bug.cgi?id=170179#c1
+   */
+  // eslint-disable-next-line jsx-a11y/no-redundant-roles
+  React__default.createElement("ul", {
+    role: "list",
     "aria-labelledby": labelId
   }, isActionSearch ? filteredChildren : renderedChildren));
 }