@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.
- package/css/index-full-carbon.css +42 -18
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +38 -11
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +42 -18
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +42 -18
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +8 -8
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +14 -0
- package/es/components/Datagrid/useFiltering.js +4 -2
- package/es/components/Datagrid/useOnRowClick.js +9 -1
- package/es/components/Datagrid/useSelectRows.js +2 -0
- package/es/components/EditInPlace/EditInPlace.js +43 -0
- package/es/components/EditInPlace/index.js +8 -0
- package/es/components/InlineEdit/InlineEdit.js +5 -1
- package/es/components/InlineEditV1/InlineEditV1.js +5 -2
- package/es/components/InlineEditV2/InlineEditV2.js +51 -15
- package/es/components/index.js +1 -0
- package/es/global/js/package-settings.js +1 -0
- package/es/settings.js +15 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +15 -0
- package/lib/components/Datagrid/useFiltering.js +4 -2
- package/lib/components/Datagrid/useOnRowClick.js +9 -1
- package/lib/components/Datagrid/useSelectRows.js +2 -0
- package/lib/components/EditInPlace/EditInPlace.js +46 -0
- package/lib/components/EditInPlace/index.js +12 -0
- package/lib/components/InlineEdit/InlineEdit.js +5 -1
- package/lib/components/InlineEditV1/InlineEditV1.js +5 -2
- package/lib/components/InlineEditV2/InlineEditV2.js +53 -16
- package/lib/components/index.js +7 -0
- package/lib/global/js/package-settings.js +1 -0
- package/lib/settings.js +16 -1
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +10 -7
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +52 -11
- 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
|
package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js
CHANGED
@@ -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
|
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
|
+
};
|
@@ -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 =
|
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
|
-
|
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--
|
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
|
-
},
|
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:
|
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:
|
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:
|
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
|
-
}))),
|
200
|
+
}))), invalid && /*#__PURE__*/React.createElement("p", {
|
188
201
|
className: "".concat(blockClass, "__warning-text")
|
189
|
-
},
|
202
|
+
}, invalidText !== null && invalidText !== void 0 ? invalidText : deprecated_invalidLabel));
|
190
203
|
});
|
191
204
|
InlineEditV2.displayName = componentName;
|
192
|
-
|
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
|
-
|
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: ''
|
package/es/components/index.js
CHANGED
@@ -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';
|
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
|
-
}))
|
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
|
package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js
CHANGED
@@ -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
|
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];
|