@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 {};
@@ -47,22 +47,12 @@ var carbonMotion__namespace = /*#__PURE__*/_interopNamespace(carbonMotion);
47
47
 
48
48
  var _Locked;
49
49
  var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
50
-
51
- // The block part of our conventional BEM class names (blockClass__E--M).
52
50
  var blockClass = "".concat(settings.pkg.prefix, "--options-tile");
53
51
  var componentName = 'OptionsTile';
54
-
55
- // NOTE: the component SCSS is not imported here: it is rolled up separately.
56
-
57
52
  // Default values for props
58
53
  var defaults = {
59
- onChange: function onChange() {},
60
- size: 'xl'
54
+ size: 'lg'
61
55
  };
62
-
63
- /**
64
- * TODO: A description of the component.
65
- */
66
56
  exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
67
57
  var children = _ref.children,
68
58
  className = _ref.className,
@@ -71,8 +61,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
71
61
  invalidText = _ref.invalidText,
72
62
  locked = _ref.locked,
73
63
  lockedText = _ref.lockedText,
74
- _ref$onChange = _ref.onChange,
75
- _onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
64
+ _onChange = _ref.onChange,
76
65
  onToggle = _ref.onToggle,
77
66
  open = _ref.open,
78
67
  _ref$size = _ref.size,
@@ -92,11 +81,12 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
92
81
  closing = _useState4[0],
93
82
  setClosing = _useState4[1];
94
83
  var _useControllableState = useControllableState.useControllableState({
95
- value: open,
96
84
  defaultValue: open || null,
85
+ name: 'OptionsTile',
97
86
  onChange: function onChange(value) {
98
- return _onChange(value);
99
- }
87
+ return _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
88
+ },
89
+ value: open
100
90
  }),
101
91
  _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
102
92
  isOpen = _useControllableState2[0],
@@ -228,10 +218,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
228
218
  }, text)));
229
219
  }
230
220
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
231
- className: cx__default["default"](blockClass,
232
- // Apply the block class to the main HTML element
233
- className, // Apply any supplied class names to the main HTML element.
234
- "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--closing"), closing)),
221
+ className: cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--closing"), closing)),
235
222
  ref: ref
236
223
  }, devtools.getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
237
224
  className: "".concat(blockClass, "__toggle-container")
