@carbon/react 1.69.0 → 1.70.0-rc.0

package/lib/components/ContextMenu/useContextMenu.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 /**
- * @param {Element|Document|Window|object} [trigger=document] The element or ref which should trigger the Menu on right-click
- * @returns {object} Props object to pass onto Menu component
+ * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
+ * @returns {ContextMenuProps} Props object to pass onto Menu component
  */
 function useContextMenu() {
   let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
@@ -22,8 +22,8 @@ function useContextMenu() {
   function openContextMenu(e) {
     e.preventDefault();
     const {
-      x,
-      y
+      clientX: x,
+      clientY: y
     } = e;
     setPosition([x, y]);
     setOpen(true);
@@ -32,11 +32,12 @@ function useContextMenu() {
     setOpen(false);
   }
   React.useEffect(() => {
-    const el = trigger?.current ?? trigger;
-    if (el && el instanceof Element || el instanceof Document || el instanceof Window) {
-      el.addEventListener('contextmenu', openContextMenu);
+    const el = trigger instanceof Element || trigger instanceof Document || trigger instanceof Window ? trigger : trigger.current;
+    if (el) {
+      const eventListener = e => openContextMenu(e);
+      el.addEventListener('contextmenu', eventListener);
       return () => {
-        el.removeEventListener('contextmenu', openContextMenu);
+        el.removeEventListener('contextmenu', eventListener);
       };
     }
   }, [trigger]);

package/lib/components/DataTable/DataTable.d.ts

@@ -6,6 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import type { MouseEvent } from 'react';
 import type { DataTableSortState } from './state/sortStates';
 import Table from './Table';
 import TableActionList from './TableActionList';
@@ -131,13 +132,13 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     }) => {
         ariaLabel: string;
         'aria-label': string;
-        checked?: boolean;
+        checked?: boolean | undefined;
         disabled?: boolean | undefined;
         id: string;
         indeterminate?: boolean;
         name: string;
         onSelect: (e: React.MouseEvent<HTMLInputElement>) => void;
-        radio?: boolean;
+        radio?: boolean | undefined;
         [key: string]: unknown;
     };
     getToolbarProps: (getToolbarPropsArgs?: {

package/lib/components/Dropdown/Dropdown.d.ts

@@ -12,7 +12,7 @@ type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
+export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey>, React.RefAttributes<HTMLDivElement> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -127,7 +127,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * Provide the title text that will be read by a screen reader when
      * visiting this control
      */
-    titleText?: ReactNode;
+    titleText: ReactNode;
     /**
      * The dropdown type, `default` or `inline`
      */

package/lib/components/FeatureFlags/index.d.ts

@@ -14,6 +14,7 @@ interface FeatureFlagsProps {
     enableV12Overflowmenu?: boolean;
     enableTreeviewControllable?: boolean;
     enableExperimentalFocusWrapWithoutSentinels?: boolean;
+    enableV12DynamicFloatingStyles?: boolean;
 }
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -25,7 +26,7 @@ declare const FeatureFlagContext: React.Context<any>;
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, }: FeatureFlagsProps): JSX.Element;
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -38,6 +39,7 @@ declare namespace FeatureFlags {
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;
         enableTreeviewControllable: PropTypes.Requireable<boolean>;
         enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+        enableV12DynamicFloatingStyles: PropTypes.Requireable<boolean>;
     };
 }
 /**

package/lib/components/FeatureFlags/index.js

@@ -38,7 +38,8 @@ function FeatureFlags(_ref) {
     enableV12TileRadioIcons = false,
     enableV12Overflowmenu = false,
     enableTreeviewControllable = false,
-    enableExperimentalFocusWrapWithoutSentinels = false
+    enableExperimentalFocusWrapWithoutSentinels = false,
+    enableV12DynamicFloatingStyles = false
   } = _ref;
   const parentScope = React.useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
@@ -48,6 +49,7 @@ function FeatureFlags(_ref) {
     'enable-v12-overflowmenu': enableV12Overflowmenu,
     'enable-treeview-controllable': enableTreeviewControllable,
     'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     ...flags
   };
   const [scope, updateScope] = React.useState(() => {
@@ -84,7 +86,8 @@ FeatureFlags.propTypes = {
   enableV12TileRadioIcons: PropTypes__default["default"].bool,
   enableV12Overflowmenu: PropTypes__default["default"].bool,
   enableTreeviewControllable: PropTypes__default["default"].bool,
-  enableExperimentalFocusWrapWithoutSentinels: PropTypes__default["default"].bool
+  enableExperimentalFocusWrapWithoutSentinels: PropTypes__default["default"].bool,
+  enableV12DynamicFloatingStyles: PropTypes__default["default"].bool
 };
 
 /**

package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -27,12 +27,12 @@ const FluidComboBoxSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const wrapperClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--list-box__wrapper--fluid`
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`

package/lib/components/FluidDropdown/FluidDropdown.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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';
+export interface FluidDropdownSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidDropdownSkeleton: React.FC<FluidDropdownSkeletonProps>;
+export default FluidDropdownSkeleton;

package/lib/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -27,13 +27,12 @@ const FluidDropdownSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const wrapperContainerClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
-  const wrapperClasses = cx__default["default"](`${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: wrapperContainerClasses
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`
@@ -45,6 +44,5 @@ FluidDropdownSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FluidDropdownSkeleton$1 = FluidDropdownSkeleton;
 
-exports["default"] = FluidDropdownSkeleton$1;
+exports["default"] = FluidDropdownSkeleton;

package/lib/components/FluidDropdown/FluidDropdown.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { DropdownProps } from '../Dropdown';
+export interface OnChangeData<ItemType> {
+    selectedItem: ItemType | null;
+}
+export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the direction of the dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * 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
+     */
+    initialSelectedItem?: ItemType;
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidDropdown` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.JSXElementConstructor<ItemType> | null;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list.
+     */
+    itemToString?(item: ItemType | null): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(data: OnChangeData<ItemType>): void;
+    /**
+     * An optional callback to render the currently selected item as a react element instead of only
+     * as a string.
+     */
+    renderSelectedItem?(item: ItemType): React.ReactNode;
+    /**
+     * In the case you want to control the dropdown selection entirely.
+     * This value is the selected item from the list of items
+     */
+    selectedItem?: ItemType;
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidDropdown: React.ForwardRefExoticComponent<Omit<FluidDropdownProps<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default FluidDropdown;

package/lib/components/FluidDropdown/FluidDropdown.js

@@ -130,6 +130,5 @@ FluidDropdown.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidDropdown$1 = FluidDropdown;
 
-exports["default"] = FluidDropdown$1;
+exports["default"] = FluidDropdown;

package/lib/components/FluidDropdown/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 FluidDropdown from './FluidDropdown';
+import { type FluidDropdownProps } from './FluidDropdown';
+import { type FluidDropdownSkeletonProps } from './FluidDropdown.Skeleton';
+export type { FluidDropdownProps, FluidDropdownSkeletonProps };
+export default FluidDropdown;
+export { FluidDropdown };
+export { default as FluidDropdownSkeleton } from './FluidDropdown.Skeleton';

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -27,12 +27,12 @@ const FluidMultiSelectSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const wrapperClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--list-box__wrapper--fluid`
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`

package/lib/components/FluidSelect/FluidSelect.Skeleton.js

@@ -27,12 +27,12 @@ const FluidSelectSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const wrapperClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--list-box__wrapper--fluid`
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.d.ts

@@ -1,20 +1,9 @@
-import PropTypes from 'prop-types';
+import React from 'react';
 export interface FluidTextAreaSkeletonProps {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
     className?: string;
 }
-declare function FluidTextAreaSkeleton({ className, ...other }: {
-    [x: string]: any;
-    className: any;
-}): void;
-declare namespace FluidTextAreaSkeleton {
-    var propTypes: {
-        /**
-         * Specify an optional className to be applied to the outer FluidForm wrapper
-         */
-        className: PropTypes.Requireable<string>;
-    };
-}
+declare const FluidTextAreaSkeleton: React.FC<FluidTextAreaSkeletonProps>;
 export default FluidTextAreaSkeleton;

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -9,18 +9,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-require('react');
-require('classnames');
+var React = require('react');
+var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.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);
 
