@carbon/ibm-products 1.50.0 → 1.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/css/index-full-carbon.css +42 -18
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +38 -11
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +42 -18
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +2 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +42 -18
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +2 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +8 -8
  18. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  19. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
  20. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
  21. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  22. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +14 -0
  23. package/es/components/Datagrid/useFiltering.js +4 -2
  24. package/es/components/Datagrid/useOnRowClick.js +9 -1
  25. package/es/components/Datagrid/useSelectRows.js +2 -0
  26. package/es/components/EditInPlace/EditInPlace.js +43 -0
  27. package/es/components/EditInPlace/index.js +8 -0
  28. package/es/components/InlineEdit/InlineEdit.js +5 -1
  29. package/es/components/InlineEditV1/InlineEditV1.js +5 -2
  30. package/es/components/InlineEditV2/InlineEditV2.js +51 -15
  31. package/es/components/index.js +1 -0
  32. package/es/global/js/package-settings.js +1 -0
  33. package/es/settings.js +15 -0
  34. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
  35. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  36. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
  37. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
  38. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  39. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +15 -0
  40. package/lib/components/Datagrid/useFiltering.js +4 -2
  41. package/lib/components/Datagrid/useOnRowClick.js +9 -1
  42. package/lib/components/Datagrid/useSelectRows.js +2 -0
  43. package/lib/components/EditInPlace/EditInPlace.js +46 -0
  44. package/lib/components/EditInPlace/index.js +12 -0
  45. package/lib/components/InlineEdit/InlineEdit.js +5 -1
  46. package/lib/components/InlineEditV1/InlineEditV1.js +5 -2
  47. package/lib/components/InlineEditV2/InlineEditV2.js +53 -16
  48. package/lib/components/index.js +7 -0
  49. package/lib/global/js/package-settings.js +1 -0
  50. package/lib/settings.js +16 -1
  51. package/package.json +2 -2
  52. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +10 -7
  53. package/scss/components/InlineEditV2/_inline-edit-v2.scss +52 -11
  54. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -2
@@ -53,7 +53,12 @@ var FilterPanel = function FilterPanel(_ref) {
53
53
  _ref$searchLabelText = _ref.searchLabelText,
54
54
  searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
55
55
  _ref$searchPlaceholde = _ref.searchPlaceholder,
56
- searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde;
56
+ searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
57
+ _ref$initialFilters = _ref.initialFilters,
58
+ initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
59
+ // Save the initial filters we only need the filters once
60
+ var initialFiltersRef = useRef(initialFilters);
61
+
57
62
  /** State */
58
63
  var _useState = useState(false),
59
64
  _useState2 = _slicedToArray(_useState, 2),
@@ -63,7 +68,8 @@ var FilterPanel = function FilterPanel(_ref) {
63
68
  updateMethod: updateMethod,
64
69
  filters: filterSections,
65
70
  setAllFilters: setAllFilters,
66
- variation: PANEL
71
+ variation: PANEL,
72
+ initialFilters: initialFiltersRef.current
67
73
  }),
68
74
  filtersState = _useFilters.filtersState,
