@carbon/ibm-products 2.43.2-canary.15 → 2.43.2-canary.16
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/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
|
}
|