@carbon/react 1.32.0-rc.0 → 1.33.0-rc.0

package/es/components/UIShell/Switcher.js

@@ -6,19 +6,23 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props, ref) {
+const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props, forwardRef) {
+  const switcherRef = useRef(null);
+  const ref = useMergedRefs([switcherRef, forwardRef]);
   const prefix = usePrefix();
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     className: customClassName,
-    children
+    children,
+    expanded
   } = props;
   const accessibilityLabel = {
     'aria-label': ariaLabel,
@@ -27,10 +31,42 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
   const className = cx(`${prefix}--switcher`, {
     [customClassName]: !!customClassName
   });
+  const handleSwitcherItemFocus = _ref => {
+    let {
+      currentIndex,
+      direction
+    } = _ref;
+    const enabledIndices = React__default.Children.toArray(children).reduce((acc, curr, i) => {
+      if (Object.keys(curr.props).length !== 0) {
+        acc.push(i);
+      }
+      return acc;
+    }, []);
+    const nextValidIndex = (() => {
+      const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
+      switch (enabledIndices[nextIndex]) {
+        case undefined:
+          if (direction === -1) {
+            return enabledIndices[enabledIndices.length - 1];
+          }
+          return 0;
+        default:
+          return enabledIndices[nextIndex];
+      }
+    })();
+    const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
+    switcherItem?.focus();
+  };
+  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
+    handleSwitcherItemFocus,
+    index,
+    key: index,
+    expanded
+  }));
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref,
     className: className
