@carbon/ibm-products 1.5.0 → 1.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (187) hide show
  1. package/css/index-full-carbon.css +389 -139
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +9 -3
  4. package/css/index-full-carbon.min.css.map +1 -0
  5. package/css/index-without-carbon-released-only.css +33 -27
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -0
  9. package/css/index-without-carbon.css +330 -133
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +9 -3
  12. package/css/index-without-carbon.min.css.map +1 -0
  13. package/css/index.css +332 -135
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +9 -3
  16. package/css/index.min.css.map +1 -0
  17. package/es/components/APIKeyModal/APIKeyModal.js +10 -13
  18. package/es/components/ActionBar/ActionBar.js +0 -3
  19. package/es/components/ActionBar/ActionBarItem.js +2 -6
  20. package/es/components/ActionSet/ActionSet.js +11 -13
  21. package/es/components/AddSelect/AddSelect.js +122 -72
  22. package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
  23. package/es/components/AddSelect/AddSelectList.js +94 -0
  24. package/es/components/AddSelect/AddSelectSidebar.js +110 -0
  25. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -5
  26. package/es/components/ButtonMenu/ButtonMenu.js +6 -4
  27. package/es/components/ButtonMenu/ButtonMenuItem.js +1 -2
  28. package/es/components/Card/Card.js +37 -25
  29. package/es/components/Card/CardFooter.js +14 -10
  30. package/es/components/Card/CardHeader.js +8 -6
  31. package/es/components/Cascade/Cascade.js +5 -4
  32. package/es/components/ComboButton/ComboButton.js +0 -4
  33. package/es/components/ComboButton/ComboButtonItem/index.js +0 -5
  34. package/es/components/CreateFullPage/CreateFullPageStep.js +15 -8
  35. package/es/components/CreateModal/CreateModal.js +1 -4
  36. package/es/components/CreateTearsheet/CreateTearsheet.js +10 -11
  37. package/es/components/CreateTearsheet/CreateTearsheetStep.js +18 -14
  38. package/es/components/DataSpreadsheet/DataSpreadsheet.js +414 -0
  39. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +138 -0
  40. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +64 -0
  41. package/es/components/DataSpreadsheet/createActiveCellFn.js +45 -0
  42. package/es/components/DataSpreadsheet/generateData.js +47 -0
  43. package/es/components/DataSpreadsheet/getCellSize.js +30 -0
  44. package/es/components/{CancelableTextEdit → DataSpreadsheet}/index.js +2 -2
  45. package/es/components/EditSidePanel/EditSidePanel.js +9 -10
  46. package/es/components/EmptyStates/EmptyState.js +8 -7
  47. package/es/components/EmptyStates/EmptyStateContent.js +2 -2
  48. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +5 -9
  49. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +5 -9
  50. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +5 -9
  51. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +5 -9
  52. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +5 -9
  53. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +5 -9
  54. package/es/components/ExampleComponent/ExampleComponent.js +12 -13
  55. package/es/components/ExportModal/ExportModal.js +13 -9
  56. package/es/components/ExpressiveCard/ExpressiveCard.js +0 -8
  57. package/es/components/ImportModal/ImportModal.js +7 -5
  58. package/es/components/InlineEdit/InlineEdit.js +256 -88
  59. package/es/components/LoadingBar/LoadingBar.js +13 -17
  60. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -4
  61. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -5
  62. package/es/components/ModifiedTabs/ModifiedTabs.js +24 -18
  63. package/es/components/NotificationsPanel/NotificationsPanel.js +125 -89
  64. package/es/components/OptionsTile/OptionsTile.js +6 -9
  65. package/es/components/PageHeader/PageHeader.js +19 -13
  66. package/es/components/PageHeader/PageHeaderTitle.js +10 -6
  67. package/es/components/ProductiveCard/ProductiveCard.js +23 -12
  68. package/es/components/RemoveModal/RemoveModal.js +0 -3
  69. package/es/components/SidePanel/SidePanel.js +54 -32
  70. package/es/components/TagSet/TagSet.js +13 -9
  71. package/es/components/TagSet/TagSetModal.js +16 -12
  72. package/es/components/TagSet/TagSetOverflow.js +21 -13
  73. package/es/components/Tearsheet/Tearsheet.js +27 -18
  74. package/es/components/Tearsheet/TearsheetNarrow.js +18 -15
  75. package/es/components/Tearsheet/TearsheetShell.js +3 -4
  76. package/es/components/Toolbar/ToolbarButton.js +0 -3
  77. package/es/components/WebTerminal/WebTerminal.js +18 -19
  78. package/es/components/index.js +2 -2
  79. package/es/global/js/hooks/index.js +1 -0
  80. package/es/global/js/hooks/useActiveElement.js +27 -0
  81. package/es/global/js/package-settings.js +2 -1
  82. package/es/global/js/utils/Wrap.js +7 -5
  83. package/es/global/js/utils/getScrollbarWidth.js +14 -0
  84. package/es/settings.js +0 -5
  85. package/lib/components/APIKeyModal/APIKeyModal.js +10 -13
  86. package/lib/components/ActionBar/ActionBar.js +0 -3
  87. package/lib/components/ActionBar/ActionBarItem.js +2 -6
  88. package/lib/components/ActionSet/ActionSet.js +11 -13
  89. package/lib/components/AddSelect/AddSelect.js +126 -72
  90. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
  91. package/lib/components/AddSelect/AddSelectList.js +112 -0
  92. package/lib/components/AddSelect/AddSelectSidebar.js +122 -0
  93. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -5
  94. package/lib/components/ButtonMenu/ButtonMenu.js +6 -4
  95. package/lib/components/ButtonMenu/ButtonMenuItem.js +1 -2
  96. package/lib/components/Card/Card.js +37 -25
  97. package/lib/components/Card/CardFooter.js +14 -10
  98. package/lib/components/Card/CardHeader.js +8 -6
  99. package/lib/components/Cascade/Cascade.js +5 -4
  100. package/lib/components/ComboButton/ComboButton.js +0 -4
  101. package/lib/components/ComboButton/ComboButtonItem/index.js +0 -5
  102. package/lib/components/CreateFullPage/CreateFullPageStep.js +17 -14
  103. package/lib/components/CreateModal/CreateModal.js +1 -4
  104. package/lib/components/CreateTearsheet/CreateTearsheet.js +10 -11
  105. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +20 -20
  106. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +438 -0
  107. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +161 -0
  108. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +80 -0
  109. package/lib/components/DataSpreadsheet/createActiveCellFn.js +56 -0
  110. package/lib/components/DataSpreadsheet/generateData.js +58 -0
  111. package/lib/components/DataSpreadsheet/getCellSize.js +39 -0
  112. package/lib/components/DataSpreadsheet/index.js +13 -0
  113. package/lib/components/EditSidePanel/EditSidePanel.js +9 -10
  114. package/lib/components/EmptyStates/EmptyState.js +10 -9
  115. package/lib/components/EmptyStates/EmptyStateContent.js +2 -2
  116. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -8
  117. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -8
  118. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -8
  119. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -8
  120. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -8
  121. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -8
  122. package/lib/components/ExampleComponent/ExampleComponent.js +12 -13
  123. package/lib/components/ExportModal/ExportModal.js +13 -9
  124. package/lib/components/ExpressiveCard/ExpressiveCard.js +0 -8
  125. package/lib/components/ImportModal/ImportModal.js +7 -5
  126. package/lib/components/InlineEdit/InlineEdit.js +253 -87
  127. package/lib/components/LoadingBar/LoadingBar.js +13 -17
  128. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -4
  129. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -5
  130. package/lib/components/ModifiedTabs/ModifiedTabs.js +24 -18
  131. package/lib/components/NotificationsPanel/NotificationsPanel.js +122 -87
  132. package/lib/components/OptionsTile/OptionsTile.js +6 -9
  133. package/lib/components/PageHeader/PageHeader.js +18 -12
  134. package/lib/components/PageHeader/PageHeaderTitle.js +10 -6
  135. package/lib/components/ProductiveCard/ProductiveCard.js +24 -18
  136. package/lib/components/RemoveModal/RemoveModal.js +0 -3
  137. package/lib/components/SidePanel/SidePanel.js +54 -32
  138. package/lib/components/TagSet/TagSet.js +13 -9
  139. package/lib/components/TagSet/TagSetModal.js +17 -13
  140. package/lib/components/TagSet/TagSetOverflow.js +24 -19
  141. package/lib/components/Tearsheet/Tearsheet.js +26 -17
  142. package/lib/components/Tearsheet/TearsheetNarrow.js +18 -15
  143. package/lib/components/Tearsheet/TearsheetShell.js +2 -3
  144. package/lib/components/Toolbar/ToolbarButton.js +0 -3
  145. package/lib/components/WebTerminal/WebTerminal.js +18 -19
  146. package/lib/components/index.js +8 -8
  147. package/lib/global/js/hooks/index.js +8 -0
  148. package/lib/global/js/hooks/useActiveElement.js +39 -0
  149. package/lib/global/js/package-settings.js +2 -1
  150. package/lib/global/js/utils/Wrap.js +7 -5
  151. package/lib/global/js/utils/getScrollbarWidth.js +23 -0
  152. package/lib/settings.js +0 -6
  153. package/package.json +25 -23
  154. package/scss/components/AddSelect/_add-select.scss +59 -5
  155. package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
  156. package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
  157. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
  158. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -6
  159. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +102 -0
  160. package/scss/components/{CancelableTextEdit → DataSpreadsheet}/_index.scss +2 -2
  161. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  162. package/scss/components/EditSidePanel/_storybook-styles.scss +0 -8
  163. package/scss/components/InlineEdit/_inline-edit.scss +293 -10
  164. package/scss/components/InlineEdit/_storybook-styles.scss +12 -6
  165. package/scss/components/LoadingBar/_storybook-styles.scss +0 -5
  166. package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
  167. package/scss/components/OptionsTile/_storybook-styles.scss +0 -7
  168. package/scss/components/PageHeader/_index.scss +1 -1
  169. package/scss/components/PageHeader/_page-header.scss +4 -1
  170. package/scss/components/ProductiveCard/_productive-card.scss +0 -4
  171. package/scss/components/SidePanel/_side-panel.scss +15 -6
  172. package/scss/components/StatusIcon/_index.scss +1 -1
  173. package/scss/components/StatusIcon/_status-icon.scss +4 -4
  174. package/scss/components/TagSet/_index.scss +1 -1
  175. package/scss/components/UserProfileImage/_index.scss +1 -1
  176. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
  177. package/scss/components/WebTerminal/_web-terminal.scss +2 -2
  178. package/scss/components/_index.scss +1 -1
  179. package/scss/global/styles/_project-settings.scss +5 -1
  180. package/es/components/CancelableTextEdit/CancelableTextEdit.js +0 -245
  181. package/es/generated/feature-flags/feature-flags.js +0 -15
  182. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +0 -265
  183. package/lib/components/CancelableTextEdit/index.js +0 -13
  184. package/lib/generated/feature-flags/feature-flags.js +0 -22
  185. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +0 -211
  186. package/scss/components/CancelableTextEdit/_storybook-styles.scss +0 -15
  187. package/scss/generated/feature-flags/_feature-flags.scss +0 -19
