@carbon/ibm-products 1.50.0 → 1.52.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +10 -5
- package/css/index-full-carbon.css +131 -82
- 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 +38 -11
- 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 +131 -82
- 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 +131 -82
- 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/AboutModal/AboutModal.js +3 -4
- package/es/components/ActionBar/ActionBar.js +9 -18
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +8 -8
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -5
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +14 -0
- package/es/components/Datagrid/index.js +1 -0
- package/es/components/Datagrid/useActionsColumn.js +10 -7
- package/es/components/Datagrid/useCustomizeColumns.js +5 -1
- package/es/components/Datagrid/useEditableCell.js +12 -0
- package/es/components/Datagrid/useExpandedRow.js +11 -7
- package/es/components/Datagrid/useFiltering.js +15 -10
- package/es/components/Datagrid/useInlineEdit.js +17 -8
- package/es/components/Datagrid/useNestedRows.js +10 -6
- package/es/components/Datagrid/useOnRowClick.js +9 -1
- package/es/components/Datagrid/useSelectRows.js +2 -0
- package/es/components/EditInPlace/EditInPlace.js +43 -0
- package/es/components/EditInPlace/index.js +8 -0
- package/es/components/ExampleComponent/ExampleComponent.js +32 -4
- package/es/components/ExampleComponent/useExample.js +49 -0
- package/es/components/InlineEdit/InlineEdit.js +5 -1
- package/es/components/InlineEditV1/InlineEditV1.js +7 -2
- package/es/components/InlineEditV2/InlineEditV2.js +51 -15
- package/es/components/NonLinearReading/NonLinearReading.js +7 -7
- package/es/components/PageHeader/PageHeader.js +28 -31
- package/es/components/SidePanel/SidePanel.js +25 -26
- package/es/components/TagSet/TagSet.js +5 -7
- package/es/components/Tearsheet/TearsheetShell.js +4 -6
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResizeObserver.js +74 -0
- package/es/global/js/package-settings.js +35 -4
- package/es/global/js/utils/test-helper.js +34 -3
- package/es/settings.js +40 -29
- package/lib/components/AboutModal/AboutModal.js +3 -4
- package/lib/components/ActionBar/ActionBar.js +9 -18
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -4
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +15 -0
- package/lib/components/Datagrid/index.js +7 -0
- package/lib/components/Datagrid/useActionsColumn.js +7 -1
- package/lib/components/Datagrid/useCustomizeColumns.js +4 -0
- package/lib/components/Datagrid/useEditableCell.js +20 -0
- package/lib/components/Datagrid/useExpandedRow.js +4 -0
- package/lib/components/Datagrid/useFiltering.js +8 -2
- package/lib/components/Datagrid/useInlineEdit.js +19 -8
- package/lib/components/Datagrid/useNestedRows.js +9 -6
- package/lib/components/Datagrid/useOnRowClick.js +9 -1
- package/lib/components/Datagrid/useSelectRows.js +2 -0
- package/lib/components/EditInPlace/EditInPlace.js +46 -0
- package/lib/components/EditInPlace/index.js +12 -0
- package/lib/components/ExampleComponent/ExampleComponent.js +35 -4
- package/lib/components/ExampleComponent/useExample.js +58 -0
- package/lib/components/InlineEdit/InlineEdit.js +5 -1
- package/lib/components/InlineEditV1/InlineEditV1.js +7 -2
- package/lib/components/InlineEditV2/InlineEditV2.js +53 -16
- package/lib/components/NonLinearReading/NonLinearReading.js +6 -6
- package/lib/components/PageHeader/PageHeader.js +28 -31
- package/lib/components/SidePanel/SidePanel.js +25 -26
- package/lib/components/TagSet/TagSet.js +5 -7
- package/lib/components/Tearsheet/TearsheetShell.js +4 -6
- package/lib/components/index.js +13 -0
- package/lib/global/js/hooks/useResizeObserver.js +83 -0
- package/lib/global/js/package-settings.js +34 -3
- package/lib/global/js/utils/test-helper.js +37 -5
- package/lib/settings.js +41 -30
- package/package.json +2 -3
- package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +10 -7
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +52 -11
- package/scss/components/InlineEditV2/_storybook-styles.scss +9 -2
- package/scss/components/NonLinearReading/_non-linear-reading.scss +76 -67
- package/scss/components/NonLinearReading/_storybook-styles.scss +16 -0
@@ -20,7 +20,7 @@ import { motion, AnimatePresence } from 'framer-motion';
|
|
20
20
|
// Other standard imports.
|
21
21
|
import PropTypes from 'prop-types';
|
22
22
|
import cx from 'classnames';
|
23
|
-
import {
|
23
|
+
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
|
24
24
|
import { moderate02 } from '@carbon/motion';
|
25
25
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
26
26
|
import { allPropTypes } from '../../global/js/utils/props-helper';
|
@@ -53,7 +53,7 @@ var defaults = {
|
|
53
53
|
* Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
|
54
54
|
*/
|
55
55
|
export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
56
|
-
var _window,
|
56
|
+
var _window, _ref5, _cx4;
|
57
57
|
var actionToolbarButtons = _ref.actionToolbarButtons,
|
58
58
|
actions = _ref.actions,
|
59
59
|
_ref$animateTitle = _ref.animateTitle,
|
@@ -165,8 +165,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
165
165
|
}, [labelText, title]);
|
166
166
|
|
167
167
|
/* istanbul ignore next */
|
168
|
-
var handleResize = function handleResize(
|
168
|
+
var handleResize = function handleResize(_ref2) {
|
169
169
|
var _sidePanelOuter$style3;
|
170
|
+
var height = _ref2.height;
|
170
171
|
setPanelHeight(height);
|
171
172
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
172
173
|
var actionsContainer = getActionsContainerElement();
|
@@ -353,9 +354,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
353
354
|
|
354
355
|
// adds focus trap functionality
|
355
356
|
/* istanbul ignore next */
|
356
|
-
var handleBlur = function handleBlur(
|
357
|
-
var oldActiveNode =
|
358
|
-
currentActiveNode =
|
357
|
+
var handleBlur = function handleBlur(_ref3) {
|
358
|
+
var oldActiveNode = _ref3.target,
|
359
|
+
currentActiveNode = _ref3.relatedTarget;
|
359
360
|
// focus trap should only be set if the side panel is a `slideOver` type
|
360
361
|
if (open && sidePanelInnerRef && !slideIn) {
|
361
362
|
wrapFocus({
|
@@ -368,7 +369,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
368
369
|
}
|
369
370
|
};
|
370
371
|
var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
|
371
|
-
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (
|
372
|
+
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, _defineProperty(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref5)]);
|
372
373
|
var renderHeader = function renderHeader() {
|
373
374
|
var _cx, _cx2;
|
374
375
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
@@ -397,17 +398,17 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
397
398
|
className: cx("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
|
398
399
|
}, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
|
399
400
|
className: cx("".concat(blockClass, "__action-toolbar"), _defineProperty({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
|
400
|
-
}, actionToolbarButtons.map(function (
|
401
|
-
var label =
|
402
|
-
kind =
|
403
|
-
icon =
|
404
|
-
tooltipPosition =
|
405
|
-
tooltipAlignment =
|
406
|
-
leading =
|
407
|
-
disabled =
|
408
|
-
className =
|
409
|
-
onClick =
|
410
|
-
rest = _objectWithoutProperties(
|
401
|
+
}, actionToolbarButtons.map(function (_ref6) {
|
402
|
+
var label = _ref6.label,
|
403
|
+
kind = _ref6.kind,
|
404
|
+
icon = _ref6.icon,
|
405
|
+
tooltipPosition = _ref6.tooltipPosition,
|
406
|
+
tooltipAlignment = _ref6.tooltipAlignment,
|
407
|
+
leading = _ref6.leading,
|
408
|
+
disabled = _ref6.disabled,
|
409
|
+
className = _ref6.className,
|
410
|
+
onClick = _ref6.onClick,
|
411
|
+
rest = _objectWithoutProperties(_ref6, _excluded2);
|
411
412
|
return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
|
412
413
|
key: label,
|
413
414
|
kind: kind || 'ghost',
|
@@ -435,10 +436,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
435
436
|
}, title));
|
436
437
|
};
|
437
438
|
var contentRef = ref || sidePanelRef;
|
438
|
-
|
439
|
-
|
440
|
-
onResize: handleResize,
|
441
|
-
targetRef: contentRef
|
439
|
+
useResizeObserver(contentRef, {
|
440
|
+
callback: handleResize
|
442
441
|
});
|
443
442
|
return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
|
444
443
|
id: "".concat(blockClass, "-outer"),
|
@@ -591,8 +590,8 @@ SidePanel.propTypes = {
|
|
591
590
|
* This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
|
592
591
|
* This prop is required when using the `slideIn` variant of the side panel.
|
593
592
|
*/
|
594
|
-
selectorPageContent: PropTypes.string.isRequired.if(function (
|
595
|
-
var slideIn =
|
593
|
+
selectorPageContent: PropTypes.string.isRequired.if(function (_ref8) {
|
594
|
+
var slideIn = _ref8.slideIn;
|
596
595
|
return slideIn;
|
597
596
|
}),
|
598
597
|
/**
|
@@ -615,8 +614,8 @@ SidePanel.propTypes = {
|
|
615
614
|
/**
|
616
615
|
* Sets the title text
|
617
616
|
*/
|
618
|
-
title: PropTypes.string.isRequired.if(function (
|
619
|
-
var labelText =
|
617
|
+
title: PropTypes.string.isRequired.if(function (_ref9) {
|
618
|
+
var labelText = _ref9.labelText;
|
620
619
|
return labelText;
|
621
620
|
})
|
622
621
|
};
|
@@ -21,7 +21,7 @@ import cx from 'classnames';
|
|
21
21
|
import { TagSetOverflow } from './TagSetOverflow';
|
22
22
|
import { TagSetModal } from './TagSetModal';
|
23
23
|
import { Tag } from 'carbon-components-react';
|
24
|
-
import {
|
24
|
+
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
|
25
25
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
26
26
|
import { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
|
27
27
|
import { pkg } from '../../settings';
|
@@ -202,13 +202,11 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
202
202
|
var handleModalClose = function handleModalClose() {
|
203
203
|
setShowAllModalOpen(false);
|
204
204
|
};
|
205
|
-
|
206
|
-
|
207
|
-
targetRef: sizingContainerRef
|
205
|
+
useResizeObserver(sizingContainerRef, {
|
206
|
+
callback: handleSizerTagsResize
|
208
207
|
});
|
209
|
-
|
210
|
-
|
211
|
-
targetRef: tagSetRef
|
208
|
+
useResizeObserver(tagSetRef, {
|
209
|
+
callback: handleResize
|
212
210
|
});
|
213
211
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
214
212
|
className: cx([blockClass, className]),
|
@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
15
15
|
// Import portions of React that are needed.
|
16
16
|
import React, { useEffect, useState, useRef } from 'react';
|
17
17
|
import { createPortal } from 'react-dom';
|
18
|
-
import {
|
18
|
+
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
|
19
19
|
|
20
20
|
// Other standard imports.
|
21
21
|
import PropTypes from 'prop-types';
|
@@ -93,12 +93,10 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
93
93
|
}
|
94
94
|
}, [portalTargetIn]);
|
95
95
|
var localRef = useRef();
|
96
|
+
var resizer = useRef(null);
|
96
97
|
var modalRef = ref || localRef;
|
97
|
-
var
|
98
|
-
|
99
|
-
}),
|
100
|
-
width = _useResizeDetector.width,
|
101
|
-
resizer = _useResizeDetector.ref;
|
98
|
+
var _useResizeObserver = useResizeObserver(resizer),
|
99
|
+
width = _useResizeObserver.width;
|
102
100
|
|
103
101
|
// Keep track of the stack depth and our position in it (1-based, 0=closed)
|
104
102
|
var _useState3 = useState(0),
|
package/es/components/index.js
CHANGED
@@ -37,10 +37,11 @@ export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProv
|
|
37
37
|
export { EditSidePanel } from './EditSidePanel';
|
38
38
|
export { OptionsTile } from './OptionsTile';
|
39
39
|
export { DataSpreadsheet } from './DataSpreadsheet';
|
40
|
-
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
|
40
|
+
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useEditableCell, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
|
41
41
|
export { EditTearsheet } from './EditTearsheet';
|
42
42
|
export { EditTearsheetNarrow } from './EditTearsheetNarrow';
|
43
43
|
export { EditFullPage } from './EditFullPage';
|
44
44
|
export { EditUpdateCards } from './EditUpdateCards';
|
45
45
|
export { InlineEdit } from './InlineEdit';
|
46
|
+
export { EditInPlace } from './EditInPlace';
|
46
47
|
export { NonLinearReading } from './NonLinearReading';
|
@@ -0,0 +1,74 @@
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
/**
|
3
|
+
* Copyright IBM Corp. 2023, 2023
|
4
|
+
*
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
7
|
+
*/
|
8
|
+
import { useRef, useState, useLayoutEffect } from 'react';
|
9
|
+
export var useResizeObserver = function useResizeObserver(ref) {
|
10
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
11
|
+
callback: null,
|
12
|
+
throttleInterval: 0
|
13
|
+
};
|
14
|
+
var callback = options.callback,
|
15
|
+
throttleInterval = options.throttleInterval;
|
16
|
+
var _useState = useState(0),
|
17
|
+
_useState2 = _slicedToArray(_useState, 2),
|
18
|
+
width = _useState2[0],
|
19
|
+
setWidth = _useState2[1];
|
20
|
+
var _useState3 = useState(0),
|
21
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
22
|
+
height = _useState4[0],
|
23
|
+
setHeight = _useState4[1];
|
24
|
+
var throttleTimeout = useRef(null);
|
25
|
+
var entriesToHandle = useRef(null);
|
26
|
+
useLayoutEffect(function () {
|
27
|
+
if (!(ref !== null && ref !== void 0 && ref.current)) {
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
var doCallbacks = function doCallbacks() {
|
31
|
+
if (!(ref !== null && ref !== void 0 && ref.current) || !Array.isArray(entriesToHandle === null || entriesToHandle === void 0 ? void 0 : entriesToHandle.current)) {
|
32
|
+
return;
|
33
|
+
}
|
34
|
+
var entry = entriesToHandle.current[0];
|
35
|
+
setWidth(entry.contentRect.width);
|
36
|
+
setHeight(entry.contentRect.height);
|
37
|
+
throttleTimeout.current = null;
|
38
|
+
callback && callback(entry.contentRect);
|
39
|
+
};
|
40
|
+
var observer = new ResizeObserver(function (entries) {
|
41
|
+
// always update entriesToHandle
|
42
|
+
entriesToHandle.current = entries;
|
43
|
+
if (throttleInterval) {
|
44
|
+
// if a throttleInterval check for running timeout
|
45
|
+
if (throttleTimeout.current === null) {
|
46
|
+
// no live timeout set entries to handle and move on
|
47
|
+
|
48
|
+
// set up throttle
|
49
|
+
throttleTimeout.current = setTimeout(function () {
|
50
|
+
// do callbacks
|
51
|
+
doCallbacks();
|
52
|
+
// reset throttle
|
53
|
+
throttleTimeout.current = null;
|
54
|
+
}, throttleInterval);
|
55
|
+
}
|
56
|
+
} else {
|
57
|
+
// no throttle do callbacks every time
|
58
|
+
doCallbacks();
|
59
|
+
}
|
60
|
+
});
|
61
|
+
|
62
|
+
// observe all refs passed
|
63
|
+
observer.observe(ref.current);
|
64
|
+
return function () {
|
65
|
+
observer.disconnect();
|
66
|
+
observer = null;
|
67
|
+
};
|
68
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
69
|
+
}, [ref, options]);
|
70
|
+
return {
|
71
|
+
width: width,
|
72
|
+
height: height
|
73
|
+
};
|
74
|
+
};
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
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; }
|
3
3
|
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) { _defineProperty(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; }
|
4
4
|
//
|
5
|
-
// Copyright IBM Corp. 2020,
|
5
|
+
// Copyright IBM Corp. 2020, 2023
|
6
6
|
//
|
7
7
|
// This source code is licensed under the Apache-2.0 license found in the
|
8
8
|
// LICENSE file in the root directory of this source tree.
|
@@ -25,6 +25,7 @@ var defaults = {
|
|
25
25
|
CreateTearsheet: true,
|
26
26
|
CreateTearsheetStep: true,
|
27
27
|
CreateTearsheetDivider: true,
|
28
|
+
EditInPlace: true,
|
28
29
|
EmptyState: true,
|
29
30
|
ErrorEmptyState: true,
|
30
31
|
ExportModal: true,
|
@@ -78,7 +79,15 @@ var defaults = {
|
|
78
79
|
// feature level flags
|
79
80
|
feature: {
|
80
81
|
'a-new-feature': false,
|
81
|
-
'default-portal-target-body': true
|
82
|
+
'default-portal-target-body': true,
|
83
|
+
'Datagrid.useExpandedRow': false,
|
84
|
+
'Datagrid.useNestedRows': false,
|
85
|
+
'Datagrid.useInlineEdit': false,
|
86
|
+
'Datagrid.useActionsColumn': false,
|
87
|
+
'Datagrid.useFiltering': false,
|
88
|
+
'Datagrid.useCustomizeColumns': false,
|
89
|
+
'ExampleComponent.secondaryIcon': false,
|
90
|
+
'ExampleComponent.useExample': false
|
82
91
|
}
|
83
92
|
};
|
84
93
|
var warningMessageComponent = function warningMessageComponent(property) {
|
@@ -87,6 +96,9 @@ var warningMessageComponent = function warningMessageComponent(property) {
|
|
87
96
|
var warningMessageFeature = function warningMessageFeature(property) {
|
88
97
|
return "Carbon for IBM Products (WARNING): Feature \"".concat(property, "\" enabled via feature flags.");
|
89
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
|
+
};
|
90
102
|
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.';
|
91
103
|
var warningMessageAllFeatures = 'Carbon for IBM Products (WARNING): All features enabled through use of setAllFeatures';
|
92
104
|
|
@@ -108,7 +120,10 @@ var allFeatures = all.INITIAL;
|
|
108
120
|
var silent = false;
|
109
121
|
var component = new Proxy(_objectSpread({}, defaults.component), {
|
110
122
|
set: function set(target, property, value) {
|
111
|
-
|
123
|
+
if (target[property] !== true && !silent && value) {
|
124
|
+
// not already true, not silent, and now true
|
125
|
+
console.warn(warningMessageComponent(property));
|
126
|
+
}
|
112
127
|
target[property] = value;
|
113
128
|
return true; // value set
|
114
129
|
},
|
@@ -119,7 +134,15 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
|
|
119
134
|
});
|
120
135
|
var feature = new Proxy(_objectSpread({}, defaults.feature), {
|
121
136
|
set: function set(target, property, value) {
|
122
|
-
|
137
|
+
// If we receive a feature flag that doesn't exist in our defaults we should not log
|
138
|
+
// a warning message and instead just return
|
139
|
+
if (!Object.getOwnPropertyDescriptor(defaults.feature, property)) {
|
140
|
+
return true;
|
141
|
+
}
|
142
|
+
if (target[property] !== true && !silent && value) {
|
143
|
+
// not already true, not silent, and now true
|
144
|
+
console.warn(warningMessageFeature(property));
|
145
|
+
}
|
123
146
|
target[property] = value;
|
124
147
|
return true; // value set
|
125
148
|
},
|
@@ -148,6 +171,14 @@ export default {
|
|
148
171
|
var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
149
172
|
return byDefault ? defaults.feature[featureName] : feature[featureName];
|
150
173
|
},
|
174
|
+
checkReportFeatureEnabled: function checkReportFeatureEnabled(featureName) {
|
175
|
+
if (feature[featureName]) {
|
176
|
+
// NOTE: Warning emitted if feature flag is enabled (see Proxy above)
|
177
|
+
return true;
|
178
|
+
} else {
|
179
|
+
console.error(errorMessageFeature(featureName));
|
180
|
+
}
|
181
|
+
},
|
151
182
|
isFeaturePublic: function isFeaturePublic(featureName) {
|
152
183
|
var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
153
184
|
return Object.prototype.hasOwnProperty.call(byDefault ? defaults.feature : feature, featureName);
|
@@ -182,6 +182,39 @@ export var expectMultipleWarn = function expectMultipleWarn(messages, test) {
|
|
182
182
|
warn.mockRestore();
|
183
183
|
return result;
|
184
184
|
};
|
185
|
+
var checkLogging = function checkLogging(mock, message) {
|
186
|
+
if (message) {
|
187
|
+
var _expect4;
|
188
|
+
expect(mock).toBeCalled();
|
189
|
+
(_expect4 = expect(mock)).toHaveBeenCalledWith.apply(_expect4, _toConsumableArray(makeMatcherArray(message)));
|
190
|
+
}
|
191
|
+
};
|
192
|
+
|
193
|
+
/**
|
194
|
+
* A helper function to enable a test to expect a single call to
|
195
|
+
* console.error, for example when intentionally omitting a required prop
|
196
|
+
* or supplying an invalid prop type or value for the purposes of the test.
|
197
|
+
* @param {errors: {string|regex|function|[]}, warnings: {string|regex|function|[]}} messages the expected parameters for the call to
|
198
|
+
* console.error or console.warn, which must be called exactly once. A single string or regex or an
|
199
|
+
* expect matcher can be used to match a single-argument call to console.error (most common),
|
200
|
+
* while an array of strings and/or regex and/or expect matchers can be used to match a
|
201
|
+
* multiple-argument call. Strings can be full or substring matches to the corresponding
|
202
|
+
* argument.
|
203
|
+
* @param {Function} test the test function to call, during which the call to
|
204
|
+
* console.error will be expected.
|
205
|
+
*/
|
206
|
+
export var expectLogging = function expectLogging(_ref2, test) {
|
207
|
+
var errors = _ref2.errors,
|
208
|
+
warnings = _ref2.warnings;
|
209
|
+
var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
|
210
|
+
var warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
|
211
|
+
var result = test();
|
212
|
+
checkLogging(error, errors);
|
213
|
+
checkLogging(warn, warnings);
|
214
|
+
error.mockRestore();
|
215
|
+
warn.mockRestore();
|
216
|
+
return result;
|
217
|
+
};
|
185
218
|
|
186
219
|
/**
|
187
220
|
* A helper function to enable a test to expect a single call to
|
@@ -197,11 +230,9 @@ export var expectMultipleWarn = function expectMultipleWarn(messages, test) {
|
|
197
230
|
* console.error will be expected.
|
198
231
|
*/
|
199
232
|
export var expectError = function expectError(message, test) {
|
200
|
-
var _expect4;
|
201
233
|
var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
|
202
234
|
var result = test();
|
203
|
-
|
204
|
-
(_expect4 = expect(error)).toHaveBeenCalledWith.apply(_expect4, _toConsumableArray(makeMatcherArray(message)));
|
235
|
+
checkLogging(error, message);
|
205
236
|
error.mockRestore();
|
206
237
|
return result;
|
207
238
|
};
|
package/es/settings.js
CHANGED
@@ -3,6 +3,7 @@ import pkgSettings from './global/js/package-settings';
|
|
3
3
|
import { settings as carbonSettings } from 'carbon-components';
|
4
4
|
import React from 'react';
|
5
5
|
import { themes } from '@carbon/themes';
|
6
|
+
import pconsole from './global/js/utils/pconsole';
|
6
7
|
export var carbon = {
|
7
8
|
get prefix() {
|
8
9
|
return carbonSettings.prefix;
|
@@ -14,6 +15,19 @@ export var carbon = {
|
|
14
15
|
return themes;
|
15
16
|
}
|
16
17
|
};
|
18
|
+
var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
|
19
|
+
return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
|
20
|
+
};
|
21
|
+
pkgSettings.logDeprecated = function (component, name) {
|
22
|
+
if (component !== null && component !== void 0 && component.deprecated) {
|
23
|
+
var _pconsole$level;
|
24
|
+
var _component$deprecated = component.deprecated,
|
25
|
+
level = _component$deprecated.level,
|
26
|
+
details = _component$deprecated.details;
|
27
|
+
var logUsing = (_pconsole$level = pconsole === null || pconsole === void 0 ? void 0 : pconsole[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : pconsole.error;
|
28
|
+
logUsing(componentDeprecatedWarning(name || component.displayName, details));
|
29
|
+
}
|
30
|
+
};
|
17
31
|
|
18
32
|
// Check that a component is enabled. This function returns a stub which checks
|
19
33
|
// the component status on first use and then renders as the component or as
|
@@ -24,20 +38,19 @@ pkgSettings.checkComponentEnabled = function (component, name) {
|
|
24
38
|
if (component.render) {
|
25
39
|
// The component is a forward-ref, so make a stub forward-ref.
|
26
40
|
var forward = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
);
|
41
|
+
pkgSettings.logDeprecated(component, name); // may log don't care about result
|
42
|
+
// Replace the stub's render fn so this test only happens once.
|
43
|
+
return (forward.render = pkgSettings.isComponentEnabled(name) || !pkgSettings.isComponentPublic(name) ?
|
44
|
+
// If the component is enabled, or if it's not a public component,
|
45
|
+
// replace the stub's render fn with the component's render fn.
|
46
|
+
component.render :
|
47
|
+
// Note that Canary is a direct render fn (not a forward-ref) and
|
48
|
+
// will ignore the passed props and ref (if any)
|
49
|
+
Canary.bind(undefined, {
|
50
|
+
componentName: name
|
51
|
+
}))(
|
52
|
+
// Call it now (after this it will be directly called).
|
53
|
+
props, ref);
|
41
54
|
});
|
42
55
|
|
43
56
|
// Transfer object properties already assigned (eg propTypes, displayName)
|
@@ -47,22 +60,20 @@ pkgSettings.checkComponentEnabled = function (component, name) {
|
|
47
60
|
} else {
|
48
61
|
// The component is a direct render fn, so make a stub render fn.
|
49
62
|
var _render = function render(props) {
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
);
|
63
|
+
pkgSettings.logDeprecated(component, name); // may log don't care about result
|
64
|
+
// Replace the stub render fn so this test only happens once.
|
65
|
+
return (_render = pkgSettings.isComponentEnabled(name) || !pkgSettings.isComponentPublic(name) ?
|
66
|
+
// If the component is enabled, or if it's not a public component,
|
67
|
+
// replace the stub render fn with the component render fn.
|
68
|
+
component :
|
69
|
+
// Replace the stub render fn with the Canary render fn, which will
|
70
|
+
// ignore the passed props.
|
71
|
+
Canary.bind(undefined, {
|
72
|
+
componentName: name
|
73
|
+
}))(
|
74
|
+
// Call it now (after this it will be directly called).
|
75
|
+
props);
|
64
76
|
};
|
65
|
-
|
66
77
|
// Transfer object properties already assigned (eg propTypes, displayName)
|
67
78
|
// to a function which calls the stub render fn which checks the component
|
68
79
|
// status when first used.
|
@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
12
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
14
|
-
var
|
14
|
+
var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
|
15
15
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
16
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
17
17
|
var _settings = require("../../settings");
|
@@ -71,9 +71,8 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
71
71
|
}, [bodyRef]);
|
72
72
|
|
73
73
|
// Detect resize of the ModalBody to recalculate whether scrolling is enabled
|
74
|
-
(0,
|
75
|
-
|
76
|
-
targetRef: bodyRef
|
74
|
+
(0, _useResizeObserver.useResizeObserver)(bodyRef, {
|
75
|
+
callback: handleResize
|
77
76
|
});
|
78
77
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
|
79
78
|
className: (0, _classnames.default)(blockClass,
|
@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
14
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
16
16
|
var _settings = require("../../settings");
|
17
|
-
var
|
17
|
+
var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
|
18
18
|
var _carbonComponentsReact = require("carbon-components-react");
|
19
19
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
20
20
|
var _propsHelper = require("../../global/js/utils/props-helper");
|
@@ -61,6 +61,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
61
61
|
var refDisplayedItems = (0, _react.useRef)(null);
|
62
62
|
var sizingRef = (0, _react.useRef)(null);
|
63
63
|
var sizes = (0, _react.useRef)({});
|
64
|
+
var backupRef = (0, _react.useRef)();
|
65
|
+
var localRef = ref || backupRef;
|
64
66
|
|
65
67
|
// create hidden sizing items
|
66
68
|
(0, _react.useEffect)(function () {
|
@@ -175,30 +177,19 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
175
177
|
|
176
178
|
/* istanbul ignore next */ // not sure how to fake window resize
|
177
179
|
var handleResize = function handleResize() {
|
178
|
-
// width is the space available for all action bar items horizontally
|
179
|
-
// the action bar items are squares so the height should be one item wide
|
180
|
-
/* istanbul ignore next */ // not sure how to fake window resize
|
181
|
-
checkFullyVisibleItems();
|
182
|
-
};
|
183
|
-
|
184
|
-
/* istanbul ignore next */ // not sure how to fake window resize
|
185
|
-
var handleActionBarItemsResize = function handleActionBarItemsResize() {
|
186
180
|
// when the hidden sizing items change size
|
187
181
|
/* istanbul ignore next */ // not sure how to fake window resize
|
188
182
|
checkFullyVisibleItems();
|
189
183
|
};
|
190
|
-
(0,
|
191
|
-
|
192
|
-
|
184
|
+
(0, _useResizeObserver.useResizeObserver)(sizingRef, {
|
185
|
+
callback: handleResize
|
186
|
+
});
|
187
|
+
(0, _useResizeObserver.useResizeObserver)(localRef, {
|
188
|
+
callback: handleResize
|
193
189
|
});
|
194
|
-
var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
|
195
|
-
onResize: handleResize,
|
196
|
-
targetRef: ref
|
197
|
-
}),
|
198
|
-
outerRef = _useResizeDetector.ref;
|
199
190
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
200
191
|
className: (0, _classnames.default)([blockClass, className]),
|
201
|
-
ref:
|
192
|
+
ref: localRef
|
202
193
|
}), hiddenSizingItems, /*#__PURE__*/_react.default.createElement("div", {
|
203
194
|
ref: refDisplayedItems,
|
204
195
|
className: (0, _classnames.default)(["".concat(blockClass, "__displayed-items"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
|
@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
16
16
|
var _carbonComponentsReact = require("carbon-components-react");
|
17
17
|
var _settings = require("../../settings");
|
18
|
-
var
|
18
|
+
var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
|
19
19
|
var _iconsReact = require("@carbon/icons-react");
|
20
20
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
21
21
|
require("../../global/js/utils/props-helper");
|
@@ -233,24 +233,19 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
233
233
|
/* istanbul ignore next */ // not sure how to test resize
|
234
234
|
checkFullyVisibleBreadcrumbItems();
|
235
235
|
};
|
236
|
-
|
237
|
-
/* istanbul ignore next */ // not sure how to test resize
|
238
|
-
var handleBreadcrumbItemsResize = function handleBreadcrumbItemsResize() {
|
239
|
-
/* istanbul ignore next */ // not sure how to test resize
|
240
|
-
checkFullyVisibleBreadcrumbItems();
|
241
|
-
};
|
242
236
|
var backItem = breadcrumbs[breadcrumbs.length - 1];
|
243
237
|
/* istanbul ignore if */ // not sure how to test media queries
|
244
238
|
if (backItem.isCurrentPage) {
|
245
239
|
backItem = breadcrumbs[breadcrumbs.length - 2];
|
246
240
|
}
|
247
|
-
|
248
|
-
|
249
|
-
|
241
|
+
|
242
|
+
// container resize
|
243
|
+
(0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
|
244
|
+
callback: handleResize
|
250
245
|
});
|
251
|
-
|
252
|
-
|
253
|
-
|
246
|
+
// item resize
|
247
|
+
(0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow, {
|
248
|
+
callback: handleResize
|
254
249
|
});
|
255
250
|
return /*#__PURE__*/_react.default.createElement("div", {
|
256
251
|
className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
|
@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
14
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
16
|
-
var
|
16
|
+
var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
|
17
17
|
var _carbonComponentsReact = require("carbon-components-react");
|
18
18
|
var _ButtonMenu = require("../ButtonMenu");
|
19
19
|
var _settings = require("../../settings");
|
@@ -138,18 +138,14 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
|
|
138
138
|
}, (0, _propsHelper.prepareProps)(other, ['iconDescription', 'renderIcon'])));
|
139
139
|
}).reverse());
|
140
140
|
});
|
141
|
-
(0,
|
142
|
-
|
143
|
-
targetRef: sizingContainerRefSet
|
141
|
+
(0, _useResizeObserver.useResizeObserver)(sizingContainerRefSet, {
|
142
|
+
callback: checkFullyVisibleItems
|
144
143
|
});
|
145
|
-
(0,
|
146
|
-
|
147
|
-
targetRef: sizingContainerRefCombo
|
144
|
+
(0, _useResizeObserver.useResizeObserver)(sizingContainerRefCombo, {
|
145
|
+
callback: checkFullyVisibleItems
|
148
146
|
});
|
149
|
-
(0,
|
150
|
-
|
151
|
-
targetRef: spaceAvailableRef,
|
152
|
-
handleWidth: true
|
147
|
+
(0, _useResizeObserver.useResizeObserver)(spaceAvailableRef, {
|
148
|
+
callback: checkFullyVisibleItems
|
153
149
|
});
|
154
150
|
return /*#__PURE__*/_react.default.createElement("div", {
|
155
151
|
className: (0, _classnames.default)([blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--right"), rightAlign)]),
|