@carbon/ibm-products 2.32.0 → 2.34.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (178) hide show
  1. package/css/index-full-carbon.css +351 -3
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +351 -3
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +351 -3
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/ActionBar/ActionBar.js +8 -1
  14. package/es/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
  15. package/es/components/CreateSidePanel/CreateSidePanel.js +5 -2
  16. package/es/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
  17. package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  18. package/es/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
  19. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
  20. package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
  21. package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +10 -3
  22. package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
  23. package/es/components/DataSpreadsheet/utils/commonEventHandlers.js +304 -0
  24. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  25. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
  26. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  27. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  28. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -2
  29. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
  30. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
  31. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  32. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
  33. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
  34. package/es/components/Datagrid/useRowSize.js +4 -2
  35. package/es/components/DescriptionList/DescriptionList.d.ts +0 -37
  36. package/es/components/DescriptionList/DescriptionList.js +7 -12
  37. package/es/components/DescriptionList/DescriptionListBody.d.ts +2 -0
  38. package/es/components/DescriptionList/DescriptionListBody.js +39 -0
  39. package/es/components/DescriptionList/DescriptionListCell.d.ts +2 -0
  40. package/es/components/DescriptionList/DescriptionListCell.js +39 -0
  41. package/es/components/DescriptionList/DescriptionListRow.d.ts +2 -0
  42. package/es/components/DescriptionList/DescriptionListRow.js +41 -0
  43. package/es/components/DescriptionList/index.d.ts +4 -1
  44. package/es/components/EditSidePanel/EditSidePanel.d.ts +92 -2
  45. package/es/components/EditSidePanel/EditSidePanel.js +8 -10
  46. package/es/components/FilterPanel/FilterPanel.d.ts +5 -0
  47. package/es/components/FilterPanel/FilterPanel.js +55 -0
  48. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
  49. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +83 -0
  50. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
  51. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +94 -0
  52. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  53. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +80 -0
  54. package/es/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
  55. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
  56. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +157 -0
  57. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
  58. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +72 -0
  59. package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
  60. package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +63 -0
  61. package/es/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
  62. package/es/components/FilterPanel/index.d.ts +7 -0
  63. package/es/components/OptionsTile/OptionsTile.d.ts +77 -3
  64. package/es/components/OptionsTile/OptionsTile.js +9 -20
  65. package/es/components/RemoveModal/RemoveModal.d.ts +81 -7
  66. package/es/components/RemoveModal/RemoveModal.js +1 -0
  67. package/es/components/ScrollGradient/ScrollGradient.d.ts +5 -0
  68. package/es/components/ScrollGradient/ScrollGradient.js +156 -0
  69. package/es/components/ScrollGradient/constants.d.ts +15 -0
  70. package/es/components/ScrollGradient/constants.js +121 -0
  71. package/es/components/ScrollGradient/index.d.ts +1 -0
  72. package/es/components/SidePanel/SidePanel.d.ts +144 -2
  73. package/es/components/SidePanel/SidePanel.js +88 -112
  74. package/es/components/StatusIcon/StatusIcon.d.ts +34 -2
  75. package/es/components/StatusIcon/StatusIcon.js +97 -95
  76. package/es/components/Tearsheet/TearsheetShell.js +9 -1
  77. package/es/components/Toolbar/ToolbarGroup.d.ts +17 -2
  78. package/es/components/Toolbar/ToolbarGroup.js +0 -1
  79. package/es/components/TruncatedList/TruncatedList.js +5 -3
  80. package/es/components/UserAvatar/UserAvatar.js +3 -2
  81. package/es/components/index.d.ts +4 -1
  82. package/es/global/js/hooks/useFocus.js +9 -2
  83. package/es/global/js/package-settings.d.ts +12 -0
  84. package/es/global/js/package-settings.js +12 -0
  85. package/es/index.js +12 -0
  86. package/es/settings.d.ts +12 -0
  87. package/lib/components/ActionBar/ActionBar.js +11 -6
  88. package/lib/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
  89. package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -2
  90. package/lib/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
  91. package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  92. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
  93. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
  94. package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
  95. package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +9 -2
  96. package/lib/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
  97. package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js +311 -0
  98. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  99. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
  100. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  101. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  102. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
  103. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
  104. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
  105. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  106. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
  107. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
  108. package/lib/components/Datagrid/useRowSize.js +4 -2
  109. package/lib/components/DescriptionList/DescriptionList.d.ts +0 -37
  110. package/lib/components/DescriptionList/DescriptionList.js +6 -11
  111. package/lib/components/DescriptionList/DescriptionListBody.d.ts +2 -0
  112. package/lib/components/DescriptionList/DescriptionListBody.js +46 -0
  113. package/lib/components/DescriptionList/DescriptionListCell.d.ts +2 -0
  114. package/lib/components/DescriptionList/DescriptionListCell.js +46 -0
  115. package/lib/components/DescriptionList/DescriptionListRow.d.ts +2 -0
  116. package/lib/components/DescriptionList/DescriptionListRow.js +48 -0
  117. package/lib/components/DescriptionList/index.d.ts +4 -1
  118. package/lib/components/EditSidePanel/EditSidePanel.d.ts +92 -2
  119. package/lib/components/EditSidePanel/EditSidePanel.js +8 -10
  120. package/lib/components/FilterPanel/FilterPanel.d.ts +5 -0
  121. package/lib/components/FilterPanel/FilterPanel.js +62 -0
  122. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
  123. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +90 -0
  124. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
  125. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +101 -0
  126. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  127. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +87 -0
  128. package/lib/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
  129. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
  130. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +164 -0
  131. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
  132. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +79 -0
  133. package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
  134. package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +70 -0
  135. package/lib/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
  136. package/lib/components/FilterPanel/index.d.ts +7 -0
  137. package/lib/components/OptionsTile/OptionsTile.d.ts +77 -3
  138. package/lib/components/OptionsTile/OptionsTile.js +9 -20
  139. package/lib/components/RemoveModal/RemoveModal.d.ts +81 -7
  140. package/lib/components/RemoveModal/RemoveModal.js +1 -0
  141. package/lib/components/ScrollGradient/ScrollGradient.d.ts +5 -0
  142. package/lib/components/ScrollGradient/ScrollGradient.js +163 -0
  143. package/lib/components/ScrollGradient/constants.d.ts +15 -0
  144. package/lib/components/ScrollGradient/constants.js +128 -0
  145. package/lib/components/ScrollGradient/index.d.ts +1 -0
  146. package/lib/components/SidePanel/SidePanel.d.ts +144 -2
  147. package/lib/components/SidePanel/SidePanel.js +88 -112
  148. package/lib/components/StatusIcon/StatusIcon.d.ts +34 -2
  149. package/lib/components/StatusIcon/StatusIcon.js +97 -95
  150. package/lib/components/Tearsheet/TearsheetShell.js +9 -1
  151. package/lib/components/Toolbar/ToolbarGroup.d.ts +17 -2
  152. package/lib/components/Toolbar/ToolbarGroup.js +0 -1
  153. package/lib/components/TruncatedList/TruncatedList.js +5 -3
  154. package/lib/components/UserAvatar/UserAvatar.js +3 -2
  155. package/lib/components/index.d.ts +4 -1
  156. package/lib/global/js/hooks/useFocus.js +9 -2
  157. package/lib/global/js/package-settings.d.ts +12 -0
  158. package/lib/global/js/package-settings.js +12 -0
  159. package/lib/index.js +60 -0
  160. package/lib/settings.d.ts +12 -0
  161. package/package.json +3 -3
  162. package/scss/components/FilterPanel/_carbon-imports.scss +9 -0
  163. package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +56 -0
  164. package/scss/components/FilterPanel/_filter-panel-accordion.scss +6 -0
  165. package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +62 -0
  166. package/scss/components/FilterPanel/_filter-panel-checkbox.scss +54 -0
  167. package/scss/components/FilterPanel/_filter-panel-group.scss +39 -0
  168. package/scss/components/FilterPanel/_filter-panel-label.scss +39 -0
  169. package/scss/components/FilterPanel/_filter-panel.scss +31 -0
  170. package/scss/components/FilterPanel/_index-with-carbon.scss +15 -0
  171. package/scss/components/FilterPanel/_index.scss +14 -0
  172. package/scss/components/ScrollGradient/_carbon-imports.scss +9 -0
  173. package/scss/components/ScrollGradient/_index-with-carbon.scss +9 -0
  174. package/scss/components/ScrollGradient/_index.scss +8 -0
  175. package/scss/components/ScrollGradient/_scroll-gradient.scss +102 -0
  176. package/scss/components/UserAvatar/_user-avatar.scss +37 -4
  177. package/scss/components/_index-with-carbon.scss +2 -0
  178. package/scss/components/_index.scss +2 -0