@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hoursAgoText", "hourAgoText", "minuteAgoText", "minutesAgoText", "monthsAgoText", "monthAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearsAgoText", "yearAgoText", "yesterdayAtText", "yesterdayLabel"];
5
+ var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel"];
6
6
 
7
7
  /**
8
- * Copyright IBM Corp. 2020, 2021
8
+ * Copyright IBM Corp. 2020, 2022
9
9
  *
10
10
  * This source code is licensed under the Apache-2.0 license found in the
11
11
  * LICENSE file in the root directory of this source tree.
@@ -22,45 +22,125 @@ import { timeAgo } from './utils';
22
22
  import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState'; // Carbon and package components we use.
23
23
 
24
24
  import { Button, Link, Toggle } from 'carbon-components-react';
25
- import { ErrorFilled16, WarningAltFilled16, CheckmarkFilled16, InformationSquareFilled16, ChevronDown16, Close16, Settings16 } from '@carbon/icons-react'; // The block part of our conventional BEM class names (blockClass__E--M).
25
+ import { ErrorFilled16, WarningAltFilled16, CheckmarkFilled16, InformationSquareFilled16, ChevronDown16, Close16, Settings16 } from '@carbon/icons-react';
26
+ import { usePreviousValue } from '../../global/js/hooks'; // The block part of our conventional BEM class names (blockClass__E--M).
26
27
 
27
28
  var componentName = 'NotificationsPanel';
28
- var blockClass = "".concat(pkg.prefix, "--notifications-panel");
29
+ var blockClass = "".concat(pkg.prefix, "--notifications-panel"); // Default values for props
30
+
31
+ var defaults = {
32
+ daysAgoText: function daysAgoText(value) {
33
+ return "".concat(value, " days ago");
34
+ },
35
+ dismissAllLabel: 'Dismiss all',
36
+ dismissSingleNotificationIconDescription: 'Dismiss',
37
+ doNotDisturbLabel: 'Do not disturb',
38
+ emptyStateLabel: 'You do not have any notifications',
39
+ hourAgoText: function hourAgoText(value) {
40
+ return "".concat(value, " hour ago");
41
+ },
42
+ hoursAgoText: function hoursAgoText(value) {
43
+ return "".concat(value, " hours ago");
44
+ },
45
+ minuteAgoText: function minuteAgoText(value) {
46
+ return "".concat(value, " minute ago");
47
+ },
48
+ minutesAgoText: function minutesAgoText(value) {
49
+ return "".concat(value, " minutes ago");
50
+ },
51
+ monthAgoText: function monthAgoText(value) {
52
+ return "".concat(value, " month ago");
53
+ },
54
+ monthsAgoText: function monthsAgoText(value) {
55
+ return "".concat(value, " months ago");
56
+ },
57
+ nowText: 'Now',
58
+ onDismissAllNotifications: function onDismissAllNotifications() {},
59
+ onDismissSingleNotification: function onDismissSingleNotification() {},
60
+ previousLabel: 'Previous',
61
+ readLessLabel: 'Read less',
62
+ readMoreLabel: 'Read more',
63
+ secondsAgoText: function secondsAgoText(value) {
64
+ return "".concat(value, " seconds ago");
65
+ },
66
+ settingsIconDescription: 'Settings',
67
+ title: 'Notifications',
68
+ todayLabel: 'Today',
69
+ viewAllLabel: function viewAllLabel(value) {
70
+ return "View all (".concat(value, ")");
71
+ },
72
+ yearAgoText: function yearAgoText(value) {
73
+ return "".concat(value, " year ago");
74
+ },
75
+ yearsAgoText: function yearsAgoText(value) {
76
+ return "".concat(value, " years ago");
77
+ },
78
+ yesterdayAtText: function yesterdayAtText(value) {
79
+ return "Yesterday at ".concat(value);
80
+ },
81
+ yesterdayLabel: 'Yesterday'
82
+ };
29
83
  export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
30
84
  var className = _ref.className,
31
85
  data = _ref.data,
32
- daysAgoText = _ref.daysAgoText,
33
- dismissAllLabel = _ref.dismissAllLabel,
34
- dismissSingleNotificationIconDescription = _ref.dismissSingleNotificationIconDescription,
86
+ _ref$daysAgoText = _ref.daysAgoText,
87
+ daysAgoText = _ref$daysAgoText === void 0 ? defaults.daysAgoText : _ref$daysAgoText,
88
+ _ref$dismissAllLabel = _ref.dismissAllLabel,
89
+ dismissAllLabel = _ref$dismissAllLabel === void 0 ? defaults.dismissAllLabel : _ref$dismissAllLabel,
90
+ _ref$dismissSingleNot = _ref.dismissSingleNotificationIconDescription,
91
+ dismissSingleNotificationIconDescription = _ref$dismissSingleNot === void 0 ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
35
92
  doNotDisturbDefaultToggled = _ref.doNotDisturbDefaultToggled,
36
- doNotDisturbLabel = _ref.doNotDisturbLabel,
37
- emptyStateLabel = _ref.emptyStateLabel,
38
- hoursAgoText = _ref.hoursAgoText,
39
- hourAgoText = _ref.hourAgoText,
40
- minuteAgoText = _ref.minuteAgoText,
41
- minutesAgoText = _ref.minutesAgoText,
42
- monthsAgoText = _ref.monthsAgoText,
43
- monthAgoText = _ref.monthAgoText,
44
- nowText = _ref.nowText,
93
+ _ref$doNotDisturbLabe = _ref.doNotDisturbLabel,
94
+ doNotDisturbLabel = _ref$doNotDisturbLabe === void 0 ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
95
+ _ref$emptyStateLabel = _ref.emptyStateLabel,
96
+ emptyStateLabel = _ref$emptyStateLabel === void 0 ? defaults.emptyStateLabel : _ref$emptyStateLabel,
97
+ _ref$hourAgoText = _ref.hourAgoText,
98
+ hourAgoText = _ref$hourAgoText === void 0 ? defaults.hourAgoText : _ref$hourAgoText,
99
+ _ref$hoursAgoText = _ref.hoursAgoText,
100
+ hoursAgoText = _ref$hoursAgoText === void 0 ? defaults.hoursAgoText : _ref$hoursAgoText,
101
+ _ref$minuteAgoText = _ref.minuteAgoText,
102
+ minuteAgoText = _ref$minuteAgoText === void 0 ? defaults.minuteAgoText : _ref$minuteAgoText,
103
+ _ref$minutesAgoText = _ref.minutesAgoText,
104
+ minutesAgoText = _ref$minutesAgoText === void 0 ? defaults.minutesAgoText : _ref$minutesAgoText,
105
+ _ref$monthAgoText = _ref.monthAgoText,
106
+ monthAgoText = _ref$monthAgoText === void 0 ? defaults.monthAgoText : _ref$monthAgoText,
107
+ _ref$monthsAgoText = _ref.monthsAgoText,
108
+ monthsAgoText = _ref$monthsAgoText === void 0 ? defaults.monthsAgoText : _ref$monthsAgoText,
109
+ _ref$nowText = _ref.nowText,
110
+ nowText = _ref$nowText === void 0 ? defaults.nowText : _ref$nowText,
45
111
  onClickOutside = _ref.onClickOutside,
46
- onDismissAllNotifications = _ref.onDismissAllNotifications,
47
- onDismissSingleNotification = _ref.onDismissSingleNotification,
112
+ _ref$onDismissAllNoti = _ref.onDismissAllNotifications,
113
+ onDismissAllNotifications = _ref$onDismissAllNoti === void 0 ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
114
+ _ref$onDismissSingleN = _ref.onDismissSingleNotification,
115
+ onDismissSingleNotification = _ref$onDismissSingleN === void 0 ? defaults.onDismissSingleNotification : _ref$onDismissSingleN,
48
116
  onDoNotDisturbChange = _ref.onDoNotDisturbChange,
49
117
  onSettingsClick = _ref.onSettingsClick,
50
118
  onViewAllClick = _ref.onViewAllClick,
51
119
  open = _ref.open,
52
- previousLabel = _ref.previousLabel,
53
- readLessLabel = _ref.readLessLabel,
54
- readMoreLabel = _ref.readMoreLabel,
55
- secondsAgoText = _ref.secondsAgoText,
56
- settingsIconDescription = _ref.settingsIconDescription,
57
- title = _ref.title,
58
- todayLabel = _ref.todayLabel,
59
- viewAllLabel = _ref.viewAllLabel,
60
- yearsAgoText = _ref.yearsAgoText,
61
- yearAgoText = _ref.yearAgoText,
62
- yesterdayAtText = _ref.yesterdayAtText,
63
- yesterdayLabel = _ref.yesterdayLabel,
120
+ _ref$previousLabel = _ref.previousLabel,
121
+ previousLabel = _ref$previousLabel === void 0 ? defaults.previousLabel : _ref$previousLabel,
122
+ _ref$readLessLabel = _ref.readLessLabel,
123
+ readLessLabel = _ref$readLessLabel === void 0 ? defaults.readLessLabel : _ref$readLessLabel,
124
+ _ref$readMoreLabel = _ref.readMoreLabel,
125
+ readMoreLabel = _ref$readMoreLabel === void 0 ? defaults.readMoreLabel : _ref$readMoreLabel,
126
+ _ref$secondsAgoText = _ref.secondsAgoText,
127
+ secondsAgoText = _ref$secondsAgoText === void 0 ? defaults.secondsAgoText : _ref$secondsAgoText,
128
+ _ref$settingsIconDesc = _ref.settingsIconDescription,
129
+ settingsIconDescription = _ref$settingsIconDesc === void 0 ? defaults.settingsIconDescription : _ref$settingsIconDesc,
130
+ _ref$title = _ref.title,
131
+ title = _ref$title === void 0 ? defaults.title : _ref$title,
132
+ _ref$todayLabel = _ref.todayLabel,
133
+ todayLabel = _ref$todayLabel === void 0 ? defaults.todayLabel : _ref$todayLabel,
134
+ _ref$viewAllLabel = _ref.viewAllLabel,
135
+ viewAllLabel = _ref$viewAllLabel === void 0 ? defaults.viewAllLabel : _ref$viewAllLabel,
136
+ _ref$yearAgoText = _ref.yearAgoText,
137
+ yearAgoText = _ref$yearAgoText === void 0 ? defaults.yearAgoText : _ref$yearAgoText,
138
+ _ref$yearsAgoText = _ref.yearsAgoText,
139
+ yearsAgoText = _ref$yearsAgoText === void 0 ? defaults.yearsAgoText : _ref$yearsAgoText,
140
+ _ref$yesterdayAtText = _ref.yesterdayAtText,
141
+ yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
142
+ _ref$yesterdayLabel = _ref.yesterdayLabel,
143
+ yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
64
144
  rest = _objectWithoutProperties(_ref, _excluded);
65
145
 
66
146
  var notificationPanelRef = useRef();
@@ -75,6 +155,12 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
75
155
  allNotifications = _useState4[0],
76
156
  setAllNotifications = _useState4[1];
77
157
 
158
+ var previousState = usePreviousValue({
159
+ open: open
160
+ });
161
+ var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
162
+ matches: true
163
+ };
78
164
  useEffect(function () {
79
165
  // Set the notifications passed to the state within this component
80
166
  setAllNotifications(data);
@@ -94,6 +180,12 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
94
180
  !open && setRender(false);
95
181
  };
96
182
 
183
+ useEffect(function () {
184
+ if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
185
+ setRender(false);
186
+ }
187
+ }, [open, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
188
+
97
189
  var sortChronologically = function sortChronologically(arr) {
98
190
  if (!arr || arr && !arr.length) {
99
191
  return;
@@ -233,7 +325,7 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
233
325
  id: blockClass,
234
326
  className: cx(blockClass, className, "".concat(blockClass, "__container")),
235
327
  style: {
236
- animation: "".concat(open ? 'fadeIn 250ms' : 'fadeOut 250ms')
328
+ animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out 250ms') : null
237
329
  },
238
330
  onAnimationEnd: onAnimationEnd,
239
331
  ref: ref || notificationPanelRef
@@ -402,12 +494,12 @@ NotificationsPanel.propTypes = {
402
494
  /**
403
495
  * Function that will dismiss all notifications
404
496
  */
