@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
@@ -0,0 +1,190 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
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
+
8
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var PropTypes = require('prop-types');
14
+ var React = require('react');
15
+ var usePrefix = require('../../internal/usePrefix.js');
16
+ var cx = require('classnames');
17
+ var iconsReact = require('@carbon/icons-react');
18
+ var index = require('../IconButton/index.js');
19
+ var noopFn = require('../../internal/noopFn.js');
20
+
21
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
+
23
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
24
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
25
+ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
26
+
27
+ const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardRef) => {
28
+ let {
29
+ children,
30
+ className,
31
+ modal,
32
+ onCancel = noopFn.noopFn,
33
+ onClick = noopFn.noopFn,
34
+ onClose = noopFn.noopFn,
35
+ onRequestClose = noopFn.noopFn,
36
+ open = false,
37
+ ...rest
38
+ } = _ref;
39
+ const prefix = usePrefix.usePrefix();
40
+
41
+ // This component needs access to a ref, placed on the dialog, to call the
42
+ // various imperative dialog functions (show(), close(), etc.).
43
+ // If the parent component has not passed a ref for forwardRef, forwardRef
44
+ // will be null. A "backup" ref is needed to ensure the dialog's instance
45
+ // methods can always be called within this component.
46
+ const backupRef = React.useRef(null);
47
+ const ref = forwardRef ?? backupRef;
48
+
49
+ // Clicks on the backdrop of an open modal dialog should request the consuming component to close
50
+ // the dialog. Clicks elsewhere, or on non-modal dialogs should not request
51
+ // to close the dialog.
52
+ function handleModalBackdropClick(e) {
53
+ if (open && modal && e.target === ref.current) {
54
+ onRequestClose(e);
55
+ }
56
+ }
57
+ function handleClick(e) {
58
+ handleModalBackdropClick(e);
59
+
60
+ // onClick should always be called, no matter if the target is a modal
61
+ // dialog, modal dialog backdrop, or non-modal dialog.
62
+ onClick(e);
63
+ }
64
+ React.useEffect(() => {
65
+ if (ref.current) {
66
+ if (open) {
67
+ if (modal) {
68
+ // Display the dialog as a modal, over the top of any other dialogs
69
+ // that might be present. Everything outside the dialog are inert
70
+ // with interactions outside the dialog being blocked.
71
+ ref.current.showModal();
72
+ } else {
73
+ // Display the dialog modelessly, i.e. still allowing interaction
74
+ // with content outside of the dialog.
75
+ ref.current.show();
76
+ }
77
+ } else {
78
+ ref.current.close();
79
+ }
80
+ }
81
+ }, [modal, open]);
82
+ return /*#__PURE__*/React__default["default"].createElement("dialog", _rollupPluginBabelHelpers["extends"]({}, rest, {
83
+ className: cx__default["default"](`${prefix}--dialog`, {
84
+ [`${prefix}--dialog--modal`]: modal
85
+ }, className),
86
+ ref: ref,
87
+ onCancel: onCancel,
88
+ onClick: handleClick,
89
+ onClose: onClose
90
+ }), children);
91
+ });
92
+ unstable__Dialog.displayName = 'Dialog';
93
+ unstable__Dialog.propTypes = {
94
+ /**
95
+ * Provide children to be rendered inside of the Dialog
96
+ */
97
+ children: PropTypes__default["default"].node,
98
+ /**
99
+ * Specify an optional className to be applied to the modal root node
100
+ */
101
+ className: PropTypes__default["default"].string,
102
+ /**
103
+ * Modal specifies whether the Dialog is modal or non-modal. This cannot be
104
+ * changed while open=true
105
+ */
106
+ modal: PropTypes__default["default"].bool,
107
+ /**
108
+ * Specify a handler for closing Dialog.
109
+ * The handler should care of closing Dialog, e.g. changing `open` prop.
110
+ */
111
+ onRequestClose: PropTypes__default["default"].func,
112
+ /**
113
+ * open initial state
114
+ */
115
+ open: PropTypes__default["default"].bool
116
+ };
117
+ const DialogHeader = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
118
+ let {
119
+ children,
120
+ ...rest
121
+ } = _ref2;
122
+ const prefix = usePrefix.usePrefix();
123
+ return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
124
+ className: `${prefix}--dialog__header`,
125
+ ref: ref
126
+ }, rest), children);
127
+ });
128
+ DialogHeader.propTypes = {
129
+ /**
130
+ * Provide the contents to be rendered inside of this component
131
+ */
132
+ children: PropTypes__default["default"].node
133
+ };
134
+ const DialogControls = /*#__PURE__*/React__default["default"].forwardRef((_ref3, ref) => {
135
+ let {
136
+ children,
137
+ ...rest
138
+ } = _ref3;
139
+ const prefix = usePrefix.usePrefix();
140
+ return (
141
+ /*#__PURE__*/
142
+ // @ts-ignore
143
+ React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
144
+ className: `${prefix}--dialog__header-controls`,
145
+ ref: ref
146
+ }, rest), children)
147
+ );
148
+ });
149
+ DialogControls.propTypes = {
150
+ /**
151
+ * Provide children to be rendered inside of this component
152
+ */
153
+ children: PropTypes__default["default"].node
154
+ };
155
+ const DialogCloseButton = /*#__PURE__*/React__default["default"].forwardRef((_ref4, ref) => {
156
+ let {
157
+ onClick,
158
+ ...rest
159
+ } = _ref4;
160
+ const prefix = usePrefix.usePrefix();
161
+ return (
162
+ /*#__PURE__*/
163
+ // @ts-ignore
164
+ React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
165
+ kind: "ghost",
166
+ className: `${prefix}--dialog__close`,
167
+ label: "Close",
168
+ title: "Close",
169
+ "aria-label": "Close",
170
+ align: "left",
171
+ onClick: onClick
172
+ }, rest), /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
173
+ size: 20,
174
+ "aria-hidden": "true",
175
+ tabIndex: "-1",
176
+ className: `${prefix}--icon__close`
177
+ }))
178
+ );
179
+ });
180
+ DialogCloseButton.propTypes = {
181
+ /**
182
+ * Specify a click handler applied to the IconButton
183
+ */
184
+ onClick: PropTypes__default["default"].func
185
+ };
186
+
187
+ exports.DialogCloseButton = DialogCloseButton;
188
+ exports.DialogControls = DialogControls;
189
+ exports.DialogHeader = DialogHeader;
190
+ exports.unstable__Dialog = unstable__Dialog;
@@ -16,9 +16,9 @@ var Search = require('../Search/Search.js');
16
16
  require('../Search/Search.Skeleton.js');
