@carbon/ibm-products 2.41.0 → 2.41.1-canary.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React__default, { forwardRef, useContext, useState, useEffect, isValidElement } from 'react';
|
|
9
|
+
import React__default, { forwardRef, useRef, useContext, useState, useEffect, isValidElement } from 'react';
|
|
10
10
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { Grid, Column, FormGroup } from '@carbon/react';
|
|
@@ -44,6 +44,9 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
44
44
|
subtitle = _ref.subtitle,
|
|
45
45
|
title = _ref.title,
|
|
46
46
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
47
|
+
var localRef = useRef(null);
|
|
48
|
+
var stepRef = ref || localRef;
|
|
49
|
+
var stepRefValue = stepRef.current;
|
|
47
50
|
var stepsContext = useContext(StepsContext);
|
|
48
51
|
var stepNumber = useContext(StepNumberContext);
|
|
49
52
|
var _useState = useState(includeStep),
|
|
@@ -75,16 +78,36 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
75
78
|
useEffect(function () {
|
|
76
79
|
setShouldIncludeStep(includeStep);
|
|
77
80
|
}, [includeStep, stepsContext, title]);
|
|
81
|
+
var setFocusChildrenTabIndex = function setFocusChildrenTabIndex(childInputs, value) {
|
|
82
|
+
if (childInputs !== null && childInputs !== void 0 && childInputs.length) {
|
|
83
|
+
childInputs.forEach(function (child) {
|
|
84
|
+
child.tabIndex = value;
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
};
|
|
78
88
|
|
|
79
89
|
// Whenever we are the current step, supply our disableSubmit and onNext values to the
|
|
80
90
|
// steps container context so that it can manage the 'Next' button appropriately.
|
|
81
91
|
useEffect(function () {
|
|
92
|
+
var focusElementQuery = "button, input, select, textarea, a";
|
|
93
|
+
if (stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
|
94
|
+
// Specify tab-index -1 for focusable elements not contained
|
|
95
|
+
// in the current step so that the useFocus hook can exclude
|
|
96
|
+
// from the focus trap
|
|
97
|
+
var childInputs = stepRefValue === null || stepRefValue === void 0 ? void 0 : stepRefValue.querySelectorAll(focusElementQuery);
|
|
98
|
+
setFocusChildrenTabIndex(childInputs, -1);
|
|
99
|
+
}
|
|
82
100
|
if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
|
101
|
+
// Specify tab-index 0 for current step focusable elements
|
|
102
|
+
// for the useFocus hook to know which elements to include
|
|
103
|
+
// in focus trap
|
|
104
|
+
var _childInputs = stepRefValue === null || stepRefValue === void 0 ? void 0 : stepRefValue.querySelectorAll(focusElementQuery);
|
|
105
|
+
setFocusChildrenTabIndex(_childInputs, 0);
|
|
83
106
|
stepsContext.setIsDisabled(!!disableSubmit);
|
|
84
107
|
stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
|
|
85
108
|
stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
|
|
86
109
|
}
|
|
87
|
-
}, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious]);
|
|
110
|
+
}, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue]);
|
|
88
111
|
var renderDescription = function renderDescription() {
|
|
89
112
|
if (description) {
|
|
90
113
|
if (typeof description === 'string') {
|
|
@@ -100,9 +123,10 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
100
123
|
}
|
|
101
124
|
return null;
|
|
102
125
|
};
|
|
103
|
-
return stepsContext ? /*#__PURE__*/React__default.createElement(
|
|
104
|
-
|
|
105
|
-
|
|
126
|
+
return stepsContext ? /*#__PURE__*/React__default.createElement("div", {
|
|
127
|
+
ref: stepRef
|
|
128
|
+
}, /*#__PURE__*/React__default.createElement(Grid, _extends({}, rest, {
|
|
129
|
+
className: cx(blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)))
|
|
106
130
|
}), /*#__PURE__*/React__default.createElement(Column, {
|
|
107
131
|
xlg: 12,
|
|
108
132
|
lg: 12,
|
|
@@ -117,7 +141,7 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
117
141
|
}, hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
|
|
118
142
|
legendText: fieldsetLegendText,
|
|
119
143
|
className: "".concat(blockClass, "--fieldset")
|
|
120
|
-
}, children) : children)) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
|
|
144
|
+
}, children) : children))) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
|
|
121
145
|
});
|
|
122
146
|
|
|
123
147
|
// Return a placeholder if not released and not enabled by feature flag
|
|
@@ -53,6 +53,9 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
|
53
53
|
subtitle = _ref.subtitle,
|
|
54
54
|
title = _ref.title,
|
|
55
55
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
56
|
+
var localRef = React.useRef(null);
|
|
57
|
+
var stepRef = ref || localRef;
|
|
58
|
+
var stepRefValue = stepRef.current;
|
|
56
59
|
var stepsContext = React.useContext(CreateTearsheet.StepsContext);
|
|
57
60
|
var stepNumber = React.useContext(CreateTearsheet.StepNumberContext);
|
|
58
61
|
var _useState = React.useState(includeStep),
|
|
@@ -84,16 +87,36 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
|
84
87
|
React.useEffect(function () {
|
|
85
88
|
setShouldIncludeStep(includeStep);
|
|
86
89
|
}, [includeStep, stepsContext, title]);
|
|
90
|
+
var setFocusChildrenTabIndex = function setFocusChildrenTabIndex(childInputs, value) {
|
|
91
|
+
if (childInputs !== null && childInputs !== void 0 && childInputs.length) {
|
|
92
|
+
childInputs.forEach(function (child) {
|
|
93
|
+
child.tabIndex = value;
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
};
|
|
87
97
|
|
|
88
98
|
// Whenever we are the current step, supply our disableSubmit and onNext values to the
|
|
89
99
|
// steps container context so that it can manage the 'Next' button appropriately.
|
|
90
100
|
React.useEffect(function () {
|
|
101
|
+
var focusElementQuery = "button, input, select, textarea, a";
|
|
102
|
+
if (stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
|
103
|
+
// Specify tab-index -1 for focusable elements not contained
|
|
104
|
+
// in the current step so that the useFocus hook can exclude
|
|
105
|
+
// from the focus trap
|
|
106
|
+
var childInputs = stepRefValue === null || stepRefValue === void 0 ? void 0 : stepRefValue.querySelectorAll(focusElementQuery);
|
|
107
|
+
setFocusChildrenTabIndex(childInputs, -1);
|
|
108
|
+
}
|
|
91
109
|
if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
|
110
|
+
// Specify tab-index 0 for current step focusable elements
|
|
111
|
+
// for the useFocus hook to know which elements to include
|
|
112
|
+
// in focus trap
|
|
113
|
+
var _childInputs = stepRefValue === null || stepRefValue === void 0 ? void 0 : stepRefValue.querySelectorAll(focusElementQuery);
|
|
114
|
+
setFocusChildrenTabIndex(_childInputs, 0);
|
|
92
115
|
stepsContext.setIsDisabled(!!disableSubmit);
|
|
93
116
|
stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
|
|
94
117
|
stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
|
|
95
118
|
}
|
|
96
|
-
}, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious]);
|
|
119
|
+
}, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue]);
|
|
97
120
|
var renderDescription = function renderDescription() {
|
|
98
121
|
if (description) {
|
|
99
122
|
if (typeof description === 'string') {
|
|
@@ -109,9 +132,10 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
|
109
132
|
}
|
|
110
133
|
return null;
|
|
111
134
|
};
|
|
112
|
-
return stepsContext ? /*#__PURE__*/React__default["default"].createElement(
|
|
113
|
-
|
|
114
|
-
|
|
135
|
+
return stepsContext ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
136
|
+
ref: stepRef
|
|
137
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.Grid, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
138
|
+
className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)))
|
|
115
139
|
}), /*#__PURE__*/React__default["default"].createElement(react.Column, {
|
|
116
140
|
xlg: 12,
|
|
117
141
|
lg: 12,
|
|
@@ -126,7 +150,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
|
126
150
|
}, hasFieldset ? /*#__PURE__*/React__default["default"].createElement(react.FormGroup, {
|
|
127
151
|
legendText: fieldsetLegendText,
|
|
128
152
|
className: "".concat(blockClass, "--fieldset")
|
|
129
|
-
}, children) : children)) : pconsole["default"].warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
|
|
153
|
+
}, children) : children))) : pconsole["default"].warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
|
|
130
154
|
});
|
|
131
155
|
|
|
132
156
|
// Return a placeholder if not released and not enabled by feature flag
|
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": "2.41.0",
|
|
4
|
+
"version": "2.41.1-canary.0+320538361",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -116,5 +116,5 @@
|
|
|
116
116
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
|
117
117
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
|
118
118
|
},
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "3205383613e470499593babf597f0a5a6b7b621d"
|
|
120
120
|
}
|