@carbon/react 1.29.1 → 1.30.0-rc.0

package/lib/components/ComposedModal/ComposedModal.js

@@ -58,23 +58,19 @@ ModalBody.propTypes = {
    * Required props for the accessibility label of the header
    */
   ['aria-label']: requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string),
-
   /**
    * Specify the content to be placed in the ModalBody
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be added to the Modal Body node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * 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: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the modal contains scrolling content
    */
@@ -105,37 +101,30 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const button = React.useRef();
   const startSentinel = React.useRef();
   const endSentinel = React.useRef();
-
   if (open !== prevOpen) {
     setisOpen(open);
     setPrevOpen(open);
   }
-
   function handleKeyDown(evt) {
     // Esc key
     if (evt.which === 27) {
       closeModal(evt);
     }
-
     onKeyDown(evt);
   }
-
   function handleMousedown(evt) {
     if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
       return;
     }
-
     if (innerModal.current && !innerModal.current.contains(evt.target)) {
       closeModal(evt);
     }
   }
-
   function handleBlur(_ref3) {
     let {
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref3;
-
     if (open && currentActiveNode && oldActiveNode) {
       const {
         current: bodyNode
@@ -156,13 +145,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       });
     }
   }
-
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
       setisOpen(false);
     }
   }
-
   const modalClass = cx__default["default"]({
     [`${prefix}--modal`]: true,
     'is-visible': isOpen,
@@ -174,8 +161,9 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     [`${prefix}--modal-container--${size}`]: size,
     [`${prefix}--modal-container--full-width`]: isFullWidth,
     [containerClassName]: containerClassName
-  }); // Generate aria-label based on Modal Header label if one is not provided (L253)
+  });
 
+  // Generate aria-label based on Modal Header label if one is not provided (L253)
   let generatedAriaLabel;
   const childrenWithProps = React__default["default"].Children.toArray(children).map(child => {
     switch (child.type) {
@@ -184,13 +172,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
           closeModal: closeModal
         });
-
       case React__default["default"].createElement(ModalFooter.ModalFooter).type:
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
           closeModal: closeModal,
           inputref: button
         });
-
       default:
         return child;
     }
@@ -211,22 +197,18 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     const focusButton = focusContainerElement => {
       if (focusContainerElement) {
         const primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
-
         if (primaryFocusElement) {
           primaryFocusElement.focus();
           return;
         }
-
         if (button.current) {
           button.current.focus();
         }
       }
     };
-
     if (!open) {
       return;
     }
-
     if (innerModal.current) {
       focusButton(innerModal.current);
     }
@@ -263,67 +245,55 @@ ComposedModal.propTypes = {
    * Specify the aria-label for bx--modal-container
    */
   ['aria-label']: PropTypes__default["default"].string,
-
   /**
    * Specify the aria-labelledby for bx--modal-container
    */
   ['aria-labelledby']: PropTypes__default["default"].string,
-
   /**
    * Specify the content to be placed in the ComposedModal
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the modal root node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify an optional className to be applied to the modal node
    */
   containerClassName: PropTypes__default["default"].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: PropTypes__default["default"].bool,
-
   /**
    * Specify whether or not the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes__default["default"].bool,
-
   /**
    * Specify an optional handler for closing modal.
    * Returning `false` here prevents closing modal.
    */
   onClose: PropTypes__default["default"].func,
-
   /**
    * Specify an optional handler for the `onKeyDown` event. Called for all
    * `onKeyDown` events that do not close the modal
    */
   onKeyDown: PropTypes__default["default"].func,
-
   /**
    * Specify whether the Modal is currently open
    */
   open: PropTypes__default["default"].bool,
   preventCloseOnClickOutside: PropTypes__default["default"].bool,
-
   /**
    * Specify a CSS selector that matches the DOM element that should be
    * focused when the Modal opens
    */
   selectorPrimaryFocus: PropTypes__default["default"].string,
-
   /**
    * Specify the CSS selectors that match the floating menus
    */
   selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-
   /**
    * Specify the size variant.
    */

package/lib/components/ComposedModal/ModalFooter.js

@@ -31,12 +31,10 @@ function SecondaryButtonSet(_ref) {
     closeModal,
     onRequestClose
   } = _ref;
-
   function handleRequestClose(evt) {
     closeModal(evt);
     onRequestClose(evt);
   }
-
   if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
     return secondaryButtons.map((_ref2, i) => {
       let {
@@ -51,7 +49,6 @@ function SecondaryButtonSet(_ref) {
       }, buttonText);
     });
   }
-
   if (secondaryButtonText) {
     return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
       className: secondaryClassName,
@@ -59,10 +56,8 @@ function SecondaryButtonSet(_ref) {
       kind: "secondary"
     }, secondaryButtonText);
   }
-
   return null;
 }
