@carbon/react 1.67.0 → 1.68.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -304,6 +304,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     if (onToggleClick) {
       onToggleClick(event);
     }
+    if (readOnly) {
+      // Prevent the list from opening if readOnly is true
+      event.preventDownshiftDefault = true;
+      event?.persist?.();
+      return;
+    }
     if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
       event?.persist?.();
@@ -452,6 +458,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       if (evt.key !== 'Tab') {
         evt.preventDefault();
       }
+    },
+    onClick: evt => {
+      // Prevent the default behavior which would open the list
+      evt.preventDefault();
+      // Focus on the element as per readonly input behavior
+      evt.currentTarget.focus();
     }
   } : {};
 

package/es/components/ComposedModal/ModalHeader.js

@@ -44,7 +44,7 @@ const ModalHeader = /*#__PURE__*/React__default.forwardRef(function ModalHeader(
     ref: ref
   }), label && /*#__PURE__*/React__default.createElement("h2", {
     className: labelClass
-  }, label), title && /*#__PURE__*/React__default.createElement("h3", {
+  }, label), title && /*#__PURE__*/React__default.createElement("h2", {
     className: titleClass
   }, title), children, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal-close-button`

package/es/components/Dropdown/Dropdown.js

@@ -207,7 +207,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-  const toggleButtonProps = getToggleButtonProps();
+  const toggleButtonProps = getToggleButtonProps({
+    'aria-label': ariaLabel || deprecatedAriaLabel
+  });
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
@@ -282,7 +284,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: handleFocus,
     onBlur: handleFocus,
-    "aria-label": deprecatedAriaLabel || ariaLabel,
     size: size$1,
     className: className,
     invalid: invalid,

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

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2015, 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 PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+interface FeatureFlagsProps {
+    children?: ReactNode;
+    flags?: Record<string, boolean>;
+    enableV12TileDefaultIcons?: boolean;
+    enableV12TileRadioIcons?: boolean;
+    enableV12Overflowmenu?: boolean;
+    enableTreeviewControllable?: boolean;
+    enableExperimentalFocusWrapWithoutSentinels?: boolean;
+}
+/**
+ * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
+ * or disable feature flags in a given React tree
+ */
+declare const FeatureFlagContext: React.Context<any>;
+/**
+ * Supports an object of feature flag values with the `flags` prop, merging them
+ * 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 namespace FeatureFlags {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the feature flags to enabled or disabled in the current Rea,ct tree
+         */
+        flags: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        enableV12TileDefaultIcons: PropTypes.Requireable<boolean>;
+        enableV12TileRadioIcons: PropTypes.Requireable<boolean>;
+        enableV12Overflowmenu: PropTypes.Requireable<boolean>;
+        enableTreeviewControllable: PropTypes.Requireable<boolean>;
+        enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * Access whether a given flag is enabled or disabled in a given
+ * FeatureFlagContext
+ *
+ * @returns {boolean}
+ */
+declare function useFeatureFlag(flag: any): any;
+/**
+ * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
+ */
+declare function useFeatureFlags(): any;
+export { FeatureFlags, FeatureFlagContext, useFeatureFlags, useFeatureFlag };

package/es/components/FeatureFlags/index.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
+import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-flags';
 import PropTypes from 'prop-types';
-import React__default, { createContext, useContext, useState, useRef, useEffect } from 'react';
+import React__default, { useContext, useState, useRef, useEffect, createContext } from 'react';
 import deprecate from '../../prop-types/deprecate.js';
 
 /**

package/es/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts

@@ -0,0 +1,144 @@
+/**
+ * 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, { FunctionComponent } from 'react';
+import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { FilterableMultiSelectProps } from '../MultiSelect/FilterableMultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseMultipleSelectionProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: 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 `FluidMultiSelect` 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?: FunctionComponent<ItemType>;
+    /**
+     * 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. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): 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>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `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;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * 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 title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * 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 FluidMultiSelect: React.ForwardRefExoticComponent<Omit<FluidFilterableMultiSelectProps<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default FluidMultiSelect;

package/es/components/FluidMultiSelect/FluidMultiSelect.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 FluidMultiSelectSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidMultiSelectSkeleton: React.FC<FluidMultiSelectSkeletonProps>;
+export default FluidMultiSelectSkeleton;

package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -34,6 +34,5 @@ FluidMultiSelectSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
-var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
 
-export { FluidMultiSelectSkeleton$1 as default };
+export { FluidMultiSelectSkeleton as default };

package/es/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -0,0 +1,149 @@
+/**
+ * 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 { UseSelectProps } from 'downshift';
+import { MultiSelectProps } from '../MultiSelect/MultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseSelectProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: 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 `FluidMultiSelect` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
+     * @deprecated This prop is deprecated in favor of new component called FluidFilterableMultiSelect and will be removed in the next major release
+     */
+    isFilterable?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.JSXElementConstructor<ItemType>;
+    /**
+     * 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. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): 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>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `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;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * 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 title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * 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 FluidMultiSelect: React.ForwardRefExoticComponent<FluidMultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export default FluidMultiSelect;

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -30,7 +30,10 @@ const FluidMultiSelect = /*#__PURE__*/React__default.forwardRef(function FluidMu
     value: {
       isFluid: true
     }
-  }, isFilterable ? /*#__PURE__*/React__default.createElement(FilterableMultiSelect, _extends({
+  }, isFilterable ?
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default.createElement(FilterableMultiSelect, _extends({
     ref: ref,
     className: classNames
   }, other)) : /*#__PURE__*/React__default.createElement(MultiSelect, _extends({
@@ -199,6 +202,5 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FluidMultiSelect$1 = FluidMultiSelect;
 
-export { FluidMultiSelect$1 as default };
+export { FluidMultiSelect as default };

package/es/components/FluidMultiSelect/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 FluidMultiSelect from './FluidMultiSelect';
+import type { FluidMultiSelectProps } from './FluidMultiSelect';
+import type { FluidMultiSelectSkeletonProps } from './FluidMultiSelect.Skeleton';
+export type { FluidMultiSelectProps, FluidMultiSelectSkeletonProps };
+export default FluidMultiSelect;
+export { FluidMultiSelect };
+export { default as FluidMultiSelectSkeleton } from './FluidMultiSelect.Skeleton';

package/es/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/es/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/es/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/es/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/es/components/Modal/Modal.js

@@ -264,7 +264,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
   }, modalLabel), /*#__PURE__*/React__default.createElement(Text, {
-    as: "h3",
+    as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({

package/es/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/es/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>;