@carbon/ibm-products 1.23.0 → 1.25.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. package/css/components/Datagrid/styles/datagrid.css +83 -11
  2. package/css/components/Datagrid/styles/datagrid.css.map +1 -1
  3. package/css/components/Datagrid/styles/index.css +83 -15
  4. package/css/components/Datagrid/styles/index.css.map +1 -1
  5. package/css/components/Datagrid/styles/useExpandedRow.css +0 -3
  6. package/css/components/Datagrid/styles/useExpandedRow.css.map +1 -1
  7. package/css/index-full-carbon.css +263 -60
  8. package/css/index-full-carbon.css.map +1 -1
  9. package/css/index-full-carbon.min.css +1 -7
  10. package/css/index-full-carbon.min.css.map +1 -1
  11. package/css/index-without-carbon-released-only.css +41 -43
  12. package/css/index-without-carbon-released-only.css.map +1 -1
  13. package/css/index-without-carbon-released-only.min.css +1 -7
  14. package/css/index-without-carbon-released-only.min.css.map +1 -1
  15. package/css/index-without-carbon.css +263 -60
  16. package/css/index-without-carbon.css.map +1 -1
  17. package/css/index-without-carbon.min.css +1 -7
  18. package/css/index-without-carbon.min.css.map +1 -1
  19. package/css/index.css +263 -60
  20. package/css/index.css.map +1 -1
  21. package/css/index.min.css +1 -7
  22. package/css/index.min.css.map +1 -1
  23. package/es/components/AddSelect/AddSelect.js +5 -7
  24. package/es/components/AddSelect/AddSelectBody.js +6 -10
  25. package/es/components/AddSelect/AddSelectColumn.js +4 -1
  26. package/es/components/AddSelect/AddSelectFilter.js +1 -1
  27. package/es/components/AddSelect/AddSelectList.js +1 -1
  28. package/es/components/AddSelect/AddSelectMetaPanel.js +8 -7
  29. package/es/components/AddSelect/AddSelectSidebar.js +4 -26
  30. package/es/components/AddSelect/AddSelectSort.js +2 -0
  31. package/es/components/Card/Card.js +1 -1
  32. package/es/components/Datagrid/Datagrid/Datagrid.js +17 -12
  33. package/es/components/Datagrid/Datagrid/DatagridRow.js +4 -2
  34. package/es/components/Datagrid/useExpandedRow.js +5 -12
  35. package/es/components/Datagrid/useOnRowClick.js +10 -3
  36. package/es/components/EditFullPage/EditFullPage.js +79 -0
  37. package/es/components/EditFullPage/index.js +7 -0
  38. package/es/components/EditTearsheet/EditTearsheet.js +205 -0
  39. package/es/components/EditTearsheet/EditTearsheetForm.js +103 -0
  40. package/es/components/EditTearsheet/index.js +8 -0
  41. package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +230 -0
  42. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +79 -0
  43. package/es/components/EditTearsheetNarrow/index.js +7 -0
  44. package/es/components/EmptyStates/EmptyStateContent.js +2 -1
  45. package/es/components/ImportModal/ImportModal.js +10 -2
  46. package/es/components/WebTerminal/WebTerminal.js +30 -16
  47. package/es/components/WebTerminal/WebTerminalContentWrapper.js +8 -10
  48. package/es/components/WebTerminal/hooks/index.js +45 -0
  49. package/es/components/WebTerminal/index.js +2 -1
  50. package/es/components/WebTerminal/preview-components/Navigation.js +6 -10
  51. package/es/components/index.js +5 -2
  52. package/es/global/js/package-settings.js +5 -1
  53. package/lib/components/AddSelect/AddSelect.js +5 -7
  54. package/lib/components/AddSelect/AddSelectBody.js +6 -10
  55. package/lib/components/AddSelect/AddSelectColumn.js +3 -1
  56. package/lib/components/AddSelect/AddSelectFilter.js +1 -1
  57. package/lib/components/AddSelect/AddSelectList.js +1 -1
  58. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -7
  59. package/lib/components/AddSelect/AddSelectSidebar.js +3 -26
  60. package/lib/components/AddSelect/AddSelectSort.js +2 -0
  61. package/lib/components/Card/Card.js +1 -1
  62. package/lib/components/Datagrid/Datagrid/Datagrid.js +17 -12
  63. package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -1
  64. package/lib/components/Datagrid/useExpandedRow.js +5 -20
  65. package/lib/components/Datagrid/useOnRowClick.js +10 -3
  66. package/lib/components/EditFullPage/EditFullPage.js +85 -0
  67. package/lib/components/EditFullPage/index.js +13 -0
  68. package/lib/components/EditTearsheet/EditTearsheet.js +229 -0
  69. package/lib/components/EditTearsheet/EditTearsheetForm.js +122 -0
  70. package/lib/components/EditTearsheet/index.js +21 -0
  71. package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +254 -0
  72. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +85 -0
  73. package/lib/components/EditTearsheetNarrow/index.js +13 -0
  74. package/lib/components/EmptyStates/EmptyStateContent.js +2 -1
  75. package/lib/components/ImportModal/ImportModal.js +11 -2
  76. package/lib/components/WebTerminal/WebTerminal.js +31 -15
  77. package/lib/components/WebTerminal/WebTerminalContentWrapper.js +9 -9
  78. package/lib/components/WebTerminal/hooks/index.js +69 -0
  79. package/lib/components/WebTerminal/index.js +15 -1
  80. package/lib/components/WebTerminal/preview-components/Navigation.js +6 -10
  81. package/lib/components/index.js +37 -1
  82. package/lib/global/js/package-settings.js +5 -1
  83. package/package.json +12 -12
  84. package/scss/components/Cascade/_cascade.scss +1 -1
  85. package/scss/components/CreateInfluencer/_create-influencer.scss +2 -0
  86. package/scss/components/Datagrid/_datagrid.scss +0 -1
  87. package/scss/components/Datagrid/_storybook-styles.scss +53 -0
  88. package/scss/components/Datagrid/styles/datagrid.scss +93 -12
  89. package/scss/components/Datagrid/styles/useExpandedRow.scss +0 -6
  90. package/scss/components/EditFullPage/_edit-full-page.scss +34 -0
  91. package/scss/components/EditFullPage/_index.scss +8 -0
  92. package/scss/components/EditFullPage/_storybook-styles.scss +10 -0
  93. package/scss/components/EditTearsheet/_edit-tearsheet.scss +132 -0
  94. package/scss/components/EditTearsheet/_index.scss +8 -0
  95. package/scss/components/EditTearsheet/_storybook-styles.scss +55 -0
  96. package/scss/components/EditTearsheetNarrow/_edit-tearsheet-narrow.scss +34 -0
  97. package/scss/components/EditTearsheetNarrow/_index.scss +8 -0
  98. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +10 -0
  99. package/scss/components/EmptyStates/_empty-state.scss +16 -9
  100. package/scss/components/InlineEdit/_inline-edit.scss +8 -20
  101. package/scss/components/NotificationsPanel/_notifications-panel.scss +1 -0
  102. package/scss/components/PageHeader/_page-header.scss +3 -1
  103. package/scss/components/StatusIcon/_status-icon.scss +1 -1
  104. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  105. package/scss/components/WebTerminal/_web-terminal.scss +2 -1
  106. package/scss/components/_index.scss +3 -0
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.EditTearsheetNarrow = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
18
+ var _classnames = _interopRequireDefault(require("classnames"));
19
+
20
+ var _devtools = require("../../global/js/utils/devtools");
21
+
22
+ var _settings = require("../../settings");
23
+
24
+ var _excluded = ["children", "className"];
25
+ // Carbon and package components we use.
26
+
27
+ /* TODO: @import(s) of carbon components and other package components. */
28
+ // The block part of our conventional BEM class names (blockClass__E--M).
29
+ var blockClass = "".concat(_settings.pkg.prefix, "--edit-tearsheet-narrow");
30
+ var componentName = 'EditTearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
31
+ // Default values can be included here and then assigned to the prop params,
32
+ // e.g. prop = defaults.prop,
33
+ // This gathers default values together neatly and ensures non-primitive
34
+ // values are initialized early to avoid react making unnecessary re-renders.
35
+ // Note that default values are not required for props that are 'required',
36
+ // nor for props where the component can apply undefined values reasonably.
37
+ // Default values should be provided when the component needs to make a choice
38
+ // or assumption when a prop is not supplied.
39
+ // Default values for props
40
+ // const defaults = {
41
+ // /* TODO: add defaults for relevant props if needed */
42
+ // };
43
+
44
+ /**
45
+ * TODO: A description of the component.
46
+ */
47
+
48
+ var EditTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
49
+ var children = _ref.children,
50
+ className = _ref.className,
51
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
52
+ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
53
+ className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
54
+ className, // Apply any supplied class names to the main HTML element.
55
+ // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
56
+ {// switched classes dependant on props or state
57
+ // example: [`${blockClass}__here-if-small`]: size === 'sm',
58
+ }),
59
+ ref: ref,
60
+ role: "main"
61
+ }, (0, _devtools.getDevtoolsProps)(componentName)), children);
62
+ }); // Return a placeholder if not released and not enabled by feature flag
63
+
64
+
65
+ exports.EditTearsheetNarrow = EditTearsheetNarrow;
66
+ exports.EditTearsheetNarrow = EditTearsheetNarrow = _settings.pkg.checkComponentEnabled(EditTearsheetNarrow, componentName); // The display name of the component, used by React. Note that displayName
67
+ // is used in preference to relying on function.name.
68
+
69
+ EditTearsheetNarrow.displayName = componentName; // The types and DocGen commentary for the component props,
70
+ // in alphabetical order (for consistency).
71
+ // See https://www.npmjs.com/package/prop-types#usage.
72
+
73
+ EditTearsheetNarrow.propTypes = {
74
+ /**
75
+ * Provide the contents of the EditTearsheetNarrow.
76
+ */
77
+ children: _propTypes.default.node.isRequired,
78
+
79
+ /**
80
+ * Provide an optional class to be applied to the containing node.
81
+ */
82
+ className: _propTypes.default.string
83
+ /* TODO: add types and DocGen for all props. */
84
+
85
+ };
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "EditTearsheetNarrow", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _EditTearsheetNarrow.EditTearsheetNarrow;
10
+ }
11
+ });
12
+
13
+ var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
@@ -43,7 +43,8 @@ var EmptyStateContent = function EmptyStateContent(_ref) {
43
43
  className: "".concat(blockClass, "__action-button"),
44
44
  kind: action.kind || 'tertiary',
45
45
  onClick: action.onClick,
46
- renderIcon: action.renderIcon || null
46
+ renderIcon: action.renderIcon || null,
47
+ size: 'sm'
47
48
  }), action.text), (link === null || link === void 0 ? void 0 : link.text) && (link === null || link === void 0 ? void 0 : link.href) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({}, link, {
48
49
  className: "".concat(blockClass, "__link"),
49
50
  href: link.href
@@ -25,6 +25,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
25
25
 
26
26
  var _react = _interopRequireWildcard(require("react"));
27
27
 
28
+ var _iconsReact = require("@carbon/icons-react");
29
+
28
30
  var _carbonComponentsReact = require("carbon-components-react");
29
31
 
30
32
  var _classnames = _interopRequireDefault(require("classnames"));
@@ -37,7 +39,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
37
39
 
38
40
  var _settings = require("../../settings");
39
41
 
40
- var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
42
+ var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonIcon", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
41
43
 
42
44
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
43
45
 
@@ -64,6 +66,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
64
66
  fileDropHeader = _ref.fileDropHeader,
65
67
  fileDropLabel = _ref.fileDropLabel,
66
68
  fileUploadLabel = _ref.fileUploadLabel,
69
+ inputButtonIcon = _ref.inputButtonIcon,
67
70
  inputButtonText = _ref.inputButtonText,
68
71
  inputId = _ref.inputId,
69
72
  inputLabel = _ref.inputLabel,
@@ -273,7 +276,8 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
273
276
  onClick: fetchFile,
274
277
  className: "".concat(blockClass, "__import-button"),
275
278
  size: "sm",
276
- disabled: importButtonDisabled
279
+ disabled: importButtonDisabled,
280
+ renderIcon: inputButtonIcon ? _iconsReact.Add20 : null
277
281
  }, inputButtonText)), /*#__PURE__*/_react.default.createElement("div", {
278
282
  className: "".concat(_settings.carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
279
283
  }, hasFiles && /*#__PURE__*/_react.default.createElement("p", {
@@ -363,6 +367,11 @@ ImportModal.propTypes = {
363
367
  */
364
368
  fileUploadLabel: _propTypes.default.string,
365
369
 
370
+ /**
371
+ * Button icon for import by url button
372
+ */
373
+ inputButtonIcon: _propTypes.default.bool,
374
+
366
375
  /**
367
376
  * Button text for import by url button
368
377
  */
@@ -31,7 +31,11 @@ var _carbonComponentsReact = require("carbon-components-react");
31
31
 
32
32
  var _motion = require("@carbon/motion");
33
33
 
34
- var _excluded = ["actions", "children", "className", "closeIconDescription", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open"];
34
+ var _hooks = require("./hooks");
35
+
36
+ var _devtools = require("../../global/js/utils/devtools");
37
+
38
+ var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
35
39
 
36
40
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
41
 
@@ -48,7 +52,8 @@ var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal"); // Default v
48
52
  var defaults = {
49
53
  actions: Object.freeze([]),
50
54
  documentationLinks: Object.freeze([]),
51
- documentationLinksIconDescription: 'Show documentation links'
55
+ documentationLinksIconDescription: 'Show documentation links',
56
+ isInitiallyOpen: false
52
57
  };
53
58
 
54
59
  var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
@@ -59,14 +64,19 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
59
64
  children = _ref.children,
60
65
  className = _ref.className,
61
66
  closeIconDescription = _ref.closeIconDescription,
62
- closeTerminal = _ref.closeTerminal,
63
67
  _ref$documentationLin = _ref.documentationLinks,
64
68
  documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
65
69
  _ref$documentationLin2 = _ref.documentationLinksIconDescription,
66
70
  documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
67
- open = _ref.open,
71
+ _ref$isInitiallyOpen = _ref.isInitiallyOpen,
72
+ isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
68
73
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
69
74
 
75
+ var _useWebTerminal = (0, _hooks.useWebTerminal)(),
76
+ open = _useWebTerminal.open,
77
+ closeWebTerminal = _useWebTerminal.closeWebTerminal,
78
+ openWebTerminal = _useWebTerminal.openWebTerminal;
79
+
70
80
  var _useState = (0, _react.useState)(open),
71
81
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
72
82
  shouldRender = _useState2[0],
@@ -86,6 +96,16 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
86
96
  setRender(true);
87
97
  }
88
98
  }, [open]);
99
+ /**
100
+ On render, check if user want's the web terminal to be open by default
101
+ */
102
+
103
+ (0, _react.useEffect)(function () {
104
+ if (isInitiallyOpen) {
105
+ openWebTerminal();
106
+ }
107
+ }, []); // eslint-disable-line
108
+
89
109
  /**
90
110
  When the web terminal slide in animation is complete, sets render to false.
91
111
  */
@@ -105,12 +125,12 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
105
125
  setRender(false);
106
126
  }
107
127
 
108
- closeTerminal();
128
+ closeWebTerminal();
109
129
  };
110
130
 
111
- return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
131
+ return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, _objectSpread(_objectSpread({}, rest), (0, _devtools.getDevtoolsProps)(componentName)), {
112
132
  ref: ref,
113
- className: (0, _classnames.default)([className, blockClass, (_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
133
+ className: (0, _classnames.default)([blockClass, className, (_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
114
134
  style: {
115
135
  animation: !prefersReducedMotion && webTerminalAnimationName
116
136
  },
@@ -122,6 +142,7 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
122
142
  }, showDocumentationLinks && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
123
143
  renderIcon: _iconsReact.Help16,
124
144
  iconDescription: documentationLinksIconDescription,
145
+ ariaLabel: documentationLinksIconDescription,
125
146
  menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
126
147
  size: "lg"
127
148
  }, documentationLinks.map(function (_ref4, i) {
@@ -189,23 +210,18 @@ WebTerminal.propTypes = {
189
210
  */
190
211
  closeIconDescription: _propTypes.default.string.isRequired,
191
212
 
192
- /**
193
- * Function that should set the open prop to false
194
- */
195
- closeTerminal: _propTypes.default.func.isRequired,
196
-
197
213
  /**
198
214
  * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
199
215
  */
200
216
  documentationLinks: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread({}, _carbonComponentsReact.OverflowMenuItem.propTypes))),
201
217
 
202
218
  /**
203
- * Icon description for the documentation link overflow menu
219
+ * Description for the documentation link overflow menu tooltip
204
220
  */
205
221
  documentationLinksIconDescription: _propTypes.default.string,
206
222
 
207
223
  /**
208
- * Boolean that determines if the web terminal is opened or closed
224
+ * Optionally pass if the web terminal should be open by default
209
225
  */
210
- open: _propTypes.default.bool.isRequired
226
+ isInitiallyOpen: _propTypes.default.bool
211
227
  };
@@ -21,18 +21,23 @@ var _classnames = _interopRequireDefault(require("classnames"));
21
21
 
22
22
  var _settings = require("../../settings");
23
23
 
24
- var _excluded = ["children", "isTerminalOpen"];
24
+ var _hooks = require("./hooks");
25
+
26
+ var _excluded = ["children"];
25
27
  // The block part of our conventional BEM class names (blockClass__E--M).
26
28
  var componentName = 'WebTerminalContentWrapper';
27
29
  var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal-content-wrapper");
28
30
 
29
31
  var WebTerminalContentWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
30
32
  var children = _ref.children,
31
- isTerminalOpen = _ref.isTerminalOpen,
32
33
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
34
+
35
+ var _useWebTerminal = (0, _hooks.useWebTerminal)(),
36
+ open = _useWebTerminal.open;
37
+
33
38
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
34
39
  ref: ref,
35
- className: (0, _classnames.default)([blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "--open"), isTerminalOpen)])
40
+ className: (0, _classnames.default)([blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "--open"), open)])
36
41
  }, rest), children);
