@carbon/react 1.54.0-rc.0 → 1.54.0

package/lib/components/Button/Button.js

@@ -12,17 +12,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
 var index = require('../IconButton/index.js');
 var events = require('../../tools/events.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var useId = require('../../internal/useId.js');
+var ButtonBase = require('./ButtonBase.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
 const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
@@ -34,18 +31,13 @@ function isIconOnlyButton(hasIconOnly, _kind) {
   }
   return false;
 }
-const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
-  let {
+const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(props, ref) {
+  const tooltipRef = React.useRef(null);
+  const {
     as,
     children,
-    className,
-    dangerDescription = 'danger',
-    disabled = false,
     hasIconOnly = false,
-    href,
     iconDescription,
-    isExpressive = false,
-    isSelected,
     kind = 'primary',
     onBlur,
     onClick,
@@ -54,92 +46,21 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     onMouseLeave,
     renderIcon: ButtonImageElement,
     size,
-    tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
-    type = 'button',
     ...rest
-  } = _ref;
-  const tooltipRef = React.useRef(null);
-  const prefix = usePrefix.usePrefix();
+  } = props;
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
     }
   };
-  const buttonClasses = cx__default["default"](className, {
-    [`${prefix}--btn`]: true,
-    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--xl`]: size === 'xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--2xl`]: size === '2xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--layout--size-${size}`]: size,
-    [`${prefix}--btn--${kind}`]: kind,
-    [`${prefix}--btn--disabled`]: disabled,
-    [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--btn--icon-only`]: hasIconOnly,
-    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
-  });
-  const commonProps = {
-    tabIndex,
-    className: buttonClasses,
-    ref
-  };
-  const buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, {
-    "aria-label": iconDescription,
-    className: `${prefix}--btn__icon`,
-    "aria-hidden": "true"
-  });
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, null);
-  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
-  let component = 'button';
-  const assistiveId = useId.useId('danger-description');
-  const {
-    'aria-pressed': ariaPressed,
-    'aria-describedby': ariaDescribedBy
-  } = rest;
-  let otherProps = {
-    disabled,
-    type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
-    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
-  };
-  const anchorProps = {
-    href
-  };
-  let assistiveText = null;
-  if (dangerButtonVariants.includes(kind)) {
-    assistiveText = /*#__PURE__*/React__default["default"].createElement("span", {
-      id: assistiveId,
-      className: `${prefix}--visually-hidden`
-    }, dangerDescription);
-  }
-  if (as) {
-    component = as;
-    otherProps = {
-      ...otherProps,
-      ...anchorProps
-    };
-  } else if (href && !disabled) {
-    component = 'a';
-    otherProps = anchorProps;
-  }
   if (!isIconOnlyButton(hasIconOnly)) {
-    return /*#__PURE__*/React__default["default"].createElement(component, {
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
-      onClick,
-      ...rest,
-      ...commonProps,
-      ...otherProps
-    }, assistiveText, children, buttonImage);
+    return /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: ref
+    }, props));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
@@ -156,7 +77,8 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {
       align = tooltipPosition;
     }
-    return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      ref: ref,
       as: as,
       align: align,
       label: iconDescription,
@@ -166,8 +88,9 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur,
-      onClick: events.composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
+      onClick: events.composeEventHandlers([onClick, handleClick]),
+      renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
+    }), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';

package/lib/components/Button/ButtonBase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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';
+import { ButtonProps } from './Button';
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export default ButtonBase;

package/lib/components/Button/ButtonBase.js

@@ -0,0 +1,119 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function ButtonBase(_ref, ref) {
+  let {
+    as,
+    children,
+    className,
+    dangerDescription = 'danger',
+    disabled = false,
+    hasIconOnly = false,
+    href,
+    iconDescription,
+    isExpressive = false,
+    isSelected,
+    kind = 'primary',
+    onBlur,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    renderIcon: ButtonImageElement,
+    size,
+    tabIndex,
+    type = 'button',
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const buttonClasses = cx__default["default"](className, {
+    [`${prefix}--btn`]: true,
+    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--xl`]: size === 'xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--2xl`]: size === '2xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
+    [`${prefix}--btn--${kind}`]: kind,
+    [`${prefix}--btn--disabled`]: disabled,
+    [`${prefix}--btn--expressive`]: isExpressive,
+    [`${prefix}--btn--icon-only`]: hasIconOnly && !className?.includes(`${prefix}--btn--icon-only`),
+    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
+  });
+  const commonProps = {
+    tabIndex,
+    className: buttonClasses,
+    ref
+  };
+  const buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, {
+    "aria-label": iconDescription,
+    className: `${prefix}--btn__icon`,
+    "aria-hidden": "true"
+  });
+  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
+  let component = 'button';
+  const assistiveId = useId.useId('danger-description');
+  const {
+    'aria-pressed': ariaPressed,
+    'aria-describedby': ariaDescribedBy
+  } = rest;
+  let otherProps = {
+    disabled,
+    type,
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
+    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
+  };
+  const anchorProps = {
+    href
+  };
+  let assistiveText = null;
+  if (dangerButtonVariants.includes(kind)) {
+    assistiveText = /*#__PURE__*/React__default["default"].createElement("span", {
+      id: assistiveId,
+      className: `${prefix}--visually-hidden`
+    }, dangerDescription);
+  }
+  if (as) {
+    component = as;
+    otherProps = {
+      ...otherProps,
+      ...anchorProps
+    };
+  } else if (href && !disabled) {
+    component = 'a';
+    otherProps = anchorProps;
+  }
+  return /*#__PURE__*/React__default["default"].createElement(component, {
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    onClick,
+    ...rest,
+    ...commonProps,
+    ...otherProps
+  }, assistiveText, children, buttonImage);
+});
+
+exports["default"] = ButtonBase;

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -167,6 +167,7 @@ function CodeSnippet(_ref) {
       feedback: feedback,
       feedbackTimeout: feedbackTimeout
     }), /*#__PURE__*/React__default["default"].createElement("code", {
+      "aria-live": "assertive",
       id: uid,
       ref: innerCodeRef
     }, children));