405
- onDismissAllNotifications: PropTypes.func.isRequired,
497
+ onDismissAllNotifications: PropTypes.func,
406
498
 
407
499
  /**
408
500
  * Function that will dismiss a single notification
409
501
  */
410
- onDismissSingleNotification: PropTypes.func.isRequired,
502
+ onDismissSingleNotification: PropTypes.func,
411
503
 
412
504
  /**
413
505
  * Function that returns the current selected value of the disable notification toggle
@@ -488,60 +580,4 @@ NotificationsPanel.propTypes = {
488
580
  * Sets the yesterday label text
489
581
  */
490
582
  yesterdayLabel: PropTypes.string
491
- }; // Default values for component props. Default values are not required for
492
- // props that are required, nor for props where the component can apply
493
- // 'undefined' values reasonably. Default values should be provided when the
494
- // component needs to make a choice or assumption when a prop is not supplied.
495
-
496
- NotificationsPanel.defaultProps = {
497
- daysAgoText: function daysAgoText(value) {
498
- return "".concat(value, " days ago");
499
- },
500
- dismissAllLabel: 'Dismiss all',
501
- dismissSingleNotificationIconDescription: 'Dismiss',
502
- doNotDisturbLabel: 'Do not disturb',
503
- emptyStateLabel: 'You do not have any notifications',
504
- hourAgoText: function hourAgoText(value) {
505
- return "".concat(value, " hour ago");
506
- },
507
- hoursAgoText: function hoursAgoText(value) {
508
- return "".concat(value, " hours ago");
509
- },
510
- minuteAgoText: function minuteAgoText(value) {
511
- return "".concat(value, " minute ago");
512
- },
513
- minutesAgoText: function minutesAgoText(value) {
514
- return "".concat(value, " minutes ago");
515
- },
516
- monthAgoText: function monthAgoText(value) {
517
- return "".concat(value, " month ago");
518
- },
519
- monthsAgoText: function monthsAgoText(value) {
520
- return "".concat(value, " months ago");
521
- },
522
- nowText: 'Now',
523
- onDismissAllNotifications: function onDismissAllNotifications() {},
524
- onDismissSingleNotification: function onDismissSingleNotification() {},
525
- previousLabel: 'Previous',
526
- readLessLabel: 'Read less',
527
- readMoreLabel: 'Read more',
528
- secondsAgoText: function secondsAgoText(value) {
529
- return "".concat(value, " seconds ago");
530
- },
531
- settingsIconDescription: 'Settings',
532
- title: 'Notifications',
533
- todayLabel: 'Today',
534
- viewAllLabel: function viewAllLabel(value) {
535
- return "View all (".concat(value, ")");
536
- },
537
- yearsAgoText: function yearsAgoText(value) {
538
- return "".concat(value, " years ago");
539
- },
540
- yearAgoText: function yearAgoText(value) {
541
- return "".concat(value, " year ago");
542
- },
543
- yesterdayLabel: 'Yesterday',
544
- yesterdayAtText: function yesterdayAtText(value) {
545
- return "Yesterday at ".concat(value);
546
- }
547
583
  };