69
75
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -214,6 +220,7 @@ var FilterPanel = function FilterPanel(_ref) {
214
220
  filters = _ref2$filters === void 0 ? [] : _ref2$filters,
215
221
  hasAccordion = _ref2.hasAccordion;
216
222
  return /*#__PURE__*/React.createElement("div", {
223
+ key: categoryTitle,
217
224
  className: "".concat(componentClass, "__category")
218
225
  }, categoryTitle && /*#__PURE__*/React.createElement("div", {
219
226
  className: "".concat(componentClass, "__category-title")
@@ -234,6 +241,14 @@ FilterPanel.propTypes = {
234
241
  closeIconDescription: PropTypes.string,
235
242
  filterPanelMinHeight: PropTypes.number,
236
243
  filterSections: PropTypes.array,
244
+ /**
245
+ * Filters that should be applied on load
246
+ */
247
+ initialFilters: PropTypes.arrayOf(PropTypes.shape({
248
+ id: PropTypes.string.isRequired,
249
+ type: PropTypes.string.isRequired,
250
+ value: PropTypes.any.isRequired
251
+ })),
237
252
  onApply: PropTypes.func,
238
253
  onCancel: PropTypes.func,
239
254
  onPanelClose: PropTypes.func,
@@ -21,13 +21,14 @@ var useFilters = function useFilters(_ref) {
21
21
  _ref$filters = _ref.filters,
22
22
  filters = _ref$filters === void 0 ? [] : _ref$filters,
23
23
  setAllFilters = _ref.setAllFilters,
24
- variation = _ref.variation;
24
+ variation = _ref.variation,
25
+ initialFilters = _ref.initialFilters;
25
26
  /** State */
26
- var _useInitialStateFromF = useInitialStateFromFilters(filters, variation),
27
+ var _useInitialStateFromF = useInitialStateFromFilters(filters, variation, initialFilters),
27
28
  _useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
28
29
  filtersState = _useInitialStateFromF2[0],
29
30
  setFiltersState = _useInitialStateFromF2[1];
30
- var _useState = useState([]),
31
+ var _useState = useState(initialFilters),
31
32
  _useState2 = _slicedToArray(_useState, 2),
32
33
  filtersObjectArray = _useState2[0],
33
34
  setFiltersObjectArray = _useState2[1];
@@ -44,8 +45,11 @@ var useFilters = function useFilters(_ref) {
44
45
  setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
45
46
  };
46
47
  var reset = function reset() {
48
+ // When we reset we want the "initialFilters" to be an empty array
49
+ var resetFiltersArray = [];
50
+
47
51
  // Get the initial values for the filters
48
- var initialFiltersState = getInitialStateFromFilters(filters, variation);
52
+ var initialFiltersState = getInitialStateFromFilters(filters, variation, resetFiltersArray);
49
53
  var initialFiltersObjectArray = [];
50
54
 
51
55
  // Set the state to the initial values
@@ -11,7 +11,8 @@ import { FLYOUT } from '../constants';
11
11
  import { getInitialStateFromFilters } from '../utils';
12
12
  var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
13
13
  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
14
- var _useState = useState(getInitialStateFromFilters(filters, variation)),
14
+ var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
15
+ var _useState = useState(getInitialStateFromFilters(filters, variation, initialFilters)),
15
16
  _useState2 = _slicedToArray(_useState, 2),
16
17
  state = _useState2[0],
17
18
  setState = _useState2[1];
@@ -6,10 +6,21 @@
6
6
  */
7
7
 
8
8
  import { CHECKBOX, DATE, DROPDOWN, FLYOUT, NUMBER, PANEL, RADIO } from './constants';
9
+ var applyInitialFilters = function applyInitialFilters(filterState, initialFilters) {
10
+ Object.keys(filterState).forEach(function (key) {
11
+ var hasInitialFilter = initialFilters.find(function (filter) {
12
+ return filter.id === key;
13
+ });
14
+ if (hasInitialFilter) {
15
+ filterState[key].value = hasInitialFilter.value;
16
+ }
17
+ });
18
+ };
9
19
 
10
20
  // This functions takes the filters passed in and makes an object to track it's state
11
21
  export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
12
22
  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
23
+ var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
13
24
  var initialFilterState = {};
14
25
  var setInitialState = function setInitialState(_ref) {
15
26
  var type = _ref.type,
@@ -66,5 +77,8 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
66
77
  } else {
67
78
  console.error('No variation passed into useInitialStateFromFilters');
68
79
  }
80
+ if (initialFilters.length > 0) {
81
+ applyInitialFilters(initialFilterState, initialFilters);
82
+ }
69
83
  return initialFilterState;
70
84
  };
@@ -65,11 +65,13 @@ var useFiltering = function useFiltering(hooks) {
65
65
  setAllFilters = instance.setAllFilters,
66
66
  setFilter = instance.setFilter,
67
67
  headers = instance.headers,
68
- data = instance.data;
68
+ data = instance.data,
69
+ state = instance.state;
69
70
  var defaultProps = {
70
71
  variation: 'flyout',
71
72
  updateMethod: BATCH,
72
- panelIconDescription: 'Open filter panel'
73
+ panelIconDescription: 'Open filter panel',
74
+ initialFilters: state.filters
73
75
  };
74
76
  var getFilterFlyoutProps = function getFilterFlyoutProps() {
75
77
  return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
@@ -24,9 +24,17 @@ var useOnRowClick = function useOnRowClick(hooks) {
24
24
  toggleRowSelected(id, true);
25
25
  }
26
26
  };
27
+ var onKeyDown = function onKeyDown(event) {
28
+ var key = event.key;
29
+ if (key === 'Enter') {
30
+ onClick();
31
+ }
32
+ };
27
33
  return [props, {
28
- onClick: onClick
34
+ onClick: onClick,
35
+ onKeyDown: onKeyDown
29
36
  }, {
37
+ tabIndex: 0,
30
38
  style: {
31
39
  cursor: 'pointer'
32
40
  }
@@ -71,6 +71,7 @@ var SelectRow = function SelectRow(datagridState) {
71
71
  radio = datagridState.radio,
72
72
  toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
73
73
  onRadioSelect = datagridState.onRadioSelect,
74
+ onRowSelect = datagridState.onRowSelect,
74
75
  columns = datagridState.columns,
75
76
  withStickyColumn = datagridState.withStickyColumn;
76
77
  var _useState = useState(window.innerWidth),
@@ -103,6 +104,7 @@ var SelectRow = function SelectRow(datagridState) {
103
104
  }
104
105
  }
105
106
  onChange(e);
107
+ onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row, e);
106
108
  },
107
109
  id: "".concat(tableId, "-").concat(row.index),
108
110
  name: "".concat(tableId, "-").concat(row.index, "-name"),
@@ -0,0 +1,43 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["v2"];
4
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+ /**
7
+ * Copyright IBM Corp. 2022, 2022
8
+ *
9
+ * This source code is licensed under the Apache-2.0 license found in the
10
+ * LICENSE file in the root directory of this source tree.
11
+ */
12
+
13
+ import React, { forwardRef } from 'react';
14
+ import PropTypes from 'prop-types';
15
+ import { pkg } from '../../settings';
16
+ import { InlineEditV1 } from '../InlineEditV1';
17
+ import { InlineEditV2 } from '../InlineEditV2';
18
+
19
+ /**
20
+ * this is a wrapper component that will allow us to support the rename of InlineEdit to EditInPlace
21
+ *
22
+ * if the user passes in the v2 feature flag the v2 version of the component will be rendered
23
+ * since this is a temporary solution the named export should just remain InlineEdit unlike how
24
+ * Card works as a base layer for Productive and Expressive cards.
25
+ */
26
+
27
+ var componentName = 'EditInPlace';
28
+ export var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
29
+ var v2 = _ref.v2,
30
+ rest = _objectWithoutProperties(_ref, _excluded);
31
+ var props = _objectSpread(_objectSpread({}, rest), {}, {
32
+ ref: ref
33
+ });
34
+ if (v2 === true) {
35
+ return /*#__PURE__*/React.createElement(InlineEditV2, props);
36
+ }
37
+ return /*#__PURE__*/React.createElement(InlineEditV1, props);
38
+ });
39
+ EditInPlace = pkg.checkComponentEnabled(EditInPlace, componentName);
40
+ EditInPlace.displayName = componentName;
41
+ EditInPlace.propTypes = {
42
+ v2: PropTypes.bool
43
+ };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2022, 2022
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
+ export { EditInPlace } from './EditInPlace';
@@ -35,8 +35,12 @@ export var InlineEdit = /*#__PURE__*/forwardRef(function (_ref, ref) {
35
35
  }
36
36
  return /*#__PURE__*/React.createElement(InlineEditV1, props);
37
37
  });
38
- InlineEdit = pkg.checkComponentEnabled(InlineEdit, componentName);
38
+ InlineEdit.deprecated = {
39
+ details: "The InlineEdit component is being renamed to EditInPlace in the next major version of @carbon/ibm-products. You can prepare by updating your usage of InlineEdit to EditInPlace.",
40
+ level: 'warn'
41
+ };
39
42
  InlineEdit.displayName = componentName;
43
+ InlineEdit = pkg.checkComponentEnabled(InlineEdit, componentName);
40
44
  InlineEdit.propTypes = {
41
45
  v2: PropTypes.bool
42
46
  };
@@ -18,7 +18,6 @@ import React, { useRef, useState } from 'react';
18
18
  import PropTypes from 'prop-types';
19
19
  import cx from 'classnames';
20
20
  import { getDevtoolsProps } from '../../global/js/utils/devtools';
21
- import pconsole from '../../global/js/utils/pconsole';
22
21
  import { pkg, carbon } from '../../settings';
23
22
 
24
23
  // Carbon and package components we use.
@@ -83,7 +82,6 @@ export var InlineEditV1 = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
83
82
  var showValidation = invalid; // || warn;
84
83
  var validationText = invalidText; // || warnText;
85
84
  var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled16, null) : null;
86
- pconsole.warn("".concat(componentName, ": the v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."));
87
85
 
88
86
  // sanitize the tooltip values
89
87
  var alignIsObject = _typeof(buttonTooltipAlignment) === 'object';
@@ -304,6 +302,11 @@ export var InlineEditV1 = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
304
302
  // The display name of the component, used by React. Note that displayName
305
303
  // is used in preference to relying on function.name.
306
304
  InlineEditV1.displayName = componentName;
305
+ InlineEditV1.deprecated = {
306
+ level: 'warn',
307
+ details: "The v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."
308
+ };
309
+ pkg.logDeprecated(InlineEditV1, componentName);
307
310
 
308
311
  // The types and DocGen commentary for the component props,
309
312
  // in alphabetical order (for consistency).
@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "value"];
5
+ var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "size", "saveLabel", "value"];
6
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
8
  /**
7
9
  * Copyright IBM Corp. 2022, 2022
8
10
  *
@@ -21,17 +23,25 @@ import { pkg, carbon } from '../../settings';
21
23
  import { getDevtoolsProps } from '../../global/js/utils/devtools';
22
24
  var componentName = 'InlineEditV2';
23
25
  var blockClass = "".concat(pkg.prefix, "--inline-edit-v2");
26
+ var defaults = {
27
+ size: 'sm'
28
+ };
24
29
  export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
30
  var _cx;
26
31
  var cancelLabel = _ref.cancelLabel,
32
+ editAlwaysVisible = _ref.editAlwaysVisible,
27
33
  editLabel = _ref.editLabel,
28
34
  id = _ref.id,
35
+ inheritTypography = _ref.inheritTypography,
29
36
  invalid = _ref.invalid,
30
- invalidLabel = _ref.invalidLabel,
37
+ deprecated_invalidLabel = _ref.invalidLabel,
38
+ invalidText = _ref.invalidText,
31
39
  labelText = _ref.labelText,
32
40
  onCancel = _ref.onCancel,
33
41
  onChange = _ref.onChange,
34
42
  onSave = _ref.onSave,
43
+ _ref$size = _ref.size,
44
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
35
45
  saveLabel = _ref.saveLabel,
36
46
  value = _ref.value,
37
47
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -129,7 +139,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
129
139
  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
130
140
  ref: ref
131
141
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
132
- className: cx(blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
142
+ className: cx(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _defineProperty(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), _defineProperty(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
133
143
  onFocus: onFocusHandler,
134
144
  onBlur: onBlurHandler
135
145
  }, /*#__PURE__*/React.createElement("label", {
@@ -137,7 +147,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
137
147
  htmlFor: id
138
148
  }, labelText), /*#__PURE__*/React.createElement("input", {
139
149
  id: id,
140
- className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--sm")),
150
+ className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--").concat(size)),
141
151
  type: "text",
142
152
  value: value,
143
153
  onChange: onChangeHandler,
@@ -146,13 +156,16 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
146
156
  ,
147
157
  onKeyDown: onKeyHandler
148
158
  }), /*#__PURE__*/React.createElement("div", {
159
+ className: "".concat(blockClass, "__ellipsis"),
160
+ "aria-hidden": !focused
161
+ }, "\u2026"), /*#__PURE__*/React.createElement("div", {
149
162
  className: "".concat(blockClass, "__toolbar")
150
- }, focused ? /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled16, {
163
+ }, invalid && /*#__PURE__*/React.createElement(WarningFilled16, {
151
164
  className: "".concat(blockClass, "__warning-icon")
152
- }), /*#__PURE__*/React.createElement(Button, {
165
+ }), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
153
166
  hasIconOnly: true,
154
167
  renderIcon: Close24,
155
- size: "sm",
168
+ size: size,
156
169
  iconDescription: cancelLabel,
157
170
  onClick: onCancelHandler,
158
171
  kind: "ghost",
@@ -162,7 +175,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
162
175
  }), /*#__PURE__*/React.createElement(Button, {
163
176
  hasIconOnly: true,
164
177
  renderIcon: Checkmark24,
165
- size: "sm",
178
+ size: size,
166
179
  iconDescription: saveLabel,
167
180
  onClick: onSaveHandler,
168
181
  kind: "ghost",
@@ -171,12 +184,12 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
171
184
  className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
172
185
  disabled: !canSave
173
186
  })) : /*#__PURE__*/React.createElement(Button, {
174
- className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
187
+ className: cx("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), _defineProperty({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
175
188
  hasIconOnly: true
176
189
  // renderIcon={readOnly ? EditOff24 : Edit24}
177
190
  ,
178
191
  renderIcon: Edit24,
179
- size: "sm"
192
+ size: size
180
193
  // iconDescription={readOnly ? readOnlyLabel : editLabel}
181
194
  ,
182
195
  iconDescription: editLabel,
@@ -184,16 +197,27 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
184
197
  kind: "ghost",
185
198
  tabIndex: 0,
186
199
  key: "edit"
187
- }))), focused && invalid && /*#__PURE__*/React.createElement("p", {
200
+ }))), invalid && /*#__PURE__*/React.createElement("p", {
188
201
  className: "".concat(blockClass, "__warning-text")
189
- }, invalidLabel));
202
+ }, invalidText !== null && invalidText !== void 0 ? invalidText : deprecated_invalidLabel));
190
203
  });