-
 SecondaryButtonSet.propTypes = {
   closeModal: PropTypes__default["default"].func,
   onRequestClose: PropTypes__default["default"].func,
@@ -72,7 +67,6 @@ SecondaryButtonSet.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__default["default"].node,
         onClick: PropTypes__default["default"].func
@@ -81,7 +75,6 @@ SecondaryButtonSet.propTypes = {
         PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
-
     return null;
   },
   secondaryClassName: PropTypes__default["default"].string
@@ -133,62 +126,51 @@ ModalFooter.propTypes = {
    * Pass in content that will be rendered in the Modal Footer
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a custom className to be applied to the Modal Footer container
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify an optional function that is called whenever the modal is closed
    */
   closeModal: PropTypes__default["default"].func,
-
   /**
    * 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: PropTypes__default["default"].bool,
-
   /**
    * The `ref` callback for the primary button.
    */
   inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any
   })]),
-
   /**
    * Specify an optional function for when the modal is requesting to be
    * closed
    */
   onRequestClose: PropTypes__default["default"].func,
-
   /**
    * Specify an optional function for when the modal is requesting to be
    * submitted
    */
   onRequestSubmit: PropTypes__default["default"].func,
-
   /**
    * Specify whether the primary button should be disabled
    */
   primaryButtonDisabled: PropTypes__default["default"].bool,
-
   /**
    * Specify the text for the primary button
    */
   primaryButtonText: PropTypes__default["default"].string,
-
   /**
    * Specify a custom className to be applied to the primary button
    */
   primaryClassName: PropTypes__default["default"].string,
-
   /**
    * Specify the text for the secondary button
    */
   secondaryButtonText: PropTypes__default["default"].string,
-
   /**
    * Specify an array of config objects for secondary buttons
    * (`Array<{
@@ -201,7 +183,6 @@ ModalFooter.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__default["default"].node,
         onClick: PropTypes__default["default"].func
@@ -210,10 +191,8 @@ ModalFooter.propTypes = {
         PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
-
     return null;
   },
-
   /**
    * Specify a custom className to be applied to the secondary button
    */

package/lib/components/ComposedModal/ModalHeader.js

@@ -38,12 +38,10 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-
   function handleCloseButtonClick(evt) {
     closeModal(evt);
     buttonOnClick();
   }
