@carbon/ibm-products 2.43.2-canary.15 → 2.43.2-canary.16
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/Tearsheet/Tearsheet.d.ts +8 -1
- package/es/components/Tearsheet/Tearsheet.js +9 -1
- package/es/components/Tearsheet/TearsheetNarrow.d.ts +11 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +12 -0
- package/es/components/Tearsheet/TearsheetShell.d.ts +10 -0
- package/es/components/Tearsheet/TearsheetShell.js +17 -3
- package/lib/components/Tearsheet/Tearsheet.d.ts +8 -1
- package/lib/components/Tearsheet/Tearsheet.js +9 -1
- package/lib/components/Tearsheet/TearsheetNarrow.d.ts +11 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +12 -0
- package/lib/components/Tearsheet/TearsheetShell.d.ts +10 -0
- package/lib/components/Tearsheet/TearsheetShell.js +16 -2
- package/package.json +2 -2
- package/telemetry.yml +1 -0
@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
|
|
99
99
|
*/
|
100
100
|
portalTarget: ReactNode;
|
101
101
|
/**
|
102
|
-
* Specify a CSS selector that matches the DOM element that should be
|
102
|
+
* Specify a CSS selector that matches the DOM element that should be
|
103
|
+
* focused when the Modal opens.
|
103
104
|
*/
|
104
105
|
selectorPrimaryFocus?: string;
|
106
|
+
/**
|
107
|
+
* Specify the CSS selectors that match the floating menus.
|
108
|
+
*
|
109
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
110
|
+
*/
|
111
|
+
selectorsFloatingMenus?: string[];
|
105
112
|
/**
|
106
113
|
* The main title of the tearsheet, displayed in the header area.
|
107
114
|
*/
|
@@ -190,9 +190,17 @@ Tearsheet.propTypes = _objectSpread2({
|
|
190
190
|
/**@ts-ignore */
|
191
191
|
portalTarget: portalType,
|
192
192
|
/**
|
193
|
-
* Specify a CSS selector that matches the DOM element that should be
|
193
|
+
* Specify a CSS selector that matches the DOM element that should be
|
194
|
+
* focused when the Modal opens.
|
194
195
|
*/
|
195
196
|
selectorPrimaryFocus: PropTypes.string,
|
197
|
+
/**
|
198
|
+
* Specify the CSS selectors that match the floating menus.
|
199
|
+
*
|
200
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
201
|
+
*/
|
202
|
+
/**@ts-ignore*/
|
203
|
+
selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
|
196
204
|
/**
|
197
205
|
* The main title of the tearsheet, displayed in the header area.
|
198
206
|
*/
|
@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
|
|
64
64
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
65
65
|
*/
|
66
66
|
portalTarget?: ReactNode;
|
67
|
+
/**
|
68
|
+
* Specify a CSS selector that matches the DOM element that should be
|
69
|
+
* focused when the Modal opens.
|
70
|
+
*/
|
71
|
+
selectorPrimaryFocus?: string;
|
72
|
+
/**
|
73
|
+
* Specify the CSS selectors that match the floating menus.
|
74
|
+
*
|
75
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
76
|
+
*/
|
77
|
+
selectorsFloatingMenus?: string[];
|
67
78
|
/**
|
68
79
|
* The main title of the tearsheet, displayed in the header area.
|
69
80
|
*/
|
@@ -148,6 +148,18 @@ TearsheetNarrow.propTypes = _objectSpread2({
|
|
148
148
|
*/
|
149
149
|
/**@ts-ignore */
|
150
150
|
portalTarget: portalType,
|
151
|
+
/**
|
152
|
+
* Specify a CSS selector that matches the DOM element that should be
|
153
|
+
* focused when the Modal opens.
|
154
|
+
*/
|
155
|
+
selectorPrimaryFocus: PropTypes.string,
|
156
|
+
/**
|
157
|
+
* Specify the CSS selectors that match the floating menus.
|
158
|
+
*
|
159
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
160
|
+
*/
|
161
|
+
/**@ts-ignore*/
|
162
|
+
selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
|
151
163
|
/**
|
152
164
|
* The main title of the tearsheet, displayed in the header area.
|
153
165
|
*/
|
@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
|
|
81
81
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
82
82
|
*/
|
83
83
|
portalTarget?: ReactNode;
|
84
|
+
/**
|
85
|
+
* Specify a CSS selector that matches the DOM element that should be
|
86
|
+
* focused when the Modal opens.
|
87
|
+
*/
|
84
88
|
selectorPrimaryFocus?: string;
|
89
|
+
/**
|
90
|
+
* Specify the CSS selectors that match the floating menus.
|
91
|
+
*
|
92
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
93
|
+
*/
|
94
|
+
selectorsFloatingMenus?: string[];
|
85
95
|
/**
|
86
96
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
87
97
|
*/
|
@@ -5,7 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
8
|
+
import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
9
|
import React__default, { useRef, useState, useEffect } from 'react';
|
10
10
|
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
|
11
11
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
@@ -20,7 +20,7 @@ import { useFocus } from '../../global/js/hooks/useFocus.js';
|
|
20
20
|
import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
|
21
21
|
import { ActionSet } from '../ActionSet/ActionSet.js';
|
22
22
|
|
23
|
-
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
23
|
+
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
24
24
|
|
25
25
|
// The block part of our conventional BEM class names (bc__E--M).
|
26
26
|
var bc = "".concat(pkg.prefix, "--tearsheet");
|
@@ -79,6 +79,8 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
79
79
|
open = _ref.open,
|
80
80
|
portalTargetIn = _ref.portalTarget,
|
81
81
|
selectorPrimaryFocus = _ref.selectorPrimaryFocus,
|
82
|
+
_ref$selectorsFloatin = _ref.selectorsFloatingMenus,
|
83
|
+
selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
|
82
84
|
size = _ref.size,
|
83
85
|
slug = _ref.slug,
|
84
86
|
title = _ref.title,
|
@@ -249,7 +251,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
249
251
|
onKeyDown: keyDownListener,
|
250
252
|
preventCloseOnClickOutside: !isPassive,
|
251
253
|
ref: modalRef,
|
252
|
-
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
|
254
|
+
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_toConsumableArray(selectorsFloatingMenus)),
|
253
255
|
size: "sm"
|
254
256
|
}), includeHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
|
255
257
|
className: cx("".concat(bc, "__header"), _defineProperty(_defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
|
@@ -445,6 +447,18 @@ TearsheetShell.propTypes = _objectSpread2({
|
|
445
447
|
*/
|
446
448
|
/**@ts-ignore*/
|
447
449
|
portalTarget: portalType,
|
450
|
+
/**
|
451
|
+
* Specify a CSS selector that matches the DOM element that should be
|
452
|
+
* focused when the Modal opens.
|
453
|
+
*/
|
454
|
+
selectorPrimaryFocus: PropTypes.string,
|
455
|
+
/**
|
456
|
+
* Specify the CSS selectors that match the floating menus.
|
457
|
+
*
|
458
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
459
|
+
*/
|
460
|
+
/**@ts-ignore*/
|
461
|
+
selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
|
448
462
|
/**
|
449
463
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
450
464
|
*/
|
@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
|
|
99
99
|
*/
|
100
100
|
portalTarget: ReactNode;
|
101
101
|
/**
|
102
|
-
* Specify a CSS selector that matches the DOM element that should be
|
102
|
+
* Specify a CSS selector that matches the DOM element that should be
|
103
|
+
* focused when the Modal opens.
|
103
104
|
*/
|
104
105
|
selectorPrimaryFocus?: string;
|
106
|
+
/**
|
107
|
+
* Specify the CSS selectors that match the floating menus.
|
108
|
+
*
|
109
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
110
|
+
*/
|
111
|
+
selectorsFloatingMenus?: string[];
|
105
112
|
/**
|
106
113
|
* The main title of the tearsheet, displayed in the header area.
|
107
114
|
*/
|
@@ -198,9 +198,17 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
198
198
|
/**@ts-ignore */
|
199
199
|
portalTarget: TearsheetShell.portalType,
|
200
200
|
/**
|
201
|
-
* Specify a CSS selector that matches the DOM element that should be
|
201
|
+
* Specify a CSS selector that matches the DOM element that should be
|
202
|
+
* focused when the Modal opens.
|
202
203
|
*/
|
203
204
|
selectorPrimaryFocus: index["default"].string,
|
205
|
+
/**
|
206
|
+
* Specify the CSS selectors that match the floating menus.
|
207
|
+
*
|
208
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
209
|
+
*/
|
210
|
+
/**@ts-ignore*/
|
211
|
+
selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
|
204
212
|
/**
|
205
213
|
* The main title of the tearsheet, displayed in the header area.
|
206
214
|
*/
|
@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
|
|
64
64
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
65
65
|
*/
|
66
66
|
portalTarget?: ReactNode;
|
67
|
+
/**
|
68
|
+
* Specify a CSS selector that matches the DOM element that should be
|
69
|
+
* focused when the Modal opens.
|
70
|
+
*/
|
71
|
+
selectorPrimaryFocus?: string;
|
72
|
+
/**
|
73
|
+
* Specify the CSS selectors that match the floating menus.
|
74
|
+
*
|
75
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
76
|
+
*/
|
77
|
+
selectorsFloatingMenus?: string[];
|
67
78
|
/**
|
68
79
|
* The main title of the tearsheet, displayed in the header area.
|
69
80
|
*/
|
@@ -156,6 +156,18 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
156
156
|
*/
|
157
157
|
/**@ts-ignore */
|
158
158
|
portalTarget: TearsheetShell.portalType,
|
159
|
+
/**
|
160
|
+
* Specify a CSS selector that matches the DOM element that should be
|
161
|
+
* focused when the Modal opens.
|
162
|
+
*/
|
163
|
+
selectorPrimaryFocus: index["default"].string,
|
164
|
+
/**
|
165
|
+
* Specify the CSS selectors that match the floating menus.
|
166
|
+
*
|
167
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
168
|
+
*/
|
169
|
+
/**@ts-ignore*/
|
170
|
+
selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
|
159
171
|
/**
|
160
172
|
* The main title of the tearsheet, displayed in the header area.
|
161
173
|
*/
|
@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
|
|
81
81
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
82
82
|
*/
|
83
83
|
portalTarget?: ReactNode;
|
84
|
+
/**
|
85
|
+
* Specify a CSS selector that matches the DOM element that should be
|
86
|
+
* focused when the Modal opens.
|
87
|
+
*/
|
84
88
|
selectorPrimaryFocus?: string;
|
89
|
+
/**
|
90
|
+
* Specify the CSS selectors that match the floating menus.
|
91
|
+
*
|
92
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
93
|
+
*/
|
94
|
+
selectorsFloatingMenus?: string[];
|
85
95
|
/**
|
86
96
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
87
97
|
*/
|
@@ -29,7 +29,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
29
29
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
30
30
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
31
31
|
|
32
|
-
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
32
|
+
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
33
33
|
|
34
34
|
// The block part of our conventional BEM class names (bc__E--M).
|
35
35
|
var bc = "".concat(settings.pkg.prefix, "--tearsheet");
|
@@ -88,6 +88,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
88
88
|
open = _ref.open,
|
89
89
|
portalTargetIn = _ref.portalTarget,
|
90
90
|
selectorPrimaryFocus = _ref.selectorPrimaryFocus,
|
91
|
+
_ref$selectorsFloatin = _ref.selectorsFloatingMenus,
|
92
|
+
selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
|
91
93
|
size = _ref.size,
|
92
94
|
slug = _ref.slug,
|
93
95
|
title = _ref.title,
|
@@ -258,7 +260,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
258
260
|
onKeyDown: keyDownListener,
|
259
261
|
preventCloseOnClickOutside: !isPassive,
|
260
262
|
ref: modalRef,
|
261
|
-
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
|
263
|
+
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus)),
|
262
264
|
size: "sm"
|
263
265
|
}), includeHeader && /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
|
264
266
|
className: cx__default["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
|
@@ -454,6 +456,18 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
454
456
|
*/
|
455
457
|
/**@ts-ignore*/
|
456
458
|
portalTarget: portalType,
|
459
|
+
/**
|
460
|
+
* Specify a CSS selector that matches the DOM element that should be
|
461
|
+
* focused when the Modal opens.
|
462
|
+
*/
|
463
|
+
selectorPrimaryFocus: index["default"].string,
|
464
|
+
/**
|
465
|
+
* Specify the CSS selectors that match the floating menus.
|
466
|
+
*
|
467
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
468
|
+
*/
|
469
|
+
/**@ts-ignore*/
|
470
|
+
selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
|
457
471
|
/**
|
458
472
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
459
473
|
*/
|
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.43.2-canary.
|
4
|
+
"version": "2.43.2-canary.16+5740b3028",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -119,5 +119,5 @@
|
|
119
119
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
120
120
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
121
121
|
},
|
122
|
-
"gitHead": "
|
122
|
+
"gitHead": "5740b302856db495af369010c2c3800bc95f1f59"
|
123
123
|
}
|