@carbon/ibm-products 1.6.1 → 1.7.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 +119 -8
- 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.css +73 -7
- 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 +73 -7
- 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/ActionSet/ActionSet.js +1 -1
- package/es/components/AddSelect/AddSelect.js +11 -5
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
- package/es/components/AddSelect/AddSelectList.js +4 -4
- package/es/components/AddSelect/AddSelectSidebar.js +37 -5
- package/es/components/ButtonMenu/ButtonMenu.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +154 -0
- package/es/components/DataSpreadsheet/generateData.js +47 -0
- package/es/components/DataSpreadsheet/index.js +7 -0
- package/es/components/InlineEdit/InlineEdit.js +19 -22
- package/es/components/Tearsheet/TearsheetShell.js +3 -4
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getScrollbarWidth.js +14 -0
- package/lib/components/ActionSet/ActionSet.js +1 -1
- package/lib/components/AddSelect/AddSelect.js +11 -5
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
- package/lib/components/AddSelect/AddSelectList.js +4 -4
- package/lib/components/AddSelect/AddSelectSidebar.js +37 -4
- package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +171 -0
- package/lib/components/DataSpreadsheet/generateData.js +58 -0
- package/lib/components/DataSpreadsheet/index.js +13 -0
- package/lib/components/InlineEdit/InlineEdit.js +19 -22
- package/lib/components/Tearsheet/TearsheetShell.js +2 -3
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getScrollbarWidth.js +23 -0
- package/package.json +11 -9
- package/scss/components/AddSelect/_add-select.scss +20 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +79 -0
- package/scss/components/DataSpreadsheet/_index.scss +8 -0
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
- package/scss/components/InlineEdit/_inline-edit.scss +6 -4
- package/scss/components/_index.scss +1 -0
@@ -0,0 +1,171 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
8
|
+
value: true
|
9
|
+
});
|
10
|
+
exports.DataSpreadsheet = void 0;
|
11
|
+
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
+
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15
|
+
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
17
|
+
|
18
|
+
var _reactTable = require("react-table");
|
19
|
+
|
20
|
+
var _reactWindow = require("react-window");
|
21
|
+
|
22
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
23
|
+
|
24
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
25
|
+
|
26
|
+
var _devtools = require("../../global/js/utils/devtools");
|
27
|
+
|
28
|
+
var _settings = require("../../settings");
|
29
|
+
|
30
|
+
var _getScrollbarWidth = require("../../global/js/utils/getScrollbarWidth");
|
31
|
+
|
32
|
+
var _excluded = ["className", "columns", "data"];
|
33
|
+
|
34
|
+
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); }
|
35
|
+
|
36
|
+
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; }
|
37
|
+
|
38
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
39
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
|
40
|
+
var componentName = 'DataSpreadsheet';
|
41
|
+
/**
|
42
|
+
* DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
|
43
|
+
*/
|
44
|
+
|
45
|
+
var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
46
|
+
var className = _ref.className,
|
47
|
+
columns = _ref.columns,
|
48
|
+
data = _ref.data,
|
49
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
50
|
+
var defaultColumn = (0, _react.useMemo)(function () {
|
51
|
+
return {
|
52
|
+
width: 150,
|
53
|
+
rowHeaderWidth: 64
|
54
|
+
};
|
55
|
+
}, []);
|
56
|
+
var scrollBarSize = (0, _react.useMemo)(function () {
|
57
|
+
return (0, _getScrollbarWidth.getScrollbarWidth)();
|
58
|
+
}, []);
|
59
|
+
|
60
|
+
var _useTable = (0, _reactTable.useTable)({
|
61
|
+
columns: columns,
|
62
|
+
data: data,
|
63
|
+
defaultColumn: defaultColumn
|
64
|
+
}, _reactTable.useBlockLayout),
|
65
|
+
getTableProps = _useTable.getTableProps,
|
66
|
+
getTableBodyProps = _useTable.getTableBodyProps,
|
67
|
+
headerGroups = _useTable.headerGroups,
|
68
|
+
rows = _useTable.rows,
|
69
|
+
totalColumnsWidth = _useTable.totalColumnsWidth,
|
70
|
+
prepareRow = _useTable.prepareRow;
|
71
|
+
|
72
|
+
var RenderRow = _react.default.useCallback(function (_ref2) {
|
73
|
+
var index = _ref2.index,
|
74
|
+
style = _ref2.style;
|
75
|
+
var row = rows[index];
|
76
|
+
prepareRow(row);
|
77
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, row.getRowProps({
|
78
|
+
style: style
|
79
|
+
}), {
|
80
|
+
className: "tr",
|
81
|
+
"data-row-index": index
|
82
|
+
}), /*#__PURE__*/_react.default.createElement("button", {
|
83
|
+
type: "button",
|
84
|
+
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th")),
|
85
|
+
style: {
|
86
|
+
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
|
87
|
+
display: 'flex',
|
88
|
+
justifyContent: 'flex-end',
|
89
|
+
alignItems: 'center'
|
90
|
+
}
|
91
|
+
}, index + 1), row.cells.map(function (cell, index) {
|
92
|
+
return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
|
93
|
+
key: "cell_".concat(index)
|
94
|
+
}, cell.getCellProps(), {
|
95
|
+
type: "button",
|
96
|
+
className: "".concat(blockClass, "__td")
|
97
|
+
}), cell.render('Cell'));
|
98
|
+
}));
|
99
|
+
}, [prepareRow, rows, defaultColumn.rowHeaderWidth]);
|
100
|
+
|
101
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
|
102
|
+
className: (0, _classnames.default)(blockClass, className),
|
103
|
+
ref: ref,
|
104
|
+
role: "grid"
|
105
|
+
}), /*#__PURE__*/_react.default.createElement("div", null, headerGroups.map(function (headerGroup, index) {
|
106
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
107
|
+
key: "header_".concat(index)
|
108
|
+
}, headerGroup.getHeaderGroupProps(), {
|
109
|
+
className: "".concat(blockClass, "__tr")
|
110
|
+
}), /*#__PURE__*/_react.default.createElement("button", {
|
111
|
+
type: "button",
|
112
|
+
className: "".concat(blockClass, "__th"),
|
113
|
+
style: {
|
114
|
+
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
115
|
+
}
|
116
|
+
}, "\xA0"), headerGroup.headers.map(function (column, index) {
|
117
|
+
return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
|
118
|
+
key: "column_".concat(index)
|
119
|
+
}, column.getHeaderProps(), {
|
120
|
+
type: "button",
|
121
|
+
className: "".concat(blockClass, "__th")
|
122
|
+
}), column.render('Header'));
|
123
|
+
}));
|
124
|
+
})), /*#__PURE__*/_react.default.createElement("div", getTableBodyProps(), /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
|
125
|
+
height: 400,
|
126
|
+
itemCount: rows.length,
|
127
|
+
itemSize: 36,
|
128
|
+
width: totalColumnsWidth + scrollBarSize
|
129
|
+
}, RenderRow)));
|
130
|
+
}); // Return a placeholder if not released and not enabled by feature flag
|
131
|
+
|
132
|
+
|
133
|
+
exports.DataSpreadsheet = DataSpreadsheet;
|
134
|
+
exports.DataSpreadsheet = DataSpreadsheet = _settings.pkg.checkComponentEnabled(DataSpreadsheet, componentName); // The display name of the component, used by React. Note that displayName
|
135
|
+
// is used in preference to relying on function.name.
|
136
|
+
|
137
|
+
DataSpreadsheet.displayName = componentName; // The types and DocGen commentary for the component props,
|
138
|
+
// in alphabetical order (for consistency).
|
139
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
140
|
+
|
141
|
+
DataSpreadsheet.propTypes = {
|
142
|
+
/**
|
143
|
+
* Provide an optional class to be applied to the containing node.
|
144
|
+
*/
|
145
|
+
className: _propTypes.default.string,
|
146
|
+
|
147
|
+
/**
|
148
|
+
* The data that will build the column headers
|
149
|
+
*/
|
150
|
+
columns: _propTypes.default.arrayOf(_propTypes.default.shape({
|
151
|
+
Header: _propTypes.default.string,
|
152
|
+
accessor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
|
153
|
+
Cell: _propTypes.default.func // optional cell formatter
|
154
|
+
|
155
|
+
})),
|
156
|
+
|
157
|
+
/**
|
158
|
+
* The spreadsheet data that will be rendered in the body of the spreadsheet component
|
159
|
+
*/
|
160
|
+
data: _propTypes.default.arrayOf(_propTypes.default.shape)
|
161
|
+
/* TODO: add types and DocGen for all props. */
|
162
|
+
|
163
|
+
}; // Default values for component props. Default values are not required for
|
164
|
+
// props that are required, nor for props where the component can apply
|
165
|
+
// 'undefined' values reasonably. Default values should be provided when the
|
166
|
+
// component needs to make a choice or assumption when a prop is not supplied.
|
167
|
+
|
168
|
+
DataSpreadsheet.defaultProps = {
|
169
|
+
data: [],
|
170
|
+
columns: []
|
171
|
+
};
|
@@ -0,0 +1,58 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.generateData = void 0;
|
9
|
+
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
|
12
|
+
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; }
|
13
|
+
|
14
|
+
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; }
|
15
|
+
|
16
|
+
// cspell:disable
|
17
|
+
var pets = ['dog', 'cat', 'bird', 'lizard', 'frog', 'hamster', 'fish', 'rabbit', 'snake'];
|
18
|
+
var petNames = ['Bruno', 'Willow', 'Kona', 'Heidi', 'Rusty', 'Bonnie', 'Cash', 'Gucci', 'Brody', 'Emma', 'Loki', 'Angel', 'Astro', 'Sherman', 'Layla', 'Peanut', 'Grace', 'Mickey', 'Sasha', 'Finn', 'Tucker', 'Bear', 'Mocha', 'Roscoe']; // cspell:enable
|
19
|
+
|
20
|
+
var range = function range(len) {
|
21
|
+
var arr = [];
|
22
|
+
|
23
|
+
for (var i = 0; i < len; i++) {
|
24
|
+
arr.push(i);
|
25
|
+
}
|
26
|
+
|
27
|
+
return arr;
|
28
|
+
};
|
29
|
+
|
30
|
+
var newPet = function newPet() {
|
31
|
+
return {
|
32
|
+
petType: pets[Math.floor(Math.random() * pets.length)],
|
33
|
+
firstName: petNames[Math.floor(Math.random() * petNames.length)],
|
34
|
+
age: Math.floor(Math.random() * 30),
|
35
|
+
visits: Math.floor(Math.random() * 40),
|
36
|
+
health: Math.floor(Math.random() * 100)
|
37
|
+
};
|
38
|
+
};
|
39
|
+
|
40
|
+
var generateData = function generateData() {
|
41
|
+
for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
|
42
|
+
lens[_key] = arguments[_key];
|
43
|
+
}
|
44
|
+
|
45
|
+
var makeDataLevel = function makeDataLevel() {
|
46
|
+
var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
47
|
+
var len = lens[depth];
|
48
|
+
return range(len).map(function () {
|
49
|
+
return _objectSpread(_objectSpread({}, newPet()), {}, {
|
50
|
+
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
|
51
|
+
});
|
52
|
+
});
|
53
|
+
};
|
54
|
+
|
55
|
+
return makeDataLevel();
|
56
|
+
};
|
57
|
+
|
58
|
+
exports.generateData = generateData;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "DataSpreadsheet", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _DataSpreadsheet.DataSpreadsheet;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
|
13
|
+
var _DataSpreadsheet = require("./DataSpreadsheet");
|
@@ -31,7 +31,7 @@ var _carbonComponentsReact = require("carbon-components-react");
|
|
31
31
|
|
32
32
|
var _iconsReact = require("@carbon/icons-react");
|
33
33
|
|
34
|
-
var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "
|
34
|
+
var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value", "warn", "warnText"];
|
35
35
|
|
36
36
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
37
37
|
|
@@ -63,7 +63,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
63
63
|
onChange = _ref.onChange,
|
64
64
|
placeholder = _ref.placeholder,
|
65
65
|
saveDescription = _ref.saveDescription,
|
66
|
-
saveDisabled = _ref.saveDisabled,
|
67
66
|
size = _ref.size,
|
68
67
|
value = _ref.value,
|
69
68
|
warn = _ref.warn,
|
@@ -83,9 +82,9 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
83
82
|
internalValue = _useState4[0],
|
84
83
|
setInternalValue = _useState4[1];
|
85
84
|
|
86
|
-
var
|
85
|
+
var showValidation = invalid || warn;
|
87
86
|
var validationText = invalidText || warnText;
|
88
|
-
var validationIcon =
|
87
|
+
var validationIcon = showValidation ? invalid ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled16, null) : null;
|
89
88
|
|
90
89
|
var doSetEditing = function doSetEditing(value) {
|
91
90
|
if (value === false) {
|
@@ -137,6 +136,14 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
137
136
|
}
|
138
137
|
};
|
139
138
|
|
139
|
+
var handleInput = function handleInput() {
|
140
|
+
setInternalValue(refInput.current.innerText);
|
141
|
+
|
142
|
+
if (onChange) {
|
143
|
+
onChange(refInput.current.innerText);
|
144
|
+
}
|
145
|
+
};
|
146
|
+
|
140
147
|
var handlePaste = function handlePaste(ev) {
|
141
148
|
ev.preventDefault(); // Get clipboard as plain text
|
142
149
|
|
@@ -164,14 +171,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
164
171
|
}
|
165
172
|
};
|
166
173
|
|
167
|
-
var handleInput = function handleInput() {
|
168
|
-
setInternalValue(refInput.current.innerText);
|
169
|
-
|
170
|
-
if (onChange) {
|
171
|
-
onChange(refInput.current.innerText);
|
172
|
-
}
|
173
|
-
};
|
174
|
-
|
175
174
|
var handleCancel = function handleCancel() {
|
176
175
|
refInput.current.innerText = value;
|
177
176
|
handleInput(value);
|
@@ -185,7 +184,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
185
184
|
|
186
185
|
var handleBlur = function handleBlur(ev) {
|
187
186
|
if (!ref.current.contains(ev.relatedTarget)) {
|
188
|
-
doSetEditing(false);
|
189
187
|
handleSave();
|
190
188
|
}
|
191
189
|
};
|
@@ -256,7 +254,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
256
254
|
"aria-hidden": !editing
|
257
255
|
}, "\u2026"), /*#__PURE__*/_react.default.createElement("div", {
|
258
256
|
className: (0, _classnames.default)("".concat(blockClass, "__toolbar"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
|
259
|
-
},
|
257
|
+
}, showValidation && /*#__PURE__*/_react.default.createElement("div", {
|
260
258
|
className: "".concat(blockClass, "__validation-icon")
|
261
259
|
}, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
262
260
|
className: "".concat(blockClass, "__cancel"),
|
@@ -272,7 +270,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
272
270
|
iconDescription: saveDescription,
|
273
271
|
onClick: handleSave,
|
274
272
|
renderIcon: _iconsReact.Checkmark16,
|
275
|
-
disabled:
|
273
|
+
disabled: value === internalValue
|
276
274
|
})) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
277
275
|
"aria-hidden": "true",
|
278
276
|
className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--hover-visible"), editVisibleOnHoverOnly)),
|
@@ -285,7 +283,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
285
283
|
tabIndex: -1
|
286
284
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
287
285
|
className: (0, _classnames.default)("".concat(blockClass, "__disabled-cover"))
|
288
|
-
}),
|
286
|
+
}), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
289
287
|
className: "".concat(blockClass, "__validation-text ").concat(_settings.carbon.prefix, "--form-requirement")
|
290
288
|
}, validationText))
|
291
289
|
);
|
@@ -358,12 +356,16 @@ InlineEdit.propTypes = {
|
|
358
356
|
onCancel: _propTypes.default.func,
|
359
357
|
|
360
358
|
/**
|
361
|
-
* method called on input event (it's a React thing onChange behaves like on input)
|
359
|
+
* method called on input event (it's a React thing onChange behaves like on input).
|
360
|
+
*
|
361
|
+
* NOTE: caller to handle invalid/warn states and associated text
|
362
362
|
*/
|
363
363
|
onChange: _propTypes.default.func,
|
364
364
|
|
365
365
|
/**
|
366
366
|
* method called on change event
|
367
|
+
*
|
368
|
+
* NOTE: caller to handle invalid/warn states and associated text
|
367
369
|
*/
|
368
370
|
onSave: _propTypes.default.func,
|
369
371
|
|
@@ -377,11 +379,6 @@ InlineEdit.propTypes = {
|
|
377
379
|
*/
|
378
380
|
saveDescription: _propTypes.default.string.isRequired,
|
379
381
|
|
380
|
-
/**
|
381
|
-
* disabled state of the save button
|
382
|
-
*/
|
383
|
-
saveDisabled: _propTypes.default.bool,
|
384
|
-
|
385
382
|
/**
|
386
383
|
* vertical size of control
|
387
384
|
*/
|
@@ -146,10 +146,9 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
146
146
|
setTimeout(function () {
|
147
147
|
return element.focus();
|
148
148
|
}, 1);
|
149
|
-
};
|
149
|
+
};
|
150
150
|
|
151
|
-
|
152
|
-
(0, _react.useLayoutEffect)(function () {
|
151
|
+
(0, _react.useEffect)(function () {
|
153
152
|
var notify = function notify() {
|
154
153
|
return stack.all.forEach(function (handler) {
|
155
154
|
handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
|
package/lib/components/index.js
CHANGED
@@ -87,6 +87,12 @@ Object.defineProperty(exports, "CreateTearsheetStep", {
|
|
87
87
|
return _CreateTearsheet.CreateTearsheetStep;
|
88
88
|
}
|
89
89
|
});
|
90
|
+
Object.defineProperty(exports, "DataSpreadsheet", {
|
91
|
+
enumerable: true,
|
92
|
+
get: function get() {
|
93
|
+
return _DataSpreadsheet.DataSpreadsheet;
|
94
|
+
}
|
95
|
+
});
|
90
96
|
Object.defineProperty(exports, "EditSidePanel", {
|
91
97
|
enumerable: true,
|
92
98
|
get: function get() {
|
@@ -364,4 +370,6 @@ var _OptionsTile = require("./OptionsTile");
|
|
364
370
|
|
365
371
|
var _CancelableTextEdit = require("./CancelableTextEdit");
|
366
372
|
|
367
|
-
var _InlineEdit = require("./InlineEdit");
|
373
|
+
var _InlineEdit = require("./InlineEdit");
|
374
|
+
|
375
|
+
var _DataSpreadsheet = require("./DataSpreadsheet");
|
@@ -0,0 +1,23 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getScrollbarWidth = void 0;
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2022
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
13
|
+
*/
|
14
|
+
var getScrollbarWidth = function getScrollbarWidth() {
|
15
|
+
var scrollDiv = document.createElement('div');
|
16
|
+
scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
|
17
|
+
document.body.appendChild(scrollDiv);
|
18
|
+
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
19
|
+
document.body.removeChild(scrollDiv);
|
20
|
+
return scrollbarWidth;
|
21
|
+
};
|
22
|
+
|
23
|
+
exports.getScrollbarWidth = getScrollbarWidth;
|
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.7.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -70,21 +70,23 @@
|
|
70
70
|
"dependencies": {
|
71
71
|
"@babel/runtime": "^7.17.2",
|
72
72
|
"@carbon/telemetry": "^0.0.0-alpha.6",
|
73
|
-
"react-resize-detector": "^7.0.0"
|
73
|
+
"react-resize-detector": "^7.0.0",
|
74
|
+
"react-table": "^7.7.0",
|
75
|
+
"react-window": "^1.8.6"
|
74
76
|
},
|
75
77
|
"peerDependencies": {
|
76
|
-
"@carbon/colors": "^10.
|
77
|
-
"@carbon/icons-react": "^10.
|
78
|
+
"@carbon/colors": "^10.36.0",
|
79
|
+
"@carbon/icons-react": "^10.46.0",
|
78
80
|
"@carbon/import-once": "^10.5.0",
|
79
|
-
"@carbon/layout": "^10.
|
80
|
-
"@carbon/motion": "^10.
|
81
|
+
"@carbon/layout": "^10.36.0",
|
82
|
+
"@carbon/motion": "^10.28.0",
|
81
83
|
"@carbon/themes": "^10.50.0",
|
82
84
|
"@carbon/type": "^10.40.0",
|
83
|
-
"carbon-components": "^10.
|
84
|
-
"carbon-components-react": "^7.
|
85
|
+
"carbon-components": "^10.53.0",
|
86
|
+
"carbon-components-react": "^7.53.0",
|
85
87
|
"carbon-icons": "^7.0.7",
|
86
88
|
"react": "^16.8.6 || ^17.0.1",
|
87
89
|
"react-dom": "^16.8.6 || ^17.0.1"
|
88
90
|
},
|
89
|
-
"gitHead": "
|
91
|
+
"gitHead": "f4a8ee412f5ddb54722b47478e35d469f49ac411"
|
90
92
|
}
|
@@ -79,6 +79,16 @@
|
|
79
79
|
margin-bottom: $spacing-03;
|
80
80
|
}
|
81
81
|
|
82
|
+
.#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
|
83
|
+
background: $disabled-02;
|
84
|
+
}
|
85
|
+
|
86
|
+
.#{$block-class} .#{$block-class}__sidebar-accordion-title {
|
87
|
+
display: flex;
|
88
|
+
align-items: center;
|
89
|
+
justify-content: space-between;
|
90
|
+
}
|
91
|
+
|
82
92
|
// overrides
|
83
93
|
|
84
94
|
// the influencer sidebar needs to be even with the buttons
|
@@ -111,6 +121,16 @@
|
|
111
121
|
.#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
|
112
122
|
cursor: pointer;
|
113
123
|
}
|
124
|
+
|
125
|
+
.#{$carbon-prefix}--accordion__item {
|
126
|
+
&:hover .#{$block-class}__sidebar-accordion-title button {
|
127
|
+
opacity: 1;
|
128
|
+
}
|
129
|
+
|
130
|
+
.#{$block-class}__sidebar-accordion-title button {
|
131
|
+
opacity: 0;
|
132
|
+
}
|
133
|
+
}
|
114
134
|
}
|
115
135
|
|
116
136
|
@include exports('add-select') {
|
@@ -0,0 +1,79 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2022, 2022
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Standard imports.
|
9
|
+
@import '../../global/styles/project-settings';
|
10
|
+
@import '../../global/styles/mixins';
|
11
|
+
|
12
|
+
// Define all component styles in a mixin which is then exported using
|
13
|
+
// the Carbon import-once mechanism.
|
14
|
+
@mixin set-header-borders {
|
15
|
+
border-right: 1px solid $text-03;
|
16
|
+
border-bottom: 1px solid $text-03;
|
17
|
+
}
|
18
|
+
@mixin set-body-borders {
|
19
|
+
border-right: 1px solid $ui-03;
|
20
|
+
border-bottom: 1px solid $ui-03;
|
21
|
+
}
|
22
|
+
@mixin data-spreadsheet {
|
23
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
24
|
+
$block-class: #{$pkg-prefix}--data-spreadsheet;
|
25
|
+
|
26
|
+
.#{$block-class} {
|
27
|
+
display: inline-block;
|
28
|
+
border-spacing: 0;
|
29
|
+
// border: 1px solid black;
|
30
|
+
|
31
|
+
button.#{$block-class}__td {
|
32
|
+
margin: 0;
|
33
|
+
background-color: transparent;
|
34
|
+
}
|
35
|
+
.#{$block-class}__tr {
|
36
|
+
:last-child {
|
37
|
+
.td {
|
38
|
+
border-bottom: 0;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
.#{$block-class}__th,
|
44
|
+
.#{$block-class}__td {
|
45
|
+
height: 2.25rem; // update to be controlled by cellSize prop later
|
46
|
+
padding: 0 $spacing-03;
|
47
|
+
border: 0;
|
48
|
+
margin: 0;
|
49
|
+
color: $text-01;
|
50
|
+
}
|
51
|
+
.#{$block-class}__th:last-child,
|
52
|
+
.#{$block-class}__td:last-child {
|
53
|
+
border-right: 1px solid $text-03;
|
54
|
+
}
|
55
|
+
.#{$block-class}__th,
|
56
|
+
button.#{$block-class}__td-th {
|
57
|
+
@include set-header-borders();
|
58
|
+
|
59
|
+
background-color: $ui-01;
|
60
|
+
cursor: pointer;
|
61
|
+
}
|
62
|
+
.#{$block-class}__td {
|
63
|
+
@include set-body-borders();
|
64
|
+
|
65
|
+
cursor: cell;
|
66
|
+
text-align: left;
|
67
|
+
}
|
68
|
+
.#{$block-class}__th {
|
69
|
+
@include carbon--type-style('productive-heading-01');
|
70
|
+
|
71
|
+
color: $text-01;
|
72
|
+
text-align: left;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
@include exports('data-spreadsheet') {
|
78
|
+
@include data-spreadsheet;
|
79
|
+
}
|
@@ -89,6 +89,7 @@
|
|
89
89
|
transition: background-color $duration--fast-01 motion(entrance, productive),
|
90
90
|
box-shadow $duration--fast-01 motion(entrance, productive),
|
91
91
|
border-color $duration--fast-01 motion(entrance, productive);
|
92
|
+
vertical-align: middle; // mis-aligned items cause height to grow beyond setting.
|
92
93
|
|
93
94
|
white-space: nowrap;
|
94
95
|
|
@@ -102,16 +103,17 @@
|
|
102
103
|
--#{$block-class}--icon-size: #{$spacing-05};
|
103
104
|
}
|
104
105
|
|
106
|
+
&.#{$block-class}--invalid {
|
107
|
+
// editing takes precedence over invalid
|
108
|
+
@include input-outline($support-01);
|
109
|
+
}
|
110
|
+
|
105
111
|
&.#{$block-class}--editing {
|
106
112
|
@include input-outline($focus);
|
107
113
|
|
108
114
|
background-color: $ui-01;
|
109
115
|
}
|
110
116
|
|
111
|
-
.#{$block-class}--invalid {
|
112
|
-
@include input-outline($support-01);
|
113
|
-
}
|
114
|
-
|
115
117
|
.#{$block-class}__input {
|
116
118
|
display: inline-block;
|
117
119
|
overflow: hidden;
|