@carbon/react 1.78.2 → 1.79.0-rc.0

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

@@ -1,13 +1,13 @@
 /**
- * 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 { type OverflowMenuProps } from './OverflowMenu';
-declare function OverflowMenu(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace OverflowMenu {
-    var displayName: string;
-}
+declare const OverflowMenu: {
+    (props: OverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default OverflowMenu;
 export { OverflowMenu, type OverflowMenuProps };

package/lib/components/OverflowMenu/index.js

@@ -20,10 +20,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const OverflowMenuV11 = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
-function OverflowMenu(props) {
+const OverflowMenu = props => {
   const enableV12OverflowMenu = index.useFeatureFlag('enable-v12-overflowmenu');
   return enableV12OverflowMenu ? /*#__PURE__*/React__default["default"].createElement(index$1.OverflowMenu, props) : /*#__PURE__*/React__default["default"].createElement(OverflowMenuV11, props);
-}
+};
 OverflowMenu.displayName = 'OverflowMenu';
 
 exports.OverflowMenu = OverflowMenu;

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

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 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 ComponentType, type FunctionComponent } from 'react';
+import React, { type ElementType } from 'react';
 interface OverflowMenuProps {
     /**
      * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
@@ -27,9 +27,9 @@ interface OverflowMenuProps {
      */
     menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     /**
-     * Optionally provide a custom icon to be rendered on the trigger button.
+     * A component used to render an icon.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
     /**
      * Specify the size of the menu, from a list of available sizes.
      */

package/lib/components/OverflowMenu/next/index.js

@@ -175,7 +175,7 @@ OverflowMenu.propTypes = {
    */
   menuAlignment: PropTypes__default["default"].oneOf(['top-start', 'top-end', 'bottom-start', 'bottom-end']),
   /**
-   * Optionally provide a custom icon to be rendered on the trigger button.
+   * A component used to render an icon.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -13,12 +13,12 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 require('../Text/index.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -13,12 +13,12 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/RadioTile/RadioTile.js

@@ -14,15 +14,15 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Search/Search.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.
@@ -62,8 +62,7 @@ export interface SearchProps extends InputPropsBase {
      */
     placeholder?: string;
     /**
-     * Rendered icon for the Search.
-     * Can be a React component class
+     * A component used to render an icon.
      */
     renderIcon?: ComponentType | FunctionComponent;
     /**

package/lib/components/Search/Search.js

@@ -14,7 +14,8 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index = require('../../internal/focus/index.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
@@ -22,8 +23,6 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -100,7 +99,7 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     onChange(clearedEvt);
     onClear();
     setHasContent(false);
-    index.focus(inputRef);
+    inputRef.current?.focus();
   }
   function handleChange(event) {
     setHasContent(event.target.value !== '');
@@ -231,8 +230,7 @@ Search.propTypes = {
    */
   placeholder: PropTypes__default["default"].string,
   /**
-   * Rendered icon for the Search.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),

package/lib/components/Slider/Slider.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.
@@ -164,11 +164,6 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     warnText?: React.ReactNode;
 }
-interface CalcValueProps {
-    clientX?: number;
-    value?: number;
-    useRawValue?: boolean;
-}
 interface CalcLeftPercentProps {
     clientX?: number;
     value?: number;
@@ -355,11 +350,13 @@ declare class Slider extends PureComponent<SliderProps> {
      */
     clamp(val: any, min: any, max: any): number;
     /**
-     * Takes a value and ensures it fits to the steps of the range
-     * @param value
-     * @returns value of the nearest step
+     * Rounds a given value to the nearest step defined by the slider's `step`
+     * prop.
+     *
+     * @param value - The value to adjust to the nearest step. Defaults to `0`.
+     * @returns The value rounded to the precision determined by the step.
      */
-    nearestStepValue(value: any): number;
+    nearestStepValue(value?: number): number;
     /**
      * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
      * started on somewhere other than the thumb without a corresponding "move"
@@ -413,46 +410,44 @@ declare class Slider extends PureComponent<SliderProps> {
     onInputKeyDown: (evt: any) => void;
     processNewInputValue: (input: HTMLInputElement) => void;
     calcLeftPercent: ({ clientX, value, range }: CalcLeftPercentProps) => number;
-    calcSteppedValuePercent: ({ leftPercent, range }: {
-        leftPercent: any;
-        range: any;
-    }) => number[];
-    /**
-     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
-     * `value`, or neither of those.
-     * - If `clientX` is specified, it will be used in
-     *   conjunction with the Slider's bounding rectangle to calculate the new
-     *   values.
-     * - If `clientX` is not specified and `value` is, it will be used to
-     *   calculate new values as though it were the current value of the Slider.
-     * - If neither `clientX` nor `value` are specified, `this.props.value` will
-     *   be used to calculate the new values as though it were the current value
-     *   of the Slider.
-     *
-     * @param {object} params
-     * @param {number} [params.clientX] Optional clientX value expected to be from
-     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
-     * @param {number} [params.value] Optional value use during calculations if
-     *   clientX is not provided.
-     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
-     */
-    calcValue: ({ clientX, value, useRawValue }: CalcValueProps) => {
+    /**
+     * Calculates the discrete value (snapped to the nearest step) along
+     * with the corresponding handle position percentage.
+     */
+    calcDiscreteValueAndPercent: ({ leftPercent, }: {
+        /** The percentage representing the position on the track. */
+        leftPercent: number;
+    }) => {
+        discreteValue: number;
+        discretePercent: number;
+    };
+    /**
+     * Calculates the slider's value and handle position based on either a
+     * mouse/touch event or an explicit value.
+     */
+    calcValue: ({ clientX, value, useRawValue, }: {
+        /** The x-coordinate from a mouse/touch event. */
+        clientX?: number;
+        /** Value to base the calculations on (if no `clientX`). */
+        value?: number;
+        /** Whether to bypass the stepping logic and use the raw value. */
+        useRawValue?: boolean;
+    }) => {
         value: number | undefined;
         left: number;
     };
     calcDistanceToHandle: (handle: HandlePosition, clientX: any) => number;
     /**
-     * Given the current value, delta and step, calculate the new value.
+     * Calculates a new slider value based on the current value, a change delta,
+     * and a step.
      *
-     * @param {number} currentValue
-     *   Current value user is moving from.
-     * @param {number} delta
-     *   Movement from the current value. Can be positive or negative.
-     * @param {number} step
-     *   A value determining how much the value should increase/decrease by moving
-     *   the thumb by mouse.
-     */
-    calcValueForDelta: (currentValue: any, delta: any, step?: number) => any;
+     * @param currentValue - The starting value from which the slider is moving.
+     * @param delta - The amount to adjust the current value by.
+     * @param step - The step. Defaults to `1`.
+     * @returns The new slider value, rounded to the same number of decimal places
+     *          as the step.
+     */
+    calcValueForDelta: (currentValue: number, delta: number, step?: number) => number;
     /**
      * Sets state relevant to the given handle position.
      *

package/lib/components/Slider/Slider.js

@@ -14,6 +14,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
@@ -23,7 +24,6 @@ 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -326,7 +326,7 @@ class Slider extends React.PureComponent {
           value,
           left
         } = this.calcValue({
-          value: this.calcValueForDelta(currentValue, delta, this.props.step)
+          value: this.calcValueForDelta(currentValue ?? this.props.min, delta, this.props.step)
         });
         this.setValueLeftForHandle(this.state.activeHandle, {
           value: this.nearestStepValue(value),
@@ -533,67 +533,65 @@ class Slider extends React.PureComponent {
       // re-assure Typescript, return 0.
       return 0;
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "calcSteppedValuePercent", _ref3 => {
+    /**
+     * Calculates the discrete value (snapped to the nearest step) along
+     * with the corresponding handle position percentage.
+     */
+    _rollupPluginBabelHelpers.defineProperty(this, "calcDiscreteValueAndPercent", _ref3 => {
       let {
-        leftPercent,
-        range
+        leftPercent
       } = _ref3;
       const {
-        step = 1
+        step = 1,
+        min,
+        max
       } = this.props;
-      const totalSteps = range / step;
-      let steppedValue = Math.round(leftPercent * totalSteps) * step;
-      const steppedPercent = this.clamp(steppedValue / range, 0, 1);
-      steppedValue = this.clamp(steppedValue + this.props.min, this.props.min, this.props.max);
-      return [steppedValue, steppedPercent];
+      const numSteps = Math.floor((max - min) / step) + ((max - min) % step === 0 ? 1 : 2);
+      /** Index of the step that corresponds to `leftPercent`. */
+      const stepIndex = Math.round(leftPercent * (numSteps - 1));
+      const discreteValue = stepIndex === numSteps - 1 ? max : min + step * stepIndex;
+      /** Percentage corresponding to the step index. */
+      const discretePercent = stepIndex / (numSteps - 1);
+      return {
+        discreteValue,
+        discretePercent
+      };
     });
     /**
-     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
-     * `value`, or neither of those.
-     * - If `clientX` is specified, it will be used in
-     *   conjunction with the Slider's bounding rectangle to calculate the new
-     *   values.
-     * - If `clientX` is not specified and `value` is, it will be used to
-     *   calculate new values as though it were the current value of the Slider.
-     * - If neither `clientX` nor `value` are specified, `this.props.value` will
-     *   be used to calculate the new values as though it were the current value
-     *   of the Slider.
-     *
-     * @param {object} params
-     * @param {number} [params.clientX] Optional clientX value expected to be from
-     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
-     * @param {number} [params.value] Optional value use during calculations if
-     *   clientX is not provided.
-     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
+     * Calculates the slider's value and handle position based on either a
+     * mouse/touch event or an explicit value.
      */
     _rollupPluginBabelHelpers.defineProperty(this, "calcValue", _ref4 => {
       let {
         clientX,
         value,
-        useRawValue = false
+        useRawValue
       } = _ref4;
       const range = this.props.max - this.props.min;
-
-      // @todo solve for rtl.
-      const leftPercent = this.calcLeftPercent({
+      const leftPercentRaw = this.calcLeftPercent({
         clientX,
         value,
         range
       });
+      /** `leftPercentRaw` clamped between 0 and 1. */
+      const leftPercent = Math.min(1, Math.max(0, leftPercentRaw));
       if (useRawValue) {
-        // Adjusts only for min/max of thumb position
         return {
           value,
-          left: Math.min(1, Math.max(0, leftPercent)) * 100
+          left: leftPercent * 100
         };
       }
-      const [steppedValue, steppedPercent] = this.calcSteppedValuePercent({
-        leftPercent,
-        range
+
+      // Use the discrete value and percentage for snapping.
+      const {
+        discreteValue,
+        discretePercent
+      } = this.calcDiscreteValueAndPercent({
+        leftPercent
       });
       return {
-        value: steppedValue,
-        left: steppedPercent * 100
+        value: discreteValue,
+        left: discretePercent * 100
       };
     });
     _rollupPluginBabelHelpers.defineProperty(this, "calcDistanceToHandle", (handle, clientX) => {
@@ -603,19 +601,21 @@ class Slider extends React.PureComponent {
       return Math.abs(handleX - clientX);
     });
     /**
-     * Given the current value, delta and step, calculate the new value.
+     * Calculates a new slider value based on the current value, a change delta,
+     * and a step.
      *
-     * @param {number} currentValue
-     *   Current value user is moving from.
-     * @param {number} delta
-     *   Movement from the current value. Can be positive or negative.
-     * @param {number} step
-     *   A value determining how much the value should increase/decrease by moving
-     *   the thumb by mouse.
+     * @param currentValue - The starting value from which the slider is moving.
+     * @param delta - The amount to adjust the current value by.
+     * @param step - The step. Defaults to `1`.
+     * @returns The new slider value, rounded to the same number of decimal places
+     *          as the step.
      */
     _rollupPluginBabelHelpers.defineProperty(this, "calcValueForDelta", function (currentValue, delta) {
       let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-      return (delta > 0 ? Math.floor(currentValue / step) * step : currentValue) + delta;
+      const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
+      const newValue = base + delta;
+      const decimals = (step.toString().split('.')[1] || '').length;
+      return Number(newValue.toFixed(decimals));
     });
     /**
      * Sets state relevant to the given handle position.
@@ -879,18 +879,16 @@ class Slider extends React.PureComponent {
   }
 
   /**
-   * Takes a value and ensures it fits to the steps of the range
-   * @param value
-   * @returns value of the nearest step
+   * Rounds a given value to the nearest step defined by the slider's `step`
+   * prop.
+   *
+   * @param value - The value to adjust to the nearest step. Defaults to `0`.
+   * @returns The value rounded to the precision determined by the step.
    */
-  nearestStepValue(value) {
-    const tempInput = document.createElement('input');
-    tempInput.type = 'range';
-    tempInput.min = `${this.props.min}`;
-    tempInput.max = `${this.props.max}`;
-    tempInput.step = `${this.props.step}`;
-    tempInput.value = `${value}`;
-    return parseFloat(tempInput.value);
+  nearestStepValue() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    const decimals = (this.props.step?.toString().split('.')[1] || '').length;
+    return Number(value.toFixed(decimals));
   }
   getClientXFromEvent(event) {
     let clientX;

package/lib/components/Tabs/Tabs.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.
@@ -340,12 +340,9 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
      */
     renderButton?(): ReactNode;
     /**
-     * Optional prop to render an icon next to the label.
-     * Can be a React component class
+     * A component used to render an icon.
      */
-    renderIcon?: ComponentType<{
-        size: number;
-    }>;
+    renderIcon?: React.ElementType;
     /**
      * An optional label to render under the primary tab label.
      * Only useful for contained tabs.

package/lib/components/Tabs/Tabs.js

@@ -25,12 +25,13 @@ var reactIs = require('react-is');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var useControllableState = require('../../internal/useControllableState.js');
-var useEffectOnce = require('../../internal/useEffectOnce.js');
 var useId = require('../../internal/useId.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePressable = require('./usePressable.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
@@ -38,9 +39,7 @@ var useMatchMedia = require('../../internal/useMatchMedia.js');
 require('../Text/index.js');
 var index = require('../BadgeIndicator/index.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -392,7 +391,7 @@ function TabList(_ref4) {
       }
     }
   }
-  useEffectOnce.useEffectOnce(() => {
+  React.useEffect(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
       tab.scrollIntoView({
@@ -400,7 +399,7 @@ function TabList(_ref4) {
         inline: 'nearest'
       });
     }
-  });
+  }, []);
   React.useEffect(() => {
     //adding 1 in calculation for firefox support
     setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
@@ -410,7 +409,7 @@ function TabList(_ref4) {
       }
     }
   }, [scrollLeft, children, dismissable, isScrollable]);
-  useEffectOnce.useEffectOnce(() => {
+  React.useEffect(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
         return !tab.disabled;
@@ -420,7 +419,7 @@ function TabList(_ref4) {
         setSelectedIndex(tabs.current.indexOf(tab));
       }
     }
-  });
+  }, []);
   useIsomorphicEffect["default"](() => {
     if (ref.current) {
       // adding 1 in calculation for firefox support
@@ -634,7 +633,7 @@ function TabListVertical(_ref8) {
       setActiveIndex(selectedIndex);
     }
   }
-  useEffectOnce.useEffectOnce(() => {
+  React.useEffect(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
         return !tab.disabled;
@@ -644,7 +643,7 @@ function TabListVertical(_ref8) {
         setSelectedIndex(tabs.current.indexOf(tab));
       }
     }
-  });
+  }, []);
   React.useEffect(() => {
     function handler() {
       const containerHeight = ref.current?.offsetHeight;
@@ -1017,22 +1016,21 @@ Tab.propTypes = {
    * Provide a handler that is invoked on the key down event for the control
    */
   onKeyDown: PropTypes__default["default"].func,
-  /*
+  /**
    * An optional parameter to allow overriding the anchor rendering.
    * Useful for using Tab along with react-router or other client
    * side router libraries.
-   **/
+   */
   renderButton: PropTypes__default["default"].func,
   /**
-   * Optional prop to render an icon next to the label.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   // @ts-expect-error: Invalid prop type derivation
   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 contained tabs
-   **/
+   * Only useful for contained tabs.
+   */
   secondaryLabel: PropTypes__default["default"].string
 };
 
@@ -1134,7 +1132,7 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
   const className = cx__default["default"](`${prefix}--tab-content`, customClassName, {
     [`${prefix}--tab-content--interactive`]: interactiveContent
   });
-  useEffectOnce.useEffectOnce(() => {
+  React.useEffect(() => {
     if (!panel.current) {
       return;
     }
@@ -1143,7 +1141,7 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
       setInteractiveContent(true);
       setTabIndex(-1);
     }
-  });
+  }, []);
 
   // tabindex should only be 0 if no interactive content in children
   React.useEffect(() => {