Merge branch 'main' into dependabot/npm_and_yarn/packages/type/exampl…

…es/styled-components/url-parse-1.5.3

.all-contributorsrc

@@ -801,6 +801,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ColbyJohnIBM",
+      "name": "ColbyJohnIBM",
+      "avatar_url": "https://avatars.githubusercontent.com/u/19613692?v=4",
+      "profile": "https://github.com/ColbyJohnIBM",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -187,6 +187,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/adamalston"><img src="https://avatars.githubusercontent.com/u/18297826?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Alston</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=adamalston" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Kiittyka"><img src="https://avatars.githubusercontent.com/u/41021851?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Krithika S Udupa</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kiittyka" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/egriff38"><img src="https://avatars.githubusercontent.com/u/6627718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eshin Griffith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=egriff38" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ColbyJohnIBM"><img src="https://avatars.githubusercontent.com/u/19613692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ColbyJohnIBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ColbyJohnIBM" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/components/src/globals/scss/_helper-mixins.scss

@@ -55,7 +55,7 @@
 /// @example @include box-shadow;
 /// @group global-helpers
 @mixin box-shadow {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 6px $shadow;
 }
 
 /// Adds outline styles depending on specific type

packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -318,6 +318,7 @@ Array [
   "scale",
   "selectedLightUI",
   "selectedUI",
+  "shadow",
   "size2XLarge",
   "sizeLarge",
   "sizeMedium",

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -1212,21 +1212,46 @@ Map {
     },
     "TableExpandHeader": Object {
       "propTypes": Object {
-        "ariaLabel": [Function],
+        "ariaLabel": Object {
+          "args": Array [
+            Array [
+              [Function],
+              [Function],
+            ],
+          ],
+          "type": "oneOfType",
+        },
         "children": Object {
           "type": "node",
         },
         "className": Object {
           "type": "string",
         },
-        "enableExpando": Object {
+        "enableExpando": [Function],
+        "enableToggle": Object {
           "type": "bool",
         },
         "expandIconDescription": Object {
           "type": "string",
         },
-        "isExpanded": [Function],
-        "onExpand": [Function],
+        "isExpanded": Object {
+          "args": Array [
+            Array [
+              [Function],
+              [Function],
+            ],
+          ],
+          "type": "oneOfType",
+        },
+        "onExpand": Object {
+          "args": Array [
+            Array [
+              [Function],
+              [Function],
+            ],
+          ],
+          "type": "oneOfType",
+        },
       },
     },
     "TableExpandRow": Object {
@@ -1852,21 +1877,46 @@ Map {
   },
   "TableExpandHeader" => Object {
     "propTypes": Object {
-      "ariaLabel": [Function],
+      "ariaLabel": Object {
+        "args": Array [
+          Array [
+            [Function],
+            [Function],
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "children": Object {
         "type": "node",
       },
       "className": Object {
         "type": "string",
       },
-      "enableExpando": Object {
+      "enableExpando": [Function],
+      "enableToggle": Object {
         "type": "bool",
       },
       "expandIconDescription": Object {
         "type": "string",
       },
-      "isExpanded": [Function],
-      "onExpand": [Function],
+      "isExpanded": Object {
+        "args": Array [
+          Array [
+            [Function],
+            [Function],
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "onExpand": Object {
+        "args": Array [
+          Array [
+            [Function],
+            [Function],
+          ],
+        ],
+        "type": "oneOfType",
+      },
     },
   },
   "TableExpandRow" => Object {

packages/react/src/components/Accordion/AccordionItem.js

@@ -13,7 +13,7 @@ import React, { useState } from 'react';
 import { Text } from '../Text';
 import { match, keys } from '../../internal/keyboard';
 import { useId } from '../../internal/useId';
-import deprecate from '../../prop-types/deprecate.js';
+import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 const defaultRenderExpando = (props) => <button type="button" {...props} />;

packages/react/src/components/DataTable/TableExpandHeader.js

@@ -8,6 +8,7 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
+import deprecate from '../../prop-types/deprecate';
 import React from 'react';
 import { ChevronRight16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
@@ -18,6 +19,7 @@ const TableExpandHeader = ({
   ariaLabel,
   className: headerClassName,
   enableExpando,
+  enableToggle,
   isExpanded,
   onExpand,
   expandIconDescription,
@@ -33,7 +35,7 @@ const TableExpandHeader = ({
       className={className}
       data-previous-value={previousValue}
       {...rest}>
-      {!enableExpando ? null : (
+      {enableExpando || enableToggle ? (
         <button
           type="button"
           className={`${prefix}--table-expand__button`}
@@ -45,7 +47,7 @@ const TableExpandHeader = ({
             aria-label={expandIconDescription}
           />
         </button>
-      )}
+      ) : null}
       {children}
     </th>
   );
@@ -56,15 +58,27 @@ TableExpandHeader.propTypes = {
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
+  ariaLabel: PropTypes.oneOfType([
+    requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
+    requiredIfGivenPropIsTruthy('enableToggle', PropTypes.string),
+  ]),
+
   children: PropTypes.node,
 
   className: PropTypes.string,
 
+  /**
+   * The enableExpando prop is being replaced by enableToggle
+   */
+  enableExpando: deprecate(
+    PropTypes.bool,
+    'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'
+  ),
+
   /**
    * Specify whether an expand all button should be displayed
    */
-  enableExpando: PropTypes.bool,
+  enableToggle: PropTypes.bool,
 
   /**
    * The description of the chevron right icon, to be put in its SVG `<title>` element.
@@ -75,12 +89,18 @@ TableExpandHeader.propTypes = {
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
-  isExpanded: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
+  isExpanded: PropTypes.oneOfType([
+    requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
+    requiredIfGivenPropIsTruthy('enableToggle', PropTypes.bool),
+  ]),
 
   /**
    * Hook for when a listener initiates a request to expand the given row
    */
-  onExpand: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
+  onExpand: PropTypes.oneOfType([
+    requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
+    requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func),
+  ]),
 };
 
 export default TableExpandHeader;

packages/react/src/components/Modal/Modal.js

@@ -451,32 +451,6 @@ export default class Modal extends Component {
       alertDialogProps['aria-describedby'] = this.modalBodyId;
     }
 
-    const SecondaryButtonSet = () => {
-      if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-        return secondaryButtons.map(
-          ({ buttonText, onClick: onButtonClick }, i) => (
-            <Button
-              key={`${buttonText}-${i}`}
-              kind="secondary"
-              onClick={onButtonClick}>
-              {buttonText}
-            </Button>
-          )
-        );
-      }
-      if (secondaryButtonText) {
-        return (
-          <Button
-            kind="secondary"
-            onClick={onSecondaryButtonClick}
-            ref={this.secondaryButton}>
-            {secondaryButtonText}
-          </Button>
-        );
-      }
-      return null;
-    };
-
     const modalBody = (
       <div
         ref={this.innerModal}
@@ -514,7 +488,25 @@ export default class Modal extends Component {
         )}
         {!passiveModal && (
           <ButtonSet className={footerClasses}>
-            <SecondaryButtonSet />
+            {Array.isArray(secondaryButtons) && secondaryButtons.length <= 2
+              ? secondaryButtons.map(
+                  ({ buttonText, onClick: onButtonClick }, i) => (
+                    <Button
+                      key={`${buttonText}-${i}`}
+                      kind="secondary"
+                      onClick={onButtonClick}>
+                      {buttonText}
+                    </Button>
+                  )
+                )
+              : secondaryButtonText && (
+                  <Button
+                    kind="secondary"
+                    onClick={onSecondaryButtonClick}
+                    ref={this.secondaryButton}>
+                    {secondaryButtonText}
+                  </Button>
+                )}
             <Button
               kind={danger ? 'danger' : 'primary'}
               disabled={primaryButtonDisabled}

packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap

@@ -167,36 +167,34 @@ exports[`ModalWrapper should render 1`] = `
             <div
               className="bx--modal-footer bx--btn-set"
             >
-              <SecondaryButtonSet>
-                <Button
-                  dangerDescription="danger"
+              <Button
+                dangerDescription="danger"
+                disabled={false}
+                isExpressive={false}
+                kind="secondary"
+                onClick={[Function]}
+                size="default"
+                tabIndex={0}
+                tooltipAlignment="center"
+                tooltipPosition="top"
+                type="button"
+              >
+                <button
+                  aria-describedby={null}
+                  aria-pressed={null}
+                  className="bx--btn bx--btn--secondary"
                   disabled={false}
-                  isExpressive={false}
-                  kind="secondary"
+                  onBlur={[Function]}
                   onClick={[Function]}
-                  size="default"
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
                   tabIndex={0}
-                  tooltipAlignment="center"
-                  tooltipPosition="top"
                   type="button"
                 >
-                  <button
-                    aria-describedby={null}
-                    aria-pressed={null}
-                    className="bx--btn bx--btn--secondary"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </Button>
-              </SecondaryButtonSet>
+                  Cancel
+                </button>
+              </Button>
               <Button
                 dangerDescription="danger"
                 disabled={false}

packages/react/src/components/MultiSelect/MultiSelect.js

@@ -190,6 +190,9 @@ const MultiSelect = React.forwardRef(function MultiSelect(
       case ItemClick:
       case MenuKeyDownSpaceButton:
       case MenuKeyDownEnter:
+        if (changes.selectedItem === undefined) {
+          break;
+        }
         onItemChange(changes.selectedItem);
         break;
       case MenuKeyDownArrowDown:

packages/react/src/components/OverflowMenu/OverflowMenu-test.js

@@ -160,6 +160,15 @@ describe('OverflowMenu', () => {
       );
     });
 
+    it('fires onClick only once per button click', () => {
+      const mockOnClick = jest.fn();
+      const rootWrapper = mount(<OverflowMenu onClick={mockOnClick} />);
+
+      rootWrapper.find('button').simulate('click');
+
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
     it('should NOT toggle state in response to Enter or Space when the menu is open', () => {
       const enterKey = 13;
       const spaceKey = 32;

packages/react/src/components/OverflowMenu/OverflowMenu.js

@@ -278,6 +278,7 @@ class OverflowMenu extends Component {
   }
 
   handleClick = (evt) => {
+    evt.stopPropagation();
     if (!this._menuBody || !this._menuBody.contains(evt.target)) {
       this.setState({ open: !this.state.open });
       this.props.onClick(evt);