@carbon/react 1.78.0 → 1.78.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (217) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +883 -883
  2. package/es/components/Accordion/AccordionItem.js +2 -2
  3. package/es/components/Button/Button.d.ts +2 -3
  4. package/es/components/Button/Button.js +1 -2
  5. package/es/components/Button/ButtonBase.js +1 -1
  6. package/es/components/ChatButton/ChatButton.d.ts +2 -3
  7. package/es/components/ChatButton/ChatButton.js +1 -2
  8. package/es/components/ComboBox/ComboBox.js +34 -24
  9. package/es/components/ComposedModal/ComposedModal.js +65 -51
  10. package/es/components/ContainedList/ContainedListItem/ContainedListItem.d.ts +2 -2
  11. package/es/components/ContainedList/ContainedListItem/ContainedListItem.js +1 -1
  12. package/es/components/ContentSwitcher/ContentSwitcher.js +3 -3
  13. package/es/components/DataTable/TableBatchAction.d.ts +3 -3
  14. package/es/components/DataTable/TableBatchAction.js +1 -1
  15. package/es/components/DataTable/TableContainer.d.ts +1 -1
  16. package/es/components/DataTable/TableContainer.js +3 -3
  17. package/es/components/DataTable/TableExpandHeader.d.ts +6 -5
  18. package/es/components/DataTable/TableToolbarMenu.d.ts +2 -2
  19. package/es/components/DataTable/TableToolbarMenu.js +1 -1
  20. package/es/components/DatePicker/DatePicker.js +2 -2
  21. package/es/components/DatePicker/plugins/fixEventsPlugin.js +1 -1
  22. package/es/components/Dialog/index.d.ts +42 -4
  23. package/es/components/Dialog/index.js +177 -0
  24. package/es/components/ExpandableSearch/ExpandableSearch.js +2 -2
  25. package/es/components/FeatureFlags/index.d.ts +3 -1
  26. package/es/components/FeatureFlags/index.js +3 -0
  27. package/es/components/FileUploader/FileUploader.d.ts +1 -1
  28. package/es/components/FileUploader/FileUploader.js +2 -2
  29. package/es/components/FileUploader/FileUploaderButton.js +2 -2
  30. package/es/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
  31. package/es/components/FileUploader/FileUploaderDropContainer.js +6 -4
  32. package/es/components/FileUploader/FileUploaderItem.d.ts +1 -1
  33. package/es/components/FileUploader/FileUploaderItem.js +2 -2
  34. package/es/components/Grid/CSSGrid.js +18 -14
  35. package/es/components/Grid/FlexGrid.js +7 -6
  36. package/es/components/Grid/GridTypes.d.ts +5 -3
  37. package/es/components/IconButton/index.js +3 -3
  38. package/es/components/Layer/index.d.ts +4 -6
  39. package/es/components/Layer/index.js +5 -6
  40. package/es/components/Link/Link.d.ts +2 -3
  41. package/es/components/Link/Link.js +1 -2
  42. package/es/components/ListBox/ListBoxMenuItem.d.ts +3 -3
  43. package/es/components/ListBox/ListBoxMenuItem.js +37 -15
  44. package/es/components/Menu/Menu.js +2 -2
  45. package/es/components/Menu/MenuItem.d.ts +2 -2
  46. package/es/components/Menu/MenuItem.js +3 -3
  47. package/es/components/Modal/Modal.js +121 -49
  48. package/es/components/ModalWrapper/ModalWrapper.js +1 -1
  49. package/es/components/MultiSelect/FilterableMultiSelect.js +3 -3
  50. package/es/components/MultiSelect/MultiSelect.js +2 -2
  51. package/es/components/Notification/Notification.d.ts +5 -13
  52. package/es/components/Notification/Notification.js +3 -4
  53. package/es/components/OverflowMenu/OverflowMenu.d.ts +4 -8
  54. package/es/components/OverflowMenu/OverflowMenu.js +3 -3
  55. package/es/components/OverflowMenu/next/index.d.ts +2 -2
  56. package/es/components/OverflowMenu/next/index.js +1 -1
  57. package/es/components/OverflowMenuItem/OverflowMenuItem.js +2 -2
  58. package/es/components/ProgressIndicator/ProgressIndicator.js +2 -2
  59. package/es/components/RadioTile/RadioTile.js +2 -2
  60. package/es/components/Search/Search.d.ts +2 -3
  61. package/es/components/Search/Search.js +4 -6
  62. package/es/components/Slider/Slider.d.ts +16 -15
  63. package/es/components/Slider/Slider.js +22 -22
  64. package/es/components/Tabs/Tabs.d.ts +3 -6
  65. package/es/components/Tabs/Tabs.js +8 -9
  66. package/es/components/Tag/DismissibleTag.d.ts +3 -5
  67. package/es/components/Tag/DismissibleTag.js +1 -2
  68. package/es/components/Tag/OperationalTag.d.ts +2 -3
  69. package/es/components/Tag/OperationalTag.js +1 -2
  70. package/es/components/Tag/SelectableTag.d.ts +3 -5
  71. package/es/components/Tag/SelectableTag.js +1 -2
  72. package/es/components/Tag/Tag.d.ts +2 -3
  73. package/es/components/Tag/Tag.js +1 -2
  74. package/es/components/Tile/Tile.d.ts +3 -5
  75. package/es/components/Tile/Tile.js +8 -6
  76. package/es/components/Toggletip/index.js +2 -2
  77. package/es/components/Tooltip/DefinitionTooltip.js +2 -2
  78. package/es/components/Tooltip/Tooltip.d.ts +1 -1
  79. package/es/components/Tooltip/Tooltip.js +2 -2
  80. package/es/components/TreeView/TreeNode.d.ts +3 -5
  81. package/es/components/TreeView/TreeNode.js +3 -4
  82. package/es/components/TreeView/TreeView.js +2 -2
  83. package/es/components/UIShell/HeaderContainer.js +2 -2
  84. package/es/components/UIShell/HeaderMenu.js +2 -2
  85. package/es/components/UIShell/HeaderPanel.js +2 -2
  86. package/es/components/UIShell/SideNav.d.ts +1 -1
  87. package/es/components/UIShell/SideNav.js +2 -2
  88. package/es/components/UIShell/SideNavHeader.d.ts +2 -3
  89. package/es/components/UIShell/SideNavHeader.js +1 -2
  90. package/es/components/UIShell/SideNavLink.d.ts +2 -2
  91. package/es/components/UIShell/SideNavLink.js +1 -1
  92. package/es/components/UIShell/SideNavMenu.d.ts +2 -2
  93. package/es/components/UIShell/SideNavMenu.js +3 -3
  94. package/es/components/UIShell/SwitcherItem.js +2 -2
  95. package/es/internal/FloatingMenu.js +4 -4
  96. package/es/internal/OptimizedResize.d.ts +18 -0
  97. package/es/internal/OptimizedResize.js +21 -24
  98. package/es/internal/keyboard/index.d.ts +9 -0
  99. package/es/internal/keyboard/keys.d.ts +23 -0
  100. package/es/internal/keyboard/keys.js +2 -2
  101. package/es/internal/keyboard/match.d.ts +26 -0
  102. package/es/internal/keyboard/match.js +17 -41
  103. package/es/internal/keyboard/navigation.d.ts +37 -0
  104. package/es/internal/keyboard/navigation.js +15 -27
  105. package/es/internal/useMergedRefs.js +3 -0
  106. package/lib/components/Accordion/AccordionItem.js +2 -2
  107. package/lib/components/Button/Button.d.ts +2 -3
  108. package/lib/components/Button/Button.js +1 -2
  109. package/lib/components/Button/ButtonBase.js +1 -1
  110. package/lib/components/ChatButton/ChatButton.d.ts +2 -3
  111. package/lib/components/ChatButton/ChatButton.js +1 -2
  112. package/lib/components/ComboBox/ComboBox.js +34 -24
  113. package/lib/components/ComposedModal/ComposedModal.js +64 -50
  114. package/lib/components/ContainedList/ContainedListItem/ContainedListItem.d.ts +2 -2
  115. package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js +1 -1
  116. package/lib/components/ContentSwitcher/ContentSwitcher.js +3 -3
  117. package/lib/components/DataTable/TableBatchAction.d.ts +3 -3
  118. package/lib/components/DataTable/TableBatchAction.js +1 -1
  119. package/lib/components/DataTable/TableContainer.d.ts +1 -1
  120. package/lib/components/DataTable/TableContainer.js +3 -3
  121. package/lib/components/DataTable/TableExpandHeader.d.ts +6 -5
  122. package/lib/components/DataTable/TableToolbarMenu.d.ts +2 -2
  123. package/lib/components/DataTable/TableToolbarMenu.js +1 -1
  124. package/lib/components/DatePicker/DatePicker.js +2 -2
  125. package/lib/components/DatePicker/plugins/fixEventsPlugin.js +1 -1
  126. package/lib/components/Dialog/index.d.ts +42 -4
  127. package/lib/components/Dialog/index.js +190 -0
  128. package/lib/components/ExpandableSearch/ExpandableSearch.js +2 -2
  129. package/lib/components/FeatureFlags/index.d.ts +3 -1
  130. package/lib/components/FeatureFlags/index.js +3 -0
  131. package/lib/components/FileUploader/FileUploader.d.ts +1 -1
  132. package/lib/components/FileUploader/FileUploader.js +2 -2
  133. package/lib/components/FileUploader/FileUploaderButton.js +2 -2
  134. package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
  135. package/lib/components/FileUploader/FileUploaderDropContainer.js +6 -4
  136. package/lib/components/FileUploader/FileUploaderItem.d.ts +1 -1
  137. package/lib/components/FileUploader/FileUploaderItem.js +2 -2
  138. package/lib/components/Grid/CSSGrid.js +18 -14
  139. package/lib/components/Grid/FlexGrid.js +7 -6
  140. package/lib/components/Grid/GridTypes.d.ts +5 -3
  141. package/lib/components/IconButton/index.js +3 -3
  142. package/lib/components/Layer/index.d.ts +4 -6
  143. package/lib/components/Layer/index.js +5 -6
  144. package/lib/components/Link/Link.d.ts +2 -3
  145. package/lib/components/Link/Link.js +1 -2
  146. package/lib/components/ListBox/ListBoxMenuItem.d.ts +3 -3
  147. package/lib/components/ListBox/ListBoxMenuItem.js +36 -14
  148. package/lib/components/Menu/Menu.js +2 -2
  149. package/lib/components/Menu/MenuItem.d.ts +2 -2
  150. package/lib/components/Menu/MenuItem.js +3 -3
  151. package/lib/components/Modal/Modal.js +123 -51
  152. package/lib/components/ModalWrapper/ModalWrapper.js +1 -1
  153. package/lib/components/MultiSelect/FilterableMultiSelect.js +3 -3
  154. package/lib/components/MultiSelect/MultiSelect.js +2 -2
  155. package/lib/components/Notification/Notification.d.ts +5 -13
  156. package/lib/components/Notification/Notification.js +3 -4
  157. package/lib/components/OverflowMenu/OverflowMenu.d.ts +4 -8
  158. package/lib/components/OverflowMenu/OverflowMenu.js +3 -3
  159. package/lib/components/OverflowMenu/next/index.d.ts +2 -2
  160. package/lib/components/OverflowMenu/next/index.js +1 -1
  161. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +2 -2
  162. package/lib/components/ProgressIndicator/ProgressIndicator.js +2 -2
  163. package/lib/components/RadioTile/RadioTile.js +2 -2
  164. package/lib/components/Search/Search.d.ts +2 -3
  165. package/lib/components/Search/Search.js +4 -6
  166. package/lib/components/Slider/Slider.d.ts +16 -15
  167. package/lib/components/Slider/Slider.js +22 -22
  168. package/lib/components/Tabs/Tabs.d.ts +3 -6
  169. package/lib/components/Tabs/Tabs.js +8 -9
  170. package/lib/components/Tag/DismissibleTag.d.ts +3 -5
  171. package/lib/components/Tag/DismissibleTag.js +1 -2
  172. package/lib/components/Tag/OperationalTag.d.ts +2 -3
  173. package/lib/components/Tag/OperationalTag.js +1 -2
  174. package/lib/components/Tag/SelectableTag.d.ts +3 -5
  175. package/lib/components/Tag/SelectableTag.js +1 -2
  176. package/lib/components/Tag/Tag.d.ts +2 -3
  177. package/lib/components/Tag/Tag.js +1 -2
  178. package/lib/components/Tile/Tile.d.ts +3 -5
  179. package/lib/components/Tile/Tile.js +8 -6
  180. package/lib/components/Toggletip/index.js +2 -2
  181. package/lib/components/Tooltip/DefinitionTooltip.js +2 -2
  182. package/lib/components/Tooltip/Tooltip.d.ts +1 -1
  183. package/lib/components/Tooltip/Tooltip.js +2 -2
  184. package/lib/components/TreeView/TreeNode.d.ts +3 -5
  185. package/lib/components/TreeView/TreeNode.js +3 -4
  186. package/lib/components/TreeView/TreeView.js +2 -2
  187. package/lib/components/UIShell/HeaderContainer.js +2 -2
  188. package/lib/components/UIShell/HeaderMenu.js +2 -2
  189. package/lib/components/UIShell/HeaderPanel.js +2 -2
  190. package/lib/components/UIShell/SideNav.d.ts +1 -1
  191. package/lib/components/UIShell/SideNav.js +2 -2
  192. package/lib/components/UIShell/SideNavHeader.d.ts +2 -3
  193. package/lib/components/UIShell/SideNavHeader.js +1 -2
  194. package/lib/components/UIShell/SideNavLink.d.ts +2 -2
  195. package/lib/components/UIShell/SideNavLink.js +1 -1
  196. package/lib/components/UIShell/SideNavMenu.d.ts +2 -2
  197. package/lib/components/UIShell/SideNavMenu.js +3 -3
  198. package/lib/components/UIShell/SwitcherItem.js +2 -2
  199. package/lib/internal/FloatingMenu.js +5 -5
  200. package/lib/internal/OptimizedResize.d.ts +18 -0
  201. package/lib/internal/OptimizedResize.js +21 -24
  202. package/lib/internal/keyboard/index.d.ts +9 -0
  203. package/lib/internal/keyboard/keys.d.ts +23 -0
  204. package/lib/internal/keyboard/keys.js +2 -2
  205. package/lib/internal/keyboard/match.d.ts +26 -0
  206. package/lib/internal/keyboard/match.js +17 -41
  207. package/lib/internal/keyboard/navigation.d.ts +37 -0
  208. package/lib/internal/keyboard/navigation.js +15 -27
  209. package/lib/internal/useMergedRefs.js +3 -0
  210. package/package.json +6 -6
  211. package/scss/components/dialog/_dialog.scss +9 -0
  212. package/scss/components/dialog/_index.scss +9 -0
  213. package/telemetry.yml +1 -0
  214. package/es/components/Modal/next/index.d.ts +0 -171
  215. package/es/internal/focus/index.js +0 -15
  216. package/lib/components/Modal/next/index.d.ts +0 -171
  217. package/lib/internal/focus/index.js +0 -19
