@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/ComposedModal/ComposedModal.js

@@ -48,23 +48,19 @@ ModalBody.propTypes = {
    * Required props for the accessibility label of the header
    */
   ['aria-label']: requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
-
   /**
    * Specify the content to be placed in the ModalBody
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to the Modal Body node
    */
   className: PropTypes.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.bool,
-
   /**
    * Specify whether the modal contains scrolling content
    */
@@ -95,37 +91,30 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const button = useRef();
   const startSentinel = useRef();
   const endSentinel = 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
@@ -146,13 +135,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       });
     }
   }
-
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
       setisOpen(false);
     }
   }
-
   const modalClass = cx({
     [`${prefix}--modal`]: true,
     'is-visible': isOpen,
@@ -164,8 +151,9 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     [`${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.Children.toArray(children).map(child => {
     switch (child.type) {
@@ -174,13 +162,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
         return /*#__PURE__*/React__default.cloneElement(child, {
           closeModal: closeModal
         });
-
       case React__default.createElement(ModalFooter).type:
         return /*#__PURE__*/React__default.cloneElement(child, {
           closeModal: closeModal,
           inputref: button
         });
-
       default:
         return child;
     }
@@ -201,22 +187,18 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     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);
     }
@@ -253,67 +235,55 @@ ComposedModal.propTypes = {
    * Specify the aria-label for bx--modal-container
    */
   ['aria-label']: PropTypes.string,
-
   /**
    * Specify the aria-labelledby for bx--modal-container
    */
   ['aria-labelledby']: PropTypes.string,
-
   /**
    * Specify the content to be placed in the ComposedModal
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the modal root node
    */
   className: PropTypes.string,
-
   /**
    * Specify an optional className to be applied to the modal node
    */
   containerClassName: PropTypes.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.bool,
-
   /**
    * Specify whether or not the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes.bool,
-
   /**
    * Specify an optional handler for closing modal.
    * Returning `false` here prevents closing modal.
    */
   onClose: PropTypes.func,
-
   /**
    * Specify an optional handler for the `onKeyDown` event. Called for all
    * `onKeyDown` events that do not close the modal
    */
   onKeyDown: PropTypes.func,
-
   /**
    * Specify whether the Modal is currently open
    */
   open: PropTypes.bool,
   preventCloseOnClickOutside: PropTypes.bool,
-
   /**
    * Specify a CSS selector that matches the DOM element that should be
    * focused when the Modal opens
    */
   selectorPrimaryFocus: PropTypes.string,
-
   /**
    * Specify the CSS selectors that match the floating menus
    */
   selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * Specify the size variant.
    */

package/es/components/ComposedModal/ModalFooter.js

@@ -21,12 +21,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 {
@@ -41,7 +39,6 @@ function SecondaryButtonSet(_ref) {
       }, buttonText);
     });
   }
-
   if (secondaryButtonText) {
     return /*#__PURE__*/React__default.createElement(Button, {
       className: secondaryClassName,
@@ -49,10 +46,8 @@ function SecondaryButtonSet(_ref) {
       kind: "secondary"
     }, secondaryButtonText);
   }
-
   return null;
 }
-
 SecondaryButtonSet.propTypes = {
   closeModal: PropTypes.func,
   onRequestClose: PropTypes.func,
@@ -62,7 +57,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.node,
         onClick: PropTypes.func
@@ -71,7 +65,6 @@ SecondaryButtonSet.propTypes = {
         PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
-
     return null;
   },
   secondaryClassName: PropTypes.string
@@ -123,62 +116,51 @@ ModalFooter.propTypes = {
    * Pass in content that will be rendered in the Modal Footer
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the Modal Footer container
    */
   className: PropTypes.string,
-
   /**
    * Specify an optional function that is called whenever the modal is closed
    */
   closeModal: PropTypes.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.bool,
-
   /**
    * The `ref` callback for the primary button.
    */
   inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
-
   /**
    * Specify an optional function for when the modal is requesting to be
    * closed
    */
   onRequestClose: PropTypes.func,
-
   /**
    * Specify an optional function for when the modal is requesting to be
    * submitted
    */
   onRequestSubmit: PropTypes.func,
-
   /**
    * Specify whether the primary button should be disabled
    */
   primaryButtonDisabled: PropTypes.bool,
-
   /**
    * Specify the text for the primary button
    */
   primaryButtonText: PropTypes.string,
-
   /**
    * Specify a custom className to be applied to the primary button
    */
   primaryClassName: PropTypes.string,
-
   /**
    * Specify the text for the secondary button
    */
   secondaryButtonText: PropTypes.string,
-
   /**
    * Specify an array of config objects for secondary buttons
    * (`Array<{
@@ -191,7 +173,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.node,
         onClick: PropTypes.func
@@ -200,10 +181,8 @@ ModalFooter.propTypes = {
         PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
-
     return null;
   },
-
   /**
    * Specify a custom className to be applied to the secondary button
    */

package/es/components/ComposedModal/ModalHeader.js

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

package/es/components/ContainedList/ContainedList.js

@@ -12,50 +12,30 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 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,
@@ -71,7 +51,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.createElement("div", {
     className: classes
@@ -86,38 +66,31 @@ function ContainedList(_ref) {
     "aria-labelledby": labelId
   }, isActionSearch ? filteredChildren : renderedChildren));
 }
-
 ContainedList.propTypes = {
   /**
    * A slot for a possible interactive element to render.
    */
   action: PropTypes.node,
-
   /**
    * A collection of ContainedListItems to be rendered in the ContainedList
    */
   children: PropTypes.node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the dividing lines in between list items should be inset.
    */
   isInset: PropTypes.bool,
-
   /**
    * The kind of ContainedList you want to display
    */
   kind: PropTypes.oneOf(variants),
-
   /**
    * A label describing the contained list.
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-
   /**
    * Specify the size of the contained list.
    */

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

@@ -42,33 +42,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.node,
-
   /**
    * The content of this item. Must not contain any interactive elements. Use props.action to include those.
    */
   children: PropTypes.node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Whether this item is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide an optional function to be called when the item is clicked.
    */
   onClick: PropTypes.func,
-
   /**
    * Provide an optional icon to render in front of the item's content.
    */

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -19,35 +19,29 @@ import { ArrowRight, ArrowLeft } from '../../internal/keyboard/keys.js';
 class ContentSwitcher extends React__default.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "_switchRefs", []);
-
     _defineProperty(this, "state", {});
-
     _defineProperty(this, "handleItemRef", index => ref => {
       this._switchRefs[index] = ref;
     });
-
     _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 (matches(data, [ArrowRight, ArrowLeft])) {
         const nextIndex = getNextIndex(key, index, this.props.children.length);
         const children = React__default.Children.toArray(this.props.children);
-
         if (selectionMode === 'manual') {
           const switchRef = this._switchRefs[nextIndex];
           switchRef && switchRef.focus();
@@ -58,7 +52,8 @@ class ContentSwitcher extends React__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
@@ -76,7 +71,11 @@ class ContentSwitcher extends React__default.Component {
       }
     });
   }
-
+  /**
+   * The DOM references of child `<Switch>`.
+   * @type {Array<Element>}
+   * @private
+   */
   static getDerivedStateFromProps(_ref, state) {
     let {
       selectedIndex
@@ -89,7 +88,6 @@ class ContentSwitcher extends React__default.Component {
       prevSelectedIndex: selectedIndex
     };
   }
-
   render() {
     const prefix = this.context;
     const {
@@ -123,49 +121,39 @@ class ContentSwitcher extends React__default.Component {
       size
     })));
   }
-
 }
