@carbon/react 1.76.0 → 1.77.0-rc.0

package/lib/components/Modal/next/index.d.ts

@@ -0,0 +1,175 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { ReactAttr } from '../../../types/common';
+import { InlineLoadingStatus } from '../../InlineLoading/InlineLoading';
+export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
+export type ModalSize = (typeof ModalSizes)[number];
+export interface ModalSecondaryButton {
+    buttonText?: string | ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface BaseModalProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your Modal
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an label for the close button of the modal; defaults to close
+     */
+    closeButtonLabel?: string;
+    /**
+     * Specify whether the Modal is for dangerous actions
+     */
+    danger?: boolean;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+     */
+    decorator?: ReactNode;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+    /**
+     * Specify the DOM element ID of the top-level node.
+     */
+    id?: string;
+    /**
+     * Specify whether or not the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Provide a ref to return focus to once the modal is closed.
+     */
+    launcherButtonRef?: any;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription?: string;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingIconDescription?: string;
+    /**
+     * Specify loading status
+     */
+    loadingStatus?: InlineLoadingStatus;
+    /**
+     * Specify a label to be read by screen readers on the modal root node
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specify the content of the modal header title.
+     */
+    modalHeading?: ReactNode;
+    /**
+     * Specify the content of the modal header label.
+     */
+    modalLabel?: ReactNode;
+    /**
+     * Specify a handler for keypresses.
+     * @deprecated this property is unused
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * Specify an optional handler to be invoked when loading is
+     * successful
+     */
+    onLoadingSuccess?: () => void;
+    /**
+     * Specify a handler for closing modal.
+     * The handler should care of closing modal, e.g. changing `open` prop.
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for "submitting" modal.
+     * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
+     */
+    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for the secondary button.
+     * Useful if separate handler from `onRequestClose` is desirable
+     */
+    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    /**
+     * Prevent closing on click outside of modal
+     */
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: ReactNode;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: ReactNode;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: ModalSecondaryButton[];
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify CSS selectors that match DOM elements working as floating menus.
+     * Focusing on those elements won't trigger "focus-wrap" behavior
+     */
+    selectorsFloatingMenus?: string[];
+    /**
+     * Specify if Enter key should be used as "submit" action
+     */
+    shouldSubmitOnEnter?: boolean;
+    /**
+     * Specify the size variant.
+     */
+    size?: ModalSize;
+}
+interface PassiveModal extends BaseModalProps {
+    /**
+     * Specify whether the modal should be button-less
+     */
+    passiveModal?: true;
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning. Should
+     * go hand in hand with the `danger` prop. This changes the `role` to
+     * `alertdialog` and cannot be used with passive modals.
+     */
+    alert?: never;
+}
+interface NonPassiveModal extends BaseModalProps {
+    /**
+     * Specify whether the modal should be button-less
+     */
+    passiveModal?: false;
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning. Should
+     * go hand in hand with the `danger` prop. This changes the `role` to
+     * `alertdialog` and cannot be used with passive modals.
+     */
+    alert?: boolean;
+}
+export type ModalProps = PassiveModal | NonPassiveModal;
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

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

@@ -63,7 +63,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
     /**
      * Default sorter is assigned if not provided.
      */
-    filterItems(items: readonly ItemType[], extra: {
+    filterItems?(items: readonly ItemType[], extra: {
         inputValue: string | null;
         itemToString: NonNullable<UseComboboxProps<ItemType>['itemToString']>;
     }): ItemType[];

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -31,7 +31,6 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
 var react = require('@floating-ui/react');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -159,7 +158,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           width: `${rects.reference.width}px`
         });
       }
-    }), floatingUi_dom.hide()],
+    }), react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   React.useLayoutEffect(() => {

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/MultiSelect/MultiSelect.js

@@ -30,7 +30,6 @@ var Checkbox = require('../Checkbox/Checkbox.js');
 require('../Checkbox/Checkbox.Skeleton.js');
 var noopFn = require('../../internal/noopFn.js');
 var react = require('@floating-ui/react');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
@@ -163,7 +162,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
           width: `${rects.reference.width}px`
         });
       }