191
204
  InlineEditV2.displayName = componentName;
192
- InlineEditV2.propTypes = {
205
+ export var deprecatedProps = {
206
+ /**
207
+ * **Deprecated**
208
+ * invalidLabel was misnamed, using invalidText to match Carbon
209
+ */
210
+ invalidText: PropTypes.string
211
+ };
212
+ InlineEditV2.propTypes = _objectSpread({
193
213
  /**
194
214
  * label for cancel button
195
215
  */
196
216
  cancelLabel: PropTypes.string.isRequired,
217
+ /**
218
+ * By default the edit icon is shown on hover only.
219
+ */
220
+ editAlwaysVisible: PropTypes.bool,
197
221
  /**
198
222
  * label for edit button
199
223
  */
@@ -202,6 +226,14 @@ InlineEditV2.propTypes = {
202
226
  * Specify a custom id for the input
203
227
  */
204
228
  id: PropTypes.string.isRequired,
229
+ /**
230
+ * inheritTypography - causes the text entry field to inherit typography settings
231
+ * assigned to the container. This is useful when editing titles for instance.
232
+ *
233
+ * NOTE: The size property limits the vertical size of the input element.
234
+ * Inherited font's should be selected to fit within the size selected.
235
+ */
236
+ inheritTypography: PropTypes.bool,
205
237
  /**
206
238
  * determines if the input is invalid
207
239
  */
@@ -209,7 +241,7 @@ InlineEditV2.propTypes = {
209
241
  /**
210
242
  * text that is displayed if the input is invalid
211
243
  */
212
- invalidLabel: PropTypes.string,
244
+ invalidText: PropTypes.string,
213
245
  /**
214
246
  * Provide the text that will be read by a screen reader when visiting this control
215
247
  */
@@ -238,11 +270,15 @@ InlineEditV2.propTypes = {
238
270
  * label for save button
239
271
  */
240
272
  saveLabel: PropTypes.string.isRequired,
273
+ /**
274
+ * vertical size of control
275
+ */
276
+ size: PropTypes.oneOf(['sm', 'md', 'lg']),
241
277
  /**
242
278
  * current value of the input
243
279
  */
244
280
  value: PropTypes.string.isRequired
245
- };
281
+ }, deprecatedProps);
246
282
  InlineEditV2.defaultProps = {
247
283
  invalid: false,
248
284
  invalidLabel: ''
@@ -43,4 +43,5 @@ export { EditTearsheetNarrow } from './EditTearsheetNarrow';
43
43
  export { EditFullPage } from './EditFullPage';
44
44
  export { EditUpdateCards } from './EditUpdateCards';
45
45
  export { InlineEdit } from './InlineEdit';
46
+ export { EditInPlace } from './EditInPlace';
46
47
  export { NonLinearReading } from './NonLinearReading';
@@ -25,6 +25,7 @@ var defaults = {
25
25
  CreateTearsheet: true,
26
26
  CreateTearsheetStep: true,
27
27
  CreateTearsheetDivider: true,
28
+ EditInPlace: true,
28
29
  EmptyState: true,
29
30
  ErrorEmptyState: true,
30
31
  ExportModal: true,
package/es/settings.js CHANGED
@@ -3,6 +3,7 @@ import pkgSettings from './global/js/package-settings';
3
3
  import { settings as carbonSettings } from 'carbon-components';
4
4
  import React from 'react';
5
5
  import { themes } from '@carbon/themes';
6
+ import pconsole from './global/js/utils/pconsole';
6
7
  export var carbon = {
7
8
  get prefix() {
8
9
  return carbonSettings.prefix;
@@ -14,6 +15,19 @@ export var carbon = {
14
15
  return themes;
15
16
  }
16
17
  };
18
+ var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
19
+ return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
20
+ };
21
+ pkgSettings.logDeprecated = function (component, name) {
22
+ if (component !== null && component !== void 0 && component.deprecated) {
23
+ var _pconsole$level;
24
+ var _component$deprecated = component.deprecated,
25
+ level = _component$deprecated.level,
26
+ details = _component$deprecated.details;
27
+ var logUsing = (_pconsole$level = pconsole === null || pconsole === void 0 ? void 0 : pconsole[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : pconsole.error;
28
+ logUsing(componentDeprecatedWarning(name || component.displayName, details));
29
+ }
30
+ };
17
31
 
18
32
  // Check that a component is enabled. This function returns a stub which checks
19
33
  // the component status on first use and then renders as the component or as
@@ -21,6 +35,7 @@ export var carbon = {
21
35
  // Note that the returned stub carries any other properties which had already
22
36
  // been assigned (eg propTypes, displayName, etc).
23
37
  pkgSettings.checkComponentEnabled = function (component, name) {
38
+ pkgSettings.logDeprecated(component, name);
24
39
  if (component.render) {
25
40
  // The component is a forward-ref, so make a stub forward-ref.
26
41
  var forward = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -86,7 +86,8 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
86
86
  id: "".concat(tableId, "-select-all-checkbox-id")
87
87
  }))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
88
88
  renderIcon: _iconsReact.CaretDown16,
89
- size: "sm"
89
+ size: "sm",
90
+ menuOptionsClass: "".concat(blockClass, "__select-all-toggle-overflow")
90
91
  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
91
92
  itemText: allPageRowsLabel,
92
93
  requireTitle: true,
@@ -54,7 +54,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
54
54
  secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
55
55
  setAllFilters = _ref.setAllFilters,
56
56
  _ref$data = _ref.data,
57
- data = _ref$data === void 0 ? [] : _ref$data;
57
+ data = _ref$data === void 0 ? [] : _ref$data,
58
+ _ref$initialFilters = _ref.initialFilters,
59
+ initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
60
+ // Save the initial filters we only need the filters once when it loads
61
+ var initialFiltersRef = (0, _react.useRef)(initialFilters);
62
+
58
63
  /** State */
59
64
  var _useState = (0, _react.useState)(false),
60
65
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -64,7 +69,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
64
69
  updateMethod: updateMethod,
65
70
  filters: filters,
66
71
  setAllFilters: setAllFilters,
67
- variation: _constants.FLYOUT
72
+ variation: _constants.FLYOUT,
73
+ initialFilters: initialFiltersRef.current
68
74
  }),
69
75
  filtersState = _useFilters.filtersState,
70
76
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -189,11 +195,19 @@ FilterFlyout.propTypes = {
189
195
  type: _propTypes.default.string.isRequired,
190
196
  column: _propTypes.default.string.isRequired,
191
197
  props: _propTypes.default.object.isRequired
192
- })).isRequired,
198
+ })),
193
199
  /**
194
200
  * Icon description for the filter flyout button
195
201
  */