@@ -25,7 +25,11 @@ import * as carbonMotion from '@carbon/motion'; // The block part of our convent
25
25
 
26
26
  var blockClass = "".concat(pkg.prefix, "--options-tile");
27
27
  var componentName = 'OptionsTile'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
28
+ // Default values for props
28
29
 
30
+ var defaults = {
31
+ size: 'xl'
32
+ };
29
33
  /**
30
34
  * TODO: A description of the component.
31
35
  */
@@ -42,7 +46,8 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
42
46
  lockedText = _ref.lockedText,
43
47
  onToggle = _ref.onToggle,
44
48
  open = _ref.open,
45
- size = _ref.size,
49
+ _ref$size = _ref.size,
50
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
46
51
  summary = _ref.summary,
47
52
  warn = _ref.warn,
48
53
  warnText = _ref.warnText,
@@ -316,12 +321,4 @@ OptionsTile.propTypes = {
316
321
  * Provide a text explaining why the OptionsTile is in warning state.
317
322
  */
318
323
  warnText: PropTypes.string
319
- }; // Default values for component props. Default values are not required for
320
- // props that are required, nor for props where the component can apply
321
- // 'undefined' values reasonably. Default values should be provided when the
322
- // component needs to make a choice or assumption when a prop is not supplied.
323
-
324
- OptionsTile.defaultProps = {
325
- open: false,
326
- size: 'xl'
327
324
  };