37
42
  }); // Return a placeholder if not released and not enabled by feature flag
38
43
 
@@ -49,10 +54,5 @@ WebTerminalContentWrapper.propTypes = {
49
54
  /**
50
55
  * Pass in content as children.
51
56
  */
52
- children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
53
-
54
- /**
55
- * A boolean to determine if the terminal is open.
56
- */
57
- isTerminalOpen: _propTypes.default.bool.isRequired
57
+ children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
58
58
  };
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.useWebTerminal = exports.WebTerminalProvider = exports.WebTerminalContext = void 0;
11
+
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
18
+ var _settings = require("../../../settings");
19
+
20
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
+
22
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
+
24
+ var WebTerminalContext = /*#__PURE__*/(0, _react.createContext)();
25
+ exports.WebTerminalContext = WebTerminalContext;
26
+ var componentName = 'WebTerminalProvider';
27
+
28
+ var WebTerminalProvider = function WebTerminalProvider(_ref) {
29
+ var children = _ref.children;
30
+
31
+ var _useState = (0, _react.useState)(false),
32
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
33
+ open = _useState2[0],
34
+ setOpen = _useState2[1];
35
+
36
+ var openWebTerminal = (0, _react.useCallback)(function () {
37
+ return setOpen(true);
38
+ }, []);
39
+ var closeWebTerminal = (0, _react.useCallback)(function () {
40
+ return setOpen(false);
41
+ }, []);
42
+ var toggleWebTerminal = (0, _react.useCallback)(function () {
43
+ return setOpen(!open);
44
+ }, [open]);
45
+ return /*#__PURE__*/_react.default.createElement(WebTerminalContext.Provider, {
46
+ value: {
47
+ open: open,
48
+ openWebTerminal: openWebTerminal,
49
+ closeWebTerminal: closeWebTerminal,
50
+ toggleWebTerminal: toggleWebTerminal
51
+ }
52
+ }, children);
53
+ }; // Return a placeholder if not released and not enabled by feature flag
54
+
55
+
56
+ exports.WebTerminalProvider = WebTerminalProvider;
57
+ exports.WebTerminalProvider = WebTerminalProvider = _settings.pkg.checkComponentEnabled(WebTerminalProvider, componentName);
58
+ WebTerminalProvider.propTypes = {
59
+ /**
60
+ * Provide your own terminal component as children to show up in the web terminal
61
+ */
62
+ children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
63
+ }; // Custom hook that exposes the provided value from context
64
+
65
+ var useWebTerminal = function useWebTerminal() {
66
+ return (0, _react.useContext)(WebTerminalContext);
67
+ };
68
+
69
+ exports.useWebTerminal = useWebTerminal;
@@ -15,7 +15,21 @@ Object.defineProperty(exports, "WebTerminalContentWrapper", {
15
15
  return _WebTerminalContentWrapper.WebTerminalContentWrapper;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "WebTerminalProvider", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _hooks.WebTerminalProvider;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "useWebTerminal", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _hooks.useWebTerminal;
28
+ }
29
+ });
18
30
 