-  }, accessibilityLabel), children);
+  }, accessibilityLabel), childrenWithProps);
 });
 Switcher.displayName = 'Switcher';
 Switcher.propTypes = {
@@ -45,7 +81,11 @@ Switcher.propTypes = {
   /**
    * Optionally provide a custom class to apply to the underlying `<ul>` node
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /**
+   * Specify whether the panel is expanded
+   */
+  expanded: PropTypes.bool
 };
 var Switcher$1 = Switcher;
 

package/es/components/UIShell/SwitcherItem.js

@@ -12,18 +12,24 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
-const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherItem(props, ref) {
-  const prefix = usePrefix();
-  const {
+const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherItem(_ref, ref) {
+  let {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     className: customClassName,
     children,
     isSelected,
-    tabIndex = 0,
+    expanded,
+    tabIndex = expanded ? 0 : -1,
+    index,
+    handleSwitcherItemFocus,
+    onKeyDown = () => {},
     ...rest
-  } = props;
+  } = _ref;
+  const prefix = usePrefix();
   const className = cx(`${prefix}--switcher__item`, {
     [customClassName]: !!customClassName
   });
@@ -34,9 +40,30 @@ const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherIte
   const linkClassName = cx(`${prefix}--switcher__item-link`, {
     [`${prefix}--switcher__item-link--selected`]: isSelected
   });
+  function setTabFocus(evt) {
+    if (match(evt, ArrowDown)) {
+      evt.preventDefault();
+      handleSwitcherItemFocus?.({
+        currentIndex: index,
+        direction: 1
+      });
+    }
+    if (match(evt, ArrowUp)) {
+      evt.preventDefault();
+      handleSwitcherItemFocus?.({
+        currentIndex: index,
+        direction: -1
+      });
+    }
+  }
   return /*#__PURE__*/React__default.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({
+    onKeyDown: evt => {
+      setTabFocus(evt);
+      onKeyDown(evt);
+    }
+  }, rest, {
     ref: ref,
     className: linkClassName,
     tabIndex: tabIndex
@@ -56,6 +83,18 @@ SwitcherItem.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
+  /**
+   * event handlers
+   */
+  handleSwitcherItemFocus: PropTypes.func,
+  /**
+   * Specify the index of the SwitcherItem
+   */
+  index: PropTypes.number,
+  /**
+   * event handlers
+   */
+  onKeyDown: PropTypes.func,
   /**
    * Specify the tab index of the Link
    */

package/es/index.js

@@ -59,6 +59,7 @@ export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skel
 import './components/TextInput/index.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
 export { default as TileGroup } from './components/TileGroup/index.js';
+export { Toggle } from './components/Toggle/Toggle.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
@@ -110,7 +111,6 @@ export { default as NumberInputSkeleton } from './components/NumberInput/NumberI
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
-export { Toggle } from './components/Toggle/Toggle.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
 export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';

package/es/internal/FloatingMenu.js

@@ -142,6 +142,7 @@ class FloatingMenu extends React__default.Component {
     var _this;
     super(...arguments);
     _this = this;
+    // `true` if the menu body is mounted and calculation of the position is in progress.
     _defineProperty(this, "_placeInProgress", false);
     _defineProperty(this, "state", {
       /**
@@ -150,10 +151,36 @@ class FloatingMenu extends React__default.Component {
        */
       floatingPosition: undefined
     });
+    /**
+     * The cached reference to the menu container.
+     * Only used if React portal API is not available.
+     * @type {Element}
+     * @private
+     */
     _defineProperty(this, "_menuContainer", null);
+    /**
+     * The cached reference to the menu body.
+     * The reference is set via callback ref instead of object ref,
+     * in order to hook the event when the element ref gets available,
+     * which can be at a different timing from `cDM()`, presumably with SSR scenario.
+     * @type {Element}
+     * @private
+     */
     _defineProperty(this, "_menuBody", null);
+    /**
+     * Focus sentinel refs for focus trap behavior
+     */
     _defineProperty(this, "startSentinel", /*#__PURE__*/React__default.createRef());
     _defineProperty(this, "endSentinel", /*#__PURE__*/React__default.createRef());
+    /**
+     * Calculates the position in the viewport of floating menu,
+     * once this component is mounted or updated upon change in the following props:
+     *
+     * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
+     * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
+     *
+     * @private
+     */
     _defineProperty(this, "_updateMenuSize", function () {
       let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -227,6 +254,11 @@ class FloatingMenu extends React__default.Component {
         }
       }
     });
+    /**
+     * Set focus on floating menu content after menu placement.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
     _defineProperty(this, "_focusMenuContent", menuBody => {
       const primaryFocusNode = menuBody.querySelector(this.props.selectorPrimaryFocus || null);
       const tabbableNode = menuBody.querySelector(selectorTabbable);
@@ -243,6 +275,10 @@ class FloatingMenu extends React__default.Component {
         process.env.NODE_ENV !== "production" ? warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;
       }
     });
+    /**
+     * A callback for called when menu body is mounted or unmounted.
+     * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
+     */
     _defineProperty(this, "_menuRef", menuBody => {
       const {
         menuRef
@@ -253,6 +289,10 @@ class FloatingMenu extends React__default.Component {
         this._updateMenuSize();
       }
     });
+    /**
+     * @returns The child nodes, with styles containing the floating menu position.
+     * @private
+     */
     _defineProperty(this, "_getChildrenWithProps", () => {
       const {
         styles,
@@ -281,6 +321,12 @@ class FloatingMenu extends React__default.Component {
         }
       });
     });
+    /**
+     * Blur handler for when focus wrap behavior is enabled
+     * @param {Event} event
+     * @param {Element} event.target previously focused node
+     * @param {Element} event.relatedTarget current focused node
+     */
     _defineProperty(this, "handleBlur", _ref2 => {
       let {
         target: oldActiveNode,
@@ -302,33 +348,7 @@ class FloatingMenu extends React__default.Component {
         });
       }
     });
-  } // `true` if the menu body is mounted and calculation of the position is in progress.
-  /**
-   * The cached reference to the menu container.
-   * Only used if React portal API is not available.
-   * @type {Element}
-   * @private
-   */
-  /**
-   * The cached reference to the menu body.
-   * The reference is set via callback ref instead of object ref,
-   * in order to hook the event when the element ref gets available,
-   * which can be at a different timing from `cDM()`, presumably with SSR scenario.
-   * @type {Element}
-   * @private
-   */
-  /**
-   * Focus sentinel refs for focus trap behavior
-   */
-  /**
-   * Calculates the position in the viewport of floating menu,
-   * once this component is mounted or updated upon change in the following props:
-   *
-   * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
-   * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
-   *
-   * @private
-   */
+  }
   componentWillUnmount() {
     this.hResize.release();
   }
@@ -337,12 +357,6 @@ class FloatingMenu extends React__default.Component {
       this._updateMenuSize();
     });
   }
-  /**
-   * Set focus on floating menu content after menu placement.
-   * @param {Element} menuBody The DOM element of the menu body.
-   * @private
-   */
-
   componentDidUpdate(prevProps) {
     this._updateMenuSize(prevProps);
     const {
@@ -358,24 +372,6 @@ class FloatingMenu extends React__default.Component {
       }
     }
   }
-
-  /**
-   * A callback for called when menu body is mounted or unmounted.
-   * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
-   */
-
-  /**
-   * @returns The child nodes, with styles containing the floating menu position.
-   * @private
-   */
-
-  /**
-   * Blur handler for when focus wrap behavior is enabled
-   * @param {Event} event
-   * @param {Element} event.target previously focused node
-   * @param {Element} event.relatedTarget current focused node
-   */
-
   render() {
     const {
       context: prefix

package/es/internal/useControllableState.js

@@ -22,7 +22,7 @@ import { warning } from './warning.js';
  * @param {string} [config.name] - the name of the custom component
  * @param {any} config.defaultValue - the default value used for the state. This will be
  * the fallback value used if `value` is not defined.
- * @param {Function} config.onChange - an optional function that is called when
+ * @param {Function|undefined} config.onChange - an optional function that is called when
  * the value of the state changes. This is useful for communicating to parents of
  * controlled components that the value is requesting to be changed.
  * @param {any} config.value - a controlled value. Omitting this means that the state is

package/es/internal/useId.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useLayoutEffect, useEffect, useState } from 'react';
+import { useLayoutEffect, useEffect, useState, useId as useId$1 } from 'react';
 import setupGetInstanceId from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
@@ -39,6 +39,15 @@ function useId() {
       serverHandoffCompleted = true;
     }
   }, []);
