@carbon/ibm-products 1.35.0 → 1.35.1
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/es/components/CreateTearsheet/CreateTearsheet.js +7 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/PageHeader/PageHeader.js +3 -3
- package/es/global/js/hooks/useResetCreateComponent.js +6 -2
- package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
- package/lib/components/CreateTearsheet/CreateTearsheet.js +7 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/PageHeader/PageHeader.js +3 -3
- package/lib/global/js/hooks/useResetCreateComponent.js +6 -2
- package/lib/global/js/utils/getNumberOfHiddenSteps.js +26 -0
- package/package.json +2 -2
@@ -20,6 +20,7 @@ import { pkg } from '../../settings';
|
|
20
20
|
import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
|
21
21
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
22
22
|
import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
|
23
|
+
import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
|
23
24
|
var componentName = 'CreateTearsheet';
|
24
25
|
var blockClass = "".concat(pkg.prefix, "--tearsheet-create");
|
25
26
|
|
@@ -112,7 +113,11 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
112
113
|
if (lastItem !== lastIncludedStep) {
|
113
114
|
setLastIncludedStep(lastItem);
|
114
115
|
}
|
115
|
-
|
116
|
+
if (open && initialStep) {
|
117
|
+
var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
|
118
|
+
setCurrentStep(initialStep + numberOfHiddenSteps);
|
119
|
+
}
|
120
|
+
}, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
|
116
121
|
useCreateComponentFocus({
|
117
122
|
previousState: previousState,
|
118
123
|
currentStep: currentStep,
|
@@ -125,6 +130,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
125
130
|
previousState: previousState,
|
126
131
|
open: open,
|
127
132
|
setCurrentStep: setCurrentStep,
|
133
|
+
stepData: stepData,
|
128
134
|
initialStep: initialStep,
|
129
135
|
totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
|
130
136
|
componentName: componentName
|
@@ -116,7 +116,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
116
116
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
117
117
|
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
|
118
118
|
ref: multiKeyTrackingRef
|
119
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination
|
119
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
|
120
120
|
instance: datagridState
|
121
121
|
}));
|
122
122
|
};
|
@@ -270,7 +270,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
270
270
|
var current = _ref5.current;
|
271
271
|
// on window resize and other updates some values may have changed
|
272
272
|
checkUpdateVerticalSpace();
|
273
|
-
setWidthIsNarrow(current.innerWidth < breakpoints.md.width); // small (below medium) media query
|
273
|
+
setWidthIsNarrow(current.innerWidth / 16 < parseInt(breakpoints.md.width)); // small (below medium) media query
|
274
274
|
}, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
|
275
275
|
useEffect(function () {
|
276
276
|
checkUpdateVerticalSpace();
|
@@ -309,7 +309,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
309
309
|
return enableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
|
310
310
|
};
|
311
311
|
useEffect(function () {
|
312
|
-
if (
|
312
|
+
if (collapseHeader === true) {
|
313
313
|
utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
|
314
314
|
}
|
315
315
|
}, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
|
@@ -443,7 +443,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
443
443
|
onWidthChange: handleWidthChange,
|
444
444
|
buttons: pageActions,
|
445
445
|
buttonSetOverflowLabel: pageActionsOverflowLabel,
|
446
|
-
rightAlign:
|
446
|
+
rightAlign: !widthIsNarrow
|
447
447
|
})));
|
448
448
|
}
|
449
449
|
}
|
@@ -6,6 +6,7 @@
|
|
6
6
|
*/
|
7
7
|
|
8
8
|
import { useEffect } from 'react';
|
9
|
+
import { getNumberOfHiddenSteps } from '../utils/getNumberOfHiddenSteps';
|
9
10
|
|
10
11
|
/**
|
11
12
|
* Resets the current step of the create component if it has been closed.
|
@@ -14,6 +15,7 @@ import { useEffect } from 'react';
|
|
14
15
|
* @param {object} useResetCreateComponent.previousState
|
15
16
|
* @param {boolean} useResetCreateComponent.open
|
16
17
|
* @param {Function} useResetCreateComponent.setCurrentStep
|
18
|
+
* @param {object} useResetCreateComponent.stepData
|
17
19
|
* @param {number} useResetCreateComponent.initialStep
|
18
20
|
* @param {number} useResetCreateComponent.totalSteps
|
19
21
|
* @param {string} useResetCreateComponent.componentName
|
@@ -23,13 +25,15 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
23
25
|
previousState = _ref.previousState,
|
24
26
|
open = _ref.open,
|
25
27
|
setCurrentStep = _ref.setCurrentStep,
|
28
|
+
stepData = _ref.stepData,
|
26
29
|
initialStep = _ref.initialStep,
|
27
30
|
totalSteps = _ref.totalSteps,
|
28
31
|
componentName = _ref.componentName;
|
29
32
|
useEffect(function () {
|
30
33
|
if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
|
31
34
|
if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
|
32
|
-
|
35
|
+
var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
|
36
|
+
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
33
37
|
} else {
|
34
38
|
// default should be fist includedStep instead of just 1
|
35
39
|
setCurrentStep(firstIncludedStep);
|
@@ -40,5 +44,5 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
40
44
|
console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
|
41
45
|
}
|
42
46
|
}
|
43
|
-
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
|
47
|
+
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName, stepData]);
|
44
48
|
};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 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
|
+
export var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
|
9
|
+
var numberOfHiddenSteps = 0;
|
10
|
+
stepData.forEach(function (step, stepIndex) {
|
11
|
+
if (stepIndex + 1 > initialStep) {
|
12
|
+
return;
|
13
|
+
}
|
14
|
+
if (step.shouldIncludeStep === false) {
|
15
|
+
numberOfHiddenSteps += 1;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
return numberOfHiddenSteps;
|
19
|
+
};
|
@@ -20,6 +20,7 @@ var _settings = require("../../settings");
|
|
20
20
|
var _hooks = require("../../global/js/hooks");
|
21
21
|
var _devtools = require("../../global/js/utils/devtools");
|
22
22
|
var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
|
23
|
+
var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
|
23
24
|
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
|
24
25
|
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); }
|
25
26
|
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; }
|
@@ -117,7 +118,11 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
117
118
|
if (lastItem !== lastIncludedStep) {
|
118
119
|
setLastIncludedStep(lastItem);
|
119
120
|
}
|
120
|
-
|
121
|
+
if (open && initialStep) {
|
122
|
+
var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
|
123
|
+
setCurrentStep(initialStep + numberOfHiddenSteps);
|
124
|
+
}
|
125
|
+
}, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
|
121
126
|
(0, _hooks.useCreateComponentFocus)({
|
122
127
|
previousState: previousState,
|
123
128
|
currentStep: currentStep,
|
@@ -130,6 +135,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
130
135
|
previousState: previousState,
|
131
136
|
open: open,
|
132
137
|
setCurrentStep: setCurrentStep,
|
138
|
+
stepData: stepData,
|
133
139
|
initialStep: initialStep,
|
134
140
|
totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
|
135
141
|
componentName: componentName
|
@@ -126,7 +126,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
126
126
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
127
127
|
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
|
128
128
|
ref: multiKeyTrackingRef
|
129
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination
|
129
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
|
130
130
|
instance: datagridState
|
131
131
|
}));
|
132
132
|
};
|
@@ -271,7 +271,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
271
271
|
var current = _ref5.current;
|
272
272
|
// on window resize and other updates some values may have changed
|
273
273
|
checkUpdateVerticalSpace();
|
274
|
-
setWidthIsNarrow(current.innerWidth < _layout.breakpoints.md.width); // small (below medium) media query
|
274
|
+
setWidthIsNarrow(current.innerWidth / 16 < parseInt(_layout.breakpoints.md.width)); // small (below medium) media query
|
275
275
|
}, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
|
276
276
|
(0, _react.useEffect)(function () {
|
277
277
|
checkUpdateVerticalSpace();
|
@@ -310,7 +310,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
310
310
|
return enableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
|
311
311
|
};
|
312
312
|
(0, _react.useEffect)(function () {
|
313
|
-
if (
|
313
|
+
if (collapseHeader === true) {
|
314
314
|
(0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
|
315
315
|
}
|
316
316
|
}, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
|
@@ -444,7 +444,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
444
444
|
onWidthChange: handleWidthChange,
|
445
445
|
buttons: pageActions,
|
446
446
|
buttonSetOverflowLabel: pageActionsOverflowLabel,
|
447
|
-
rightAlign:
|
447
|
+
rightAlign: !widthIsNarrow
|
448
448
|
})));
|
449
449
|
}
|
450
450
|
}
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useResetCreateComponent = void 0;
|
7
7
|
var _react = require("react");
|
8
|
+
var _getNumberOfHiddenSteps = require("../utils/getNumberOfHiddenSteps");
|
8
9
|
/**
|
9
10
|
* Copyright IBM Corp. 2021, 2022
|
10
11
|
*
|
@@ -19,6 +20,7 @@ var _react = require("react");
|
|
19
20
|
* @param {object} useResetCreateComponent.previousState
|
20
21
|
* @param {boolean} useResetCreateComponent.open
|
21
22
|
* @param {Function} useResetCreateComponent.setCurrentStep
|
23
|
+
* @param {object} useResetCreateComponent.stepData
|
22
24
|
* @param {number} useResetCreateComponent.initialStep
|
23
25
|
* @param {number} useResetCreateComponent.totalSteps
|
24
26
|
* @param {string} useResetCreateComponent.componentName
|
@@ -28,13 +30,15 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
28
30
|
previousState = _ref.previousState,
|
29
31
|
open = _ref.open,
|
30
32
|
setCurrentStep = _ref.setCurrentStep,
|
33
|
+
stepData = _ref.stepData,
|
31
34
|
initialStep = _ref.initialStep,
|
32
35
|
totalSteps = _ref.totalSteps,
|
33
36
|
componentName = _ref.componentName;
|
34
37
|
(0, _react.useEffect)(function () {
|
35
38
|
if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
|
36
39
|
if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
|
37
|
-
|
40
|
+
var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
|
41
|
+
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
38
42
|
} else {
|
39
43
|
// default should be fist includedStep instead of just 1
|
40
44
|
setCurrentStep(firstIncludedStep);
|
@@ -45,6 +49,6 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
45
49
|
console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
|
46
50
|
}
|
47
51
|
}
|
48
|
-
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
|
52
|
+
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName, stepData]);
|
49
53
|
};
|
50
54
|
exports.useResetCreateComponent = useResetCreateComponent;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getNumberOfHiddenSteps = void 0;
|
7
|
+
/**
|
8
|
+
* Copyright IBM Corp. 2022, 2022
|
9
|
+
*
|
10
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
12
|
+
*/
|
13
|
+
|
14
|
+
var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
|
15
|
+
var numberOfHiddenSteps = 0;
|
16
|
+
stepData.forEach(function (step, stepIndex) {
|
17
|
+
if (stepIndex + 1 > initialStep) {
|
18
|
+
return;
|
19
|
+
}
|
20
|
+
if (step.shouldIncludeStep === false) {
|
21
|
+
numberOfHiddenSteps += 1;
|
22
|
+
}
|
23
|
+
});
|
24
|
+
return numberOfHiddenSteps;
|
25
|
+
};
|
26
|
+
exports.getNumberOfHiddenSteps = getNumberOfHiddenSteps;
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "1.35.
|
4
|
+
"version": "1.35.1",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -95,5 +95,5 @@
|
|
95
95
|
"react": "^16.8.6 || ^17.0.1",
|
96
96
|
"react-dom": "^16.8.6 || ^17.0.1"
|
97
97
|
},
|
98
|
-
"gitHead": "
|
98
|
+
"gitHead": "fc83f9206790480bfdb2a6cf5b7c26e7f7f4fb37"
|
99
99
|
}
|