@carbon/ibm-products 1.49.0 → 1.51.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +46 -18
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +42 -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 +46 -18
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +46 -18
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/Card/Card.js +3 -3
- package/es/components/Card/CardHeader.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +16 -20
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -2
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +8 -8
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
- 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/ExpressiveCard/ExpressiveCard.js +3 -3
- 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/ProductiveCard/ProductiveCard.js +3 -3
- 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/Card/Card.js +3 -3
- package/lib/components/Card/CardHeader.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +14 -19
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -2
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -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/ExpressiveCard/ExpressiveCard.js +3 -3
- 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/ProductiveCard/ProductiveCard.js +3 -3
- 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
- package/scss/components/TagSet/_tag-set.scss +6 -0
@@ -73,6 +73,7 @@ var SelectRow = function SelectRow(datagridState) {
|
|
73
73
|
radio = datagridState.radio,
|
74
74
|
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
75
75
|
onRadioSelect = datagridState.onRadioSelect,
|
76
|
+
onRowSelect = datagridState.onRowSelect,
|
76
77
|
columns = datagridState.columns,
|
77
78
|
withStickyColumn = datagridState.withStickyColumn;
|
78
79
|
var _useState = (0, _react.useState)(window.innerWidth),
|
@@ -105,6 +106,7 @@ var SelectRow = function SelectRow(datagridState) {
|
|
105
106
|
}
|
106
107
|
}
|
107
108
|
onChange(e);
|
109
|
+
onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row, e);
|
108
110
|
},
|
109
111
|
id: "".concat(tableId, "-").concat(row.index),
|
110
112
|
name: "".concat(tableId, "-").concat(row.index, "-name"),
|
@@ -0,0 +1,46 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.EditInPlace = void 0;
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
13
|
+
var _settings = require("../../settings");
|
14
|
+
var _InlineEditV = require("../InlineEditV1");
|
15
|
+
var _InlineEditV2 = require("../InlineEditV2");
|
16
|
+
var _excluded = ["v2"];
|
17
|
+
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); }
|
18
|
+
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; }
|
19
|
+
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; }
|
20
|
+
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) { (0, _defineProperty2.default)(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; }
|
21
|
+
/**
|
22
|
+
* this is a wrapper component that will allow us to support the rename of InlineEdit to EditInPlace
|
23
|
+
*
|
24
|
+
* if the user passes in the v2 feature flag the v2 version of the component will be rendered
|
25
|
+
* since this is a temporary solution the named export should just remain InlineEdit unlike how
|
26
|
+
* Card works as a base layer for Productive and Expressive cards.
|
27
|
+
*/
|
28
|
+
|
29
|
+
var componentName = 'EditInPlace';
|
30
|
+
var EditInPlace = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
31
|
+
var v2 = _ref.v2,
|
32
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
33
|
+
var props = _objectSpread(_objectSpread({}, rest), {}, {
|
34
|
+
ref: ref
|
35
|
+
});
|
36
|
+
if (v2 === true) {
|
37
|
+
return /*#__PURE__*/_react.default.createElement(_InlineEditV2.InlineEditV2, props);
|
38
|
+
}
|
39
|
+
return /*#__PURE__*/_react.default.createElement(_InlineEditV.InlineEditV1, props);
|
40
|
+
});
|
41
|
+
exports.EditInPlace = EditInPlace;
|
42
|
+
exports.EditInPlace = EditInPlace = _settings.pkg.checkComponentEnabled(EditInPlace, componentName);
|
43
|
+
EditInPlace.displayName = componentName;
|
44
|
+
EditInPlace.propTypes = {
|
45
|
+
v2: _propTypes.default.bool
|
46
|
+
};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "EditInPlace", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _EditInPlace.EditInPlace;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
var _EditInPlace = require("./EditInPlace");
|
@@ -56,11 +56,11 @@ ExpressiveCard.propTypes = {
|
|
56
56
|
/**
|
57
57
|
* Optional header description
|
58
58
|
*/
|
59
|
-
description: _propTypes.default.string,
|
59
|
+
description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
|
60
60
|
/**
|
61
61
|
* Optional label for the top of the card
|
62
62
|
*/
|
63
|
-
label: _propTypes.default.string,
|
63
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
|
64
64
|
/**
|
65
65
|
* Optional media content like an image to be placed in the card
|
66
66
|
*/
|
@@ -120,6 +120,6 @@ ExpressiveCard.propTypes = {
|
|
120
120
|
/**
|
121
121
|
* Title that's displayed at the top of the card
|
122
122
|
*/
|
123
|
-
title: _propTypes.default.string
|
123
|
+
title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node])
|
124
124
|
};
|
125
125
|
ExpressiveCard.displayName = componentName;
|
@@ -38,8 +38,12 @@ var InlineEdit = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
38
38
|
return /*#__PURE__*/_react.default.createElement(_InlineEditV.InlineEditV1, props);
|
39
39
|
});
|
40
40
|
exports.InlineEdit = InlineEdit;
|
41
|
-
|
41
|
+
InlineEdit.deprecated = {
|
42
|
+
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.",
|
43
|
+
level: 'warn'
|
44
|
+
};
|
42
45
|
InlineEdit.displayName = componentName;
|
46
|
+
exports.InlineEdit = InlineEdit = _settings.pkg.checkComponentEnabled(InlineEdit, componentName);
|
43
47
|
InlineEdit.propTypes = {
|
44
48
|
v2: _propTypes.default.bool
|
45
49
|
};
|
@@ -15,7 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
16
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
17
17
|
var _devtools = require("../../global/js/utils/devtools");
|
18
|
-
var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
|
19
18
|
var _settings = require("../../settings");
|
20
19
|
var _carbonComponentsReact = require("carbon-components-react");
|
21
20
|
var _iconsReact = require("@carbon/icons-react");
|
@@ -79,7 +78,6 @@ var InlineEditV1 = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn)
|
|
79
78
|
var showValidation = invalid; // || warn;
|
80
79
|
var validationText = invalidText; // || warnText;
|
81
80
|
var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : null;
|
82
|
-
_pconsole.default.warn("".concat(componentName, ": the v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."));
|
83
81
|
|
84
82
|
// sanitize the tooltip values
|
85
83
|
var alignIsObject = (0, _typeof2.default)(buttonTooltipAlignment) === 'object';
|
@@ -301,6 +299,11 @@ var InlineEditV1 = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn)
|
|
301
299
|
// is used in preference to relying on function.name.
|
302
300
|
exports.InlineEditV1 = InlineEditV1;
|
303
301
|
InlineEditV1.displayName = componentName;
|
302
|
+
InlineEditV1.deprecated = {
|
303
|
+
level: 'warn',
|
304
|
+
details: "The v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."
|
305
|
+
};
|
306
|
+
_settings.pkg.logDeprecated(InlineEditV1, componentName);
|
304
307
|
|
305
308
|
// The types and DocGen commentary for the component props,
|
306
309
|
// in alphabetical order (for consistency).
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.InlineEditV2 = void 0;
|
8
|
+
exports.deprecatedProps = exports.InlineEditV2 = void 0;
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
@@ -17,22 +17,32 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
17
|
var _iconsReact = require("@carbon/icons-react");
|
18
18
|
var _settings = require("../../settings");
|
19
19
|
var _devtools = require("../../global/js/utils/devtools");
|
20
|
-
var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "value"];
|
20
|
+
var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "size", "saveLabel", "value"];
|
21
21
|
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); }
|
22
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
|
+
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; }
|
24
|
+
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) { (0, _defineProperty2.default)(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; }
|
23
25
|
var componentName = 'InlineEditV2';
|
24
26
|
var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit-v2");
|
27
|
+
var defaults = {
|
28
|
+
size: 'sm'
|
29
|
+
};
|
25
30
|
var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
26
31
|
var _cx;
|
27
32
|
var cancelLabel = _ref.cancelLabel,
|
33
|
+
editAlwaysVisible = _ref.editAlwaysVisible,
|
28
34
|
editLabel = _ref.editLabel,
|
29
35
|
id = _ref.id,
|
36
|
+
inheritTypography = _ref.inheritTypography,
|
30
37
|
invalid = _ref.invalid,
|
31
|
-
|
38
|
+
deprecated_invalidLabel = _ref.invalidLabel,
|
39
|
+
invalidText = _ref.invalidText,
|
32
40
|
labelText = _ref.labelText,
|
33
41
|
onCancel = _ref.onCancel,
|
34
42
|
onChange = _ref.onChange,
|
35
43
|
onSave = _ref.onSave,
|
44
|
+
_ref$size = _ref.size,
|
45
|
+
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
36
46
|
saveLabel = _ref.saveLabel,
|
37
47
|
value = _ref.value,
|
38
48
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
@@ -130,7 +140,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
130
140
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
131
141
|
ref: ref
|
132
142
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
|
133
|
-
className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
|
143
|
+
className: (0, _classnames.default)(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
|
134
144
|
onFocus: onFocusHandler,
|
135
145
|
onBlur: onBlurHandler
|
136
146
|
}, /*#__PURE__*/_react.default.createElement("label", {
|
@@ -138,7 +148,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
138
148
|
htmlFor: id
|
139
149
|
}, labelText), /*#__PURE__*/_react.default.createElement("input", {
|
140
150
|
id: id,
|
141
|
-
className: (0, _classnames.default)("".concat(blockClass, "__text-input"), "".concat(_settings.carbon.prefix, "--text-input"), "".concat(_settings.carbon.prefix, "--text-input--
|
151
|
+
className: (0, _classnames.default)("".concat(blockClass, "__text-input"), "".concat(_settings.carbon.prefix, "--text-input"), "".concat(_settings.carbon.prefix, "--text-input--").concat(size)),
|
142
152
|
type: "text",
|
143
153
|
value: value,
|
144
154
|
onChange: onChangeHandler,
|
@@ -147,13 +157,16 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
147
157
|
,
|
148
158
|
onKeyDown: onKeyHandler
|
149
159
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
160
|
+
className: "".concat(blockClass, "__ellipsis"),
|
161
|
+
"aria-hidden": !focused
|
162
|
+
}, "\u2026"), /*#__PURE__*/_react.default.createElement("div", {
|
150
163
|
className: "".concat(blockClass, "__toolbar")
|
151
|
-
},
|
164
|
+
}, invalid && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, {
|
152
165
|
className: "".concat(blockClass, "__warning-icon")
|
153
|
-
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
166
|
+
}), focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
154
167
|
hasIconOnly: true,
|
155
168
|
renderIcon: _iconsReact.Close24,
|
156
|
-
size:
|
169
|
+
size: size,
|
157
170
|
iconDescription: cancelLabel,
|
158
171
|
onClick: onCancelHandler,
|
159
172
|
kind: "ghost",
|
@@ -163,7 +176,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
163
176
|
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
164
177
|
hasIconOnly: true,
|
165
178
|
renderIcon: _iconsReact.Checkmark24,
|
166
|
-
size:
|
179
|
+
size: size,
|
167
180
|
iconDescription: saveLabel,
|
168
181
|
onClick: onSaveHandler,
|
169
182
|
kind: "ghost",
|
@@ -172,12 +185,12 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
172
185
|
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
|
173
186
|
disabled: !canSave
|
174
187
|
})) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
175
|
-
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
|
188
|
+
className: (0, _classnames.default)("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
|
176
189
|
hasIconOnly: true
|
177
190
|
// renderIcon={readOnly ? EditOff24 : Edit24}
|
178
191
|
,
|
179
192
|
renderIcon: _iconsReact.Edit24,
|
180
|
-
size:
|
193
|
+
size: size
|
181
194
|
// iconDescription={readOnly ? readOnlyLabel : editLabel}
|
182
195
|
,
|
183
196
|
iconDescription: editLabel,
|
@@ -185,17 +198,29 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
185
198
|
kind: "ghost",
|
186
199
|
tabIndex: 0,
|
187
200
|
key: "edit"
|
188
|
-
}))),
|
201
|
+
}))), invalid && /*#__PURE__*/_react.default.createElement("p", {
|
189
202
|
className: "".concat(blockClass, "__warning-text")
|
190
|
-
},
|
203
|
+
}, invalidText !== null && invalidText !== void 0 ? invalidText : deprecated_invalidLabel));
|
191
204
|
});
|
192
205
|
exports.InlineEditV2 = InlineEditV2;
|
193
206
|
InlineEditV2.displayName = componentName;
|
194
|
-
|
207
|
+
var deprecatedProps = {
|
208
|
+
/**
|
209
|
+
* **Deprecated**
|
210
|
+
* invalidLabel was misnamed, using invalidText to match Carbon
|
211
|
+
*/
|
212
|
+
invalidText: _propTypes.default.string
|
213
|
+
};
|
214
|
+
exports.deprecatedProps = deprecatedProps;
|
215
|
+
InlineEditV2.propTypes = _objectSpread({
|
195
216
|
/**
|
196
217
|
* label for cancel button
|
197
218
|
*/
|
198
219
|
cancelLabel: _propTypes.default.string.isRequired,
|
220
|
+
/**
|
221
|
+
* By default the edit icon is shown on hover only.
|
222
|
+
*/
|
223
|
+
editAlwaysVisible: _propTypes.default.bool,
|
199
224
|
/**
|
200
225
|
* label for edit button
|
201
226
|
*/
|
@@ -204,6 +229,14 @@ InlineEditV2.propTypes = {
|
|
204
229
|
* Specify a custom id for the input
|
205
230
|
*/
|
206
231
|
id: _propTypes.default.string.isRequired,
|
232
|
+
/**
|
233
|
+
* inheritTypography - causes the text entry field to inherit typography settings
|
234
|
+
* assigned to the container. This is useful when editing titles for instance.
|
235
|
+
*
|
236
|
+
* NOTE: The size property limits the vertical size of the input element.
|
237
|
+
* Inherited font's should be selected to fit within the size selected.
|
238
|
+
*/
|
239
|
+
inheritTypography: _propTypes.default.bool,
|
207
240
|
/**
|
208
241
|
* determines if the input is invalid
|
209
242
|
*/
|
@@ -211,7 +244,7 @@ InlineEditV2.propTypes = {
|
|
211
244
|
/**
|
212
245
|
* text that is displayed if the input is invalid
|
213
246
|
*/
|
214
|
-
|
247
|
+
invalidText: _propTypes.default.string,
|
215
248
|
/**
|
216
249
|
* Provide the text that will be read by a screen reader when visiting this control
|
217
250
|
*/
|
@@ -240,11 +273,15 @@ InlineEditV2.propTypes = {
|
|
240
273
|
* label for save button
|
241
274
|
*/
|
242
275
|
saveLabel: _propTypes.default.string.isRequired,
|
276
|
+
/**
|
277
|
+
* vertical size of control
|
278
|
+
*/
|
279
|
+
size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
|
243
280
|
/**
|
244
281
|
* current value of the input
|
245
282
|
*/
|
246
283
|
value: _propTypes.default.string.isRequired
|
247
|
-
};
|
284
|
+
}, deprecatedProps);
|
248
285
|
InlineEditV2.defaultProps = {
|
249
286
|
invalid: false,
|
250
287
|
invalidLabel: ''
|
@@ -73,11 +73,11 @@ ProductiveCard.propTypes = {
|
|
73
73
|
/**
|
74
74
|
* Optional header description
|
75
75
|
*/
|
76
|
-
description: _propTypes.default.string,
|
76
|
+
description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
|
77
77
|
/**
|
78
78
|
* Optional label for the top of the card
|
79
79
|
*/
|
80
|
-
label: _propTypes.default.string,
|
80
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
|
81
81
|
/**
|
82
82
|
* Provides the callback for a clickable card
|
83
83
|
*/
|
@@ -114,7 +114,7 @@ ProductiveCard.propTypes = {
|
|
114
114
|
/**
|
115
115
|
* Title that's displayed at the top of the card
|
116
116
|
*/
|
117
|
-
title: _propTypes.default.string,
|
117
|
+
title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
|
118
118
|
/**
|
119
119
|
* Determines title size
|
120
120
|
*/
|
package/lib/components/index.js
CHANGED
@@ -99,6 +99,12 @@ Object.defineProperty(exports, "EditFullPage", {
|
|
99
99
|
return _EditFullPage.EditFullPage;
|
100
100
|
}
|
101
101
|
});
|
102
|
+
Object.defineProperty(exports, "EditInPlace", {
|
103
|
+
enumerable: true,
|
104
|
+
get: function get() {
|
105
|
+
return _EditInPlace.EditInPlace;
|
106
|
+
}
|
107
|
+
});
|
102
108
|
Object.defineProperty(exports, "EditSidePanel", {
|
103
109
|
enumerable: true,
|
104
110
|
get: function get() {
|
@@ -497,4 +503,5 @@ var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
|
|
497
503
|
var _EditFullPage = require("./EditFullPage");
|
498
504
|
var _EditUpdateCards = require("./EditUpdateCards");
|
499
505
|
var _InlineEdit = require("./InlineEdit");
|
506
|
+
var _EditInPlace = require("./EditInPlace");
|
500
507
|
var _NonLinearReading = require("./NonLinearReading");
|
package/lib/settings.js
CHANGED
@@ -10,6 +10,7 @@ var _packageSettings = _interopRequireDefault(require("./global/js/package-setti
|
|
10
10
|
var _carbonComponents = require("carbon-components");
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
12
12
|
var _themes = require("@carbon/themes");
|
13
|
+
var _pconsole = _interopRequireDefault(require("./global/js/utils/pconsole"));
|
13
14
|
var carbon = {
|
14
15
|
get prefix() {
|
15
16
|
return _carbonComponents.settings.prefix;
|
@@ -21,14 +22,28 @@ var carbon = {
|
|
21
22
|
return _themes.themes;
|
22
23
|
}
|
23
24
|
};
|
25
|
+
exports.carbon = carbon;
|
26
|
+
var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
|
27
|
+
return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
|
28
|
+
};
|
29
|
+
_packageSettings.default.logDeprecated = function (component, name) {
|
30
|
+
if (component !== null && component !== void 0 && component.deprecated) {
|
31
|
+
var _pconsole$level;
|
32
|
+
var _component$deprecated = component.deprecated,
|
33
|
+
level = _component$deprecated.level,
|
34
|
+
details = _component$deprecated.details;
|
35
|
+
var logUsing = (_pconsole$level = _pconsole.default === null || _pconsole.default === void 0 ? void 0 : _pconsole.default[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : _pconsole.default.error;
|
36
|
+
logUsing(componentDeprecatedWarning(name || component.displayName, details));
|
37
|
+
}
|
38
|
+
};
|
24
39
|
|
25
40
|
// Check that a component is enabled. This function returns a stub which checks
|
26
41
|
// the component status on first use and then renders as the component or as
|
27
42
|
// a Canary placeholder initialized with the name of the replaced component.
|
28
43
|
// Note that the returned stub carries any other properties which had already
|
29
44
|
// been assigned (eg propTypes, displayName, etc).
|
30
|
-
exports.carbon = carbon;
|
31
45
|
_packageSettings.default.checkComponentEnabled = function (component, name) {
|
46
|
+
_packageSettings.default.logDeprecated(component, name);
|
32
47
|
if (component.render) {
|
33
48
|
// The component is a forward-ref, so make a stub forward-ref.
|
34
49
|
var forward = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
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.
|
4
|
+
"version": "1.51.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -95,5 +95,5 @@
|
|
95
95
|
"react": "^16.8.6 || ^17.0.1",
|
96
96
|
"react-dom": "^16.8.6 || ^17.0.1"
|
97
97
|
},
|
98
|
-
"gitHead": "
|
98
|
+
"gitHead": "fb3bdbfbe2b40dc57f5c9657e83c9ef48ccd2520"
|
99
99
|
}
|
@@ -1,10 +1,9 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
*/
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2021, 2023
|
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
|
+
//
|
8
7
|
|
9
8
|
@import './variables';
|
10
9
|
|
@@ -29,3 +28,7 @@ th.#{$block-class}__select-all-toggle-on {
|
|
29
28
|
th.#{$block-class}__select-all-toggle-on.button {
|
30
29
|
margin-left: $spacing-01;
|
31
30
|
}
|
31
|
+
|
32
|
+
.#{$block-class}__select-all-toggle-overflow.#{$carbon-prefix}--overflow-menu-options--sm.#{$carbon-prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
|
33
|
+
width: $spacing-13;
|
34
|
+
}
|
@@ -15,6 +15,8 @@
|
|
15
15
|
$carbon-input: #{$carbon-prefix}--text-input;
|
16
16
|
|
17
17
|
.#{$block-class} {
|
18
|
+
--#{$block-class}--size: #{$spacing-07};
|
19
|
+
|
18
20
|
display: flex;
|
19
21
|
align-items: center;
|
20
22
|
background: transparent;
|
@@ -24,11 +26,24 @@
|
|
24
26
|
cursor: not-allowed;
|
25
27
|
}
|
26
28
|
|
29
|
+
&--sm {
|
30
|
+
--#{$block-class}--size: #{$spacing-07};
|
31
|
+
}
|
32
|
+
|
33
|
+
&--md {
|
34
|
+
--#{$block-class}--size: #{$spacing-08};
|
35
|
+
}
|
36
|
+
|
37
|
+
&--lg {
|
38
|
+
--#{$block-class}--size: #{$spacing-09};
|
39
|
+
}
|
40
|
+
|
27
41
|
&:hover {
|
28
42
|
background: $field-01;
|
29
43
|
}
|
30
44
|
|
31
|
-
&:hover .#{$block-class}__btn-edit
|
45
|
+
&:hover .#{$block-class}__btn-edit,
|
46
|
+
.#{$block-class}__btn-edit.#{$block-class}__btn-edit--always-visible {
|
32
47
|
visibility: visible;
|
33
48
|
}
|
34
49
|
|
@@ -36,6 +51,10 @@
|
|
36
51
|
visibility: hidden;
|
37
52
|
}
|
38
53
|
|
54
|
+
&--invalid {
|
55
|
+
outline: 2px solid $support-01;
|
56
|
+
}
|
57
|
+
|
39
58
|
&--focused {
|
40
59
|
background: $field-01;
|
41
60
|
outline: 2px solid $focus;
|
@@ -45,12 +64,31 @@
|
|
45
64
|
flex: 1;
|
46
65
|
}
|
47
66
|
|
67
|
+
&--inherit-type .#{$block-class}__text-input {
|
68
|
+
/* match font of container */
|
69
|
+
font-size: inherit;
|
70
|
+
font-weight: inherit;
|
71
|
+
letter-spacing: inherit;
|
72
|
+
line-height: inherit;
|
73
|
+
}
|
74
|
+
|
75
|
+
&__ellipsis {
|
76
|
+
position: relative;
|
77
|
+
margin-left: calc(-1 * $spacing-05);
|
78
|
+
opacity: 0;
|
79
|
+
}
|
80
|
+
|
81
|
+
&--overflows:not(.#{$block-class}--focused) .#{$block-class}__ellipsis {
|
82
|
+
opacity: 1;
|
83
|
+
}
|
84
|
+
|
48
85
|
&__text-input-label {
|
49
86
|
display: none;
|
50
87
|
}
|
51
88
|
|
52
89
|
&__warning-icon {
|
53
|
-
|
90
|
+
width: $spacing-05;
|
91
|
+
margin: auto $spacing-03 auto auto;
|
54
92
|
color: $support-01;
|
55
93
|
}
|
56
94
|
|
@@ -70,11 +108,11 @@
|
|
70
108
|
outline: none;
|
71
109
|
}
|
72
110
|
|
73
|
-
.#{$block-class}
|
74
|
-
.#{$block-class}
|
75
|
-
|
76
|
-
|
77
|
-
}
|
111
|
+
// .#{$block-class}--readonly .#{$block-class}__text-input.#{$carbon-input},
|
112
|
+
// .#{$block-class}--readonly
|
113
|
+
// .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
|
114
|
+
// cursor: not-allowed;
|
115
|
+
// }
|
78
116
|
|
79
117
|
.#{$block-class}__text-input.#{$carbon-input}:focus,
|
80
118
|
.#{$block-class}__text-input.#{$carbon-input}:active {
|
@@ -82,8 +120,8 @@
|
|
82
120
|
}
|
83
121
|
|
84
122
|
.#{$block-class}__toolbar {
|
85
|
-
--toolbar-width:
|
86
|
-
--toolbar-width-focussed:
|
123
|
+
--toolbar-width: var(--#{$block-class}--size);
|
124
|
+
--toolbar-width-focussed: calc(2 * var(--#{$block-class}--size));
|
87
125
|
|
88
126
|
// animation div
|
89
127
|
display: inline-flex;
|
@@ -92,8 +130,11 @@
|
|
92
130
|
}
|
93
131
|
|
94
132
|
.#{$block-class}--invalid .#{$block-class}__toolbar {
|
95
|
-
|
96
|
-
--toolbar-width
|
133
|
+
// width of invalid icon is always $spacing-07 ($spacing-05 + 2 * $spacing-03 margin)
|
134
|
+
--toolbar-width: calc(var(--#{$block-class}--size) + #{$spacing-07});
|
135
|
+
--toolbar-width-focussed: calc(
|
136
|
+
2 * var(--#{$block-class}--size) + #{$spacing-07}
|
137
|
+
);
|
97
138
|
}
|
98
139
|
|
99
140
|
@keyframes slide-in {
|
@@ -4,6 +4,13 @@
|
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
6
6
|
//
|
7
|
-
|
8
|
-
|
7
|
+
|
8
|
+
@import '../../global/styles/display-box';
|
9
|
+
|
10
|
+
$block-class: 'inline-edit-v2-example';
|
11
|
+
|
12
|
+
.#{$block-class}__viewport {
|
13
|
+
// width: 300px; // larger than standard size needed by text input at standard font size (html input attribute size)
|
14
|
+
// stylelint-disable-next-line carbon/layout-token-use
|
15
|
+
margin: 100px;
|
9
16
|
}
|
@@ -69,6 +69,12 @@ $block-class-modal: #{$block-class}-modal;
|
|
69
69
|
}
|
70
70
|
}
|
71
71
|
|
72
|
+
.#{$block-class-overflow}__tooltip
|
73
|
+
.#{$block-class-overflow}__tag-item
|
74
|
+
.#{$carbon-prefix}--tag {
|
75
|
+
border-radius: 0;
|
76
|
+
}
|
77
|
+
|
72
78
|
@include block-wrap('#{$block-class-modal}') {
|
73
79
|
&.#{$block-class-modal} {
|
74
80
|
// not to be overridden by use in tag set
|