@@ -1,5 +1,79 @@
1
1
  /**
2
- * TODO: A description of the component.
2
+ * Copyright IBM Corp. 2021, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
3
6
  */
4
- export let OptionsTile: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
- import React from 'react';
7
+ import React, { ReactNode } from 'react';
8
+ interface OptionsTileProps {
9
+ /**
10
+ * Provide content to render as expandable OptionsTile. If no children
11
+ * are present, the OptionsTile will render as its variant.
12
+ */
13
+ children?: ReactNode;
14
+ /**
15
+ * Provide an optional class to be applied to the containing node.
16
+ */
17
+ className?: string;
18
+ /**
19
+ * Whether the toggle is enabled or disabled. If nothing is passed,
20
+ * no toggle will be rendered.
21
+ */
22
+ enabled?: boolean;
23
+ /**
24
+ * Whether the OptionsTile is in invalid validation state.
25
+ */
26
+ invalid?: boolean;
27
+ /**
28
+ * Provide a text explaining why the OptionsTile is in invalid state.
29
+ */
30
+ invalidText?: string;
31
+ /**
32
+ * Whether the OptionsTile is in locked validation state.
33
+ */
34
+ locked?: boolean;
35
+ /**
36
+ * Provide a text explaining why the OptionsTile is in locked state.
37
+ */
38
+ lockedText?: string;
39
+ /**
40
+ * Provide a function which will be called each time the user
41
+ * toggles the open state of the OptionsTile.
42
+ */
43
+ onChange?: (value: boolean) => void;
44
+ /**
45
+ * Provide a function which will be called each time the user
46
+ * interacts with the toggle.
47
+ */
48
+ onToggle: (value: boolean) => void;
49
+ /**
50
+ * Whether the OptionsTile is in open state.
51
+ */
52
+ open?: boolean;
53
+ /**
54
+ * Define the size of the OptionsTile.
55
+ */
56
+ size: 'lg' | 'xl';
57
+ /**
58
+ * Optionally provide a text summarizing the current state of the content.
59
+ */
60
+ summary?: string;
61
+ /**
62
+ * Provide the title for this OptionsTile.
63
+ */
64
+ title: string;
65
+ /**
66
+ * Optionally provide an id which should be used for the title.
67
+ */
68
+ titleId?: string;
69
+ /**
70
+ * Whether the OptionsTile is in warning validation state.
71
+ */
72
+ warn?: boolean;
73
+ /**
74
+ * Provide a text explaining why the OptionsTile is in warning state.
75
+ */
76
+ warnText?: string;
77
+ }
78
+ export declare let OptionsTile: React.ForwardRefExoticComponent<OptionsTileProps & React.RefAttributes<HTMLDivElement>>;
79
+ export {};
@@ -19,22 +19,12 @@ import { useControllableState } from '../../global/js/hooks/useControllableState
19
19
 
