@carbon/react 1.42.0-rc.0 → 1.42.0

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -44,22 +44,39 @@ FluidMultiSelect.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify the direction of the dropdown. Can be either top or bottom.
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes.string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes.string,
+  /**
+   * Provide a compare function that is used to determine the ordering of
+   * options. See 'sortItems' for more control.
+   */
+  compareItems: PropTypes.func,
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
   direction: PropTypes.oneOf(['top', 'bottom']),
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.object,
   /**
    * Specify a custom `id` for the `<input>`
    */
   id: PropTypes.string.isRequired,
   /**
-   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
-   * from their collection that are pre-selected
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
    */
-  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+  initialSelectedItems: PropTypes.array,
   /**
    * Specify if the currently selected value is invalid.
    */
@@ -97,20 +114,62 @@ FluidMultiSelect.propTypes = {
    * this field is for
    */
   label: PropTypes.node.isRequired,
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale: PropTypes.string,
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func,
   /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
+   * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
    */
-  renderSelectedItem: PropTypes.func,
+  onInputValueChange: PropTypes.func,
   /**
-   * In the case you want to control the dropdown selection entirely.
+   * `onMenuChange` is a utility for this controlled component to communicate to a
+   * consuming component that the menu was open(`true`)/closed(`false`).
    */
-  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+  onMenuChange: PropTypes.func,
+  /**
+   * Whether or not the Multiselect is readonly
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * For full control of the selected items
+   */
+  selectedItems: PropTypes.array,
+  /**
+   * Specify feedback (mode) of the selection.
+   * `top`: selected item jumps to top
+   * `fixed`: selected item stays at it's position
+   * `top-after-reopen`: selected item jump to top after reopen dropdown
+   */
+  selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
+  /**
+   * Provide a method that sorts all options in the control. Overriding this
+   * prop means that you also have to handle the sort logic for selected versus
+   * un-selected items. If you just want to control ordering, consider the
+   * `compareItems` prop instead.
+   *
+   * The return value should be a number whose sign indicates the relative order
+   * of the two elements: negative if a is less than b, positive if a is greater
+   * than b, and zero if they are equal.
+   *
+   * sortItems :
+   *   (items: Array<Item>, {
+   *     selectedItems: Array<Item>,
+   *     itemToString: Item => string,
+   *     compareItems: (itemA: string, itemB: string, {
+   *       locale: string
+   *     }) => number,
+   *     locale: string,
+   *   }) => Array<Item>
+   */
+  sortItems: PropTypes.func,
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
@@ -120,6 +179,10 @@ FluidMultiSelect.propTypes = {
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes.func,
+  /**
+   * Specify title to show title on hover
+   */
+  useTitleInItem: PropTypes.bool,
   /**
    * Specify whether the control is currently in warning state
    */

package/es/components/Notification/Notification.js

@@ -19,6 +19,7 @@ import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildre
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
+import wrapFocus from '../../internal/wrapFocus.js';
 import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
@@ -506,12 +507,40 @@ function ActionableNotification(_ref6) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: hideCloseButton
   });
+  const innerModal = useRef(null);
+  const startTrap = useRef(null);
+  const endTrap = useRef(null);
   const ref = useRef(null);
   useIsomorphicEffect(() => {
-    if (ref.current && hasFocus) {
-      ref.current.focus();
+    if (hasFocus) {
+      const button = document.querySelector('button.cds--actionable-notification__action-button');
+      button?.focus();
     }
   });
+  function handleBlur(_ref7) {
+    let {
+      target: oldActiveNode,
+      relatedTarget: currentActiveNode
+    } = _ref7;
+    if (isOpen && currentActiveNode && oldActiveNode) {
+      const {
+        current: bodyNode
+      } = innerModal;
+      const {
+        current: startTrapNode
+      } = startTrap;
+      const {
+        current: endTrapNode
+      } = endTrap;
+      wrapFocus({
+        bodyNode,
+        startTrapNode,
+        endTrapNode,
+        currentActiveNode,
+        oldActiveNode
+      });
+    }
+  }
   const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
@@ -529,8 +558,14 @@ function ActionableNotification(_ref6) {
     ref: ref,
     role: role,
     className: containerClassName,
-    "aria-labelledby": title ? id : subtitleId
-  }), /*#__PURE__*/React__default.createElement("div", {
+    "aria-labelledby": title ? id : subtitleId,
+    onBlur: handleBlur
+  }), /*#__PURE__*/React__default.createElement("span", {
+    ref: startTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default.createElement(NotificationIcon, {
     notificationType: inline ? 'inline' : 'toast',
@@ -548,14 +583,21 @@ function ActionableNotification(_ref6) {
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
+  }, subtitle), children))), /*#__PURE__*/React__default.createElement("div", {
+    ref: innerModal
+  }, actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
   }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  }));