17
17
  var usePrefix = require('../../internal/usePrefix.js');
18
18
  var events = require('../../tools/events.js');
19
- var mergeRefs = require('../../tools/mergeRefs.js');
20
- var match = require('../../internal/keyboard/match.js');
21
19
  var keys = require('../../internal/keyboard/keys.js');
20
+ var match = require('../../internal/keyboard/match.js');
21
+ var mergeRefs = require('../../tools/mergeRefs.js');
22
22
 
23
23
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
24
24
 
@@ -14,6 +14,7 @@ export interface FeatureFlagsProps {
14
14
  enableV12Overflowmenu?: boolean;
15
15
  enableTreeviewControllable?: boolean;
16
16
  enableExperimentalFocusWrapWithoutSentinels?: boolean;
17
+ enableDialogElement?: boolean;
17
18
  enableV12DynamicFloatingStyles?: boolean;
18
19
  }
19
20
  /**
@@ -26,7 +27,7 @@ declare const FeatureFlagContext: React.Context<any>;
26
27
  * along with the current `FeatureFlagContext` to provide consumers to check if
27
28
  * a feature flag is enabled or disabled in a given React tree
28
29
  */
29
- declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
30
+ declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
30
31
  declare namespace FeatureFlags {
31
32
  var propTypes: {
32
33
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -39,6 +40,7 @@ declare namespace FeatureFlags {
39
40
  enableV12Overflowmenu: PropTypes.Requireable<boolean>;
40
41
  enableTreeviewControllable: PropTypes.Requireable<boolean>;
41
42
  enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
43
+ enableDialogElement: PropTypes.Requireable<boolean>;
42
44
  enableV12DynamicFloatingStyles: PropTypes.Requireable<boolean>;
43
45
  };
44
46
  }
@@ -39,6 +39,7 @@ function FeatureFlags(_ref) {
39
39
  enableV12Overflowmenu = false,
40
40
  enableTreeviewControllable = false,
41
41
  enableExperimentalFocusWrapWithoutSentinels = false,
42
+ enableDialogElement = false,
42
43
  enableV12DynamicFloatingStyles = false
43
44
  } = _ref;
44
45
  const parentScope = React.useContext(FeatureFlagContext);
@@ -49,6 +50,7 @@ function FeatureFlags(_ref) {
49
50
  'enable-v12-overflowmenu': enableV12Overflowmenu,
50
51
  'enable-treeview-controllable': enableTreeviewControllable,
51
52
  'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
53
+ 'enable-dialog-element': enableDialogElement,
52
54
  'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
53
55
  ...flags
54
56
  };
@@ -87,6 +89,7 @@ FeatureFlags.propTypes = {
87
89
  enableV12Overflowmenu: PropTypes__default["default"].bool,
88
90
  enableTreeviewControllable: PropTypes__default["default"].bool,
89
91
  enableExperimentalFocusWrapWithoutSentinels: PropTypes__default["default"].bool,
92
+ enableDialogElement: PropTypes__default["default"].bool,
90
93
  enableV12DynamicFloatingStyles: PropTypes__default["default"].bool
91
94
  };
92
95
 
@@ -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.
@@ -16,12 +16,12 @@ var React = require('react');
16
16
  var Filename = require('./Filename.js');
17
17
  var FileUploaderButton = require('./FileUploaderButton.js');
18
18
  var Button = require('../Button/Button.js');
19
+ var keys = require('../../internal/keyboard/keys.js');
20
+ var match = require('../../internal/keyboard/match.js');
19
21
  var usePrefix = require('../../internal/usePrefix.js');
20
22
  require('../Text/index.js');
21
23
  var useId = require('../../internal/useId.js');
22
- var match = require('../../internal/keyboard/match.js');
23
24
  var Text = require('../Text/Text.js');
24
- var keys = require('../../internal/keyboard/keys.js');
25
25
 
26
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
27
27
 
@@ -13,13 +13,13 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
13
13
  var cx = require('classnames');
14
14
  var PropTypes = require('prop-types');
15
15
  var React = require('react');
16
+ var keys = require('../../internal/keyboard/keys.js');
17
+ var match = require('../../internal/keyboard/match.js');
16
18
  var types = require('../../prop-types/types.js');
17
19
  var uniqueId = require('../../tools/uniqueId.js');
18
20
  var usePrefix = require('../../internal/usePrefix.js');
19
21
  var deprecate = require('../../prop-types/deprecate.js');
20
22
  var noopFn = require('../../internal/noopFn.js');
21
- var match = require('../../internal/keyboard/match.js');
22
- var keys = require('../../internal/keyboard/keys.js');
23
23
 
24
24
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
25
 
@@ -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.
@@ -13,13 +13,13 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
13
13
  var React = require('react');
14
14
  var PropTypes = require('prop-types');
15
15
  var cx = require('classnames');
16
+ var keys = require('../../internal/keyboard/keys.js');
17
+ var match = require('../../internal/keyboard/match.js');
16
18
  var uniqueId = require('../../tools/uniqueId.js');
17
19
  var usePrefix = require('../../internal/usePrefix.js');
18
20
  var events = require('../../tools/events.js');
19
21
  var deprecate = require('../../prop-types/deprecate.js');
20
22
  var noopFn = require('../../internal/noopFn.js');
21
- var match = require('../../internal/keyboard/match.js');
22
- var keys = require('../../internal/keyboard/keys.js');
23
23
 
24
24
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
25
 
@@ -81,14 +81,16 @@ function FileUploaderDropContainer(_ref) {
81
81
  }
82
82
  function handleChange(event) {
83
83
  const files = [...(event.target.files ?? [])];
84
- const addedFiles = validateFiles(files);
84
+ const filesToValidate = multiple ? files : [files[0]];
85
+ const addedFiles = validateFiles(filesToValidate);
85
86
  return onAddFiles(event, {
86
87
  addedFiles
87
88
  });
88
89
  }
89
90
  function handleDrop(event) {
90
91
  const files = [...event.dataTransfer.files];
91
- const addedFiles = validateFiles(files);
92
+ const filesToValidate = multiple ? files : [files[0]];
93
+ const addedFiles = validateFiles(filesToValidate);
92
94
  return onAddFiles(event, {
93
95
  addedFiles
94
96
  });
@@ -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.
@@ -14,15 +14,15 @@ var cx = require('classnames');
14
14
  var PropTypes = require('prop-types');
15
15
  var React = require('react');
16
16
  var Filename = require('./Filename.js');
17
+ var keys = require('../../internal/keyboard/keys.js');
18
+ var match = require('../../internal/keyboard/match.js');
17
19
  var uniqueId = require('../../tools/uniqueId.js');
18
20
  var usePrefix = require('../../internal/usePrefix.js');
19
21
  var noopFn = require('../../internal/noopFn.js');
20
22
  require('../Text/index.js');
21
23
  require('../Tooltip/DefinitionTooltip.js');
22
24
  var Tooltip = require('../Tooltip/Tooltip.js');
23
- var match = require('../../internal/keyboard/match.js');
24
25
  var Text = require('../Text/Text.js');
25
- var keys = require('../../internal/keyboard/keys.js');
26
26
 
27
27
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
28
28
 
@@ -22,10 +22,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
22
22
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
23
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
24
 
25
- function CSSGrid(_ref) {
25
+ const CSSGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
26
26
  let {
27
27
  align,
28
- as: BaseComponent = 'div',
28
+ as,
29
29
  children,
30
30
  className: customClassName,
31
31
  condensed = false,
@@ -48,7 +48,8 @@ function CSSGrid(_ref) {
48
48
  mode: "css-grid",
49
49
  subgrid: true
50
50
  }, /*#__PURE__*/React__default["default"].createElement(Subgrid, _rollupPluginBabelHelpers["extends"]({
51
- as: BaseComponent,
51
+ ref: ref,
52
+ as: as,
52
53
  className: customClassName,
53
54
  mode: mode
54
55
  }, rest), children));
@@ -63,23 +64,24 @@ function CSSGrid(_ref) {
63
64
  });
64
65
 
65
66
  // cast as any to let TypeScript allow passing in attributes to base component
66
- const BaseComponentAsAny = BaseComponent;
67
+ const BaseComponent = as || 'div';
67
68
  return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
68
69
  mode: "css-grid",
69
70
  subgrid: true
70
- }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
71
- className: className
71
+ }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
72
+ className: className,
73
+ ref: ref
72
74
  }, rest), children));
