@carbon/react 1.77.0 → 1.78.0

package/es/components/ShapeIndicator/index.js

@@ -0,0 +1,92 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { Critical, CriticalSeverity, Caution, DiamondFill, LowSeverity, CircleFill, CircleStroke } from '@carbon/icons-react';
+
+var _path;
+const ShapeIndicatorKinds = ['failed', 'critical', 'high', 'medium', 'low', 'cautious', 'undefined', 'stable', 'informative', 'incomplete', 'draft'];
+
+// TODO: update to import '@carbon/icons-react'
+const incompleteIcon = props => /*#__PURE__*/React__default.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  fill: "none",
+  "aria-hidden": "true"
+}, props), /*#__PURE__*/React__default.createElement("path", {
+  fill: "#fff",
+  fillOpacity: 0.01,
+  d: "M0 0h16v16H0z",
+  style: {
+    mixBlendMode: 'multiply'
+  }
+}), _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+  fill: "#161616",
+  d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z"
+})));
+const shapeTypes = {
+  failed: Critical,
+  critical: CriticalSeverity,
+  high: Caution,
+  medium: DiamondFill,
+  low: LowSeverity,
+  cautious: Caution,
+  undefined: DiamondFill,
+  stable: CircleFill,
+  informative: LowSeverity,
+  incomplete: incompleteIcon,
+  draft: CircleStroke
+};
+const ShapeIndicator = /*#__PURE__*/React__default.forwardRef(function ShapeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    kind,
+    label,
+    textSize = 12,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--shape-indicator`, customClassName, {
+    [`${prefix}--shape-indicator--14`]: textSize == 14
+  });
+  const ShapeForKind = shapeTypes[kind];
+  if (!ShapeForKind) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames,
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement(ShapeForKind, {
+    size: 16,
+    className: `${prefix}--shape-indicator--${kind}`
+  }), label);
+});
+ShapeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the kind of the Shape Indicator
+   */
+  kind: PropTypes.oneOf(ShapeIndicatorKinds).isRequired,
+  /**
+   * Label next to the shape.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Specify the text size of the Shape Indicator. Defaults to 12.
+   */
+  textSize: PropTypes.oneOf([12, 14])
+};
+
+export { ShapeIndicator, ShapeIndicatorKinds, ShapeIndicator as default };

package/es/components/Tabs/Tabs.d.ts

@@ -353,10 +353,11 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     secondaryLabel?: string;
 }
 declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
-/**
- * IconTab
- */
 export interface IconTabProps extends DivAttributes {
+    /**
+     * **Experimental**: Display an empty dot badge on the Tab.
+     */
+    badgeIndicator?: boolean;
     /**
      * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
      */
@@ -377,7 +378,8 @@ export interface IconTabProps extends DivAttributes {
      * Provide the label to be rendered inside the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
      * This means that if you have text in the child node it will not be
-     * announced to the screen reader.
+     * announced to the screen reader. If using the badgeIndicator then provide a
+     * label with describing that there is a new notification.
      */
     label: ReactNode;
     /**

package/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef, createContext, useMemo } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -32,12 +32,13 @@ import deprecate from '../../prop-types/deprecate.js';
 import { useEvent } from '../../internal/useEvent.js';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import '../Text/index.js';
+import { BadgeIndicator } from '../BadgeIndicator/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 { Text } from '../Text/Text.js';
 import { ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp, Delete } from '../../internal/keyboard/keys.js';
 
-var _ChevronLeft, _ChevronRight;
+var _ChevronLeft, _ChevronRight, _BadgeIndicator;
 const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
@@ -798,6 +799,9 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     hasSecondaryLabel,
     contained
   } = React__default.useContext(TabContext);
+  const {
+    badgeIndicator
+  } = React__default.useContext(IconTabContext) || {};
   const dismissIconRef = useRef(null);
   const tabRef = useRef(null);
   const ref = useMergedRefs([forwardRef, tabRef]);
@@ -975,7 +979,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel)), DismissIcon);
+  }, secondaryLabel), !disabled && badgeIndicator && (_BadgeIndicator || (_BadgeIndicator = /*#__PURE__*/React__default.createElement(BadgeIndicator, null)))), DismissIcon);
 });
 Tab.propTypes = {
   /**
@@ -1026,8 +1030,10 @@ Tab.propTypes = {
  * IconTab
  */
 
+const IconTabContext = /*#__PURE__*/createContext(false);
 const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11, ref) {
   let {
+    badgeIndicator,
     children,
     className: customClassName,
     defaultOpen = false,
@@ -1037,8 +1043,16 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11,
     ...rest
   } = _ref11;
   const prefix = usePrefix();
-  const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName);
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  const value = useMemo(() => ({
+    badgeIndicator
+  }), [badgeIndicator]);
+  const hasSize20 = /*#__PURE__*/React__default.isValidElement(children) && children.props?.size === 20;
+  const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, {
+    [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
+  });
+  return /*#__PURE__*/React__default.createElement(IconTabContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
     className: `${prefix}--icon-tooltip`,
@@ -1048,9 +1062,13 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11,
   }, /*#__PURE__*/React__default.createElement(Tab, _extends({
     className: classNames,
     ref: ref
-  }, rest), children));
+  }, rest), children)));
 });
 IconTab.propTypes = {
+  /**
+   * **Experimental**: Display an empty dot badge on the Tab.
+   */
+  badgeIndicator: PropTypes.bool,
   /**
    * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
@@ -1071,7 +1089,8 @@ IconTab.propTypes = {
    * Provide the label to be rendered inside the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
    * This means that if you have text in the child node it will not be
-   * announced to the screen reader.
+   * announced to the screen reader. If using the badgeIndicator then provide a
+   * label with describing that there is a new notification.
    */
   label: PropTypes.node.isRequired,
   /**

package/es/components/Tag/OperationalTag.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.
  */
-import PropTypes from 'prop-types';
 import React, { MouseEventHandler } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
@@ -54,40 +53,6 @@ export interface OperationalTagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
-declare const OperationalTag: {
-    <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>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `OperationalTag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Optional prop to render a custom icon.
-         * Can be a React component class
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Specify the size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * Provide text to be rendered inside of a the tag.
-         */
-        text: PropTypes.Requireable<string>;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const OperationalTag: React.ForwardRefExoticComponent<Omit<OperationalTagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export declare const types: string[];
 export default OperationalTag;

package/es/components/Tag/OperationalTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,6 +16,7 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
 
 const TYPES = {
@@ -30,7 +31,7 @@ const TYPES = {
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray'
 };
-const OperationalTag = _ref => {
+const OperationalTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
   let {
     className,
     disabled,
@@ -51,6 +52,7 @@ const OperationalTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  const combinedRef = mergeRefs(tagRef, forwardRef);
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       label: text,
@@ -60,7 +62,7 @@ const OperationalTag = _ref => {
       onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
-      ref: tagRef,
+      ref: combinedRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -73,7 +75,7 @@ const OperationalTag = _ref => {
     }, text)));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
-    ref: tagRef,
+    ref: combinedRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
@@ -84,7 +86,7 @@ const OperationalTag = _ref => {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
-};
+});
 OperationalTag.propTypes = {
   /**
    * Provide a custom className that is applied to the containing <span>

package/es/components/Text/Text.d.ts

@@ -1,17 +1,19 @@
 /**
- * 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.
  */
-import React, { ReactNode } from 'react';
-import { TextDir } from './TextDirection';
-import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import { type ElementType, type ReactElement, type ReactNode } from 'react';
+import { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../internal/PolymorphicProps';
+import { type TextDir } from '.';
 export interface TextBaseProps {
-    dir?: TextDir | undefined;
+    dir?: TextDir;
     children?: ReactNode;
 }
-export type TextProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
-type TextComponent = <T extends React.ElementType = 'span'>(props: TextProps<T>) => React.ReactElement | any;
-declare const Text: TextComponent;
-export { Text };
+export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
+type TextComponent = <T extends ElementType = 'span'>(props: TextProps<T> & {
+    ref?: PolymorphicRef<T>;
+}) => ReactElement | null;
+export declare const Text: TextComponent;
+export {};

package/es/components/Text/Text.js

@@ -7,17 +7,17 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext } from 'react';
+import React__default, { forwardRef, useContext, Children } from 'react';
+import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-const Text = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const Text = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     as,
     children,
     dir = 'auto',
     ...rest
   } = _ref;