20
20
  var _Locked;
21
21
  var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
22
-
23
- // The block part of our conventional BEM class names (blockClass__E--M).
24
22
  var blockClass = "".concat(pkg.prefix, "--options-tile");
25
23
  var componentName = 'OptionsTile';
26
-
27
- // NOTE: the component SCSS is not imported here: it is rolled up separately.
28
-
29
24
  // Default values for props
30
25
  var defaults = {
31
- onChange: function onChange() {},
32
- size: 'xl'
26
+ size: 'lg'
33
27
  };
34
-
35
- /**
36
- * TODO: A description of the component.
37
- */
38
28
  var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
39
29
  var children = _ref.children,
40
30
  className = _ref.className,
@@ -43,8 +33,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
43
33
  invalidText = _ref.invalidText,
44
34
  locked = _ref.locked,
45
35
  lockedText = _ref.lockedText,
46
- _ref$onChange = _ref.onChange,
47
- _onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
36
+ _onChange = _ref.onChange,
48
37
  onToggle = _ref.onToggle,
49
38
  open = _ref.open,
50
39
  _ref$size = _ref.size,
@@ -64,11 +53,12 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
64
53
  closing = _useState4[0],
65
54
  setClosing = _useState4[1];
66
55
  var _useControllableState = useControllableState({
67
- value: open,
68
56
  defaultValue: open || null,
57
+ name: 'OptionsTile',
69
58
  onChange: function onChange(value) {
70
- return _onChange(value);
71
- }
59
+ return _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
60
+ },
61
+ value: open
72
62
  }),