196
202
  flyoutIconDescription: _propTypes.default.string,
203
+ /**
204
+ * Filters that should be applied on load
205
+ */
206
+ initialFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
207
+ id: _propTypes.default.string.isRequired,
208
+ type: _propTypes.default.string.isRequired,
209
+ value: _propTypes.default.any.isRequired
210
+ })),
197
211
  /**
198
212
  * Callback when the apply button is clicked
199
213
  */
@@ -63,7 +63,12 @@ var FilterPanel = function FilterPanel(_ref) {
63
63
  _ref$searchLabelText = _ref.searchLabelText,
64
64
  searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
65
65
  _ref$searchPlaceholde = _ref.searchPlaceholder,
66
- searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde;
66
+ searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
67
+ _ref$initialFilters = _ref.initialFilters,
68
+ initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
69
+ // Save the initial filters we only need the filters once
70
+ var initialFiltersRef = (0, _react.useRef)(initialFilters);
71
+
67
72
  /** State */
68
73
  var _useState = (0, _react.useState)(false),
69
74
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -73,7 +78,8 @@ var FilterPanel = function FilterPanel(_ref) {
73
78
  updateMethod: updateMethod,
74
79
  filters: filterSections,
75
80
  setAllFilters: setAllFilters,
76
- variation: _constants.PANEL
81
+ variation: _constants.PANEL,
82
+ initialFilters: initialFiltersRef.current
77
83
  }),
