@hazelcast/ui 4.0.1-canary.9 → 4.0.2
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/README.md +27 -175
- package/lib/components/Alert.js +3 -4
- package/lib/components/Alert.js.map +1 -1
- package/lib/components/Alert.module.css +111 -0
- package/lib/components/AppHeader/AppHeader.js +1 -1
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/AppHeader/AppHeader.module.css +27 -0
- package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.js +1 -1
- package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.js.map +1 -1
- package/lib/components/AppHeader/AppHeaderLogo/{AppHeaderLogo.module.scss → AppHeaderLogo.module.css} +1 -4
- package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.js +1 -1
- package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.js.map +1 -1
- package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.css +18 -0
- package/lib/components/AppHeader/EnvironmentBadge/EnvironmentBadge.js +1 -1
- package/lib/components/AppHeader/EnvironmentBadge/EnvironmentBadge.js.map +1 -1
- package/lib/components/AppHeader/EnvironmentBadge/EnvironmentBadge.module.css +11 -0
- package/lib/components/AppHeader/SelectCluster/SelectCluster.js +1 -1
- package/lib/components/AppHeader/SelectCluster/SelectCluster.js.map +1 -1
- package/lib/components/AppHeader/SelectCluster/SelectCluster.module.css +75 -0
- package/lib/components/AppSidebar/AppSidebar.js +1 -1
- package/lib/components/AppSidebar/AppSidebar.js.map +1 -1
- package/lib/components/AppSidebar/{AppSidebar.module.scss → AppSidebar.module.css} +12 -18
- package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js +1 -1
- package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebarFavoriteButton/{AppSidebarFavoriteButton.module.scss → AppSidebarFavoriteButton.module.css} +3 -5
- package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.js +1 -1
- package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.module.css +11 -0
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js +1 -1
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebarItem/{AppSidebarItem.module.scss → AppSidebarItem.module.css} +18 -20
- package/lib/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.js +1 -1
- package/lib/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebarMenuItemCounter/{AppSidebarMenuItemCounter.module.scss → AppSidebarMenuItemCounter.module.css} +5 -8
- package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.js +1 -1
- package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.module.css +53 -0
- package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.js +1 -1
- package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.js.map +1 -1
- package/lib/components/AutocompleteField.js +1 -1
- package/lib/components/AutocompleteField.js.map +1 -1
- package/lib/components/Badge.js +1 -1
- package/lib/components/Badge.js.map +1 -1
- package/lib/components/{Badge.module.scss → Badge.module.css} +7 -5
- package/lib/components/Button.d.ts +0 -2
- package/lib/components/Button.js +3 -7
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Calendar/Calendar.d.ts +0 -2
- package/lib/components/Calendar/Calendar.js +3 -3
- package/lib/components/Calendar/Calendar.js.map +1 -1
- package/lib/components/Calendar/Calendar.module.css +321 -0
- package/lib/components/Calendar/CalendarRange.js +5 -5
- package/lib/components/Calendar/CalendarRange.js.map +1 -1
- package/lib/components/Calendar/CalendarRange.module.css +19 -0
- package/lib/components/Calendar/components/CalendarHeader.js +4 -4
- package/lib/components/Calendar/components/CalendarHeader.js.map +1 -1
- package/lib/components/Calendar/components/CalendarInput.d.ts +0 -2
- package/lib/components/Calendar/components/CalendarInput.js +1 -1
- package/lib/components/Calendar/components/CalendarInput.js.map +1 -1
- package/lib/components/Calendar/components/CalendarTime.js +2 -2
- package/lib/components/Calendar/components/CalendarTime.js.map +1 -1
- package/lib/components/Calendar/components/{CalendarTime.module.scss → CalendarTime.module.css} +16 -21
- package/lib/components/Card.js +1 -1
- package/lib/components/Card.js.map +1 -1
- package/lib/components/Card.module.css +97 -0
- package/lib/components/Carousel.js +3 -3
- package/lib/components/Carousel.js.map +1 -1
- package/lib/components/Carousel.module.css +53 -0
- package/lib/components/CenteredLoader.js +1 -1
- package/lib/components/CenteredLoader.js.map +1 -1
- package/lib/components/{CenteredLoader.module.scss → CenteredLoader.module.css} +1 -3
- package/lib/components/CircularProgressBar.js +1 -1
- package/lib/components/CircularProgressBar.js.map +1 -1
- package/lib/components/{CircularProgressBar.module.scss → CircularProgressBar.module.css} +8 -8
- package/lib/components/ContextMenu.js +1 -1
- package/lib/components/ContextMenu.js.map +1 -1
- package/lib/components/ContextMenu.module.css +34 -0
- package/lib/components/Dialog.js +1 -1
- package/lib/components/Dialog.js.map +1 -1
- package/lib/components/{Dialog.module.scss → Dialog.module.css} +11 -13
- package/lib/components/EmptyState.js +1 -1
- package/lib/components/EmptyState.js.map +1 -1
- package/lib/components/EmptyState.module.css +96 -0
- package/lib/components/Error.js +1 -1
- package/lib/components/Error.js.map +1 -1
- package/lib/components/Error.module.css +13 -0
- package/lib/components/FieldHeader.d.ts +0 -2
- package/lib/components/FieldHeader.js +3 -3
- package/lib/components/FieldHeader.js.map +1 -1
- package/lib/components/FieldHeader.module.css +22 -0
- package/lib/components/Help.js +3 -3
- package/lib/components/Help.js.map +1 -1
- package/lib/components/Help.module.css +7 -0
- package/lib/components/Icon.js +3 -3
- package/lib/components/Icon.js.map +1 -1
- package/lib/components/Icon.module.css +31 -0
- package/lib/components/IconButton.d.ts +1 -2
- package/lib/components/IconButton.js +3 -7
- package/lib/components/IconButton.js.map +1 -1
- package/lib/components/InteractiveList.js +2 -2
- package/lib/components/InteractiveList.js.map +1 -1
- package/lib/components/InteractiveList.module.css +3 -3
- package/lib/components/InteractiveListFormik.js +1 -2
- package/lib/components/InteractiveListFormik.js.map +1 -1
- package/lib/components/Label.js +1 -1
- package/lib/components/Label.js.map +1 -1
- package/lib/components/Label.module.css +13 -0
- package/lib/components/Link.js +1 -1
- package/lib/components/Link.js.map +1 -1
- package/lib/components/Link.module.css +65 -0
- package/lib/components/Loader.js +1 -1
- package/lib/components/Loader.js.map +1 -1
- package/lib/components/Loader.module.css +91 -0
- package/lib/components/Modal.js +2 -2
- package/lib/components/Modal.js.map +1 -1
- package/lib/components/Notification.js +3 -3
- package/lib/components/Notification.js.map +1 -1
- package/lib/components/Notification.module.css +64 -0
- package/lib/components/NumberBadge.js +1 -1
- package/lib/components/NumberBadge.js.map +1 -1
- package/lib/components/NumberBadge.module.css +14 -0
- package/lib/components/NumberField.js +3 -3
- package/lib/components/NumberField.js.map +1 -1
- package/lib/components/Overlay.js +1 -1
- package/lib/components/Overlay.js.map +1 -1
- package/lib/components/Overlay.module.css +112 -0
- package/lib/components/Pagination.js +1 -1
- package/lib/components/Pagination.js.map +1 -1
- package/lib/components/Pagination.module.css +118 -0
- package/lib/components/PasswordField.js +3 -3
- package/lib/components/PasswordField.js.map +1 -1
- package/lib/components/{PasswordField.module.scss → PasswordField.module.css} +2 -7
- package/lib/components/Popover.js +1 -1
- package/lib/components/Popover.js.map +1 -1
- package/lib/components/Popover.module.css +8 -0
- package/lib/components/Radio.js +1 -1
- package/lib/components/Radio.js.map +1 -1
- package/lib/components/Radio.module.css +122 -0
- package/lib/components/RadioGroup.js +1 -1
- package/lib/components/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup.module.css +31 -0
- package/lib/components/SegmentedControl.d.ts +1 -3
- package/lib/components/SegmentedControl.js +7 -5
- package/lib/components/SegmentedControl.js.map +1 -1
- package/lib/components/SegmentedControl.module.css +94 -0
- package/lib/components/Select/CheckableSelectField.js +2 -2
- package/lib/components/Select/CheckableSelectField.js.map +1 -1
- package/lib/components/Select/MultiSelectField.js +1 -1
- package/lib/components/Select/MultiSelectField.js.map +1 -1
- package/lib/components/Select/SelectField.js +1 -1
- package/lib/components/Select/SelectField.js.map +1 -1
- package/lib/components/Slider.js +1 -1
- package/lib/components/Slider.js.map +1 -1
- package/lib/components/Slider.module.css +315 -0
- package/lib/components/Table/Cell.js +1 -1
- package/lib/components/Table/Cell.js.map +1 -1
- package/lib/components/Table/{Cell.module.scss → Cell.module.css} +12 -15
- package/lib/components/Table/EnhancedRenderers.js +1 -1
- package/lib/components/Table/EnhancedRenderers.js.map +1 -1
- package/lib/components/Table/Header.js +1 -1
- package/lib/components/Table/Header.js.map +1 -1
- package/lib/components/Table/Header.module.css +129 -0
- package/lib/components/Table/Row.js +1 -1
- package/lib/components/Table/Row.js.map +1 -1
- package/lib/components/Table/Row.module.css +76 -0
- package/lib/components/Table/Table.d.ts +2 -1
- package/lib/components/Table/Table.js +7 -7
- package/lib/components/Table/Table.js.map +1 -1
- package/lib/components/Table/Table.module.css +28 -0
- package/lib/components/Table/TableContent.js +1 -1
- package/lib/components/Table/TableContent.js.map +1 -1
- package/lib/components/Table/features/columnsSelection/CellCopyablePopover.js +1 -1
- package/lib/components/Table/features/columnsSelection/CellCopyablePopover.js.map +1 -1
- package/lib/components/Table/features/columnsSelection/{CellCopyablePopover.module.scss → CellCopyablePopover.module.css} +1 -3
- package/lib/components/Table/features/columnsSelection/ContextMenu/ContextMenu.js +1 -1
- package/lib/components/Table/features/columnsSelection/ContextMenu/ContextMenu.js.map +1 -1
- package/lib/components/Terminal.js +1 -1
- package/lib/components/Terminal.js.map +1 -1
- package/lib/components/Terminal.module.css +123 -0
- package/lib/components/TextArea.d.ts +0 -2
- package/lib/components/TextArea.js +2 -2
- package/lib/components/TextArea.js.map +1 -1
- package/lib/components/TextField.d.ts +0 -2
- package/lib/components/TextField.js +5 -6
- package/lib/components/TextField.js.map +1 -1
- package/lib/components/TextField.module.css +5 -0
- package/lib/components/TimeField.js +3 -3
- package/lib/components/TimeField.js.map +1 -1
- package/lib/components/Toast/Toast.d.ts +15 -0
- package/lib/components/Toast/Toast.js +28 -0
- package/lib/components/Toast/Toast.js.map +1 -0
- package/lib/components/Toast/Toast.module.css +98 -0
- package/lib/components/Toast/index.d.ts +4 -0
- package/lib/components/Toast/index.js +5 -0
- package/lib/components/Toast/index.js.map +1 -0
- package/lib/components/TruncatedText.js +1 -1
- package/lib/components/TruncatedText.js.map +1 -1
- package/lib/components/TruncatedText.module.css +14 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/old/Alert.d.ts +33 -0
- package/lib/old/Alert.js +51 -0
- package/lib/old/Alert.js.map +1 -0
- package/lib/old/AutocompleteField.js +1 -1
- package/lib/old/AutocompleteField.js.map +1 -1
- package/lib/old/Notification.d.ts +25 -0
- package/lib/old/Notification.js +39 -0
- package/lib/old/Notification.js.map +1 -0
- package/lib/old/NumberField.js +3 -3
- package/lib/old/NumberField.js.map +1 -1
- package/lib/old/PasswordField.d.ts +1 -2
- package/lib/old/PasswordField.js +1 -1
- package/lib/old/PasswordField.js.map +1 -1
- package/lib/old/Select/MultiSelectField.js +1 -3
- package/lib/old/Select/MultiSelectField.js.map +1 -1
- package/lib/old/Select/SelectField.js +1 -1
- package/lib/old/Select/SelectField.js.map +1 -1
- package/lib/old/TextArea.js +2 -2
- package/lib/old/TextArea.js.map +1 -1
- package/lib/old/TextField.js +2 -2
- package/lib/old/TextField.js.map +1 -1
- package/lib/{components → old}/Toast.js +3 -3
- package/lib/old/Toast.js.map +1 -0
- package/lib/old/index.d.ts +7 -0
- package/lib/old/index.js +4 -0
- package/lib/old/index.js.map +1 -1
- package/lib/utils/styleConstants.d.ts +13 -0
- package/lib/utils/styleConstants.js +14 -0
- package/lib/utils/styleConstants.js.map +1 -0
- package/package.json +2 -1
- package/styles/variables.css +24 -0
- package/lib/components/AppHeader/AppHeader.module.scss +0 -29
- package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss +0 -20
- package/lib/components/AppHeader/EnvironmentBadge/EnvironmentBadge.module.scss +0 -13
- package/lib/components/AppHeader/SelectCluster/SelectCluster.module.scss +0 -101
- package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.module.scss +0 -13
- package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.module.scss +0 -58
- package/lib/components/Calendar/Calendar.module.scss +0 -185
- package/lib/components/Calendar/CalendarRange.module.scss +0 -21
- package/lib/components/Card.module.scss +0 -92
- package/lib/components/Carousel.module.scss +0 -43
- package/lib/components/ContextMenu.module.scss +0 -37
- package/lib/components/EmptyState.module.scss +0 -87
- package/lib/components/Error.module.scss +0 -12
- package/lib/components/FieldHeader.module.scss +0 -20
- package/lib/components/Help.module.scss +0 -9
- package/lib/components/Icon.module.scss +0 -33
- package/lib/components/Label.module.scss +0 -12
- package/lib/components/Link.module.scss +0 -64
- package/lib/components/Loader.module.scss +0 -74
- package/lib/components/NumberBadge.module.scss +0 -13
- package/lib/components/Overlay.module.scss +0 -108
- package/lib/components/Pagination.module.scss +0 -117
- package/lib/components/Popover.module.scss +0 -12
- package/lib/components/Radio.module.scss +0 -112
- package/lib/components/RadioGroup.module.scss +0 -21
- package/lib/components/SegmentedControl.module.scss +0 -81
- package/lib/components/Slider.module.scss +0 -277
- package/lib/components/Table/Header.module.scss +0 -128
- package/lib/components/Table/Row.module.scss +0 -59
- package/lib/components/Table/Table.module.scss +0 -31
- package/lib/components/Terminal.module.scss +0 -109
- package/lib/components/Toast.js.map +0 -1
- package/lib/components/Tooltip.module.scss +0 -45
- package/lib/components/TruncatedText.module.scss +0 -9
- package/styles/constants/export.module.scss +0 -8
- /package/lib/components/Table/{TableContent.module.scss → TableContent.module.css} +0 -0
- /package/lib/components/Table/features/columnsSelection/ContextMenu/{ContextMenu.module.scss → ContextMenu.module.css} +0 -0
- /package/lib/components/{TimeField.module.scss → TimeField.module.css} +0 -0
- /package/lib/{components/Alert.module.scss → old/AlertLegacy.module.scss} +0 -0
- /package/lib/{components/Notification.module.scss → old/NotificationLegacy.module.scss} +0 -0
- /package/lib/{components → old}/Toast.d.ts +0 -0
- /package/lib/{components/Toast.module.scss → old/ToastLegacy.module.scss} +0 -0
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
/* Match TextField */
|
|
3
|
+
font-family: var(--hive-font-family-text);
|
|
4
|
+
font-size: var(--hive-font-size-body-small);
|
|
5
|
+
letter-spacing: var(--hive-letter-spacing-body-small);
|
|
6
|
+
line-height: var(--hive-line-height-body-small);
|
|
7
|
+
font-weight: var(--hive-font-weight-text-regular);
|
|
8
|
+
color: var(--hive-color-text);
|
|
9
|
+
padding: calc(var(--hive-grid) * 5);
|
|
10
|
+
background-color: var(--hive-color-neutral-white);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.input {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
align-items: stretch;
|
|
17
|
+
margin: 0;
|
|
18
|
+
margin-bottom: calc(var(--hive-grid) * 3);
|
|
19
|
+
|
|
20
|
+
> input {
|
|
21
|
+
flex: 1 1 auto;
|
|
22
|
+
min-width: 0;
|
|
23
|
+
border: none;
|
|
24
|
+
border-bottom: var(--hive-outline-width) solid var(--hive-color-neutral);
|
|
25
|
+
padding: 0;
|
|
26
|
+
margin-bottom: var(--hive-grid);
|
|
27
|
+
outline: none;
|
|
28
|
+
background-color: transparent;
|
|
29
|
+
color: var(--hive-color-text);
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
font-size: inherit;
|
|
32
|
+
line-height: inherit;
|
|
33
|
+
letter-spacing: inherit;
|
|
34
|
+
|
|
35
|
+
&.blank {
|
|
36
|
+
border-bottom-color: transparent;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:hover,
|
|
40
|
+
&.hover {
|
|
41
|
+
border-bottom-color: var(--hive-color-text);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:focus-visible,
|
|
45
|
+
&.focus {
|
|
46
|
+
/* Do not remove outline for high-contrast modes */
|
|
47
|
+
/* https://stackoverflow.com/a/52616313 */
|
|
48
|
+
outline: transparent solid var(--hive-outline-width);
|
|
49
|
+
border-bottom-color: var(--hive-color-accessibility-outline);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:disabled {
|
|
53
|
+
color: var(--hive-color-text-secondary);
|
|
54
|
+
background-color: transparent;
|
|
55
|
+
border-bottom-color: var(--hive-color-neutral);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&:read-only {
|
|
59
|
+
border-bottom-color: var(--hive-color-neutral);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.welcome {
|
|
65
|
+
font-family: var(--hive-font-family-text);
|
|
66
|
+
font-size: var(--hive-font-size-body-small);
|
|
67
|
+
letter-spacing: var(--hive-letter-spacing-body-small);
|
|
68
|
+
line-height: var(--hive-line-height-body-small);
|
|
69
|
+
font-weight: var(--hive-font-weight-text-bold);
|
|
70
|
+
margin: 0;
|
|
71
|
+
margin-bottom: calc(var(--hive-grid) * 5);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.commandRes {
|
|
75
|
+
color: var(--hive-color-success-darkest);
|
|
76
|
+
margin: 0;
|
|
77
|
+
margin-bottom: calc(var(--hive-grid) * 3);
|
|
78
|
+
|
|
79
|
+
> p {
|
|
80
|
+
margin: 0;
|
|
81
|
+
margin-bottom: var(--hive-grid);
|
|
82
|
+
white-space: break-spaces;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.commandError {
|
|
87
|
+
color: var(--hive-color-error-dark);
|
|
88
|
+
margin: 0;
|
|
89
|
+
margin-bottom: calc(var(--hive-grid) * 3);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.loading {
|
|
93
|
+
margin: 0;
|
|
94
|
+
margin-bottom: calc(var(--hive-grid) * 3);
|
|
95
|
+
position: relative;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.loadingA11yText {
|
|
99
|
+
position: absolute;
|
|
100
|
+
width: 1px;
|
|
101
|
+
height: 1px;
|
|
102
|
+
padding: 0;
|
|
103
|
+
margin: -1px;
|
|
104
|
+
clip: rect(0 0 0 0);
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
border: 0;
|
|
107
|
+
white-space: nowrap;
|
|
108
|
+
top: 1px;
|
|
109
|
+
left: 1px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.terminalIcon {
|
|
113
|
+
margin-right: calc(var(--hive-grid) * 3);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.prompt {
|
|
117
|
+
font-family: var(--hive-font-family-text);
|
|
118
|
+
font-size: var(--hive-font-size-body-small);
|
|
119
|
+
letter-spacing: var(--hive-letter-spacing-body-small);
|
|
120
|
+
line-height: var(--hive-line-height-body-small);
|
|
121
|
+
font-weight: var(--hive-font-weight-text-bold);
|
|
122
|
+
margin-right: var(--hive-grid);
|
|
123
|
+
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ChangeEvent, FC, FocusEvent } from 'react';
|
|
2
2
|
import { DataTestProp } from '../helpers/types';
|
|
3
3
|
import { FieldHeaderProps } from './FieldHeader';
|
|
4
|
-
export type TextAreaSize = 'medium' | 'small';
|
|
5
4
|
export type TextAreaCoreProps = {
|
|
6
5
|
name: string;
|
|
7
6
|
value?: string;
|
|
@@ -13,7 +12,6 @@ export type TextAreaExtraProps = {
|
|
|
13
12
|
textareaClassName?: string;
|
|
14
13
|
errorClassName?: string;
|
|
15
14
|
resizable?: boolean;
|
|
16
|
-
size?: TextAreaSize;
|
|
17
15
|
} & Partial<Pick<HTMLTextAreaElement, 'className' | 'disabled' | 'placeholder' | 'required' | 'rows'>> & Omit<FieldHeaderProps, 'id'>;
|
|
18
16
|
export type TextAreaProps = TextAreaCoreProps & TextAreaExtraProps & DataTestProp;
|
|
19
17
|
export declare const TextArea: FC<TextAreaProps>;
|
|
@@ -5,7 +5,7 @@ import { Error, errorId } from './Error';
|
|
|
5
5
|
import { FieldHeader } from './FieldHeader';
|
|
6
6
|
import styles from './TextArea.module.css';
|
|
7
7
|
export const TextArea = (props) => {
|
|
8
|
-
const { error, label, name, onBlur, onChange, placeholder, value, disabled, className, labelClassName, textareaClassName, errorClassName, required, resizable = true, helperText,
|
|
8
|
+
const { error, label, name, onBlur, onChange, placeholder, value, disabled, className, labelClassName, textareaClassName, errorClassName, required, resizable = true, helperText, 'data-test': dataTest = 'textarea', ...htmlAttrs } = props;
|
|
9
9
|
const id = useUID();
|
|
10
10
|
const textareaRef = useRef(null);
|
|
11
11
|
return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
|
|
@@ -13,7 +13,7 @@ export const TextArea = (props) => {
|
|
|
13
13
|
[styles.hasError]: error,
|
|
14
14
|
[styles.withError]: 'error' in props,
|
|
15
15
|
}, className) },
|
|
16
|
-
React.createElement(FieldHeader, { "data-test": dataTest, label: label, id: id, helperText: helperText, labelClassName: labelClassName
|
|
16
|
+
React.createElement(FieldHeader, { "data-test": dataTest, label: label, id: id, helperText: helperText, labelClassName: labelClassName }),
|
|
17
17
|
React.createElement("div", { className: styles.textAreaContainer },
|
|
18
18
|
React.createElement("div", { className: styles.textAreaWrapper },
|
|
19
19
|
React.createElement("textarea", { ref: textareaRef, "aria-invalid": !!error, "aria-required": required, "aria-errormessage": error && errorId(id), id: id, className: cn({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,MAAM,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,MAAM,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAmB1C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,UAAU,EACV,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;IAErD,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;SACrC,EACD,SAAS,CACV;QAED,oBAAC,WAAW,iBAAY,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,GAAI;QAClH,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB;YACtC,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe;gBACpC,kCACE,GAAG,EAAE,WAAW,kBACF,CAAC,CAAC,KAAK,mBACN,QAAQ,uBACJ,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,EACvC,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,EAAE,CACX;wBACE,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,SAAS;qBAClC,EACD,iBAAiB,CAClB,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,GACb;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CACpC,CACF;QACN,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChI,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -4,7 +4,6 @@ import { DataTestProp } from '../helpers/types';
|
|
|
4
4
|
import { FieldHeaderProps } from './FieldHeader';
|
|
5
5
|
import { IconSize } from './Icon';
|
|
6
6
|
import { TooltipSide } from './Tooltip';
|
|
7
|
-
export type TextFieldSize = 'medium' | 'small' | 'large';
|
|
8
7
|
export type TextFieldVariant = 'primary' | 'secondary';
|
|
9
8
|
type TextFieldTrailingIcon = {
|
|
10
9
|
inputTrailingIcon: IconType;
|
|
@@ -26,7 +25,6 @@ type TextFieldCoreProps<T extends TextFieldTypes> = {
|
|
|
26
25
|
};
|
|
27
26
|
export type TextFieldExtraProps<T extends TextFieldTypes> = {
|
|
28
27
|
ariaLabel?: string;
|
|
29
|
-
size?: TextFieldSize;
|
|
30
28
|
variant?: TextFieldVariant;
|
|
31
29
|
iconSize?: IconSize;
|
|
32
30
|
className?: string;
|
|
@@ -17,7 +17,7 @@ import styles from './TextField.module.css';
|
|
|
17
17
|
* Text fields accept several types of data and can impose various restrictions to ensure you get what you need from users. And help and error guidance to ensure they know what to enter.
|
|
18
18
|
*
|
|
19
19
|
* ### General Info
|
|
20
|
-
* - Text Field
|
|
20
|
+
* - Text Field uses one compact size in v4.
|
|
21
21
|
* - All the variations can be either with the label, or without label.
|
|
22
22
|
* - Standard label alignment is left-aligned with the field underneath.
|
|
23
23
|
* - If needed, you can use icon on the left side or on the right side inside the Text Input (e.g. Eye icon to show / hide password).
|
|
@@ -26,7 +26,7 @@ import styles from './TextField.module.css';
|
|
|
26
26
|
* Use a text input when the expected user input is a single line of text.
|
|
27
27
|
*/
|
|
28
28
|
const TextFieldInternal = (props, ref) => {
|
|
29
|
-
const { 'data-test': dataTest = 'text-field', ariaLabel, className, disabled, error, errorClassName, helperText, helperTextTooltipWordBreak, id: explicitId, inputClassName, inputContainerChild, inputContainerClassName, inputBorderOverlayClassName, inputIcon, inputTrailingIcon, inputTrailingIconLabel, label, labelClassName, showAriaLabel = false, name,
|
|
29
|
+
const { 'data-test': dataTest = 'text-field', ariaLabel, className, disabled, error, errorClassName, helperText, helperTextTooltipWordBreak, id: explicitId, inputClassName, inputContainerChild, inputContainerClassName, inputBorderOverlayClassName, inputIcon, inputTrailingIcon, inputTrailingIconLabel, label, labelClassName, showAriaLabel = false, name, variant = 'primary', onBlur, onFocus, onChange, onKeyDown, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = 'small', errorTooltipPlacement = 'top', children, containerRef, ...htmlAttrs } = props;
|
|
30
30
|
const autoId = useUID();
|
|
31
31
|
const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
|
|
32
32
|
const inputRef = useRef(null);
|
|
@@ -39,14 +39,13 @@ const TextFieldInternal = (props, ref) => {
|
|
|
39
39
|
};
|
|
40
40
|
return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
|
|
41
41
|
[styles.withError]: 'error' in props,
|
|
42
|
-
[styles.small]:
|
|
43
|
-
[styles.large]: size === 'large',
|
|
42
|
+
[styles.small]: true,
|
|
44
43
|
[styles.disabled]: disabled,
|
|
45
44
|
[styles.hasError]: error,
|
|
46
45
|
[styles.withIcon]: inputIcon,
|
|
47
46
|
[styles.empty]: value === undefined,
|
|
48
47
|
}, className) },
|
|
49
|
-
React.createElement(FieldHeader, { id: id,
|
|
48
|
+
React.createElement(FieldHeader, { id: id, label: label, variant: variant, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName, "data-test": `${dataTest}-header`, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
|
|
50
49
|
React.createElement("div", { className: styles.inputBlock },
|
|
51
50
|
React.createElement("div", { ref: containerRef, className: cn(styles.inputContainer, inputContainerClassName) },
|
|
52
51
|
React.createElement("input", { type: type, id: id, ref: mergedRef, value: value !== null && value !== void 0 ? value : '', name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly, onKeyDown: onKeyDown, onClick: onClick, "aria-label": showAriaLabel ? ariaLabel || label : undefined, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id), disabled: disabled, placeholder: placeholder, className: cn(inputClassName, {
|
|
@@ -54,7 +53,7 @@ const TextFieldInternal = (props, ref) => {
|
|
|
54
53
|
}), ...htmlAttrs }),
|
|
55
54
|
React.createElement("div", { className: cn(styles.borderOverlay, inputBorderOverlayClassName) }),
|
|
56
55
|
inputIcon && (React.createElement(Icon, { icon: inputIcon, ariaLabel: label, containerClassName: cn(styles.inputIconContainer, styles.inputLeftIconContainer), className: styles.inputIcon, size: "small" })),
|
|
57
|
-
clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, variant: "ghost",
|
|
56
|
+
clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, variant: "ghost", ariaLabel: "Clear field", onClick: handleClear, className: styles.clearButton, "data-test": dataTest ? `${dataTest}-clear` : undefined })),
|
|
58
57
|
inputContainerChild,
|
|
59
58
|
inputTrailingIcon && inputTrailingIconLabel && (React.createElement(Icon, { icon: inputTrailingIcon, ariaLabel: inputTrailingIconLabel, containerClassName: cn(styles.inputIconContainer, styles.inputTrailingIconContainer), className: styles.inputIconTrailing, size: iconSize }))),
|
|
60
59
|
children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,EAAE,EAQZ,UAAU,EACV,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAGxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,OAAO,MAAM,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,EAAE,EAQZ,UAAU,EACV,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAGxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAkD3C;;;;;;;;;;;;;GAaG;AACH,MAAM,iBAAiB,GAAG,CAA2B,KAAwB,EAAE,GAA2B,EAAE,EAAE;IAC5G,MAAM,EACJ,WAAW,EAAE,QAAQ,GAAG,YAAY,EACpC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,UAAU,EACV,0BAA0B,EAC1B,EAAE,EAAE,UAAU,EACd,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,2BAA2B,EAC3B,SAAS,EACT,iBAAiB,EACjB,sBAAsB,EACtB,KAAK,EACL,cAAc,EACd,aAAa,GAAG,KAAK,EACrB,IAAI,EACJ,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAQ,GAAG,OAAO,EAClB,qBAAqB,GAAG,KAAK,EAC7B,QAAQ,EACR,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAC/B,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAA;IAEtD,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAC/F,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE7D,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,wBAAwB,CAAC,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;QAChD,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;YACpC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI;YACpB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,SAAS;YAC5B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,SAAS;SACpC,EACD,SAAS,CACV;QAED,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,eACnB,GAAG,QAAQ,SAAS,EAC/B,0BAA0B,EAAE,0BAA0B,GACtD;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU;YAC/B,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,uBAAuB,CAAC;gBACnF,+BACE,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,gBACJ,aAAa,CAAC,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,SAAS,kBAE5C,CAAC,CAAC,KAAK,mBACN,QAAQ,sBACL,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,EACvC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE;wBAC5B,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,iBAAiB;qBACzC,CAAC,KACE,SAAS,GACb;gBACF,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,2BAA2B,CAAC,GAAI;gBACxE,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,KAAK,EAChB,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAChF,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,IAAI,EAAC,OAAO,GACZ,CACH;gBACA,SAAS,IAAI,CAAC,QAAQ,IAAI,UAAU,IAAI,CACvC,oBAAC,UAAU,IACT,IAAI,EAAE,CAAC,EACP,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,CAAC,WAAW,eAClB,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,SAAS,GACrD,CACH;gBACA,mBAAmB;gBACnB,iBAAiB,IAAI,sBAAsB,IAAI,CAC9C,oBAAC,IAAI,IACH,IAAI,EAAE,iBAAiB,EACvB,SAAS,EAAE,sBAAsB,EACjC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,0BAA0B,CAAC,EACpF,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACnC,IAAI,EAAE,QAAQ,GACd,CACH,CACG;YACL,QAAQ,CACL;QACN,oBAAC,KAAK,IACJ,SAAS,QACT,OAAO,EAAE,EAAE,EACX,KAAK,EAAE,KAAK,eACD,GAAG,QAAQ,QAAQ,EAC9B,gBAAgB,EAAE,qBAAqB,EACvC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,GACpD,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;AAEtD,MAAM,CAAC,MAAM,SAAS,GAAG,CAA2B,EAAE,IAAI,EAAE,GAAG,KAAK,EAAwD,EAAE,EAAE,CAAC,CAC/H,oBAAC,gBAAgB,IAAC,GAAG,EAAE,IAAI,KAAM,KAAK,GAAI,CAC3C,CAAA"}
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
flex: 1 1 auto;
|
|
19
19
|
display: flex;
|
|
20
20
|
flex-direction: row;
|
|
21
|
+
align-items: center;
|
|
21
22
|
box-sizing: border-box;
|
|
22
23
|
height: calc(var(--hive-grid) * 9);
|
|
23
24
|
background-color: var(--hive-color-neutral-white-v4);
|
|
@@ -98,9 +99,13 @@
|
|
|
98
99
|
}
|
|
99
100
|
|
|
100
101
|
.container .clearButton {
|
|
102
|
+
--button-size: calc(var(--hive-grid) * 6);
|
|
103
|
+
|
|
101
104
|
display: inline-flex;
|
|
105
|
+
flex-shrink: 0;
|
|
102
106
|
align-items: center;
|
|
103
107
|
margin-right: calc(var(--hive-grid) * 1.5);
|
|
108
|
+
border-radius: var(--hive-border-radius-pill);
|
|
104
109
|
}
|
|
105
110
|
|
|
106
111
|
.container.small .inputContainer {
|
|
@@ -2,14 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { useUID } from 'react-uid';
|
|
4
4
|
import SimpleTimeField from 'react-simple-timefield';
|
|
5
|
-
import styles from './TimeField.module.
|
|
5
|
+
import styles from './TimeField.module.css';
|
|
6
6
|
import { TextField } from './TextField';
|
|
7
7
|
export const TimeField = (props) => {
|
|
8
|
-
const { 'data-test': dataTest = 'time-field', className, disabled, error, errorClassName, id: explicitId, inputClassName, label, labelClassName, name, onBlur, onChange, required, seconds = false, value, helperText,
|
|
8
|
+
const { 'data-test': dataTest = 'time-field', className, disabled, error, errorClassName, id: explicitId, inputClassName, label, labelClassName, name, onBlur, onChange, required, seconds = false, value, helperText, showAriaLabel, ...rest } = props;
|
|
9
9
|
// Use an auto generated id if it's not set explicitly
|
|
10
10
|
const autoId = useUID();
|
|
11
11
|
const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
|
|
12
12
|
return (React.createElement("div", { className: cn(styles.container, className) },
|
|
13
|
-
React.createElement(SimpleTimeField, { showSeconds: seconds, input: React.createElement(TextField, { name: name, id: id, label: label, error: error, onChange: onChange, errorClassName: errorClassName, inputClassName: inputClassName, labelClassName: labelClassName, onBlur: onBlur,
|
|
13
|
+
React.createElement(SimpleTimeField, { showSeconds: seconds, input: React.createElement(TextField, { name: name, id: id, label: label, error: error, onChange: onChange, errorClassName: errorClassName, inputClassName: inputClassName, labelClassName: labelClassName, onBlur: onBlur, required: required, disabled: disabled, showAriaLabel: showAriaLabel, helperText: helperText, "data-test": dataTest, ...rest }), onChange: onChange, value: value })));
|
|
14
14
|
};
|
|
15
15
|
//# sourceMappingURL=TimeField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../../src/components/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAKpD,OAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../../src/components/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAKpD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAmBvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,EACJ,WAAW,EAAE,QAAQ,GAAG,YAAY,EACpC,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,EAAE,EAAE,UAAU,EACd,cAAc,EACd,KAAK,EACL,cAAc,EACd,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,UAAU,EACV,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,sDAAsD;IACtD,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAE/B,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC7C,oBAAC,eAAe,IACd,WAAW,EAAE,OAAO,EACpB,KAAK,EACH,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,eACX,QAAQ,KACf,IAAI,GACR,EAEJ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { FC, ReactNode } from 'react';
|
|
2
|
+
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
3
|
+
export type ToastVariant = 'success' | 'error' | 'warn' | 'info';
|
|
4
|
+
export declare const ToastProvider: React.FC<ToastPrimitive.ToastProviderProps>;
|
|
5
|
+
export declare const ToastViewport: React.ForwardRefExoticComponent<ToastPrimitive.ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
|
|
6
|
+
export type ToastProps = {
|
|
7
|
+
content: ReactNode;
|
|
8
|
+
variant?: ToastVariant;
|
|
9
|
+
id?: string;
|
|
10
|
+
/** Duration in ms before auto-dismiss. Pass `Infinity` to keep open until manually closed. Default: `5000`. */
|
|
11
|
+
duration?: number;
|
|
12
|
+
open?: boolean;
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
};
|
|
15
|
+
export declare const Toast: FC<ToastProps>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'react-feather';
|
|
5
|
+
import styles from './Toast.module.css';
|
|
6
|
+
const VARIANT_CONFIG = {
|
|
7
|
+
success: { Icon: CheckCircle, ariaLabel: 'Success' },
|
|
8
|
+
error: { Icon: XCircle, ariaLabel: 'Error' },
|
|
9
|
+
warn: { Icon: AlertTriangle, ariaLabel: 'Warning' },
|
|
10
|
+
info: { Icon: Info, ariaLabel: 'Info' },
|
|
11
|
+
};
|
|
12
|
+
export const ToastProvider = ToastPrimitive.Provider;
|
|
13
|
+
export const ToastViewport = ToastPrimitive.Viewport;
|
|
14
|
+
let _idCounter = 0;
|
|
15
|
+
export const Toast = ({ id = `toast-${++_idCounter}`, variant = 'info', content, duration = 5000, open = true, onOpenChange = () => undefined, }) => {
|
|
16
|
+
const { Icon, ariaLabel } = VARIANT_CONFIG[variant];
|
|
17
|
+
const radixDuration = duration === Infinity ? 2147483647 : duration;
|
|
18
|
+
return (React.createElement(ToastPrimitive.Root, { key: id, open: open, onOpenChange: onOpenChange, duration: radixDuration, className: cn(styles.root, styles[variant]) },
|
|
19
|
+
React.createElement("div", { className: styles.bar }),
|
|
20
|
+
React.createElement("div", { className: styles.body },
|
|
21
|
+
React.createElement(Icon, { size: 18, className: styles.icon, "aria-hidden": true }),
|
|
22
|
+
React.createElement(ToastPrimitive.Description, { asChild: true },
|
|
23
|
+
React.createElement("div", { className: styles.content }, content)),
|
|
24
|
+
React.createElement(ToastPrimitive.Action, { altText: "Close", asChild: true },
|
|
25
|
+
React.createElement("button", { className: styles.closeButton, onClick: () => onOpenChange(false), "aria-label": `Close ${ariaLabel} notification` },
|
|
26
|
+
React.createElement(X, { size: 16 }))))));
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAE5E,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAWvC,MAAM,cAAc,GAAwC;IAC1D,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE;IACpD,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE;IAC5C,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE;IACnD,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;CACxC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,cAAc,CAAC,QAAQ,CAAA;AACpD,MAAM,CAAC,MAAM,aAAa,GAAG,cAAc,CAAC,QAAQ,CAAA;AAEpD,IAAI,UAAU,GAAG,CAAC,CAAA;AAYlB,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,EAAE,GAAG,SAAS,EAAE,UAAU,EAAE,EAC5B,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,GAAG,EAAE,CAAC,SAAS,GAC/B,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEnE,OAAO,CACL,oBAAC,cAAc,CAAC,IAAI,IAClB,GAAG,EAAE,EAAE,EACP,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;QAE3C,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI;QAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACzB,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,wBAAgB;YACtD,oBAAC,cAAc,CAAC,WAAW,IAAC,OAAO;gBACjC,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACpB;YAC7B,oBAAC,cAAc,CAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO;gBAC5C,gCAAQ,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,gBAAc,SAAS,SAAS,eAAe;oBACtH,oBAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,CACR,CACa,CACpB,CACc,CACvB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
@keyframes slideIn {
|
|
2
|
+
from {
|
|
3
|
+
transform: translateX(calc(100% + 1rem));
|
|
4
|
+
opacity: 0;
|
|
5
|
+
}
|
|
6
|
+
to {
|
|
7
|
+
transform: translateX(0);
|
|
8
|
+
opacity: 1;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@keyframes fadeOut {
|
|
13
|
+
from {
|
|
14
|
+
opacity: 1;
|
|
15
|
+
}
|
|
16
|
+
to {
|
|
17
|
+
opacity: 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.root {
|
|
22
|
+
--toast-color: var(--hive-color-text);
|
|
23
|
+
background-color: var(--hive-color-neutral-white);
|
|
24
|
+
border-radius: var(--hive-border-radius);
|
|
25
|
+
box-shadow:
|
|
26
|
+
0 4px 6px -1px oklch(0 0 0 / 0.1),
|
|
27
|
+
0 2px 4px -2px oklch(0 0 0 / 0.06);
|
|
28
|
+
display: flex;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
width: 360px;
|
|
31
|
+
max-width: 100vw;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.success {
|
|
35
|
+
--toast-color: var(--hive-color-success-darkest);
|
|
36
|
+
}
|
|
37
|
+
.error {
|
|
38
|
+
--toast-color: var(--hive-color-error);
|
|
39
|
+
}
|
|
40
|
+
.warn {
|
|
41
|
+
--toast-color: var(--hive-color-warning-darkest);
|
|
42
|
+
}
|
|
43
|
+
.info {
|
|
44
|
+
--toast-color: var(--hive-color-info-darkest);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.root[data-state='open'] {
|
|
48
|
+
animation: slideIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.root[data-state='closed'] {
|
|
52
|
+
animation: fadeOut 150ms ease-in forwards;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.bar {
|
|
56
|
+
width: 4px;
|
|
57
|
+
flex-shrink: 0;
|
|
58
|
+
background-color: var(--toast-color);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.body {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: flex-start;
|
|
64
|
+
gap: calc(var(--hive-grid) * 3);
|
|
65
|
+
padding: calc(var(--hive-grid) * 3);
|
|
66
|
+
flex: 1;
|
|
67
|
+
min-width: 0;
|
|
68
|
+
background-color: lab(from var(--toast-color) 95% a b);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.icon {
|
|
72
|
+
flex-shrink: 0;
|
|
73
|
+
margin-top: 2px;
|
|
74
|
+
color: var(--toast-color);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.content {
|
|
78
|
+
flex: 1;
|
|
79
|
+
font-size: var(--hive-font-size-body-small);
|
|
80
|
+
line-height: 1.4;
|
|
81
|
+
word-break: break-word;
|
|
82
|
+
color: var(--hive-color-text);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.closeButton {
|
|
86
|
+
flex-shrink: 0;
|
|
87
|
+
background: none;
|
|
88
|
+
border: none;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
padding: 0;
|
|
91
|
+
color: var(--hive-color-text-subdued);
|
|
92
|
+
line-height: 0;
|
|
93
|
+
transition: color 150ms ease;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.closeButton:hover {
|
|
97
|
+
color: var(--hive-color-text);
|
|
98
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { Toast, ToastProvider, ToastViewport } from './Toast';
|
|
2
|
+
// Re-exported for backward compat with Alert and other consumers of the legacy types.
|
|
3
|
+
// These will be removed in v5 — import from '@hazelcast/ui/old' instead.
|
|
4
|
+
export { ToastIcon } from '../../old/Toast';
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG7D,sFAAsF;AACtF,yEAAyE;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA"}
|
|
@@ -3,7 +3,7 @@ import cn from 'classnames';
|
|
|
3
3
|
import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
4
4
|
import { useUID } from 'react-uid';
|
|
5
5
|
import { Tooltip } from './Tooltip';
|
|
6
|
-
import styles from './TruncatedText.module.
|
|
6
|
+
import styles from './TruncatedText.module.css';
|
|
7
7
|
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', multiline, tooltipClassName, 'data-test': dataTest, }) => {
|
|
8
8
|
const textRef = useRef(null);
|
|
9
9
|
const [tooltip, setTooltip] = useState();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAEhD,OAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAEhD,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAa/C,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,SAAS,EACT,gBAAgB,EAChB,WAAW,EAAE,QAAQ,GACtB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC/D,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB;QACjH,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;YAClG,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
.truncatedText {
|
|
2
|
+
white-space: nowrap;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
text-overflow: ellipsis;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.multiline {
|
|
8
|
+
@supports (-webkit-line-clamp: 2) {
|
|
9
|
+
white-space: normal;
|
|
10
|
+
display: -webkit-box;
|
|
11
|
+
-webkit-line-clamp: 2;
|
|
12
|
+
-webkit-box-orient: vertical;
|
|
13
|
+
}
|
|
14
|
+
}
|
package/lib/index.d.ts
CHANGED
|
@@ -46,7 +46,8 @@ export { TextArea } from './components/TextArea';
|
|
|
46
46
|
export { TextAreaFormik } from './components/TextAreaFormik';
|
|
47
47
|
export { TextField } from './components/TextField';
|
|
48
48
|
export { TextFieldFormik } from './components/TextFieldFormik';
|
|
49
|
-
export { Toast } from './components/Toast';
|
|
49
|
+
export { Toast, ToastProvider, ToastViewport } from './components/Toast';
|
|
50
|
+
export type { ToastProps, ToastVariant } from './components/Toast';
|
|
50
51
|
export { Toggle } from './components/Toggle';
|
|
51
52
|
export { ToggleFormik } from './components/ToggleFormik';
|
|
52
53
|
export { Tooltip } from './components/Tooltip';
|
package/lib/index.js
CHANGED
|
@@ -46,7 +46,7 @@ export { TextArea } from './components/TextArea';
|
|
|
46
46
|
export { TextAreaFormik } from './components/TextAreaFormik';
|
|
47
47
|
export { TextField } from './components/TextField';
|
|
48
48
|
export { TextFieldFormik } from './components/TextFieldFormik';
|
|
49
|
-
export { Toast } from './components/Toast';
|
|
49
|
+
export { Toast, ToastProvider, ToastViewport } from './components/Toast';
|
|
50
50
|
export { Toggle } from './components/Toggle';
|
|
51
51
|
export { ToggleFormik } from './components/ToggleFormik';
|
|
52
52
|
export { Tooltip } from './components/Tooltip';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React, { FC, ReactNode } from 'react';
|
|
2
|
+
import { LinkProps } from '../components/Link';
|
|
3
|
+
import { IconProps } from '../components/Icon';
|
|
4
|
+
import { ToastType } from './Toast';
|
|
5
|
+
import { PartialRequired } from '../helpers/types';
|
|
6
|
+
type AlertAccessibleActionButtonIconProps = {
|
|
7
|
+
icon: IconProps['icon'];
|
|
8
|
+
ariaLabel: string;
|
|
9
|
+
} | {
|
|
10
|
+
icon?: never;
|
|
11
|
+
ariaLabel?: never;
|
|
12
|
+
};
|
|
13
|
+
export type AlertActionButton = {
|
|
14
|
+
text: string;
|
|
15
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
16
|
+
} & AlertAccessibleActionButtonIconProps;
|
|
17
|
+
export type AlertActionLink = {
|
|
18
|
+
text: string;
|
|
19
|
+
} & Omit<PartialRequired<LinkProps, 'href'>, 'children' | 'size'>;
|
|
20
|
+
export type AlertAction = AlertActionButton | AlertActionLink;
|
|
21
|
+
export type AlertProps = {
|
|
22
|
+
type: ToastType;
|
|
23
|
+
title?: ReactNode;
|
|
24
|
+
content?: ReactNode;
|
|
25
|
+
actions?: AlertAction[];
|
|
26
|
+
className?: string;
|
|
27
|
+
titleClassName?: string;
|
|
28
|
+
bodyClassName?: string;
|
|
29
|
+
dismissableByEscKey?: boolean;
|
|
30
|
+
closeToast?: (e?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
31
|
+
};
|
|
32
|
+
export declare const Alert: FC<AlertProps>;
|
|
33
|
+
export {};
|
package/lib/old/Alert.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import { ChevronRight, X } from 'react-feather';
|
|
4
|
+
import useKey from 'react-use/lib/useKey';
|
|
5
|
+
import { escKeyFilterPredicate } from '../utils/keyboard';
|
|
6
|
+
import { Link } from '../components/Link';
|
|
7
|
+
import { Button } from '../components/Button';
|
|
8
|
+
import { Icon } from '../components/Icon';
|
|
9
|
+
import { IconButton } from '../components/IconButton';
|
|
10
|
+
import { ToastIcon } from './Toast';
|
|
11
|
+
import styles from './AlertLegacy.module.scss';
|
|
12
|
+
const isAlertActionButton = (action) => action.onClick !== undefined;
|
|
13
|
+
export const Alert = ({ type, title, content, actions, className, dismissableByEscKey = true, closeToast, titleClassName, bodyClassName, }) => {
|
|
14
|
+
const { icon, ariaLabel } = ToastIcon[type];
|
|
15
|
+
const closeByEsc = useCallback((nativeEvent) => {
|
|
16
|
+
if (dismissableByEscKey) {
|
|
17
|
+
closeToast === null || closeToast === void 0 ? void 0 : closeToast();
|
|
18
|
+
nativeEvent.stopImmediatePropagation();
|
|
19
|
+
}
|
|
20
|
+
}, [closeToast, dismissableByEscKey]);
|
|
21
|
+
useKey(escKeyFilterPredicate, closeByEsc, { options: { once: true } }, [closeByEsc, dismissableByEscKey]);
|
|
22
|
+
return (React.createElement("div", { "data-test": "alert", className: cn(styles.alert, {
|
|
23
|
+
[styles.success]: type === 'success',
|
|
24
|
+
[styles.info]: type === 'info',
|
|
25
|
+
[styles.warning]: type === 'warning',
|
|
26
|
+
[styles.critical]: type === 'critical',
|
|
27
|
+
}, className) },
|
|
28
|
+
React.createElement(Icon, { "data-test": "alert-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
|
|
29
|
+
React.createElement("div", { className: styles.rightSide },
|
|
30
|
+
React.createElement("div", { className: styles.header },
|
|
31
|
+
title && (React.createElement("div", { "data-test": "alert-title", className: cn(styles.title, titleClassName) }, title)),
|
|
32
|
+
!!closeToast && React.createElement(IconButton, { "data-test": "alert-close", variant: "ghost", ariaLabel: "Close icon", icon: X, onClick: closeToast })),
|
|
33
|
+
React.createElement("div", { "data-test": "alert-body", className: cn(styles.body, bodyClassName) },
|
|
34
|
+
content && React.createElement("div", { "data-test": "alert-content" }, content),
|
|
35
|
+
(actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { "data-test": "alert-actions", className: styles.actions }, actions.map((action, aI) => {
|
|
36
|
+
if (isAlertActionButton(action)) {
|
|
37
|
+
const { text, icon, ariaLabel, onClick } = action;
|
|
38
|
+
const iconLeftProps = icon && ariaLabel
|
|
39
|
+
? {
|
|
40
|
+
iconLeft: icon,
|
|
41
|
+
iconLeftAriaLabel: ariaLabel,
|
|
42
|
+
iconLeftClassName: styles.actionButtonIcon,
|
|
43
|
+
}
|
|
44
|
+
: {};
|
|
45
|
+
return (React.createElement(Button, { key: aI, variant: "ghost", color: "secondary", className: cn(styles.action, styles.actionButton), bodyClassName: styles.actionButtonBody, onClick: onClick, ...iconLeftProps }, text));
|
|
46
|
+
}
|
|
47
|
+
const { text, href, ...props } = action;
|
|
48
|
+
return (React.createElement(Link, { key: aI, href: href, icon: ChevronRight, ariaLabel: "Icon chevron right", className: styles.action, size: "small", ...props }, text));
|
|
49
|
+
}))) : null))));
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=Alert.js.map
|