73
- }
75
+ });
74
76
  CSSGrid.propTypes = {
75
- /**
76
- * Specify grid alignment. Default is center
77
- */
78
- align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
79
77
  /**
80
78
  * Provide a custom element to render instead of the default <div>
81
79
  */
82
80
  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
81
+ /**
82
+ * Specify grid alignment. Default is center
83
+ */
84
+ align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
83
85
  /**
84
86
  * Pass in content that will be rendered within the `Grid`
85
87
  */
@@ -103,9 +105,9 @@ CSSGrid.propTypes = {
103
105
  */
104
106
  narrow: PropTypes__default["default"].bool
105
107
  };
106
- const Subgrid = _ref2 => {
108
+ const Subgrid = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
107
109
  let {
108
- as: BaseComponent = 'div',
110
+ as,
109
111
  className: customClassName,
110
112
  children,
111
113
  mode,
@@ -118,10 +120,12 @@ const Subgrid = _ref2 => {
118
120
  [`${prefix}--subgrid--narrow`]: mode === 'narrow',
119
121
  [`${prefix}--subgrid--wide`]: mode === 'wide'
120
122
  });
123
+ const BaseComponent = as || 'div';
121
124
  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
125
+ ref: ref,
122
126
  className: className
123
127
  }), children);
124
- };
128
+ });
125
129
  Subgrid.propTypes = {
126
130
  /**
127
131
  * Provide a custom element to render instead of the default <div>
@@ -22,9 +22,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
22
22
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
23
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
24
 
25
- function FlexGrid(_ref) {
25
+ const FlexGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
26
26
  let {
27
- as: BaseComponent = 'div',
27
+ as,
28
28
  condensed = false,
29
29
  narrow = false,
30
30
  fullWidth = false,
@@ -40,14 +40,15 @@ function FlexGrid(_ref) {
40
40
  [`${prefix}--grid--full-width`]: fullWidth
41
41
  });
42
42
  // cast as any to let TypeScript allow passing in attributes to base component
43
- const BaseComponentAsAny = BaseComponent;
43
+ const BaseComponent = as || 'div';
44
44
  return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
45
45
  mode: "flexbox",
46
46
  subgrid: false
47
- }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
48
- className: className
47
+ }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
48
+ className: className,
49
+ ref: ref
49
50
  }, rest), children));
50
- }
51
+ });
51
52
  FlexGrid.propTypes = {
52
53
  /**
53
54
  * Provide a custom element to render instead of the default <div>
@@ -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 { PolymorphicProps } from '../../types/common';
7
+ import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
8
8
  export interface GridBaseProps {
9
9
  /**
10
10
  * Pass in content that will be rendered within the `Grid`
@@ -29,7 +29,9 @@ export interface GridBaseProps {
29
29
  */
30
30
  narrow?: boolean;
31
31
  }