73
63
  _useControllableState2 = _slicedToArray(_useControllableState, 2),
74
64
  isOpen = _useControllableState2[0],
@@ -200,10 +190,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
200
190
  }, text)));
201
191
  }
202
192
  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
203
- className: cx(blockClass,
204
- // Apply the block class to the main HTML element
205
- className, // Apply any supplied class names to the main HTML element.
206
- "".concat(blockClass, "--").concat(size), _defineProperty({}, "".concat(blockClass, "--closing"), closing)),
193
+ className: cx(blockClass, className, "".concat(blockClass, "--").concat(size), _defineProperty({}, "".concat(blockClass, "--closing"), closing)),
207
194
  ref: ref
208
195
  }, getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React__default.createElement("div", {
209
196
  className: "".concat(blockClass, "__toggle-container")
@@ -294,6 +281,7 @@ OptionsTile.propTypes = {
294
281
  * Provide a function which will be called each time the user
295
282
  * interacts with the toggle.
296
283
  */
284
+ /**@ts-ignore*/
297
285
  onToggle: PropTypes.func,
298
286
  /**
299
287
  * Whether the OptionsTile is in open state.
@@ -302,6 +290,7 @@ OptionsTile.propTypes = {
302
290
  /**
303
291
  * Define the size of the OptionsTile.
304
292
  */
293
+ /**@ts-ignore*/
305
294
  size: PropTypes.oneOf(['lg', 'xl']),
306
295
  /**
307
296
  * Optionally provide a text summarizing the current state of the content.
@@ -1,7 +1,81 @@
1
- /**
2
- The `RemoveModal` covers what is known as high impact and medium impact deleting.
3
- Enabling `textConfirmation` enables what would be considered the high impact state of the modal.
4
- For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
5
- */
6
- export let RemoveModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
7
- import React from 'react';
1
+ /// <reference path="../../../src/custom-typings/index.d.ts" />
2
+ import React, { ReactNode } from 'react';
3
+ import { ComposedModal } from '@carbon/react';
4
+ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
5
+ /**
6
+ * The content to be displayed in the body of the modal
7
+ */
8
+ body: string;
9
+ /**
10
+ * Optional classname
11
+ */
12
+ className?: string;
13
+ /**
14
+ * Provide a description for "close" icon that can be read by screen readers
15
+ */
16
+ iconDescription: string;
17
+ /**
18
+ * Message showed when user input fails validation
19
+ */
20
+ inputInvalidText?: string;
21
+ /**
22
+ * Label for text box
23
+ */
24
+ inputLabelText?: ReactNode;
25
+ /**
26
+ * Placeholder for text box
27
+ */
28
+ inputPlaceholderText?: string;
29
+ /**
30
+ * Specify the modal label texts
31
+ */
32
+ label?: string;
33
+ /**
34
+ * Callback function that runs when user closes the modal
35
+ */
36
+ onClose?: () => void;
37
+ /**
38
+ * Callback function that runs when user submits the modal
39
+ */
40
+ onRequestSubmit?: () => void;
41
+ /**
42
+ * Specify whether the Modal is currently open
43
+ */
44
+ open: boolean;
45
+ /**
46
+ * The DOM node the tearsheet should be rendered within. Defaults to document.body.
47
+ */
48
+ portalTarget?: ReactNode;
49
+ /**
50
+ * Prevent closing on click outside of modal
51
+ */
52
+ preventCloseOnClickOutside?: boolean;
53
+ /**
54
+ * Specify whether the primary button should be disabled. This value will override textConfirmation
55
+ */
56
+ primaryButtonDisabled?: boolean;
57
+ /**
58
+ * Specify the text for the primary button
59
+ */
60
+ primaryButtonText?: string;
61
+ /**
62
+ * The name of the resource being acted upon
63
+ */
64
+ resourceName: string;
65
+ /**
66
+ * Specify the text for the secondary button
67
+ */
68
+ secondaryButtonText?: string;
69
+ /**
70
+ * Specify whether or not to show the text confirmation input
71
+ */
72
+ textConfirmation?: boolean;
73
+ /**
74
+ * The text displayed at the top of the modal
75
+ */
76
+ title: string;
77
+ }
78
+ export declare let RemoveModal: React.ForwardRefExoticComponent<RemoveModalProps & {
79
+ children?: React.ReactNode;
80
+ } & React.RefAttributes<unknown>>;
81
+ export {};
@@ -24,6 +24,7 @@ The `RemoveModal` covers what is known as high impact and medium impact deleting
24
24
  Enabling `textConfirmation` enables what would be considered the high impact state of the modal.
25
25
  For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
26
26
  */
27
+
27
28
  var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
28
29
  var body = _ref.body,
29
30
  className = _ref.className,
@@ -0,0 +1,5 @@
1
+ /**
2
+ * TODO: A description of the component.
3
+ */
4
+ export let ScrollGradient: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
+ import React from 'react';
@@ -0,0 +1,156 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import React__default, { useState, useRef, useCallback, useEffect } from 'react';
10
+ import PropTypes from '../../node_modules/prop-types/index.js';
11
+ import cx from 'classnames';
12
+ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
13
+ import { pkg, carbon } from '../../settings.js';
14
+ import { throttle } from 'lodash';
15
+ import { ScrollStates, getScrollState, ScrollDirection, useIsOverflow } from './constants.js';
16
+
17
+ var _excluded = ["children", "className", "color", "onScroll", "scrollElementClassName", "getScrollElementRef", "hideStartGradient"];
18
+ var blockClass = "".concat(pkg.prefix, "--scroll-gradient");
19
+ var componentName = 'ScrollGradient';
20
+
21
+ // Default values for props
22
+ var defaults = {
23
+ color: "var(--".concat(carbon.prefix, "-layer-01)"),
24
+ hideStartGradient: false,
25
+ onScroll: function onScroll() {},
26
+ getScrollElementRef: function getScrollElementRef() {}
27
+ };
28
+
29
+ /**
30
+ * TODO: A description of the component.
31
+ */
32
+ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
33
+ var children = _ref.children,
34
+ className = _ref.className,
35
+ _ref$color = _ref.color,
36
+ color = _ref$color === void 0 ? defaults.color : _ref$color,
37
+ _ref$onScroll = _ref.onScroll,
38
+ onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
39
+ scrollElementClassName = _ref.scrollElementClassName,
40
+ _ref$getScrollElement = _ref.getScrollElementRef,
41
+ getScrollElementRef = _ref$getScrollElement === void 0 ? defaults.getScrollElementRef : _ref$getScrollElement,
42
+ _ref$hideStartGradien = _ref.hideStartGradient,
43
+ hideStartGradient = _ref$hideStartGradien === void 0 ? defaults.hideStartGradient : _ref$hideStartGradien,
44
+ rest = _objectWithoutProperties(_ref, _excluded);
45
+ var _useState = useState(ScrollStates.NONE),
46
+ _useState2 = _slicedToArray(_useState, 2),
47
+ verticalPosition = _useState2[0],
48
+ setVerticalPosition = _useState2[1];
49
+ var _useState3 = useState(ScrollStates.NONE),
50
+ _useState4 = _slicedToArray(_useState3, 2),
51
+ horizontalPosition = _useState4[0],
52
+ setHorizontalPosition = _useState4[1];
53
+ var scrollContainer = useRef();
54
+ var contentChildrenContainer = useRef();
55
+ var updateScrollState = throttle(function () {
56
+ var updatedVerticalVal = getScrollState(scrollContainer.current, ScrollDirection.Y);
57
+ var updatedHorizontalVal = getScrollState(scrollContainer.current, ScrollDirection.X);
58
+ setVerticalPosition(updatedVerticalVal);
59
+ setHorizontalPosition(updatedHorizontalVal);
60
+ }, 150);
61
+ var scrollHandler = useCallback(function (event) {
62
+ onScroll(event);
63
+ updateScrollState();
64
+ }, [onScroll, updateScrollState]);
65
+ var setRefs = function setRefs(element) {
66
+ scrollContainer.current = element;
67
+ getScrollElementRef(element);
68
+ };
69
+ useEffect(function () {
70
+ scrollHandler();
71
+ }, [scrollHandler]);
72
+ var _useIsOverflow = useIsOverflow(scrollContainer),
73
+ xScrollable = _useIsOverflow.xScrollable,
74
+ yScrollable = _useIsOverflow.yScrollable;
75
+ var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
76
+ var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
77
+ return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
78
+ className: cx(blockClass, "".concat(blockClass, "--x-").concat(horizontalPosition.toLowerCase()), "".concat(blockClass, "--y-").concat(verticalPosition.toLowerCase()), _defineProperty(_defineProperty({}, "".concat(blockClass, "--x-scrollable"), xScrollable), "".concat(blockClass, "--y-scrollable"), yScrollable), className),
79
+ ref: ref,
80
+ role: "presentation"
81
+ }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
82
+ onScroll: scrollHandler,
83
+ ref: setRefs,
84
+ className: cx("".concat(blockClass, "__content"), scrollElementClassName)
85
+ }, /*#__PURE__*/React__default.createElement("div", {
86
+ ref: contentChildrenContainer,
87
+ className: "".concat(blockClass, "__content-children")
88
+ }, children)), !hideStartGradient && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
89
+ className: "".concat(blockClass, "__start-vertical"),
90
+ style: {
91
+ right: gradientRight,
92
+ backgroundImage: "linear-gradient(0deg, transparent, ".concat(color, " 90%)")
93
+ },
94
+ role: "presentation",
95
+ "aria-hidden": true
96
+ }), /*#__PURE__*/React__default.createElement("div", {
97
+ className: "".concat(blockClass, "__start-horizontal"),
98
+ style: {
99
+ backgroundImage: "linear-gradient(-90deg, transparent, ".concat(color, " 90%)"),
100
+ bottom: gradientBottom
101
+ },
102
+ role: "presentation",
103
+ "aria-hidden": true
104
+ })), /*#__PURE__*/React__default.createElement("div", {
105
+ className: "".concat(blockClass, "__end-vertical"),
106
+ style: {
107
+ right: gradientRight,
108
+ bottom: gradientBottom,
109
+ backgroundImage: "linear-gradient(0deg, ".concat(color, " 10%, transparent)")
110
+ },
111
+ role: "presentation",
112
+ "aria-hidden": true
113
+ }), /*#__PURE__*/React__default.createElement("div", {
114
+ className: "".concat(blockClass, "__end-horizontal"),
115
+ style: {
116
+ right: gradientRight,
117
+ bottom: gradientBottom,
118
+ backgroundImage: "linear-gradient(-90deg, ".concat(color, " 10%, transparent)")
119
+ },
120
+ role: "presentation",
121
+ "aria-hidden": true
122
+ }));
123
+ });
124
+
125
+ // Return a placeholder if not released and not enabled by feature flag
126
+ ScrollGradient = pkg.checkComponentEnabled(ScrollGradient, componentName);
127
+
128
+ // The display name of the component, used by React. Note that displayName
129
+ // is used in preference to relying on function.name.
130
+ ScrollGradient.displayName = componentName;
131
+
132
+ // The types and DocGen commentary for the component props,
133
+ // in alphabetical order (for consistency).
134
+ // See https://www.npmjs.com/package/prop-types#usage.
135
+ ScrollGradient.propTypes = {
136
+ /**
137
+ * Provide the contents of the ScrollGradient.
138
+ */
139
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
140
+ /**
141
+ * Provide an optional class to be applied to the containing node.
142
+ */
143
+ className: PropTypes.string,
144
+ /** @type {string} Fade out color. Any valid CSS color value works */
145
+ color: PropTypes.string,
146
+ /** @type {(element: HTMLElement) => {}} Optional function to get reference to scrollable DOM element */
147
+ getScrollElementRef: PropTypes.func,
148
+ /** @type {boolean} Set to true if you want to hide gradient on the start side (top or left) of scrollable element. */
149
+ hideStartGradient: PropTypes.bool,
150
+ /** @type {Function} Optional scroll handler */
151
+ onScroll: PropTypes.func,
152
+ /** @type {string} Optional classname for scroll element. */
153
+ scrollElementClassName: PropTypes.string
154
+ };
155
+
156
+ export { ScrollGradient };
@@ -0,0 +1,15 @@
1
+ export namespace ScrollDirection {
2
+ let X: string;
3
+ let Y: string;
4
+ }
5
+ export namespace ScrollStates {
6
+ let NONE: string;
7
+ let INITIAL: string;
8
+ let STARTED: string;
9
+ let END: string;
10
+ }
11
+ export function getScrollState(element: any, scrollDirection: any): string;
12
+ export function useIsOverflow(ref: any): {
13
+ xScrollable: undefined;
14
+ yScrollable: undefined;
15
+ };
@@ -0,0 +1,121 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
10
+
11
+ var ScrollDirection = {
12
+ X: 'X',
13
+ Y: 'Y'
14
+ };
15
+ var ScrollStates = {
16
+ // No scrolling required because content fits within container.
17
+ NONE: 'NONE',
18
+ // Scroll position is a the start of the scrollable content.
19
+ INITIAL: 'INITIAL',
20
+ // Scroll position is neither at start or end of scrollable content.
21
+ STARTED: 'STARTED',
22
+ // Scroll position is a the end of the scrollable content.
23
+ END: 'END'
24
+ };
25
+
26
+ // FUNCTIONS
27
+
28
+ var getScrollState = function getScrollState(element, scrollDirection) {
29
+ // console.log('getScrollState - element: ', element);
30
+ // console.log('getScrollState - scrollDirection: ', scrollDirection);
31
+ // console.log('-------------------------------------------------');
32
+ switch (scrollDirection) {
33
+ case ScrollDirection.X:
34
+ {
35
+ if (element.scrollWidth === element.clientWidth) {
36
+ return ScrollStates.NONE;
37
+ }
38
+ if (element.scrollLeft === 0) {
39
+ return ScrollStates.INITIAL;
40
+ }
41
+ if (element.scrollLeft + element.clientWidth === element.scrollWidth) {
42
+ return ScrollStates.END;
43
+ }
44
+ return ScrollStates.STARTED;
45
+ }
46
+ case ScrollDirection.Y:
47
+ default:
48
+ {
49
+ if (element.scrollHeight === element.clientHeight) {
50
+ return ScrollStates.NONE;
51
+ }
52
+ if (element.scrollTop === 0) {
53
+ return ScrollStates.INITIAL;
54
+ }
55
+ if (element.scrollTop + element.clientHeight === element.scrollHeight) {
56
+ return ScrollStates.END;
57
+ }
58
+ return ScrollStates.STARTED;
59
+ }
60
+ }
61
+ };
62
+ var useIsOverflow = function useIsOverflow(ref) {
63
+ var _useState = useState(),
64
+ _useState2 = _slicedToArray(_useState, 2),
65
+ isHorizontallyScrollable = _useState2[0],
66
+ setIsHorizontallyScrollable = _useState2[1];
67
+ var _useState3 = useState(),
68
+ _useState4 = _slicedToArray(_useState3, 2),
69
+ isVerticallyScrollable = _useState4[0],
70
+ setIsVerticallyScrollable = _useState4[1];
71
+ var _useState5 = useState(),
72
+ _useState6 = _slicedToArray(_useState5, 2),
73
+ mutationObserver = _useState6[0],
74
+ setMutationObserver = _useState6[1];
75
+ var _useState7 = useState(),
76
+ _useState8 = _slicedToArray(_useState7, 2),
77
+ resizeObserver = _useState8[0],
78
+ setResizeObserver = _useState8[1];
79
+ var checkOverflow = useCallback(function () {
80
+ if (!ref.current) {
81
+ return;
82
+ }
83
+ setIsHorizontallyScrollable(ref.current.scrollWidth > ref.current.clientWidth);
84
+ setIsVerticallyScrollable(ref.current.scrollHeight > ref.current.clientHeight);
85
+ }, [ref]);
86
+ useEffect(function () {
87
+ if (!mutationObserver) {
88
+ return;
89
+ }
90
+ return function () {
91
+ if (mutationObserver) {
92
+ mutationObserver.disconnect();
93
+ }
94
+ if (resizeObserver) {
95
+ resizeObserver.disconnect();
96
+ }
97
+ };
98
+ });
99
+ useLayoutEffect(function () {
100
+ var current = ref.current;
101
+ if (current) {
102
+ if ('ResizeObserver' in window && !resizeObserver) {
103
+ setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
104
+ }
105
+ if ('MutationObserver' in window && !mutationObserver) {
106
+ setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
107
+ attributes: false,
108
+ childList: true,
109
+ subtree: false
110
+ }));
111
+ }
112
+ checkOverflow();
113
+ }
114
+ }, [ref, checkOverflow, mutationObserver, resizeObserver]);
115
+ return {
116
+ xScrollable: isHorizontallyScrollable,
117
+ yScrollable: isVerticallyScrollable
118
+ };
119
+ };
120
+
121
+ export { ScrollDirection, ScrollStates, getScrollState, useIsOverflow };
@@ -0,0 +1 @@
1
+ export { ScrollGradient } from "./ScrollGradient";