@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/Menu/MenuItem.js

@@ -46,7 +46,6 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
   const hoverIntentTimeout = useRef(null);
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
-
   function registerItem() {
     context.dispatch({
       type: 'registerItem',
@@ -56,7 +55,6 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
       }
     });
   }
-
   function openSubmenu() {
     const {
       x,
@@ -70,7 +68,6 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     });
     setSubmenuOpen(true);
   }
-
   function closeSubmenu() {
     setSubmenuOpen(false);
     setBoundaries({
@@ -78,56 +75,50 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
       y: -1
     });
   }
-
   function handleClick(e) {
     if (!isDisabled) {
       if (hasChildren) {
         openSubmenu();
       } else {
         context.state.requestCloseRoot(e);
-
         if (onClick) {
           onClick(e);
         }
       }
     }
   }
-
   function handleMouseEnter() {
     hoverIntentTimeout.current = setTimeout(() => {
       openSubmenu();
     }, hoverIntentDelay);
   }
-
   function handleMouseLeave() {
     clearTimeout(hoverIntentTimeout.current);
     closeSubmenu();
     menuItem.current.focus();
   }
-
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
       openSubmenu();
       e.stopPropagation();
     }
-
     if (match(e, Enter) || match(e, Space)) {
       handleClick(e);
     }
-
     if (rest.onKeyDown) {
       rest.onKeyDown(e);
     }
   }
-
   const classNames = cx(className, `${prefix}--menu-item`, {
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
-  }); // on first render, register this menuitem in the context's state
-  // (used for keyboard navigation)
+  });
 