32
- export type GridProps<T extends React.ElementType> = PolymorphicProps<T, GridBaseProps>;
32
+ export type GridProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, GridBaseProps>;
33
33
  export interface GridComponent {
34
- <T extends React.ElementType>(props: GridProps<T>, context?: any): React.ReactElement<any, any> | null;
34
+ <T extends React.ElementType = 'div'>(props: GridProps<T>): React.ReactElement | null;
35
+ displayName?: string;
36
+ propTypes?: React.WeakValidationMap<GridProps<any>>;
35
37
  }
@@ -86,9 +86,9 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
86
86
  kind: kind,
87
87
  ref: ref,
88
88
  size: size,
89
- className: cx__default["default"](`${prefix}--btn--icon-only`, {
90
- [`${prefix}--btn--selected`]: isSelected
91
- }, className),
89
+ isSelected: isSelected,
90
+ hasIconOnly: true,
91
+ className: className,
92
92
  "aria-describedby": badgeCount && badgeId
93
93
  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, {
94
94
  id: badgeId,
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import { LayerLevel } from './LayerLevel';
9
- import { PolymorphicProps } from '../../types/common';
9
+ import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
10
10
  /**
11
11
  * A custom hook that will return information about the current layer. A common
12
12
  * field to pull from this is the `level` for the layer that the component that
@@ -30,8 +30,6 @@ export interface LayerBaseProps {
30
30
  */
31
31
  level?: LayerLevel;
32
32
  }
