@carbon/react 1.66.0-rc.0 → 1.67.0-rc.0

package/es/components/AILabel/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 type AILabelContentProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const AILabelContent: React.ForwardRefExoticComponent<AILabelContentProps & React.RefAttributes<unknown>>;
+export type AILabelActionsProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const AILabelActions: React.ForwardRefExoticComponent<AILabelActionsProps & React.RefAttributes<unknown>>;
+/**
+ * Deprecated popover alignment values.
+ * @deprecated Use NewPopoverAlignment instead.
+ */
+export type DeprecatedAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type Alignment = DeprecatedAlignment | NewAlignment;
+interface AILabelProps {
+    AILabelContent?: React.ReactNode;
+    aiText?: string;
+    aiTextLabel?: string;
+    textLabel?: string;
+    align?: Alignment;
+    autoAlign?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    kind?: 'default' | 'inline';
+    onRevertClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
+    revertActive?: boolean;
+    revertLabel?: string;
+    size?: 'mini' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    'aria-label'?: string;
+    slugLabel?: string;
+}
+export declare const AILabel: React.ForwardRefExoticComponent<AILabelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/AILabel/index.js

@@ -8,10 +8,12 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { ToggletipContent, ToggletipActions, Toggletip, ToggletipButton } from '../Toggletip/index.js';
 import { IconButton } from '../IconButton/index.js';