@@ -10,15 +10,15 @@ import { RadioButtonChecked, RadioButton, CheckmarkFilled } from '@carbon/icons-
10
10
  import cx from 'classnames';
11
11
  import PropTypes from 'prop-types';
12
12
  import React__default from 'react';
13
+ import { Enter, Space } from '../../internal/keyboard/keys.js';
14
+ import { matches } from '../../internal/keyboard/match.js';
13
15
  import { useFallbackId } from '../../internal/useId.js';
14
16
  import { usePrefix } from '../../internal/usePrefix.js';
15
17
  import deprecate from '../../prop-types/deprecate.js';
16
18
  import { noopFn } from '../../internal/noopFn.js';
17
19
  import '../Text/index.js';
18
20
  import { useFeatureFlag } from '../FeatureFlags/index.js';
19
- import { matches } from '../../internal/keyboard/match.js';
20
21
  import { Text } from '../Text/Text.js';
21
- import { Enter, Space } from '../../internal/keyboard/keys.js';
22
22
 
23
23
  var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
24
24
  const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref, ref) {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -62,8 +62,7 @@ export interface SearchProps extends InputPropsBase {
62
62
  */
63
63
  placeholder?: string;
64
64
  /**
65
- * Rendered icon for the Search.
66
- * Can be a React component class
65
+ * A component used to render an icon.
67
66
  */
68
67
  renderIcon?: ComponentType | FunctionComponent;
69
68
  /**
@@ -10,7 +10,8 @@ import { Close, Search as Search$1 } from '@carbon/icons-react';
10
10
  import cx from 'classnames';
11
11
  import PropTypes from 'prop-types';
12
12
  import React__default, { useContext, useRef, useState } from 'react';
13
- import { focus } from '../../internal/focus/index.js';
13
+ import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
14
+ import { match } from '../../internal/keyboard/match.js';
14
15
  import { useId } from '../../internal/useId.js';
15
16
  import { usePrefix } from '../../internal/usePrefix.js';
16
17
  import { composeEventHandlers } from '../../tools/events.js';
@@ -18,8 +19,6 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
18
19
  import deprecate from '../../prop-types/deprecate.js';
19
20
  import '../FluidForm/FluidForm.js';
20
21
  import { FormContext } from '../FluidForm/FormContext.js';
21
- import { match } from '../../internal/keyboard/match.js';
22
- import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
23
22
 
24
23
  var _Close;
25
24
  const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
@@ -90,7 +89,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
90
89
  onChange(clearedEvt);
91
90
  onClear();
92
91
  setHasContent(false);
93
- focus(inputRef);
92
+ inputRef.current?.focus();
94
93
  }
95
94
  function handleChange(event) {
96
95
  setHasContent(event.target.value !== '');
@@ -221,8 +220,7 @@ Search.propTypes = {
221
220
  */
222
221
  placeholder: PropTypes.string,
223
222
  /**
224
- * Rendered icon for the Search.
225
- * Can be a React component class
223
+ * A component used to render an icon.
226
224
  */
227
225
  // @ts-expect-error: PropTypes are not expressive enough to cover this case
228
226
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -355,11 +355,13 @@ declare class Slider extends PureComponent<SliderProps> {
355
355
  */
356
356
  clamp(val: any, min: any, max: any): number;
357
357
  /**
358
- * Takes a value and ensures it fits to the steps of the range
359
- * @param value
360
- * @returns value of the nearest step
358
+ * Rounds a given value to the nearest step defined by the slider's `step`
359
+ * prop.
360
+ *
361
+ * @param value - The value to adjust to the nearest step. Defaults to `0`.
362
+ * @returns The value rounded to the precision determined by the step.
361
363
  */
362
- nearestStepValue(value: any): number;
364
+ nearestStepValue(value?: number): number;
363
365
  /**
364
366
  * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
365
367
  * started on somewhere other than the thumb without a corresponding "move"
@@ -442,17 +444,16 @@ declare class Slider extends PureComponent<SliderProps> {
442
444
  };
443
445
  calcDistanceToHandle: (handle: HandlePosition, clientX: any) => number;
444
446
  /**
445
- * Given the current value, delta and step, calculate the new value.
447
+ * Calculates a new slider value based on the current value, a change delta,
448
+ * and a step.
446
449
  *
447
- * @param {number} currentValue
448
- * Current value user is moving from.
449
- * @param {number} delta
450
- * Movement from the current value. Can be positive or negative.
451
- * @param {number} step
452
- * A value determining how much the value should increase/decrease by moving
453
- * the thumb by mouse.
454
- */
455
- calcValueForDelta: (currentValue: any, delta: any, step?: number) => any;
450
+ * @param currentValue - The starting value from which the slider is moving.
451
+ * @param delta - The amount to adjust the current value by.
452
+ * @param step - The step. Defaults to `1`.
453
+ * @returns The new slider value, rounded to the same number of decimal places
454
+ * as the step.
455
+ */
456
+ calcValueForDelta: (currentValue: number, delta: number, step?: number) => number;
456
457
  /**
457
458
  * Sets state relevant to the given handle position.
458
459
  *
@@ -10,6 +10,7 @@ import React__default, { PureComponent } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import cx from 'classnames';
12
12
  import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.js';
13
+ import { matches } from '../../internal/keyboard/match.js';
13
14
  import { PrefixContext } from '../../internal/usePrefix.js';
14
15
  import deprecate from '../../prop-types/deprecate.js';
15
16
  import { FeatureFlagContext } from '../FeatureFlags/index.js';
@@ -19,7 +20,6 @@ import '../Tooltip/DefinitionTooltip.js';
19
20
  import { Tooltip } from '../Tooltip/Tooltip.js';
20
21
  import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './SliderHandles.js';
21
22
  import { throttle } from '../../node_modules/es-toolkit/dist/compat/function/throttle.mjs.js';
22
- import { matches } from '../../internal/keyboard/match.js';
23
23
  import { Text } from '../Text/Text.js';
24
24
 
25
25
  const ThumbWrapper = _ref => {
@@ -316,7 +316,7 @@ class Slider extends PureComponent {
316
316
  value,
317
317
  left
318
318
  } = this.calcValue({
319
- value: this.calcValueForDelta(currentValue, delta, this.props.step)
319
+ value: this.calcValueForDelta(currentValue ?? this.props.min, delta, this.props.step)
320
320
  });
321
321
  this.setValueLeftForHandle(this.state.activeHandle, {
322
322
  value: this.nearestStepValue(value),
@@ -593,19 +593,21 @@ class Slider extends PureComponent {
593
593
  return Math.abs(handleX - clientX);
594
594
  });
595
595
  /**
596
- * Given the current value, delta and step, calculate the new value.
596
+ * Calculates a new slider value based on the current value, a change delta,
597
+ * and a step.
597
598
  *
598
- * @param {number} currentValue
599
- * Current value user is moving from.
600
- * @param {number} delta
601
- * Movement from the current value. Can be positive or negative.
602
- * @param {number} step
603
- * A value determining how much the value should increase/decrease by moving
604
- * the thumb by mouse.
599
+ * @param currentValue - The starting value from which the slider is moving.
600
+ * @param delta - The amount to adjust the current value by.
601
+ * @param step - The step. Defaults to `1`.
602
+ * @returns The new slider value, rounded to the same number of decimal places
603
+ * as the step.
605
604
  */
606
605
  _defineProperty(this, "calcValueForDelta", function (currentValue, delta) {
607
606
  let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
608
- return (delta > 0 ? Math.floor(currentValue / step) * step : currentValue) + delta;
607
+ const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
608
+ const newValue = base + delta;
609
+ const decimals = (step.toString().split('.')[1] || '').length;
610
+ return Number(newValue.toFixed(decimals));
609
611
  });
610
612
  /**
611
613
  * Sets state relevant to the given handle position.
@@ -869,18 +871,16 @@ class Slider extends PureComponent {
869
871
  }
870
872
 
871
873
  /**
872
- * Takes a value and ensures it fits to the steps of the range
873
- * @param value
874
- * @returns value of the nearest step
874
+ * Rounds a given value to the nearest step defined by the slider's `step`
875
+ * prop.
876
+ *
877
+ * @param value - The value to adjust to the nearest step. Defaults to `0`.
878
+ * @returns The value rounded to the precision determined by the step.
875
879
  */
876
- nearestStepValue(value) {
877
- const tempInput = document.createElement('input');
878
- tempInput.type = 'range';
879
- tempInput.min = `${this.props.min}`;
880
- tempInput.max = `${this.props.max}`;
881
- tempInput.step = `${this.props.step}`;
882
- tempInput.value = `${value}`;
883
- return parseFloat(tempInput.value);
880
+ nearestStepValue() {
881
+ let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
882
+ const decimals = (this.props.step?.toString().split('.')[1] || '').length;
883
+ return Number(value.toFixed(decimals));
884
884
  }
885
885
  getClientXFromEvent(event) {
886
886
  let clientX;
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -340,12 +340,9 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
340
340
  */
341
341
  renderButton?(): ReactNode;
342
342
  /**
343
- * Optional prop to render an icon next to the label.
344
- * Can be a React component class
343
+ * A component used to render an icon.
345
344
  */
346
- renderIcon?: ComponentType<{
347
- size: number;
348
- }>;
345
+ renderIcon?: React.ElementType;
349
346
  /**
350
347
  * An optional label to render under the primary tab label.
351
348
  * Only useful for contained tabs.
@@ -27,6 +27,8 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
27
27
  import { useMergedRefs } from '../../internal/useMergedRefs.js';
28
28
  import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
29
29
  import { usePrefix } from '../../internal/usePrefix.js';
30
+ import { ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp, Delete } from '../../internal/keyboard/keys.js';
31
+ import { matches, match } from '../../internal/keyboard/match.js';
30
32
  import { usePressable } from './usePressable.js';
31
33
  import deprecate from '../../prop-types/deprecate.js';
32
34
  import { useEvent } from '../../internal/useEvent.js';
@@ -34,9 +36,7 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
34
36
  import '../Text/index.js';
35
37
  import { BadgeIndicator } from '../BadgeIndicator/index.js';
36
38
  import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
37
- import { matches, match } from '../../internal/keyboard/match.js';
38
39
  import { Text } from '../Text/Text.js';
39
- import { ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp, Delete } from '../../internal/keyboard/keys.js';
40
40
 
41
41
  var _ChevronLeft, _ChevronRight, _BadgeIndicator;
42
42
  const verticalTabHeight = 64;
@@ -1007,22 +1007,21 @@ Tab.propTypes = {
1007
1007
  * Provide a handler that is invoked on the key down event for the control
1008
1008
  */
1009
1009
  onKeyDown: PropTypes.func,
1010
- /*
1010
+ /**
1011
1011
  * An optional parameter to allow overriding the anchor rendering.
1012
1012
  * Useful for using Tab along with react-router or other client
1013
1013
  * side router libraries.
1014
- **/
1014
+ */
1015
1015
  renderButton: PropTypes.func,
1016
1016
  /**
1017
- * Optional prop to render an icon next to the label.
1018
- * Can be a React component class
1017
+ * A component used to render an icon.
1019
1018
  */
1020
1019
  // @ts-expect-error: Invalid prop type derivation
1021
1020
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1022
- /*
1021
+ /**
1023
1022
  * An optional label to render under the primary tab label.
1024
- /* This prop is only useful for contained tabs
1025
- **/
1023
+ * Only useful for contained tabs.
1024
+ */
1026
1025
  secondaryLabel: PropTypes.string
1027
1026
  };
1028
1027
 
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -30,8 +30,7 @@ export interface DismissibleTagBaseProps {
30
30
  */
31
31
  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
32
32
  /**
33
- * Optional prop to render a custom icon.
34
- * Can be a React component class
33
+ * A component used to render an icon.
35
34
  */
36
35
  renderIcon?: React.ElementType;
37
36
  /**
@@ -86,8 +85,7 @@ declare const DismissibleTag: {
86
85
  */
87
86
  onClose: PropTypes.Requireable<(...args: any[]) => any>;
88
87
  /**
89
- * Optional prop to render a custom icon.
90
- * Can be a React component class
88
+ * A component used to render an icon.
91
89
  */
92
90
  renderIcon: PropTypes.Requireable<object>;
93
91
  /**
@@ -119,8 +119,7 @@ DismissibleTag.propTypes = {
119
119
  */
120
120
  onClose: PropTypes.func,
121
121
  /**
122
- * Optional prop to render a custom icon.
123
- * Can be a React component class
122
+ * A component used to render an icon.
124
123
  */
125
124
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
126
125
  /**
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -33,8 +33,7 @@ export interface OperationalTagBaseProps {
33
33
  */
34
34
  id?: string;
35
35
  /**
36
- * Optional prop to render a custom icon.
37
- * Can be a React component class
36
+ * A component used to render an icon.
38
37
  */
39
38
  renderIcon?: React.ElementType;
40
39
  onClick?: MouseEventHandler;
@@ -101,8 +101,7 @@ OperationalTag.propTypes = {
101
101
  */
102
102
  id: PropTypes.string,
103
103
  /**
104
- * Optional prop to render a custom icon.
105
- * Can be a React component class
104
+ * A component used to render an icon.
106
105
  */
107
106
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
108
107
  /**
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -22,8 +22,7 @@ export interface SelectableTagBaseProps {
22
22
  */
23
23
  id?: string;
24
24
  /**
25
- * Optional prop to render a custom icon.
26
- * Can be a React component class
25
+ * A component used to render an icon.
27
26
  */
28
27
  renderIcon?: React.ElementType;
29
28
  /**
@@ -65,8 +64,7 @@ declare const SelectableTag: {
65
64
  */
66
65
  id: PropTypes.Requireable<string>;
67
66
  /**
68
- * Optional prop to render a custom icon.
69
- * Can be a React component class
67
+ * A component used to render an icon.
70
68
  */
71
69
  renderIcon: PropTypes.Requireable<object>;
72
70
  /**
@@ -98,8 +98,7 @@ SelectableTag.propTypes = {
98
98
  */
99
99
  id: PropTypes.string,
100
100
  /**
101
- * Optional prop to render a custom icon.
102
- * Can be a React component class
101
+ * A component used to render an icon.
103
102
  */
104
103
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
105
104
  /**
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -58,8 +58,7 @@ export interface TagBaseProps {
58
58
  */
59
59
  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
60
60
  /**
61
- * Optional prop to render a custom icon.
62
- * Can be a React component class
61
+ * A component used to render an icon.
63
62
  */
64
63
  renderIcon?: React.ElementType;
65
64
  /**
@@ -176,8 +176,7 @@ Tag.propTypes = {
176
176
  */
177
177
  onClose: deprecate(PropTypes.func, 'The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
178
178
  /**
179
- * Optional prop to render a custom icon.
180
- * Can be a React component class
179
+ * A component used to render an icon.
181
180
  */
182
181
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
183
182
  /**
@@ -4,7 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
7
+ import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent } from 'react';
8
8
  export interface TileProps extends HTMLAttributes<HTMLDivElement> {
9
9
  children?: ReactNode;
10
10
  className?: string;
@@ -53,11 +53,9 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
53
53
  */
54
54
  href?: string;
55
55
  /**
56
- * Optional prop to allow overriding the icon rendering.
56
+ * A component used to render an icon.
57
57
  */
58
- renderIcon?: ComponentType<{
59
- className?: string;
60
- }>;
58
+ renderIcon?: React.ElementType;
61
59
  /**
62
60
  * Specify the function to run when the ClickableTile is clicked
63
61
  */
@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
11
11
  import cx from 'classnames';
12
12
  import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
13
13
  import Link from '../Link/Link.js';
14
+ import { Enter, Space } from '../../internal/keyboard/keys.js';
15
+ import { matches } from '../../internal/keyboard/match.js';
14
16
  import deprecate from '../../prop-types/deprecate.js';
15
17
  import { composeEventHandlers } from '../../tools/events.js';
16
18
  import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,9 +22,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
20
22
  import { useFeatureFlag } from '../FeatureFlags/index.js';
21
23
  import { useId } from '../../internal/useId.js';
22
24
  import '../Text/index.js';
23
- import { matches } from '../../internal/keyboard/match.js';
24
25
  import { Text } from '../Text/Text.js';
25
- import { Enter, Space } from '../../internal/keyboard/keys.js';
26
26
 
27
27
  var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
28
28
  const Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
@@ -201,8 +201,7 @@ ClickableTile.propTypes = {
201
201
  */
202
202
  rel: PropTypes.string,
203
203
  /**
204
- * Optional prop to allow overriding the icon rendering.
205
- * Can be a React component class
204
+ * A component used to render an icon.
206
205
  */
207
206
  // @ts-expect-error: Invalid derived prop type, seemingly no real solution.
208
207
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
@@ -245,9 +244,12 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
245
244
  if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
246
245
  return;
247
246
  }
248
- setIsSelected(!isSelected);
247
+ setIsSelected(prevSelected => {
248
+ const newSelected = !prevSelected;
249
+ onChange(evt, newSelected, id);
250
+ return newSelected;
251
+ });
249
252
  clickHandler(evt);
250
- onChange(evt, isSelected, id);
251
253
  }
252
254
  function handleKeyDown(evt) {
253
255
  evt?.persist?.();
@@ -10,11 +10,11 @@ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default, { useRef, useState, useContext } from 'react';
12
12
  import { Popover, PopoverContent } from '../Popover/index.js';
13
+ import { Escape } from '../../internal/keyboard/keys.js';
14
+ import { match } from '../../internal/keyboard/match.js';
13
15
  import { useWindowEvent } from '../../internal/useEvent.js';
14
16
  import { useId } from '../../internal/useId.js';
15
17
  import { usePrefix } from '../../internal/usePrefix.js';
16
- import { match } from '../../internal/keyboard/match.js';
17
- import { Escape } from '../../internal/keyboard/keys.js';
18
18
 
19
19
  /**
20
20
  * Used to render the label for a Toggletip
@@ -10,11 +10,11 @@ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default, { useState } from 'react';
12
12
  import { Popover, PopoverContent } from '../Popover/index.js';
13
+ import { Escape } from '../../internal/keyboard/keys.js';
14
+ import { match } from '../../internal/keyboard/match.js';
13
15
  import { useFallbackId } from '../../internal/useId.js';
14
16
  import { usePrefix } from '../../internal/usePrefix.js';
15
17
  import deprecate from '../../prop-types/deprecate.js';
16
- import { match } from '../../internal/keyboard/match.js';
17
- import { Escape } from '../../internal/keyboard/keys.js';
18
18
 
19
19
  const DefinitionTooltip = _ref => {
20
20
  let {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -10,13 +10,13 @@ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default, { useRef, useState, useCallback, useEffect } from 'react';
12
12
  import { Popover, PopoverContent } from '../Popover/index.js';
13
+ import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
14
+ import { match } from '../../internal/keyboard/match.js';
13
15
  import { useDelayedState } from '../../internal/useDelayedState.js';
14
16
  import { useId } from '../../internal/useId.js';
15
17
  import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
16
18
  import { usePrefix } from '../../internal/usePrefix.js';
17
19
  import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
18
- import { match } from '../../internal/keyboard/match.js';
19
- import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
20
20
 
21
21
  /**
22
22
  * Event types that trigger a "drag" to stop.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -62,8 +62,7 @@ export type TreeNodeProps = {
62
62
  */
63
63
  onTreeSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
64
64
  /**
65
- * Optional prop to allow each node to have an associated icon.
66
- * Can be a React component class
65
+ * A component used to render an icon.
67
66
  */
68
67
  renderIcon?: ComponentType | FunctionComponent;
69
68
  /**
@@ -137,8 +136,7 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
137
136
  */
138
137
  onTreeSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
139
138
  /**
140
- * Optional prop to allow each node to have an associated icon.
141
- * Can be a React component class
139
+ * A component used to render an icon.
142
140
  */
143
141
  renderIcon?: ComponentType | FunctionComponent;
144
142
  /**
@@ -10,12 +10,12 @@ import { CaretDown } from '@carbon/icons-react';
10
10
  import cx from 'classnames';
11
11
  import PropTypes from 'prop-types';
12
12
  import React__default, { useRef, useState, useEffect } from 'react';
13
+ import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
14
+ import { matches, match } from '../../internal/keyboard/match.js';
13
15
  import { useControllableState } from '../../internal/useControllableState.js';
14
16
  import { usePrefix } from '../../internal/usePrefix.js';
15
17
  import uniqueId from '../../tools/uniqueId.js';
16
18
  import { useFeatureFlag } from '../FeatureFlags/index.js';
17
- import { matches, match } from '../../internal/keyboard/match.js';
18
- import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
19
19
 
20
20
  const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
21
21
  let {
@@ -400,8 +400,7 @@ TreeNode.propTypes = {
400
400
  */
401
401
  onTreeSelect: PropTypes.func,
402
402
  /**
403
- * Optional prop to allow each node to have an associated icon.
404
- * Can be a React component class
403
+ * A component used to render an icon.
405
404
  */
406
405
  // @ts-ignore
407
406
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -9,13 +9,13 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
9
9
  import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default, { useRef, useState, useEffect } from 'react';
12
+ import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
13
+ import { matches, match } from '../../internal/keyboard/match.js';
12
14
  import { useControllableState } from '../../internal/useControllableState.js';
13
15
  import { usePrefix } from '../../internal/usePrefix.js';
14
16
  import uniqueId from '../../tools/uniqueId.js';
15
17
  import { useFeatureFlag } from '../FeatureFlags/index.js';
16
18
  import TreeNode from './TreeNode.js';
17
- import { matches, match } from '../../internal/keyboard/match.js';
18
- import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
19
19
 
20
20
  const TreeView = _ref => {
21
21
  let {
@@ -8,9 +8,9 @@
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
10
  import React__default, { useState, useCallback } from 'react';
11
- import { useWindowEvent } from '../../internal/useEvent.js';
12
- import { match } from '../../internal/keyboard/match.js';
13
11
  import { Escape } from '../../internal/keyboard/keys.js';
12
+ import { match } from '../../internal/keyboard/match.js';
13
+ import { useWindowEvent } from '../../internal/useEvent.js';
14
14
 
15
15
  function HeaderContainer(_ref) {
16
16
  let {
@@ -10,12 +10,12 @@ import { ChevronDown } from '@carbon/icons-react';
10
10
  import cx from 'classnames';
11
11
  import React__default from 'react';
12
12
  import PropTypes from 'prop-types';
13
+ import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
14
+ import { matches } from '../../internal/keyboard/match.js';
13
15
  import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
14
16
  import { PrefixContext } from '../../internal/usePrefix.js';
15
17
  import deprecate from '../../prop-types/deprecate.js';
16
18
  import { composeEventHandlers } from '../../tools/events.js';
17
- import { matches } from '../../internal/keyboard/match.js';
18
- import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
19
19
 
20
20
  /**
21
21
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children