-function FluidTextAreaSkeleton(_ref) {
-  usePrefix.usePrefix();
-}
+const FluidTextAreaSkeleton = _ref => {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"](`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className)
+  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--text-area`
+  })));
+};
 FluidTextAreaSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper

package/lib/components/Notification/Notification.js

@@ -288,9 +288,7 @@ function ToastNotification(_ref4) {
   }, caption), children), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
     notificationType: "toast",
     onClick: handleCloseButtonClick,
-    "aria-hidden": "true",
-    "aria-label": deprecatedAriaLabel || ariaLabel,
-    tabIndex: -1
+    "aria-label": deprecatedAriaLabel || ariaLabel
   }));
 }
 ToastNotification.propTypes = {
@@ -425,9 +423,7 @@ function InlineNotification(_ref5) {
   }, subtitle), children)), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
     notificationType: "inline",
     onClick: handleCloseButtonClick,
-    "aria-hidden": "true",
-    "aria-label": ariaLabel,
-    tabIndex: -1
+    "aria-label": ariaLabel
   }));
 }
 InlineNotification.propTypes = {

package/lib/components/NumberInput/NumberInput.Skeleton.d.ts

@@ -15,8 +15,12 @@ export interface NumberInputSkeletonProps extends HTMLAttributes<HTMLDivElement>
      * Specify whether the label should be hidden, or not
      */
     hideLabel?: boolean;
+    /**
+     * Specify the size of the Number Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function NumberInputSkeleton({ hideLabel, className, ...rest }: NumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function NumberInputSkeleton({ hideLabel, className, size, ...rest }: NumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberInputSkeleton {
     var propTypes: {
         /**
@@ -27,6 +31,10 @@ declare namespace NumberInputSkeleton {
          * Specify whether the label should be hidden, or not
          */
         hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Number Input.
+         */
+        size: PropTypes.Requireable<string>;
     };
 }
 export default NumberInputSkeleton;

package/lib/components/NumberInput/NumberInput.Skeleton.js

@@ -25,6 +25,7 @@ function NumberInputSkeleton(_ref) {
   let {
     hideLabel,
     className,
+    size = 'md',
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -33,7 +34,7 @@ function NumberInputSkeleton(_ref) {
   }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--number ${prefix}--skeleton`
+    className: `${prefix}--number ${prefix}--skeleton ${prefix}--number--${size}`
   }));
 }
 NumberInputSkeleton.propTypes = {
@@ -44,7 +45,11 @@ NumberInputSkeleton.propTypes = {
   /**
    * Specify whether the label should be hidden, or not
    */
-  hideLabel: PropTypes__default["default"].bool
+  hideLabel: PropTypes__default["default"].bool,
+  /**
+   * Specify the size of the Number Input.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 };
 
 exports["default"] = NumberInputSkeleton;

package/lib/components/Popover/index.js

@@ -138,6 +138,8 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
     middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && react.flip({
+      fallbackPlacements: align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
+      fallbackStrategy: 'initialPlacement',
       fallbackAxisSideDirection: 'start'
     }), react.arrow({
       element: caretRef

package/lib/components/Tabs/Tabs.js

@@ -1195,7 +1195,7 @@ function TabPanels(_ref13) {
     }
   });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(children, (child, index) => {
-    return /*#__PURE__*/React__default["default"].createElement(TabPanelContext.Provider, {
+    return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabPanelContext.Provider, {
       value: index
     }, /*#__PURE__*/React__default["default"].cloneElement(child, {
       ref: element => {

package/lib/components/UIShell/HeaderPanel.js

@@ -72,7 +72,7 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
     const focusedElement = document.activeElement;
     setLastClickedElement(focusedElement);
     const childJsxElement = children;
-    if (childJsxElement.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/lib/feature-flags.js

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

package/lib/index.js

@@ -33,6 +33,7 @@ var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
 var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
 require('./components/ContainedList/index.js');
 var index$6 = require('./components/ContentSwitcher/index.js');
+var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
 var DangerButton = require('./components/DangerButton/DangerButton.js');
@@ -169,6 +170,8 @@ var FluidComboBox_Skeleton = require('./components/FluidComboBox/FluidComboBox.S
 var FluidDatePicker = require('./components/FluidDatePicker/FluidDatePicker.js');
 var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
 var FluidDatePickerInput = require('./components/FluidDatePickerInput/FluidDatePickerInput.js');
+var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
+var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
 var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
 var FluidMultiSelect_Skeleton = require('./components/FluidMultiSelect/FluidMultiSelect.Skeleton.js');
 var FluidSelect = require('./components/FluidSelect/FluidSelect.js');
@@ -206,12 +209,9 @@ var PageSelector = require('./components/Pagination/experimental/PageSelector.js
 var Pagination = require('./components/Pagination/experimental/Pagination.js');
 var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var ContainedList = require('./components/ContainedList/ContainedList.js');
-var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var TextInput = require('./components/TextInput/TextInput.js');
-var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
-var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
 var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
 var Text = require('./components/Text/Text.js');
@@ -270,6 +270,7 @@ exports.ModalBody = ComposedModal.ModalBody;
 exports.ModalHeader = ModalHeader.ModalHeader;
 exports.ModalFooter = ModalFooter.ModalFooter;
 exports.ContentSwitcher = index$6["default"];
+exports.useContextMenu = useContextMenu["default"];
 exports.Copy = Copy["default"];
 exports.CopyButton = CopyButton["default"];
 exports.DangerButton = DangerButton["default"];
@@ -437,6 +438,8 @@ exports.unstable__FluidComboBoxSkeleton = FluidComboBox_Skeleton["default"];
 exports.unstable__FluidDatePicker = FluidDatePicker["default"];
 exports.unstable__FluidDatePickerSkeleton = FluidDatePicker_Skeleton["default"];
 exports.unstable__FluidDatePickerInput = FluidDatePickerInput["default"];
+exports.unstable__FluidDropdown = FluidDropdown["default"];
+exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
 exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
 exports.unstable__FluidMultiSelectSkeleton = FluidMultiSelect_Skeleton["default"];
 exports.unstable__FluidSelect = FluidSelect["default"];
@@ -489,12 +492,9 @@ exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
 exports.ContainedListItem = ContainedListItem["default"];
 exports.ContainedList = ContainedList["default"];
-exports.useContextMenu = useContextMenu["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
 exports.TextInput = TextInput["default"];
-exports.unstable__FluidDropdown = FluidDropdown["default"];
-exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
 exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
 exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
 exports.unstable_Text = Text.Text;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.69.0",
+  "version": "1.70.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,7 +39,8 @@
     "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
     "storybook": "storybook dev -p 3000",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --id fd89d12b-6a39-48b4-adf4-30c94dc0dddd --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)"
   },
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
@@ -51,7 +52,7 @@
     "@carbon/feature-flags": "^0.24.0",
     "@carbon/icons-react": "^11.52.0",
     "@carbon/layout": "^11.28.0",
-    "@carbon/styles": "^1.68.0",
+    "@carbon/styles": "^1.69.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -145,5 +146,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3141442e5ef367667c8f1d379a1b4a23f67992ad"
+  "gitHead": "8708f6dfd38bea7d5bd6d14ce34293c014cba87c"
 }