Merge branch 'main' into dependabot/npm_and_yarn/packages/react/examp…

…les/custom-css-prefix/url-parse-1.5.3
carbon-design-system · Oct 6, 2021 · bfe03ce · bfe03ce
2 parents 8f96611 + 6e52398
commit bfe03ce
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 31 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/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 {

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/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} />;

diff --git a/packages/react/src/components/DataTable/TableExpandHeader.js b/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;
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/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:

diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -261,7 +261,7 @@ class FloatingMenu extends React.Component {
    *
    * @private
    */
-  _updateMenuSize = (prevProps = {}) => {
+  _updateMenuSize = (prevProps = {}, isAdjustment = false) => {
     const menuBody = this._menuBody;
     warning(
       menuBody,
@@ -279,7 +279,8 @@ class FloatingMenu extends React.Component {
 
     if (
       hasChangeInOffset(oldMenuOffset, menuOffset) ||
-      oldMenuDirection !== menuDirection
+      oldMenuDirection !== menuDirection ||
+      isAdjustment
     ) {
       const { flipped, triggerRef } = this.props;
       const { current: triggerEl } = triggerRef;
@@ -293,20 +294,30 @@ class FloatingMenu extends React.Component {
       // a) Menu body has `display:none`
       // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
       if ((menuSize.width > 0 && menuSize.height > 0) || !offset) {
-        this.setState({
-          floatingPosition: getFloatingPosition({
-            menuSize,
-            refPosition,
-            direction: menuDirection,
-            offset,
-            scrollX: window.pageXOffset,
-            scrollY: window.pageYOffset,
-            container: {
-              rect: this.props.target().getBoundingClientRect(),
-              position: getComputedStyle(this.props.target()).position,
-            },
-          }),
-        });
+        this.setState(
+          {
+            floatingPosition: getFloatingPosition({
+              menuSize,
+              refPosition,
+              direction: menuDirection,
+              offset,
+              scrollX: window.pageXOffset,
+              scrollY: window.pageYOffset,
+              container: {
+                rect: this.props.target().getBoundingClientRect(),
+                position: getComputedStyle(this.props.target()).position,
+              },
+            }),
+          },
+          () => {
+            if (!isAdjustment) {
+              const newMenuSize = menuBody.getBoundingClientRect();
+              if (newMenuSize !== menuSize) {
+                this._updateMenuSize(this.props, true);
+              }
+            }
+          }
+        );
       }
     }
   };