33
- export type LayerProps<T extends React.ElementType> = PolymorphicProps<T, LayerBaseProps>;
34
- export interface LayerComponent {
35
- <T extends React.ElementType>(props: LayerProps<T>, context?: any): React.ReactElement<any, any> | null;
36
- }
37
- export declare const Layer: LayerComponent;
33
+ export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
34
+ declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
35
+ export { Layer };
@@ -34,9 +34,9 @@ function useLayer() {
34
34
  level
35
35
  };
36
36
  }
37
- const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(function Layer(_ref, ref) {
37
+ const Layer = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
38
38
  let {
39
- as = 'div',
39
+ as,
40
40
  className: customClassName,
41
41
  children,
42
42
  level: overrideLevel,
@@ -48,7 +48,7 @@ const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(fu
48
48
  const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, customClassName);
49
49
  // The level should be between MIN_LEVEL and MAX_LEVEL
50
50
  const value = Math.max(LayerLevel.MIN_LEVEL, Math.min(level + 1, LayerLevel.MAX_LEVEL));
51
- const BaseComponent = as;
51
+ const BaseComponent = as || 'div';
52
52
  return /*#__PURE__*/React__default["default"].createElement(LayerContext.LayerContext.Provider, {
53
53
  value: value
54
54
  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
@@ -57,8 +57,8 @@ const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(fu
57
57
  className: className
58
58
  }), children));
59
59
  });
60
- LayerRenderFunction.displayName = 'Layer';
61
- LayerRenderFunction.propTypes = {
60
+ Layer.displayName = 'Layer';
61
+ Layer.propTypes = {
62
62
  /**
63
63
  * Specify a custom component or element to be rendered as the top-level
64
64
  * element in the component
@@ -78,7 +78,6 @@ LayerRenderFunction.propTypes = {
78
78
  */
79
79
  level: PropTypes__default["default"].oneOf([0, 1, 2])
80
80
  };
81
- const Layer = LayerRenderFunction;
82
81
 
83
82
  exports.Layer = Layer;
84
83
  exports.useLayer = useLayer;
@@ -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.
@@ -31,8 +31,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
31
31
  */
32
32
  inline?: boolean;
33
33
  /**
34
- * @description Optional prop to render an icon next to the link.
35
- * Can be a React component class
34
+ * A component used to render an icon.
36
35
  */
37
36
  renderIcon?: ComponentType;
38
37
  /**
@@ -92,8 +92,7 @@ Link.propTypes = {
92
92
  */
93
93
  inline: PropTypes__default["default"].bool,
94
94
  /**
95
- * Optional prop to render an icon next to the link.
96
- * Can be a React component class
95
+ * A component used to render an icon.
97
96
  */
98
97
  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
99
98
  /**
@@ -1,10 +1,10 @@
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 React, { ForwardedRef, ReactNode } from 'react';
7
+ import { ForwardedRef, ReactNode, type Ref } from 'react';
8
8
  import { ForwardRefReturn, ReactAttr } from '../../types/common';
9
9
  export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
10
10
  /**
@@ -30,7 +30,7 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
30
30
  title?: string;
31
31
  }
32
32
  export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
33
- menuItemOptionRef?: React.Ref<HTMLDivElement>;
33
+ menuItemOptionRef?: Ref<HTMLDivElement>;
34
34
  }) | null;
35
35
  export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
36
36
  declare const _default: ListBoxMenuItemComponent;