-  // TODO: Update with context typing once its been converted to TS
   const context = useContext(TextDirectionContext);
   const textProps = {};
   const BaseComponent = as ?? 'span';
@@ -69,11 +69,11 @@ Text.propTypes = {
    */
   dir: PropTypes.oneOf(['ltr', 'rtl', 'auto'])
 };
-function getTextFromChildren(children) {
+const getTextFromChildren = children => {
   if (typeof children === 'string') {
     return children;
   }
-  const text = React__default.Children.map(children, child => {
+  const text = Children.map(children, child => {
     if (typeof child === 'string') {
       return child;
     }
@@ -85,6 +85,6 @@ function getTextFromChildren(children) {
     return text[0];
   }
   return text;
-}
+};
 
 export { Text };

package/es/components/Text/TextDirection.d.ts

@@ -1,21 +1,20 @@
 /**
- * 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.
  */
 import PropTypes from 'prop-types';
 import { ReactNode } from 'react';
-export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
-export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
+import { type GetTextDirection, type TextDir } from '.';
 export interface TextDirectionProps {
-    children: ReactNode | undefined;
+    children: ReactNode;
     dir?: TextDir;
     getTextDirection?: GetTextDirection;
 }
-declare function TextDirection({ children, dir, getTextDirection, }: TextDirectionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TextDirection {
-    var propTypes: {
+export declare const TextDirection: {
+    ({ children, dir, getTextDirection, }: TextDirectionProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
         /**
          * Provide children to be rendered inside of this component
          */
@@ -31,5 +30,4 @@ declare namespace TextDirection {
          */
         getTextDirection: PropTypes.Requireable<(...args: any[]) => any>;
     };
-}
-export { TextDirection };
+};

package/es/components/Text/TextDirection.js

@@ -7,9 +7,10 @@
 
 import PropTypes from 'prop-types';
 import React__default, { useRef, useMemo, useEffect } from 'react';
+import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-function TextDirection(_ref) {
+const TextDirection = _ref => {
   let {
     children,
     dir = 'auto',
@@ -24,11 +25,13 @@ function TextDirection(_ref) {
   }, [dir]);
   useEffect(() => {
     savedCallback.current = getTextDirection;
+    // TODO: Is this `useEffect` supposed to have a dependency on
+    // `getTextDirection`?
   });
   return /*#__PURE__*/React__default.createElement(TextDirectionContext.Provider, {
     value: value
   }, children);
-}
+};
 TextDirection.propTypes = {
   /**
    * Provide children to be rendered inside of this component

package/es/components/Text/TextDirectionContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+import { type MutableRefObject } from 'react';
+export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
+export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
+export interface TextDirectionContextType {
+    direction: TextDir;
+    getTextDirection: MutableRefObject<GetTextDirection | undefined>;
+}
+export declare const TextDirectionContext: import("react").Context<TextDirectionContextType>;

package/es/components/Text/TextDirectionContext.js

@@ -7,7 +7,11 @@
 
 import { createContext } from 'react';
 
-/** @type any */
-const TextDirectionContext = /*#__PURE__*/createContext(null);
+const TextDirectionContext = /*#__PURE__*/createContext({
+  direction: 'auto',
+  getTextDirection: {
+    current: undefined
+  }
+});
 
 export { TextDirectionContext };

package/es/components/Text/createTextComponent.d.ts

@@ -1,18 +1,18 @@
 /**
- * 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.
  */
-import React from 'react';
-import { TextProps } from './Text';
+import { type ElementType } from 'react';
+import { TextProps } from '.';
 /**
  * Create a text component wrapper for a given text node type. Useful for
  * returning a `Text` component for a text node like a `<label>`.
  * @param {string} element
  * @param {string} displayName
  */
-export declare function createTextComponent(element: React.ElementType, displayName: string): {
-    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
+export declare const createTextComponent: (element: ElementType, displayName: string) => {
+    (props: TextProps<ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/es/components/Text/createTextComponent.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
+import './index.js';
 import { Text } from './Text.js';
 
 /**
@@ -15,16 +16,16 @@ import { Text } from './Text.js';
  * @param {string} element
  * @param {string} displayName
  */
-function createTextComponent(element, displayName) {
-  function TextWrapper(props) {
+const createTextComponent = (element, displayName) => {
+  const TextWrapper = props => {
     return /*#__PURE__*/React__default.createElement(Text, _extends({
       as: element
     }, props));
-  }
+  };
   if (process.env.NODE_ENV !== "production") {
     TextWrapper.displayName = displayName;
   }
   return TextWrapper;
-}
+};
 
 export { createTextComponent };

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

@@ -1,18 +1,17 @@
 /**
- * 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.
  */
-import { TextDirection, TextDirectionProps, GetTextDirection, TextDir } from './TextDirection';
-import { Text, TextBaseProps, TextProps } from './Text';
-export { TextDirection, Text };
-export type { TextBaseProps, TextProps, TextDirectionProps, GetTextDirection, TextDir, };
+export * from './Text';
+export * from './TextDirection';
+export * from './TextDirectionContext';
 export declare const Label: {
-    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
+    (props: import("./Text").TextProps<import("react").ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Legend: {
-    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
+    (props: import("./Text").TextProps<import("react").ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/es/components/Text/index.js

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { TextDirection } from './TextDirection.js';
-export { Text } from './Text.js';
 import { createTextComponent } from './createTextComponent.js';
+export { Text } from './Text.js';
+export { TextDirection } from './TextDirection.js';
+import 'react';
 
 createTextComponent('label', 'Label');
 const Legend = createTextComponent('legend', 'Legend');

package/es/components/Tile/Tile.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2019, 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.
+ */
 import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;

package/es/components/Tile/Tile.js

@@ -20,8 +20,8 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { useId } from '../../internal/useId.js';
 import '../Text/index.js';
-import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
@@ -239,9 +239,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
-
-  // TODO: rename to handleClick when handleClick prop is deprecated
-  function handleOnClick(evt) {
+  function handleClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
     if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
@@ -251,9 +249,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     clickHandler(evt);
     onChange(evt, isSelected, id);
   }
-
-  // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
-  function handleOnKeyDown(evt) {
+  function handleKeyDown(evt) {
     evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
@@ -285,10 +281,10 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     React__default.createElement("div", _extends({
       className: classes,
-      onClick: !disabled ? handleOnClick : undefined,
+      onClick: !disabled ? handleClick : undefined,
       role: "checkbox",
       "aria-checked": isSelected,
-      onKeyDown: !disabled ? handleOnKeyDown : undefined
+      onKeyDown: !disabled ? handleKeyDown : undefined
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       ,
       tabIndex: !disabled ? tabIndex : undefined,