-    }), autoAlign && floatingUi_dom.hide()],
+    }), autoAlign && react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   React.useLayoutEffect(() => {

package/lib/components/Popover/index.js

@@ -20,7 +20,6 @@ var usePrefix = require('../../internal/usePrefix.js');
 var useEvent = require('../../internal/useEvent.js');
 var createPropAdapter = require('../../tools/createPropAdapter.js');
 var react = require('@floating-ui/react');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var index = require('../FeatureFlags/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -149,7 +148,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
       boundary: autoAlignBoundary
     }), react.arrow({
       element: caretRef
-    }), autoAlign && floatingUi_dom.hide()],
+    }), autoAlign && react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {}
   // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
@@ -245,7 +244,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
           // For a popover, there isn't an explicit trigger component, it's just the first child that's
           // passed in which should *not* be PopoverContent.
           // For a toggletip there is a specific trigger component, ToggletipButton.
-          // In either of these caes we want to set this as the reference node for floating-ui autoAlign
+          // In either of these cases we want to set this as the reference node for floating-ui autoAlign
           // positioning.
           if (enableFloatingStyles && item?.type?.displayName !== 'PopoverContent' || enableFloatingStyles && item?.type?.displayName === 'ToggletipButton') {
             // Set the reference element for floating-ui

package/lib/components/PrimaryButton/PrimaryButton.d.ts

@@ -6,5 +6,5 @@
  */
 import React from 'react';
 import { ButtonProps } from '../Button';
-declare const PrimaryButton: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const PrimaryButton: <T extends React.ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PrimaryButton;

package/lib/components/RadioTile/RadioTile.d.ts

@@ -53,7 +53,7 @@ export interface RadioTileProps {
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     /**
      * @deprecated please use `decorator` instead.
-     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component
      */
     slug?: React.ReactNode;
     /**

package/lib/components/SecondaryButton/SecondaryButton.d.ts

@@ -6,5 +6,5 @@
  */
 import React from 'react';
 import { ButtonProps } from '../Button';
-declare const SecondaryButton: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SecondaryButton: <T extends React.ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SecondaryButton;

package/lib/components/Slider/Slider.d.ts

@@ -387,7 +387,7 @@ declare class Slider extends PureComponent<SliderProps> {
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
      */
-    onDrag: import("es-toolkit/dist/compat/function/debounce").DebouncedFunction<(evt: any, activeHandle?: HandlePosition | null) => void>;
+    onDrag: import("es-toolkit/compat").DebouncedFunc<(evt: any, activeHandle?: HandlePosition | null) => void>;
     /**
      * Handles a `keydown` event by recalculating the value/thumb and setting
      * state accordingly.

package/lib/components/Slider/Slider.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var compat = require('es-toolkit/compat');
 var keys = require('../../internal/keyboard/keys.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -23,6 +22,7 @@ require('../Text/index.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var SliderHandles = require('./SliderHandles.js');
+var throttle = require('../../node_modules/es-toolkit/dist/compat/function/throttle.mjs.js');
 var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
 
@@ -287,7 +287,7 @@ class Slider extends React.PureComponent {
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "onDrag", compat.throttle(this._onDrag, EVENT_THROTTLE, {
+    _rollupPluginBabelHelpers.defineProperty(this, "onDrag", throttle.throttle(this._onDrag, EVENT_THROTTLE, {
       leading: true,
       trailing: false
     }));

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

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 declare const Slider: import("react").FunctionComponent<import("./Slider").SliderProps>;
 export { default as SliderSkeleton } from './Slider.Skeleton';
 export default Slider;

package/lib/components/Tabs/Tabs.d.ts

@@ -265,7 +265,7 @@ export interface TabListVerticalProps extends DivAttributes {
      * Provide an accessible label to be read when a user interacts with this
      * component
      */
-    'aria-label': string;
+    'aria-label'?: string;
     /**
      * Provide child elements to be rendered inside `ContentTabs`.
      * These elements should render a `ContentTab`
@@ -293,7 +293,7 @@ declare namespace TabListVertical {
          * Provide an accessible label to be read when a user interacts with this
          * component
          */
-        'aria-label': PropTypes.Validator<string>;
+        'aria-label': PropTypes.Requireable<string>;
         /**
          * Provide child elements to be rendered inside `ContentTabs`.
          * These elements should render a `ContentTab`
@@ -348,7 +348,7 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     }>;
     /**
      * An optional label to render under the primary tab label.
-     * Only useful for conained tabs.
+     * Only useful for contained tabs.
      */
     secondaryLabel?: string;
 }

package/lib/components/Tabs/Tabs.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var iconsReact = require('@carbon/icons-react');
 var layout = require('@carbon/layout');
 var cx = require('classnames');
-var compat = require('es-toolkit/compat');
 var PropTypes = require('prop-types');
 var React = require('react');
 require('../Grid/FlexGrid.js');
@@ -37,6 +36,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 require('../Text/index.js');
+var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -325,7 +325,7 @@ function TabList(_ref4) {
   });
   const tabs = React.useRef([]);
   const debouncedOnScroll = React.useCallback(() => {
-    return compat.debounce(event => {
+    return debounce.debounce(event => {
       setScrollLeft(event.target.scrollLeft);
     }, scrollDebounceWait);
   }, [scrollDebounceWait]);
@@ -431,7 +431,7 @@ function TabList(_ref4) {
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
       }
     }
-    const debouncedHandler = compat.debounce(handler, 200);
+    const debouncedHandler = debounce.debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
     return () => {
       debouncedHandler.cancel();
@@ -726,7 +726,7 @@ TabListVertical.propTypes = {
    * Provide an accessible label to be read when a user interacts with this
    * component
    */
-  'aria-label': PropTypes__default["default"].string.isRequired,
+  'aria-label': PropTypes__default["default"].string,
   /**
    * Provide child elements to be rendered inside `ContentTabs`.
    * These elements should render a `ContentTab`
@@ -909,7 +909,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
   })));
   const hasIcon = Icon ?? dismissable;
 
-  // should only happen for vertical variation, so no dissimisamble icon is needed here
+  // should only happen for vertical variation, so no dismissable icon is needed here
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
       label: children,
@@ -1027,7 +1027,7 @@ Tab.propTypes = {
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /*
    * An optional label to render under the primary tab label.
-  /* This prop is only useful for conained tabs
+  /* This prop is only useful for contained tabs
    **/
   secondaryLabel: PropTypes__default["default"].string
 };

package/lib/components/Tag/DismissibleTag.d.ts

@@ -22,7 +22,7 @@ export interface DismissibleTagBaseProps {
      */
     disabled?: boolean;
     /**
-     * Specify the id for the selectabletag.
+     * Specify the id for the selectable tag.
      */
     id?: string;
     /**
@@ -63,7 +63,7 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/lib/components/Tag/OperationalTag.d.ts

@@ -55,7 +55,7 @@ export interface OperationalTagBaseProps {
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
 declare const OperationalTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/lib/components/Tag/SelectableTag.d.ts

@@ -18,7 +18,7 @@ export interface SelectableTagBaseProps {
      */
     disabled?: boolean;
     /**
-     * Specify the id for the selectabletag.
+     * Specify the id for the selectable tag.
      */
     id?: string;
     /**
@@ -50,7 +50,7 @@ export interface SelectableTagBaseProps {
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

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

@@ -9,10 +9,10 @@ import { Text, TextBaseProps, TextProps } from './Text';
 export { TextDirection, Text };
 export type { TextBaseProps, TextProps, TextDirectionProps, GetTextDirection, TextDir, };
 export declare const Label: {
-    (props: TextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>): import("react/jsx-runtime").JSX.Element;
+    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Legend: {
-    (props: TextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>): import("react/jsx-runtime").JSX.Element;
+    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/components/TextInput/PasswordInput.d.ts

@@ -2,7 +2,7 @@ import React, { InputHTMLAttributes, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
-     * Provide a custom className that is applied directly to the underlyling `<input>` node
+     * Provide a custom className that is applied directly to the underlying `<input>` node
      */
     className?: string;
     /**

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

@@ -13,7 +13,7 @@ export interface GlobalThemeProps {
 }
 export declare const ThemeContext: React.Context<GlobalThemeProps>;
 export declare const GlobalTheme: React.ForwardRefExoticComponent<GlobalThemeProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<unknown>>;
 type ThemeBaseProps = GlobalThemeProps & {
     className?: string;

package/lib/components/Tile/Tile.d.ts

@@ -10,7 +10,7 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     light?: boolean;
     /**
      * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
-     * when `slug` prop is present
+     * when an AILabel is present
      */
     hasRoundedCorners?: boolean;
     /**

package/lib/components/Tile/Tile.js

@@ -76,7 +76,7 @@ Tile.propTypes = {
   decorator: PropTypes__default["default"].node,
   /**
    * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
-   * when `slug` prop is present
+   * when an AILabel is present
    */
   hasRoundedCorners: PropTypes__default["default"].bool,
   /**

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,11 +12,11 @@ type ToggletipLabelProps<E extends ElementType> = {
     as?: E;
     children?: ReactNode;
     className?: string;
-};
+} & Omit<React.ComponentPropsWithoutRef<E>, 'as' | 'children' | 'className'>;
 /**
  * Used to render the label for a Toggletip
  */
-export declare function ToggletipLabel<E extends ElementType>({ as: BaseComponent, children, className: customClassName, }: ToggletipLabelProps<E>): import("react/jsx-runtime").JSX.Element;
+export declare function ToggletipLabel<E extends ElementType>({ as: BaseComponent, children, className: customClassName, ...rest }: ToggletipLabelProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToggletipLabel {
     var propTypes: {
         /**

package/lib/components/Toggletip/index.js

@@ -33,14 +33,15 @@ function ToggletipLabel(_ref) {
   let {
     as: BaseComponent = 'span',
     children,
-    className: customClassName
+    className: customClassName,
+    ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-label`, customClassName);
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, {
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
-  }, children);
+  }, rest), children);
 }
 ToggletipLabel.propTypes = {
   /**
@@ -130,7 +131,7 @@ function Toggletip(_ref2) {
     }
   };
 
-  // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
+  // If the `Toggletip` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
   useEvent.useWindowEvent('blur', () => {
     if (open) {
       actions.close();

package/lib/components/Tooltip/Tooltip.d.ts

@@ -40,10 +40,18 @@ interface TooltipBaseProps {
      * description will not be used
      */
     description?: React.ReactNode;
+    /**
+     * Specify whether a drop shadow should be rendered
+     */
+    dropShadow?: boolean;
     /**
      * Specify the duration in milliseconds to delay before displaying the tooltip
      */
     enterDelayMs?: number;
+    /**
+     * Render the component using the high-contrast theme
+     */
+    highContrast?: boolean;
     /**
      * Provide the label to be rendered inside of the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
@@ -60,7 +68,7 @@ interface TooltipBaseProps {
     leaveDelayMs?: number;
 }
 export type TooltipProps<T extends React.ElementType> = PolymorphicProps<T, TooltipBaseProps>;
-declare function Tooltip<T extends React.ElementType>({ align, className: customClassName, children, label, description, enterDelayMs, leaveDelayMs, defaultOpen, closeOnActivation, ...rest }: TooltipProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip<T extends React.ElementType>({ align, className: customClassName, children, label, description, enterDelayMs, leaveDelayMs, defaultOpen, closeOnActivation, dropShadow, highContrast, ...rest }: TooltipProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Tooltip {
     var propTypes: {
         /**
@@ -94,10 +102,18 @@ declare namespace Tooltip {
          * description will not be used
          */
         description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify whether a drop shadow should be rendered
+         */
+        dropShadow: PropTypes.Requireable<boolean>;
         /**
          * Specify the duration in milliseconds to delay before displaying the tooltip
          */
         enterDelayMs: PropTypes.Requireable<number>;
+        /**
+         * Render the component using the high-contrast theme
+         */
+        highContrast: PropTypes.Requireable<boolean>;
         /**
          * Provide the label to be rendered inside of the Tooltip. The label will use
          * `aria-labelledby` and will fully describe the child node that is provided.

package/lib/components/Tooltip/Tooltip.js

@@ -43,6 +43,8 @@ function Tooltip(_ref) {
     leaveDelayMs = 300,
     defaultOpen = false,
     closeOnActivation = false,
+    dropShadow = false,
+    highContrast = true,
     ...rest
   } = _ref;
   const tooltipRef = React.useRef(null);
@@ -164,8 +166,8 @@ function Tooltip(_ref) {
     React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
       align: align,
       className: cx__default["default"](`${prefix}--tooltip`, customClassName),
-      dropShadow: false,
-      highContrast: true,
+      dropShadow: dropShadow,
+      highContrast: highContrast,
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
@@ -236,10 +238,18 @@ Tooltip.propTypes = {
    * description will not be used
    */
   description: PropTypes__default["default"].node,
+  /**
+   * Specify whether a drop shadow should be rendered
+   */
+  dropShadow: PropTypes__default["default"].bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes__default["default"].number,
+  /**
+   * Render the component using the high-contrast theme
+   */
+  highContrast: PropTypes__default["default"].bool,
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.