@carbon/react 1.78.2 → 1.79.0

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 (253) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +882 -882
  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 +29 -19
  5. package/es/components/Button/ButtonBase.js +3 -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 +5 -4
  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/Column.d.ts +2 -2
  36. package/es/components/Grid/Column.js +7 -8
  37. package/es/components/Grid/FlexGrid.js +7 -6
  38. package/es/components/Grid/GridTypes.d.ts +5 -3
  39. package/es/components/IconButton/index.d.ts +2 -2
  40. package/es/components/IconButton/index.js +4 -4
  41. package/es/components/Layer/index.d.ts +4 -6
  42. package/es/components/Layer/index.js +5 -6
  43. package/es/components/Link/Link.d.ts +2 -3
  44. package/es/components/Link/Link.js +1 -2
  45. package/es/components/ListBox/ListBoxMenuItem.d.ts +3 -3
  46. package/es/components/ListBox/ListBoxMenuItem.js +37 -15
  47. package/es/components/Menu/Menu.js +2 -2
  48. package/es/components/Menu/MenuItem.d.ts +2 -2
  49. package/es/components/Menu/MenuItem.js +3 -3
  50. package/es/components/Modal/Modal.js +121 -49
  51. package/es/components/ModalWrapper/ModalWrapper.js +1 -1
  52. package/es/components/MultiSelect/FilterableMultiSelect.js +3 -3
  53. package/es/components/MultiSelect/MultiSelect.js +2 -2
  54. package/es/components/MultiSelect/index.d.ts +1 -1
  55. package/es/components/MultiSelect/index.js +1 -8
  56. package/es/components/Notification/Notification.d.ts +5 -13
  57. package/es/components/Notification/Notification.js +3 -4
  58. package/es/components/OverflowMenu/OverflowMenu.d.ts +22 -201
  59. package/es/components/OverflowMenu/OverflowMenu.js +269 -338
  60. package/es/components/OverflowMenu/index.d.ts +5 -5
  61. package/es/components/OverflowMenu/index.js +2 -2
  62. package/es/components/OverflowMenu/next/index.d.ts +4 -4
  63. package/es/components/OverflowMenu/next/index.js +1 -1
  64. package/es/components/OverflowMenuItem/OverflowMenuItem.js +2 -2
  65. package/es/components/ProgressIndicator/ProgressIndicator.js +2 -2
  66. package/es/components/RadioTile/RadioTile.js +2 -2
  67. package/es/components/Search/Search.d.ts +2 -3
  68. package/es/components/Search/Search.js +4 -6
  69. package/es/components/Slider/Slider.d.ts +39 -44
  70. package/es/components/Slider/Slider.js +57 -59
  71. package/es/components/Tabs/Tabs.d.ts +3 -6
  72. package/es/components/Tabs/Tabs.js +16 -18
  73. package/es/components/Tag/DismissibleTag.d.ts +3 -5
  74. package/es/components/Tag/DismissibleTag.js +1 -2
  75. package/es/components/Tag/OperationalTag.d.ts +2 -3
  76. package/es/components/Tag/OperationalTag.js +1 -2
  77. package/es/components/Tag/SelectableTag.d.ts +3 -5
  78. package/es/components/Tag/SelectableTag.js +1 -2
  79. package/es/components/Tag/Tag.d.ts +2 -3
  80. package/es/components/Tag/Tag.js +1 -2
  81. package/es/components/Tile/Tile.d.ts +3 -5
  82. package/es/components/Tile/Tile.js +16 -10
  83. package/es/components/Toggletip/index.js +2 -2
  84. package/es/components/Tooltip/DefinitionTooltip.js +2 -2
  85. package/es/components/Tooltip/Tooltip.d.ts +1 -1
  86. package/es/components/Tooltip/Tooltip.js +2 -2
  87. package/es/components/TreeView/TreeNode.d.ts +3 -5
  88. package/es/components/TreeView/TreeNode.js +3 -4
  89. package/es/components/TreeView/TreeView.js +2 -2
  90. package/es/components/UIShell/HeaderContainer.js +2 -2
  91. package/es/components/UIShell/HeaderMenu.js +2 -2
  92. package/es/components/UIShell/HeaderPanel.js +2 -2
  93. package/es/components/UIShell/SideNav.d.ts +1 -1
  94. package/es/components/UIShell/SideNav.js +2 -2
  95. package/es/components/UIShell/SideNavHeader.d.ts +2 -3
  96. package/es/components/UIShell/SideNavHeader.js +1 -2
  97. package/es/components/UIShell/SideNavLink.d.ts +2 -2
  98. package/es/components/UIShell/SideNavLink.js +1 -1
  99. package/es/components/UIShell/SideNavMenu.d.ts +2 -2
  100. package/es/components/UIShell/SideNavMenu.js +3 -3
  101. package/es/components/UIShell/SwitcherItem.js +2 -2
  102. package/es/index.js +1 -1
  103. package/es/internal/FloatingMenu.d.ts +2 -2
  104. package/es/internal/FloatingMenu.js +8 -5
  105. package/es/internal/OptimizedResize.d.ts +18 -0
  106. package/es/internal/OptimizedResize.js +21 -24
  107. package/es/internal/createClassWrapper.d.ts +3 -3
  108. package/es/internal/createClassWrapper.js +4 -4
  109. package/es/internal/keyboard/index.d.ts +9 -0
  110. package/es/internal/keyboard/keys.d.ts +23 -0
  111. package/es/internal/keyboard/keys.js +2 -2
  112. package/es/internal/keyboard/match.d.ts +26 -0
  113. package/es/internal/keyboard/match.js +17 -41
  114. package/es/internal/keyboard/navigation.d.ts +37 -0
  115. package/es/internal/keyboard/navigation.js +15 -27
  116. package/es/internal/useIsomorphicEffect.d.ts +10 -0
  117. package/es/internal/useIsomorphicEffect.js +2 -3
  118. package/es/internal/useMatchMedia.d.ts +8 -0
  119. package/es/internal/useMatchMedia.js +10 -20
  120. package/es/internal/useMergedRefs.js +3 -0
  121. package/es/internal/useNormalizedInputProps.d.ts +52 -0
  122. package/es/internal/useNormalizedInputProps.js +9 -36
  123. package/lib/components/Accordion/AccordionItem.js +2 -2
  124. package/lib/components/Button/Button.d.ts +2 -3
  125. package/lib/components/Button/Button.js +29 -19
  126. package/lib/components/Button/ButtonBase.js +3 -1
  127. package/lib/components/ChatButton/ChatButton.d.ts +2 -3
  128. package/lib/components/ChatButton/ChatButton.js +1 -2
  129. package/lib/components/ComboBox/ComboBox.js +34 -24
  130. package/lib/components/ComposedModal/ComposedModal.js +64 -50
  131. package/lib/components/ContainedList/ContainedListItem/ContainedListItem.d.ts +2 -2
  132. package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js +1 -1
  133. package/lib/components/ContentSwitcher/ContentSwitcher.js +3 -3
  134. package/lib/components/DataTable/TableBatchAction.d.ts +3 -3
  135. package/lib/components/DataTable/TableBatchAction.js +1 -1
  136. package/lib/components/DataTable/TableContainer.d.ts +1 -1
  137. package/lib/components/DataTable/TableContainer.js +5 -4
  138. package/lib/components/DataTable/TableExpandHeader.d.ts +6 -5
  139. package/lib/components/DataTable/TableToolbarMenu.d.ts +2 -2
  140. package/lib/components/DataTable/TableToolbarMenu.js +1 -1
  141. package/lib/components/DatePicker/DatePicker.js +2 -2
  142. package/lib/components/DatePicker/plugins/fixEventsPlugin.js +1 -1
  143. package/lib/components/Dialog/index.d.ts +42 -4
  144. package/lib/components/Dialog/index.js +190 -0
  145. package/lib/components/ExpandableSearch/ExpandableSearch.js +2 -2
  146. package/lib/components/FeatureFlags/index.d.ts +3 -1
  147. package/lib/components/FeatureFlags/index.js +3 -0
  148. package/lib/components/FileUploader/FileUploader.d.ts +1 -1
  149. package/lib/components/FileUploader/FileUploader.js +2 -2
  150. package/lib/components/FileUploader/FileUploaderButton.js +2 -2
  151. package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
  152. package/lib/components/FileUploader/FileUploaderDropContainer.js +6 -4
  153. package/lib/components/FileUploader/FileUploaderItem.d.ts +1 -1
  154. package/lib/components/FileUploader/FileUploaderItem.js +2 -2
  155. package/lib/components/Grid/CSSGrid.js +18 -14
  156. package/lib/components/Grid/Column.d.ts +2 -2
  157. package/lib/components/Grid/Column.js +7 -8
  158. package/lib/components/Grid/FlexGrid.js +7 -6
  159. package/lib/components/Grid/GridTypes.d.ts +5 -3
  160. package/lib/components/IconButton/index.d.ts +2 -2
  161. package/lib/components/IconButton/index.js +4 -4
  162. package/lib/components/Layer/index.d.ts +4 -6
  163. package/lib/components/Layer/index.js +5 -6
  164. package/lib/components/Link/Link.d.ts +2 -3
  165. package/lib/components/Link/Link.js +1 -2
  166. package/lib/components/ListBox/ListBoxMenuItem.d.ts +3 -3
  167. package/lib/components/ListBox/ListBoxMenuItem.js +36 -14
  168. package/lib/components/Menu/Menu.js +2 -2
  169. package/lib/components/Menu/MenuItem.d.ts +2 -2
  170. package/lib/components/Menu/MenuItem.js +3 -3
  171. package/lib/components/Modal/Modal.js +123 -51
  172. package/lib/components/ModalWrapper/ModalWrapper.js +1 -1
  173. package/lib/components/MultiSelect/FilterableMultiSelect.js +3 -3
  174. package/lib/components/MultiSelect/MultiSelect.js +2 -2
  175. package/lib/components/MultiSelect/index.d.ts +1 -1
  176. package/lib/components/MultiSelect/index.js +1 -8
  177. package/lib/components/Notification/Notification.d.ts +5 -13
  178. package/lib/components/Notification/Notification.js +3 -4
  179. package/lib/components/OverflowMenu/OverflowMenu.d.ts +22 -201
  180. package/lib/components/OverflowMenu/OverflowMenu.js +268 -336
  181. package/lib/components/OverflowMenu/index.d.ts +5 -5
  182. package/lib/components/OverflowMenu/index.js +2 -2
  183. package/lib/components/OverflowMenu/next/index.d.ts +4 -4
  184. package/lib/components/OverflowMenu/next/index.js +1 -1
  185. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +2 -2
  186. package/lib/components/ProgressIndicator/ProgressIndicator.js +2 -2
  187. package/lib/components/RadioTile/RadioTile.js +2 -2
  188. package/lib/components/Search/Search.d.ts +2 -3
  189. package/lib/components/Search/Search.js +4 -6
  190. package/lib/components/Slider/Slider.d.ts +39 -44
  191. package/lib/components/Slider/Slider.js +57 -59
  192. package/lib/components/Tabs/Tabs.d.ts +3 -6
  193. package/lib/components/Tabs/Tabs.js +16 -18
  194. package/lib/components/Tag/DismissibleTag.d.ts +3 -5
  195. package/lib/components/Tag/DismissibleTag.js +1 -2
  196. package/lib/components/Tag/OperationalTag.d.ts +2 -3
  197. package/lib/components/Tag/OperationalTag.js +1 -2
  198. package/lib/components/Tag/SelectableTag.d.ts +3 -5
  199. package/lib/components/Tag/SelectableTag.js +1 -2
  200. package/lib/components/Tag/Tag.d.ts +2 -3
  201. package/lib/components/Tag/Tag.js +1 -2
  202. package/lib/components/Tile/Tile.d.ts +3 -5
  203. package/lib/components/Tile/Tile.js +16 -10
  204. package/lib/components/Toggletip/index.js +2 -2
  205. package/lib/components/Tooltip/DefinitionTooltip.js +2 -2
  206. package/lib/components/Tooltip/Tooltip.d.ts +1 -1
  207. package/lib/components/Tooltip/Tooltip.js +2 -2
  208. package/lib/components/TreeView/TreeNode.d.ts +3 -5
  209. package/lib/components/TreeView/TreeNode.js +3 -4
  210. package/lib/components/TreeView/TreeView.js +2 -2
  211. package/lib/components/UIShell/HeaderContainer.js +2 -2
  212. package/lib/components/UIShell/HeaderMenu.js +2 -2
  213. package/lib/components/UIShell/HeaderPanel.js +2 -2
  214. package/lib/components/UIShell/SideNav.d.ts +1 -1
  215. package/lib/components/UIShell/SideNav.js +2 -2
  216. package/lib/components/UIShell/SideNavHeader.d.ts +2 -3
  217. package/lib/components/UIShell/SideNavHeader.js +1 -2
  218. package/lib/components/UIShell/SideNavLink.d.ts +2 -2
  219. package/lib/components/UIShell/SideNavLink.js +1 -1
  220. package/lib/components/UIShell/SideNavMenu.d.ts +2 -2
  221. package/lib/components/UIShell/SideNavMenu.js +3 -3
  222. package/lib/components/UIShell/SwitcherItem.js +2 -2
  223. package/lib/index.js +2 -2
  224. package/lib/internal/FloatingMenu.d.ts +2 -2
  225. package/lib/internal/FloatingMenu.js +9 -6
  226. package/lib/internal/OptimizedResize.d.ts +18 -0
  227. package/lib/internal/OptimizedResize.js +21 -24
  228. package/lib/internal/createClassWrapper.d.ts +3 -3
  229. package/lib/internal/createClassWrapper.js +4 -4
  230. package/lib/internal/keyboard/index.d.ts +9 -0
  231. package/lib/internal/keyboard/keys.d.ts +23 -0
  232. package/lib/internal/keyboard/keys.js +2 -2
  233. package/lib/internal/keyboard/match.d.ts +26 -0
  234. package/lib/internal/keyboard/match.js +17 -41
  235. package/lib/internal/keyboard/navigation.d.ts +37 -0
  236. package/lib/internal/keyboard/navigation.js +15 -27
  237. package/lib/internal/useIsomorphicEffect.d.ts +10 -0
  238. package/lib/internal/useIsomorphicEffect.js +2 -3
  239. package/lib/internal/useMatchMedia.d.ts +8 -0
  240. package/lib/internal/useMatchMedia.js +10 -20
  241. package/lib/internal/useMergedRefs.js +3 -0
  242. package/lib/internal/useNormalizedInputProps.d.ts +52 -0
  243. package/lib/internal/useNormalizedInputProps.js +9 -36
  244. package/package.json +6 -6
  245. package/scss/components/dialog/_dialog.scss +9 -0
  246. package/scss/components/dialog/_index.scss +9 -0
  247. package/telemetry.yml +1 -0
  248. package/es/components/Modal/next/index.d.ts +0 -171
  249. package/es/internal/focus/index.js +0 -15
  250. package/es/internal/useEffectOnce.js +0 -30
  251. package/lib/components/Modal/next/index.d.ts +0 -171
  252. package/lib/internal/focus/index.js +0 -19
  253. package/lib/internal/useEffectOnce.js +0 -34
