@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.
- package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +882 -882
- package/es/components/Accordion/AccordionItem.js +2 -2
- package/es/components/Button/Button.d.ts +2 -3
- package/es/components/Button/Button.js +29 -19
- package/es/components/Button/ButtonBase.js +3 -1
- package/es/components/ChatButton/ChatButton.d.ts +2 -3
- package/es/components/ChatButton/ChatButton.js +1 -2
- package/es/components/ComboBox/ComboBox.js +34 -24
- package/es/components/ComposedModal/ComposedModal.js +65 -51
- package/es/components/ContainedList/ContainedListItem/ContainedListItem.d.ts +2 -2
- package/es/components/ContainedList/ContainedListItem/ContainedListItem.js +1 -1
- package/es/components/ContentSwitcher/ContentSwitcher.js +3 -3
- package/es/components/DataTable/TableBatchAction.d.ts +3 -3
- package/es/components/DataTable/TableBatchAction.js +1 -1
- package/es/components/DataTable/TableContainer.d.ts +1 -1
- package/es/components/DataTable/TableContainer.js +5 -4
- package/es/components/DataTable/TableExpandHeader.d.ts +6 -5
- package/es/components/DataTable/TableToolbarMenu.d.ts +2 -2
- package/es/components/DataTable/TableToolbarMenu.js +1 -1
- package/es/components/DatePicker/DatePicker.js +2 -2
- package/es/components/DatePicker/plugins/fixEventsPlugin.js +1 -1
- package/es/components/Dialog/index.d.ts +42 -4
- package/es/components/Dialog/index.js +177 -0
- package/es/components/ExpandableSearch/ExpandableSearch.js +2 -2
- package/es/components/FeatureFlags/index.d.ts +3 -1
- package/es/components/FeatureFlags/index.js +3 -0
- package/es/components/FileUploader/FileUploader.d.ts +1 -1
- package/es/components/FileUploader/FileUploader.js +2 -2
- package/es/components/FileUploader/FileUploaderButton.js +2 -2
- package/es/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
- package/es/components/FileUploader/FileUploaderDropContainer.js +6 -4
- package/es/components/FileUploader/FileUploaderItem.d.ts +1 -1
- package/es/components/FileUploader/FileUploaderItem.js +2 -2
- package/es/components/Grid/CSSGrid.js +18 -14
- package/es/components/Grid/Column.d.ts +2 -2
- package/es/components/Grid/Column.js +7 -8
- package/es/components/Grid/FlexGrid.js +7 -6
- package/es/components/Grid/GridTypes.d.ts +5 -3
- package/es/components/IconButton/index.d.ts +2 -2
- package/es/components/IconButton/index.js +4 -4
- package/es/components/Layer/index.d.ts +4 -6
- package/es/components/Layer/index.js +5 -6
- package/es/components/Link/Link.d.ts +2 -3
- package/es/components/Link/Link.js +1 -2
- package/es/components/ListBox/ListBoxMenuItem.d.ts +3 -3
- package/es/components/ListBox/ListBoxMenuItem.js +37 -15
- package/es/components/Menu/Menu.js +2 -2
- package/es/components/Menu/MenuItem.d.ts +2 -2
- package/es/components/Menu/MenuItem.js +3 -3
- package/es/components/Modal/Modal.js +121 -49
- package/es/components/ModalWrapper/ModalWrapper.js +1 -1
- package/es/components/MultiSelect/FilterableMultiSelect.js +3 -3
- package/es/components/MultiSelect/MultiSelect.js +2 -2
- package/es/components/MultiSelect/index.d.ts +1 -1
- package/es/components/MultiSelect/index.js +1 -8
- package/es/components/Notification/Notification.d.ts +5 -13
- package/es/components/Notification/Notification.js +3 -4
- package/es/components/OverflowMenu/OverflowMenu.d.ts +22 -201
- package/es/components/OverflowMenu/OverflowMenu.js +269 -338
- package/es/components/OverflowMenu/index.d.ts +5 -5
- package/es/components/OverflowMenu/index.js +2 -2
- package/es/components/OverflowMenu/next/index.d.ts +4 -4
- package/es/components/OverflowMenu/next/index.js +1 -1
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +2 -2
- package/es/components/ProgressIndicator/ProgressIndicator.js +2 -2
- package/es/components/RadioTile/RadioTile.js +2 -2
- package/es/components/Search/Search.d.ts +2 -3
- package/es/components/Search/Search.js +4 -6
- package/es/components/Slider/Slider.d.ts +39 -44
- package/es/components/Slider/Slider.js +57 -59
- package/es/components/Tabs/Tabs.d.ts +3 -6
- package/es/components/Tabs/Tabs.js +16 -18
- package/es/components/Tag/DismissibleTag.d.ts +3 -5
- package/es/components/Tag/DismissibleTag.js +1 -2
- package/es/components/Tag/OperationalTag.d.ts +2 -3
- package/es/components/Tag/OperationalTag.js +1 -2
- package/es/components/Tag/SelectableTag.d.ts +3 -5
- package/es/components/Tag/SelectableTag.js +1 -2
- package/es/components/Tag/Tag.d.ts +2 -3
- package/es/components/Tag/Tag.js +1 -2
- package/es/components/Tile/Tile.d.ts +3 -5
- package/es/components/Tile/Tile.js +16 -10
- package/es/components/Toggletip/index.js +2 -2
- package/es/components/Tooltip/DefinitionTooltip.js +2 -2
- package/es/components/Tooltip/Tooltip.d.ts +1 -1
- package/es/components/Tooltip/Tooltip.js +2 -2
- package/es/components/TreeView/TreeNode.d.ts +3 -5
- package/es/components/TreeView/TreeNode.js +3 -4
- package/es/components/TreeView/TreeView.js +2 -2
- package/es/components/UIShell/HeaderContainer.js +2 -2
- package/es/components/UIShell/HeaderMenu.js +2 -2
- package/es/components/UIShell/HeaderPanel.js +2 -2
- package/es/components/UIShell/SideNav.d.ts +1 -1
- package/es/components/UIShell/SideNav.js +2 -2
- package/es/components/UIShell/SideNavHeader.d.ts +2 -3
- package/es/components/UIShell/SideNavHeader.js +1 -2
- package/es/components/UIShell/SideNavLink.d.ts +2 -2
- package/es/components/UIShell/SideNavLink.js +1 -1
- package/es/components/UIShell/SideNavMenu.d.ts +2 -2
- package/es/components/UIShell/SideNavMenu.js +3 -3
- package/es/components/UIShell/SwitcherItem.js +2 -2
- package/es/index.js +1 -1
- package/es/internal/FloatingMenu.d.ts +2 -2
- package/es/internal/FloatingMenu.js +8 -5
- package/es/internal/OptimizedResize.d.ts +18 -0
- package/es/internal/OptimizedResize.js +21 -24
- package/es/internal/createClassWrapper.d.ts +3 -3
- package/es/internal/createClassWrapper.js +4 -4
- package/es/internal/keyboard/index.d.ts +9 -0
- package/es/internal/keyboard/keys.d.ts +23 -0
- package/es/internal/keyboard/keys.js +2 -2
- package/es/internal/keyboard/match.d.ts +26 -0
- package/es/internal/keyboard/match.js +17 -41
- package/es/internal/keyboard/navigation.d.ts +37 -0
- package/es/internal/keyboard/navigation.js +15 -27
- package/es/internal/useIsomorphicEffect.d.ts +10 -0
- package/es/internal/useIsomorphicEffect.js +2 -3
- package/es/internal/useMatchMedia.d.ts +8 -0
- package/es/internal/useMatchMedia.js +10 -20
- package/es/internal/useMergedRefs.js +3 -0
- package/es/internal/useNormalizedInputProps.d.ts +52 -0
- package/es/internal/useNormalizedInputProps.js +9 -36
- package/lib/components/Accordion/AccordionItem.js +2 -2
- package/lib/components/Button/Button.d.ts +2 -3
- package/lib/components/Button/Button.js +29 -19
- package/lib/components/Button/ButtonBase.js +3 -1
- package/lib/components/ChatButton/ChatButton.d.ts +2 -3
- package/lib/components/ChatButton/ChatButton.js +1 -2
- package/lib/components/ComboBox/ComboBox.js +34 -24
- package/lib/components/ComposedModal/ComposedModal.js +64 -50
- package/lib/components/ContainedList/ContainedListItem/ContainedListItem.d.ts +2 -2
- package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js +1 -1
- package/lib/components/ContentSwitcher/ContentSwitcher.js +3 -3
- package/lib/components/DataTable/TableBatchAction.d.ts +3 -3
- package/lib/components/DataTable/TableBatchAction.js +1 -1
- package/lib/components/DataTable/TableContainer.d.ts +1 -1
- package/lib/components/DataTable/TableContainer.js +5 -4
- package/lib/components/DataTable/TableExpandHeader.d.ts +6 -5
- package/lib/components/DataTable/TableToolbarMenu.d.ts +2 -2
- package/lib/components/DataTable/TableToolbarMenu.js +1 -1
- package/lib/components/DatePicker/DatePicker.js +2 -2
- package/lib/components/DatePicker/plugins/fixEventsPlugin.js +1 -1
- package/lib/components/Dialog/index.d.ts +42 -4
- package/lib/components/Dialog/index.js +190 -0
- package/lib/components/ExpandableSearch/ExpandableSearch.js +2 -2
- package/lib/components/FeatureFlags/index.d.ts +3 -1
- package/lib/components/FeatureFlags/index.js +3 -0
- package/lib/components/FileUploader/FileUploader.d.ts +1 -1
- package/lib/components/FileUploader/FileUploader.js +2 -2
- package/lib/components/FileUploader/FileUploaderButton.js +2 -2
- package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
- package/lib/components/FileUploader/FileUploaderDropContainer.js +6 -4
- package/lib/components/FileUploader/FileUploaderItem.d.ts +1 -1
- package/lib/components/FileUploader/FileUploaderItem.js +2 -2
- package/lib/components/Grid/CSSGrid.js +18 -14
- package/lib/components/Grid/Column.d.ts +2 -2
- package/lib/components/Grid/Column.js +7 -8
- package/lib/components/Grid/FlexGrid.js +7 -6
- package/lib/components/Grid/GridTypes.d.ts +5 -3
- package/lib/components/IconButton/index.d.ts +2 -2
- package/lib/components/IconButton/index.js +4 -4
- package/lib/components/Layer/index.d.ts +4 -6
- package/lib/components/Layer/index.js +5 -6
- package/lib/components/Link/Link.d.ts +2 -3
- package/lib/components/Link/Link.js +1 -2
- package/lib/components/ListBox/ListBoxMenuItem.d.ts +3 -3
- package/lib/components/ListBox/ListBoxMenuItem.js +36 -14
- package/lib/components/Menu/Menu.js +2 -2
- package/lib/components/Menu/MenuItem.d.ts +2 -2
- package/lib/components/Menu/MenuItem.js +3 -3
- package/lib/components/Modal/Modal.js +123 -51
- package/lib/components/ModalWrapper/ModalWrapper.js +1 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.js +3 -3
- package/lib/components/MultiSelect/MultiSelect.js +2 -2
- package/lib/components/MultiSelect/index.d.ts +1 -1
- package/lib/components/MultiSelect/index.js +1 -8
- package/lib/components/Notification/Notification.d.ts +5 -13
- package/lib/components/Notification/Notification.js +3 -4
- package/lib/components/OverflowMenu/OverflowMenu.d.ts +22 -201
- package/lib/components/OverflowMenu/OverflowMenu.js +268 -336
- package/lib/components/OverflowMenu/index.d.ts +5 -5
- package/lib/components/OverflowMenu/index.js +2 -2
- package/lib/components/OverflowMenu/next/index.d.ts +4 -4
- package/lib/components/OverflowMenu/next/index.js +1 -1
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +2 -2
- package/lib/components/ProgressIndicator/ProgressIndicator.js +2 -2
- package/lib/components/RadioTile/RadioTile.js +2 -2
- package/lib/components/Search/Search.d.ts +2 -3
- package/lib/components/Search/Search.js +4 -6
- package/lib/components/Slider/Slider.d.ts +39 -44
- package/lib/components/Slider/Slider.js +57 -59
- package/lib/components/Tabs/Tabs.d.ts +3 -6
- package/lib/components/Tabs/Tabs.js +16 -18
- package/lib/components/Tag/DismissibleTag.d.ts +3 -5
- package/lib/components/Tag/DismissibleTag.js +1 -2
- package/lib/components/Tag/OperationalTag.d.ts +2 -3
- package/lib/components/Tag/OperationalTag.js +1 -2
- package/lib/components/Tag/SelectableTag.d.ts +3 -5
- package/lib/components/Tag/SelectableTag.js +1 -2
- package/lib/components/Tag/Tag.d.ts +2 -3
- package/lib/components/Tag/Tag.js +1 -2
- package/lib/components/Tile/Tile.d.ts +3 -5
- package/lib/components/Tile/Tile.js +16 -10
- package/lib/components/Toggletip/index.js +2 -2
- package/lib/components/Tooltip/DefinitionTooltip.js +2 -2
- package/lib/components/Tooltip/Tooltip.d.ts +1 -1
- package/lib/components/Tooltip/Tooltip.js +2 -2
- package/lib/components/TreeView/TreeNode.d.ts +3 -5
- package/lib/components/TreeView/TreeNode.js +3 -4
- package/lib/components/TreeView/TreeView.js +2 -2
- package/lib/components/UIShell/HeaderContainer.js +2 -2
- package/lib/components/UIShell/HeaderMenu.js +2 -2
- package/lib/components/UIShell/HeaderPanel.js +2 -2
- package/lib/components/UIShell/SideNav.d.ts +1 -1
- package/lib/components/UIShell/SideNav.js +2 -2
- package/lib/components/UIShell/SideNavHeader.d.ts +2 -3
- package/lib/components/UIShell/SideNavHeader.js +1 -2
- package/lib/components/UIShell/SideNavLink.d.ts +2 -2
- package/lib/components/UIShell/SideNavLink.js +1 -1
- package/lib/components/UIShell/SideNavMenu.d.ts +2 -2
- package/lib/components/UIShell/SideNavMenu.js +3 -3
- package/lib/components/UIShell/SwitcherItem.js +2 -2
- package/lib/index.js +2 -2
- package/lib/internal/FloatingMenu.d.ts +2 -2
- package/lib/internal/FloatingMenu.js +9 -6
- package/lib/internal/OptimizedResize.d.ts +18 -0
- package/lib/internal/OptimizedResize.js +21 -24
- package/lib/internal/createClassWrapper.d.ts +3 -3
- package/lib/internal/createClassWrapper.js +4 -4
- package/lib/internal/keyboard/index.d.ts +9 -0
- package/lib/internal/keyboard/keys.d.ts +23 -0
- package/lib/internal/keyboard/keys.js +2 -2
- package/lib/internal/keyboard/match.d.ts +26 -0
- package/lib/internal/keyboard/match.js +17 -41
- package/lib/internal/keyboard/navigation.d.ts +37 -0
- package/lib/internal/keyboard/navigation.js +15 -27
- package/lib/internal/useIsomorphicEffect.d.ts +10 -0
- package/lib/internal/useIsomorphicEffect.js +2 -3
- package/lib/internal/useMatchMedia.d.ts +8 -0
- package/lib/internal/useMatchMedia.js +10 -20
- package/lib/internal/useMergedRefs.js +3 -0
- package/lib/internal/useNormalizedInputProps.d.ts +52 -0
- package/lib/internal/useNormalizedInputProps.js +9 -36
- package/package.json +6 -6
- package/scss/components/dialog/_dialog.scss +9 -0
- package/scss/components/dialog/_index.scss +9 -0
- package/telemetry.yml +1 -0
- package/es/components/Modal/next/index.d.ts +0 -171
- package/es/internal/focus/index.js +0 -15
- package/es/internal/useEffectOnce.js +0 -30
- package/lib/components/Modal/next/index.d.ts +0 -171
- package/lib/internal/focus/index.js +0 -19
- package/lib/internal/useEffectOnce.js +0 -34
|
@@ -85,23 +85,34 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((props, ref) =>
|
|
|
85
85
|
if (tooltipPosition === 'right' || tooltipPosition === 'left') {
|
|
86
86
|
align = tooltipPosition;
|
|
87
87
|
}
|
|
88
|
-
return
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
size
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
88
|
+
return (
|
|
89
|
+
/*#__PURE__*/
|
|
90
|
+
// @ts-expect-error - `IconButton` does not support all `size`s that
|
|
91
|
+
// `Button` supports.
|
|
92
|
+
//
|
|
93
|
+
// TODO: What should be done here?
|
|
94
|
+
// 1. Should the `IconButton` not be rendered if the `size` is not
|
|
95
|
+
// supported?
|
|
96
|
+
// 2. Should an error be thrown?
|
|
97
|
+
// 3. Something else?
|
|
98
|
+
React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
99
|
+
ref: ref,
|
|
100
|
+
as: as,
|
|
101
|
+
align: align,
|
|
102
|
+
label: iconDescription,
|
|
103
|
+
kind: kind,
|
|
104
|
+
size: size,
|
|
105
|
+
highContrast: tooltipHighContrast,
|
|
106
|
+
dropShadow: tooltipDropShadow,
|
|
107
|
+
onMouseEnter: onMouseEnter,
|
|
108
|
+
onMouseLeave: onMouseLeave,
|
|
109
|
+
onFocus: onFocus,
|
|
110
|
+
onBlur: onBlur,
|
|
111
|
+
autoAlign: autoAlign,
|
|
112
|
+
onClick: events.composeEventHandlers([onClick, handleClick]),
|
|
113
|
+
renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
|
|
114
|
+
}), iconOnlyImage ?? children)
|
|
115
|
+
);
|
|
105
116
|
}
|
|
106
117
|
});
|
|
107
118
|
Button.displayName = 'Button';
|
|
@@ -203,8 +214,7 @@ Button.propTypes = {
|
|
|
203
214
|
*/
|
|
204
215
|
rel: PropTypes__default["default"].string,
|
|
205
216
|
/**
|
|
206
|
-
*
|
|
207
|
-
* Can be a React component class
|
|
217
|
+
* A component used to render an icon.
|
|
208
218
|
*/
|
|
209
219
|
renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
|
|
210
220
|
/**
|
|
@@ -50,6 +50,8 @@ const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function Bu
|
|
|
50
50
|
// TODO: V12 - Remove this class
|
|
51
51
|
[`${prefix}--btn--md`]: size === 'md' && !isExpressive,
|
|
52
52
|
// TODO: V12 - Remove this class
|
|
53
|
+
[`${prefix}--btn--lg`]: size === 'lg' && !isExpressive,
|
|
54
|
+
// TODO: V12 - Remove this class
|
|
53
55
|
[`${prefix}--btn--xl`]: size === 'xl',
|
|
54
56
|
// TODO: V12 - Remove this class
|
|
55
57
|
[`${prefix}--btn--2xl`]: size === '2xl',
|
|
@@ -58,7 +60,7 @@ const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function Bu
|
|
|
58
60
|
[`${prefix}--btn--${kind}`]: kind,
|
|
59
61
|
[`${prefix}--btn--disabled`]: disabled,
|
|
60
62
|
[`${prefix}--btn--expressive`]: isExpressive,
|
|
61
|
-
[`${prefix}--btn--icon-only`]: hasIconOnly
|
|
63
|
+
[`${prefix}--btn--icon-only`]: hasIconOnly,
|
|
62
64
|
[`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
|
|
63
65
|
});
|
|
64
66
|
const commonProps = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2024
|
|
2
|
+
* Copyright IBM Corp. 2024, 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 ChatButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
33
33
|
*/
|
|
34
34
|
kind?: ChatButtonKind;
|
|
35
35
|
/**
|
|
36
|
-
*
|
|
37
|
-
* Can be a React component class
|
|
36
|
+
* A component used to render an icon.
|
|
38
37
|
*/
|
|
39
38
|
renderIcon?: ComponentType | FunctionComponent;
|
|
40
39
|
/**
|
|
@@ -85,8 +85,7 @@ ChatButton.propTypes = {
|
|
|
85
85
|
*/
|
|
86
86
|
kind: PropTypes__default["default"].oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
|
|
87
87
|
/**
|
|
88
|
-
*
|
|
89
|
-
* Can be a React component class
|
|
88
|
+
* A component used to render an icon.
|
|
90
89
|
*/
|
|
91
90
|
// @ts-expect-error: PropTypes are not expressive enough to cover this case
|
|
92
91
|
renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
|
|
@@ -20,6 +20,8 @@ var isEqual = require('react-fast-compare');
|
|
|
20
20
|
var index$1 = require('../ListBox/index.js');
|
|
21
21
|
var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
|
|
22
22
|
var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
|
|
23
|
+
var keys = require('../../internal/keyboard/keys.js');
|
|
24
|
+
var match = require('../../internal/keyboard/match.js');
|
|
23
25
|
var useId = require('../../internal/useId.js');
|
|
24
26
|
var mergeRefs = require('../../tools/mergeRefs.js');
|
|
25
27
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
@@ -28,10 +30,8 @@ require('../FluidForm/FluidForm.js');
|
|
|
28
30
|
var FormContext = require('../FluidForm/FormContext.js');
|
|
29
31
|
var react = require('@floating-ui/react');
|
|
30
32
|
var index = require('../FeatureFlags/index.js');
|
|
31
|
-
var match = require('../../internal/keyboard/match.js');
|
|
32
33
|
var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
|
|
33
34
|
var Text = require('../Text/Text.js');
|
|
34
|
-
var keys = require('../../internal/keyboard/keys.js');
|
|
35
35
|
|
|
36
36
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
37
37
|
|
|
@@ -312,31 +312,41 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
312
312
|
return changes;
|
|
313
313
|
}
|
|
314
314
|
case InputKeyDownEnter:
|
|
315
|
-
if (
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
315
|
+
if (!allowCustomValue) {
|
|
316
|
+
const highlightedIndex = indexToHighlight(inputValue);
|
|
317
|
+
const matchingItem = items[highlightedIndex];
|
|
318
|
+
if (matchingItem) {
|
|
319
|
+
// Prevent matching items that are marked as `disabled` from
|
|
320
|
+
// being selected.
|
|
321
|
+
if (matchingItem.disabled) {
|
|
322
|
+
return state;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
// Select the matching item.
|
|
326
|
+
return {
|
|
327
|
+
...changes,
|
|
328
|
+
selectedItem: matchingItem,
|
|
329
|
+
inputValue: itemToString(matchingItem)
|
|
330
|
+
};
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
// If no matching item is found and there is an existing
|
|
334
|
+
// selection, clear the selection.
|
|
335
|
+
if (state.selectedItem !== null) {
|
|
336
|
+
return {
|
|
337
|
+
...changes,
|
|
338
|
+
selectedItem: null,
|
|
328
339
|
inputValue
|
|
329
|
-
}
|
|
340
|
+
};
|
|
330
341
|
}
|
|
331
|
-
return changes;
|
|
332
|
-
} else if (changes.selectedItem && !allowCustomValue) {
|
|
333
|
-
return changes;
|
|
334
|
-
} else {
|
|
335
|
-
return {
|
|
336
|
-
...changes,
|
|
337
|
-
isOpen: true
|
|
338
|
-
};
|
|
339
342
|
}
|
|
343
|
+
|
|
344
|
+
// For `allowCustomValue` or if no matching item is found, keep the
|
|
345
|
+
// menu open.
|
|
346
|
+
return {
|
|
347
|
+
...changes,
|
|
348
|
+
isOpen: true
|
|
349
|
+
};
|
|
340
350
|
case FunctionToggleMenu:
|
|
341
351
|
case ToggleButtonClick:
|
|
342
352
|
if (!changes.isOpen && state.inputValue && highlightedIndex === -1 && !allowCustomValue) {
|
|
@@ -23,12 +23,13 @@ var toggleClass = require('../../tools/toggleClass.js');
|
|
|
23
23
|
var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
|
|
24
24
|
var wrapFocus = require('../../internal/wrapFocus.js');
|
|
25
25
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
26
|
+
var keys = require('../../internal/keyboard/keys.js');
|
|
27
|
+
var match = require('../../internal/keyboard/match.js');
|
|
26
28
|
var index$1 = require('../FeatureFlags/index.js');
|
|
27
29
|
var events = require('../../tools/events.js');
|
|
28
30
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
31
|
+
var index$2 = require('../Dialog/index.js');
|
|
29
32
|
var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
|
|
30
|
-
var match = require('../../internal/keyboard/match.js');
|
|
31
|
-
var keys = require('../../internal/keyboard/keys.js');
|
|
32
33
|
|
|
33
34
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
34
35
|
|
|
@@ -130,12 +131,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
130
131
|
const startSentinel = React.useRef(null);
|
|
131
132
|
const endSentinel = React.useRef(null);
|
|
132
133
|
const onMouseDownTarget = React.useRef(null);
|
|
133
|
-
const
|
|
134
|
+
const enableDialogElement =
|
|
135
|
+
// useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
|
|
136
|
+
index$1.useFeatureFlag('enable-dialog-element');
|
|
134
137
|
|
|
135
138
|
// Keep track of modal open/close state
|
|
136
139
|
// and propagate it to the document.body
|
|
137
140
|
React.useEffect(() => {
|
|
138
|
-
if (open !== wasOpen) {
|
|
141
|
+
if (!enableDialogElement && open !== wasOpen) {
|
|
139
142
|
setIsOpen(!!open);
|
|
140
143
|
setWasOpen(!!open);
|
|
141
144
|
toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, !!open);
|
|
@@ -143,22 +146,19 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
143
146
|
}, [open, wasOpen, prefix]);
|
|
144
147
|
// Remove the document.body className on unmount
|
|
145
148
|
React.useEffect(() => {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
+
if (!enableDialogElement) {
|
|
150
|
+
return () => {
|
|
151
|
+
toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
|
|
152
|
+
};
|
|
153
|
+
}
|
|
149
154
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
150
155
|
|
|
151
156
|
function handleKeyDown(event) {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
wrapFocus.wrapFocusWithoutSentinels({
|
|
158
|
-
containerNode: innerModal.current,
|
|
159
|
-
currentActiveNode: event.target,
|
|
160
|
-
event: event
|
|
161
|
-
});
|
|
157
|
+
if (!enableDialogElement) {
|
|
158
|
+
event.stopPropagation();
|
|
159
|
+
if (match.match(event, keys.Escape)) {
|
|
160
|
+
closeModal(event);
|
|
161
|
+
}
|
|
162
162
|
}
|
|
163
163
|
onKeyDown?.(event);
|
|
164
164
|
}
|
|
@@ -238,32 +238,34 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
238
238
|
}
|
|
239
239
|
});
|
|
240
240
|
React.useEffect(() => {
|
|
241
|
-
if (!open && launcherButtonRef) {
|
|
241
|
+
if (!enableDialogElement && !open && launcherButtonRef) {
|
|
242
242
|
setTimeout(() => {
|
|
243
243
|
launcherButtonRef?.current?.focus();
|
|
244
244
|
});
|
|
245
245
|
}
|
|
246
246
|
}, [open, launcherButtonRef]);
|
|
247
247
|
React.useEffect(() => {
|
|
248
|
-
|
|
249
|
-
const
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
const
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
target
|
|
261
|
-
|
|
262
|
-
closeButton
|
|
248
|
+
if (!enableDialogElement) {
|
|
249
|
+
const initialFocus = focusContainerElement => {
|
|
250
|
+
const containerElement = focusContainerElement || innerModal.current;
|
|
251
|
+
const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
|
|
252
|
+
if (primaryFocusElement) {
|
|
253
|
+
return primaryFocusElement;
|
|
254
|
+
}
|
|
255
|
+
return button && button.current;
|
|
256
|
+
};
|
|
257
|
+
const focusButton = focusContainerElement => {
|
|
258
|
+
const target = initialFocus(focusContainerElement);
|
|
259
|
+
const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
|
|
260
|
+
if (target) {
|
|
261
|
+
target.focus();
|
|
262
|
+
} else if (!target && closeButton) {
|
|
263
|
+
closeButton?.focus();
|
|
264
|
+
}
|
|
265
|
+
};
|
|
266
|
+
if (open && isOpen) {
|
|
267
|
+
focusButton(innerModal.current);
|
|
263
268
|
}
|
|
264
|
-
};
|
|
265
|
-
if (open && isOpen) {
|
|
266
|
-
focusButton(innerModal.current);
|
|
267
269
|
}
|
|
268
270
|
}, [open, selectorPrimaryFocus, isOpen]);
|
|
269
271
|
|
|
@@ -274,23 +276,24 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
274
276
|
size: 'sm'
|
|
275
277
|
});
|
|
276
278
|
}
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
"aria-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
279
|
+
const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$2.unstable__Dialog, {
|
|
280
|
+
open: open,
|
|
281
|
+
modal: true,
|
|
282
|
+
className: containerClass,
|
|
283
|
+
"aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
|
|
284
|
+
"aria-labelledby": ariaLabelledBy
|
|
285
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
286
|
+
ref: innerModal,
|
|
287
|
+
className: `${prefix}--modal-container-body`
|
|
288
|
+
}, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
289
|
+
className: `${prefix}--modal--inner__decorator`
|
|
290
|
+
}, normalizedDecorator) : '', childrenWithProps)) : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
288
291
|
className: containerClass,
|
|
289
292
|
role: "dialog",
|
|
290
293
|
"aria-modal": "true",
|
|
291
294
|
"aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
|
|
292
295
|
"aria-labelledby": ariaLabelledBy
|
|
293
|
-
},
|
|
296
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
294
297
|
type: "button",
|
|
295
298
|
ref: startSentinel,
|
|
296
299
|
className: `${prefix}--visually-hidden`
|
|
@@ -299,11 +302,22 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
299
302
|
className: `${prefix}--modal-container-body`
|
|
300
303
|
}, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
301
304
|
className: `${prefix}--modal--inner__decorator`
|
|
302
|
-
}, normalizedDecorator) : '', childrenWithProps),
|
|
305
|
+
}, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
303
306
|
type: "button",
|
|
304
307
|
ref: endSentinel,
|
|
305
308
|
className: `${prefix}--visually-hidden`
|
|
306
|
-
}, "Focus sentinel"))
|
|
309
|
+
}, "Focus sentinel"));
|
|
310
|
+
return /*#__PURE__*/React__default["default"].createElement(index.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
311
|
+
level: 0,
|
|
312
|
+
role: "presentation",
|
|
313
|
+
ref: ref,
|
|
314
|
+
"aria-hidden": !open,
|
|
315
|
+
onBlur: !enableDialogElement ? handleBlur : () => {},
|
|
316
|
+
onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
|
|
317
|
+
onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
|
|
318
|
+
onKeyDown: handleKeyDown,
|
|
319
|
+
className: modalClass
|
|
320
|
+
}), modalBody);
|
|
307
321
|
});
|
|
308
322
|
ComposedModal.propTypes = {
|
|
309
323
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2022
|
|
2
|
+
* Copyright IBM Corp. 2022, 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.
|
|
@@ -27,7 +27,7 @@ interface ContainedListItemProps {
|
|
|
27
27
|
*/
|
|
28
28
|
onClick?: () => void;
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* A component used to render an icon.
|
|
31
31
|
*/
|
|
32
32
|
renderIcon?: ComponentType | FunctionComponent;
|
|
33
33
|
}
|
|
@@ -81,7 +81,7 @@ ContainedListItem.propTypes = {
|
|
|
81
81
|
*/
|
|
82
82
|
onClick: PropTypes__default["default"].func,
|
|
83
83
|
/**
|
|
84
|
-
*
|
|
84
|
+
* A component used to render an icon.
|
|
85
85
|
*/
|
|
86
86
|
// @ts-expect-error: PropTypes are not expressive enough to cover this case
|
|
87
87
|
renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
|
|
@@ -16,11 +16,11 @@ var cx = require('classnames');
|
|
|
16
16
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
17
17
|
var index = require('../Layout/index.js');
|
|
18
18
|
var events = require('../../tools/events.js');
|
|
19
|
-
var
|
|
20
|
-
var noopFn = require('../../internal/noopFn.js');
|
|
19
|
+
var keys = require('../../internal/keyboard/keys.js');
|
|
21
20
|
var match = require('../../internal/keyboard/match.js');
|
|
22
21
|
var navigation = require('../../internal/keyboard/navigation.js');
|
|
23
|
-
var
|
|
22
|
+
var usePrefix = require('../../internal/usePrefix.js');
|
|
23
|
+
var noopFn = require('../../internal/noopFn.js');
|
|
24
24
|
|
|
25
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
26
26
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
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.
|
|
@@ -17,7 +17,7 @@ export interface TableBatchActionProps extends React.ButtonHTMLAttributes<HTMLBu
|
|
|
17
17
|
*/
|
|
18
18
|
iconDescription?: string;
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
20
|
+
* A component used to render an icon.
|
|
21
21
|
*/
|
|
22
22
|
renderIcon?: React.ElementType;
|
|
23
23
|
}
|
|
@@ -34,7 +34,7 @@ declare const TableBatchAction: {
|
|
|
34
34
|
*/
|
|
35
35
|
iconDescription: (props: any) => Error | undefined;
|
|
36
36
|
/**
|
|
37
|
-
*
|
|
37
|
+
* A component used to render an icon.
|
|
38
38
|
*/
|
|
39
39
|
renderIcon: PropTypes.Requireable<object>;
|
|
40
40
|
};
|
|
@@ -48,7 +48,7 @@ TableBatchAction.propTypes = {
|
|
|
48
48
|
return undefined;
|
|
49
49
|
},
|
|
50
50
|
/**
|
|
51
|
-
*
|
|
51
|
+
* A component used to render an icon.
|
|
52
52
|
*/
|
|
53
53
|
renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
|
|
54
54
|
};
|
|
@@ -16,6 +16,7 @@ var React = require('react');
|
|
|
16
16
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
17
17
|
var useId = require('../../internal/useId.js');
|
|
18
18
|
var TableContext = require('./TableContext.js');
|
|
19
|
+
var index = require('../Heading/index.js');
|
|
19
20
|
|
|
20
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
22
|
|
|
@@ -49,14 +50,14 @@ const TableContainer = _ref => {
|
|
|
49
50
|
}, [title, description, titleId, descriptionId]);
|
|
50
51
|
return /*#__PURE__*/React__default["default"].createElement(TableContext.TableContext.Provider, {
|
|
51
52
|
value: value
|
|
52
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
53
|
+
}, /*#__PURE__*/React__default["default"].createElement(index.Section, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
53
54
|
className: tableContainerClasses
|
|
54
|
-
}), title && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
55
|
+
}), (title || description) && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
55
56
|
className: `${prefix}--data-table-header`
|
|
56
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
57
|
+
}, title && /*#__PURE__*/React__default["default"].createElement(index.Heading, {
|
|
57
58
|
className: `${prefix}--data-table-header__title`,
|
|
58
59
|
id: titleId
|
|
59
|
-
}, title), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
60
|
+
}, title), description && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
60
61
|
className: `${prefix}--data-table-header__description`,
|
|
61
62
|
id: descriptionId
|
|
62
63
|
}, description)), children));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
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.
|
|
@@ -45,15 +45,16 @@ export type TableExpandHeaderPropsBase = {
|
|
|
45
45
|
*/
|
|
46
46
|
onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
|
|
47
47
|
} & ReactAttr<HTMLTableCellElement>;
|
|
48
|
-
export type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, '
|
|
48
|
+
export type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'aria-label' | 'enableToggle' | 'onExpand'> & {
|
|
49
49
|
enableToggle: true;
|
|
50
|
-
ariaLabel: string;
|
|
51
50
|
['aria-label']: string;
|
|
52
51
|
onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
|
|
53
52
|
};
|
|
54
|
-
export type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, '
|
|
53
|
+
export type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'aria-label' | 'enableExpando' | 'onExpand'> & {
|
|
54
|
+
/**
|
|
55
|
+
* @deprecated The enableExpando prop is being replaced by `enableToggle`
|
|
56
|
+
*/
|
|
55
57
|
enableExpando: true;
|
|
56
|
-
ariaLabel: string;
|
|
57
58
|
['aria-label']: string;
|
|
58
59
|
onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
|
|
59
60
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
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.
|
|
@@ -20,7 +20,7 @@ export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivEleme
|
|
|
20
20
|
*/
|
|
21
21
|
menuOptionsClass?: string;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* A component used to render an icon.
|
|
24
24
|
*/
|
|
25
25
|
renderIcon?: any;
|
|
26
26
|
}
|
|
@@ -61,7 +61,7 @@ TableToolbarMenu.propTypes = {
|
|
|
61
61
|
*/
|
|
62
62
|
menuOptionsClass: PropTypes__default["default"].string,
|
|
63
63
|
/**
|
|
64
|
-
*
|
|
64
|
+
* A component used to render an icon.
|
|
65
65
|
*/
|
|
66
66
|
renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
|
|
67
67
|
};
|
|
@@ -20,13 +20,13 @@ var appendToPlugin = require('./plugins/appendToPlugin.js');
|
|
|
20
20
|
var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
|
|
21
21
|
var rangePlugin = require('./plugins/rangePlugin.js');
|
|
22
22
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
23
|
+
var keys = require('../../internal/keyboard/keys.js');
|
|
24
|
+
var match = require('../../internal/keyboard/match.js');
|
|
23
25
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
24
26
|
var useSavedCallback = require('../../internal/useSavedCallback.js');
|
|
25
27
|
require('../FluidForm/FluidForm.js');
|
|
26
28
|
var FormContext = require('../FluidForm/FormContext.js');
|
|
27
29
|
var iconsReact = require('@carbon/icons-react');
|
|
28
|
-
var match = require('../../internal/keyboard/match.js');
|
|
29
|
-
var keys = require('../../internal/keyboard/keys.js');
|
|
30
30
|
|
|
31
31
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
32
32
|
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
|
-
var match = require('../../../internal/keyboard/match.js');
|
|
13
12
|
var keys = require('../../../internal/keyboard/keys.js');
|
|
13
|
+
var match = require('../../../internal/keyboard/match.js');
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* @param {object} config Plugin configuration.
|
|
@@ -12,9 +12,28 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
|
|
|
12
12
|
*/
|
|
13
13
|
children?: React.ReactNode;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* Specify an optional className to be applied to the modal root node
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Specifies whether the dialog is modal or non-modal. This cannot be changed
|
|
20
|
+
* while open=true
|
|
16
21
|
*/
|
|
17
22
|
modal?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Specify a handler for the dialog's cancel event.
|
|
25
|
+
* The browser fires this event when the user presses the Esc key and is cancelable.
|
|
26
|
+
*/
|
|
27
|
+
onCancel?: React.ReactEventHandler<HTMLDialogElement>;
|
|
28
|
+
/**
|
|
29
|
+
* Specify a click handler applied to the dialog.
|
|
30
|
+
*/
|
|
31
|
+
onClick?: React.ReactEventHandler<HTMLDialogElement>;
|
|
32
|
+
/**
|
|
33
|
+
* Specify a handler the dialog's close event.
|
|
34
|
+
* The browser fires this event after the dialog has closed.
|
|
35
|
+
*/
|
|
36
|
+
onClose?: React.ReactEventHandler<HTMLDialogElement>;
|
|
18
37
|
/**
|
|
19
38
|
* Specify a handler for closing Dialog.
|
|
20
39
|
* The handler should care of closing Dialog, e.g. changing `open` prop.
|
|
@@ -25,6 +44,25 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
|
|
|
25
44
|
*/
|
|
26
45
|
open?: boolean;
|
|
27
46
|
}
|
|
28
|
-
declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
|
|
29
|
-
export
|
|
30
|
-
|
|
47
|
+
export declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
|
|
48
|
+
export interface DialogHeaderProps extends ReactAttr<HTMLDivElement> {
|
|
49
|
+
/**
|
|
50
|
+
* Provide the contents to be rendered inside of this component
|
|
51
|
+
*/
|
|
52
|
+
children?: React.ReactNode;
|
|
53
|
+
}
|
|
54
|
+
export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
55
|
+
export interface DialogControlsProps extends ReactAttr<HTMLDivElement> {
|
|
56
|
+
/**
|
|
57
|
+
* Provide the contents to be rendered inside of this component
|
|
58
|
+
*/
|
|
59
|
+
children?: React.ReactNode;
|
|
60
|
+
}
|
|
61
|
+
export declare const DialogControls: React.ForwardRefExoticComponent<DialogControlsProps & React.RefAttributes<HTMLDivElement>>;
|
|
62
|
+
export interface DialogCloseButtonProps extends ReactAttr<HTMLDivElement> {
|
|
63
|
+
/**
|
|
64
|
+
* Specify a click handler applied to the IconButton
|
|
65
|
+
*/
|
|
66
|
+
onClick?: React.MouseEventHandler;
|
|
67
|
+
}
|
|
68
|
+
export declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLDivElement>>;
|