+  })), /*#__PURE__*/React__default.createElement("span", {
+    ref: endTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"));
 }
 ActionableNotification.propTypes = {
   /**

package/es/components/UIShell/SideNavItems.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 React from 'react';
+interface SideNavItemsProps {
+    /**
+     * Provide a single icon as the child to `SideNavIcon` to render in the
+     * container
+     */
+    children: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded?: boolean;
+}
+declare const SideNavItems: React.FC<SideNavItemsProps>;
+export default SideNavItems;

package/es/components/UIShell/SideNavItems.js

@@ -22,11 +22,14 @@ const SideNavItems = _ref => {
   const childrenWithExpandedState = React__default.Children.map(children, child => {
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React__default.cloneElement(child, {
-        ...(CARBON_SIDENAV_ITEMS.includes(child.type?.displayName) ? {
-          isSideNavExpanded
-        } : {})
-      });
+      const childType = child.type;
+      if (childType && childType.displayName) {
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          ...(CARBON_SIDENAV_ITEMS.includes(childType.displayName) ? {
+            isSideNavExpanded
+          } : {})
+        });
+      }
     }
   });
   return /*#__PURE__*/React__default.createElement("ul", {
@@ -50,6 +53,5 @@ SideNavItems.propTypes = {
    */
   isSideNavExpanded: PropTypes.bool
 };
-var SideNavItems$1 = SideNavItems;
 
-export { SideNavItems$1 as default };
+export { SideNavItems as default };

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -54,22 +54,39 @@ FluidMultiSelect.propTypes = {
    */
   className: PropTypes__default["default"].string,
   /**
-   * Specify the direction of the dropdown. Can be either top or bottom.
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes__default["default"].string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes__default["default"].string,
+  /**
+   * Provide a compare function that is used to determine the ordering of
+   * options. See 'sortItems' for more control.
+   */
+  compareItems: PropTypes__default["default"].func,
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
   direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes__default["default"].object,
   /**
    * Specify a custom `id` for the `<input>`
    */
   id: PropTypes__default["default"].string.isRequired,
   /**
-   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
-   * from their collection that are pre-selected
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
    */
-  initialSelectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  initialSelectedItems: PropTypes__default["default"].array,
   /**
    * Specify if the currently selected value is invalid.
    */
@@ -107,20 +124,62 @@ FluidMultiSelect.propTypes = {
    * this field is for
    */
   label: PropTypes__default["default"].node.isRequired,
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale: PropTypes__default["default"].string,
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes__default["default"].func,
   /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
+   * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
    */
-  renderSelectedItem: PropTypes__default["default"].func,
+  onInputValueChange: PropTypes__default["default"].func,
   /**
-   * In the case you want to control the dropdown selection entirely.
+   * `onMenuChange` is a utility for this controlled component to communicate to a
+   * consuming component that the menu was open(`true`)/closed(`false`).
    */
-  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  onMenuChange: PropTypes__default["default"].func,
+  /**
+   * Whether or not the Multiselect is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
+  /**
+   * For full control of the selected items
+   */
+  selectedItems: PropTypes__default["default"].array,
+  /**
+   * Specify feedback (mode) of the selection.
+   * `top`: selected item jumps to top
+   * `fixed`: selected item stays at it's position
+   * `top-after-reopen`: selected item jump to top after reopen dropdown
+   */
+  selectionFeedback: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
+  /**
+   * Provide a method that sorts all options in the control. Overriding this
+   * prop means that you also have to handle the sort logic for selected versus
+   * un-selected items. If you just want to control ordering, consider the
+   * `compareItems` prop instead.
+   *
+   * The return value should be a number whose sign indicates the relative order
+   * of the two elements: negative if a is less than b, positive if a is greater
+   * than b, and zero if they are equal.
+   *
+   * sortItems :
+   *   (items: Array<Item>, {
+   *     selectedItems: Array<Item>,
+   *     itemToString: Item => string,
+   *     compareItems: (itemA: string, itemB: string, {
+   *       locale: string
+   *     }) => number,
+   *     locale: string,
+   *   }) => Array<Item>
+   */
+  sortItems: PropTypes__default["default"].func,
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
@@ -130,6 +189,10 @@ FluidMultiSelect.propTypes = {
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes__default["default"].func,
+  /**
+   * Specify title to show title on hover
+   */
+  useTitleInItem: PropTypes__default["default"].bool,
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/Notification/Notification.js

@@ -23,6 +23,7 @@ var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
+var wrapFocus = require('../../internal/wrapFocus.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -516,12 +517,40 @@ function ActionableNotification(_ref6) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: hideCloseButton
   });
+  const innerModal = React.useRef(null);
+  const startTrap = React.useRef(null);
+  const endTrap = React.useRef(null);
   const ref = React.useRef(null);
   useIsomorphicEffect["default"](() => {
-    if (ref.current && hasFocus) {
-      ref.current.focus();
+    if (hasFocus) {
+      const button = document.querySelector('button.cds--actionable-notification__action-button');
+      button?.focus();
     }
   });
+  function handleBlur(_ref7) {
+    let {
+      target: oldActiveNode,
+      relatedTarget: currentActiveNode
+    } = _ref7;
+    if (isOpen && currentActiveNode && oldActiveNode) {
+      const {
+        current: bodyNode
+      } = innerModal;
+      const {
+        current: startTrapNode
+      } = startTrap;
+      const {
+        current: endTrapNode
+      } = endTrap;
+      wrapFocus["default"]({
+        bodyNode,
+        startTrapNode,
+        endTrapNode,
+        currentActiveNode,
+        oldActiveNode
+      });
+    }
+  }
   const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
@@ -539,8 +568,14 @@ function ActionableNotification(_ref6) {
     ref: ref,
     role: role,
     className: containerClassName,
-    "aria-labelledby": title ? id : subtitleId
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    "aria-labelledby": title ? id : subtitleId,
+    onBlur: handleBlur
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: startTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
     notificationType: inline ? 'inline' : 'toast',
@@ -558,14 +593,21 @@ function ActionableNotification(_ref6) {
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
+  }, subtitle), children))), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: innerModal
+  }, actionButtonLabel && /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
   }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  }));
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: endTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"));
 }
 ActionableNotification.propTypes = {
   /**

package/lib/components/UIShell/SideNavItems.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 React from 'react';
+interface SideNavItemsProps {
+    /**
+     * Provide a single icon as the child to `SideNavIcon` to render in the
+     * container
+     */
+    children: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded?: boolean;
+}
+declare const SideNavItems: React.FC<SideNavItemsProps>;
+export default SideNavItems;