+import { mapPopoverAlignProp } from '../../tools/createPropAdapter.js';
 import { Undo } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -19,11 +21,15 @@ import deprecate from '../../prop-types/deprecate.js';
 var _Undo;
 const AILabelContent = /*#__PURE__*/React__default.forwardRef(function AILabelContent(_ref, ref) {
   let {
+    className,
     children,
-    className
+    ...rest
   } = _ref;
   const prefix = usePrefix();
-  const hasAILabelActions = React__default.Children.toArray(children).some(child => child.type?.displayName === 'AILabelActions');
+  const hasAILabelActions = React__default.Children.toArray(children).some(child => {
+    const item = child;
+    item.type?.displayName === 'AILabelActions';
+  });
   const aiLabelContentClasses = cx(className, {
     [`${prefix}--slug-content`]: true,
     [`${prefix}--slug-content--with-actions`]: hasAILabelActions
@@ -45,16 +51,16 @@ AILabelContent.propTypes = {
 };
 const AILabelActions = /*#__PURE__*/React__default.forwardRef(function AILabelActions(_ref2, ref) {
   let {
+    className,
     children,
-    className
+    ...rest
   } = _ref2;
   const prefix = usePrefix();
   const aiLabelActionsClasses = cx(className, {
     [`${prefix}--slug-actions`]: true
   });
   return /*#__PURE__*/React__default.createElement(ToggletipActions, {
-    className: aiLabelActionsClasses,
-    ref: ref
+    className: aiLabelActionsClasses
   }, children);
 });
 AILabelActions.displayName = 'AILabelActions';
@@ -68,6 +74,15 @@ AILabelActions.propTypes = {
    */
   className: PropTypes.string
 };
+
+/**
+ * Deprecated popover alignment values.
+ * @deprecated Use NewPopoverAlignment instead.
+ */
+
+const propMappingFunction = deprecatedValue => {
+  return mapPopoverAlignProp(deprecatedValue);
+};
 const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, ref) {
   let {
     aiText = 'AI',
@@ -143,23 +158,32 @@ AILabel.propTypes = {
   /**
    * Specify how the popover should align with the button
    */
-  align: PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
-  'top-start', 'top-right',
+  'top-right',
   // deprecated use top-end instead
-  'top-end', 'bottom', 'bottom-left',
+
+  'bottom', 'bottom-left',
   // deprecated use bottom-start instead
-  'bottom-start', 'bottom-right',
+  'bottom-right',
   // deprecated use bottom-end instead
-  'bottom-end', 'left', 'left-bottom',
+
+  'left', 'left-bottom',
   // deprecated use left-end instead
-  'left-end', 'left-top',
+  'left-top',
   // deprecated use left-start instead
-  'left-start', 'right', 'right-bottom',
+
+  'right', 'right-bottom',
   // deprecated use right-end instead
-  'right-end', 'right-top',
+  'right-top',
   // deprecated use right-start instead
-  'right-start']),
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */

package/es/components/Accordion/Accordion.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 export interface AccordionProps {
     /**
      * Specify the alignment of the accordion heading
@@ -17,6 +17,10 @@ export interface AccordionProps {
      * the container node.
      */
     className?: string;
+    /**
+     * Pass in the children that will be rendered within the Accordion
+     */
+    children?: ReactNode;
     /**
      * Specify whether an individual AccordionItem
      * should be disabled.

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -54,7 +54,7 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
       ref: ref
     }, rest), href ? /*#__PURE__*/React__default.createElement(Link, {
       href: href,
-      "aria-current": ariaCurrent
+      "aria-current": ariaCurrent || isCurrentPage
     }, children) : /*#__PURE__*/React__default.createElement(Text, {
       className: `${prefix}--link`
     }, children));

package/es/components/Button/Button.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { IconButtonKind } from '../IconButton';
 import { PolymorphicProps } from '../../types/common';
 export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
 export type ButtonKind = (typeof ButtonKinds)[number];
@@ -43,7 +44,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * Specify the kind of Button you want to create
      */
-    kind?: ButtonKind;
+    kind?: ButtonBaseProps['hasIconOnly'] extends true ? IconButtonKind : ButtonKind;
     /**
      * Optional prop to allow overriding the icon rendering.
      * Can be a React component class

package/es/components/Button/Button.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useRef } from 'react';
-import { IconButton } from '../IconButton/index.js';
+import { IconButton, IconButtonKinds } from '../IconButton/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import ButtonBase from './ButtonBase.js';
 
@@ -141,8 +141,19 @@ Button.propTypes = {
   /**
    * Specify the kind of Button you want to create
    */
-  // TODO: this should be either ButtonKinds or IconButtonKinds based on the value of "hasIconOnly"
-  kind: PropTypes.oneOf(ButtonKinds),
+  kind: (props, propName, componentName) => {
+    const {
+      hasIconOnly
+    } = props;
+    const validKinds = hasIconOnly ? IconButtonKinds : ButtonKinds;
+    if (props[propName] === undefined) {
+      return null;
+    }
+    if (!validKinds.includes(props[propName])) {
+      return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Expected one of ${validKinds.join(', ')}.`);
+    }
+    return null;
+  },
   /**
    * Provide an optional function to be called when the button element
    * loses focus

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -11,6 +11,10 @@ export interface CodeSnippetProps {
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Specify a label to be read by screen readers on the containing textbox
      * node
@@ -96,7 +100,7 @@ export interface CodeSnippetProps {
      */
     wrapText?: boolean;
 }
-declare function CodeSnippet({ align, className, type, children, disabled, feedback, feedbackTimeout, onClick, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, copyText, copyButtonDescription, light, showMoreText, showLessText, hideCopyButton, wrapText, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minCollapsedNumberOfRows, minExpandedNumberOfRows, ...rest }: PropsWithChildren<CodeSnippetProps>): import("react/jsx-runtime").JSX.Element;
+declare function CodeSnippet({ align, autoAlign, className, type, children, disabled, feedback, feedbackTimeout, onClick, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, copyText, copyButtonDescription, light, showMoreText, showLessText, hideCopyButton, wrapText, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minCollapsedNumberOfRows, minExpandedNumberOfRows, ...rest }: PropsWithChildren<CodeSnippetProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace CodeSnippet {
     var propTypes: {
         /**
@@ -114,6 +118,10 @@ declare namespace CodeSnippet {
          * node
          */
         ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * **Experimental**: Will attempt to automatically align the tooltip
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Provide the content of your CodeSnippet as a node or string
          */

package/es/components/CodeSnippet/CodeSnippet.js

@@ -28,6 +28,7 @@ const defaultMinExpandedNumberOfRows = 16;
 function CodeSnippet(_ref) {
   let {
     align = 'bottom',
+    autoAlign = false,
     className,
     type = 'single',
     children,
@@ -150,6 +151,7 @@ function CodeSnippet(_ref) {
     }
     return /*#__PURE__*/React__default.createElement(Copy, _extends({}, rest, {
       align: align,
+      autoAlign: autoAlign,
       onClick: handleCopyClick,
       "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
@@ -205,6 +207,7 @@ function CodeSnippet(_ref) {
     className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default.createElement(CopyButton, {
     align: align,
+    autoAlign: autoAlign,
     size: type === 'multi' ? 'sm' : 'md',
     disabled: disabled,
     onClick: handleCopyClick,
@@ -241,6 +244,10 @@ CodeSnippet.propTypes = {
    * node
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Provide the content of your CodeSnippet as a node or string
    */

package/es/components/ComboBox/ComboBox.js

@@ -22,7 +22,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, flip, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
+import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
@@ -36,7 +36,8 @@ const {
   ItemMouseMove,
   InputKeyDownArrowUp,
   InputKeyDownArrowDown,
-  MenuMouseLeave
+  MenuMouseLeave,
+  FunctionSelectItem
 } = useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -213,19 +214,40 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     } = changes;
     switch (type) {
       case InputBlur:
-        if (state.inputValue && highlightedIndex == '-1' && changes.selectedItem) {
-          return {
-            ...changes,
-            inputValue: itemToString(changes.selectedItem)
-          };
-        } else if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue && !changes.selectedItem) {
-          return {
-            ...changes,
-            inputValue: ''
-          };
-        } else {
+        {
+          if (allowCustomValue && highlightedIndex == '-1') {
+            const customValue = inputValue;
+            changes.selectedItem = customValue;
+            if (onChange) {
+              onChange({
+                selectedItem: inputValue,
+                inputValue
+              });
+            }
+            return changes;
+          }
+          if (state.inputValue && highlightedIndex == '-1' && changes.selectedItem) {
+            return {
+              ...changes,
+              inputValue: itemToString(changes.selectedItem)
+            };
+          }
+          if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue && !changes.selectedItem) {
+            return {
+              ...changes,
+              inputValue: ''
+            };
+          }
           return changes;
         }
+      case FunctionSelectItem:
+        if (onChange) {
+          onChange({
+            selectedItem: changes.selectedItem,
+            inputValue: changes.inputValue
+          });
+        }
+        return changes;
       case InputKeyDownEnter:
         if (allowCustomValue) {
           setInputValue(inputValue);
@@ -292,7 +314,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
-    [`${prefix}--combo-box--readonly`]: readOnly
+    [`${prefix}--combo-box--readonly`]: readOnly,
+    [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled

package/es/components/ComboButton/index.js

@@ -19,8 +19,8 @@ import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
+import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
 import mergeRefs from '../../tools/mergeRefs.js';
-import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 
 var _ChevronDown;
 const defaultTranslations = {

package/es/components/Copy/Copy.d.ts

@@ -11,6 +11,10 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to be applied to the underlying `<button>`
      */
@@ -35,13 +39,17 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      */
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
-declare function Copy({ align, children, className, feedback, feedbackTimeout, onAnimationEnd, onClick, ...other }: PropsWithChildren<CopyProps>): import("react/jsx-runtime").JSX.Element;
+declare function Copy({ align, autoAlign, children, className, feedback, feedbackTimeout, onAnimationEnd, onClick, ...other }: PropsWithChildren<CopyProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Copy {
     var propTypes: {
         /**
          * Specify how the trigger should align with the tooltip
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Will attempt to automatically align the tooltip
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Pass in content to be rendered in the underlying `<button>`
          */

package/es/components/Copy/Copy.js

@@ -18,6 +18,7 @@ import { noopFn } from '../../internal/noopFn.js';
 function Copy(_ref) {
   let {
     align = 'bottom',
+    autoAlign = false,
     children,
     className,
     feedback = 'Copied!',
@@ -52,6 +53,7 @@ function Copy(_ref) {
   return /*#__PURE__*/React__default.createElement(IconButton, _extends({
     closeOnActivation: false,
     align: align,
+    autoAlign: autoAlign,
     className: classNames,
     label: animation ? feedback : initialLabel,
     onClick: composeEventHandlers([onClick, handleClick]),
@@ -65,6 +67,10 @@ Copy.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */

package/es/components/CopyButton/CopyButton.d.ts

@@ -12,6 +12,10 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to be applied to the underlying `<button>`
      */
@@ -36,13 +40,17 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      */
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
-declare function CopyButton({ align, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function CopyButton({ align, autoAlign, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CopyButton {
     var propTypes: {
         /**
          * Specify how the trigger should align with the tooltip
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Will attempt to automatically align the tooltip
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Specify an optional className to be applied to the underlying `<button>`
          */

package/es/components/CopyButton/CopyButton.js

@@ -18,6 +18,7 @@ import { noopFn } from '../../internal/noopFn.js';
 function CopyButton(_ref) {
   let {
     align = 'bottom',
+    autoAlign = false,
     feedback = 'Copied!',
     feedbackTimeout = 2000,
     iconDescription = 'Copy to clipboard',
@@ -36,6 +37,7 @@ function CopyButton(_ref) {
     feedbackTimeout: feedbackTimeout,
     onClick: onClick,
     align: align,
+    autoAlign: autoAlign,
     className: cx(className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
@@ -47,6 +49,10 @@ CopyButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

package/es/components/DataTable/TableExpandHeader.d.ts

@@ -22,7 +22,7 @@ type TableExpandHeaderPropsBase = {
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ['aria-label']: string;
+    ['aria-label']?: string;
     /**
      * @deprecated The enableExpando prop is being replaced by `enableToggle`
      */
@@ -79,7 +79,7 @@ declare const TableExpandHeader: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**
-         * The enableExpando prop is being replaced by enableToggle
+         * The enableExpando prop is being replaced by TableExpandHeader
          */
         enableExpando: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**

package/es/components/DataTable/TableExpandHeader.js

@@ -69,7 +69,7 @@ TableExpandHeader.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   /**
-   * The enableExpando prop is being replaced by enableToggle
+   * The enableExpando prop is being replaced by TableExpandHeader
    */
   enableExpando: deprecate(PropTypes.bool, 'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'),
   /**

package/es/components/DatePicker/DatePicker.js

@@ -554,6 +554,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
       if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+        event.preventDefault();
         calendarRef.current.close();
         // Remove focus from endDate calendar input
         document.activeElement instanceof HTMLElement &&

package/es/components/Dropdown/Dropdown.js

@@ -19,7 +19,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
+import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -185,7 +185,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size$1}`]: size$1,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--dropdown--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,

package/es/components/FeatureFlags/index.js

@@ -8,6 +8,7 @@
 import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
 import PropTypes from 'prop-types';
 import React__default, { createContext, useContext, useState, useRef, useEffect } from 'react';
+import deprecate from '../../prop-types/deprecate.js';
 
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -23,17 +24,30 @@ const FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
 function FeatureFlags(_ref) {
   let {
     children,
-    flags = {}
+    flags = {},
+    enableV12TileDefaultIcons = false,
+    enableV12TileRadioIcons = false,
+    enableV12Overflowmenu = false,
+    enableTreeviewControllable = false,
+    enableExperimentalFocusWrapWithoutSentinels = false
   } = _ref;
   const parentScope = useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = useState(parentScope);
+  const combinedFlags = {
+    'enable-v12-tile-default-icons': enableV12TileDefaultIcons,
+    'enable-v12-tile-radio-icons': enableV12TileRadioIcons,
+    'enable-v12-overflowmenu': enableV12Overflowmenu,
+    'enable-treeview-controllable': enableTreeviewControllable,
+    'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    ...flags
+  };
   const [scope, updateScope] = useState(() => {
-    const scope = createScope(flags);
+    const scope = createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     return scope;
   });
   if (parentScope !== prevParentScope) {
-    const scope = createScope(flags);
+    const scope = createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
     setPrevParentScope(parentScope);
@@ -42,7 +56,7 @@ function FeatureFlags(_ref) {
   // We use a custom hook to detect if any of the keys or their values change
   // for flags that are passed in. If they have changed, then we re-create the
   // FeatureFlagScope using the new flags
-  useChangedValue(flags, isEqual, changedFlags => {
+  useChangedValue(combinedFlags, isEqual, changedFlags => {
     const scope = createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -54,9 +68,14 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: PropTypes.node,
   /**
-   * Provide the feature flags to enabled or disabled in the current React tree
+   * Provide the feature flags to enabled or disabled in the current Rea,ct tree
    */
-  flags: PropTypes.objectOf(PropTypes.bool)
+  flags: deprecate(PropTypes.objectOf(PropTypes.bool), 'The `flags` prop for `FeatureFlag` has ' + 'been deprecated. Please run the `featureflag-deprecate-flags-prop` codemod to migrate to individual boolean props.' + `npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write`),
+  enableV12TileDefaultIcons: PropTypes.bool,
+  enableV12TileRadioIcons: PropTypes.bool,
+  enableV12Overflowmenu: PropTypes.bool,
+  enableTreeviewControllable: PropTypes.bool,
+  enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool
 };
 
 /**
@@ -98,7 +117,8 @@ function useChangedValue(value, compare, callback) {
  */
 function useFeatureFlag(flag) {
   const scope = useContext(FeatureFlagContext);
-  return scope.enabled(flag);
+  //updated to return false for undefined flags
+  return scope.enabled(flag) ?? false;
 }
 
 /**

package/es/components/FluidNumberInput/FluidNumberInput.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 FluidNumberInputSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare const FluidNumberInputSkeleton: React.FC<FluidNumberInputSkeletonProps>;
+export default FluidNumberInputSkeleton;