@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
@@ -1,7 +1,8 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
-
var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "size", "style"];
|
5
|
+
var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "usesExampleHook", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "secondaryIcon", "size", "style"];
|
5
6
|
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; }
|
6
7
|
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; }
|
7
8
|
/**
|
@@ -12,12 +13,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
12
13
|
*/
|
13
14
|
|
14
15
|
// Import portions of React that are needed.
|
15
|
-
import React from 'react';
|
16
|
+
import React, { useRef, useEffect, useState } from 'react';
|
16
17
|
|
17
18
|
// Other standard imports.
|
18
19
|
import PropTypes from 'prop-types';
|
19
20
|
import cx from 'classnames';
|
20
21
|
import { pkg } from '../../settings';
|
22
|
+
import useExample from './useExample';
|
21
23
|
|
22
24
|
// Carbon and package components we use.
|
23
25
|
import { Button, ButtonSet } from 'carbon-components-react';
|
@@ -43,6 +45,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
43
45
|
boxedBorder = _ref.boxedBorder,
|
44
46
|
className = _ref.className,
|
45
47
|
disabled = _ref.disabled,
|
48
|
+
usesExampleHook = _ref.usesExampleHook,
|
46
49
|
onPrimaryClick = _ref.onPrimaryClick,
|
47
50
|
onSecondaryClick = _ref.onSecondaryClick,
|
48
51
|
primaryButtonLabel = _ref.primaryButtonLabel,
|
@@ -51,10 +54,18 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
51
54
|
secondaryButtonLabel = _ref.secondaryButtonLabel,
|
52
55
|
_ref$secondaryKind = _ref.secondaryKind,
|
53
56
|
secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
|
57
|
+
secondaryIcon = _ref.secondaryIcon,
|
54
58
|
_ref$size = _ref.size,
|
55
59
|
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
56
60
|
style = _ref.style,
|
57
61
|
rest = _objectWithoutProperties(_ref, _excluded);
|
62
|
+
var _useState = useState(primaryButtonLabel),
|
63
|
+
_useState2 = _slicedToArray(_useState, 2),
|
64
|
+
thePrimaryButtonLabel = _useState2[0],
|
65
|
+
setThePrimaryButtonLabel = _useState2[1];
|
66
|
+
var _useExample = useExample(usesExampleHook),
|
67
|
+
_useExample2 = _slicedToArray(_useExample, 1),
|
68
|
+
exampleUse = _useExample2[0];
|
58
69
|
var modeClass = boxedBorder ? "".concat(blockClass, "--boxed-set") : "".concat(blockClass, "--shadow-set");
|
59
70
|
var handlePrimaryClick = function handlePrimaryClick(e) {
|
60
71
|
if (onPrimaryClick) {
|
@@ -66,6 +77,14 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
66
77
|
onSecondaryClick(e);
|
67
78
|
}
|
68
79
|
};
|
80
|
+
var theSecondaryIcon = useRef(secondaryIcon && pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
|
81
|
+
useEffect(function () {
|
82
|
+
if (usesExampleHook !== undefined && pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
|
83
|
+
setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
|
84
|
+
} else {
|
85
|
+
setThePrimaryButtonLabel(primaryButtonLabel);
|
86
|
+
}
|
87
|
+
}, [primaryButtonLabel, usesExampleHook, exampleUse]);
|
69
88
|
return /*#__PURE__*/React.createElement(ButtonSet, _extends({}, rest, {
|
70
89
|
className: cx(blockClass,
|
71
90
|
// Apply the block class to the main HTML element
|
@@ -78,6 +97,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
78
97
|
className: "".concat(blockClass, "__secondary-button"),
|
79
98
|
kind: secondaryKind,
|
80
99
|
onClick: handleSecondaryClick,
|
100
|
+
renderIcon: theSecondaryIcon.current,
|
81
101
|
disabled: disabled,
|
82
102
|
size: size
|
83
103
|
}, secondaryButtonLabel), /*#__PURE__*/React.createElement(Button, {
|
@@ -86,7 +106,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
86
106
|
onClick: handlePrimaryClick,
|
87
107
|
disabled: disabled,
|
88
108
|
size: size
|
89
|
-
},
|
109
|
+
}, thePrimaryButtonLabel));
|
90
110
|
});
|
91
111
|
|
92
112
|
// Return a placeholder if not released and not enabled by feature flag.
|
@@ -136,6 +156,10 @@ ExampleComponent.propTypes = {
|
|
136
156
|
* The secondary button label.
|
137
157
|
*/
|
138
158
|
secondaryButtonLabel: PropTypes.string.isRequired,
|
159
|
+
/**
|
160
|
+
* The icon to use for the secondary button.
|
161
|
+
*/
|
162
|
+
secondaryIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
139
163
|
/**
|
140
164
|
* The kind of button for the secondary button ('secondary' or 'tertiary').
|
141
165
|
*/
|
@@ -147,5 +171,9 @@ ExampleComponent.propTypes = {
|
|
147
171
|
/**
|
148
172
|
* Optional style settings for the containing node.
|
149
173
|
*/
|
150
|
-
style: PropTypes.object
|
174
|
+
style: PropTypes.object,
|
175
|
+
/**
|
176
|
+
* Hook example timeout (in seconds) or undefined
|
177
|
+
*/
|
178
|
+
usesExampleHook: PropTypes.number
|
151
179
|
};
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
/**
|
3
|
+
* Copyright IBM Corp. 2020, 2021
|
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 { useState, useEffect } from 'react';
|
9
|
+
import { pkg } from '../../settings';
|
10
|
+
var useExample = function useExample(initialTime) {
|
11
|
+
// NOTE: hooks cannot be called conditionally.
|
12
|
+
//
|
13
|
+
// ** If the hook uses other hooks then they must be called,
|
14
|
+
// ** this could lead to unexpected behavior.
|
15
|
+
// ** As some hooks may still be called even if the condition is false.
|
16
|
+
|
17
|
+
var _useState = useState(
|
18
|
+
// Disable hook in a safe way if possible, else use despite feature disabled.
|
19
|
+
// Either a console error or warning will be logged.
|
20
|
+
initialTime),
|
21
|
+
_useState2 = _slicedToArray(_useState, 2),
|
22
|
+
time = _useState2[0],
|
23
|
+
setTime = _useState2[1];
|
24
|
+
|
25
|
+
// Use of the feature flag to
|
26
|
+
var feature = 'ExampleComponent.useExample';
|
27
|
+
var tryFeature = initialTime !== undefined;
|
28
|
+
var featureEnabled = tryFeature && pkg.checkReportFeatureEnabled(feature);
|
29
|
+
if (tryFeature && !featureEnabled) {
|
30
|
+
// Output a useful message if the feature is disabled.
|
31
|
+
console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
|
32
|
+
}
|
33
|
+
|
34
|
+
// Actual hook is code is below
|
35
|
+
useEffect(function () {
|
36
|
+
if (!featureEnabled) {
|
37
|
+
return;
|
38
|
+
}
|
39
|
+
|
40
|
+
// turn off all or part of the feature
|
41
|
+
if (time > 0) {
|
42
|
+
setTimeout(function () {
|
43
|
+
setTime(Math.max(0, time - 0.1));
|
44
|
+
}, 100);
|
45
|
+
}
|
46
|
+
}, [featureEnabled, time]);
|
47
|
+
return [time];
|
48
|
+
};
|
49
|
+
export default useExample;
|
@@ -35,8 +35,12 @@ export var InlineEdit = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
35
35
|
}
|
36
36
|
return /*#__PURE__*/React.createElement(InlineEditV1, props);
|
37
37
|
});
|
38
|
-
InlineEdit =
|
38
|
+
InlineEdit.deprecated = {
|
39
|
+
details: "The InlineEdit component is being renamed to EditInPlace in the next major version of @carbon/ibm-products. You can prepare by updating your usage of InlineEdit to EditInPlace.",
|
40
|
+
level: 'warn'
|
41
|
+
};
|
39
42
|
InlineEdit.displayName = componentName;
|
43
|
+
InlineEdit = pkg.checkComponentEnabled(InlineEdit, componentName);
|
40
44
|
InlineEdit.propTypes = {
|
41
45
|
v2: PropTypes.bool
|
42
46
|
};
|
@@ -18,7 +18,6 @@ import React, { useRef, useState } from 'react';
|
|
18
18
|
import PropTypes from 'prop-types';
|
19
19
|
import cx from 'classnames';
|
20
20
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
21
|
-
import pconsole from '../../global/js/utils/pconsole';
|
22
21
|
import { pkg, carbon } from '../../settings';
|
23
22
|
|
24
23
|
// Carbon and package components we use.
|
@@ -83,7 +82,6 @@ export var InlineEditV1 = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
83
82
|
var showValidation = invalid; // || warn;
|
84
83
|
var validationText = invalidText; // || warnText;
|
85
84
|
var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled16, null) : null;
|
86
|
-
pconsole.warn("".concat(componentName, ": the v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."));
|
87
85
|
|
88
86
|
// sanitize the tooltip values
|
89
87
|
var alignIsObject = _typeof(buttonTooltipAlignment) === 'object';
|
@@ -304,6 +302,13 @@ export var InlineEditV1 = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
304
302
|
// The display name of the component, used by React. Note that displayName
|
305
303
|
// is used in preference to relying on function.name.
|
306
304
|
InlineEditV1.displayName = componentName;
|
305
|
+
InlineEditV1.deprecated = {
|
306
|
+
level: 'warn',
|
307
|
+
details: "The v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."
|
308
|
+
};
|
309
|
+
|
310
|
+
// needed to show deprecation message but based on host component name
|
311
|
+
InlineEditV1 = pkg.checkComponentEnabled(InlineEditV1, 'InlineEdit');
|
307
312
|
|
308
313
|
// The types and DocGen commentary for the component props,
|
309
314
|
// in alphabetical order (for consistency).
|
@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
-
var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "value"];
|
5
|
+
var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "size", "saveLabel", "value"];
|
6
|
+
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; }
|
7
|
+
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; }
|
6
8
|
/**
|
7
9
|
* Copyright IBM Corp. 2022, 2022
|
8
10
|
*
|
@@ -21,17 +23,25 @@ import { pkg, carbon } from '../../settings';
|
|
21
23
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
22
24
|
var componentName = 'InlineEditV2';
|
23
25
|
var blockClass = "".concat(pkg.prefix, "--inline-edit-v2");
|
26
|
+
var defaults = {
|
27
|
+
size: 'sm'
|
28
|
+
};
|
24
29
|
export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
25
30
|
var _cx;
|
26
31
|
var cancelLabel = _ref.cancelLabel,
|
32
|
+
editAlwaysVisible = _ref.editAlwaysVisible,
|
27
33
|
editLabel = _ref.editLabel,
|
28
34
|
id = _ref.id,
|
35
|
+
inheritTypography = _ref.inheritTypography,
|
29
36
|
invalid = _ref.invalid,
|
30
|
-
|
37
|
+
deprecated_invalidLabel = _ref.invalidLabel,
|
38
|
+
invalidText = _ref.invalidText,
|
31
39
|
labelText = _ref.labelText,
|
32
40
|
onCancel = _ref.onCancel,
|
33
41
|
onChange = _ref.onChange,
|
34
42
|
onSave = _ref.onSave,
|
43
|
+
_ref$size = _ref.size,
|
44
|
+
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
35
45
|
saveLabel = _ref.saveLabel,
|
36
46
|
value = _ref.value,
|
37
47
|
rest = _objectWithoutProperties(_ref, _excluded);
|
@@ -129,7 +139,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
129
139
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
130
140
|
ref: ref
|
131
141
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
|
132
|
-
className: cx(blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
|
142
|
+
className: cx(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _defineProperty(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), _defineProperty(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
|
133
143
|
onFocus: onFocusHandler,
|
134
144
|
onBlur: onBlurHandler
|
135
145
|
}, /*#__PURE__*/React.createElement("label", {
|
@@ -137,7 +147,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
137
147
|
htmlFor: id
|
138
148
|
}, labelText), /*#__PURE__*/React.createElement("input", {
|
139
149
|
id: id,
|
140
|
-
className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--
|
150
|
+
className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--").concat(size)),
|
141
151
|
type: "text",
|
142
152
|
value: value,
|
143
153
|
onChange: onChangeHandler,
|
@@ -146,13 +156,16 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
146
156
|
,
|
147
157
|
onKeyDown: onKeyHandler
|
148
158
|
}), /*#__PURE__*/React.createElement("div", {
|
159
|
+
className: "".concat(blockClass, "__ellipsis"),
|
160
|
+
"aria-hidden": !focused
|
161
|
+
}, "\u2026"), /*#__PURE__*/React.createElement("div", {
|
149
162
|
className: "".concat(blockClass, "__toolbar")
|
150
|
-
},
|
163
|
+
}, invalid && /*#__PURE__*/React.createElement(WarningFilled16, {
|
151
164
|
className: "".concat(blockClass, "__warning-icon")
|
152
|
-
}), /*#__PURE__*/React.createElement(Button, {
|
165
|
+
}), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
153
166
|
hasIconOnly: true,
|
154
167
|
renderIcon: Close24,
|
155
|
-
size:
|
168
|
+
size: size,
|
156
169
|
iconDescription: cancelLabel,
|
157
170
|
onClick: onCancelHandler,
|
158
171
|
kind: "ghost",
|
@@ -162,7 +175,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
162
175
|
}), /*#__PURE__*/React.createElement(Button, {
|
163
176
|
hasIconOnly: true,
|
164
177
|
renderIcon: Checkmark24,
|
165
|
-
size:
|
178
|
+
size: size,
|
166
179
|
iconDescription: saveLabel,
|
167
180
|
onClick: onSaveHandler,
|
168
181
|
kind: "ghost",
|
@@ -171,12 +184,12 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
171
184
|
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
|
172
185
|
disabled: !canSave
|
173
186
|
})) : /*#__PURE__*/React.createElement(Button, {
|
174
|
-
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
|
187
|
+
className: cx("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), _defineProperty({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
|
175
188
|
hasIconOnly: true
|
176
189
|
// renderIcon={readOnly ? EditOff24 : Edit24}
|
177
190
|
,
|
178
191
|
renderIcon: Edit24,
|
179
|
-
size:
|
192
|
+
size: size
|
180
193
|
// iconDescription={readOnly ? readOnlyLabel : editLabel}
|
181
194
|
,
|
182
195
|
iconDescription: editLabel,
|
@@ -184,16 +197,27 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
184
197
|
kind: "ghost",
|
185
198
|
tabIndex: 0,
|
186
199
|
key: "edit"
|
187
|
-
}))),
|
200
|
+
}))), invalid && /*#__PURE__*/React.createElement("p", {
|
188
201
|
className: "".concat(blockClass, "__warning-text")
|
189
|
-
},
|
202
|
+
}, invalidText !== null && invalidText !== void 0 ? invalidText : deprecated_invalidLabel));
|
190
203
|
});
|
191
204
|
InlineEditV2.displayName = componentName;
|
192
|
-
|
205
|
+
export var deprecatedProps = {
|
206
|
+
/**
|
207
|
+
* **Deprecated**
|
208
|
+
* invalidLabel was misnamed, using invalidText to match Carbon
|
209
|
+
*/
|
210
|
+
invalidText: PropTypes.string
|
211
|
+
};
|
212
|
+
InlineEditV2.propTypes = _objectSpread({
|
193
213
|
/**
|
194
214
|
* label for cancel button
|
195
215
|
*/
|
196
216
|
cancelLabel: PropTypes.string.isRequired,
|
217
|
+
/**
|
218
|
+
* By default the edit icon is shown on hover only.
|
219
|
+
*/
|
220
|
+
editAlwaysVisible: PropTypes.bool,
|
197
221
|
/**
|
198
222
|
* label for edit button
|
199
223
|
*/
|
@@ -202,6 +226,14 @@ InlineEditV2.propTypes = {
|
|
202
226
|
* Specify a custom id for the input
|
203
227
|
*/
|
204
228
|
id: PropTypes.string.isRequired,
|
229
|
+
/**
|
230
|
+
* inheritTypography - causes the text entry field to inherit typography settings
|
231
|
+
* assigned to the container. This is useful when editing titles for instance.
|
232
|
+
*
|
233
|
+
* NOTE: The size property limits the vertical size of the input element.
|
234
|
+
* Inherited font's should be selected to fit within the size selected.
|
235
|
+
*/
|
236
|
+
inheritTypography: PropTypes.bool,
|
205
237
|
/**
|
206
238
|
* determines if the input is invalid
|
207
239
|
*/
|
@@ -209,7 +241,7 @@ InlineEditV2.propTypes = {
|
|
209
241
|
/**
|
210
242
|
* text that is displayed if the input is invalid
|
211
243
|
*/
|
212
|
-
|
244
|
+
invalidText: PropTypes.string,
|
213
245
|
/**
|
214
246
|
* Provide the text that will be read by a screen reader when visiting this control
|
215
247
|
*/
|
@@ -238,11 +270,15 @@ InlineEditV2.propTypes = {
|
|
238
270
|
* label for save button
|
239
271
|
*/
|
240
272
|
saveLabel: PropTypes.string.isRequired,
|
273
|
+
/**
|
274
|
+
* vertical size of control
|
275
|
+
*/
|
276
|
+
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
241
277
|
/**
|
242
278
|
* current value of the input
|
243
279
|
*/
|
244
280
|
value: PropTypes.string.isRequired
|
245
|
-
};
|
281
|
+
}, deprecatedProps);
|
246
282
|
InlineEditV2.defaultProps = {
|
247
283
|
invalid: false,
|
248
284
|
invalidLabel: ''
|
@@ -12,7 +12,7 @@ var _excluded = ["children", "className", "definition", "theme"];
|
|
12
12
|
import React, { useState } from 'react';
|
13
13
|
import PropTypes from 'prop-types';
|
14
14
|
import cx from 'classnames';
|
15
|
-
import {
|
15
|
+
import { ChevronDown16 } from '@carbon/icons-react';
|
16
16
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
17
17
|
import { pkg } from '../../settings';
|
18
18
|
|
@@ -47,16 +47,16 @@ export var NonLinearReading = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
47
47
|
});
|
48
48
|
};
|
49
49
|
return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
|
50
|
-
className: cx(blockClass, className),
|
50
|
+
className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
|
51
51
|
ref: ref,
|
52
52
|
role: "main"
|
53
53
|
}, getDevtoolsProps(componentName)), ' ', /*#__PURE__*/React.createElement("button", {
|
54
54
|
type: "button",
|
55
55
|
"aria-expanded": isOpen,
|
56
|
-
className: cx("".concat(blockClass, "
|
56
|
+
className: cx("".concat(blockClass, "__keyword"), [isOpen ? ["".concat(blockClass, "__keyword-open")] : ["".concat(blockClass, "__keyword-closed")]]),
|
57
57
|
onClick: handleToggle
|
58
|
-
}, children,
|
59
|
-
className: "".concat(blockClass, "
|
58
|
+
}, children, /*#__PURE__*/React.createElement(ChevronDown16, null)), ' ', isOpen && /*#__PURE__*/React.createElement("span", {
|
59
|
+
className: "".concat(blockClass, "__body")
|
60
60
|
}, definition), ' ');
|
61
61
|
});
|
62
62
|
|
@@ -69,7 +69,7 @@ NonLinearReading.displayName = componentName;
|
|
69
69
|
// See https://www.npmjs.com/package/prop-types#usage.
|
70
70
|
NonLinearReading.propTypes = {
|
71
71
|
/**
|
72
|
-
* The
|
72
|
+
* The keyword of the component appears as a pill.
|
73
73
|
*/
|
74
74
|
children: PropTypes.node.isRequired,
|
75
75
|
/**
|
@@ -77,7 +77,7 @@ NonLinearReading.propTypes = {
|
|
77
77
|
*/
|
78
78
|
className: PropTypes.string,
|
79
79
|
/**
|
80
|
-
* The content that appears when the
|
80
|
+
* The content that appears when the keyword is toggled open.
|
81
81
|
*/
|
82
82
|
definition: PropTypes.node.isRequired,
|
83
83
|
/**
|
@@ -16,7 +16,7 @@ import React, { useEffect, useRef, useState } from 'react';
|
|
16
16
|
import PropTypes from 'prop-types';
|
17
17
|
import { layout05, baseFontSize } from '@carbon/layout';
|
18
18
|
import cx from 'classnames';
|
19
|
-
import {
|
19
|
+
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
|
20
20
|
import { Grid, Column, Row, Button, Tag } from 'carbon-components-react';
|
21
21
|
import { breakpoints } from '@carbon/layout';
|
22
22
|
import { useWindowResize, useNearestScroll } from '../../global/js/hooks';
|
@@ -38,7 +38,7 @@ var defaults = {
|
|
38
38
|
narrowGrid: false
|
39
39
|
};
|
40
40
|
export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
41
|
-
var _withoutBackground, _enableBreadcrumbScro,
|
41
|
+
var _withoutBackground, _enableBreadcrumbScro, _ref7, _cx2, _ref8, _cx4, _cx7;
|
42
42
|
var actionBarItems = _ref.actionBarItems,
|
43
43
|
actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
|
44
44
|
actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
|
@@ -175,7 +175,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
175
175
|
};
|
176
176
|
|
177
177
|
/* istanbul ignore next */
|
178
|
-
var handleResizeActionBarColumn = function handleResizeActionBarColumn(
|
178
|
+
var handleResizeActionBarColumn = function handleResizeActionBarColumn(_ref4) {
|
179
|
+
var width = _ref4.width;
|
179
180
|
/* don't know how to test resize */
|
180
181
|
/* istanbul ignore next */
|
181
182
|
setActionBarColumnWidth(width);
|
@@ -249,8 +250,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
249
250
|
useNearestScroll(headerRef,
|
250
251
|
// on scroll or various layout changes check updates if needed
|
251
252
|
// istanbul ignore next
|
252
|
-
function (
|
253
|
-
var current =
|
253
|
+
function (_ref5) {
|
254
|
+
var current = _ref5.current;
|
254
255
|
setPageHeaderStyles(function (prev) {
|
255
256
|
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
|
256
257
|
});
|
@@ -266,8 +267,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
266
267
|
document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
|
267
268
|
setScrollYValue(current.scrollY);
|
268
269
|
}, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
|
269
|
-
useWindowResize(function (
|
270
|
-
var current =
|
270
|
+
useWindowResize(function (_ref6) {
|
271
|
+
var current = _ref6.current;
|
271
272
|
// on window resize and other updates some values may have changed
|
272
273
|
checkUpdateVerticalSpace();
|
273
274
|
setWidthIsNarrow(current.innerWidth / 16 < parseInt(breakpoints.md.width)); // small (below medium) media query
|
@@ -313,15 +314,11 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
313
314
|
utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
|
314
315
|
}
|
315
316
|
}, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
|
316
|
-
|
317
|
-
|
318
|
-
targetRef: sizingContainerRef,
|
319
|
-
handleWidth: true
|
317
|
+
useResizeObserver(sizingContainerRef, {
|
318
|
+
callback: handleResizeActionBarColumn
|
320
319
|
});
|
321
|
-
|
322
|
-
|
323
|
-
targetRef: headerRef,
|
324
|
-
handleHeight: true
|
320
|
+
useResizeObserver(headerRef, {
|
321
|
+
callback: handleResize
|
325
322
|
});
|
326
323
|
|
327
324
|
// Determine what form of title to display in the breadcrumb
|
@@ -330,7 +327,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
330
327
|
className: "".concat(blockClass, "--offset-top-measuring-element"),
|
331
328
|
ref: offsetTopMeasuringRef
|
332
329
|
}), /*#__PURE__*/React.createElement("section", _extends({}, rest, {
|
333
|
-
className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (
|
330
|
+
className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref7, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
|
334
331
|
style: pageHeaderStyles,
|
335
332
|
ref: headerRef
|
336
333
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Grid, {
|
@@ -351,7 +348,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
351
348
|
overflowAriaLabel: breadcrumbOverflowAriaLabel,
|
352
349
|
breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
|
353
350
|
}) : null), /*#__PURE__*/React.createElement(Column, {
|
354
|
-
className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (
|
351
|
+
className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref8 = {}, _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
|
355
352
|
}, /*#__PURE__*/React.createElement("div", {
|
356
353
|
className: "".concat(blockClass, "__action-bar-column-content"),
|
357
354
|
ref: sizingContainerRef
|
@@ -500,8 +497,8 @@ PageHeader.propTypes = _objectSpread({
|
|
500
497
|
*
|
501
498
|
* NOTE: This prop is required if actionBarItems are supplied
|
502
499
|
*/
|
503
|
-
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (
|
504
|
-
var actionBarItems =
|
500
|
+
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref10) {
|
501
|
+
var actionBarItems = _ref10.actionBarItems;
|
505
502
|
return actionBarItems && actionBarItems.length > 0;
|
506
503
|
}),
|
507
504
|
/**
|
@@ -532,8 +529,8 @@ PageHeader.propTypes = _objectSpread({
|
|
532
529
|
* If the user supplies breadcrumbs then this property is required.
|
533
530
|
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
|
534
531
|
*/
|
535
|
-
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (
|
536
|
-
var breadcrumbs =
|
532
|
+
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref11) {
|
533
|
+
var breadcrumbs = _ref11.breadcrumbs;
|
537
534
|
return breadcrumbs && breadcrumbs.length > 0;
|
538
535
|
}),
|
539
536
|
/**
|
@@ -567,8 +564,8 @@ PageHeader.propTypes = _objectSpread({
|
|
567
564
|
/**
|
568
565
|
* A text version of the `label` for display, required if `label` is not a string.
|
569
566
|
*/
|
570
|
-
title: PropTypes.string.isRequired.if(function (
|
571
|
-
var label =
|
567
|
+
title: PropTypes.string.isRequired.if(function (_ref12) {
|
568
|
+
var label = _ref12.label;
|
572
569
|
return typeof label !== 'string';
|
573
570
|
})
|
574
571
|
})),
|
@@ -594,9 +591,9 @@ PageHeader.propTypes = _objectSpread({
|
|
594
591
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
595
592
|
* required for both the expend and collapse states of the button component used.
|
596
593
|
*/
|
597
|
-
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (
|
598
|
-
var withoutBackground =
|
599
|
-
hasCollapseHeaderToggle =
|
594
|
+
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref13) {
|
595
|
+
var withoutBackground = _ref13.withoutBackground,
|
596
|
+
hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
|
600
597
|
return !withoutBackground && hasCollapseHeaderToggle;
|
601
598
|
}),
|
602
599
|
/**
|
@@ -613,9 +610,9 @@ PageHeader.propTypes = _objectSpread({
|
|
613
610
|
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
614
611
|
* required for both the expend and collapse states of the button component used.
|
615
612
|
*/
|
616
|
-
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (
|
617
|
-
var withoutBackground =
|
618
|
-
hasCollapseHeaderToggle =
|
613
|
+
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref14) {
|
614
|
+
var withoutBackground = _ref14.withoutBackground,
|
615
|
+
hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
|
619
616
|
return !withoutBackground && hasCollapseHeaderToggle;
|
620
617
|
}),
|
621
618
|
/**
|
@@ -679,8 +676,8 @@ PageHeader.propTypes = _objectSpread({
|
|
679
676
|
*
|
680
677
|
* NOTE: This prop is required if pageActions are supplied
|
681
678
|
*/
|
682
|
-
pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (
|
683
|
-
var pageActions =
|
679
|
+
pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref15) {
|
680
|
+
var pageActions = _ref15.pageActions;
|
684
681
|
return pageActions && pageActions.length > 0 && !pageActions.content;
|
685
682
|
}),
|
686
683
|
/**
|