@carbon/ibm-products 2.0.0-rc.28 → 2.0.0-rc.29
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/config.css +3 -0
- package/css/config.css.map +1 -0
- package/css/index-full-carbon.css +55 -134
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +5 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +54 -63
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +4 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +55 -134
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +5 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +55 -134
- package/css/index.css.map +1 -1
- package/css/index.min.css +5 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.js +41 -62
- package/es/components/AddSelect/AddSelectBody.js +4 -2
- package/es/components/AddSelect/AddSelectColumn.js +11 -5
- package/es/components/AddSelect/AddSelectFilter.js +5 -4
- package/es/components/AddSelect/AddSelectRow.js +3 -3
- package/es/components/AddSelect/AddSelectSort.js +2 -1
- package/es/components/Datagrid/index.js +1 -0
- package/es/components/Datagrid/useEditableCell.js +13 -0
- package/es/components/Datagrid/useInlineEdit.js +16 -11
- package/es/components/ExampleComponent/ExampleDeprecatedComponent.js +24 -0
- package/es/components/Tearsheet/Tearsheet.js +5 -0
- package/es/components/index.js +0 -1
- package/es/global/js/package-settings.js +2 -2
- package/es/settings.js +40 -20
- package/lib/components/AboutModal/AboutModal.js +40 -62
- package/lib/components/AddSelect/AddSelectBody.js +4 -2
- package/lib/components/AddSelect/AddSelectColumn.js +11 -5
- package/lib/components/AddSelect/AddSelectFilter.js +4 -3
- package/lib/components/AddSelect/AddSelectRow.js +2 -2
- package/lib/components/AddSelect/AddSelectSort.js +2 -1
- package/lib/components/Datagrid/index.js +8 -0
- package/lib/components/Datagrid/useEditableCell.js +23 -0
- package/lib/components/Datagrid/useInlineEdit.js +22 -11
- package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js +38 -0
- package/lib/components/Tearsheet/Tearsheet.js +5 -0
- package/lib/components/index.js +0 -8
- package/lib/global/js/package-settings.js +2 -2
- package/lib/settings.js +43 -21
- package/package.json +2 -2
- package/scss/components/AboutModal/_about-modal.scss +34 -53
- package/scss/components/AboutModal/_storybook-styles.scss +10 -4
- package/scss/components/AddSelect/_add-select.scss +7 -3
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -1
- package/scss/components/_index-with-carbon.scss +0 -1
- package/scss/components/_index.scss +0 -1
- package/scss/config.scss +1 -0
- package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -34
- package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -47
- package/es/components/ModifiedTabs/ModifiedTabs.js +0 -141
- package/es/components/ModifiedTabs/index.js +0 -1
- package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -50
- package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -63
- package/lib/components/ModifiedTabs/ModifiedTabs.js +0 -164
- package/lib/components/ModifiedTabs/index.js +0 -13
- package/scss/components/ModifiedTabs/_carbon-imports.scss +0 -10
- package/scss/components/ModifiedTabs/_index-with-carbon.scss +0 -9
- package/scss/components/ModifiedTabs/_index.scss +0 -8
- package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -89
- package/scss/components/ModifiedTabs/_storybook-styles.scss +0 -6
@@ -1,47 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import PropTypes from 'prop-types';
|
3
|
-
import { Close, CloseFilled } from '@carbon/react/icons';
|
4
|
-
import { pkg } from '../../settings';
|
5
|
-
var blockClass = "".concat(pkg.prefix, "--modified-tabs");
|
6
|
-
export var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref) {
|
7
|
-
var unsavedContent = _ref.unsavedContent,
|
8
|
-
label = _ref.label,
|
9
|
-
onClose = _ref.onClose;
|
10
|
-
|
11
|
-
var handleClose = function handleClose() {
|
12
|
-
if (onClose) {
|
13
|
-
onClose();
|
14
|
-
}
|
15
|
-
};
|
16
|
-
|
17
|
-
return /*#__PURE__*/React.createElement("span", {
|
18
|
-
className: "".concat(blockClass, "__tab")
|
19
|
-
}, /*#__PURE__*/React.createElement("span", {
|
20
|
-
className: "".concat(blockClass, "__tab-label")
|
21
|
-
}, label), /*#__PURE__*/React.createElement("button", {
|
22
|
-
title: "Close button",
|
23
|
-
onClick: handleClose,
|
24
|
-
className: "".concat(blockClass, "__tab-close"),
|
25
|
-
type: "button"
|
26
|
-
}, unsavedContent ? /*#__PURE__*/React.createElement(CloseFilled, {
|
27
|
-
size: 16
|
28
|
-
}) : /*#__PURE__*/React.createElement(Close, {
|
29
|
-
size: 16
|
30
|
-
})));
|
31
|
-
};
|
32
|
-
ModifiedTabLabelWithClose.propTypes = {
|
33
|
-
/**
|
34
|
-
* Label content of the tab
|
35
|
-
*/
|
36
|
-
label: PropTypes.string.isRequired,
|
37
|
-
|
38
|
-
/**
|
39
|
-
* Optional onClose handler
|
40
|
-
*/
|
41
|
-
onClose: PropTypes.func,
|
42
|
-
|
43
|
-
/**
|
44
|
-
* unsavedContent indicates tab contents have not been saved
|
45
|
-
*/
|
46
|
-
unsavedContent: PropTypes.bool
|
47
|
-
};
|
@@ -1,141 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Copyright IBM Corp. 2020, 2020
|
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
|
-
import React, { useRef, forwardRef } from 'react';
|
8
|
-
import PropTypes from 'prop-types';
|
9
|
-
import cx from 'classnames';
|
10
|
-
import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
|
11
|
-
import { ModifiedTabLabelWithClose } from './ModifiedTabLabelWithClose';
|
12
|
-
import { ModifiedTabLabelNew } from './ModifiedTabLabelNew';
|
13
|
-
import { pkg } from '../../settings';
|
14
|
-
var blockClass = "".concat(pkg.prefix, "--modified-tabs");
|
15
|
-
var componentName = 'ModifiedTabs'; // Default values for props
|
16
|
-
|
17
|
-
var defaults = {
|
18
|
-
newTabLabel: 'New tab',
|
19
|
-
newTabContent: 'Your new tab will be here soon',
|
20
|
-
onNewTab: undefined,
|
21
|
-
onCloseTab: undefined,
|
22
|
-
tabs: []
|
23
|
-
};
|
24
|
-
export var ModifiedTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
25
|
-
var className = _ref.className,
|
26
|
-
_ref$tabs = _ref.tabs,
|
27
|
-
tabs = _ref$tabs === void 0 ? defaults.tabs : _ref$tabs,
|
28
|
-
_ref$newTabLabel = _ref.newTabLabel,
|
29
|
-
newTabLabel = _ref$newTabLabel === void 0 ? defaults.newTabLabel : _ref$newTabLabel,
|
30
|
-
_ref$newTabContent = _ref.newTabContent,
|
31
|
-
newTabContent = _ref$newTabContent === void 0 ? defaults.newTabContent : _ref$newTabContent,
|
32
|
-
_ref$onNewTab = _ref.onNewTab,
|
33
|
-
onNewTab = _ref$onNewTab === void 0 ? defaults.onNewTab : _ref$onNewTab,
|
34
|
-
_ref$onCloseTab = _ref.onCloseTab,
|
35
|
-
onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab,
|
36
|
-
tabListAriaLabel = _ref.tabListAriaLabel;
|
37
|
-
var tabsRef = useRef();
|
38
|
-
var localRef = ref || tabsRef;
|
39
|
-
|
40
|
-
var handleNewTab = function handleNewTab() {
|
41
|
-
if (onNewTab) {
|
42
|
-
onNewTab();
|
43
|
-
setTimeout(function () {
|
44
|
-
// set focus to the new tab
|
45
|
-
var addNewTabButton = localRef.current.querySelector(".".concat(blockClass, "__tab-new"));
|
46
|
-
var tab = addNewTabButton === null || addNewTabButton === void 0 ? void 0 : addNewTabButton.previousSibling;
|
47
|
-
tab === null || tab === void 0 ? void 0 : tab.focus();
|
48
|
-
});
|
49
|
-
}
|
50
|
-
};
|
51
|
-
|
52
|
-
var handleClose = function handleClose(id) {
|
53
|
-
if (onCloseTab) {
|
54
|
-
onCloseTab(id);
|
55
|
-
}
|
56
|
-
};
|
57
|
-
|
58
|
-
return /*#__PURE__*/React.createElement("div", {
|
59
|
-
className: cx(blockClass, className),
|
60
|
-
ref: localRef
|
61
|
-
}, /*#__PURE__*/React.createElement(Tabs, {
|
62
|
-
className: "modified-tabs"
|
63
|
-
}, /*#__PURE__*/React.createElement(TabList, {
|
64
|
-
"aria-label": tabListAriaLabel
|
65
|
-
}, tabs.map(function (tab) {
|
66
|
-
return /*#__PURE__*/React.createElement(Tab, {
|
67
|
-
key: tab.id
|
68
|
-
}, /*#__PURE__*/React.createElement(ModifiedTabLabelWithClose, {
|
69
|
-
label: tab.label,
|
70
|
-
onClose: function onClose() {
|
71
|
-
return handleClose(tab.id);
|
72
|
-
},
|
73
|
-
unsavedContent: tab.unsavedContent
|
74
|
-
}));
|
75
|
-
}), /*#__PURE__*/React.createElement(Tab, {
|
76
|
-
id: "modified-tabs__tab-new",
|
77
|
-
onClick: handleNewTab,
|
78
|
-
onKeyUp: function onKeyUp(ev) {
|
79
|
-
return ev.keyCode === 32 && handleNewTab();
|
80
|
-
},
|
81
|
-
role: "button",
|
82
|
-
className: "".concat(blockClass, "__tab-new")
|
83
|
-
}, /*#__PURE__*/React.createElement(ModifiedTabLabelNew, {
|
84
|
-
label: newTabLabel
|
85
|
-
}))), /*#__PURE__*/React.createElement(TabPanels, null, tabs.map(function (tab) {
|
86
|
-
var _tab$content;
|
87
|
-
|
88
|
-
return /*#__PURE__*/React.createElement(TabPanel, {
|
89
|
-
key: tab.id,
|
90
|
-
id: tab.id
|
91
|
-
}, /*#__PURE__*/React.createElement("div", {
|
92
|
-
className: "".concat(blockClass, "__tab-content")
|
93
|
-
}, (_tab$content = tab.content) === null || _tab$content === void 0 ? void 0 : _tab$content.call(tab)));
|
94
|
-
}), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement("div", {
|
95
|
-
className: "".concat(blockClass, "__tab-content")
|
96
|
-
}, newTabContent)))));
|
97
|
-
}); // Return a placeholder if not released and not enabled by feature flag
|
98
|
-
|
99
|
-
ModifiedTabs = pkg.checkComponentEnabled(ModifiedTabs, componentName);
|
100
|
-
ModifiedTabs.propTypes = {
|
101
|
-
/**
|
102
|
-
* Provide an optional class to be applied to the containing node.
|
103
|
-
*/
|
104
|
-
className: PropTypes.string,
|
105
|
-
|
106
|
-
/**
|
107
|
-
* New tab content
|
108
|
-
*/
|
109
|
-
newTabContent: PropTypes.object,
|
110
|
-
|
111
|
-
/**
|
112
|
-
* New tab label
|
113
|
-
*/
|
114
|
-
newTabLabel: PropTypes.string,
|
115
|
-
|
116
|
-
/**
|
117
|
-
* Optional onCloseTab handler
|
118
|
-
*/
|
119
|
-
onCloseTab: PropTypes.func,
|
120
|
-
|
121
|
-
/**
|
122
|
-
* New tab content
|
123
|
-
*/
|
124
|
-
onNewTab: PropTypes.func,
|
125
|
-
|
126
|
-
/**
|
127
|
-
* Tab list aria label, passed to Carbon TabList
|
128
|
-
*/
|
129
|
-
tabListAriaLabel: PropTypes.string.isRequired,
|
130
|
-
|
131
|
-
/**
|
132
|
-
* Tabs array containing tab object { id, label, content }
|
133
|
-
*/
|
134
|
-
tabs: PropTypes.arrayOf(PropTypes.shape({
|
135
|
-
id: PropTypes.string,
|
136
|
-
label: PropTypes.node,
|
137
|
-
content: PropTypes.func,
|
138
|
-
unsavedContent: PropTypes.bool
|
139
|
-
})).isRequired
|
140
|
-
};
|
141
|
-
ModifiedTabs.displayName = componentName;
|
@@ -1 +0,0 @@
|
|
1
|
-
export { ModifiedTabs } from './ModifiedTabs';
|
@@ -1,50 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
-
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
exports.ModifiedTabLabelNew = void 0;
|
9
|
-
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
11
|
-
|
12
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
13
|
-
|
14
|
-
var _icons = require("@carbon/react/icons");
|
15
|
-
|
16
|
-
var _settings = require("../../settings");
|
17
|
-
|
18
|
-
//
|
19
|
-
// Copyright IBM Corp. 2020, 2020
|
20
|
-
//
|
21
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
22
|
-
// LICENSE file in the root directory of this source tree.
|
23
|
-
//
|
24
|
-
var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
|
25
|
-
|
26
|
-
var ModifiedTabLabelNew = function ModifiedTabLabelNew(_ref) {
|
27
|
-
var label = _ref.label;
|
28
|
-
return /*#__PURE__*/_react.default.createElement("span", {
|
29
|
-
className: "".concat(blockClass, "__tab-new")
|
30
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
31
|
-
className: "".concat(blockClass, "__tab-new__label")
|
32
|
-
}, label), /*#__PURE__*/_react.default.createElement("span", {
|
33
|
-
className: "".concat(blockClass, "__tab-new-img")
|
34
|
-
}, /*#__PURE__*/_react.default.createElement(_icons.Add, {
|
35
|
-
size: 20
|
36
|
-
})));
|
37
|
-
};
|
38
|
-
|
39
|
-
exports.ModifiedTabLabelNew = ModifiedTabLabelNew;
|
40
|
-
ModifiedTabLabelNew.propTypes = {
|
41
|
-
/**
|
42
|
-
* Label content of the tab
|
43
|
-
*/
|
44
|
-
label: _propTypes.default.string,
|
45
|
-
|
46
|
-
/**
|
47
|
-
* Optional onClick handler
|
48
|
-
*/
|
49
|
-
onClick: _propTypes.default.func
|
50
|
-
};
|
@@ -1,63 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
-
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
exports.ModifiedTabLabelWithClose = void 0;
|
9
|
-
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
11
|
-
|
12
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
13
|
-
|
14
|
-
var _icons = require("@carbon/react/icons");
|
15
|
-
|
16
|
-
var _settings = require("../../settings");
|
17
|
-
|
18
|
-
var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
|
19
|
-
|
20
|
-
var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref) {
|
21
|
-
var unsavedContent = _ref.unsavedContent,
|
22
|
-
label = _ref.label,
|
23
|
-
onClose = _ref.onClose;
|
24
|
-
|
25
|
-
var handleClose = function handleClose() {
|
26
|
-
if (onClose) {
|
27
|
-
onClose();
|
28
|
-
}
|
29
|
-
};
|
30
|
-
|
31
|
-
return /*#__PURE__*/_react.default.createElement("span", {
|
32
|
-
className: "".concat(blockClass, "__tab")
|
33
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
34
|
-
className: "".concat(blockClass, "__tab-label")
|
35
|
-
}, label), /*#__PURE__*/_react.default.createElement("button", {
|
36
|
-
title: "Close button",
|
37
|
-
onClick: handleClose,
|
38
|
-
className: "".concat(blockClass, "__tab-close"),
|
39
|
-
type: "button"
|
40
|
-
}, unsavedContent ? /*#__PURE__*/_react.default.createElement(_icons.CloseFilled, {
|
41
|
-
size: 16
|
42
|
-
}) : /*#__PURE__*/_react.default.createElement(_icons.Close, {
|
43
|
-
size: 16
|
44
|
-
})));
|
45
|
-
};
|
46
|
-
|
47
|
-
exports.ModifiedTabLabelWithClose = ModifiedTabLabelWithClose;
|
48
|
-
ModifiedTabLabelWithClose.propTypes = {
|
49
|
-
/**
|
50
|
-
* Label content of the tab
|
51
|
-
*/
|
52
|
-
label: _propTypes.default.string.isRequired,
|
53
|
-
|
54
|
-
/**
|
55
|
-
* Optional onClose handler
|
56
|
-
*/
|
57
|
-
onClose: _propTypes.default.func,
|
58
|
-
|
59
|
-
/**
|
60
|
-
* unsavedContent indicates tab contents have not been saved
|
61
|
-
*/
|
62
|
-
unsavedContent: _propTypes.default.bool
|
63
|
-
};
|
@@ -1,164 +0,0 @@
|
|
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.ModifiedTabs = void 0;
|
11
|
-
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
13
|
-
|
14
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
|
-
|
16
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
17
|
-
|
18
|
-
var _react2 = require("@carbon/react");
|
19
|
-
|
20
|
-
var _ModifiedTabLabelWithClose = require("./ModifiedTabLabelWithClose");
|
21
|
-
|
22
|
-
var _ModifiedTabLabelNew = require("./ModifiedTabLabelNew");
|
23
|
-
|
24
|
-
var _settings = require("../../settings");
|
25
|
-
|
26
|
-
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); }
|
27
|
-
|
28
|
-
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; }
|
29
|
-
|
30
|
-
//
|
31
|
-
// Copyright IBM Corp. 2020, 2020
|
32
|
-
//
|
33
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
34
|
-
// LICENSE file in the root directory of this source tree.
|
35
|
-
//
|
36
|
-
var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
|
37
|
-
var componentName = 'ModifiedTabs'; // Default values for props
|
38
|
-
|
39
|
-
var defaults = {
|
40
|
-
newTabLabel: 'New tab',
|
41
|
-
newTabContent: 'Your new tab will be here soon',
|
42
|
-
onNewTab: undefined,
|
43
|
-
onCloseTab: undefined,
|
44
|
-
tabs: []
|
45
|
-
};
|
46
|
-
var ModifiedTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
47
|
-
var className = _ref.className,
|
48
|
-
_ref$tabs = _ref.tabs,
|
49
|
-
tabs = _ref$tabs === void 0 ? defaults.tabs : _ref$tabs,
|
50
|
-
_ref$newTabLabel = _ref.newTabLabel,
|
51
|
-
newTabLabel = _ref$newTabLabel === void 0 ? defaults.newTabLabel : _ref$newTabLabel,
|
52
|
-
_ref$newTabContent = _ref.newTabContent,
|
53
|
-
newTabContent = _ref$newTabContent === void 0 ? defaults.newTabContent : _ref$newTabContent,
|
54
|
-
_ref$onNewTab = _ref.onNewTab,
|
55
|
-
onNewTab = _ref$onNewTab === void 0 ? defaults.onNewTab : _ref$onNewTab,
|
56
|
-
_ref$onCloseTab = _ref.onCloseTab,
|
57
|
-
onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab,
|
58
|
-
tabListAriaLabel = _ref.tabListAriaLabel;
|
59
|
-
var tabsRef = (0, _react.useRef)();
|
60
|
-
var localRef = ref || tabsRef;
|
61
|
-
|
62
|
-
var handleNewTab = function handleNewTab() {
|
63
|
-
if (onNewTab) {
|
64
|
-
onNewTab();
|
65
|
-
setTimeout(function () {
|
66
|
-
// set focus to the new tab
|
67
|
-
var addNewTabButton = localRef.current.querySelector(".".concat(blockClass, "__tab-new"));
|
68
|
-
var tab = addNewTabButton === null || addNewTabButton === void 0 ? void 0 : addNewTabButton.previousSibling;
|
69
|
-
tab === null || tab === void 0 ? void 0 : tab.focus();
|
70
|
-
});
|
71
|
-
}
|
72
|
-
};
|
73
|
-
|
74
|
-
var handleClose = function handleClose(id) {
|
75
|
-
if (onCloseTab) {
|
76
|
-
onCloseTab(id);
|
77
|
-
}
|
78
|
-
};
|
79
|
-
|
80
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
81
|
-
className: (0, _classnames.default)(blockClass, className),
|
82
|
-
ref: localRef
|
83
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.Tabs, {
|
84
|
-
className: "modified-tabs"
|
85
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.TabList, {
|
86
|
-
"aria-label": tabListAriaLabel
|
87
|
-
}, tabs.map(function (tab) {
|
88
|
-
return /*#__PURE__*/_react.default.createElement(_react2.Tab, {
|
89
|
-
key: tab.id
|
90
|
-
}, /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelWithClose.ModifiedTabLabelWithClose, {
|
91
|
-
label: tab.label,
|
92
|
-
onClose: function onClose() {
|
93
|
-
return handleClose(tab.id);
|
94
|
-
},
|
95
|
-
unsavedContent: tab.unsavedContent
|
96
|
-
}));
|
97
|
-
}), /*#__PURE__*/_react.default.createElement(_react2.Tab, {
|
98
|
-
id: "modified-tabs__tab-new",
|
99
|
-
onClick: handleNewTab,
|
100
|
-
onKeyUp: function onKeyUp(ev) {
|
101
|
-
return ev.keyCode === 32 && handleNewTab();
|
102
|
-
},
|
103
|
-
role: "button",
|
104
|
-
className: "".concat(blockClass, "__tab-new")
|
105
|
-
}, /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelNew.ModifiedTabLabelNew, {
|
106
|
-
label: newTabLabel
|
107
|
-
}))), /*#__PURE__*/_react.default.createElement(_react2.TabPanels, null, tabs.map(function (tab) {
|
108
|
-
var _tab$content;
|
109
|
-
|
110
|
-
return /*#__PURE__*/_react.default.createElement(_react2.TabPanel, {
|
111
|
-
key: tab.id,
|
112
|
-
id: tab.id
|
113
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
114
|
-
className: "".concat(blockClass, "__tab-content")
|
115
|
-
}, (_tab$content = tab.content) === null || _tab$content === void 0 ? void 0 : _tab$content.call(tab)));
|
116
|
-
}), /*#__PURE__*/_react.default.createElement(_react2.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
|
117
|
-
className: "".concat(blockClass, "__tab-content")
|
118
|
-
}, newTabContent)))));
|
119
|
-
}); // Return a placeholder if not released and not enabled by feature flag
|
120
|
-
|
121
|
-
exports.ModifiedTabs = ModifiedTabs;
|
122
|
-
exports.ModifiedTabs = ModifiedTabs = _settings.pkg.checkComponentEnabled(ModifiedTabs, componentName);
|
123
|
-
ModifiedTabs.propTypes = {
|
124
|
-
/**
|
125
|
-
* Provide an optional class to be applied to the containing node.
|
126
|
-
*/
|
127
|
-
className: _propTypes.default.string,
|
128
|
-
|
129
|
-
/**
|
130
|
-
* New tab content
|
131
|
-
*/
|
132
|
-
newTabContent: _propTypes.default.object,
|
133
|
-
|
134
|
-
/**
|
135
|
-
* New tab label
|
136
|
-
*/
|
137
|
-
newTabLabel: _propTypes.default.string,
|
138
|
-
|
139
|
-
/**
|
140
|
-
* Optional onCloseTab handler
|
141
|
-
*/
|
142
|
-
onCloseTab: _propTypes.default.func,
|
143
|
-
|
144
|
-
/**
|
145
|
-
* New tab content
|
146
|
-
*/
|
147
|
-
onNewTab: _propTypes.default.func,
|
148
|
-
|
149
|
-
/**
|
150
|
-
* Tab list aria label, passed to Carbon TabList
|
151
|
-
*/
|
152
|
-
tabListAriaLabel: _propTypes.default.string.isRequired,
|
153
|
-
|
154
|
-
/**
|
155
|
-
* Tabs array containing tab object { id, label, content }
|
156
|
-
*/
|
157
|
-
tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
|
158
|
-
id: _propTypes.default.string,
|
159
|
-
label: _propTypes.default.node,
|
160
|
-
content: _propTypes.default.func,
|
161
|
-
unsavedContent: _propTypes.default.bool
|
162
|
-
})).isRequired
|
163
|
-
};
|
164
|
-
ModifiedTabs.displayName = componentName;
|
@@ -1,13 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
Object.defineProperty(exports, "ModifiedTabs", {
|
7
|
-
enumerable: true,
|
8
|
-
get: function get() {
|
9
|
-
return _ModifiedTabs.ModifiedTabs;
|
10
|
-
}
|
11
|
-
});
|
12
|
-
|
13
|
-
var _ModifiedTabs = require("./ModifiedTabs");
|
@@ -1,10 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Copyright IBM Corp. 2020, 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
|
-
// ModifiedTabs uses the following Carbon components:
|
9
|
-
// Tabs, Tab
|
10
|
-
@use '@carbon/react/scss/components/tabs';
|
@@ -1,89 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Copyright IBM Corp. 2020, 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
|
-
@use '@carbon/styles/scss/theme' as *;
|
10
|
-
@use '@carbon/react/scss/components/button/tokens' as *;
|
11
|
-
@use '@carbon/styles/scss/motion' as *;
|
12
|
-
@use '@carbon/styles/scss/spacing' as *;
|
13
|
-
@use '../../global/styles/project-settings' as c4p-settings;
|
14
|
-
|
15
|
-
// The block part of our conventional BEM class names (blockClass__E--M).
|
16
|
-
$block-class: #{c4p-settings.$pkg-prefix}--modified-tabs;
|
17
|
-
|
18
|
-
.#{$block-class} .#{$block-class}__tab-label {
|
19
|
-
display: flex;
|
20
|
-
width: 100%;
|
21
|
-
// height: 100%;
|
22
|
-
align-items: flex-end;
|
23
|
-
justify-content: space-between;
|
24
|
-
}
|
25
|
-
|
26
|
-
.#{$block-class}__tab-new,
|
27
|
-
.#{$block-class}__tab {
|
28
|
-
position: relative;
|
29
|
-
display: inline-block;
|
30
|
-
width: 100%;
|
31
|
-
height: 100%;
|
32
|
-
}
|
33
|
-
|
34
|
-
.#{$block-class}__tab-new-img,
|
35
|
-
.#{$block-class}__tab-close {
|
36
|
-
// similar to modal dialog close
|
37
|
-
position: absolute;
|
38
|
-
top: -$spacing-04;
|
39
|
-
right: -$spacing-05;
|
40
|
-
overflow: hidden;
|
41
|
-
width: 2.5rem;
|
42
|
-
height: 2.5rem;
|
43
|
-
padding: $spacing-04;
|
44
|
-
border: $spacing-01 solid transparent;
|
45
|
-
background-color: transparent;
|
46
|
-
border-radius: 0;
|
47
|
-
cursor: pointer;
|
48
|
-
transition: background-color $duration-fast-02 motion(standard, productive);
|
49
|
-
// stylelint-disable-next-line max-nesting-depth
|
50
|
-
@media (prefers-reduced-motion: reduce) {
|
51
|
-
transition: none;
|
52
|
-
}
|
53
|
-
}
|
54
|
-
|
55
|
-
.#{$block-class}__tab-new-icon {
|
56
|
-
display: flex;
|
57
|
-
align-items: center;
|
58
|
-
justify-content: center;
|
59
|
-
padding: 0;
|
60
|
-
margin-top: $spacing-01;
|
61
|
-
}
|
62
|
-
|
63
|
-
.#{$block-class}__tab-close:focus {
|
64
|
-
border-color: $button-primary;
|
65
|
-
outline: none;
|
66
|
-
}
|
67
|
-
|
68
|
-
.#{$block-class}__tab-close:hover {
|
69
|
-
background-color: $background-hover;
|
70
|
-
}
|
71
|
-
|
72
|
-
.#{$block-class}__tab-new-img {
|
73
|
-
display: flex;
|
74
|
-
align-items: center;
|
75
|
-
justify-content: center;
|
76
|
-
padding: 0;
|
77
|
-
}
|
78
|
-
|
79
|
-
.#{$block-class}
|
80
|
-
.#{c4p-settings.$carbon-prefix}--tabs__nav-item.#{c4p-settings.$carbon-prefix}--tabs__nav-link {
|
81
|
-
width: 10rem;
|
82
|
-
}
|
83
|
-
|
84
|
-
.#{$block-class}
|
85
|
-
.#{c4p-settings.$carbon-prefix}--tab--overflow-nav-button--previous,
|
86
|
-
.#{$block-class}
|
87
|
-
.#{c4p-settings.$carbon-prefix}--tab--overflow-nav-button--next {
|
88
|
-
z-index: 2;
|
89
|
-
}
|