@carbon/react 1.67.0 → 1.68.0-rc.0

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

@@ -4,8 +4,8 @@
  * 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 { FluidNumberInputProps } from './FluidNumberInput';
-import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
+import type { FluidNumberInputProps } from './FluidNumberInput';
+import type { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
 export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps };
 export { default, default as FluidNumberInput } from './FluidNumberInput';
 export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';

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

@@ -4,8 +4,8 @@
  * 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 { FluidSearchProps } from './FluidSearch';
-import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
+import type { FluidSearchProps } from './FluidSearch';
+import type { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
 export { default, default as FluidSearch } from './FluidSearch';
 export { type FluidSearchProps, type FluidSearchSkeletonProps };
 export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton';

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidSelect from './FluidSelect';
-import FluidSelectSkeletonProps from './FluidSelect.Skeleton';
-import FluidSelectProps from './FluidSelect.Skeleton';
+import type FluidSelectSkeletonProps from './FluidSelect.Skeleton';
+import type FluidSelectProps from './FluidSelect.Skeleton';
 export type { FluidSelectSkeletonProps, FluidSelectProps };
 export default FluidSelect;
 export { FluidSelect };

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidTimePicker from './FluidTimePicker';
-import { FluidTimePickerProps } from './FluidTimePicker';
-import { FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
+import { type FluidTimePickerProps } from './FluidTimePicker';
+import { type FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
 export { default as FluidTimePickerSkeleton } from './FluidTimePicker.Skeleton';
 export type { FluidTimePickerProps, FluidTimePickerSkeletonProps };
 export default FluidTimePicker;

package/lib/components/Modal/Modal.js

@@ -275,7 +275,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
   }, modalLabel), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "h3",
+    as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
-import { ReactNode, FunctionComponent, ReactElement } from 'react';
+import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { TranslateWithId } from '../../types/common';
 /**
@@ -16,7 +16,7 @@ import { TranslateWithId } from '../../types/common';
  * ends up just being defined as "string".)
  */
 type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
-export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<TranslationKey> {
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, React.RefAttributes<HTMLDivElement>, TranslateWithId<TranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated

package/lib/components/Notification/Notification.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { type ReactNode, type MouseEvent, type ComponentType, type FunctionComponent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import React, { type ReactNode, type MouseEvent, type ComponentType, type FunctionComponent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
 import { type ButtonProps } from '../Button';
 export interface NotificationActionButtonProps extends ButtonProps<'button'> {
     /**
@@ -389,7 +389,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
     closeOnEscape?: boolean;
     /**
      * @deprecated This prop will be removed in the next major version, v12.
-     * Specify if focus should be moved to the component on render. To meet the spec for alertdialog, this must always be true. If you're setting this to false, explore using StaticNotification instead. https://github.com/carbon-design-system/carbon/pull/15532
+     * Specify if focus should be moved to the component on render. To meet the spec for alertdialog, this must always be true. If you're setting this to false, explore using Callout instead. https://github.com/carbon-design-system/carbon/pull/15532
      */
     hasFocus?: boolean;
     /**
@@ -465,7 +465,6 @@ export declare namespace ActionableNotification {
          */
         closeOnEscape: PropTypes.Requireable<boolean>;
         /**
-         * Deprecated, please use StaticNotification once it's available. Issue #15532
          * Specify if focus should be moved to the component when the notification contains actions
          */
         hasFocus: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
@@ -514,10 +513,10 @@ export declare namespace ActionableNotification {
     };
 }
 /**
- * StaticNotification
+ * Callout
  * ==================
  */
-export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement> {
+export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Pass in the action button label that will be rendered within the ActionableNotification.
      */
@@ -535,7 +534,7 @@ export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement>
      */
     kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
     /**
-     * Specify whether you are using the low contrast variant of the StaticNotification.
+     * Specify whether you are using the low contrast variant of the Callout.
      */
     lowContrast?: boolean;
     /**
@@ -559,8 +558,8 @@ export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement>
      */
     titleId?: string;
 }
-export declare function StaticNotification({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: StaticNotificationProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace StaticNotification {
+export declare function Callout({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: CalloutProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Callout {
     var propTypes: {
         /**
          * Pass in the action button label that will be rendered within the ActionableNotification.
@@ -579,7 +578,7 @@ export declare namespace StaticNotification {
          */
         kind: PropTypes.Requireable<string>;
         /**
-         * Specify whether you are using the low contrast variant of the StaticNotification.
+         * Specify whether you are using the low contrast variant of the Callout.
          */
         lowContrast: PropTypes.Requireable<boolean>;
         /**
@@ -604,3 +603,9 @@ export declare namespace StaticNotification {
         titleId: PropTypes.Requireable<string>;
     };
 }
+/**
+ * @deprecated Use `CalloutProps` instead.
+ */
+export interface StaticNotificationProps extends CalloutProps {
+}
+export declare const StaticNotification: React.FC<StaticNotificationProps>;

package/lib/components/Notification/Notification.js

@@ -25,6 +25,7 @@ var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var index = require('../FeatureFlags/index.js');
+var warning = require('../../internal/warning.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -651,10 +652,9 @@ ActionableNotification.propTypes = {
    */
   closeOnEscape: PropTypes__default["default"].bool,
   /**
-   * Deprecated, please use StaticNotification once it's available. Issue #15532
    * Specify if focus should be moved to the component when the notification contains actions
    */
-  hasFocus: deprecate["default"](PropTypes__default["default"].bool),
+  hasFocus: deprecate["default"](PropTypes__default["default"].bool, 'hasFocus is deprecated. To conform to accessibility requirements hasFocus ' + 'should always be `true` for ActionableNotification. If you were ' + 'setting this prop to `false`, consider using the Callout component instead.'),
   /**
    * Specify the close button should be disabled, or not
    */
@@ -703,11 +703,11 @@ ActionableNotification.propTypes = {
 };
 
 /**
- * StaticNotification
+ * Callout
  * ==================
  */
 
-function StaticNotification(_ref8) {
+function Callout(_ref8) {
   let {
     actionButtonLabel,
     children,
@@ -757,7 +757,7 @@ function StaticNotification(_ref8) {
     inline: true
   }, actionButtonLabel)));
 }
-StaticNotification.propTypes = {
+Callout.propTypes = {
   /**
    * Pass in the action button label that will be rendered within the ActionableNotification.
    */
@@ -775,7 +775,7 @@ StaticNotification.propTypes = {
    */
   kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
   /**
-   * Specify whether you are using the low contrast variant of the StaticNotification.
+   * Specify whether you are using the low contrast variant of the Callout.
    */
   lowContrast: PropTypes__default["default"].bool,
   /**
@@ -800,7 +800,27 @@ StaticNotification.propTypes = {
   titleId: PropTypes__default["default"].string
 };
 
+// In renaming StaticNotification to Callout, the legacy StaticNotification
+// export and it's types should remain usable until Callout is moved to stable.
+// The StaticNotification component below forwards props to Callout and inherits
+// CalloutProps to ensure consumer usage is not impacted, while providing them
+// a deprecation warning.
+// TODO: remove this when Callout moves to stable OR in v12, whichever is first
+/**
+ * @deprecated Use `CalloutProps` instead.
+ */
+
+let didWarnAboutDeprecation = false;
+const StaticNotification = props => {
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`StaticNotification` has been renamed to `Callout`.' + 'Run the following codemod to automatically update usages in your' + 'project: `npx @carbon/upgrade migrate refactor-to-callout --write`') : void 0;
+    didWarnAboutDeprecation = true;
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Callout, props);
+};
+
 exports.ActionableNotification = ActionableNotification;
+exports.Callout = Callout;
 exports.InlineNotification = InlineNotification;
 exports.NotificationActionButton = NotificationActionButton;
 exports.NotificationButton = NotificationButton;

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

@@ -4,4 +4,4 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, StaticNotification, type StaticNotificationProps, } from './Notification';
+export { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, StaticNotification, type StaticNotificationProps, Callout, type CalloutProps, } from './Notification';

package/lib/components/Popover/index.js

@@ -216,7 +216,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
      */
     const isTriggerElement = item?.type === 'button';
     const isTriggerComponent = autoAlign && displayName && ['ToggletipButton'].includes(displayName);
-    const isAllowedTriggerComponent = autoAlign && displayName && !['ToggletipContent', 'PopoverContent'].includes(displayName);
+    const isAllowedTriggerComponent = autoAlign && !['ToggletipContent', 'PopoverContent'].includes(displayName);
     if ( /*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;

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

@@ -99,20 +99,8 @@ interface ToggletipContentProps {
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-export declare function ToggletipContent({ children, className: customClassName, }: ToggletipContentProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ToggletipContent {
-    var propTypes: {
-        /**
-         * Custom children to be rendered as the content of the label
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom class name to be added to the outermost node in the
-         * component
-         */
-        className: PropTypes.Requireable<string>;
-    };
-}
+declare const ToggletipContent: React.ForwardRefExoticComponent<ToggletipContentProps & React.RefAttributes<HTMLDivElement>>;
+export { ToggletipContent };
 interface ToggleTipActionsProps {
     children?: ReactNode;
     className?: string | undefined;
@@ -135,4 +123,3 @@ export declare namespace ToggletipActions {
         className: PropTypes.Requireable<string>;
     };
 }
-export {};

package/lib/components/Toggletip/index.js

@@ -255,7 +255,7 @@ ToggletipButton.displayName = 'ToggletipButton';
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-function ToggletipContent(_ref4) {
+const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipContent(_ref4, ref) {
   let {
     children,
     className: customClassName
@@ -264,10 +264,12 @@ function ToggletipContent(_ref4) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
     className: customClassName
-  }, toggletip?.contentProps), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, toggletip?.contentProps, {
+    ref: ref
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));
-}
+});
 ToggletipContent.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
@@ -279,6 +281,7 @@ ToggletipContent.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+ToggletipContent.displayName = 'ToggletipContent';
 /**
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -70,8 +70,10 @@ const DefinitionTooltip = _ref => {
     onBlur: () => {
       setOpen(false);
     },
-    onClick: () => {
-      setOpen(!isOpen);
+    onMouseDown: event => {
+      // We use onMouseDown rather than onClick to make sure this triggers
+      // before onFocus.
+      if (event.button === 0) setOpen(!isOpen);
     },
     onKeyDown: onKeyDown,
     type: "button"

package/lib/index.js

@@ -163,6 +163,8 @@ var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
 var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var index = require('./components/FeatureFlags/index.js');
+var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
+var FluidMultiSelect_Skeleton = require('./components/FluidMultiSelect/FluidMultiSelect.Skeleton.js');
 var FluidSelect = require('./components/FluidSelect/FluidSelect.js');
 var FluidSelect_Skeleton = require('./components/FluidSelect/FluidSelect.Skeleton.js');
 var FluidSearch = require('./components/FluidSearch/FluidSearch.js');
@@ -209,8 +211,6 @@ var FluidDatePicker = require('./components/FluidDatePicker/FluidDatePicker.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 LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
 var Text = require('./components/Text/Text.js');
@@ -315,6 +315,7 @@ exports.MenuButton = index$8.MenuButton;
 exports.Modal = Modal["default"];
 exports.ModalWrapper = ModalWrapper["default"];
 exports.ActionableNotification = Notification.ActionableNotification;
+exports.Callout = Notification.Callout;
 exports.InlineNotification = Notification.InlineNotification;
 exports.NotificationActionButton = Notification.NotificationActionButton;
 exports.NotificationButton = Notification.NotificationButton;
@@ -430,6 +431,8 @@ exports.UnorderedList = UnorderedList["default"];
 exports.unstable_FeatureFlags = index.FeatureFlags;
 exports.unstable_useFeatureFlag = index.useFeatureFlag;
 exports.unstable_useFeatureFlags = index.useFeatureFlags;
+exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
+exports.unstable__FluidMultiSelectSkeleton = FluidMultiSelect_Skeleton["default"];
 exports.unstable__FluidSelect = FluidSelect["default"];
 exports.unstable__FluidSelectSkeleton = FluidSelect_Skeleton["default"];
 exports.unstable__FluidSearch = FluidSearch["default"];
@@ -491,8 +494,6 @@ exports.unstable__FluidDatePicker = FluidDatePicker["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_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.67.0",
+  "version": "1.68.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.23.0",
-    "@carbon/icons-react": "^11.50.0",
+    "@carbon/icons-react": "^11.51.0-rc.0",
     "@carbon/layout": "^11.27.0",
-    "@carbon/styles": "^1.66.0",
+    "@carbon/styles": "^1.67.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,8 +80,8 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.33.0",
-    "@carbon/themes": "^11.41.0",
-    "@figma/code-connect": "^1.0.6",
+    "@carbon/themes": "^11.42.0-rc.0",
+    "@figma/code-connect": "^1.1.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -144,5 +144,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "ea46616d9ea6afb2f14b862a344203e54d19e5a0"
+  "gitHead": "99debcc48ebc5f9a5ee5848fef06af4ee6448c30"
 }