+  // on first render, register this menuitem in the context's state
+  // (used for keyboard navigation)
   useEffect(() => {
-    registerItem(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    registerItem();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     role: "menuitem"
@@ -166,37 +157,30 @@ MenuItem.propTypes = {
    * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
    */
   children: PropTypes.node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the MenuItem is disabled or not.
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify the kind of the MenuItem.
    */
   kind: PropTypes.oneOf(['default', 'danger']),
-
   /**
    * A required label titling the MenuItem. Will be rendered as its text content.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * Provide an optional function to be called when the MenuItem is clicked.
    */
   onClick: PropTypes.func,
-
   /**
    * This prop is not intended for use. The only supported icons are Checkmarks to depict single- and multi-selects. This prop is used by MenuItemSelectable and MenuItemRadioGroup automatically.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
    */
@@ -218,15 +202,12 @@ const MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuI
     onChange,
     defaultValue: defaultSelected ?? false
   });
-
   function handleClick(e) {
     setChecked(!checked);
-
     if (onChange) {
       onChange(e);
     }
   }
-
   useEffect(() => {
     if (!context.state.hasIcons) {
       context.dispatch({
@@ -250,22 +231,18 @@ MenuItemSelectable.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the option should be selected by default.
    */
   defaultSelected: PropTypes.bool,
-
   /**
    * A required label titling this option.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * Provide an optional function to be called when the selection state changes.
    */
   onChange: PropTypes.func,
-
   /**
    * Pass a bool to props.selected to control the state of this option.
    */
@@ -294,12 +271,10 @@ MenuItemGroup.propTypes = {
    * A collection of MenuItems to be rendered within this group.
    */
   children: PropTypes.node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * A required label titling this group.
    */
@@ -323,15 +298,12 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuI
     onChange,
     defaultValue: defaultSelectedItem
   });
-
   function handleClick(item, e) {
     setSelection(item);
-
     if (onChange) {
       onChange(e);
     }
   }
-
   useEffect(() => {
     if (!context.state.hasIcons) {
       context.dispatch({
@@ -363,32 +335,26 @@ MenuItemRadioGroup.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Specify the default selected item. Must match the type of props.items.
    */
   defaultSelectedItem: PropTypes.any,
-
   /**
    * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
    */
   itemToString: PropTypes.func,
-
   /**
    * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
    */
   items: PropTypes.array,
-
   /**
    * A required label titling this radio group.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * Provide an optional function to be called when the selection changes.
    */
   onChange: PropTypes.func,
-
   /**
    * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
    */

package/es/components/MenuButton/index.js

@@ -18,7 +18,6 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const spacing = 4; // top and bottom spacing between the button and the menu. in px
-
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, forwardRef) {
@@ -45,7 +44,6 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     handleMousedown,
     handleClose
   } = useAttachedMenu(triggerRef);
-
   function handleClick() {
     if (triggerRef.current) {
       const {
@@ -55,11 +53,9 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
       hookOnClick();
     }
   }
-
   function handleOpen() {
     menuRef.current.style.width = `${width}px`;
   }
-
   const triggerClasses = cx(`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
   }, className);
@@ -93,27 +89,22 @@ MenuButton.propTypes = {
    * A collection of MenuItems to be rendered as actions for this MenuButton.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the MenuButton should be disabled, or not.
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify the type of button to be used as the base for the trigger button.
    */
   kind: PropTypes.oneOf(validButtonKinds),
-
   /**
    * Provide the label to be renderd on the trigger button.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * Specify the size of the button and menu.
    */

package/es/components/Modal/Modal.js

@@ -65,35 +65,29 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
   const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
   const modalCloseButtonClass = `${prefix}--modal-close`;
-
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
-
   function handleKeyDown(evt) {
     if (open) {
       if (match(evt, Escape)) {
         onRequestClose(evt);
       }
-
       if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
     }
   }
-
   function handleMousedown(evt) {
     if (innerModal.current && !innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
       onRequestClose(evt);
     }
   }
-
   function handleBlur(_ref2) {
     let {
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref2;
-
     if (open && currentActiveNode && oldActiveNode) {
       const {
         current: bodyNode
@@ -114,7 +108,6 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       });
     }
   }
-
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
@@ -141,16 +134,13 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     'aria-labelledby': getAriaLabelledBy
   } : {};
   const alertDialogProps = {};
-
   if (alert && passiveModal) {
     alertDialogProps.role = 'alert';
   }
-
   if (alert && !passiveModal) {
     alertDialogProps.role = 'alertdialog';
     alertDialogProps['aria-describedby'] = modalBodyId;
   }
-
   useEffect(() => {
     return () => {
       toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
@@ -163,22 +153,17 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     const initialFocus = focusContainerElement => {
       const containerElement = focusContainerElement || innerModal.current;
       const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
-
       if (primaryFocusElement) {
         return primaryFocusElement;
       }
-
       return button && button.current;
     };
-
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
-
       if (target) {
         target.focus();
       }
     };
-
     if (open) {
       focusButton(innerModal.current);
     }
@@ -266,115 +251,93 @@ Modal.propTypes = {
    * Should go hand in hand with the danger prop.
    */
   alert: PropTypes.bool,
-
   /**
    * Required props for the accessibility label of the header
    */
   ['aria-label']: requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
-
   /**
    * Provide the contents of your Modal
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the modal root node
    */
   className: PropTypes.string,
-
   /**
    * Specify an label for the close button of the modal; defaults to close
    */
   closeButtonLabel: PropTypes.string,
-
   /**
    * Specify whether the Modal is for dangerous actions
    */
   danger: PropTypes.bool,
-
   /**
    * Specify whether the modal contains scrolling content
    */
   hasScrollingContent: PropTypes.bool,
-
   /**
    * Specify the DOM element ID of the top-level node.
    */
   id: PropTypes.string,
-
   /**
    * Specify whether or not the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes.bool,
-
   /**
    * Specify a label to be read by screen readers on the modal root node
    */
   modalAriaLabel: PropTypes.string,
-
   /**
    * Specify the content of the modal header title.
    */
   modalHeading: PropTypes.node,
-
   /**
    * Specify the content of the modal header label.
    */
   modalLabel: PropTypes.node,
-
   /**
    * Specify a handler for keypresses.
    */
   onKeyDown: PropTypes.func,
-
   /**
    * Specify a handler for closing modal.
    * The handler should care of closing modal, e.g. changing `open` prop.
    */
   onRequestClose: PropTypes.func,
-
   /**
    * Specify a handler for "submitting" modal.
    * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
    */
   onRequestSubmit: PropTypes.func,
-
   /**
    * Specify a handler for the secondary button.
    * Useful if separate handler from `onRequestClose` is desirable
    */
   onSecondarySubmit: PropTypes.func,
-
   /**
    * Specify whether the Modal is currently open
    */
   open: PropTypes.bool,
-
   /**
    * Specify whether the modal should be button-less
    */
   passiveModal: PropTypes.bool,
-
   /**
    * Prevent closing on click outside of modal
    */
   preventCloseOnClickOutside: PropTypes.bool,
-
   /**
    * Specify whether the Button should be disabled, or not
    */
   primaryButtonDisabled: PropTypes.bool,
-
   /**
    * Specify the text for the primary button
    */
   primaryButtonText: PropTypes.node,
-
   /**
    * Specify the text for the secondary button
    */
   secondaryButtonText: PropTypes.node,
-
   /**
    * Specify an array of config objects for secondary buttons
    * (`Array<{
@@ -387,7 +350,6 @@ Modal.propTypes = {
       if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
         return new Error(`${propName} needs to be an array of two button config objects`);
       }
-
       const shape = {
         buttonText: PropTypes.node,
         onClick: PropTypes.func
@@ -396,27 +358,22 @@ Modal.propTypes = {
         PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
-
     return null;
   },
-
   /**
    * Specify a CSS selector that matches the DOM element that should
    * be focused when the Modal opens
    */
   selectorPrimaryFocus: PropTypes.string,
-
   /**
    * Specify CSS selectors that match DOM elements working as floating menus.
    * Focusing on those elements won't trigger "focus-wrap" behavior
    */
   selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * Specify if Enter key should be used as "submit" action
    */
   shouldSubmitOnEnter: PropTypes.bool,
-
   /**
    * Specify the size variant.
    */

package/es/components/ModalWrapper/ModalWrapper.js

@@ -17,24 +17,18 @@ let didWarnAboutDeprecation = false;
 class ModalWrapper extends React__default.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "triggerButton", /*#__PURE__*/React__default.createRef());
-
     _defineProperty(this, "modal", /*#__PURE__*/React__default.createRef());
-
     _defineProperty(this, "state", {
       isOpen: false
     });
-
     _defineProperty(this, "handleOpen", () => {
       this.setState({
         isOpen: true
       });
     });
-
     _defineProperty(this, "handleClose", evt => {
       const innerModal = this.modal.current.querySelector('div');
-
       if (this.modal.current && evt && !innerModal.contains(evt.target) && this.props.preventCloseOnClickOutside) {
         return;
       } else {
@@ -43,27 +37,22 @@ class ModalWrapper extends React__default.Component {
         }, () => this.triggerButton.current.focus());
       }
     });
-
     _defineProperty(this, "handleOnRequestSubmit", () => {
       const {
         handleSubmit,
         shouldCloseAfterSubmit
       } = this.props;
-
       if (handleSubmit && shouldCloseAfterSubmit) {
         handleSubmit();
         this.handleClose();
       }
-
       handleSubmit();
     });
   }
-
   if(__DEV__) {
     process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
     didWarnAboutDeprecation = true;
   }
-
   render() {
     const {
       children,
@@ -83,7 +72,8 @@ class ModalWrapper extends React__default.Component {
       // eslint-disable-line no-unused-vars
       ...other
     } = this.props;
-    const props = { ...other,
+    const props = {
+      ...other,
       selectorPrimaryFocus,
       open: this.state.isOpen,
       onRequestClose: this.handleClose,
@@ -109,9 +99,7 @@ class ModalWrapper extends React__default.Component {
       ref: this.modal
     }, props), children));
   }
-
 }
-
 _defineProperty(ModalWrapper, "propTypes", {
   buttonTriggerClassName: PropTypes.string,
   buttonTriggerText: PropTypes.node,
@@ -137,7 +125,6 @@ _defineProperty(ModalWrapper, "propTypes", {
   triggerButtonKind: PropTypes.oneOf(ButtonKinds),
   withHeader: PropTypes.bool
 });
-
 _defineProperty(ModalWrapper, "defaultProps", {
   shouldCloseAfterSubmit: true,
   primaryButtonText: 'Save',