+  if (useId$1) {
+    const id = nativeReactUseId(_prefix, prefix);
+    return id;
+  }
+  return id;
+}
+function nativeReactUseId(_prefix, prefix) {
+  const getId = useId$1();
+  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
   return id;
 }
 

package/es/internal/useMatchMedia.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useEffect } from 'react';
+import { canUseDOM } from './environment.js';
+
+function useMatchMedia(mediaQueryString) {
+  const [matches, setMatches] = useState(() => {
+    if (canUseDOM) {
+      const mediaQueryList = window.matchMedia(mediaQueryString);
+      return mediaQueryList.matches;
+    }
+    return false;
+  });
+  useEffect(() => {
+    function listener(event) {
+      setMatches(event.matches);
+    }
+    const mediaQueryList = window.matchMedia(mediaQueryString);
+    // Support fallback to `addListener` for broader browser support
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    }
+
+    // Make sure the media query list is in sync with the matches state
+    setMatches(mediaQueryList.matches);
+    return () => {
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.removeEventListener('change', listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, [mediaQueryString]);
+  return matches;
+}
+
+export { useMatchMedia };

package/lib/components/ComboBox/ComboBox.js

@@ -37,6 +37,14 @@ var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const {
+  keyDownArrowDown,
+  keyDownArrowUp,
+  keyDownEscape,
+  clickButton,
+  blurButton,
+  changeInput
+} = Downshift__default["default"].stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
@@ -126,6 +134,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
   const [isFocused, setIsFocused] = React.useState(false);
   const [prevSelectedItem, setPrevSelectedItem] = React.useState();
   const [doneInitialSelectedItem, setDoneInitialSelectedItem] = React.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const savedOnInputChange = React.useRef(onInputChange);
   if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
     setDoneInitialSelectedItem(true);
@@ -165,19 +174,43 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       textInput.current.focus();
     }
   };
-  const handleOnStateChange = (newState, _ref3) => {
-    let {
-      setHighlightedIndex
-    } = _ref3;
-    if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
+  const getHighlightedIndex = changes => {
+    if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
       const {
         inputValue
-      } = newState;
+      } = changes;
       const filteredItems = filterItems(items, itemToString, inputValue);
-      setHighlightedIndex(findHighlightedIndex({
+      const indexToHighlight = findHighlightedIndex({
         ...props,
         items: filteredItems
-      }, inputValue));
+      }, inputValue);
+      setHighlightedIndex(indexToHighlight);
+      return indexToHighlight;
+    }
+    return highlightedIndex;
+  };
+  const handleOnStateChange = (changes, _ref3) => {
+    let {
+      setHighlightedIndex: updateHighlightedIndex
+    } = _ref3;
+    const {
+      type
+    } = changes;
+    switch (type) {
+      case keyDownArrowDown:
+      case keyDownArrowUp:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case blurButton:
+      case keyDownEscape:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case clickButton:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case changeInput:
+        updateHighlightedIndex(getHighlightedIndex(changes));
+        break;
     }
   };
   const handleToggleClick = isOpen => event => {
@@ -239,7 +272,6 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       isOpen,
       inputValue,
       selectedItem,
-      highlightedIndex,
       clearSelection,
       toggleMenu
     } = _ref4;
@@ -337,6 +369,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       "aria-expanded": rootProps['aria-expanded'],
       "aria-haspopup": "listbox",
       "aria-controls": inputProps['aria-controls'],
+      "aria-owns": getMenuProps().id,
       title: textInput?.current?.value
     }, inputProps, rest, readOnlyEventHandlers, {
       readOnly: readOnly,
@@ -368,7 +401,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
-        isHighlighted: highlightedIndex === index$1 || selectedItem?.id && selectedItem?.id === item.id || false,
+        isHighlighted: highlightedIndex === index$1,
         title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
       }, itemProps), itemToElement ?
       /*#__PURE__*/

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -30,6 +30,11 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 class ContentSwitcher extends React__default["default"].Component {
   constructor() {
     super(...arguments);
+    /**
+     * The DOM references of child `<Switch>`.
+     * @type {Array<Element>}
+     * @private
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       selectedIndex: undefined
@@ -87,11 +92,6 @@ class ContentSwitcher extends React__default["default"].Component {
       }
     });
   }
-  /**
-   * The DOM references of child `<Switch>`.
-   * @type {Array<Element>}
-   * @private
-   */
   static getDerivedStateFromProps(_ref, state) {
     let {
       selectedIndex