19
31
  var _WebTerminal = require("./WebTerminal");
20
32
 
21
- var _WebTerminalContentWrapper = require("./WebTerminalContentWrapper");
33
+ var _WebTerminalContentWrapper = require("./WebTerminalContentWrapper");
34
+
35
+ var _hooks = require("./hooks");
@@ -13,10 +13,12 @@ var _carbonComponentsReact = require("carbon-components-react");
13
13
 
14
14
  var _iconsReact = require("@carbon/icons-react");
15
15
 
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
16
+ var _hooks = require("../hooks");
17
+
18
+ var Navigation = function Navigation() {
19
+ var _useWebTerminal = (0, _hooks.useWebTerminal)(),
20
+ openWebTerminal = _useWebTerminal.openWebTerminal;
17
21
 
18
- var Navigation = function Navigation(_ref) {
19
- var openTerminal = _ref.openTerminal;
20
22
  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Header, {
21
23
  "aria-label": "IBM Platform Name"
22
24
  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderName, {
@@ -24,7 +26,7 @@ var Navigation = function Navigation(_ref) {
24
26
  prefix: "IBM"
25
27
  }, "[Platform]"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalBar, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
26
28
  "aria-label": "Web terminal",
27
- onClick: openTerminal
29
+ onClick: openWebTerminal
28
30
  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Terminal20, null)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
29
31
  "aria-label": "Search",
30
32
  onClick: function onClick() {}
@@ -34,11 +36,5 @@ var Navigation = function Navigation(_ref) {
34
36
  }, /*#__PURE__*/_react.default.createElement(_iconsReact.User20, null))));
