@carbon/ibm-products 2.41.0 → 2.41.1-canary.0
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.
|
@@ -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
|
}
|