@carbon/react 1.76.0 → 1.77.0

package/es/components/IconButton/index.js

@@ -38,7 +38,9 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     closeOnActivation = true,
     defaultOpen = false,
     disabled,
+    dropShadow = false,
     enterDelayMs = 100,
+    highContrast = true,
     kind,
     label,
     leaveDelayMs = 100,
@@ -57,7 +59,9 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     closeOnActivation: closeOnActivation,
     className: tooltipClasses,
     defaultOpen: defaultOpen,
+    dropShadow: dropShadow,
     enterDelayMs: enterDelayMs,
+    highContrast: highContrast,
     label: label,
     leaveDelayMs: leaveDelayMs
   }, /*#__PURE__*/React__default.createElement(ButtonBase, _extends({}, rest, {
@@ -124,6 +128,10 @@ IconButton.propTypes = {
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes.bool,
+  /**
+   * Specify whether a drop shadow should be rendered on the tooltip
+   */
+  dropShadow: PropTypes.bool,
   /**
    * Specify whether the Button should be disabled, or not
    */
@@ -135,8 +143,11 @@ IconButton.propTypes = {
   /**
    * Specify whether the IconButton is currently selected
    */
-
   isSelected: PropTypes.bool,
+  /**
+   * Render the tooltip using the high-contrast theme
+   */
+  highContrast: PropTypes.bool,
   /**
    * Specify the type of button to be used as the base for the IconButton
    */
@@ -152,10 +163,18 @@ IconButton.propTypes = {
    * Specify the duration in milliseconds to delay before hiding the tooltip
    */
   leaveDelayMs: PropTypes.number,
+  /**
+   * Optionally specify a `rel` when using an `<a>` element.
+   */
+  rel: PropTypes.string,
   /**
    * Specify the size of the Button. Defaults to `md`.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Optionally specify a `target` when using an `<a>` element.
+   */
+  target: PropTypes.string,
   /**
    * Specify an optional className to be added to your Tooltip wrapper
    */

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -95,7 +95,7 @@ InlineCheckbox.propTypes = {
    */
   id: PropTypes.string.isRequired,
   /**
-   * Specify whether the control is in an indterminate state
+   * Specify whether the control is in an indeterminate state
    */
   indeterminate: PropTypes.bool,
   /**

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
@@ -25,6 +25,22 @@ const InlineLoading = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const loadingClasses = cx(`${prefix}--inline-loading`, className);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (status === 'finished') {
+      timerRef.current = setTimeout(() => {
+        if (onSuccess) {
+          onSuccess();
+        }
+      }, successDelay);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [status, onSuccess, successDelay]);
   const getLoading = () => {
     let iconLabel = iconDescription ? iconDescription : status;
     if (status === 'error') {
@@ -33,11 +49,6 @@ const InlineLoading = _ref => {
       }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
     }
     if (status === 'finished') {
-      setTimeout(() => {
-        if (onSuccess) {
-          onSuccess();
-        }
-      }, successDelay);
       return /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
@@ -55,6 +66,9 @@ const InlineLoading = _ref => {
     }
     return undefined;
   };
+
+  // TODO: Should this element only be constructed, similar to
+  // `loadingAnimation`, if `description` is specified?
   const loadingText = /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
@@ -65,7 +79,7 @@ const InlineLoading = _ref => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: loadingClasses
   }, rest, {
-    "aria-live": 'assertive' 
+    "aria-live": rest['aria-live'] ?? 'assertive'
   }), loadingAnimation, description && loadingText);
 };
 InlineLoading.propTypes = {

package/es/components/Menu/Menu.js

@@ -191,7 +191,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
       }
     };
 
-    // Avoid that the Menu render incorrectly when the postion is set in the right side of the screen
+    // Avoid that the Menu render incorrectly when the position is set in the right side of the screen
     if (actionButtonWidth && actionButtonWidth < axes.x.size && (menuAlignment === 'bottom' || menuAlignment === 'top')) {
       axes.x.size = actionButtonWidth;
     }
@@ -219,7 +219,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     max - spacing - size];
     const topAlignment = menuAlignment === 'top' || menuAlignment === 'top-end' || menuAlignment === 'top-start';
 
-    // If the tooltip is not visible in the top, switch to the bototm
+    // If the tooltip is not visible in the top, switch to the bottom
     if (typeof options[0] === 'number' && topAlignment && options[0] >= 0 && !options[1] && axis === 'y') {
       menu.current.style.transform = 'translate(0)';
     } else if (topAlignment && !options[0] && axis === 'y') {

package/es/components/Menu/MenuContext.d.ts

@@ -21,7 +21,7 @@ declare function menuReducer(state: StateType, action: ActionType): {
     hasIcons: boolean;
     isRoot: boolean;
     mode: "full" | "basic";
-    size: "sm" | "md" | "lg" | "xs" | null;
+    size: "xs" | "sm" | "md" | "lg" | null;
     items: any[];
     requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, "type">) => void;
 };

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

@@ -30,7 +30,7 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
     /**
      * Experimental property. Specify how the menu should align with the button element
      */
-    menuAlignment: MenuAlignment;
+    menuAlignment?: MenuAlignment;
     /**
      * Specify the size of the button and menu.
      */

package/es/components/MenuButton/index.js

@@ -152,13 +152,12 @@ MenuButton.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   kind: PropTypes.oneOf(validButtonKinds),
   /**
-   * Provide the label to be renderd on the trigger button.
+   * Provide the label to be rendered on the trigger button.
    */
   label: PropTypes.string.isRequired,
   /**
    * Experimental property. Specify how the menu should align with the button element
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   menuAlignment: PropTypes.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Specify the size of the button and menu.

package/es/components/Modal/Modal.js

@@ -18,7 +18,6 @@ import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
-import { debounce } from 'es-toolkit/compat';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -28,6 +27,7 @@ import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';

package/es/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/es/components/MultiSelect/FilterableMultiSelect.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.
@@ -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/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useLayoutEffect, useRef, useMemo, useEffect } from 'react';
+import React__default, { useContext, useRef, useState, useLayoutEffect, useMemo, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -26,8 +26,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
-import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
@@ -107,6 +106,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   const {
     isFluid
   } = useContext(FormContext);
+  const isFirstRender = useRef(true);
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(!!open);
   const [prevOpen, setPrevOpen] = useState(!!open);
@@ -241,8 +241,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     }
   }
   useEffect(() => {
-    onMenuChange?.(isOpen);
-  }, [isOpen, onMenuChange]);
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      if (open) {
+        onMenuChange?.(isOpen);
+      }
+    } else {
+      onMenuChange?.(isOpen);
+    }
+  }, [isOpen, onMenuChange, open]);
   const {
     getToggleButtonProps,
     getLabelProps,

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

@@ -25,8 +25,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import Checkbox from '../Checkbox/Checkbox.js';
 import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
-import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';

package/es/components/Pagination/Pagination.js

@@ -13,10 +13,10 @@ import React__default, { useRef, useState } from 'react';
 import Select from '../Select/Select.js';
 import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
-import { equals } from '../../tools/array.js';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
+import isEqual from 'react-fast-compare';
 
 var _CaretLeft, _CaretRight;
 function mapPageSizesToObject(sizes) {
@@ -117,7 +117,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     setPageSize(getPageSize(pageSizes, controlledPageSize));
     setPrevControlledPageSize(controlledPageSize);
   }
-  if (!equals(controlledPageSizes, prevPageSizes)) {
+  if (!isEqual(controlledPageSizes, prevPageSizes)) {
     const pageSizes = mapPageSizesToObject(controlledPageSizes);
     const hasPageSize = pageSizes.find(size => {
       return size.value === pageSize;

package/es/components/Popover/index.js

@@ -15,8 +15,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { mapPopoverAlignProp } from '../../tools/createPropAdapter.js';
-import { useFloating, offset, flip, arrow, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFloating, offset, flip, arrow, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
 const PopoverContext = /*#__PURE__*/React__default.createContext({
@@ -235,7 +234,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
           // 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/es/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/es/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/es/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/es/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/es/components/Slider/Slider.js

@@ -9,7 +9,6 @@ import { defineProperty as _defineProperty, extends as _extends } from '../../_v
 import React__default, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { throttle } from 'es-toolkit/compat';
 import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -19,6 +18,7 @@ import '../Text/index.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './SliderHandles.js';
+import { throttle } from '../../node_modules/es-toolkit/dist/compat/function/throttle.mjs.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
 

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

@@ -9,7 +9,6 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
-import { debounce } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
 import '../Grid/FlexGrid.js';
@@ -33,6 +32,7 @@ import deprecate from '../../prop-types/deprecate.js';
 import { useEvent } from '../../internal/useEvent.js';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import '../Text/index.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 import { Text } from '../Text/Text.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp, Delete } from '../../internal/keyboard/keys.js';
@@ -716,7 +716,7 @@ TabListVertical.propTypes = {
    * Provide an accessible label to be read when a user interacts with this
    * component
    */
-  'aria-label': PropTypes.string.isRequired,
+  'aria-label': PropTypes.string,
   /**
    * Provide child elements to be rendered inside `ContentTabs`.
    * These elements should render a `ContentTab`
@@ -899,7 +899,7 @@ const Tab = /*#__PURE__*/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.createElement(Tooltip, {
       label: children,
@@ -1017,7 +1017,7 @@ Tab.propTypes = {
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.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.string
 };