35
37
  };
36
38
 
37
- Navigation.propTypes = {
38
- /**
39
- * Opens the terminal
40
- */
41
- openTerminal: _propTypes.default.func.isRequired
42
- };
43
39
  var _default = Navigation;
44
40
  exports.default = _default;
@@ -93,12 +93,30 @@ Object.defineProperty(exports, "Datagrid", {
93
93
  return _Datagrid.Datagrid;
94
94
  }
95
95
  });
96
+ Object.defineProperty(exports, "EditFullPage", {
97
+ enumerable: true,
98
+ get: function get() {
99
+ return _EditFullPage.EditFullPage;
100
+ }
101
+ });
96
102
  Object.defineProperty(exports, "EditSidePanel", {
97
103
  enumerable: true,
98
104
  get: function get() {
99
105
  return _EditSidePanel.EditSidePanel;
100
106
  }
101
107
  });
108
+ Object.defineProperty(exports, "EditTearsheet", {
109
+ enumerable: true,
110
+ get: function get() {
111
+ return _EditTearsheet.EditTearsheet;
112
+ }
113
+ });
114
+ Object.defineProperty(exports, "EditTearsheetNarrow", {
115
+ enumerable: true,
116
+ get: function get() {
117
+ return _EditTearsheetNarrow.EditTearsheetNarrow;
118
+ }
119
+ });
102
120
  Object.defineProperty(exports, "EmptyState", {
103
121
  enumerable: true,
104
122
  get: function get() {
@@ -303,6 +321,12 @@ Object.defineProperty(exports, "WebTerminalContentWrapper", {
303
321
  return _WebTerminal.WebTerminalContentWrapper;
304
322
  }
305
323
  });
324
+ Object.defineProperty(exports, "WebTerminalProvider", {
325
+ enumerable: true,
326
+ get: function get() {
327
+ return _WebTerminal.WebTerminalProvider;
328
+ }
329
+ });
306
330
  Object.defineProperty(exports, "useActionsColumn", {
307
331
  enumerable: true,
308
332
  get: function get() {
@@ -387,6 +411,12 @@ Object.defineProperty(exports, "useStickyColumn", {
387
411
  return _Datagrid.useStickyColumn;
388
412
  }
389
413
  });
414
+ Object.defineProperty(exports, "useWebTerminal", {
415
+ enumerable: true,
416
+ get: function get() {
417
+ return _WebTerminal.useWebTerminal;
418
+ }
419
+ });
390
420
 
391
421
  var _AboutModal = require("./AboutModal");
392
422
 
@@ -454,4 +484,10 @@ var _InlineEdit = require("./InlineEdit");
454
484
 
455
485
  var _DataSpreadsheet = require("./DataSpreadsheet");
456
486
 
457
- var _Datagrid = require("./Datagrid");
487
+ var _Datagrid = require("./Datagrid");
488
+
489
+ var _EditTearsheet = require("./EditTearsheet");
490
+
491
+ var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
492
+
493
+ var _EditFullPage = require("./EditFullPage");
@@ -66,10 +66,14 @@ var defaults = {
66
66
  ToolbarGroup: false,
67
67
  WebTerminal: false,
68
68
  WebTerminalContentWrapper: false,
69
+ WebTerminalProvider: false,
69
70
  EditSidePanel: false,
70
71
  CancelableTextEdit: false,
71
72
  DataSpreadsheet: false,
72
- Datagrid: false
73
+ Datagrid: false,
74
+ EditTearsheet: false,
75
+ EditTearsheetNarrow: false,
76
+ EditFullPage: false
73
77
  /* new component flags here - comment used by generate CLI */
74
78
 
75
79
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "1.23.0",
4
+ "version": "1.25.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -50,27 +50,27 @@
50
50
  "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
51
51
  },
52
52
  "devDependencies": {
53
- "@babel/cli": "^7.18.6",
54
- "@babel/core": "^7.18.6",
55
- "babel-preset-ibm-cloud-cognitive": "^0.14.16",
53
+ "@babel/cli": "^7.18.10",
54
+ "@babel/core": "^7.18.10",
55
+ "babel-preset-ibm-cloud-cognitive": "^0.14.18",
56
56
  "chalk": "^4.1.2",
57
57
  "change-case": "^4.1.2",
58
58
  "copyfiles": "^2.4.1",
59
59
  "cross-env": "^7.0.3",
60
60
  "fs-extra": "^10.1.0",
61
61
  "glob": "^8.0.3",
62
- "jest": "^28.1.2",
63
- "jest-config-ibm-cloud-cognitive": "^0.24.1",
64
- "jest-environment-jsdom": "^28.1.2",
62
+ "jest": "^28.1.3",
63
+ "jest-config-ibm-cloud-cognitive": "^0.24.3",
64
+ "jest-environment-jsdom": "^28.1.3",
65
65
  "namor": "^1.1.2",
66
- "npm-check-updates": "^15.0.1",
66
+ "npm-check-updates": "^16.0.5",
67
67
  "npm-run-all": "^4.1.5",
68
68
  "rimraf": "^3.0.2",
69
- "sass": "^1.53.0",
69
+ "sass": "^1.54.0",
70
70
  "yargs": "^17.5.1"
71
71
  },
72
72
  "dependencies": {
73
- "@babel/runtime": "^7.18.6",
73
+ "@babel/runtime": "^7.18.9",
74
74
  "@carbon/telemetry": "^0.1.0",
75
75
  "immutability-helper": "^3.1.1",
76
76
  "react-dnd": "^15.1.2",
@@ -88,10 +88,10 @@
88
88
  "@carbon/themes": "^10.54.0",
89
89
  "@carbon/type": "^10.44.0",
90
90
  "carbon-components": "^10.57.2",
91
- "carbon-components-react": "^7.57.2",
91
+ "carbon-components-react": "^7.57.4",
92
92
  "carbon-icons": "^7.0.7",
93
93
  "react": "^16.8.6 || ^17.0.1",
94
94
  "react-dom": "^16.8.6 || ^17.0.1"
95
95
  },
96
- "gitHead": "106f29b7c8ca8bf729d0c08d12c3f818cebc7995"
96
+ "gitHead": "821225dec46fc7aea18751433a39ddc0c76ad2da"
97
97
  }
@@ -30,7 +30,7 @@
30
30
  .#{$block-class}__element,
31
31
  .#{$block-class}__col {
32
32
  @media (prefers-reduced-motion: no-preference) {
33
- // stylelint-disable-next-line carbon/motion-token-use
33
+ // stylelint-disable-next-line carbon/motion-duration-use
34
34
  animation: $animationProps fade; // stylelint note animation duration declared in $animationProps
35
35
  animation-fill-mode: forwards;
36
36
  opacity: 0;
@@ -61,6 +61,7 @@
61
61
  }
62
62
  .#{$block-class}__side-nav-opening,
63
63
  .#{$block-class}__progress-indicator-opening {
64
+ // stylelint-disable-next-line carbon/motion-easing-use
64
65
  animation: influencer-menu-entrance $duration--moderate-02 1;
65
66
  animation-fill-mode: forwards;
66
67
  @include carbon--motion(entrance, productive);
@@ -68,6 +69,7 @@
68
69
 
69
70
  .#{$block-class}__side-nav-closing,
70
71
  .#{$block-class}__progress-indicator-closing {
72
+ // stylelint-disable-next-line carbon/motion-easing-use
71
73
  animation: influencer-menu-exit $duration--moderate-02 1;
72
74
  animation-fill-mode: forwards;
73
75
  @include carbon--motion(exit, productive);
@@ -38,7 +38,6 @@
38
38
  display: flex;
39
39
  overflow: hidden;
40
40
  width: 100%;
41
- height: 100%;
42
41
  flex-direction: column;
43
42
 
44
43
  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */