@carbon/ibm-products 2.7.0 → 2.8.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +80 -2
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +3 -2
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +80 -2
- 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 +80 -2
- 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/AddSelect/AddSelectRow.js +2 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -7
- package/es/components/ButtonMenu/ButtonMenu.js +4 -0
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +21 -28
- package/es/components/ComboButton/ComboButton.js +5 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +117 -10
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -14
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +111 -0
- package/es/components/Datagrid/Datagrid.docs-page.js +6 -0
- package/es/components/Datagrid/useDatagrid.js +5 -2
- package/es/components/Datagrid/utils/DatagridActions.js +9 -10
- package/es/components/NotificationsPanel/NotificationsPanel.js +3 -5
- package/es/components/PageHeader/PageHeaderUtils.js +10 -3
- package/es/components/TooltipTrigger/TooltipTrigger.js +62 -0
- package/es/components/TooltipTrigger/index.js +8 -0
- package/es/components/TooltipTrigger/useExample.js +49 -0
- package/es/components/UserProfileImage/UserProfileImage.js +7 -6
- package/es/global/js/hooks/useResizeObserver.js +7 -5
- package/es/global/js/utils/test-helper.js +97 -43
- package/es/settings.js +8 -2
- package/lib/components/AddSelect/AddSelectRow.js +2 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/lib/components/ButtonMenu/ButtonMenu.js +5 -1
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +20 -27
- package/lib/components/ComboButton/ComboButton.js +5 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +120 -10
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -13
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +122 -0
- package/lib/components/Datagrid/Datagrid.docs-page.js +6 -0
- package/lib/components/Datagrid/useDatagrid.js +5 -2
- package/lib/components/Datagrid/utils/DatagridActions.js +8 -9
- package/lib/components/NotificationsPanel/NotificationsPanel.js +3 -5
- package/lib/components/PageHeader/PageHeaderUtils.js +10 -3
- package/lib/components/TooltipTrigger/TooltipTrigger.js +67 -0
- package/lib/components/TooltipTrigger/index.js +12 -0
- package/lib/components/TooltipTrigger/useExample.js +58 -0
- package/lib/components/UserProfileImage/UserProfileImage.js +6 -5
- package/lib/global/js/hooks/useResizeObserver.js +7 -5
- package/lib/global/js/utils/test-helper.js +99 -44
- package/lib/settings.js +8 -2
- package/package.json +8 -8
- package/scss/components/APIKeyModal/_storybook-styles.scss +1 -1
- package/scss/components/AboutModal/_storybook-styles.scss +1 -1
- package/scss/components/ActionSet/_storybook-styles.scss +1 -1
- package/scss/components/CreateFullPage/_storybook-styles.scss +1 -1
- package/scss/components/CreateModal/_storybook-styles.scss +1 -1
- package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +1 -1
- package/scss/components/Datagrid/_storybook-styles.scss +1 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +65 -0
- package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
- package/scss/components/EditUpdateCards/_storybook-styles.scss +1 -1
- package/scss/components/ExpressiveCard/_storybook-styles.scss +1 -1
- package/scss/components/NotificationsPanel/_storybook-styles.scss +1 -1
- package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +8 -4
- package/scss/components/Tearsheet/_storybook-styles.scss +1 -1
- package/scss/components/TooltipTrigger/_index-with-carbon.scss +8 -0
- package/scss/components/TooltipTrigger/_index.scss +8 -0
- package/scss/components/TooltipTrigger/_storybook-styles.scss +6 -0
- package/scss/components/TooltipTrigger/_tooltip-trigger.scss +29 -0
- package/scss/components/WebTerminal/_storybook-styles.scss +1 -1
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
@@ -9,10 +9,8 @@ exports.default = void 0;
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
12
|
-
var _icons = require("@carbon/react/icons");
|
13
12
|
var _react2 = require("@carbon/react");
|
14
13
|
var _useResizeObserver2 = require("../../../global/js/hooks/useResizeObserver");
|
15
|
-
var _ButtonMenu = require("../../ButtonMenu");
|
16
14
|
var _settings = require("../../../settings");
|
17
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
18
16
|
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); }
|
@@ -86,19 +84,15 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
86
84
|
if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
|
87
85
|
return null;
|
88
86
|
}
|
89
|
-
return /*#__PURE__*/_react.default.createElement(
|
90
|
-
label:
|
91
|
-
|
92
|
-
className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
|
93
|
-
menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
|
94
|
-
flipped: true,
|
95
|
-
menuAriaLabel: 'Batch actions'
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
|
88
|
+
label: "More",
|
89
|
+
className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
|
96
90
|
}, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
|
97
91
|
if (index < 2) {
|
98
92
|
if (displayAllInMenu) {
|
99
|
-
return /*#__PURE__*/_react.default.createElement(
|
93
|
+
return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
|
100
94
|
key: "".concat(batchAction.label, "-").concat(index),
|
101
|
-
|
95
|
+
label: batchAction.label,
|
102
96
|
onClick: function onClick(event) {
|
103
97
|
batchAction.onClick(getSelectedRowData(), event);
|
104
98
|
if (batchAction.type === 'select_all') {
|
@@ -109,9 +103,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
109
103
|
}
|
110
104
|
return null;
|
111
105
|
}
|
112
|
-
return /*#__PURE__*/_react.default.createElement(
|
106
|
+
return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
|
113
107
|
key: "".concat(batchAction.label, "-").concat(index),
|
114
|
-
|
108
|
+
label: batchAction.label,
|
115
109
|
onClick: function onClick(event) {
|
116
110
|
batchAction.onClick(getSelectedRowData(), event);
|
117
111
|
if (batchAction.type === 'select_all') {
|
@@ -0,0 +1,122 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeStartEvent = exports.handleColumnResizeEndEvent = void 0;
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
|
+
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; }
|
11
|
+
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; }
|
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
|
+
var COLUMN_RESIZE_START = 'columnStartResizing';
|
20
|
+
var COLUMN_RESIZING = 'columnResizing';
|
21
|
+
var COLUMN_RESIZE_END = 'columnDoneResizing';
|
22
|
+
var INIT = 'init';
|
23
|
+
var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
|
24
|
+
dispatch({
|
25
|
+
type: COLUMN_RESIZE_START,
|
26
|
+
payload: {
|
27
|
+
headerId: headerId
|
28
|
+
}
|
29
|
+
});
|
30
|
+
};
|
31
|
+
exports.handleColumnResizeStartEvent = handleColumnResizeStartEvent;
|
32
|
+
var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
|
33
|
+
dispatch({
|
34
|
+
type: COLUMN_RESIZE_END,
|
35
|
+
payload: {
|
36
|
+
onColResizeEnd: onColResizeEnd,
|
37
|
+
headerId: headerId
|
38
|
+
}
|
39
|
+
});
|
40
|
+
};
|
41
|
+
exports.handleColumnResizeEndEvent = handleColumnResizeEndEvent;
|
42
|
+
var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
|
43
|
+
if (isKeyEvent) {
|
44
|
+
dispatch({
|
45
|
+
type: COLUMN_RESIZE_START,
|
46
|
+
payload: {
|
47
|
+
newWidth: newWidth,
|
48
|
+
headerId: header.id,
|
49
|
+
defaultWidth: header.originalWidth
|
50
|
+
}
|
51
|
+
});
|
52
|
+
}
|
53
|
+
dispatch({
|
54
|
+
type: COLUMN_RESIZING,
|
55
|
+
payload: {
|
56
|
+
newWidth: newWidth,
|
57
|
+
headerId: header.id,
|
58
|
+
defaultWidth: header.originalWidth
|
59
|
+
}
|
60
|
+
});
|
61
|
+
};
|
62
|
+
exports.handleColumnResizingEvent = handleColumnResizingEvent;
|
63
|
+
var stateReducer = function stateReducer(newState, action) {
|
64
|
+
switch (action.type) {
|
65
|
+
case INIT:
|
66
|
+
{
|
67
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
68
|
+
isResizing: false
|
69
|
+
});
|
70
|
+
}
|
71
|
+
case COLUMN_RESIZE_START:
|
72
|
+
{
|
73
|
+
var headerId = action.payload.headerId;
|
74
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
75
|
+
isResizing: headerId
|
76
|
+
});
|
77
|
+
}
|
78
|
+
case COLUMN_RESIZING:
|
79
|
+
{
|
80
|
+
var _ref = action.payload || {},
|
81
|
+
_headerId = _ref.headerId,
|
82
|
+
newWidth = _ref.newWidth,
|
83
|
+
defaultWidth = _ref.defaultWidth;
|
84
|
+
var newColumnWidth = {};
|
85
|
+
if (typeof _headerId === 'undefined') {
|
86
|
+
return _objectSpread({}, newState);
|
87
|
+
}
|
88
|
+
newColumnWidth[_headerId] = newWidth;
|
89
|
+
var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
|
90
|
+
var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
91
|
+
_ = _ref3[0],
|
92
|
+
value = _ref3[1];
|
93
|
+
return !isNaN(value);
|
94
|
+
}));
|
95
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
96
|
+
isResizing: _headerId,
|
97
|
+
columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
|
98
|
+
columnWidth: defaultWidth,
|
99
|
+
columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
|
100
|
+
headerIdWidths: [_headerId, newWidth]
|
101
|
+
})
|
102
|
+
});
|
103
|
+
}
|
104
|
+
case COLUMN_RESIZE_END:
|
105
|
+
{
|
106
|
+
var _action$payload = action.payload,
|
107
|
+
onColResizeEnd = _action$payload.onColResizeEnd,
|
108
|
+
_headerId2 = _action$payload.headerId;
|
109
|
+
var currentColumn = {};
|
110
|
+
currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
|
111
|
+
var allChangedColumns = newState.columnResizing.columnWidths;
|
112
|
+
var isResizing = newState.isResizing;
|
113
|
+
if (isResizing) {
|
114
|
+
onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
|
115
|
+
}
|
116
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
117
|
+
isResizing: false
|
118
|
+
});
|
119
|
+
}
|
120
|
+
}
|
121
|
+
};
|
122
|
+
exports.stateReducer = stateReducer;
|
@@ -51,6 +51,12 @@ var DocsPage = function DocsPage() {
|
|
51
51
|
language: 'jsx',
|
52
52
|
code: "\n const columns = [\n {\n Header: 'First Name',\n accessor: 'firstName',\n },\n {\n Header: 'Last Name',\n accessor: 'lastName',\n Cell: ({ cell: { value } }) => (\n <span className=\"custom-cell-wrapper\">{value}</span>\n ),\n },\n];\n "
|
53
53
|
}
|
54
|
+
}, {
|
55
|
+
description: "There is also an optional resize callback when resizing columns, allowing you to save the widths of columns that have been resized. The resize callback returns the column that was just resized and it's width, in addition to all of the columns that have been resized and their widths.",
|
56
|
+
source: {
|
57
|
+
language: 'jsx',
|
58
|
+
code: "\nuseDatagrid({\n columns,\n data,\n onColResizeEnd: (currentColumn, allColumns) =>\n console.log(currentColumn, allColumns),\n});\n "
|
59
|
+
}
|
54
60
|
}, {
|
55
61
|
title: 'Rendering the table toolbar',
|
56
62
|
image: /*#__PURE__*/_react.default.createElement("img", {
|
@@ -17,6 +17,7 @@ var _useRowSize = _interopRequireDefault(require("./useRowSize"));
|
|
17
17
|
var _DatagridHeaderRow = _interopRequireDefault(require("./Datagrid/DatagridHeaderRow"));
|
18
18
|
var _useFlexResize = _interopRequireDefault(require("./useFlexResize"));
|
19
19
|
var _useFloatingScroll = _interopRequireDefault(require("./useFloatingScroll"));
|
20
|
+
var _stateReducer = require("./Datagrid/addons/stateReducer");
|
20
21
|
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; } /*
|
22
23
|
* Licensed Materials - Property of IBM
|
@@ -35,9 +36,11 @@ var useDatagrid = function useDatagrid(params) {
|
|
35
36
|
for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
36
37
|
plugins[_key - 1] = arguments[_key];
|
37
38
|
}
|
38
|
-
var tableState = _reactTable.useTable.apply(void 0, [_objectSpread({
|
39
|
+
var tableState = _reactTable.useTable.apply(void 0, [_objectSpread(_objectSpread({
|
39
40
|
tableId: tableId
|
40
|
-
}, params)
|
41
|
+
}, params), {}, {
|
42
|
+
stateReducer: _stateReducer.stateReducer
|
43
|
+
})].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
|
41
44
|
return tableState;
|
42
45
|
};
|
43
46
|
var _default = useDatagrid;
|
@@ -9,7 +9,6 @@ exports.DatagridActions = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
10
|
var _icons = require("@carbon/react/icons");
|
11
11
|
var _react = require("@carbon/react");
|
12
|
-
var _ButtonMenu = require("../../ButtonMenu");
|
13
12
|
var _react2 = _interopRequireWildcard(require("react"));
|
14
13
|
var _addonActions = require("@storybook/addon-actions");
|
15
14
|
var _settings = require("../../../settings");
|
@@ -161,18 +160,18 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
161
160
|
onClick: downloadCsv
|
162
161
|
})), CustomizeColumnsButton && /*#__PURE__*/_react2.default.createElement("div", {
|
163
162
|
style: style
|
164
|
-
}, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(
|
163
|
+
}, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(_react.MenuButton, {
|
165
164
|
label: "Primary button",
|
166
165
|
renderIcon: _icons.ChevronDown,
|
167
|
-
|
168
|
-
}, /*#__PURE__*/_react2.default.createElement(
|
169
|
-
|
166
|
+
className: "".concat(blockClass, "__toolbar-options")
|
167
|
+
}, /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
|
168
|
+
label: "Option 1",
|
170
169
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
|
171
|
-
}), /*#__PURE__*/_react2.default.createElement(
|
172
|
-
|
170
|
+
}), /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
|
171
|
+
label: "Option 2",
|
173
172
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
|
174
|
-
}), /*#__PURE__*/_react2.default.createElement(
|
175
|
-
|
173
|
+
}), /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
|
174
|
+
label: "Option 3",
|
176
175
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
|
177
176
|
}))) : /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
|
178
177
|
size: "xl",
|
@@ -17,6 +17,7 @@ var _devtools = require("../../global/js/utils/devtools");
|
|
17
17
|
var _hooks = require("../../global/js/hooks");
|
18
18
|
var _settings = require("../../settings");
|
19
19
|
var _utils = require("./utils");
|
20
|
+
var _propsHelper = require("../../global/js/utils/props-helper");
|
20
21
|
var _NotificationsEmptyState = require("../EmptyStates/NotificationsEmptyState");
|
21
22
|
var _react2 = require("@carbon/react");
|
22
23
|
var _icons = require("@carbon/react/icons");
|
@@ -305,7 +306,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
|
|
305
306
|
}, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, (0, _extends2.default)({
|
306
307
|
href: notification.link.url,
|
307
308
|
className: "".concat(blockClass, "__notifications-link")
|
308
|
-
}, notification.link
|
309
|
+
}, (0, _propsHelper.prepareProps)({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
|
309
310
|
align: "left",
|
310
311
|
kind: "ghost",
|
311
312
|
size: "sm",
|
@@ -426,10 +427,7 @@ NotificationsPanel.propTypes = {
|
|
426
427
|
description: _propTypes.default.string,
|
427
428
|
link: _propTypes.default.shape({
|
428
429
|
url: _propTypes.default.string,
|
429
|
-
text: _propTypes.default.string
|
430
|
-
optional: _propTypes.default.shape({
|
431
|
-
// Add optional props here
|
432
|
-
})
|
430
|
+
text: _propTypes.default.string
|
433
431
|
}),
|
434
432
|
unread: _propTypes.default.bool,
|
435
433
|
onNotificationClick: _propTypes.default.func
|
@@ -13,7 +13,7 @@ var _scrollableAncestor = require("../../global/js/utils/scrollableAncestor");
|
|
13
13
|
var _react2 = require("@carbon/react");
|
14
14
|
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; }
|
15
15
|
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; } /**
|
16
|
-
* Copyright IBM Corp. 2020,
|
16
|
+
* Copyright IBM Corp. 2020, 2023
|
17
17
|
*
|
18
18
|
* This source code is licensed under the Apache-2.0 license found in the
|
19
19
|
* LICENSE file in the root directory of this source tree.
|
@@ -71,11 +71,14 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
|
|
71
71
|
var scrollableContainer = (0, _scrollableAncestor.scrollableAncestor)(headerRef.current);
|
72
72
|
|
73
73
|
/* istanbul ignore next */
|
74
|
-
var scrollableContainerTop = scrollableContainer ? scrollableContainer.
|
74
|
+
var scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
|
75
|
+
|
76
|
+
/* istanbul ignore next */
|
77
|
+
var offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0;
|
75
78
|
|
76
79
|
// The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
|
77
80
|
// top and the measuring ref top, or the difference between. It does not change on scroll or resize.
|
78
|
-
update.headerOffset =
|
81
|
+
update.headerOffset = offsetMeasuringTop - scrollableContainerTop;
|
79
82
|
|
80
83
|
/* istanbul ignore next */
|
81
84
|
update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
|
@@ -133,6 +136,10 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
|
|
133
136
|
update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
|
134
137
|
}
|
135
138
|
}
|
139
|
+
if (!hasActionBar && pageActionsEl) {
|
140
|
+
// adjust headerTopValue when there are no page actions or action bar items (margin above title row)
|
141
|
+
update.headerTopValue -= update.titleRowSpaceAbove;
|
142
|
+
}
|
136
143
|
return _objectSpread(_objectSpread({}, previous), update);
|
137
144
|
});
|
138
145
|
};
|
@@ -0,0 +1,67 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.TooltipTrigger = void 0;
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
13
|
+
var _settings = require("../../settings");
|
14
|
+
var _excluded = ["children", "className"];
|
15
|
+
/**
|
16
|
+
* Copyright IBM Corp. 2023, 2023
|
17
|
+
*
|
18
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
19
|
+
* LICENSE file in the root directory of this source tree.
|
20
|
+
*/
|
21
|
+
// Import portions of React that are needed.
|
22
|
+
// Other standard imports.
|
23
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
24
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--tooltip-trigger");
|
25
|
+
var componentName = 'TooltipTrigger';
|
26
|
+
|
27
|
+
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
28
|
+
|
29
|
+
/**
|
30
|
+
* This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
|
31
|
+
* no blanked button.
|
32
|
+
*/
|
33
|
+
var TooltipTrigger = function TooltipTrigger(_ref) {
|
34
|
+
var children = _ref.children,
|
35
|
+
className = _ref.className,
|
36
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
37
|
+
return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
|
38
|
+
type: "button"
|
39
|
+
}, rest, {
|
40
|
+
className: (0, _classnames.default)(blockClass,
|
41
|
+
// Apply the block class to the main HTML element
|
42
|
+
className // Apply any supplied class names to the main HTML element.
|
43
|
+
)
|
44
|
+
}), children);
|
45
|
+
};
|
46
|
+
|
47
|
+
// Return a placeholder if not released and not enabled by feature flag.
|
48
|
+
exports.TooltipTrigger = TooltipTrigger;
|
49
|
+
exports.TooltipTrigger = TooltipTrigger = _settings.pkg.checkComponentEnabled(TooltipTrigger, componentName);
|
50
|
+
|
51
|
+
// The display name of the component, used by React. Note that displayName
|
52
|
+
// is used in preference to relying on function.name.
|
53
|
+
TooltipTrigger.displayName = componentName;
|
54
|
+
|
55
|
+
// The types and DocGen commentary for the component props,
|
56
|
+
// in alphabetical order (for consistency).
|
57
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
58
|
+
TooltipTrigger.propTypes = {
|
59
|
+
/**
|
60
|
+
* Child content of tooltip trigger
|
61
|
+
*/
|
62
|
+
children: _propTypes.default.node,
|
63
|
+
/**
|
64
|
+
* Provide an optional class to be applied to the containing node.
|
65
|
+
*/
|
66
|
+
className: _propTypes.default.string
|
67
|
+
};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "TooltipTrigger", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _TooltipTrigger.TooltipTrigger;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
var _TooltipTrigger = require("./TooltipTrigger");
|
@@ -0,0 +1,58 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.default = void 0;
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
+
var _react = require("react");
|
10
|
+
var _settings = require("../../settings");
|
11
|
+
/**
|
12
|
+
* Copyright IBM Corp. 2023, 2023
|
13
|
+
*
|
14
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
16
|
+
*/
|
17
|
+
|
18
|
+
var useExample = function useExample(initialTime) {
|
19
|
+
// NOTE: hooks cannot be called conditionally.
|
20
|
+
//
|
21
|
+
// ** If the hook uses other hooks then they must be called,
|
22
|
+
// ** this could lead to unexpected behavior.
|
23
|
+
// ** As some hooks may still be called even if the condition is false.
|
24
|
+
|
25
|
+
var _useState = (0, _react.useState)(
|
26
|
+
// Disable hook in a safe way if possible, else use despite feature disabled.
|
27
|
+
// Either a console error or warning will be logged.
|
28
|
+
initialTime),
|
29
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
30
|
+
time = _useState2[0],
|
31
|
+
setTime = _useState2[1];
|
32
|
+
|
33
|
+
// Use of the feature flag to
|
34
|
+
var feature = 'ExampleComponent.useExample';
|
35
|
+
var tryFeature = initialTime !== undefined;
|
36
|
+
var featureEnabled = tryFeature && _settings.pkg.checkReportFeatureEnabled(feature);
|
37
|
+
if (tryFeature && !featureEnabled) {
|
38
|
+
// Output a useful message if the feature is disabled.
|
39
|
+
console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
|
40
|
+
}
|
41
|
+
|
42
|
+
// Actual hook is code is below
|
43
|
+
(0, _react.useEffect)(function () {
|
44
|
+
if (!featureEnabled) {
|
45
|
+
return;
|
46
|
+
}
|
47
|
+
|
48
|
+
// turn off all or part of the feature
|
49
|
+
if (time > 0) {
|
50
|
+
setTimeout(function () {
|
51
|
+
setTime(Math.max(0, time - 0.1));
|
52
|
+
}, 100);
|
53
|
+
}
|
54
|
+
}, [featureEnabled, time]);
|
55
|
+
return [time];
|
56
|
+
};
|
57
|
+
var _default = useExample;
|
58
|
+
exports.default = _default;
|
@@ -15,6 +15,7 @@ require("../../global/js/utils/props-helper");
|
|
15
15
|
var _settings = require("../../settings");
|
16
16
|
var _icons = require("@carbon/react/icons");
|
17
17
|
var _react2 = require("@carbon/react");
|
18
|
+
var _TooltipTrigger = require("../TooltipTrigger");
|
18
19
|
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
|
19
20
|
/**
|
20
21
|
* Copyright IBM Corp. 2021, 2021
|
@@ -52,6 +53,7 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
52
53
|
_ref$tooltipAlignment = _ref.tooltipAlignment,
|
53
54
|
tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
|
54
55
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
56
|
+
var carbonPrefix = (0, _react2.usePrefix)();
|
55
57
|
var icons = {
|
56
58
|
user: {
|
57
59
|
md: function md(props) {
|
@@ -127,12 +129,11 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
127
129
|
className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
|
128
130
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(FillItem, null));
|
129
131
|
};
|
130
|
-
return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.
|
132
|
+
return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
|
133
|
+
align: tooltipAlignment,
|
131
134
|
label: tooltipText,
|
132
|
-
className: "".concat(blockClass, "__tooltip"),
|
133
|
-
|
134
|
-
align: tooltipAlignment
|
135
|
-
}, renderUserProfileImage()) : renderUserProfileImage());
|
135
|
+
className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
|
136
|
+
}, /*#__PURE__*/_react.default.createElement(_TooltipTrigger.TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
|
136
137
|
});
|
137
138
|
|
138
139
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -15,11 +15,11 @@ var _react = require("react");
|
|
15
15
|
*/
|
16
16
|
|
17
17
|
var useResizeObserver = function useResizeObserver(ref, callback) {
|
18
|
-
var _useState = (0, _react.useState)(
|
18
|
+
var _useState = (0, _react.useState)(-1),
|
19
19
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
20
20
|
width = _useState2[0],
|
21
21
|
setWidth = _useState2[1];
|
22
|
-
var _useState3 = (0, _react.useState)(
|
22
|
+
var _useState3 = (0, _react.useState)(-1),
|
23
23
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
24
24
|
height = _useState4[0],
|
25
25
|
setHeight = _useState4[1];
|
@@ -34,17 +34,19 @@ var useResizeObserver = function useResizeObserver(ref, callback) {
|
|
34
34
|
(0, _react.useEffect)(function () {
|
35
35
|
var getInitialSize = function getInitialSize() {
|
36
36
|
if (ref.current) {
|
37
|
-
var _ref$current;
|
37
|
+
var _ref$current, _ref$current2;
|
38
38
|
var refComputedStyle = window.getComputedStyle(ref.current);
|
39
39
|
var initialWidth = (((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingRight) || 0));
|
40
|
+
var initialHeight = (((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingTop) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0));
|
40
41
|
setWidth(initialWidth);
|
42
|
+
setHeight(initialHeight);
|
41
43
|
}
|
42
44
|
};
|
43
|
-
if (!(ref !== null && ref !== void 0 && ref.current)
|
45
|
+
if (!(ref !== null && ref !== void 0 && ref.current) || width >= 0 && height >= 0) {
|
44
46
|
return;
|
45
47
|
}
|
46
48
|
getInitialSize();
|
47
|
-
}, [width, ref]);
|
49
|
+
}, [width, height, ref]);
|
48
50
|
(0, _react.useLayoutEffect)(function () {
|
49
51
|
if (!(ref !== null && ref !== void 0 && ref.current)) {
|
50
52
|
return;
|