-
   const headerClass = cx__default["default"]({
     [`${prefix}--modal-header`]: true,
     [customClassName]: customClassName
@@ -89,53 +87,43 @@ ModalHeader.propTypes = {
    * clicked
    */
   buttonOnClick: PropTypes__default["default"].func,
-
   /**
    * Specify the content to be placed in the ModalHeader
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the modal header
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify an optional className to be applied to the modal close node
    */
   closeClassName: PropTypes__default["default"].string,
-
   /**
    * Specify an optional className to be applied to the modal close icon node
    */
   closeIconClassName: PropTypes__default["default"].string,
-
   /**
    * Provide an optional function to be called when the modal is closed
    */
   closeModal: PropTypes__default["default"].func,
-
   /**
    * Specify a description for the close icon that can be read by screen
    * readers
    */
   iconDescription: PropTypes__default["default"].string,
-
   /**
    * Specify an optional label to be displayed
    */
   label: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the modal header label
    */
   labelClassName: PropTypes__default["default"].string,
-
   /**
    * Specify an optional title to be displayed
    */
   title: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the modal heading
    */

package/lib/components/ContainedList/ContainedList.js

@@ -22,50 +22,30 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const variants = ['on-page', 'disclosed'];
-
 function filterChildren(children) {
-  var _children$type;
-
   if (Array.isArray(children)) {
-    return children === null || children === void 0 ? void 0 : children.filter(child => {
-      var _child$type;
-
-      return !['Search', 'ExpandableSearch'].includes(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName);
-    });
+    return children?.filter(child => !['Search', 'ExpandableSearch'].includes(child?.type?.displayName));
   }
-
-  if (children && !['Search', 'ExpandableSearch'].includes(children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName)) {
+  if (children && !['Search', 'ExpandableSearch'].includes(children?.type?.displayName)) {
     return children;
   }
-
   return null;
 }
-
 function renderChildren(children) {
-  var _children$type2;
-
   if (Array.isArray(children)) {
     children.map((child, index) => {
-      var _child$type2;
-
-      if (index === 0 && ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Search') {
+      if (index === 0 && child.type?.displayName === 'Search') {
         return child;
       }
-
       return child;
     });
   }
-
-  if (children && ((_children$type2 = children.type) === null || _children$type2 === void 0 ? void 0 : _children$type2.displayName) === 'Search') {
+  if (children && children.type?.displayName === 'Search') {
     return children;
   }
-
   return children;
 }
-
 function ContainedList(_ref) {
-  var _action$type;
-
   let {
     action,
     children,
@@ -81,7 +61,7 @@ function ContainedList(_ref) {
     [`${prefix}--contained-list--inset-rulers`]: isInset
   }, `${prefix}--contained-list--${kind}`, `${prefix}--contained-list--${size}`, className);
   const filteredChildren = filterChildren(children);
-  const isActionSearch = ['Search', 'ExpandableSearch'].includes(action === null || action === void 0 ? void 0 : (_action$type = action.type) === null || _action$type === void 0 ? void 0 : _action$type.displayName);
+  const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
   const renderedChildren = renderChildren(children);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes
@@ -96,38 +76,31 @@ function ContainedList(_ref) {
     "aria-labelledby": labelId
   }, isActionSearch ? filteredChildren : renderedChildren));
 }
-
 ContainedList.propTypes = {
   /**
    * A slot for a possible interactive element to render.
    */
   action: PropTypes__default["default"].node,
-
   /**
    * A collection of ContainedListItems to be rendered in the ContainedList
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the dividing lines in between list items should be inset.
    */
   isInset: PropTypes__default["default"].bool,
-
   /**
    * The kind of ContainedList you want to display
    */
   kind: PropTypes__default["default"].oneOf(variants),
-
   /**
    * A label describing the contained list.
    */
   label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
-
   /**
    * Specify the size of the contained list.
    */

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -52,33 +52,27 @@ function ContainedListItem(_ref) {
     className: `${prefix}--contained-list-item__action`
   }, action));
 }
-
 ContainedListItem.propTypes = {
   /**
    * A slot for a possible interactive element to render within the item.
    */
   action: PropTypes__default["default"].node,
-
   /**
    * The content of this item. Must not contain any interactive elements. Use props.action to include those.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Whether this item is disabled.
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide an optional function to be called when the item is clicked.
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Provide an optional icon to render in front of the item's content.
    */

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -29,35 +29,29 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 class ContentSwitcher extends React__default["default"].Component {
   constructor() {
     super(...arguments);
-
     _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
-
     _rollupPluginBabelHelpers.defineProperty(this, "state", {});
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => ref => {
       this._switchRefs[index] = ref;
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleChildChange", data => {
       const {
         selectionMode
-      } = this.props; // the currently selected child index
-
+      } = this.props;
+      // the currently selected child index
       const {
         selectedIndex
-      } = this.state; // the newly selected child index
-
+      } = this.state;
+      // the newly selected child index
       const {
         index
       } = data;
       const {
         key
       } = data;
-
       if (match.matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
         const nextIndex = navigation.getNextIndex(key, index, this.props.children.length);
         const children = React__default["default"].Children.toArray(this.props.children);
-
         if (selectionMode === 'manual') {
           const switchRef = this._switchRefs[nextIndex];
           switchRef && switchRef.focus();
@@ -68,7 +62,8 @@ class ContentSwitcher extends React__default["default"].Component {
             const child = children[this.state.selectedIndex];
             const switchRef = this._switchRefs[this.state.selectedIndex];
             switchRef && switchRef.focus();
-            this.props.onChange({ ...data,
+            this.props.onChange({
+              ...data,
               index: this.state.selectedIndex,
               name: child.props.name,
               text: child.props.text
@@ -86,7 +81,11 @@ class ContentSwitcher extends React__default["default"].Component {
       }
     });
   }
-
+  /**
+   * The DOM references of child `<Switch>`.
+   * @type {Array<Element>}
+   * @private
+   */
   static getDerivedStateFromProps(_ref, state) {
     let {
       selectedIndex
@@ -99,7 +98,6 @@ class ContentSwitcher extends React__default["default"].Component {
       prevSelectedIndex: selectedIndex
     };
   }
-
   render() {
     const prefix = this.context;
     const {
@@ -133,49 +131,39 @@ class ContentSwitcher extends React__default["default"].Component {
       size
     })));
   }
-
 }
-
 _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
   /**
    * Pass in Switch components to be rendered in the ContentSwitcher
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be added to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * `true` to use the light variant.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ContentSwitcher` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-
   /**
    * Specify an `onChange` handler that is called whenever the ContentSwitcher
    * changes which item is selected
    */
   onChange: PropTypes__default["default"].func.isRequired,
-
   /**
    * Specify a selected index for the initially selected content
    */
   selectedIndex: PropTypes__default["default"].number,
-
   /**
    * Choose whether or not to automatically change selection on focus
    */
   selectionMode: PropTypes__default["default"].oneOf(['automatic', 'manual']),
-
   /**
    * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 });
-
 _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "contextType", usePrefix.PrefixContext);
-
 _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "defaultProps", {
   selectedIndex: 0,
   selectionMode: 'automatic',

package/lib/components/ContextMenu/useContextMenu.js

@@ -15,12 +15,10 @@ var React = require('react');
  * @param {Element|Document|Window|object} [trigger=document] The element or ref which should trigger the Menu on right-click
  * @returns {object} Props object to pass onto Menu component
  */
-
 function useContextMenu() {
   let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
   const [open, setOpen] = React.useState(false);
   const [position, setPosition] = React.useState([0, 0]);
-
   function openContextMenu(e) {
     e.preventDefault();
     const {
@@ -30,14 +28,11 @@ function useContextMenu() {
     setPosition([x, y]);
     setOpen(true);
   }
-
   function onClose() {
     setOpen(false);
   }
-
   React.useEffect(() => {
-    const el = (trigger === null || trigger === void 0 ? void 0 : trigger.current) ?? trigger;
-
+    const el = trigger?.current ?? trigger;
     if (el && el instanceof Element || el instanceof Document || el instanceof Window) {
       el.addEventListener('contextmenu', openContextMenu);
       return () => {