@carbon/react 1.78.2 → 1.79.0-rc.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 +835 -835
- 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/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/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
|
@@ -1,171 +0,0 @@
|
|
|
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 React, { ReactNode } from 'react';
|
|
8
|
-
import { ReactAttr } from '../../../types/common';
|
|
9
|
-
import { InlineLoadingStatus } from '../../InlineLoading/InlineLoading';
|
|
10
|
-
export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
|
|
11
|
-
export type ModalSize = (typeof ModalSizes)[number];
|
|
12
|
-
export interface ModalSecondaryButton {
|
|
13
|
-
buttonText?: string | ReactNode;
|
|
14
|
-
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
15
|
-
}
|
|
16
|
-
export interface BaseModalProps extends ReactAttr<HTMLDivElement> {
|
|
17
|
-
/**
|
|
18
|
-
* Required props for the accessibility label of the header
|
|
19
|
-
*/
|
|
20
|
-
'aria-label'?: string;
|
|
21
|
-
/**
|
|
22
|
-
* Provide the contents of your Modal
|
|
23
|
-
*/
|
|
24
|
-
children?: ReactNode;
|
|
25
|
-
/**
|
|
26
|
-
* Specify an optional className to be applied to the modal root node
|
|
27
|
-
*/
|
|
28
|
-
className?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Specify an label for the close button of the modal; defaults to close
|
|
31
|
-
*/
|
|
32
|
-
closeButtonLabel?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Specify whether the Modal is for dangerous actions
|
|
35
|
-
*/
|
|
36
|
-
danger?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
|
|
39
|
-
*/
|
|
40
|
-
decorator?: ReactNode;
|
|
41
|
-
/**
|
|
42
|
-
* Specify whether the modal contains scrolling content
|
|
43
|
-
*/
|
|
44
|
-
hasScrollingContent?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
* Specify the DOM element ID of the top-level node.
|
|
47
|
-
*/
|
|
48
|
-
id?: string;
|
|
49
|
-
/**
|
|
50
|
-
* Specify whether or not the Modal content should have any inner padding.
|
|
51
|
-
*/
|
|
52
|
-
isFullWidth?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* Specify the description for the loading text
|
|
55
|
-
*/
|
|
56
|
-
loadingDescription?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Specify the description for the loading text
|
|
59
|
-
*/
|
|
60
|
-
loadingIconDescription?: string;
|
|
61
|
-
/**
|
|
62
|
-
* Specify loading status
|
|
63
|
-
*/
|
|
64
|
-
loadingStatus?: InlineLoadingStatus;
|
|
65
|
-
/**
|
|
66
|
-
* Specify a label to be read by screen readers on the modal root node
|
|
67
|
-
*/
|
|
68
|
-
modalAriaLabel?: string;
|
|
69
|
-
/**
|
|
70
|
-
* Specify the content of the modal header title.
|
|
71
|
-
*/
|
|
72
|
-
modalHeading?: ReactNode;
|
|
73
|
-
/**
|
|
74
|
-
* Specify the content of the modal header label.
|
|
75
|
-
*/
|
|
76
|
-
modalLabel?: ReactNode;
|
|
77
|
-
/**
|
|
78
|
-
* Specify a handler for keypresses.
|
|
79
|
-
* @deprecated this property is unused
|
|
80
|
-
*/
|
|
81
|
-
onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
|
|
82
|
-
/**
|
|
83
|
-
* Specify an optional handler to be invoked when loading is
|
|
84
|
-
* successful
|
|
85
|
-
*/
|
|
86
|
-
onLoadingSuccess?: () => void;
|
|
87
|
-
/**
|
|
88
|
-
* Specify a handler for closing modal.
|
|
89
|
-
* The handler should care of closing modal, e.g. changing `open` prop.
|
|
90
|
-
*/
|
|
91
|
-
onRequestClose?: React.ReactEventHandler<HTMLElement>;
|
|
92
|
-
/**
|
|
93
|
-
* Specify a handler for "submitting" modal.
|
|
94
|
-
* The handler should care of closing modal, e.g. changing `open` prop, if necessary.
|
|
95
|
-
*/
|
|
96
|
-
onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
|
|
97
|
-
/**
|
|
98
|
-
* Specify a handler for the secondary button.
|
|
99
|
-
* Useful if separate handler from `onRequestClose` is desirable
|
|
100
|
-
*/
|
|
101
|
-
onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
|
|
102
|
-
/**
|
|
103
|
-
* Specify whether the Modal is currently open
|
|
104
|
-
*/
|
|
105
|
-
open?: boolean;
|
|
106
|
-
/**
|
|
107
|
-
* Prevent closing on click outside of modal
|
|
108
|
-
*/
|
|
109
|
-
preventCloseOnClickOutside?: boolean;
|
|
110
|
-
/**
|
|
111
|
-
* Specify whether the Button should be disabled, or not
|
|
112
|
-
*/
|
|
113
|
-
primaryButtonDisabled?: boolean;
|
|
114
|
-
/**
|
|
115
|
-
* Specify the text for the primary button
|
|
116
|
-
*/
|
|
117
|
-
primaryButtonText?: ReactNode;
|
|
118
|
-
/**
|
|
119
|
-
* Specify the text for the secondary button
|
|
120
|
-
*/
|
|
121
|
-
secondaryButtonText?: ReactNode;
|
|
122
|
-
/**
|
|
123
|
-
* Specify an array of config objects for secondary buttons
|
|
124
|
-
*/
|
|
125
|
-
secondaryButtons?: ModalSecondaryButton[];
|
|
126
|
-
/**
|
|
127
|
-
* Specify a CSS selector that matches the DOM element that should
|
|
128
|
-
* be focused when the Modal opens
|
|
129
|
-
*/
|
|
130
|
-
selectorPrimaryFocus?: string;
|
|
131
|
-
/**
|
|
132
|
-
* Specify CSS selectors that match DOM elements working as floating menus.
|
|
133
|
-
* Focusing on those elements won't trigger "focus-wrap" behavior
|
|
134
|
-
*/
|
|
135
|
-
selectorsFloatingMenus?: string[];
|
|
136
|
-
/**
|
|
137
|
-
* Specify if Enter key should be used as "submit" action
|
|
138
|
-
*/
|
|
139
|
-
shouldSubmitOnEnter?: boolean;
|
|
140
|
-
/**
|
|
141
|
-
* Specify the size variant.
|
|
142
|
-
*/
|
|
143
|
-
size?: ModalSize;
|
|
144
|
-
}
|
|
145
|
-
interface PassiveModal extends BaseModalProps {
|
|
146
|
-
/**
|
|
147
|
-
* Specify whether the modal should be button-less
|
|
148
|
-
*/
|
|
149
|
-
passiveModal?: true;
|
|
150
|
-
/**
|
|
151
|
-
* Specify whether the Modal is displaying an alert, error or warning. Should
|
|
152
|
-
* go hand in hand with the `danger` prop. This changes the `role` to
|
|
153
|
-
* `alertdialog` and cannot be used with passive modals.
|
|
154
|
-
*/
|
|
155
|
-
alert?: never;
|
|
156
|
-
}
|
|
157
|
-
interface NonPassiveModal extends BaseModalProps {
|
|
158
|
-
/**
|
|
159
|
-
* Specify whether the modal should be button-less
|
|
160
|
-
*/
|
|
161
|
-
passiveModal?: false;
|
|
162
|
-
/**
|
|
163
|
-
* Specify whether the Modal is displaying an alert, error or warning. Should
|
|
164
|
-
* go hand in hand with the `danger` prop. This changes the `role` to
|
|
165
|
-
* `alertdialog` and cannot be used with passive modals.
|
|
166
|
-
*/
|
|
167
|
-
alert?: boolean;
|
|
168
|
-
}
|
|
169
|
-
export type ModalProps = PassiveModal | NonPassiveModal;
|
|
170
|
-
declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
171
|
-
export default Modal;
|
|
@@ -1,15 +0,0 @@
|
|
|
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
|
-
function focus(elementOrRef) {
|
|
9
|
-
const element = elementOrRef.current || elementOrRef;
|
|
10
|
-
if (element && element.focus && document.activeElement !== element) {
|
|
11
|
-
element.focus();
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export { focus };
|
|
@@ -1,30 +0,0 @@
|
|
|
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
|
-
import { useRef, useEffect } from 'react';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* A custom hook which will call the given callback exactly once when your
|
|
12
|
-
* component is initially rendered and effects are first called
|
|
13
|
-
*
|
|
14
|
-
* @param {Function} callback
|
|
15
|
-
*/
|
|
16
|
-
function useEffectOnce(callback) {
|
|
17
|
-
const savedCallback = useRef(callback);
|
|
18
|
-
const effectGuard = useRef(false);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
savedCallback.current = callback;
|
|
21
|
-
});
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (effectGuard.current !== true) {
|
|
24
|
-
effectGuard.current = true;
|
|
25
|
-
savedCallback.current();
|
|
26
|
-
}
|
|
27
|
-
}, []);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { useEffectOnce };
|
|
@@ -1,171 +0,0 @@
|
|
|
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 React, { ReactNode } from 'react';
|
|
8
|
-
import { ReactAttr } from '../../../types/common';
|
|
9
|
-
import { InlineLoadingStatus } from '../../InlineLoading/InlineLoading';
|
|
10
|
-
export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
|
|
11
|
-
export type ModalSize = (typeof ModalSizes)[number];
|
|
12
|
-
export interface ModalSecondaryButton {
|
|
13
|
-
buttonText?: string | ReactNode;
|
|
14
|
-
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
15
|
-
}
|
|
16
|
-
export interface BaseModalProps extends ReactAttr<HTMLDivElement> {
|
|
17
|
-
/**
|
|
18
|
-
* Required props for the accessibility label of the header
|
|
19
|
-
*/
|
|
20
|
-
'aria-label'?: string;
|
|
21
|
-
/**
|
|
22
|
-
* Provide the contents of your Modal
|
|
23
|
-
*/
|
|
24
|
-
children?: ReactNode;
|
|
25
|
-
/**
|
|
26
|
-
* Specify an optional className to be applied to the modal root node
|
|
27
|
-
*/
|
|
28
|
-
className?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Specify an label for the close button of the modal; defaults to close
|
|
31
|
-
*/
|
|
32
|
-
closeButtonLabel?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Specify whether the Modal is for dangerous actions
|
|
35
|
-
*/
|
|
36
|
-
danger?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
|
|
39
|
-
*/
|
|
40
|
-
decorator?: ReactNode;
|
|
41
|
-
/**
|
|
42
|
-
* Specify whether the modal contains scrolling content
|
|
43
|
-
*/
|
|
44
|
-
hasScrollingContent?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
* Specify the DOM element ID of the top-level node.
|
|
47
|
-
*/
|
|
48
|
-
id?: string;
|
|
49
|
-
/**
|
|
50
|
-
* Specify whether or not the Modal content should have any inner padding.
|
|
51
|
-
*/
|
|
52
|
-
isFullWidth?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* Specify the description for the loading text
|
|
55
|
-
*/
|
|
56
|
-
loadingDescription?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Specify the description for the loading text
|
|
59
|
-
*/
|
|
60
|
-
loadingIconDescription?: string;
|
|
61
|
-
/**
|
|
62
|
-
* Specify loading status
|
|
63
|
-
*/
|
|
64
|
-
loadingStatus?: InlineLoadingStatus;
|
|
65
|
-
/**
|
|
66
|
-
* Specify a label to be read by screen readers on the modal root node
|
|
67
|
-
*/
|
|
68
|
-
modalAriaLabel?: string;
|
|
69
|
-
/**
|
|
70
|
-
* Specify the content of the modal header title.
|
|
71
|
-
*/
|
|
72
|
-
modalHeading?: ReactNode;
|
|
73
|
-
/**
|
|
74
|
-
* Specify the content of the modal header label.
|
|
75
|
-
*/
|
|
76
|
-
modalLabel?: ReactNode;
|
|
77
|
-
/**
|
|
78
|
-
* Specify a handler for keypresses.
|
|
79
|
-
* @deprecated this property is unused
|
|
80
|
-
*/
|
|
81
|
-
onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
|
|
82
|
-
/**
|
|
83
|
-
* Specify an optional handler to be invoked when loading is
|
|
84
|
-
* successful
|
|
85
|
-
*/
|
|
86
|
-
onLoadingSuccess?: () => void;
|
|
87
|
-
/**
|
|
88
|
-
* Specify a handler for closing modal.
|
|
89
|
-
* The handler should care of closing modal, e.g. changing `open` prop.
|
|
90
|
-
*/
|
|
91
|
-
onRequestClose?: React.ReactEventHandler<HTMLElement>;
|
|
92
|
-
/**
|
|
93
|
-
* Specify a handler for "submitting" modal.
|
|
94
|
-
* The handler should care of closing modal, e.g. changing `open` prop, if necessary.
|
|
95
|
-
*/
|
|
96
|
-
onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
|
|
97
|
-
/**
|
|
98
|
-
* Specify a handler for the secondary button.
|
|
99
|
-
* Useful if separate handler from `onRequestClose` is desirable
|
|
100
|
-
*/
|
|
101
|
-
onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
|
|
102
|
-
/**
|
|
103
|
-
* Specify whether the Modal is currently open
|
|
104
|
-
*/
|
|
105
|
-
open?: boolean;
|
|
106
|
-
/**
|
|
107
|
-
* Prevent closing on click outside of modal
|
|
108
|
-
*/
|
|
109
|
-
preventCloseOnClickOutside?: boolean;
|
|
110
|
-
/**
|
|
111
|
-
* Specify whether the Button should be disabled, or not
|
|
112
|
-
*/
|
|
113
|
-
primaryButtonDisabled?: boolean;
|
|
114
|
-
/**
|
|
115
|
-
* Specify the text for the primary button
|
|
116
|
-
*/
|
|
117
|
-
primaryButtonText?: ReactNode;
|
|
118
|
-
/**
|
|
119
|
-
* Specify the text for the secondary button
|
|
120
|
-
*/
|
|
121
|
-
secondaryButtonText?: ReactNode;
|
|
122
|
-
/**
|
|
123
|
-
* Specify an array of config objects for secondary buttons
|
|
124
|
-
*/
|
|
125
|
-
secondaryButtons?: ModalSecondaryButton[];
|
|
126
|
-
/**
|
|
127
|
-
* Specify a CSS selector that matches the DOM element that should
|
|
128
|
-
* be focused when the Modal opens
|
|
129
|
-
*/
|
|
130
|
-
selectorPrimaryFocus?: string;
|
|
131
|
-
/**
|
|
132
|
-
* Specify CSS selectors that match DOM elements working as floating menus.
|
|
133
|
-
* Focusing on those elements won't trigger "focus-wrap" behavior
|
|
134
|
-
*/
|
|
135
|
-
selectorsFloatingMenus?: string[];
|
|
136
|
-
/**
|
|
137
|
-
* Specify if Enter key should be used as "submit" action
|
|
138
|
-
*/
|
|
139
|
-
shouldSubmitOnEnter?: boolean;
|
|
140
|
-
/**
|
|
141
|
-
* Specify the size variant.
|
|
142
|
-
*/
|
|
143
|
-
size?: ModalSize;
|
|
144
|
-
}
|
|
145
|
-
interface PassiveModal extends BaseModalProps {
|
|
146
|
-
/**
|
|
147
|
-
* Specify whether the modal should be button-less
|
|
148
|
-
*/
|
|
149
|
-
passiveModal?: true;
|
|
150
|
-
/**
|
|
151
|
-
* Specify whether the Modal is displaying an alert, error or warning. Should
|
|
152
|
-
* go hand in hand with the `danger` prop. This changes the `role` to
|
|
153
|
-
* `alertdialog` and cannot be used with passive modals.
|
|
154
|
-
*/
|
|
155
|
-
alert?: never;
|
|
156
|
-
}
|
|
157
|
-
interface NonPassiveModal extends BaseModalProps {
|
|
158
|
-
/**
|
|
159
|
-
* Specify whether the modal should be button-less
|
|
160
|
-
*/
|
|
161
|
-
passiveModal?: false;
|
|
162
|
-
/**
|
|
163
|
-
* Specify whether the Modal is displaying an alert, error or warning. Should
|
|
164
|
-
* go hand in hand with the `danger` prop. This changes the `role` to
|
|
165
|
-
* `alertdialog` and cannot be used with passive modals.
|
|
166
|
-
*/
|
|
167
|
-
alert?: boolean;
|
|
168
|
-
}
|
|
169
|
-
export type ModalProps = PassiveModal | NonPassiveModal;
|
|
170
|
-
declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
171
|
-
export default Modal;
|
|
@@ -1,19 +0,0 @@
|
|
|
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
|
-
function focus(elementOrRef) {
|
|
13
|
-
const element = elementOrRef.current || elementOrRef;
|
|
14
|
-
if (element && element.focus && document.activeElement !== element) {
|
|
15
|
-
element.focus();
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
exports.focus = focus;
|
|
@@ -1,34 +0,0 @@
|
|
|
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 React = require('react');
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* A custom hook which will call the given callback exactly once when your
|
|
16
|
-
* component is initially rendered and effects are first called
|
|
17
|
-
*
|
|
18
|
-
* @param {Function} callback
|
|
19
|
-
*/
|
|
20
|
-
function useEffectOnce(callback) {
|
|
21
|
-
const savedCallback = React.useRef(callback);
|
|
22
|
-
const effectGuard = React.useRef(false);
|
|
23
|
-
React.useEffect(() => {
|
|
24
|
-
savedCallback.current = callback;
|
|
25
|
-
});
|
|
26
|
-
React.useEffect(() => {
|
|
27
|
-
if (effectGuard.current !== true) {
|
|
28
|
-
effectGuard.current = true;
|
|
29
|
-
savedCallback.current();
|
|
30
|
-
}
|
|
31
|
-
}, []);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
exports.useEffectOnce = useEffectOnce;
|