@@ -322,6 +309,7 @@ exports.OptionsTile.propTypes = {
322
309
  * Provide a function which will be called each time the user
323
310
  * interacts with the toggle.
324
311
  */
312
+ /**@ts-ignore*/
325
313
  onToggle: index["default"].func,
326
314
  /**
327
315
  * Whether the OptionsTile is in open state.
@@ -330,6 +318,7 @@ exports.OptionsTile.propTypes = {
330
318
  /**
331
319
  * Define the size of the OptionsTile.
332
320
  */
321
+ /**@ts-ignore*/
333
322
  size: index["default"].oneOf(['lg', 'xl']),
334
323
  /**
335
324
  * 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 {};
@@ -33,6 +33,7 @@ The `RemoveModal` covers what is known as high impact and medium impact deleting
33
33
  Enabling `textConfirmation` enables what would be considered the high impact state of the modal.
34
34
  For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
35
35
  */
36
+
36
37
  exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
37
38
  var body = _ref.body,
38
39
  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,163 @@
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
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var React = require('react');
14
+ var index = require('../../node_modules/prop-types/index.js');
15
+ var cx = require('classnames');
16
+ var devtools = require('../../global/js/utils/devtools.js');
17
+ var settings = require('../../settings.js');
18
+ var lodash = require('lodash');
19
+ var constants = require('./constants.js');
20
+
21
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
+
23
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
+ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
25
+
26
+ var _excluded = ["children", "className", "color", "onScroll", "scrollElementClassName", "getScrollElementRef", "hideStartGradient"];
27
+ var blockClass = "".concat(settings.pkg.prefix, "--scroll-gradient");
28
+ var componentName = 'ScrollGradient';
29
+
30
+ // Default values for props
31
+ var defaults = {
32
+ color: "var(--".concat(settings.carbon.prefix, "-layer-01)"),
33
+ hideStartGradient: false,
34
+ onScroll: function onScroll() {},
35
+ getScrollElementRef: function getScrollElementRef() {}
36
+ };
37
+
38
+ /**
39
+ * TODO: A description of the component.
40
+ */
41
+ exports.ScrollGradient = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
42
+ var children = _ref.children,
43
+ className = _ref.className,
44
+ _ref$color = _ref.color,
45
+ color = _ref$color === void 0 ? defaults.color : _ref$color,
46
+ _ref$onScroll = _ref.onScroll,
47
+ onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
48
+ scrollElementClassName = _ref.scrollElementClassName,
49
+ _ref$getScrollElement = _ref.getScrollElementRef,
50
+ getScrollElementRef = _ref$getScrollElement === void 0 ? defaults.getScrollElementRef : _ref$getScrollElement,
51
+ _ref$hideStartGradien = _ref.hideStartGradient,
52
+ hideStartGradient = _ref$hideStartGradien === void 0 ? defaults.hideStartGradient : _ref$hideStartGradien,
53
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
54
+ var _useState = React.useState(constants.ScrollStates.NONE),
55
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
56
+ verticalPosition = _useState2[0],
57
+ setVerticalPosition = _useState2[1];
58
+ var _useState3 = React.useState(constants.ScrollStates.NONE),
59
+ _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
60
+ horizontalPosition = _useState4[0],
61
+ setHorizontalPosition = _useState4[1];
62
+ var scrollContainer = React.useRef();
63
+ var contentChildrenContainer = React.useRef();
64
+ var updateScrollState = lodash.throttle(function () {
65
+ var updatedVerticalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.Y);
66
+ var updatedHorizontalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.X);
67
+ setVerticalPosition(updatedVerticalVal);
68
+ setHorizontalPosition(updatedHorizontalVal);
69
+ }, 150);
70
+ var scrollHandler = React.useCallback(function (event) {
71
+ onScroll(event);
72
+ updateScrollState();
73
+ }, [onScroll, updateScrollState]);
74
+ var setRefs = function setRefs(element) {
75
+ scrollContainer.current = element;
76
+ getScrollElementRef(element);
77
+ };
78
+ React.useEffect(function () {
79
+ scrollHandler();
80
+ }, [scrollHandler]);
81
+ var _useIsOverflow = constants.useIsOverflow(scrollContainer),
82
+ xScrollable = _useIsOverflow.xScrollable,
83
+ yScrollable = _useIsOverflow.yScrollable;
84
+ var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
85
+ var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
86
+ return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
87
+ className: cx__default["default"](blockClass, "".concat(blockClass, "--x-").concat(horizontalPosition.toLowerCase()), "".concat(blockClass, "--y-").concat(verticalPosition.toLowerCase()), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--x-scrollable"), xScrollable), "".concat(blockClass, "--y-scrollable"), yScrollable), className),
88
+ ref: ref,
89
+ role: "presentation"
90
+ }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
91
+ onScroll: scrollHandler,
92
+ ref: setRefs,
93
+ className: cx__default["default"]("".concat(blockClass, "__content"), scrollElementClassName)
94
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
95
+ ref: contentChildrenContainer,
96
+ className: "".concat(blockClass, "__content-children")
97
+ }, children)), !hideStartGradient && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
98
+ className: "".concat(blockClass, "__start-vertical"),
99
+ style: {
100
+ right: gradientRight,
101
+ backgroundImage: "linear-gradient(0deg, transparent, ".concat(color, " 90%)")
102
+ },
103
+ role: "presentation",
104
+ "aria-hidden": true
105
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
106
+ className: "".concat(blockClass, "__start-horizontal"),
107
+ style: {
108
+ backgroundImage: "linear-gradient(-90deg, transparent, ".concat(color, " 90%)"),
109
+ bottom: gradientBottom
110
+ },
111
+ role: "presentation",
112
+ "aria-hidden": true
113
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
114
+ className: "".concat(blockClass, "__end-vertical"),
115
+ style: {
116
+ right: gradientRight,
117
+ bottom: gradientBottom,
118
+ backgroundImage: "linear-gradient(0deg, ".concat(color, " 10%, transparent)")
119
+ },
120
+ role: "presentation",
121
+ "aria-hidden": true
122
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
123
+ className: "".concat(blockClass, "__end-horizontal"),
124
+ style: {
125
+ right: gradientRight,
126
+ bottom: gradientBottom,
127
+ backgroundImage: "linear-gradient(-90deg, ".concat(color, " 10%, transparent)")
128
+ },
129
+ role: "presentation",
130
+ "aria-hidden": true
131
+ }));
132
+ });
133
+
134
+ // Return a placeholder if not released and not enabled by feature flag
135
+ exports.ScrollGradient = settings.pkg.checkComponentEnabled(exports.ScrollGradient, componentName);
136
+
137
+ // The display name of the component, used by React. Note that displayName
138
+ // is used in preference to relying on function.name.
139
+ exports.ScrollGradient.displayName = componentName;
140
+
141
+ // The types and DocGen commentary for the component props,
142
+ // in alphabetical order (for consistency).
143
+ // See https://www.npmjs.com/package/prop-types#usage.
144
+ exports.ScrollGradient.propTypes = {
145
+ /**
146
+ * Provide the contents of the ScrollGradient.
147
+ */
148
+ children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]),
149
+ /**
150
+ * Provide an optional class to be applied to the containing node.
151
+ */
152
+ className: index["default"].string,
153
+ /** @type {string} Fade out color. Any valid CSS color value works */
154
+ color: index["default"].string,
155
+ /** @type {(element: HTMLElement) => {}} Optional function to get reference to scrollable DOM element */
156
+ getScrollElementRef: index["default"].func,
157
+ /** @type {boolean} Set to true if you want to hide gradient on the start side (top or left) of scrollable element. */
158
+ hideStartGradient: index["default"].bool,
159
+ /** @type {Function} Optional scroll handler */
160
+ onScroll: index["default"].func,
161
+ /** @type {string} Optional classname for scroll element. */
162
+ scrollElementClassName: index["default"].string
163
+ };
@@ -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,128 @@
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
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var React = require('react');
14
+
15
+ var ScrollDirection = {
16
+ X: 'X',
17
+ Y: 'Y'
18
+ };
19
+ var ScrollStates = {
20
+ // No scrolling required because content fits within container.
21
+ NONE: 'NONE',
22
+ // Scroll position is a the start of the scrollable content.
23
+ INITIAL: 'INITIAL',
24
+ // Scroll position is neither at start or end of scrollable content.
25
+ STARTED: 'STARTED',
26
+ // Scroll position is a the end of the scrollable content.
27
+ END: 'END'
28
+ };
29
+
30
+ // FUNCTIONS
31
+
32
+ var getScrollState = function getScrollState(element, scrollDirection) {
33
+ // console.log('getScrollState - element: ', element);
34
+ // console.log('getScrollState - scrollDirection: ', scrollDirection);
35
+ // console.log('-------------------------------------------------');
36
+ switch (scrollDirection) {
37
+ case ScrollDirection.X:
38
+ {
39
+ if (element.scrollWidth === element.clientWidth) {
40
+ return ScrollStates.NONE;
41
+ }
42
+ if (element.scrollLeft === 0) {
43
+ return ScrollStates.INITIAL;
44
+ }
45
+ if (element.scrollLeft + element.clientWidth === element.scrollWidth) {
46
+ return ScrollStates.END;
47
+ }
48
+ return ScrollStates.STARTED;
49
+ }
50
+ case ScrollDirection.Y:
51
+ default:
52
+ {
53
+ if (element.scrollHeight === element.clientHeight) {
54
+ return ScrollStates.NONE;
55
+ }
56
+ if (element.scrollTop === 0) {
57
+ return ScrollStates.INITIAL;
58
+ }
59
+ if (element.scrollTop + element.clientHeight === element.scrollHeight) {
60
+ return ScrollStates.END;
61
+ }
62
+ return ScrollStates.STARTED;
63
+ }
64
+ }
65
+ };
66
+ var useIsOverflow = function useIsOverflow(ref) {
67
+ var _useState = React.useState(),
68
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
69
+ isHorizontallyScrollable = _useState2[0],
70
+ setIsHorizontallyScrollable = _useState2[1];
71
+ var _useState3 = React.useState(),
72
+ _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
73
+ isVerticallyScrollable = _useState4[0],
74
+ setIsVerticallyScrollable = _useState4[1];
75
+ var _useState5 = React.useState(),
76
+ _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
77
+ mutationObserver = _useState6[0],
78
+ setMutationObserver = _useState6[1];
79
+ var _useState7 = React.useState(),
80
+ _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
81
+ resizeObserver = _useState8[0],
82
+ setResizeObserver = _useState8[1];
83
+ var checkOverflow = React.useCallback(function () {
84
+ if (!ref.current) {
85
+ return;
86
+ }
87
+ setIsHorizontallyScrollable(ref.current.scrollWidth > ref.current.clientWidth);
88
+ setIsVerticallyScrollable(ref.current.scrollHeight > ref.current.clientHeight);
89
+ }, [ref]);
90
+ React.useEffect(function () {
91
+ if (!mutationObserver) {
92
+ return;
93
+ }
94
+ return function () {
95
+ if (mutationObserver) {
96
+ mutationObserver.disconnect();
97
+ }
98
+ if (resizeObserver) {
99
+ resizeObserver.disconnect();
100
+ }
101
+ };
102
+ });
103
+ React.useLayoutEffect(function () {
104
+ var current = ref.current;
105
+ if (current) {
106
+ if ('ResizeObserver' in window && !resizeObserver) {
107
+ setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
108
+ }
109
+ if ('MutationObserver' in window && !mutationObserver) {
110
+ setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
111
+ attributes: false,
112
+ childList: true,
113
+ subtree: false
114
+ }));
115
+ }
116
+ checkOverflow();
117
+ }
118
+ }, [ref, checkOverflow, mutationObserver, resizeObserver]);
119
+ return {
120
+ xScrollable: isHorizontallyScrollable,
121
+ yScrollable: isVerticallyScrollable
122
+ };
123
+ };
124
+
125
+ exports.ScrollDirection = ScrollDirection;
126
+ exports.ScrollStates = ScrollStates;
127
+ exports.getScrollState = getScrollState;
128
+ exports.useIsOverflow = useIsOverflow;
@@ -0,0 +1 @@
1
+ export { ScrollGradient } from "./ScrollGradient";