@carbon/ibm-products 1.21.0 → 1.23.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/components/Datagrid/styles/datagrid.css +4 -0
- package/css/components/Datagrid/styles/datagrid.css.map +1 -1
- package/css/components/Datagrid/styles/index.css +32 -0
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/components/Datagrid/styles/useColumnCenterAlign.css +18 -0
- package/css/components/Datagrid/styles/useColumnCenterAlign.css.map +1 -0
- package/css/components/Datagrid/styles/useExpandedRow.css +12 -0
- package/css/components/Datagrid/styles/useExpandedRow.css.map +1 -0
- package/css/index-full-carbon.css +65 -144
- 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 +25 -16
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +60 -17
- 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 +63 -140
- 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/AddSelect/AddSelect.js +56 -422
- package/es/components/AddSelect/AddSelectBody.js +349 -0
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -31
- package/es/components/AddSelect/AddSelectColumn.js +91 -41
- package/es/components/AddSelect/AddSelectFilter.js +2 -3
- package/es/components/AddSelect/AddSelectList.js +10 -61
- package/es/components/AddSelect/AddSelectMetaPanel.js +9 -8
- package/es/components/AddSelect/AddSelectSidebar.js +20 -13
- package/es/components/AddSelect/AddSelectSort.js +4 -2
- package/es/components/AddSelect/add-select-utils.js +85 -59
- package/es/components/AddSelect/hooks/useParentSelect.js +16 -0
- package/es/components/AddSelect/hooks/usePath.js +66 -0
- package/es/components/Card/Card.js +1 -1
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +1 -5
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +1 -5
- package/es/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/es/components/Datagrid/index.js +2 -1
- package/es/components/Datagrid/useColumnCenterAlign.js +52 -0
- package/es/components/Datagrid/useExpandedRow.js +12 -4
- package/es/components/PageHeader/PageHeaderUtils.js +5 -0
- package/es/components/TagSet/TagSet.js +15 -5
- package/es/components/WebTerminal/WebTerminal.js +5 -3
- package/lib/components/AddSelect/AddSelect.js +53 -430
- package/lib/components/AddSelect/AddSelectBody.js +384 -0
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +11 -30
- package/lib/components/AddSelect/AddSelectColumn.js +90 -39
- package/lib/components/AddSelect/AddSelectFilter.js +2 -3
- package/lib/components/AddSelect/AddSelectList.js +11 -60
- package/lib/components/AddSelect/AddSelectMetaPanel.js +9 -8
- package/lib/components/AddSelect/AddSelectSidebar.js +20 -13
- package/lib/components/AddSelect/AddSelectSort.js +4 -2
- package/lib/components/AddSelect/add-select-utils.js +88 -64
- package/lib/components/AddSelect/hooks/useParentSelect.js +27 -0
- package/lib/components/AddSelect/hooks/usePath.js +75 -0
- package/lib/components/Card/Card.js +1 -1
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +1 -5
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +1 -5
- package/lib/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/lib/components/Datagrid/index.js +9 -1
- package/lib/components/Datagrid/useColumnCenterAlign.js +59 -0
- package/lib/components/Datagrid/useExpandedRow.js +20 -4
- package/lib/components/PageHeader/PageHeaderUtils.js +5 -0
- package/lib/components/TagSet/TagSet.js +15 -5
- package/lib/components/WebTerminal/WebTerminal.js +5 -2
- package/package.json +16 -16
- package/scss/components/Cascade/_cascade.scss +2 -1
- package/scss/components/CreateInfluencer/_create-influencer.scss +0 -2
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -1
- package/scss/components/Datagrid/_storybook-styles.scss +4 -0
- package/scss/components/Datagrid/styles/datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/index.scss +2 -0
- package/scss/components/Datagrid/styles/useColumnCenterAlign.scss +19 -0
- package/scss/components/Datagrid/styles/useExpandedRow.scss +13 -0
- package/scss/components/InlineEdit/_inline-edit.scss +2 -1
- package/scss/components/OptionsTile/_options-tile.scss +1 -0
- package/scss/components/PageHeader/_page-header.scss +9 -4
- package/scss/components/SidePanel/_side-panel.scss +1 -2
- package/scss/components/TagSet/_tag-set.scss +4 -0
- package/scss/components/WebTerminal/_web-terminal.scss +2 -1
@@ -0,0 +1,59 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
|
+
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
|
+
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
15
|
+
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
17
|
+
|
18
|
+
var _settings = require("../../settings");
|
19
|
+
|
20
|
+
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; }
|
21
|
+
|
22
|
+
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
|
+
|
24
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
25
|
+
|
26
|
+
var useColumnCenterAlign = function useColumnCenterAlign(hooks) {
|
27
|
+
var centerAlignRenderer = function centerAlignRenderer(tableProps, column) {
|
28
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
29
|
+
className: (0, _classnames.default)("".concat(blockClass, "__center-align-cell-renderer"), {
|
30
|
+
sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
|
31
|
+
})
|
32
|
+
}, column.Cell(tableProps));
|
33
|
+
};
|
34
|
+
|
35
|
+
var centerAlignHeader = function centerAlignHeader(headerProp, column) {
|
36
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
37
|
+
className: "".concat(blockClass, "__center-align-header")
|
38
|
+
}, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
|
39
|
+
};
|
40
|
+
|
41
|
+
var centerAlignedColumns = function centerAlignedColumns(columns) {
|
42
|
+
var columnsWithDefaultCells = columns.map(function (column) {
|
43
|
+
return _objectSpread(_objectSpread({}, column), {}, {
|
44
|
+
Cell: column.centerAlignedColumn ? function (tableProp) {
|
45
|
+
return centerAlignRenderer(tableProp, column);
|
46
|
+
} : column.Cell,
|
47
|
+
Header: column.centerAlignedColumn ? function (headerProp) {
|
48
|
+
return centerAlignHeader(headerProp, column);
|
49
|
+
} : column.Header
|
50
|
+
});
|
51
|
+
});
|
52
|
+
return (0, _toConsumableArray2.default)(columnsWithDefaultCells);
|
53
|
+
};
|
54
|
+
|
55
|
+
hooks.visibleColumns.push(centerAlignedColumns);
|
56
|
+
};
|
57
|
+
|
58
|
+
var _default = useColumnCenterAlign;
|
59
|
+
exports.default = _default;
|
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -11,23 +13,37 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
11
13
|
|
12
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13
15
|
|
14
|
-
var _react = require("react");
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
15
17
|
|
16
18
|
var _DatagridExpandedRow = _interopRequireDefault(require("./Datagrid/DatagridExpandedRow"));
|
17
19
|
|
18
20
|
var _useRowExpander = _interopRequireDefault(require("./useRowExpander"));
|
19
21
|
|
22
|
+
var _settings = require("../../settings");
|
23
|
+
|
24
|
+
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); }
|
25
|
+
|
26
|
+
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; }
|
27
|
+
|
20
28
|
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; }
|
21
29
|
|
22
30
|
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
31
|
|
32
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
33
|
+
|
34
|
+
var expansionRenderer = function expansionRenderer(_ref) {
|
35
|
+
var row = _ref.row;
|
36
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
37
|
+
className: "".concat(blockClass, "__expanded-row-content")
|
38
|
+
}, "Content for ", row.id);
|
39
|
+
};
|
40
|
+
|
24
41
|
var useExpandedRow = function useExpandedRow(hooks) {
|
25
42
|
(0, _useRowExpander.default)(hooks);
|
26
43
|
|
27
44
|
var useInstance = function useInstance(instance) {
|
28
45
|
var rows = instance.rows,
|
29
|
-
expandedContentHeight = instance.expandedContentHeight
|
30
|
-
ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
|
46
|
+
expandedContentHeight = instance.expandedContentHeight;
|
31
47
|
|
32
48
|
var _useState = (0, _react.useState)({}),
|
33
49
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
@@ -42,7 +58,7 @@ var useExpandedRow = function useExpandedRow(hooks) {
|
|
42
58
|
return _objectSpread(_objectSpread({}, row), {}, {
|
43
59
|
canExpand: row.original && !row.original.notExpandable,
|
44
60
|
expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
|
45
|
-
RowRenderer: (0, _DatagridExpandedRow.default)(row.RowRenderer,
|
61
|
+
RowRenderer: (0, _DatagridExpandedRow.default)(row.RowRenderer, expansionRenderer)
|
46
62
|
});
|
47
63
|
});
|
48
64
|
Object.assign(instance, {
|
@@ -128,6 +128,11 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
|
|
128
128
|
if (!enableBreadcrumbScroll || !navigation) {
|
129
129
|
// adjust sticky top if no navigation or breadcrumb is to stay on screen
|
130
130
|
update.headerTopValue += update.breadcrumbRowHeight;
|
131
|
+
}
|
132
|
+
|
133
|
+
if (enableBreadcrumbScroll) {
|
134
|
+
// adjust header top value when scroll enabled for breadcrumb
|
135
|
+
update.headerTopValue -= navigation ? hasActionBar ? 0 : 10 : update.headerHeight;
|
131
136
|
} // if (window) {
|
132
137
|
|
133
138
|
|
@@ -39,7 +39,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
|
|
39
39
|
|
40
40
|
var _settings = require("../../settings");
|
41
41
|
|
42
|
-
var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
|
42
|
+
var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
|
43
43
|
_excluded2 = ["label", "id"],
|
44
44
|
_excluded3 = ["label"];
|
45
45
|
|
@@ -68,6 +68,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
68
68
|
allTagsModalTargetIn = _ref.allTagsModalTarget,
|
69
69
|
className = _ref.className,
|
70
70
|
maxVisible = _ref.maxVisible,
|
71
|
+
multiline = _ref.multiline,
|
71
72
|
_ref$overflowAlign = _ref.overflowAlign,
|
72
73
|
overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
|
73
74
|
overflowClassName = _ref.overflowClassName,
|
@@ -184,7 +185,11 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
184
185
|
setDisplayedTags(newDisplayedTags);
|
185
186
|
}, [displayCount, overflowAlign, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
|
186
187
|
var checkFullyVisibleTags = (0, _react.useCallback)(function () {
|
187
|
-
|
188
|
+
if (multiline) {
|
189
|
+
return setDisplayCount(maxVisible);
|
190
|
+
} // how many will fit?
|
191
|
+
|
192
|
+
|
188
193
|
var willFit = 0;
|
189
194
|
|
190
195
|
if (sizingTags.length > 0) {
|
@@ -216,10 +221,10 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
216
221
|
} else {
|
217
222
|
setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
|
218
223
|
}
|
219
|
-
}, [maxVisible, sizingTags, tagSetRef]);
|
224
|
+
}, [maxVisible, multiline, sizingTags, tagSetRef]);
|
220
225
|
(0, _react.useEffect)(function () {
|
221
226
|
checkFullyVisibleTags();
|
222
|
-
}, [checkFullyVisibleTags, maxVisible, sizingTags]);
|
227
|
+
}, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
|
223
228
|
/* don't know how to test resize */
|
224
229
|
|
225
230
|
/* istanbul ignore next */
|
@@ -262,7 +267,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
262
267
|
"aria-hidden": true,
|
263
268
|
ref: sizingContainerRef
|
264
269
|
}, hiddenSizingTags), /*#__PURE__*/_react.default.createElement("div", {
|
265
|
-
className: "".concat(blockClass, "__tag-container"),
|
270
|
+
className: (0, _classnames.default)(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
|
266
271
|
ref: displayedArea
|
267
272
|
}, displayedTags)), (allTagsModalTarget ? _reactDom.createPortal : function (children) {
|
268
273
|
return children;
|
@@ -342,6 +347,11 @@ TagSet.propTypes = {
|
|
342
347
|
*/
|
343
348
|
maxVisible: _propTypes.default.number,
|
344
349
|
|
350
|
+
/**
|
351
|
+
* display tags in multiple lines
|
352
|
+
*/
|
353
|
+
multiline: _propTypes.default.bool,
|
354
|
+
|
345
355
|
/**
|
346
356
|
* overflowAlign from the standard tooltip. Default center.
|
347
357
|
*/
|
@@ -31,6 +31,8 @@ var _carbonComponentsReact = require("carbon-components-react");
|
|
31
31
|
|
32
32
|
var _motion = require("@carbon/motion");
|
33
33
|
|
34
|
+
var _devtools = require("../../global/js/utils/devtools");
|
35
|
+
|
34
36
|
var _excluded = ["actions", "children", "className", "closeIconDescription", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open"];
|
35
37
|
|
36
38
|
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); }
|
@@ -108,9 +110,9 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
108
110
|
closeTerminal();
|
109
111
|
};
|
110
112
|
|
111
|
-
return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
113
|
+
return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, _objectSpread(_objectSpread({}, rest), (0, _devtools.getDevtoolsProps)(componentName)), {
|
112
114
|
ref: ref,
|
113
|
-
className: (0, _classnames.default)([
|
115
|
+
className: (0, _classnames.default)([blockClass, className, (_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
|
114
116
|
style: {
|
115
117
|
animation: !prefersReducedMotion && webTerminalAnimationName
|
116
118
|
},
|
@@ -122,6 +124,7 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
122
124
|
}, showDocumentationLinks && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
|
123
125
|
renderIcon: _iconsReact.Help16,
|
124
126
|
iconDescription: documentationLinksIconDescription,
|
127
|
+
ariaLabel: documentationLinksIconDescription,
|
125
128
|
menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
|
126
129
|
size: "lg"
|
127
130
|
}, documentationLinks.map(function (_ref4, i) {
|
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.23.1",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -50,33 +50,33 @@
|
|
50
50
|
"upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
|
51
51
|
},
|
52
52
|
"devDependencies": {
|
53
|
-
"@babel/cli": "^7.
|
54
|
-
"@babel/core": "^7.
|
55
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
53
|
+
"@babel/cli": "^7.18.6",
|
54
|
+
"@babel/core": "^7.18.6",
|
55
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.17",
|
56
56
|
"chalk": "^4.1.2",
|
57
57
|
"change-case": "^4.1.2",
|
58
58
|
"copyfiles": "^2.4.1",
|
59
59
|
"cross-env": "^7.0.3",
|
60
60
|
"fs-extra": "^10.1.0",
|
61
61
|
"glob": "^8.0.3",
|
62
|
-
"jest": "^28.1.
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.24.
|
64
|
-
"jest-environment-jsdom": "^28.1.
|
62
|
+
"jest": "^28.1.3",
|
63
|
+
"jest-config-ibm-cloud-cognitive": "^0.24.2",
|
64
|
+
"jest-environment-jsdom": "^28.1.3",
|
65
65
|
"namor": "^1.1.2",
|
66
|
-
"npm-check-updates": "^
|
66
|
+
"npm-check-updates": "^15.3.3",
|
67
67
|
"npm-run-all": "^4.1.5",
|
68
68
|
"rimraf": "^3.0.2",
|
69
|
-
"sass": "^1.
|
70
|
-
"yargs": "^17.5.
|
69
|
+
"sass": "^1.53.0",
|
70
|
+
"yargs": "^17.5.1"
|
71
71
|
},
|
72
72
|
"dependencies": {
|
73
|
-
"@babel/runtime": "^7.
|
73
|
+
"@babel/runtime": "^7.18.6",
|
74
74
|
"@carbon/telemetry": "^0.1.0",
|
75
75
|
"immutability-helper": "^3.1.1",
|
76
76
|
"react-dnd": "^15.1.2",
|
77
77
|
"react-dnd-html5-backend": "^15.1.3",
|
78
|
-
"react-resize-detector": "^7.
|
79
|
-
"react-table": "^7.
|
78
|
+
"react-resize-detector": "^7.1.2",
|
79
|
+
"react-table": "^7.8.0",
|
80
80
|
"react-window": "^1.8.7"
|
81
81
|
},
|
82
82
|
"peerDependencies": {
|
@@ -87,11 +87,11 @@
|
|
87
87
|
"@carbon/motion": "^10.29.0",
|
88
88
|
"@carbon/themes": "^10.54.0",
|
89
89
|
"@carbon/type": "^10.44.0",
|
90
|
-
"carbon-components": "^10.57.
|
91
|
-
"carbon-components-react": "^7.57.
|
90
|
+
"carbon-components": "^10.57.2",
|
91
|
+
"carbon-components-react": "^7.57.3",
|
92
92
|
"carbon-icons": "^7.0.7",
|
93
93
|
"react": "^16.8.6 || ^17.0.1",
|
94
94
|
"react-dom": "^16.8.6 || ^17.0.1"
|
95
95
|
},
|
96
|
-
"gitHead": "
|
96
|
+
"gitHead": "f40f3df7863f899776c205dac85e0ad0803e8df4"
|
97
97
|
}
|
@@ -30,7 +30,8 @@
|
|
30
30
|
.#{$block-class}__element,
|
31
31
|
.#{$block-class}__col {
|
32
32
|
@media (prefers-reduced-motion: no-preference) {
|
33
|
-
|
33
|
+
// stylelint-disable-next-line carbon/motion-token-use
|
34
|
+
animation: $animationProps fade; // stylelint note animation duration declared in $animationProps
|
34
35
|
animation-fill-mode: forwards;
|
35
36
|
opacity: 0;
|
36
37
|
}
|
@@ -61,7 +61,6 @@
|
|
61
61
|
}
|
62
62
|
.#{$block-class}__side-nav-opening,
|
63
63
|
.#{$block-class}__progress-indicator-opening {
|
64
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
65
64
|
animation: influencer-menu-entrance $duration--moderate-02 1;
|
66
65
|
animation-fill-mode: forwards;
|
67
66
|
@include carbon--motion(entrance, productive);
|
@@ -69,7 +68,6 @@
|
|
69
68
|
|
70
69
|
.#{$block-class}__side-nav-closing,
|
71
70
|
.#{$block-class}__progress-indicator-closing {
|
72
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
73
71
|
animation: influencer-menu-exit $duration--moderate-02 1;
|
74
72
|
animation-fill-mode: forwards;
|
75
73
|
@include carbon--motion(exit, productive);
|
@@ -51,7 +51,7 @@
|
|
51
51
|
}
|
52
52
|
|
53
53
|
.#{$block-class} .#{$step-block-class}__step--visible-step {
|
54
|
-
animation: $duration--slow-01
|
54
|
+
animation: step-content-entrance $duration--slow-01;
|
55
55
|
animation-fill-mode: forwards;
|
56
56
|
animation-timing-function: $carbon--standard-easing;
|
57
57
|
opacity: 0;
|
@@ -10,9 +10,11 @@
|
|
10
10
|
@import './useNestedTable';
|
11
11
|
@import './useSortableColumns';
|
12
12
|
@import './useColumnRightAlign';
|
13
|
+
@import './useColumnCenterAlign';
|
13
14
|
@import './useStickyColumn';
|
14
15
|
@import './useActionsColumn';
|
15
16
|
@import './addons/CustomizeColumnsModal';
|
16
17
|
@import './addons/RowSizeDropdown';
|
17
18
|
@import './useSelectAllToggle';
|
19
|
+
@import './useExpandedRow';
|
18
20
|
@import './draggableElement';
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/*
|
2
|
+
* Licensed Materials - Property of IBM
|
3
|
+
* 5724-Q36
|
4
|
+
* (c) Copyright IBM Corp. 2020
|
5
|
+
* US Government Users Restricted Rights - Use, duplication or disclosure
|
6
|
+
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
7
|
+
*/
|
8
|
+
|
9
|
+
@import './variables';
|
10
|
+
|
11
|
+
.#{$block-class}__center-align-header {
|
12
|
+
width: 100%;
|
13
|
+
text-align: center;
|
14
|
+
}
|
15
|
+
|
16
|
+
.#{$block-class}__center-align-cell-renderer.sortDisabled {
|
17
|
+
margin-right: auto;
|
18
|
+
margin-left: auto;
|
19
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/*
|
2
|
+
* Licensed Materials - Property of IBM
|
3
|
+
* 5724-Q36
|
4
|
+
* (c) Copyright IBM Corp. 2022
|
5
|
+
* US Government Users Restricted Rights - Use, duplication or disclosure
|
6
|
+
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
7
|
+
*/
|
8
|
+
|
9
|
+
@import './variables';
|
10
|
+
|
11
|
+
.#{$block-class}__expanded-row-content {
|
12
|
+
padding: $spacing-05 $spacing-05 $spacing-06 $spacing-10;
|
13
|
+
}
|
@@ -20,6 +20,7 @@
|
|
20
20
|
|
21
21
|
// cut down version borrowed from 'carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/focus-outline';
|
22
22
|
@mixin input-outline($color: $focus) {
|
23
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
23
24
|
outline: $spacing-01 solid $color;
|
24
25
|
outline-offset: calc(-1 * $spacing-01);
|
25
26
|
|
@@ -110,6 +111,7 @@
|
|
110
111
|
100% - var(--#{$block-class}--toolbar-width) - $spacing-05
|
111
112
|
);
|
112
113
|
min-height: var(--#{$block-class}--size);
|
114
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
113
115
|
margin-right: var(--#{$block-class}--toolbar-width);
|
114
116
|
// room for toolbar
|
115
117
|
margin-left: $spacing-05;
|
@@ -277,7 +279,6 @@
|
|
277
279
|
padding-left: 0;
|
278
280
|
border-right: 0;
|
279
281
|
border-left: 0;
|
280
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
281
282
|
margin-right: calc(-1 * var(--#{$block-class}--size));
|
282
283
|
|
283
284
|
svg {
|
@@ -39,21 +39,27 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
39
39
|
|
40
40
|
@keyframes background-appear {
|
41
41
|
from {
|
42
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
42
43
|
background-color: var(--from-color);
|
43
44
|
}
|
44
45
|
|
45
46
|
to {
|
47
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
46
48
|
background-color: var(--to-color);
|
47
49
|
}
|
48
50
|
}
|
49
51
|
@keyframes background-and-shadow-appear {
|
50
52
|
from {
|
53
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
51
54
|
background-color: var(--from-color);
|
55
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
52
56
|
box-shadow: 0 1px 0 var(--from-color);
|
53
57
|
}
|
54
58
|
|
55
59
|
to {
|
60
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
56
61
|
background-color: var(--to-color);
|
62
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
57
63
|
box-shadow: 0 1px 0 var(--to-color-shadow);
|
58
64
|
}
|
59
65
|
}
|
@@ -86,6 +92,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
86
92
|
$animation: background-and-shadow-appear;
|
87
93
|
}
|
88
94
|
|
95
|
+
/* stylelint-disable-next-line carbon/motion-token-use */
|
89
96
|
animation: $animation $duration linear paused forwards;
|
90
97
|
// Added separately for clarity
|
91
98
|
animation-delay: calc(
|
@@ -102,6 +109,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
102
109
|
/* z-index used to raise above any position relative content as per Carbon header */
|
103
110
|
/* dropped 1 below Carbon header so as not to overlay the side panel */
|
104
111
|
z-index: $z-index-header-minus;
|
112
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
105
113
|
top: var(--#{$block-class}--header-top);
|
106
114
|
display: inline-block; /* cause top/bottom margin to reserve space */
|
107
115
|
width: 100%;
|
@@ -329,10 +337,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
329
337
|
&:not(.#{$block-class}__breadcrumb-title--pre-collapsed) {
|
330
338
|
opacity: var(--#{$block-class}--breadcrumb-title-opacity);
|
331
339
|
|
332
|
-
|
333
|
-
transform: translateY(
|
334
|
-
var(--#{$block-class}--breadcrumb-title-top)
|
335
|
-
); /* token linter does not support this form */
|
340
|
+
transform: translateY(var(--#{$block-class}--breadcrumb-title-top));
|
336
341
|
|
337
342
|
visibility: var(--#{$block-class}--breadcrumb-title-visibility);
|
338
343
|
}
|
@@ -241,7 +241,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
241
241
|
z-index: 4;
|
242
242
|
background-color: $ui-01;
|
243
243
|
opacity: var(--#{$block-class}--subtitle-opacity);
|
244
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
245
244
|
transform: translateY(var(--#{$block-class}--title-y-position));
|
246
245
|
}
|
247
246
|
.#{$block-class}__label-text {
|
@@ -251,7 +250,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
251
250
|
padding-right: $spacing-05;
|
252
251
|
opacity: var(--#{$block-class}--subtitle-opacity);
|
253
252
|
text-overflow: ellipsis;
|
254
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
255
253
|
transform: translateY(var(--#{$block-class}--title-y-position));
|
256
254
|
white-space: nowrap;
|
257
255
|
}
|
@@ -377,6 +375,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
377
375
|
.#{$block-class}__action-toolbar {
|
378
376
|
position: sticky;
|
379
377
|
z-index: 4;
|
378
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
380
379
|
top: var(--#{$block-class}--title-height);
|
381
380
|
display: flex;
|
382
381
|
align-items: center;
|
@@ -48,6 +48,10 @@ $block-class-modal: #{$block-class}-modal;
|
|
48
48
|
white-space: nowrap;
|
49
49
|
}
|
50
50
|
|
51
|
+
.#{$block-class}__tag-container--multiline {
|
52
|
+
flex-wrap: wrap;
|
53
|
+
}
|
54
|
+
|
51
55
|
.#{$block-class}__tag-container--hidden {
|
52
56
|
// This tag container is used to measure the width of all displayable tags
|
53
57
|
@include measuring-container;
|
@@ -42,7 +42,8 @@ $block-class: #{$pkg-prefix}--web-terminal;
|
|
42
42
|
position: fixed;
|
43
43
|
top: $spacing-09;
|
44
44
|
right: 0;
|
45
|
-
width:
|
45
|
+
width: 100%;
|
46
|
+
max-width: $web-terminal-width;
|
46
47
|
height: calc(100vh - #{$spacing-09});
|
47
48
|
border-left: 1px solid $gray-90;
|
48
49
|
color: $text-01;
|