@@ -31,7 +31,12 @@ import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow';
31
31
  import { ChevronUp16 } from '@carbon/icons-react';
32
32
  var componentName = 'PageHeader';
33
33
  import { blockClass, utilCheckUpdateVerticalSpace, utilGetBreadcrumbItemForTitle, utilSetCollapsed } from './PageHeaderUtils';
34
- import { PageHeaderTitle } from './PageHeaderTitle';
34
+ import { PageHeaderTitle } from './PageHeaderTitle'; // Default values for props
35
+
36
+ var defaults = {
37
+ fullWidthGrid: false,
38
+ narrowGrid: false
39
+ };
35
40
  export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
36
41
  var _withoutBackground, _ref6, _cx2, _ref7, _cx4, _cx7;
37
42
 
@@ -51,9 +56,11 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
51
56
  collapseTitle = _ref.collapseTitle,
52
57
  disableBreadcrumbScroll = _ref.disableBreadcrumbScroll,
53
58
  expandHeaderIconDescription = _ref.expandHeaderIconDescription,
54
- fullWidthGrid = _ref.fullWidthGrid,
59
+ _ref$fullWidthGrid = _ref.fullWidthGrid,
60
+ fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
55
61
  hasCollapseHeaderToggle = _ref.hasCollapseHeaderToggle,