package/lib/components/IconButton/index.js

@@ -12,12 +12,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var Button = require('../Button/Button.js');
-require('../Button/Button.Skeleton.js');
 var cx = require('classnames');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var ButtonBase = require('../Button/ButtonBase.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -55,7 +54,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     enterDelayMs: enterDelayMs,
     label: label,
     leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     disabled: disabled,
     kind: kind,
     ref: ref,

package/lib/components/Menu/Menu.js

@@ -42,6 +42,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     onOpen,
     open,
     size = 'sm',
+    // TODO: #16004
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
     target = document.body,
     x = 0,
     y = 0,

package/lib/components/ModalWrapper/ModalWrapper.d.ts

@@ -59,7 +59,7 @@ export default class ModalWrapper extends React.Component<ModalWrapperProps, Mod
         shouldCloseAfterSubmit: PropTypes.Requireable<boolean>;
         status: PropTypes.Requireable<string>;
         triggerButtonIconDescription: PropTypes.Requireable<string>;
-        triggerButtonKind: PropTypes.Requireable<"primary" | "secondary" | "ghost" | "tertiary" | "danger" | "danger--primary" | "danger--ghost" | "danger--tertiary">;
+        triggerButtonKind: PropTypes.Requireable<"primary" | "secondary" | "danger" | "ghost" | "danger--primary" | "danger--ghost" | "danger--tertiary" | "tertiary">;
         withHeader: PropTypes.Requireable<boolean>;
     };
     triggerButton: React.RefObject<HTMLButtonElement>;