-
 _defineProperty(ContentSwitcher, "propTypes", {
   /**
    * Pass in Switch components to be rendered in the ContentSwitcher
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to the container node
    */
   className: PropTypes.string,
-
   /**
    * `true` to use the light variant.
    */
   light: deprecate(PropTypes.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.func.isRequired,
-
   /**
    * Specify a selected index for the initially selected content
    */
   selectedIndex: PropTypes.number,
-
   /**
    * Choose whether or not to automatically change selection on focus
    */
   selectionMode: PropTypes.oneOf(['automatic', 'manual']),
-
   /**
    * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
 });
-
 _defineProperty(ContentSwitcher, "contextType", PrefixContext);
-
 _defineProperty(ContentSwitcher, "defaultProps", {
   selectedIndex: 0,
   selectionMode: 'automatic',

package/es/components/ContextMenu/useContextMenu.js

@@ -11,12 +11,10 @@ import { useState, useEffect } from '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] = useState(false);
   const [position, setPosition] = useState([0, 0]);
-
   function openContextMenu(e) {
     e.preventDefault();
     const {
@@ -26,14 +24,11 @@ function useContextMenu() {
     setPosition([x, y]);
     setOpen(true);
   }
-
   function onClose() {
     setOpen(false);
   }
-
   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 () => {