78
84
  filtersState = _useFilters.filtersState,
79
85
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -224,6 +230,7 @@ var FilterPanel = function FilterPanel(_ref) {
224
230
  filters = _ref2$filters === void 0 ? [] : _ref2$filters,
225
231
  hasAccordion = _ref2.hasAccordion;
226
232
  return /*#__PURE__*/_react.default.createElement("div", {
233
+ key: categoryTitle,
227
234
  className: "".concat(componentClass, "__category")
228
235
  }, categoryTitle && /*#__PURE__*/_react.default.createElement("div", {
229
236
  className: "".concat(componentClass, "__category-title")
@@ -244,6 +251,14 @@ FilterPanel.propTypes = {
244
251
  closeIconDescription: _propTypes.default.string,
245
252
  filterPanelMinHeight: _propTypes.default.number,
246
253
  filterSections: _propTypes.default.array,
254
+ /**
255
+ * Filters that should be applied on load
256
+ */
257
+ initialFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
258
+ id: _propTypes.default.string.isRequired,
259
+ type: _propTypes.default.string.isRequired,
260
+ value: _propTypes.default.any.isRequired
261
+ })),
247
262
  onApply: _propTypes.default.func,
248
263
  onCancel: _propTypes.default.func,
249
264
  onPanelClose: _propTypes.default.func,
@@ -24,13 +24,14 @@ var useFilters = function useFilters(_ref) {
24
24
  _ref$filters = _ref.filters,
25
25
  filters = _ref$filters === void 0 ? [] : _ref$filters,
26
26
  setAllFilters = _ref.setAllFilters,
27
- variation = _ref.variation;
27
+ variation = _ref.variation,
28
+ initialFilters = _ref.initialFilters;
28
29
  /** State */
29
- var _useInitialStateFromF = (0, _useInitialStateFromFilters.default)(filters, variation),
30
+ var _useInitialStateFromF = (0, _useInitialStateFromFilters.default)(filters, variation, initialFilters),
30
31
  _useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
31
32
  filtersState = _useInitialStateFromF2[0],
32
33
  setFiltersState = _useInitialStateFromF2[1];
33
- var _useState = (0, _react.useState)([]),
34
+ var _useState = (0, _react.useState)(initialFilters),
34
35
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
35
36
  filtersObjectArray = _useState2[0],
36
37
  setFiltersObjectArray = _useState2[1];
@@ -47,8 +48,11 @@ var useFilters = function useFilters(_ref) {
47
48
  setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
48
49
  };
49
50
  var reset = function reset() {
51
+ // When we reset we want the "initialFilters" to be an empty array
52
+ var resetFiltersArray = [];
53
+
50
54
  // Get the initial values for the filters
51
- var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters, variation);
55
+ var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters, variation, resetFiltersArray);
52
56
  var initialFiltersObjectArray = [];
53
57
 
54
58
  // Set the state to the initial values
@@ -19,7 +19,8 @@ var _utils = require("../utils");
19
19
 
20
20
  var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
21
21
  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.FLYOUT;
22
- var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation)),
22
+ var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
23
+ var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, initialFilters)),
23
24
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
24
25
  state = _useState2[0],
25
26
  setState = _useState2[1];