package/lib/components/Slider/Slider.Skeleton.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var SliderHandles = require('./SliderHandles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -31,7 +32,10 @@ const SliderSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const isRtl = document?.dir === 'rtl';
+  const [isRtl, setIsRtl] = React.useState(false);
+  useIsomorphicEffect["default"](() => {
+    setIsRtl(document ? document.dir === 'rtl' : false);
+  }, []);
   const containerClasses = cx__default["default"](`${prefix}--slider-container`, `${prefix}--skeleton`, {
     [`${prefix}--slider-container--two-handles`]: twoHandles,
     [`${prefix}--slider-container--rtl`]: isRtl

package/lib/components/StructuredList/StructuredList.d.ts

@@ -144,6 +144,10 @@ export interface StructuredListRowProps extends DivAttrs {
      * Provide a handler that is invoked on the key down event for the control
      */
     onKeyDown?(event: KeyboardEvent): void;
+    /**
+     * Mark if this row should be selectable
+     */
+    selection?: boolean;
 }
 export declare function StructuredListRow(props: StructuredListRowProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListRow {
@@ -172,6 +176,10 @@ export declare namespace StructuredListRow {
          * Provide a handler that is invoked on the key down event for the control,
          */
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Mark if this row should be selectable
+         */
+        selection: PropTypes.Requireable<boolean>;
     };
 }
 export interface StructuredListInputProps extends DivAttrs {

package/lib/components/StructuredList/StructuredList.js

@@ -17,6 +17,8 @@ var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
+var iconsReact = require('@carbon/icons-react');
+var useOutsideClick = require('../../internal/useOutsideClick.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,6 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _StructuredListCell, _RadioButtonChecked, _RadioButton;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListWrapper(props) {
@@ -147,6 +150,7 @@ function StructuredListRow(props) {
     className,
     head,
     onClick,
+    selection,
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
@@ -159,25 +163,35 @@ function StructuredListRow(props) {
   };
   const classes = cx__default["default"](`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
-    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === id || selectedRow === null),
+    // Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
     [`${prefix}--structured-list-row--selected`]: selectedRow === id
   }, className);
+  const itemRef = React.useRef(null);
+  const handleClick = () => {
+    setHasFocusWithin(false);
+  };
+  useOutsideClick.useOutsideClick(itemRef, handleClick);
   return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "row"
   }, other, {
-    className: classes,
-    "aria-busy": "true"
-  }), children) :
+    className: classes
+  }), selection && (_StructuredListCell || (_StructuredListCell = /*#__PURE__*/React__default["default"].createElement(StructuredListCell, {
+    head: true
+  }))), children) :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    "aria-busy": "true"
-  }, other, {
+  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
     role: "row",
     className: classes,
+    ref: itemRef,
     onClick: event => {
       setSelectedRow?.(id);
       onClick && onClick(event);
+      if (selection) {
+        // focus items only when selection is enabled
+        setHasFocusWithin(true);
+      }
     },
     onFocus: () => {
       setHasFocusWithin(true);
@@ -188,7 +202,7 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default["default"].createElement(GridRowContext.Provider, {
     value: value
-  }, children));
+  }, selection && /*#__PURE__*/React__default["default"].createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, null))), children));
 }
 StructuredListRow.propTypes = {
   /**
@@ -214,7 +228,11 @@ StructuredListRow.propTypes = {
   /**
    * Provide a handler that is invoked on the key down event for the control,
    */
-  onKeyDown: PropTypes__default["default"].func
+  onKeyDown: PropTypes__default["default"].func,
+  /**
+   * Mark if this row should be selectable
+   */
+  selection: PropTypes__default["default"].bool
 };
 function StructuredListInput(props) {
   const defaultId = useId.useId('structureListInput');

package/lib/feature-flags.js

@@ -34,5 +34,6 @@ FeatureFlags__namespace.merge({
   'enable-css-grid': true,
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
-  'enable-v12-tile-radio-icons': false
+  'enable-v12-tile-radio-icons': false,
+  'enable-v12-structured-list-visible-icons': false
 });

package/lib/internal/environment.js

@@ -14,6 +14,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document.createElement);
 
 exports.canUseDOM = canUseDOM;

package/lib/internal/keyboard/navigation.js

@@ -43,7 +43,9 @@ const getNextIndex = (key, index, arrayLength) => {
  */
 const DOCUMENT_POSITION_BROAD_PRECEDING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
@@ -51,7 +53,9 @@ typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_
  */
 const DOCUMENT_POSITION_BROAD_FOLLOWING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 
 /**
  * CSS selector that selects major nodes that are sequential-focusable.

package/lib/internal/useOutsideClick.js

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useEvent = require('./useEvent.js');
+var environment = require('./environment.js');
+
+function useOutsideClick(ref, callback) {
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
+  // treated as a constant as it will be false when executed in a Node.js
+  // environment and true when executed in the browser
+  if (environment.canUseDOM) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEvent.useEvent(window, 'click', event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        savedCallback.current(event);
+      }
+    });
+  }
+}
+
+exports.useOutsideClick = useOutsideClick;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.54.0-rc.0",
+  "version": "1.54.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.19.0-rc.0",
-    "@carbon/icons-react": "^11.39.0-rc.0",
+    "@carbon/feature-flags": "^0.19.0",
+    "@carbon/icons-react": "^11.39.0",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.54.0-rc.0",
+    "@carbon/styles": "^1.54.0",
     "@floating-ui/react": "^0.25.4",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
@@ -81,7 +81,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.34.0-rc.0",
+    "@carbon/themes": "^11.34.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4e0c7c56e1217ff9b73042006e4ea1d12a39e769"
+  "gitHead": "4bdd6802dd612af764ef76162141333d35bd84f4"
 }