@carbon/ibm-products 2.43.1-canary.3 → 2.43.1-canary.4
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.
|
@@ -1,7 +1,82 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2022, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { ReactNode, PropsWithChildren } from 'react';
|
|
8
|
+
export declare const FormContext: React.Context<null>;
|
|
9
|
+
export declare const FormNumberContext: React.Context<number>;
|
|
10
|
+
interface EditTearsheetProps extends PropsWithChildren {
|
|
11
|
+
/**
|
|
12
|
+
* The cancel button text
|
|
13
|
+
*/
|
|
14
|
+
cancelButtonText?: string;
|
|
15
|
+
/**
|
|
16
|
+
* The main content of the tearsheet
|
|
17
|
+
*/
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* An optional class or classes to be added to the outermost element.
|
|
21
|
+
*/
|
|
22
|
+
className?: string;
|
|
23
|
+
/**
|
|
24
|
+
* A description of the flow, displayed in the header area of the tearsheet.
|
|
25
|
+
*/
|
|
26
|
+
description?: ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Used to set the size of the influencer
|
|
29
|
+
*/
|
|
30
|
+
influencerWidth?: 'narrow' | 'wide';
|
|
31
|
+
/**
|
|
32
|
+
* A label for the tearsheet, displayed in the header area of the tearsheet
|
|
33
|
+
* to maintain context for the tearsheet (e.g. as the title changes from page
|
|
34
|
+
* to page of a multi-page task).
|
|
35
|
+
*/
|
|
36
|
+
label?: ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* An optional handler that is called when the user closes the tearsheet (by
|
|
39
|
+
* clicking the close button, if enabled, or clicking outside, if enabled).
|
|
40
|
+
* Returning `false` here prevents the modal from closing.
|
|
41
|
+
*/
|
|
42
|
+
onClose?: () => boolean | void;
|
|
43
|
+
/**
|
|
44
|
+
* An optional handler that is called when a user changes forms via clicking
|
|
45
|
+
* an influencer nav item.
|
|
46
|
+
* Returns the index of the selected form.
|
|
47
|
+
*/
|
|
48
|
+
onFormChange?: (formIndex: number) => number;
|
|
49
|
+
/**
|
|
50
|
+
* Specify a handler for submitting the tearsheet.
|
|
51
|
+
*/
|
|
52
|
+
onRequestSubmit: () => void;
|
|
53
|
+
/**
|
|
54
|
+
* Specifies whether the tearsheet is currently open.
|
|
55
|
+
*/
|
|
56
|
+
open?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Specifies the aria label for the SideNav from Carbon UIShell
|
|
59
|
+
*/
|
|
60
|
+
sideNavAriaLabel?: string;
|
|
61
|
+
/**
|
|
62
|
+
* The submit button text
|
|
63
|
+
*/
|
|
64
|
+
submitButtonText?: string;
|
|
65
|
+
/**
|
|
66
|
+
* The main title of the tearsheet, displayed in the header area.
|
|
67
|
+
*/
|
|
68
|
+
title?: ReactNode;
|
|
69
|
+
/**
|
|
70
|
+
* The position of the top of tearsheet in the viewport. The 'normal'
|
|
71
|
+
* position (the default) is a short distance down from the top of the
|
|
72
|
+
* viewport, leaving room at the top for a global header bar to show through
|
|
73
|
+
* from below. The 'lower' position provides a little extra room at the top
|
|
74
|
+
* to allow an action bar navigation or breadcrumbs to also show through.
|
|
75
|
+
*/
|
|
76
|
+
verticalPosition?: 'normal' | 'lower';
|
|
77
|
+
}
|
|
3
78
|
/**
|
|
4
79
|
* Use Tearsheet with medium to complex edits. See usage guidance for further information.
|
|
5
80
|
*/
|
|
6
|
-
export let EditTearsheet: React.ForwardRefExoticComponent<React.RefAttributes<
|
|
7
|
-
|
|
81
|
+
export declare let EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
|
|
82
|
+
export {};
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray,
|
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import React__default, { forwardRef, useState, useRef, createContext } from 'react';
|
|
10
10
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
|
11
11
|
import cx from 'classnames';
|
|
@@ -13,6 +13,7 @@ import { Form, SideNav, SideNavItems, SideNavMenuItem } from '@carbon/react';
|
|
|
13
13
|
import { pkg } from '../../settings.js';
|
|
14
14
|
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
|
15
15
|
import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
|
|
16
|
+
import { prepareProps } from '../../global/js/utils/props-helper.js';
|
|
16
17
|
|
|
17
18
|
var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
|
|
18
19
|
var componentName = 'EditTearsheet';
|
|
@@ -34,6 +35,9 @@ var defaults = {
|
|
|
34
35
|
sideNavAriaLabel: 'Side navigation'
|
|
35
36
|
};
|
|
36
37
|
|
|
38
|
+
// Note that the descriptions here should be kept in sync with those for the
|
|
39
|
+
// corresponding props for TearsheetNarrow and TearsheetShell components.
|
|
40
|
+
|
|
37
41
|
/**
|
|
38
42
|
* Use Tearsheet with medium to complex edits. See usage guidance for further information.
|
|
39
43
|
*/
|
|
@@ -56,6 +60,17 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
56
60
|
_ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
|
|
57
61
|
sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
|
|
58
62
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
63
|
+
var actions = [{
|
|
64
|
+
key: 'edit-action-button-submit',
|
|
65
|
+
label: submitButtonText,
|
|
66
|
+
onClick: onRequestSubmit,
|
|
67
|
+
kind: 'primary'
|
|
68
|
+
}, {
|
|
69
|
+
key: 'edit-action-button-cancel',
|
|
70
|
+
label: cancelButtonText,
|
|
71
|
+
onClick: onClose,
|
|
72
|
+
kind: 'ghost'
|
|
73
|
+
}];
|
|
59
74
|
var _useState = useState(0),
|
|
60
75
|
_useState2 = _slicedToArray(_useState, 2),
|
|
61
76
|
currentForm = _useState2[0],
|
|
@@ -64,7 +79,7 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
64
79
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
65
80
|
formTitles = _useState4[0],
|
|
66
81
|
setFormTitles = _useState4[1];
|
|
67
|
-
var contentRef = useRef();
|
|
82
|
+
var contentRef = useRef(null);
|
|
68
83
|
var handleCurrentForm = function handleCurrentForm(formIndex) {
|
|
69
84
|
setCurrentForm(formIndex);
|
|
70
85
|
if (onFormChange) {
|
|
@@ -89,30 +104,22 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
89
104
|
}, title);
|
|
90
105
|
}))));
|
|
91
106
|
}
|
|
92
|
-
return /*#__PURE__*/React__default.createElement(TearsheetShell,
|
|
93
|
-
actions:
|
|
94
|
-
|
|
95
|
-
label: submitButtonText,
|
|
96
|
-
onClick: onRequestSubmit,
|
|
97
|
-
kind: 'primary'
|
|
98
|
-
}, {
|
|
99
|
-
key: 'edit-action-button-cancel',
|
|
100
|
-
label: cancelButtonText,
|
|
101
|
-
onClick: onClose,
|
|
102
|
-
kind: 'ghost'
|
|
103
|
-
}],
|
|
107
|
+
return /*#__PURE__*/React__default.createElement(TearsheetShell, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getDevtoolsProps(componentName)), prepareProps(rest)), {}, {
|
|
108
|
+
actions: actions,
|
|
109
|
+
children: children,
|
|
104
110
|
className: cx(blockClass, className),
|
|
105
111
|
description: description,
|
|
106
|
-
|
|
107
|
-
influencer: defaultInfluencer(),
|
|
108
|
-
influencerPosition: "left",
|
|
112
|
+
influencerPosition: 'left',
|
|
109
113
|
influencerWidth: influencerWidth,
|
|
110
114
|
label: label,
|
|
111
115
|
onClose: onClose,
|
|
112
116
|
open: open,
|
|
113
|
-
size:
|
|
117
|
+
size: 'wide',
|
|
114
118
|
title: title,
|
|
115
|
-
verticalPosition: verticalPosition
|
|
119
|
+
verticalPosition: verticalPosition
|
|
120
|
+
}, rest), {}, {
|
|
121
|
+
hasCloseIcon: false,
|
|
122
|
+
influencer: defaultInfluencer(),
|
|
116
123
|
ref: ref
|
|
117
124
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
118
125
|
className: "".concat(blockClass, "__content"),
|
|
@@ -1,7 +1,82 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2022, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { ReactNode, PropsWithChildren } from 'react';
|
|
8
|
+
export declare const FormContext: React.Context<null>;
|
|
9
|
+
export declare const FormNumberContext: React.Context<number>;
|
|
10
|
+
interface EditTearsheetProps extends PropsWithChildren {
|
|
11
|
+
/**
|
|
12
|
+
* The cancel button text
|
|
13
|
+
*/
|
|
14
|
+
cancelButtonText?: string;
|
|
15
|
+
/**
|
|
16
|
+
* The main content of the tearsheet
|
|
17
|
+
*/
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* An optional class or classes to be added to the outermost element.
|
|
21
|
+
*/
|
|
22
|
+
className?: string;
|
|
23
|
+
/**
|
|
24
|
+
* A description of the flow, displayed in the header area of the tearsheet.
|
|
25
|
+
*/
|
|
26
|
+
description?: ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Used to set the size of the influencer
|
|
29
|
+
*/
|
|
30
|
+
influencerWidth?: 'narrow' | 'wide';
|
|
31
|
+
/**
|
|
32
|
+
* A label for the tearsheet, displayed in the header area of the tearsheet
|
|
33
|
+
* to maintain context for the tearsheet (e.g. as the title changes from page
|
|
34
|
+
* to page of a multi-page task).
|
|
35
|
+
*/
|
|
36
|
+
label?: ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* An optional handler that is called when the user closes the tearsheet (by
|
|
39
|
+
* clicking the close button, if enabled, or clicking outside, if enabled).
|
|
40
|
+
* Returning `false` here prevents the modal from closing.
|
|
41
|
+
*/
|
|
42
|
+
onClose?: () => boolean | void;
|
|
43
|
+
/**
|
|
44
|
+
* An optional handler that is called when a user changes forms via clicking
|
|
45
|
+
* an influencer nav item.
|
|
46
|
+
* Returns the index of the selected form.
|
|
47
|
+
*/
|
|
48
|
+
onFormChange?: (formIndex: number) => number;
|
|
49
|
+
/**
|
|
50
|
+
* Specify a handler for submitting the tearsheet.
|
|
51
|
+
*/
|
|
52
|
+
onRequestSubmit: () => void;
|
|
53
|
+
/**
|
|
54
|
+
* Specifies whether the tearsheet is currently open.
|
|
55
|
+
*/
|
|
56
|
+
open?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Specifies the aria label for the SideNav from Carbon UIShell
|
|
59
|
+
*/
|
|
60
|
+
sideNavAriaLabel?: string;
|
|
61
|
+
/**
|
|
62
|
+
* The submit button text
|
|
63
|
+
*/
|
|
64
|
+
submitButtonText?: string;
|
|
65
|
+
/**
|
|
66
|
+
* The main title of the tearsheet, displayed in the header area.
|
|
67
|
+
*/
|
|
68
|
+
title?: ReactNode;
|
|
69
|
+
/**
|
|
70
|
+
* The position of the top of tearsheet in the viewport. The 'normal'
|
|
71
|
+
* position (the default) is a short distance down from the top of the
|
|
72
|
+
* viewport, leaving room at the top for a global header bar to show through
|
|
73
|
+
* from below. The 'lower' position provides a little extra room at the top
|
|
74
|
+
* to allow an action bar navigation or breadcrumbs to also show through.
|
|
75
|
+
*/
|
|
76
|
+
verticalPosition?: 'normal' | 'lower';
|
|
77
|
+
}
|
|
3
78
|
/**
|
|
4
79
|
* Use Tearsheet with medium to complex edits. See usage guidance for further information.
|
|
5
80
|
*/
|
|
6
|
-
export let EditTearsheet: React.ForwardRefExoticComponent<React.RefAttributes<
|
|
7
|
-
|
|
81
|
+
export declare let EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
|
|
82
|
+
export {};
|
|
@@ -17,6 +17,7 @@ var react = require('@carbon/react');
|
|
|
17
17
|
var settings = require('../../settings.js');
|
|
18
18
|
var devtools = require('../../global/js/utils/devtools.js');
|
|
19
19
|
var TearsheetShell = require('../Tearsheet/TearsheetShell.js');
|
|
20
|
+
var propsHelper = require('../../global/js/utils/props-helper.js');
|
|
20
21
|
|
|
21
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
23
|
|
|
@@ -43,6 +44,9 @@ var defaults = {
|
|
|
43
44
|
sideNavAriaLabel: 'Side navigation'
|
|
44
45
|
};
|
|
45
46
|
|
|
47
|
+
// Note that the descriptions here should be kept in sync with those for the
|
|
48
|
+
// corresponding props for TearsheetNarrow and TearsheetShell components.
|
|
49
|
+
|
|
46
50
|
/**
|
|
47
51
|
* Use Tearsheet with medium to complex edits. See usage guidance for further information.
|
|
48
52
|
*/
|
|
@@ -65,6 +69,17 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
65
69
|
_ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
|
|
66
70
|
sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
|
|
67
71
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
72
|
+
var actions = [{
|
|
73
|
+
key: 'edit-action-button-submit',
|
|
74
|
+
label: submitButtonText,
|
|
75
|
+
onClick: onRequestSubmit,
|
|
76
|
+
kind: 'primary'
|
|
77
|
+
}, {
|
|
78
|
+
key: 'edit-action-button-cancel',
|
|
79
|
+
label: cancelButtonText,
|
|
80
|
+
onClick: onClose,
|
|
81
|
+
kind: 'ghost'
|
|
82
|
+
}];
|
|
68
83
|
var _useState = React.useState(0),
|
|
69
84
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
70
85
|
currentForm = _useState2[0],
|
|
@@ -73,7 +88,7 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
73
88
|
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
74
89
|
formTitles = _useState4[0],
|
|
75
90
|
setFormTitles = _useState4[1];
|
|
76
|
-
var contentRef = React.useRef();
|
|
91
|
+
var contentRef = React.useRef(null);
|
|
77
92
|
var handleCurrentForm = function handleCurrentForm(formIndex) {
|
|
78
93
|
setCurrentForm(formIndex);
|
|
79
94
|
if (onFormChange) {
|
|
@@ -98,30 +113,22 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
98
113
|
}, title);
|
|
99
114
|
}))));
|
|
100
115
|
}
|
|
101
|
-
return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers
|
|
102
|
-
actions:
|
|
103
|
-
|
|
104
|
-
label: submitButtonText,
|
|
105
|
-
onClick: onRequestSubmit,
|
|
106
|
-
kind: 'primary'
|
|
107
|
-
}, {
|
|
108
|
-
key: 'edit-action-button-cancel',
|
|
109
|
-
label: cancelButtonText,
|
|
110
|
-
onClick: onClose,
|
|
111
|
-
kind: 'ghost'
|
|
112
|
-
}],
|
|
116
|
+
return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, devtools.getDevtoolsProps(componentName)), propsHelper.prepareProps(rest)), {}, {
|
|
117
|
+
actions: actions,
|
|
118
|
+
children: children,
|
|
113
119
|
className: cx__default["default"](blockClass, className),
|
|
114
120
|
description: description,
|
|
115
|
-
|
|
116
|
-
influencer: defaultInfluencer(),
|
|
117
|
-
influencerPosition: "left",
|
|
121
|
+
influencerPosition: 'left',
|
|
118
122
|
influencerWidth: influencerWidth,
|
|
119
123
|
label: label,
|
|
120
124
|
onClose: onClose,
|
|
121
125
|
open: open,
|
|
122
|
-
size:
|
|
126
|
+
size: 'wide',
|
|
123
127
|
title: title,
|
|
124
|
-
verticalPosition: verticalPosition
|
|
128
|
+
verticalPosition: verticalPosition
|
|
129
|
+
}, rest), {}, {
|
|
130
|
+
hasCloseIcon: false,
|
|
131
|
+
influencer: defaultInfluencer(),
|
|
125
132
|
ref: ref
|
|
126
133
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
127
134
|
className: "".concat(blockClass, "__content"),
|
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.1-canary.
|
|
4
|
+
"version": "2.43.1-canary.4+3b3c48743",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -121,5 +121,5 @@
|
|
|
121
121
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
|
122
122
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
|
123
123
|
},
|
|
124
|
-
"gitHead": "
|
|
124
|
+
"gitHead": "3b3c4874302df3cb3d4498e61d93a63e72e65166"
|
|
125
125
|
}
|