@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.26
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +10 -4
- package/css/index-full-carbon.css +69 -97
- 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 +9 -88
- 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 +69 -97
- 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 +69 -97
- 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/AddSelectBody.js +1 -0
- package/es/components/AddSelect/AddSelectFormControl.js +92 -0
- package/es/components/AddSelect/AddSelectList.js +26 -195
- package/es/components/AddSelect/AddSelectRow.js +220 -0
- package/es/components/AddSelect/hooks/useFocus.js +35 -0
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +15 -65
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +5 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +112 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +29 -23
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -0
- package/es/components/Datagrid/index.js +7 -7
- package/es/components/Datagrid/useInfiniteScroll.js +5 -1
- package/es/components/Datagrid/useOnRowClick.js +3 -3
- package/es/components/Datagrid/useSortableColumns.js +7 -5
- package/es/components/Datagrid/utils/getAutoSizedColumnWidth.js +29 -0
- package/es/components/ExampleComponent/ExampleComponent.js +39 -5
- package/es/components/ExampleComponent/useExample.js +51 -0
- package/es/components/InlineEditV1/InlineEditV1.js +15 -20
- package/es/components/InlineEditV2/InlineEditV2.js +21 -31
- package/es/components/index.js +1 -1
- package/es/global/js/package-settings.js +24 -3
- package/es/global/js/utils/story-helper.js +9 -0
- package/es/global/js/utils/test-helper.js +38 -6
- package/lib/components/AddSelect/AddSelectBody.js +1 -0
- package/lib/components/AddSelect/AddSelectFormControl.js +110 -0
- package/lib/components/AddSelect/AddSelectList.js +29 -203
- package/lib/components/AddSelect/AddSelectRow.js +247 -0
- package/lib/components/AddSelect/hooks/useFocus.js +46 -0
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +16 -69
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +5 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +132 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +23 -16
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -0
- package/lib/components/Datagrid/index.js +9 -1
- package/lib/components/Datagrid/useInfiniteScroll.js +5 -0
- package/lib/components/Datagrid/useOnRowClick.js +3 -3
- package/lib/components/Datagrid/useSortableColumns.js +7 -5
- package/lib/components/Datagrid/utils/getAutoSizedColumnWidth.js +40 -0
- package/lib/components/ExampleComponent/ExampleComponent.js +47 -4
- package/lib/components/ExampleComponent/useExample.js +63 -0
- package/lib/components/InlineEditV1/InlineEditV1.js +14 -19
- package/lib/components/InlineEditV2/InlineEditV2.js +20 -30
- package/lib/components/index.js +6 -0
- package/lib/global/js/package-settings.js +24 -3
- package/lib/global/js/utils/story-helper.js +13 -2
- package/lib/global/js/utils/test-helper.js +42 -8
- package/package.json +2 -2
- package/scss/components/AddSelect/_add-select.scss +4 -16
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +15 -2
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +18 -6
- package/scss/components/InlineEditV1/_inline-edit-v1.scss +5 -89
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +42 -3
- package/scss/components/SidePanel/_side-panel.scss +2 -1
@@ -83,6 +83,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
|
|
83
83
|
}
|
84
84
|
|
85
85
|
return /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
|
86
|
+
className: "".concat(blockClass, "__row-size-radio-button"),
|
86
87
|
key: option.value,
|
87
88
|
labelText: labelText,
|
88
89
|
value: option.value,
|
@@ -11,6 +11,12 @@ Object.defineProperty(exports, "Datagrid", {
|
|
11
11
|
return _Datagrid.Datagrid;
|
12
12
|
}
|
13
13
|
});
|
14
|
+
Object.defineProperty(exports, "getAutoSizedColumnWidth", {
|
15
|
+
enumerable: true,
|
16
|
+
get: function get() {
|
17
|
+
return _getAutoSizedColumnWidth.getAutoSizedColumnWidth;
|
18
|
+
}
|
19
|
+
});
|
14
20
|
Object.defineProperty(exports, "useActionsColumn", {
|
15
21
|
enumerable: true,
|
16
22
|
get: function get() {
|
@@ -156,4 +162,6 @@ var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
|
|
156
162
|
|
157
163
|
var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
|
158
164
|
|
159
|
-
var _useFiltering = _interopRequireDefault(require("./useFiltering"));
|
165
|
+
var _useFiltering = _interopRequireDefault(require("./useFiltering"));
|
166
|
+
|
167
|
+
var _getAutoSizedColumnWidth = require("./utils/getAutoSizedColumnWidth");
|
@@ -15,6 +15,8 @@ var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions
|
|
15
15
|
|
16
16
|
var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
|
17
17
|
|
18
|
+
var _settings = require("../../settings");
|
19
|
+
|
18
20
|
/*
|
19
21
|
* Licensed Materials - Property of IBM
|
20
22
|
* 5724-Q36
|
@@ -25,6 +27,9 @@ var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
|
|
25
27
|
var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
26
28
|
(0, _useParentDimensions.default)(hooks);
|
27
29
|
(0, _useResizeTable.default)(hooks);
|
30
|
+
(0, _react.useEffect)(function () {
|
31
|
+
_settings.pkg.checkReportFeatureEnabled('Datagrid.useInfiniteScroll');
|
32
|
+
}, []);
|
28
33
|
|
29
34
|
var useInstance = function useInstance(instance) {
|
30
35
|
var isFetching = instance.isFetching,
|
@@ -8,7 +8,7 @@ exports.default = void 0;
|
|
8
8
|
/*
|
9
9
|
* Licensed Materials - Property of IBM
|
10
10
|
* 5724-Q36
|
11
|
-
* (c) Copyright IBM Corp. 2020
|
11
|
+
* (c) Copyright IBM Corp. 2020, 2023
|
12
12
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
13
13
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
14
14
|
*/
|
@@ -23,9 +23,9 @@ var useOnRowClick = function useOnRowClick(hooks) {
|
|
23
23
|
var id = row.id,
|
24
24
|
toggleRowSelected = row.toggleRowSelected;
|
25
25
|
|
26
|
-
var onClick = function onClick() {
|
26
|
+
var onClick = function onClick(event) {
|
27
27
|
if (!isFetching && onRowClick) {
|
28
|
-
onRowClick(row);
|
28
|
+
onRowClick(row, event);
|
29
29
|
instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
|
30
30
|
return toggleRow.toggleRowSelected(false);
|
31
31
|
});
|
@@ -36,6 +36,8 @@ var ordering = {
|
|
36
36
|
|
37
37
|
var useSortableColumns = function useSortableColumns(hooks) {
|
38
38
|
var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
|
39
|
+
var _instance$customizeCo;
|
40
|
+
|
39
41
|
var instance = _ref.instance;
|
40
42
|
var onSort = instance.onSort;
|
41
43
|
|
@@ -56,7 +58,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
56
58
|
|
57
59
|
var sortableColumns = visibleColumns.map(function (column) {
|
58
60
|
var icon = function icon(col, props) {
|
59
|
-
if (col.isSorted) {
|
61
|
+
if (col !== null && col !== void 0 && col.isSorted) {
|
60
62
|
switch (col.isSortedDesc) {
|
61
63
|
case false:
|
62
64
|
return /*#__PURE__*/_react.default.createElement(_icons.ArrowUp, (0, _extends2.default)({
|
@@ -93,13 +95,13 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
93
95
|
|
94
96
|
return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
95
97
|
onClick: function onClick() {
|
96
|
-
return onSortClick(headerProp.column);
|
98
|
+
return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
|
97
99
|
},
|
98
100
|
kind: "ghost",
|
99
101
|
renderIcon: function renderIcon(props) {
|
100
|
-
return icon(headerProp.column, props);
|
102
|
+
return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
|
101
103
|
},
|
102
|
-
className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp.column.isSortedDesc), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--asc"), headerProp.column.isSortedDesc === false), _cx))
|
104
|
+
className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false), _cx))
|
103
105
|
}, column.Header);
|
104
106
|
};
|
105
107
|
|
@@ -108,7 +110,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
108
110
|
minWidth: column.disableSortBy === true ? 0 : 90
|
109
111
|
});
|
110
112
|
});
|
111
|
-
return (0, _toConsumableArray2.default)(sortableColumns);
|
113
|
+
return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : (0, _toConsumableArray2.default)(sortableColumns);
|
112
114
|
};
|
113
115
|
|
114
116
|
var sortInstanceProps = function sortInstanceProps(instance) {
|
@@ -0,0 +1,40 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.getAutoSizedColumnWidth = void 0;
|
9
|
+
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Copyright IBM Corp. 2023, 2023
|
14
|
+
*
|
15
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
16
|
+
* LICENSE file in the root directory of this source tree.
|
17
|
+
*/
|
18
|
+
|
19
|
+
/**
|
20
|
+
* Calculates the auto sized width of a column
|
21
|
+
* @param {Array<object>} rows - The datagrid rows
|
22
|
+
* @param {string} accessor - The accessor for the column
|
23
|
+
* @param {string} headerText - The header text for the column
|
24
|
+
*/
|
25
|
+
var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
|
26
|
+
var maxWidth = 400;
|
27
|
+
var minWidth = 58;
|
28
|
+
var letterSpacing = 10;
|
29
|
+
var cellLength = Math.max.apply(Math, (0, _toConsumableArray2.default)(rows.map(function (row) {
|
30
|
+
return ("".concat(row[accessor]) || '').length;
|
31
|
+
})).concat([headerText.length]));
|
32
|
+
|
33
|
+
if (cellLength <= 3) {
|
34
|
+
return minWidth;
|
35
|
+
}
|
36
|
+
|
37
|
+
return Math.min(maxWidth, cellLength * letterSpacing + 16);
|
38
|
+
};
|
39
|
+
|
40
|
+
exports.getAutoSizedColumnWidth = getAutoSizedColumnWidth;
|
@@ -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,9 +13,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
11
13
|
|
12
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
15
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
17
|
+
|
14
18
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15
19
|
|
16
|
-
var _react =
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
17
21
|
|
18
22
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
19
23
|
|
@@ -23,7 +27,13 @@ var _settings = require("../../settings");
|
|
23
27
|
|
24
28
|
var _react2 = require("@carbon/react");
|
25
29
|
|
26
|
-
var
|
30
|
+
var _useExample3 = _interopRequireDefault(require("./useExample"));
|
31
|
+
|
32
|
+
var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "usesExampleHook", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "secondaryIcon", "size", "style"];
|
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; }
|
27
37
|
|
28
38
|
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; }
|
29
39
|
|
@@ -37,6 +47,7 @@ var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not impor
|
|
37
47
|
var defaults = {
|
38
48
|
primaryKind: 'primary',
|
39
49
|
secondaryKind: 'secondary',
|
50
|
+
secondaryIcon: null,
|
40
51
|
size: 'lg'
|
41
52
|
};
|
42
53
|
/**
|
@@ -48,6 +59,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
48
59
|
boxedBorder = _ref.boxedBorder,
|
49
60
|
className = _ref.className,
|
50
61
|
disabled = _ref.disabled,
|
62
|
+
usesExampleHook = _ref.usesExampleHook,
|
51
63
|
onPrimaryClick = _ref.onPrimaryClick,
|
52
64
|
onSecondaryClick = _ref.onSecondaryClick,
|
53
65
|
primaryButtonLabel = _ref.primaryButtonLabel,
|
@@ -56,10 +68,22 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
56
68
|
secondaryButtonLabel = _ref.secondaryButtonLabel,
|
57
69
|
_ref$secondaryKind = _ref.secondaryKind,
|
58
70
|
secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
|
71
|
+
_ref$secondaryIcon = _ref.secondaryIcon,
|
72
|
+
secondaryIcon = _ref$secondaryIcon === void 0 ? defaults.secondaryIcon : _ref$secondaryIcon,
|
59
73
|
_ref$size = _ref.size,
|
60
74
|
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
61
75
|
style = _ref.style,
|
62
76
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
77
|
+
|
78
|
+
var _useState = (0, _react.useState)(primaryButtonLabel),
|
79
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
80
|
+
thePrimaryButtonLabel = _useState2[0],
|
81
|
+
setThePrimaryButtonLabel = _useState2[1];
|
82
|
+
|
83
|
+
var _useExample = (0, _useExample3.default)(usesExampleHook),
|
84
|
+
_useExample2 = (0, _slicedToArray2.default)(_useExample, 1),
|
85
|
+
exampleUse = _useExample2[0];
|
86
|
+
|
63
87
|
var modeClass = boxedBorder ? "".concat(blockClass, "--boxed-set") : "".concat(blockClass, "--shadow-set");
|
64
88
|
|
65
89
|
var handlePrimaryClick = function handlePrimaryClick(e) {
|
@@ -74,6 +98,14 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
74
98
|
}
|
75
99
|
};
|
76
100
|
|
101
|
+
var theSecondaryIcon = (0, _react.useRef)(secondaryIcon && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
|
102
|
+
(0, _react.useEffect)(function () {
|
103
|
+
if (usesExampleHook !== undefined && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
|
104
|
+
setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
|
105
|
+
} else {
|
106
|
+
setThePrimaryButtonLabel(primaryButtonLabel);
|
107
|
+
}
|
108
|
+
}, [primaryButtonLabel, usesExampleHook, exampleUse]);
|
77
109
|
return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
|
78
110
|
className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
|
79
111
|
className, // Apply any supplied class names to the main HTML element.
|
@@ -85,6 +117,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
85
117
|
className: "".concat(blockClass, "__secondary-button"),
|
86
118
|
kind: secondaryKind,
|
87
119
|
onClick: handleSecondaryClick,
|
120
|
+
renderIcon: theSecondaryIcon.current,
|
88
121
|
disabled: disabled,
|
89
122
|
size: size
|
90
123
|
}, secondaryButtonLabel), /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
@@ -93,7 +126,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
93
126
|
onClick: handlePrimaryClick,
|
94
127
|
disabled: disabled,
|
95
128
|
size: size
|
96
|
-
},
|
129
|
+
}, thePrimaryButtonLabel));
|
97
130
|
}); // Return a placeholder if not released and not enabled by feature flag.
|
98
131
|
|
99
132
|
|
@@ -151,6 +184,11 @@ ExampleComponent.propTypes = {
|
|
151
184
|
*/
|
152
185
|
secondaryButtonLabel: _propTypes.default.string.isRequired,
|
153
186
|
|
187
|
+
/**
|
188
|
+
* The icon to use for the secondary button.
|
189
|
+
*/
|
190
|
+
secondaryIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
191
|
+
|
154
192
|
/**
|
155
193
|
* The kind of button for the secondary button ('secondary' or 'tertiary').
|
156
194
|
*/
|
@@ -164,5 +202,10 @@ ExampleComponent.propTypes = {
|
|
164
202
|
/**
|
165
203
|
* Optional style settings for the containing node.
|
166
204
|
*/
|
167
|
-
style: _propTypes.default.object
|
205
|
+
style: _propTypes.default.object,
|
206
|
+
|
207
|
+
/**
|
208
|
+
* Hook example timeout (in seconds) or undefined
|
209
|
+
*/
|
210
|
+
usesExampleHook: _propTypes.default.number
|
168
211
|
};
|
@@ -0,0 +1,63 @@
|
|
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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
|
+
|
12
|
+
var _react = require("react");
|
13
|
+
|
14
|
+
var _settings = require("../../settings");
|
15
|
+
|
16
|
+
/**
|
17
|
+
* Copyright IBM Corp. 2020, 2021
|
18
|
+
*
|
19
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
20
|
+
* LICENSE file in the root directory of this source tree.
|
21
|
+
*/
|
22
|
+
var useExample = function useExample(initialTime) {
|
23
|
+
// NOTE: hooks cannot be called conditionally.
|
24
|
+
//
|
25
|
+
// ** If the hook uses other hooks then they must be called,
|
26
|
+
// ** this could lead to unexpected behavior.
|
27
|
+
// ** As some hooks may still be called even if the condition is false.
|
28
|
+
var _useState = (0, _react.useState)( // Disable hook in a safe way if possible, else use despite feature disabled.
|
29
|
+
// Either a console error or warning will be logged.
|
30
|
+
initialTime),
|
31
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
32
|
+
time = _useState2[0],
|
33
|
+
setTime = _useState2[1]; // Use of the feature flag to
|
34
|
+
|
35
|
+
|
36
|
+
var feature = 'ExampleComponent.useExample';
|
37
|
+
var tryFeature = initialTime !== undefined;
|
38
|
+
|
39
|
+
var featureEnabled = tryFeature && _settings.pkg.checkReportFeatureEnabled(feature);
|
40
|
+
|
41
|
+
if (tryFeature && !featureEnabled) {
|
42
|
+
// Output a useful message if the feature is disabled.
|
43
|
+
console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
|
44
|
+
} // Actual hook is code is below
|
45
|
+
|
46
|
+
|
47
|
+
(0, _react.useEffect)(function () {
|
48
|
+
if (!featureEnabled) {
|
49
|
+
return;
|
50
|
+
} // turn off all or part of the feature
|
51
|
+
|
52
|
+
|
53
|
+
if (time > 0) {
|
54
|
+
setTimeout(function () {
|
55
|
+
setTime(Math.max(0, time - 0.1));
|
56
|
+
}, 100);
|
57
|
+
}
|
58
|
+
}, [featureEnabled, time]);
|
59
|
+
return [time];
|
60
|
+
};
|
61
|
+
|
62
|
+
var _default = useExample;
|
63
|
+
exports.default = _default;
|
@@ -300,35 +300,30 @@ var InlineEditV1 = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn)
|
|
300
300
|
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))
|
301
301
|
}, showValidation && /*#__PURE__*/_react.default.createElement("div", {
|
302
302
|
className: "".concat(blockClass, "__validation-icon")
|
303
|
-
}, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.
|
303
|
+
}, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
|
304
304
|
className: "".concat(blockClass, "__cancel"),
|
305
305
|
kind: "ghost",
|
306
|
-
|
307
|
-
iconDescription: cancelDescription,
|
306
|
+
label: cancelDescription,
|
308
307
|
onClick: handleCancel,
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
}
|
314
|
-
}, tipPositions.cancel)), /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
|
308
|
+
size: size
|
309
|
+
}, tipPositions.cancel), /*#__PURE__*/_react.default.createElement(_icons.Close, {
|
310
|
+
size: 16
|
311
|
+
})), /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
|
315
312
|
className: "".concat(blockClass, "__save"),
|
316
313
|
kind: "ghost",
|
317
|
-
|
318
|
-
iconDescription: saveDescription,
|
314
|
+
label: saveDescription,
|
319
315
|
onClick: handleSave,
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
disabled: value === internalValue
|
326
|
-
}, tipPositions.save))) : /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
|
316
|
+
disabled: value === internalValue,
|
317
|
+
size: size
|
318
|
+
}, tipPositions.save), /*#__PURE__*/_react.default.createElement(_icons.Checkmark, {
|
319
|
+
size: 16
|
320
|
+
}))) : /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
|
327
321
|
className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
|
328
322
|
kind: "ghost",
|
329
323
|
label: editDescription,
|
330
324
|
onClick: handleEdit,
|
331
|
-
disabled: disabled
|
325
|
+
disabled: disabled,
|
326
|
+
size: size
|
332
327
|
}, tipPositions.edit), disabled ? /*#__PURE__*/_react.default.createElement(_icons.EditOff, {
|
333
328
|
size: 16
|
334
329
|
}) : /*#__PURE__*/_react.default.createElement(_icons.Edit, {
|
@@ -40,6 +40,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
40
40
|
var componentName = 'InlineEditV2';
|
41
41
|
var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit-v2");
|
42
42
|
var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
43
|
+
var _cx;
|
44
|
+
|
43
45
|
var cancelLabel = _ref.cancelLabel,
|
44
46
|
editLabel = _ref.editLabel,
|
45
47
|
id = _ref.id,
|
@@ -166,7 +168,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
166
168
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
167
169
|
ref: ref
|
168
170
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
|
169
|
-
className: (0, _classnames.default)(blockClass, (0, _defineProperty2.default)(
|
171
|
+
className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
|
170
172
|
onFocus: onFocusHandler,
|
171
173
|
onBlur: onBlurHandler
|
172
174
|
}, /*#__PURE__*/_react.default.createElement("label", {
|
@@ -181,55 +183,43 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
181
183
|
ref: inputRef // readOnly={readOnly}
|
182
184
|
,
|
183
185
|
onKeyDown: onKeyHandler
|
184
|
-
}),
|
186
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
187
|
+
className: "".concat(blockClass, "__toolbar")
|
188
|
+
}, focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && /*#__PURE__*/_react.default.createElement(_icons.WarningFilled, {
|
185
189
|
size: 16,
|
186
190
|
className: "".concat(blockClass, "__warning-icon")
|
187
|
-
}), /*#__PURE__*/_react.default.createElement(_react2.
|
188
|
-
hasIconOnly: true,
|
189
|
-
renderIcon: function renderIcon() {
|
190
|
-
return /*#__PURE__*/_react.default.createElement(_icons.Close, {
|
191
|
-
size: 24
|
192
|
-
});
|
193
|
-
},
|
191
|
+
}), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
|
194
192
|
size: "sm",
|
195
|
-
|
193
|
+
label: cancelLabel,
|
196
194
|
onClick: onCancelHandler,
|
197
195
|
kind: "ghost",
|
198
196
|
tabIndex: 0,
|
199
197
|
key: "cancel",
|
200
198
|
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-cancel")
|
201
|
-
}
|
202
|
-
|
203
|
-
|
204
|
-
return /*#__PURE__*/_react.default.createElement(_icons.Checkmark, {
|
205
|
-
size: 24
|
206
|
-
});
|
207
|
-
},
|
199
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.Close, {
|
200
|
+
size: 16
|
201
|
+
})), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
|
208
202
|
size: "sm",
|
209
|
-
|
203
|
+
label: saveLabel,
|
210
204
|
onClick: onSaveHandler,
|
211
205
|
kind: "ghost",
|
212
206
|
tabIndex: 0,
|
213
207
|
key: "save",
|
214
208
|
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
|
215
209
|
disabled: !canSave
|
216
|
-
}
|
210
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.Checkmark, {
|
211
|
+
size: 16
|
212
|
+
}))) : /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
|
217
213
|
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
|
218
|
-
|
219
|
-
,
|
220
|
-
renderIcon: function renderIcon() {
|
221
|
-
return /*#__PURE__*/_react.default.createElement(_icons.Edit, {
|
222
|
-
size: 24
|
223
|
-
});
|
224
|
-
},
|
225
|
-
size: "sm" // iconDescription={readOnly ? readOnlyLabel : editLabel}
|
226
|
-
,
|
227
|
-
iconDescription: editLabel,
|
214
|
+
size: "sm",
|
215
|
+
label: editLabel,
|
228
216
|
onClick: onFocusHandler,
|
229
217
|
kind: "ghost",
|
230
218
|
tabIndex: 0,
|
231
219
|
key: "edit"
|
232
|
-
}
|
220
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.Edit, {
|
221
|
+
size: 16
|
222
|
+
})))), focused && invalid && /*#__PURE__*/_react.default.createElement("p", {
|
233
223
|
className: "".concat(blockClass, "__warning-text")
|
234
224
|
}, invalidLabel));
|
235
225
|
});
|
package/lib/components/index.js
CHANGED
@@ -333,6 +333,12 @@ Object.defineProperty(exports, "WebTerminalProvider", {
|
|
333
333
|
return _WebTerminal.WebTerminalProvider;
|
334
334
|
}
|
335
335
|
});
|
336
|
+
Object.defineProperty(exports, "getAutoSizedColumnWidth", {
|
337
|
+
enumerable: true,
|
338
|
+
get: function get() {
|
339
|
+
return _Datagrid.getAutoSizedColumnWidth;
|
340
|
+
}
|
341
|
+
});
|
336
342
|
Object.defineProperty(exports, "useActionsColumn", {
|
337
343
|
enumerable: true,
|
338
344
|
get: function get() {
|
@@ -83,7 +83,8 @@ var defaults = {
|
|
83
83
|
// feature level flags
|
84
84
|
feature: {
|
85
85
|
'a-new-feature': false,
|
86
|
-
'default-portal-target-body': true
|
86
|
+
'default-portal-target-body': true,
|
87
|
+
'Datagrid.useInfiniteScroll': false
|
87
88
|
}
|
88
89
|
};
|
89
90
|
|
@@ -95,6 +96,10 @@ var warningMessageFeature = function warningMessageFeature(property) {
|
|
95
96
|
return "Carbon for IBM Products (WARNING): Feature \"".concat(property, "\" enabled via feature flags.");
|
96
97
|
};
|
97
98
|
|
99
|
+
var errorMessageFeature = function errorMessageFeature(property) {
|
100
|
+
return "Carbon for IBM Products (Error): Feature \"".concat(property, "\" not enabled. To enable see the notes on feature flags in the README.");
|
101
|
+
};
|
102
|
+
|
98
103
|
var warningMessageAllComponents = 'Carbon for IBM Products (WARNING): All components enabled through use of setAllComponents. This includes components that have not yet completed their review process.';
|
99
104
|
var warningMessageAllFeatures = 'Carbon for IBM Products (WARNING): All features enabled through use of setAllFeatures'; // Values to represent overrides for component or feature settings.
|
100
105
|
// Each value maps the initial value to the value that should be returned.
|
@@ -115,7 +120,11 @@ var allFeatures = all.INITIAL;
|
|
115
120
|
var silent = false;
|
116
121
|
var component = new Proxy(_objectSpread({}, defaults.component), {
|
117
122
|
set: function set(target, property, value) {
|
118
|
-
|
123
|
+
if (target[property] !== true && !silent && value) {
|
124
|
+
// not already true, not silent, and now true
|
125
|
+
console.warn(warningMessageComponent(property));
|
126
|
+
}
|
127
|
+
|
119
128
|
target[property] = value;
|
120
129
|
return true; // value set
|
121
130
|
},
|
@@ -127,7 +136,11 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
|
|
127
136
|
});
|
128
137
|
var feature = new Proxy(_objectSpread({}, defaults.feature), {
|
129
138
|
set: function set(target, property, value) {
|
130
|
-
|
139
|
+
if (target[property] !== true && !silent && value) {
|
140
|
+
// not already true, not silent, and now true
|
141
|
+
console.warn(warningMessageFeature(property));
|
142
|
+
}
|
143
|
+
|
131
144
|
target[property] = value;
|
132
145
|
return true; // value set
|
133
146
|
},
|
@@ -157,6 +170,14 @@ var _default = {
|
|
157
170
|
var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
158
171
|
return byDefault ? defaults.feature[featureName] : feature[featureName];
|
159
172
|
},
|
173
|
+
checkReportFeatureEnabled: function checkReportFeatureEnabled(featureName) {
|
174
|
+
if (feature[featureName]) {
|
175
|
+
// NOTE: Warning emitted if feature flag is enabled (see Proxy above)
|
176
|
+
return true;
|
177
|
+
} else {
|
178
|
+
console.error(errorMessageFeature(featureName));
|
179
|
+
}
|
180
|
+
},
|
160
181
|
isFeaturePublic: function isFeaturePublic(featureName) {
|
161
182
|
var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
162
183
|
return Object.prototype.hasOwnProperty.call(byDefault ? defaults.feature : feature, featureName);
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.CodesandboxLink = void 0;
|
8
|
+
exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.CodesandboxLink = void 0;
|
9
9
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
11
11
|
|
@@ -101,4 +101,15 @@ CodesandboxLink.propTypes = {
|
|
101
101
|
* directory withing examples codesandbox will be found
|
102
102
|
*/
|
103
103
|
exampleDirectory: _propTypes.default.string
|
104
|
-
};
|
104
|
+
};
|
105
|
+
/**
|
106
|
+
* A helper function that finds the designated theme on the Storybook canvas.
|
107
|
+
* @returns "dark" or "light"
|
108
|
+
*/
|
109
|
+
|
110
|
+
var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
|
111
|
+
var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
|
112
|
+
return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
|
113
|
+
};
|
114
|
+
|
115
|
+
exports.getSelectedCarbonTheme = getSelectedCarbonTheme;
|