package/lib/components/UIShell/SideNavItems.js

@@ -32,11 +32,14 @@ const SideNavItems = _ref => {
   const childrenWithExpandedState = React__default["default"].Children.map(children, child => {
     if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React__default["default"].cloneElement(child, {
-        ...(_utils.CARBON_SIDENAV_ITEMS.includes(child.type?.displayName) ? {
-          isSideNavExpanded
-        } : {})
-      });
+      const childType = child.type;
+      if (childType && childType.displayName) {
+        return /*#__PURE__*/React__default["default"].cloneElement(child, {
+          ...(_utils.CARBON_SIDENAV_ITEMS.includes(childType.displayName) ? {
+            isSideNavExpanded
+          } : {})
+        });
+      }
     }
   });
   return /*#__PURE__*/React__default["default"].createElement("ul", {
@@ -60,6 +63,5 @@ SideNavItems.propTypes = {
    */
   isSideNavExpanded: PropTypes__default["default"].bool
 };
-var SideNavItems$1 = SideNavItems;
 
-exports["default"] = SideNavItems$1;
+exports["default"] = SideNavItems;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.42.0-rc.0",
+  "version": "1.42.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,9 +48,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.30.0-rc.0",
+    "@carbon/icons-react": "^11.30.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.42.0-rc.0",
+    "@carbon/styles": "^1.42.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -78,7 +78,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.26.0",
+    "@carbon/themes": "^11.27.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -140,5 +140,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "5f47b0432b76b562cb152b481fe82d21e74da6d9"
+  "gitHead": "7e1982e232895b6223b88bca246f754ecd2609ac"
 }