56
- narrowGrid = _ref.narrowGrid,
62
+ _ref$narrowGrid = _ref.narrowGrid,
63
+ narrowGrid = _ref$narrowGrid === void 0 ? defaults.narrowGrid : _ref$narrowGrid,
57
64
  navigation = _ref.navigation,
58
65
  pageActions = _ref.pageActions,
59
66
  pageActionsOverflowLabel = _ref.pageActionsOverflowLabel,
@@ -361,16 +368,17 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
361
368
  }, /*#__PURE__*/React.createElement("div", {
362
369
  className: "".concat(blockClass, "__non-navigation-row-content")
363
370
  }, hasBreadcrumbRow ? /*#__PURE__*/React.createElement(Row, {
364
- className: cx("".concat(blockClass, "__breadcrumb-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), _defineProperty(_cx2, "".concat(blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions), _cx2))
371
+ className: cx("".concat(blockClass, "__breadcrumb-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), _defineProperty(_cx2, "".concat(blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions), _cx2))
365
372
  }, /*#__PURE__*/React.createElement("div", {
366
373
  className: "".concat(blockClass, "__breadcrumb-row--container")
367
374
  }, /*#__PURE__*/React.createElement(Column, {
368
375
  className: cx("".concat(blockClass, "__breadcrumb-column"), _defineProperty({}, "".concat(blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
369
- }, breadcrumbs ? /*#__PURE__*/React.createElement(BreadcrumbWithOverflow, {
376
+ }, breadcrumbs || breadcrumbItemForTitle ? /*#__PURE__*/React.createElement(BreadcrumbWithOverflow, {
370
377
  className: "".concat(blockClass, "__breadcrumb"),
371
378
  noTrailingSlash: !!title,
372
379
  overflowAriaLabel: breadcrumbOverflowAriaLabel,
373
- breadcrumbs: breadcrumbs ? breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbs : null
380
+ breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
381
+
374
382
  }) : null), /*#__PURE__*/React.createElement(Column, {
375
383
  className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref7, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
376
384
  }, /*#__PURE__*/React.createElement("div", {
@@ -766,9 +774,10 @@ PageHeader.propTypes = _objectSpread({
766
774
  * - text: title string
767
775
  * - icon: optional icon
768
776
  * - loading: boolean shows loading indicator if true
769
- * - onChange: function to process edits only supply if in place edit is desired
777
+ * - onChange: function to process the live value (React change === HTML Input)
778
+ * - onSave: function to process a confirmed change
770
779
  * - editableLabel: label for edit required if onChange supplied
771
- * - revertDescription: label for edit revert button
780
+ * - cancelDescription: label for edit cancel button
772
781
  * - saveDescription: label for edit save button
773
782
  * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
774
783
  * - content: title or name of current location shown in main part of page header
@@ -786,7 +795,8 @@ PageHeader.propTypes = _objectSpread({
786
795
  id: PropTypes.string,
787
796
  // .isRequired.if(inlineEditRequired),
788
797
  onChange: PropTypes.func,
789
- revertDescription: PropTypes.string,
798
+ onSave: PropTypes.func,
799
+ cancelDescription: PropTypes.string,
790
800
  //.isRequired.if(inlineEditRequired),
791
801
  saveDescription: PropTypes.string //.isRequired.if(inlineEditRequired),
792
802
  // Update docgen if changed
@@ -803,8 +813,4 @@ PageHeader.propTypes = _objectSpread({
803
813
  */
804
814
  withoutBackground: PropTypes.bool
805
815
  }, deprecatedProps);
806
- PageHeader.defaultProps = {
807
- fullWidthGrid: false,
808
- narrowGrid: false
809
- };
810
816
  PageHeader.displayName = componentName;
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "editDescription", "editableLabel", "revertDescription", "saveDescription"];
4
+ var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "revertDescription", "saveDescription"];
5
5
  import React from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import cx from 'classnames';
@@ -26,6 +26,7 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
26
26
  icon = title.icon,
27
27
  asText = title.asText,
28
28
  onChange = title.onChange,
29
+ onSave = title.onSave,
29
30
  editDescription = title.editDescription,
30
31
  editableLabel = title.editableLabel,
31
32
  revertDescription = title.revertDescription,
@@ -33,7 +34,7 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
33
34
  rest = _objectWithoutProperties(title, _excluded);
34
35
 
35
36
  var titleText;
36
- var isEditable = !!onChange;
37
+ var isEditable = !!onSave;
37
38
 
38
39
  if (text || !content) {
39
40
  if (text === undefined && typeof title === 'string') {
@@ -51,6 +52,7 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
51
52
  value: text,
52
53
  editDescription: editDescription,
53
54
  onChange: onChange,
55
+ onSave: onSave,
54
56
  labelText: editableLabel,
55
57
  revertDescription: revertDescription,
56
58
  saveDescription: saveDescription
@@ -68,8 +70,8 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
68
70
  }, titleInnards);
69
71
  };
70
72
  export var inlineEditRequired = function inlineEditRequired(_ref2) {
71
- var onChange = _ref2.onChange;
72
- return !!onChange;
73
+ var onSave = _ref2.onSave;
74
+ return !!onSave;
73
75
  };
74
76
  PageHeaderTitle.propTypes = {
75
77
  // passed from page header
@@ -89,9 +91,10 @@ PageHeaderTitle.propTypes = {
89
91
  * - text: title string
90
92
  * - icon: optional icon
91
93
  * - loading: boolean shows loading indicator if true
92
- * - onChange: function to process edits only supply if in place edit is desired
94
+ * - onChange: function to process the live value (React change === HTML Input)
95
+ * - onSave: function to process a confirmed change
93
96
  * - editDescription: description for edit button
94
- * - editableLabel: label for edit required if onChange supplied
97
+ * - editableLabel: label for edit required if onSave supplied
95
98
  * - revertDescription: description for edit revert button
96
99
  * - saveDescription: description for edit save button
97
100
  * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
@@ -109,6 +112,7 @@ PageHeaderTitle.propTypes = {
109
112
  editableLabel: PropTypes.string.isRequired.if(inlineEditRequired),
110
113
  id: PropTypes.string.isRequired.if(inlineEditRequired),
111
114
  onChange: PropTypes.func,
115
+ onSave: PropTypes.func,
112
116
  revertDescription: PropTypes.string.isRequired.if(inlineEditRequired),
113
117
  saveDescription: PropTypes.string.isRequired.if(inlineEditRequired) // Update docgen if changed
114
118
 
@@ -1,4 +1,12 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _excluded = ["actionsPlacement"];
5
+
6
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
+
8
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
9
+
2
10
  //
3
11
  // Copyright IBM Corp. 2020, 2021
4
12
  //
@@ -11,11 +19,21 @@ import { Card } from '../Card';
11
19
  import { getDevtoolsProps } from '../../global/js/utils/devtools';
12
20
  import { prepareProps } from '../../global/js/utils/props-helper';
13
21
  import { pkg } from '../../settings';
14
- var componentName = 'ProductiveCard';
15
- export var ProductiveCard = /*#__PURE__*/forwardRef(function (props, ref) {
16
- var validProps = prepareProps(props, ['media', 'mediaPosition', 'onSecondaryButtonClick', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind', 'secondaryButtonText']);
17
- return /*#__PURE__*/React.createElement(Card, _extends({}, validProps, {
18
- ref: ref,
22
+ var componentName = 'ProductiveCard'; // Default values for props
23
+
24
+ var defaults = {
25
+ actionsPlacement: 'top'
26
+ };
27
+ export var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
28
+ var _ref$actionsPlacement = _ref.actionsPlacement,
29
+ actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
30
+ rest = _objectWithoutProperties(_ref, _excluded);
31
+
32
+ var validProps = prepareProps(rest, ['media', 'mediaPosition', 'onSecondaryButtonClick', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind', 'secondaryButtonText']);
33
+ return /*#__PURE__*/React.createElement(Card, _extends({}, _objectSpread(_objectSpread({}, validProps), {}, {
34
+ actionsPlacement: actionsPlacement,
35
+ ref: ref
36
+ }), {
19
37
  productive: true
20
38
  }, getDevtoolsProps(componentName)));
21
39
  }); // Return a placeholder if not released and not enabled by feature flag
@@ -109,11 +127,4 @@ ProductiveCard.propTypes = {
109
127
  */
110
128
  titleSize: PropTypes.oneOf(['default', 'large'])
111
129
  };
112
- ProductiveCard.defaultProps = {
113
- actionIcons: [],
114
- actionsPlacement: 'top',
115
- clickZone: 'one',
116
- overflowActions: [],
117
- titleSize: 'default'
118
- };
119
130
  ProductiveCard.displayName = componentName;
@@ -185,7 +185,4 @@ RemoveModal.propTypes = {
185
185
  */
186
186
  title: PropTypes.string.isRequired
187
187
  };
188
- RemoveModal.defaultProps = {
189
- textConfirmation: false
190
- };
191
188
  RemoveModal.displayName = componentName;