@@ -16,44 +16,42 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
16
16
  var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
17
17
 
18
18
  // mdn resize function
19
- const OptimizedResize = function optimizedResize() {
19
+
20
+ /**
21
+ * A callback function to be executed on `resize`.
22
+ */
23
+
24
+ const OptimizedResize = (() => {
20
25
  const callbacks = [];
21
26
  let running = false;
22
-
23
- // run the actual callbacks
24
- function runCallbacks() {
27
+ const runCallbacks = () => {
25
28
  callbacks.forEach(callback => {
26
29
  callback();
27
30
  });
28
31
  running = false;
29
- }
30
-
31
- // fired on resize event
32
- function resize() {
32
+ };
33
+ const handleResize = () => {
33
34
  if (!running) {
34
35
  running = true;
35
36
  window__default["default"].requestAnimationFrame(runCallbacks);
36
37
  }
37
- }
38
-
39
- // adds callback to loop
40
- function addCallback(callback) {
41
- if (callback) {
42
- const index = callbacks.indexOf(callback);
43
- if (index < 0) {
44
- callbacks.push(callback);
45
- }
38
+ };
39
+ const addCallback = callback => {
40
+ const index = callbacks.indexOf(callback);
41
+ if (index < 0) {
42
+ callbacks.push(callback);
46
43
  }
47
- }
44
+ };
48
45
  return {
49
- // public method to add additional callback
46
+ /** Adds a callback function to be executed on window `resize`. */
50
47
  add: callback => {
51
48
  if (!callbacks.length) {
52
- window__default["default"].addEventListener('resize', resize);
49
+ window__default["default"].addEventListener('resize', handleResize);
53
50
  }
54
51
  addCallback(callback);
55
52
  return {
56
- release() {
53
+ /** Removes the callback. */
54
+ remove: () => {
57
55
  const index = callbacks.indexOf(callback);
58
56
  if (index >= 0) {
59
57
  callbacks.splice(index, 1);
@@ -62,7 +60,6 @@ const OptimizedResize = function optimizedResize() {
62
60
  };
63
61
  }
64
62
  };
65
- }();
66
- var OptimizedResize$1 = OptimizedResize;
63
+ })();
67
64
 
68
- exports["default"] = OptimizedResize$1;
65
+ exports.OptimizedResize = OptimizedResize;
@@ -1,12 +1,12 @@
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.
6
6
  */
7
- import { ComponentClass, FunctionComponent } from 'react';
7
+ import { type ComponentClass, type ForwardRefExoticComponent, type FunctionComponent, type PropsWithChildren } from 'react';
8
8
  /**
9
9
  * Wrap a class component with a functional component. This prevents an end-user
10
10
  * from being able to pass `ref` and access the underlying class instance.
11
11
  */
12
- export declare function createClassWrapper<Props>(Component: ComponentClass<Props>): FunctionComponent<Props>;
12
+ export declare const createClassWrapper: <Props extends PropsWithChildren>(Component: ComponentClass<Props> | ForwardRefExoticComponent<Props>) => FunctionComponent<Props>;
@@ -19,13 +19,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
19
  * Wrap a class component with a functional component. This prevents an end-user
20
20
  * from being able to pass `ref` and access the underlying class instance.
21
21
  */
22
- function createClassWrapper(Component) {
23
- function ClassWrapper(props) {
22
+ const createClassWrapper = Component => {
23
+ const ClassWrapper = props => {
24
24
  return /*#__PURE__*/React__default["default"].createElement(Component, props);
25
- }
25
+ };
26
26
  const name = Component.displayName || Component.name;
27
27
  ClassWrapper.displayName = `ClassWrapper(${name})`;
28
28
  return ClassWrapper;
29
- }
29
+ };
30
30
 
31
31
  exports.createClassWrapper = createClassWrapper;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export * as keys from './keys';
8
+ export * from './match';
9
+ export * from './navigation';
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { KeyboardEvent } from 'react';
8
+ export type Key = Pick<KeyboardEvent, 'which' | 'keyCode' | 'code'> & {
9
+ key?: string | string[];
10
+ };
11
+ export declare const Tab: Key;
12
+ export declare const Enter: Key;
13
+ export declare const Escape: Key;
14
+ export declare const Space: Key;
15
+ export declare const PageUp: Key;
16
+ export declare const PageDown: Key;
17
+ export declare const End: Key;
18
+ export declare const Home: Key;
19
+ export declare const ArrowLeft: Key;
20
+ export declare const ArrowUp: Key;
21
+ export declare const ArrowRight: Key;
22
+ export declare const ArrowDown: Key;
23
+ export declare const Delete: Key;
@@ -73,8 +73,8 @@ const ArrowDown = {
73
73
  };
74
74
  const Delete = {
75
75
  key: 'Delete',
76
- which: 8 ,
77
- keyCode: 8 ,
76
+ which: 8,
77
+ keyCode: 8,
78
78
  code: 'ArrowDecimal'
79
79
  };
80
80
 
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
8
+ import type { Key } from './keys';
9
+ /**
10
+ * Check to see if at least one key code matches the key code of the
11
+ * given event.
12
+ *
13
+ * @param event - The event to test.
14
+ * @param keysToMatch - An array of key definitions to match against.
15
+ * @returns `true` if one of the keys matches.
16
+ */
17
+ export declare const matches: (event: ReactKeyboardEvent | KeyboardEvent, keysToMatch: Key[]) => boolean;
18
+ /**
19
+ * Check to see if the given key matches the corresponding keyboard event. Also
20
+ * supports passing in the value directly if you can't use the given event.
21
+ *
22
+ * @param eventOrCode - A `KeyboardEvent`, a number, or a string value.
23
+ * @param keyObj - An object with key properties to match against.
24
+ * @returns `true` if the event or code matches the key definition.
25
+ */
26
+ export declare const match: (eventOrCode: ReactKeyboardEvent | KeyboardEvent | number | string, { key, which, keyCode, code }: Key) => boolean;
@@ -9,65 +9,38 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
- /**
13
- * @typedef Key
14
- * @property key {Array<string>|string}
15
- * @property which {number}
16
- * @property keyCode {number}
17
- */
18
-
19
12
  /**
20
13
  * Check to see if at least one key code matches the key code of the
21
14
  * given event.
22
15
  *
23
- * @example
24
- * import * as keys from '../keys';
25
- * import { matches } from '../match';
26
- *
27
- * function handleOnKeyDown(event) {
28
- * if (matches(event, [keys.Enter, keys.Space]) {
29
- * // ...
30
- * }
31
- * }
32
- *
33
- * @param {Event|React.SyntheticEvent} event
34
- * @param {Array<Key>} keysToMatch
35
- * @returns {boolean}
16
+ * @param event - The event to test.
17
+ * @param keysToMatch - An array of key definitions to match against.
18
+ * @returns `true` if one of the keys matches.
36
19
  */
37
- function matches(event, keysToMatch) {
20
+ const matches = (event, keysToMatch) => {
38
21
  for (let i = 0; i < keysToMatch.length; i++) {
39
22
  if (match(event, keysToMatch[i])) {
40
23
  return true;
41
24
  }
42
25
  }
43
26
  return false;
44
- }
27
+ };
45
28
 
46
29
  /**
47
30
  * Check to see if the given key matches the corresponding keyboard event. Also
48
- * supports passing in the value directly if you can't used the given event.
49
- *
50
- * @example
51
- * import * as keys from '../keys';
52
- * import { matches } from '../match';
53
- *
54
- * function handleOnKeyDown(event) {
55
- * if (match(event, keys.Enter) {
56
- * // ...
57
- * }
58
- * }
31
+ * supports passing in the value directly if you can't use the given event.
59
32
  *
60
- * @param {React.SyntheticEvent|Event|number|string} eventOrCode
61
- * @param {Key} key
62
- * @returns {boolean}
33
+ * @param eventOrCode - A `KeyboardEvent`, a number, or a string value.
34
+ * @param keyObj - An object with key properties to match against.
35
+ * @returns `true` if the event or code matches the key definition.
63
36
  */
64
- function match(eventOrCode) {
37
+ const match = (eventOrCode, _ref) => {
65
38
  let {
66
39
  key,
67
40
  which,
68
41
  keyCode,
69
42
  code
70
- } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
43
+ } = _ref;
71
44
  if (typeof eventOrCode === 'string') {
72
45
  return eventOrCode === key;
73
46
  }
@@ -75,10 +48,13 @@ function match(eventOrCode) {
75
48
  return eventOrCode === which || eventOrCode === keyCode;
76
49
  }
77
50
  if (eventOrCode.key && Array.isArray(key)) {
78
- return key.indexOf(eventOrCode.key) !== -1;
51
+ return key.includes(eventOrCode.key);
79
52
  }
80
- return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
81
- }
53
+ return eventOrCode.key === key ||
54
+ // TODO: When can these checks for deprecated properties be deleted?
55
+ // Presumably, the `Key` type should also be pruned of these properties.
56
+ eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
57
+ };
82
58
 
83
59
  exports.match = match;
84
60
  exports.matches = matches;
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { KeyboardEvent } from 'react';
8
+ /**
9
+ * A "ring buffer" function that takes an array and, depending on an ArrowRight
10
+ * or ArrowLeft key input, loops from last index to first or first index to last.
11
+ *
12
+ * @param key - the left or right arrow key (KeyboardEvent, number, or string)
13
+ * @param index - the current index in the array
14
+ * @param arrayLength - the total length of the array
15
+ *
16
+ * @example
17
+ * getNextIndex(keyCodes.RIGHT, 0, 4)
18
+ */
19
+ export declare const getNextIndex: (key: KeyboardEvent | number | string, index: number, arrayLength: number) => number | undefined;
20
+ /**
21
+ * A flag `node.compareDocumentPosition(target)` returns that indicates
22
+ * `target` is located earlier than `node` in the document or `target` contains `node`.
23
+ */
24
+ export declare const DOCUMENT_POSITION_BROAD_PRECEDING: number;
25
+ /**
26
+ * A flag `node.compareDocumentPosition(target)` returns that indicates
27
+ * `target` is located later than `node` in the document or `node` contains `target`.
28
+ */
29
+ export declare const DOCUMENT_POSITION_BROAD_FOLLOWING: number;
30
+ /**
31
+ * CSS selector that selects major nodes that are sequentially focusable.
32
+ */
33
+ export declare const selectorTabbable = "\n a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n textarea:not([disabled]):not([tabindex='-1']),\n iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
34
+ /**
35
+ * CSS selector that selects major nodes that are click focusable.
36
+ */
37
+ export declare const selectorFocusable = "\n a[href], area[href], input:not([disabled]),\n button:not([disabled]),select:not([disabled]),\n textarea:not([disabled]),\n iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";
@@ -13,21 +13,16 @@ var keys = require('./keys.js');
13
13
  var match = require('./match.js');
14
14
 
15
15
  /**
16
- * Various utilities to help with a11y work
17
- */
18
-
19
- /**
20
- * A "ring buffer" function that takes an array and depending on an ArrowRight
21
- * or ArrowLeft key input loops from last index to first or first index to last.
16
+ * A "ring buffer" function that takes an array and, depending on an ArrowRight
17
+ * or ArrowLeft key input, loops from last index to first or first index to last.
22
18
  *
23
- * @param {string} key - the left or right arrow keys
24
- * @param {number} index - the current index in a given array
25
- * @param {number} arrayLength - the total length of the array
19
+ * @param key - the left or right arrow key (KeyboardEvent, number, or string)
20
+ * @param index - the current index in the array
21
+ * @param arrayLength - the total length of the array
26
22
  *
27
23
  * @example
28
- * getNextIndex(keyCodes.RIGHT, 0, 4)
24
+ * getNextIndex(keyCodes.RIGHT, 0, 4)
29
25
  */
30
-
31
26
  const getNextIndex = (key, index, arrayLength) => {
32
27
  if (match.match(key, keys.ArrowRight)) {
33
28
  return (index + 1) % arrayLength;
@@ -35,30 +30,23 @@ const getNextIndex = (key, index, arrayLength) => {
35
30
  if (match.match(key, keys.ArrowLeft)) {
36
31
  return (index + arrayLength - 1) % arrayLength;
37
32
  }
33
+ return;
38
34
  };
39
35
 
40
36
  /**
41
- * A flag `node.compareDocumentPosition(target)` returns,
42
- * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
37
+ * A flag `node.compareDocumentPosition(target)` returns that indicates
38
+ * `target` is located earlier than `node` in the document or `target` contains `node`.
43
39
  */
44
- const DOCUMENT_POSITION_BROAD_PRECEDING =
45
- // Checks `typeof Node` for `react-docgen`
46
- typeof Node !== 'undefined' &&
47
- // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
48
- Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
40
+ const DOCUMENT_POSITION_BROAD_PRECEDING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS : 0;
49
41
 
50
42
  /**
51
- * A flag `node.compareDocumentPosition(target)` returns,
52
- * that indicates `target` is located later than `node` in the document or `node` contains `target`.
43
+ * A flag `node.compareDocumentPosition(target)` returns that indicates
44
+ * `target` is located later than `node` in the document or `node` contains `target`.
53
45
  */
54
- const DOCUMENT_POSITION_BROAD_FOLLOWING =
55
- // Checks `typeof Node` for `react-docgen`
56
- typeof Node !== 'undefined' &&
57
- // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
58
- Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
46
+ const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY : 0;
59
47
 
60
48
  /**
61
- * CSS selector that selects major nodes that are sequential-focusable.
49
+ * CSS selector that selects major nodes that are sequentially focusable.
62
50
  */
63
51
  const selectorTabbable = `
64
52
  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
@@ -68,7 +56,7 @@ const selectorTabbable = `
68
56
  `;
69
57
 
70
58
  /**
71
- * CSS selector that selects major nodes that are click focusable
59
+ * CSS selector that selects major nodes that are click focusable.
72
60
  */
73
61
  const selectorFocusable = `
74
62
  a[href], area[href], input:not([disabled]),
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright IBM Corp. 2021, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { useEffect } from 'react';
8
+ /** `useLayoutEffect` on the client, `useEffect` on the server */
9
+ declare const useIsomorphicEffect: typeof useEffect;
10
+ export default useIsomorphicEffect;
@@ -11,8 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
13
 
14
- // useLayoutEffect on the client, useEffect on the server
14
+ /** `useLayoutEffect` on the client, `useEffect` on the server */
15
15
  const useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
16
- var useIsomorphicEffect$1 = useIsomorphicEffect;
17
16
 
18
- exports["default"] = useIsomorphicEffect$1;
17
+ exports["default"] = useIsomorphicEffect;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /** Listens to changes in a media query and returns whether it matches. */
8
+ export declare const useMatchMedia: (mediaQuery: string) => boolean;
@@ -12,37 +12,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
12
12
  var React = require('react');
13
13
  var environment = require('./environment.js');
14
14
 
15
- function useMatchMedia(mediaQueryString) {
15
+ /** Listens to changes in a media query and returns whether it matches. */
16
+ const useMatchMedia = mediaQuery => {
16
17
  const [matches, setMatches] = React.useState(() => {
17
18
  if (environment.canUseDOM) {
18
- const mediaQueryList = window.matchMedia(mediaQueryString);
19
+ const mediaQueryList = window.matchMedia(mediaQuery);
19
20
  return mediaQueryList.matches;
20
21
  }
21
22
  return false;
22
23
  });
23
24
  React.useEffect(() => {
24
- function listener(event) {
25
+ const listener = event => {
25
26
  setMatches(event.matches);
26
- }
27
- const mediaQueryList = window.matchMedia(mediaQueryString);
28
- // Support fallback to `addListener` for broader browser support
29
- if (mediaQueryList.addEventListener) {
30
- mediaQueryList.addEventListener('change', listener);
31
- } else {
32
- mediaQueryList.addListener(listener);
33
- }
34
-
35
- // Make sure the media query list is in sync with the matches state
27
+ };
28
+ const mediaQueryList = window.matchMedia(mediaQuery);
29
+ mediaQueryList.addEventListener('change', listener);
36
30
  setMatches(mediaQueryList.matches);
37
31
  return () => {
38
- if (mediaQueryList.addEventListener) {
39
- mediaQueryList.removeEventListener('change', listener);
40
- } else {
41
- mediaQueryList.removeListener(listener);
42
- }
32
+ mediaQueryList.removeEventListener('change', listener);
43
33
  };
44
- }, [mediaQueryString]);
34
+ }, [mediaQuery]);
45
35
  return matches;
46
- }
36
+ };
47
37
 
48
38
  exports.useMatchMedia = useMatchMedia;
@@ -11,6 +11,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
13
 
14
+ // TODO: Investigate updating this hook based on the following code from
15
+ // https://github.com/carbon-design-system/carbon/pull/18611:
16
+ // https://github.com/adamalston/carbon/blob/dd403b6b10de3d8a6ccd8d2e21174c908c1e890a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx#L23-L46
14
17
  /**
15
18
  * Combine multiple refs into a single ref. This use useful when you have two
16
19
  * refs from both `React.forwardRef` and `useRef` that you would like to add to
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Copyright IBM Corp. 2021, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { type ComponentType, type ReactNode } from 'react';
8
+ interface InputProps {
9
+ /** The ID for the input. */
10
+ id: string;
11
+ /** Whether the input is read-only. */
12
+ readOnly?: boolean;
13
+ /** Whether the input is disabled. */
14
+ disabled: boolean;
15
+ /** Whether the input is an invalid state. */
16
+ invalid: boolean;
17
+ /** The message displayed when the input is invalid. */
18
+ invalidText?: ReactNode;
19
+ /** Whether the input is in a warning state. */
20
+ warn: boolean;
21
+ /** The message displayed when the input is in a warning state. */
22
+ warnText?: ReactNode;
23
+ }
24
+ interface NormalizedInputProps {
25
+ /** Disabled state. */
26
+ disabled: boolean;
27
+ /** Invalid state. */
28
+ invalid: boolean;
29
+ /** The generated ID for the error message. */
30
+ invalidId: string;
31
+ /** The generated ID for the helper text. */
32
+ helperId: string;
33
+ /** Warning state. */
34
+ warn: boolean;
35
+ /** The generated ID for the warning message. */
36
+ warnId: string;
37
+ /** A React node containing the validation message. */
38
+ validation: ReactNode | null;
39
+ /** A React component representing the accompanying icon. */
40
+ icon: ComponentType | null;
41
+ }
42
+ /**
43
+ * Returns an object containing normalized properties for an input component.
44
+ *
45
+ * This hook ensures that only one of `invalid` or `warn` is active (with
46
+ * `invalid` taking precedence) and that `readOnly` overrides the `disabled`,
47
+ * `invalid`, and `warn` states. It generates unique IDs for error, warning, and
48
+ * helper messages, and conditionally provides the appropriate validation
49
+ * message and accompanying icon.
50
+ */
51
+ export declare const useNormalizedInputProps: ({ id, readOnly, disabled, invalid, invalidText, warn, warnText, }: InputProps) => NormalizedInputProps;
52
+ export {};
@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
13
  var iconsReact = require('@carbon/icons-react');
14
- var usePrefix = require('./usePrefix.js');
15
14
  require('../components/Text/index.js');
15
+ var usePrefix = require('./usePrefix.js');
16
16
  var Text = require('../components/Text/Text.js');
17
17
 
18
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,42 +20,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
20
20
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
21
 
22
22
  /**
23
- * @typedef {object} InputProps
24
- * @property {string} id - The input's id
25
- * @property {boolean | undefined} readOnly - Whether the input should be readonly
26
- * @property {boolean} disabled - Whether the input should be disabled
27
- * @property {boolean} invalid - Whether the input should be marked as invalid
28
- * @property {React.ReactNode | undefined} invalidText - The validation message displayed in case the input is considered invalid
29
- * @property {boolean} warn - Whether the input should be in warning state
30
- * @property {React.ReactNode | undefined} warnText - The validation message displayed in case the input is in warning state
31
- */
32
-
33
- /**
34
- * @typedef {object} NormalizedInputProps
35
- * @property {boolean} disabled - Whether the input is disabled
36
- * @property {boolean} invalid - Whether the input is invalid (takes precedence over warn)
37
- * @property {string} invalidId - The invalid message's id
38
- * @property {string} helperId - id used for helper text
39
- * @property {boolean} warn - Whether the input is in warning state
40
- * @property {string} warnId - The warning message's id
41
- * @property {React.ReactNode | null} validation – React node rendering the appropriate validation message (if any)
42
- * @property {React.ReactNode | null} icon – React node rendering the appropriate accompanying icon (if any)
43
- */
44
-
45
- /**
46
- * Returns an object containing non-colliding props and additional, generated ones.
47
- * This hook ensures that only either "invalid" or "warn" is true but never both at
48
- * the same time. Regardless whether "invalid" or "warn", the appropriate validation
49
- * message is passed as "validation". If the input should be accompanied by an icon
50
- * (to visually represent a readonly, invalid or warning state), the appropriate icon
51
- * is passed as "icon".
52
- * It also ensure that neither "invalid", nor "warn", nor "disabled" are enabled when
53
- * "readonly" is passed as "readonly" takes precedence over these variants.
23
+ * Returns an object containing normalized properties for an input component.
54
24
  *
55
- * @param {InputProps} props - The props passed to the component
56
- * @returns {NormalizedInputProps}
25
+ * This hook ensures that only one of `invalid` or `warn` is active (with
26
+ * `invalid` taking precedence) and that `readOnly` overrides the `disabled`,
27
+ * `invalid`, and `warn` states. It generates unique IDs for error, warning, and
28
+ * helper messages, and conditionally provides the appropriate validation
29
+ * message and accompanying icon.
57
30
  */
58
- function useNormalizedInputProps(_ref) {
31
+ const useNormalizedInputProps = _ref => {
59
32
  let {
60
33
  id,
61
34
  readOnly,
@@ -92,6 +65,6 @@ function useNormalizedInputProps(_ref) {
92
65
  }, warnText);
93
66
  }
94
67
  return normalizedProps;
95
- }
68
+ };
96
69
 
97
70
  exports.useNormalizedInputProps = useNormalizedInputProps;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.78.2",
4
+ "version": "1.79.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "types": "lib/index.d.ts",
@@ -51,10 +51,10 @@
51
51
  },
52
52
  "dependencies": {
53
53
  "@babel/runtime": "^7.24.7",
54
- "@carbon/feature-flags": "^0.24.0",
54
+ "@carbon/feature-flags": "^0.25.0",
55
55
  "@carbon/icons-react": "^11.57.0",
56
- "@carbon/layout": "^11.30.2",
57
- "@carbon/styles": "^1.77.2",
56
+ "@carbon/layout": "^11.31.0",
57
+ "@carbon/styles": "^1.78.0",
58
58
  "@floating-ui/react": "^0.27.4",
59
59
  "@ibm/telemetry-js": "^1.5.0",
60
60
  "classnames": "2.5.1",
@@ -79,7 +79,7 @@
79
79
  "@babel/preset-react": "^7.24.7",
80
80
  "@babel/preset-typescript": "^7.24.7",
81
81
  "@carbon/test-utils": "^10.35.0",
82
- "@carbon/themes": "^11.48.2",
82
+ "@carbon/themes": "^11.49.0",
83
83
  "@figma/code-connect": "^1.2.4",
84
84
  "@rollup/plugin-babel": "^6.0.0",
85
85
  "@rollup/plugin-commonjs": "^28.0.0",
@@ -146,5 +146,5 @@
146
146
  "**/*.scss",
147
147
  "**/*.css"
148
148
  ],
149
- "gitHead": "5c8f7e2a47c2bfb2865f1f2f4efe55b26f45ad5c"
149
+ "gitHead": "af9ae8856cd0db974257bf1015d684e1ed204514"
150
150
  }
@@ -0,0 +1,9 @@
1
+ // Code generated by @carbon/react. DO NOT EDIT.
2
+ //
3
+ // Copyright IBM Corp. 2018, 2025
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ @forward '@carbon/styles/scss/components/dialog/dialog';