@carbon/ibm-products 2.40.1-canary.9 → 2.41.1-canary.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. package/css/index-full-carbon.css +4 -4
  2. package/css/index-full-carbon.min.css +1 -1
  3. package/css/index-full-carbon.min.css.map +1 -1
  4. package/css/index-without-carbon-released-only.css +4 -4
  5. package/css/index-without-carbon-released-only.min.css +1 -1
  6. package/css/index-without-carbon-released-only.min.css.map +1 -1
  7. package/css/index-without-carbon.css +4 -4
  8. package/css/index-without-carbon.min.css +1 -1
  9. package/css/index-without-carbon.min.css.map +1 -1
  10. package/css/index.css +4 -4
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/CreateTearsheet/CreateTearsheetStep.js +30 -6
  14. package/es/components/EmptyStates/assets/NotificationsIllustration.js +1 -2
  15. package/es/components/PageHeader/PageHeader.js +1 -0
  16. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +29 -5
  17. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +1 -2
  18. package/lib/components/PageHeader/PageHeader.js +1 -0
  19. package/package.json +3 -3
  20. package/scss/components/Datagrid/styles/_useStickyColumn.scss +4 -4
package/es/components/CreateTearsheet/CreateTearsheetStep.js CHANGED
@@ -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(Grid, _extends({}, rest, {
104
- 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))),
105
- ref: ref
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
package/es/components/EmptyStates/assets/NotificationsIllustration.js CHANGED
@@ -28,8 +28,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
28
28
  width: 80,
29
29
  height: 80,
30
30
  viewBox: "0 0 80 80",
31
- className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
32
- role: "img"
31
+ className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)])
33
32
  }), /*#__PURE__*/React__default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
34
33
  id: "prefix__a_dark_".concat(svgId),
35
34
  x1: 30.05,
package/es/components/PageHeader/PageHeader.js CHANGED
@@ -27,6 +27,7 @@ import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow/ButtonSetWithOve
27
27
 
28
28
  var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
29
29
  var componentName = 'PageHeader';
30
+ pkg.component.ActionBar = true;
30
31
 
31
32
  // Default values for props
32
33
  var defaults = {
package/lib/components/CreateTearsheet/CreateTearsheetStep.js CHANGED
@@ -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(react.Grid, _rollupPluginBabelHelpers["extends"]({}, rest, {
113
- 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))),
114
- ref: ref
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/lib/components/EmptyStates/assets/NotificationsIllustration.js CHANGED
@@ -37,8 +37,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
37
37
  width: 80,
38
38
  height: 80,
39
39
  viewBox: "0 0 80 80",
40
- className: cx__default["default"](["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
41
- role: "img"
40
+ className: cx__default["default"](["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)])
42
41
  }), /*#__PURE__*/React__default["default"].createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("linearGradient", {
43
42
  id: "prefix__a_dark_".concat(svgId),
44
43
  x1: 30.05,
package/lib/components/PageHeader/PageHeader.js CHANGED
@@ -36,6 +36,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
36
36
 
37
37
  var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
38
38
  var componentName = 'PageHeader';
39
+ settings.pkg.component.ActionBar = true;
39
40
 
40
41
  // Default values for props
41
42
  var defaults = {
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.40.1-canary.9+45bfa9e01",
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",
@@ -92,7 +92,7 @@
92
92
  },
93
93
  "dependencies": {
94
94
  "@babel/runtime": "^7.23.9",
95
- "@carbon/ibm-products-styles": "^2.37.2-canary.9+45bfa9e01",
95
+ "@carbon/ibm-products-styles": "^2.38.0",
96
96
  "@carbon/telemetry": "^0.1.0",
97
97
  "@dnd-kit/core": "^6.0.8",
98
98
  "@dnd-kit/modifiers": "^7.0.0",
@@ -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": "45bfa9e017eda8129c04b540173036cbdcca67eb"
119
+ "gitHead": "3205383613e470499593babf597f0a5a6b7b621d"
120
120
  }
package/scss/components/Datagrid/styles/_useStickyColumn.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  right: 0;
17
17
  display: flex;
18
18
  align-items: center;
19
- border-left: 1px solid $layer-active-02;
19
+ border-left: 1px solid $border-subtle;
20
20
  }
21
21
 
22
22
  .#{variables.$block-class}__right-sticky-column-header {
@@ -31,7 +31,7 @@
31
31
  left: 0;
32
32
  display: flex;
33
33
  align-items: center;
34
- border-right: 1px solid $layer-active-02;
34
+ border-right: 1px solid $border-subtle;
35
35
  }
36
36
 
37
37
  .#{variables.$block-class}__left-sticky-column-header {
@@ -39,11 +39,11 @@
39
39
  position: sticky !important;
40
40
  z-index: 1;
41
41
  left: 0;
42
- border-right: 1px solid $layer-active-02;
42
+ border-right: 1px solid $border-subtle;
43
43
  }
44
44
 
45
45
  .#{variables.$block-class}__right-sticky-column-header {
46
- border-left: 1px solid $layer-active-02;
46
+ border-left: 1px solid $border-subtle;
47
47
  }
48
48
 
49
49
  .#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,