@carbon/ibm-products 2.8.0 → 2.9.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +236 -182
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +5 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +7 -2
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +188 -157
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +92 -50
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/CreateFullPage/CreateFullPage.js +4 -3
- package/es/components/CreateInfluencer/CreateInfluencer.js +10 -3
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -2
- package/es/components/Datagrid/Datagrid/DraggableElement.js +61 -68
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +23 -15
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +5 -5
- package/es/components/FilterSummary/FilterSummary.js +9 -3
- package/es/components/OptionsTile/OptionsTile.js +1 -1
- package/es/components/SidePanel/SidePanel.js +3 -1
- package/es/components/TagSet/TagSet.js +3 -7
- package/es/global/decorators/sidePanelDecorator.js +11 -0
- package/es/global/js/utils/StoryDocsPage.js +5 -2
- package/lib/components/CreateFullPage/CreateFullPage.js +4 -3
- package/lib/components/CreateInfluencer/CreateInfluencer.js +10 -3
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +8 -2
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +62 -68
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +23 -15
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +5 -5
- package/lib/components/FilterSummary/FilterSummary.js +9 -4
- package/lib/components/OptionsTile/OptionsTile.js +1 -1
- package/lib/components/SidePanel/SidePanel.js +3 -1
- package/lib/components/TagSet/TagSet.js +2 -6
- package/lib/global/decorators/sidePanelDecorator.js +19 -0
- package/lib/global/js/utils/StoryDocsPage.js +5 -2
- package/package.json +13 -15
- package/scss/components/CreateInfluencer/_create-influencer.scss +6 -2
- package/scss/components/CreateSidePanel/_storybook-styles.scss +3 -0
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +7 -2
- package/scss/components/Datagrid/_storybook-styles.scss +10 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +32 -5
- package/scss/components/EditSidePanel/_storybook-styles.scss +8 -5
- package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
- package/scss/components/SidePanel/_storybook-styles.scss +7 -0
- package/scss/global/decorators/_side-panel-decorator.scss +18 -0
- package/scss/global/js/utils/_story-as-full-page.scss +6 -0
@@ -11,28 +11,27 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
11
11
|
import * as React from 'react';
|
12
12
|
import PropTypes from 'prop-types';
|
13
13
|
import { Draggable, Locked } from '@carbon/react/icons';
|
14
|
-
import { useDrag, useDrop } from 'react-dnd';
|
14
|
+
// import { useDrag, useDrop } from 'react-dnd';
|
15
15
|
import cx from 'classnames';
|
16
16
|
import { pkg } from '../../../settings';
|
17
17
|
var useEffect = React.useEffect,
|
18
18
|
useRef = React.useRef,
|
19
19
|
useState = React.useState;
|
20
20
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
21
|
-
|
21
|
+
|
22
|
+
// const DRAG_TYPE = `${blockClass}__shared-ui-draggable-element`;
|
23
|
+
|
22
24
|
var DraggableElement = function DraggableElement(_ref) {
|
23
25
|
var _cx;
|
24
|
-
var
|
25
|
-
index = _ref.index,
|
26
|
+
var index = _ref.index,
|
26
27
|
listData = _ref.listData,
|
27
28
|
children = _ref.children,
|
28
|
-
type = _ref.type,
|
29
29
|
disabled = _ref.disabled,
|
30
30
|
ariaLabel = _ref.ariaLabel,
|
31
31
|
onGrab = _ref.onGrab,
|
32
32
|
onArrowKeyDown = _ref.onArrowKeyDown,
|
33
33
|
isFocused = _ref.isFocused,
|
34
34
|
isSticky = _ref.isSticky,
|
35
|
-
moveElement = _ref.moveElement,
|
36
35
|
selected = _ref.selected,
|
37
36
|
_ref$positionLabel = _ref.positionLabel,
|
38
37
|
positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
|
@@ -41,72 +40,66 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
41
40
|
_ref$droppedLabel = _ref.droppedLabel,
|
42
41
|
droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
|
43
42
|
var ref = useRef();
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
}
|
91
|
-
}),
|
92
|
-
_useDrag2 = _slicedToArray(_useDrag, 3),
|
93
|
-
isDragging = _useDrag2[0].isDragging,
|
94
|
-
drag = _useDrag2[1],
|
95
|
-
preview = _useDrag2[2];
|
43
|
+
|
44
|
+
// const [{ isOver }, drop] = useDrop({
|
45
|
+
// accept: DRAG_TYPE + type,
|
46
|
+
// collect: (monitor) => ({
|
47
|
+
// isOver: !!monitor.isOver(),
|
48
|
+
// }),
|
49
|
+
// drop: (item) => {
|
50
|
+
// moveElement(item.index, index);
|
51
|
+
// },
|
52
|
+
// canDrop: () => !disabled,
|
53
|
+
// hover(item) {
|
54
|
+
// const dragIndex = item.index;
|
55
|
+
// const hoverIndex = index;
|
56
|
+
// // Don't replace items with themselves
|
57
|
+
// if (dragIndex === hoverIndex || disabled) {
|
58
|
+
// return;
|
59
|
+
// }
|
60
|
+
// // moveElement(dragIndex, hoverIndex);
|
61
|
+
// // Time to actually perform the action
|
62
|
+
// // Note: we're mutating the monitor item here!
|
63
|
+
// // Generally it's better to avoid mutations,
|
64
|
+
// // but it's good here for the sake of performance
|
65
|
+
// // to avoid expensive index searches.
|
66
|
+
// // eslint-disable-next-line no-param-reassign
|
67
|
+
// item.index = hoverIndex;
|
68
|
+
// },
|
69
|
+
// });
|
70
|
+
|
71
|
+
// const [{ isDragging }, drag, preview] = useDrag({
|
72
|
+
// type: DRAG_TYPE + type,
|
73
|
+
// item: { id, index },
|
74
|
+
// canDrag: () => !disabled,
|
75
|
+
// collect: (monitor) => ({
|
76
|
+
// isDragging: monitor.isDragging(),
|
77
|
+
// }),
|
78
|
+
// });
|
79
|
+
|
80
|
+
// Temporarily disable drag support because of commonjs support/issues with react-dnd in latest version
|
81
|
+
var _useState = useState(false),
|
82
|
+
_useState2 = _slicedToArray(_useState, 1),
|
83
|
+
isDragging = _useState2[0];
|
84
|
+
var _useState3 = useState(false),
|
85
|
+
_useState4 = _slicedToArray(_useState3, 1),
|
86
|
+
isOver = _useState4[0];
|
87
|
+
var preview = useRef();
|
88
|
+
var drag = useRef();
|
96
89
|
useEffect(function () {
|
97
90
|
if (isFocused && ref && ref.current) {
|
98
91
|
ref.current.focus();
|
99
92
|
}
|
100
93
|
}, [isFocused]);
|
101
|
-
var
|
102
|
-
|
103
|
-
isGrabbed =
|
104
|
-
setIsGrabbed =
|
105
|
-
var
|
106
|
-
|
107
|
-
isFocusedOnItem =
|
108
|
-
setIsFocusedOnItem =
|
109
|
-
drop(ref);
|
94
|
+
var _useState5 = useState(false),
|
95
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
96
|
+
isGrabbed = _useState6[0],
|
97
|
+
setIsGrabbed = _useState6[1];
|
98
|
+
var _useState7 = useState(isFocused),
|
99
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
100
|
+
isFocusedOnItem = _useState8[0],
|
101
|
+
setIsFocusedOnItem = _useState8[1];
|
102
|
+
// drop(ref);
|
110
103
|
var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
111
104
|
className: cx({
|
112
105
|
disabled: disabled
|
@@ -167,7 +160,7 @@ DraggableElement.propTypes = {
|
|
167
160
|
isFocused: PropTypes.bool.isRequired,
|
168
161
|
isSticky: PropTypes.bool,
|
169
162
|
listData: PropTypes.array.isRequired,
|
170
|
-
moveElement: PropTypes.func.isRequired,
|
163
|
+
// moveElement: PropTypes.func.isRequired,
|
171
164
|
onArrowKeyDown: PropTypes.func.isRequired,
|
172
165
|
onGrab: PropTypes.func.isRequired,
|
173
166
|
positionLabel: PropTypes.string,
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
/**
|
4
|
-
* Copyright IBM Corp. 2022,
|
4
|
+
* Copyright IBM Corp. 2022, 2023
|
5
5
|
*
|
6
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
@@ -9,10 +9,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
9
9
|
|
10
10
|
import React from 'react';
|
11
11
|
import PropTypes from 'prop-types';
|
12
|
-
import { DndProvider } from 'react-dnd';
|
13
|
-
import { HTML5Backend } from 'react-dnd-html5-backend';
|
12
|
+
// import { DndProvider } from 'react-dnd';
|
13
|
+
// import { HTML5Backend } from 'react-dnd-html5-backend';
|
14
14
|
import { Checkbox } from '@carbon/react';
|
15
|
-
import update from 'immutability-helper';
|
15
|
+
// import update from 'immutability-helper';
|
16
16
|
import { pkg } from '../../../../../settings';
|
17
17
|
import cx from 'classnames';
|
18
18
|
import { DraggableItemsList } from './DraggableItemsList';
|
@@ -44,16 +44,23 @@ var Columns = function Columns(_ref) {
|
|
44
44
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
45
45
|
focusIndex = _React$useState4[0],
|
46
46
|
setFocusIndex = _React$useState4[1];
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
47
|
+
// const moveElement = React.useCallback(
|
48
|
+
// (dragIndex, hoverIndex) => {
|
49
|
+
// const dragCard = columns[dragIndex];
|
50
|
+
// setColumnsObject(
|
51
|
+
// update(columns, {
|
52
|
+
// $splice: [
|
53
|
+
// [dragIndex, 1],
|
54
|
+
// [hoverIndex, 0, dragCard],
|
55
|
+
// ],
|
56
|
+
// })
|
57
|
+
// );
|
58
|
+
// },
|
59
|
+
// [columns, setColumnsObject]
|
60
|
+
// );
|
61
|
+
|
53
62
|
return /*#__PURE__*/React.createElement("div", {
|
54
63
|
className: "".concat(blockClass, "__customize-columns-column-list")
|
55
|
-
}, /*#__PURE__*/React.createElement(DndProvider, {
|
56
|
-
backend: HTML5Backend
|
57
64
|
}, /*#__PURE__*/React.createElement("ol", {
|
58
65
|
className: "".concat(blockClass, "__customize-columns-column-list--focus"),
|
59
66
|
role: "listbox",
|
@@ -90,13 +97,14 @@ var Columns = function Columns(_ref) {
|
|
90
97
|
columns: columns,
|
91
98
|
filterString: filterString,
|
92
99
|
focusIndex: focusIndex,
|
93
|
-
getNextIndex: getNextIndex
|
94
|
-
|
100
|
+
getNextIndex: getNextIndex
|
101
|
+
// moveElement={moveElement}
|
102
|
+
,
|
95
103
|
onSelectColumn: onSelectColumn,
|
96
104
|
setAriaRegionText: setAriaRegionText,
|
97
105
|
setColumnsObject: setColumnsObject,
|
98
106
|
setFocusIndex: setFocusIndex
|
99
|
-
})))
|
107
|
+
})));
|
100
108
|
};
|
101
109
|
Columns.propTypes = {
|
102
110
|
assistiveTextDisabledInstructionsLabel: PropTypes.string,
|
@@ -18,7 +18,6 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
18
18
|
filterString = _ref.filterString,
|
19
19
|
focusIndex = _ref.focusIndex,
|
20
20
|
getNextIndex = _ref.getNextIndex,
|
21
|
-
moveElement = _ref.moveElement,
|
22
21
|
onSelectColumn = _ref.onSelectColumn,
|
23
22
|
setAriaRegionText = _ref.setAriaRegionText,
|
24
23
|
setColumnsObject = _ref.setColumnsObject,
|
@@ -68,8 +67,9 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
68
67
|
disabled: filterString.length > 0 || isFrozenColumn,
|
69
68
|
ariaLabel: colHeaderTitle,
|
70
69
|
onGrab: setAriaRegionText,
|
71
|
-
isFocused: focusIndex === i
|
72
|
-
|
70
|
+
isFocused: focusIndex === i
|
71
|
+
// moveElement={moveElement}
|
72
|
+
,
|
73
73
|
onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
|
74
74
|
if (isGrabbed) {
|
75
75
|
var _columns$nextIndex;
|
@@ -78,7 +78,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
78
78
|
e.stopPropagation();
|
79
79
|
if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
|
80
80
|
setFocusIndex(nextIndex);
|
81
|
-
moveElement(currentIndex, nextIndex);
|
81
|
+
// moveElement(currentIndex, nextIndex);
|
82
82
|
e.target.scrollIntoView({
|
83
83
|
block: 'center'
|
84
84
|
});
|
@@ -95,7 +95,7 @@ DraggableItemsList.propTypes = {
|
|
95
95
|
filterString: PropTypes.string.isRequired,
|
96
96
|
focusIndex: PropTypes.number.isRequired,
|
97
97
|
getNextIndex: PropTypes.func.isRequired,
|
98
|
-
moveElement: PropTypes.func.isRequired,
|
98
|
+
// moveElement: PropTypes.func.isRequired,
|
99
99
|
onSelectColumn: PropTypes.func.isRequired,
|
100
100
|
setAriaRegionText: PropTypes.func.isRequired,
|
101
101
|
setColumnsObject: PropTypes.func.isRequired,
|
@@ -1,3 +1,8 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
|
+
var _excluded = ["key", "value"];
|
4
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
1
6
|
/**
|
2
7
|
* Copyright IBM Corp. 2022, 2022
|
3
8
|
*
|
@@ -25,11 +30,12 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
25
30
|
var tagFilters = filters.map(function (_ref2) {
|
26
31
|
var _renderLabel;
|
27
32
|
var key = _ref2.key,
|
28
|
-
value = _ref2.value
|
29
|
-
|
33
|
+
value = _ref2.value,
|
34
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
35
|
+
return _objectSpread(_objectSpread({}, rest), {}, {
|
30
36
|
type: 'gray',
|
31
37
|
label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
|
32
|
-
};
|
38
|
+
});
|
33
39
|
});
|
34
40
|
return /*#__PURE__*/React.createElement("div", {
|
35
41
|
ref: ref,
|
@@ -214,7 +214,7 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
214
214
|
}, getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React.createElement("div", {
|
215
215
|
className: "".concat(blockClass, "__toggle-container")
|
216
216
|
}, /*#__PURE__*/React.createElement(Toggle, {
|
217
|
-
id: "".concat(
|
217
|
+
id: "".concat(titleId, "-toggle"),
|
218
218
|
className: "".concat(blockClass, "__toggle"),
|
219
219
|
toggled: enabled,
|
220
220
|
"aria-labelledby": titleId,
|
@@ -288,12 +288,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
288
288
|
if (includeOverlay && open) {
|
289
289
|
bodyElement.style.overflow = 'hidden';
|
290
290
|
} else if (includeOverlay && !open) {
|
291
|
-
bodyElement.style.overflow = '
|
291
|
+
bodyElement.style.overflow = '';
|
292
292
|
}
|
293
293
|
if (includeOverlay && !preventCloseOnClickOutside) {
|
294
294
|
document.addEventListener('click', handleOutsideClick);
|
295
295
|
}
|
296
296
|
return function () {
|
297
|
+
var bodyElement = document.body;
|
298
|
+
bodyElement.style.overflow = '';
|
297
299
|
document.removeEventListener('click', handleOutsideClick);
|
298
300
|
};
|
299
301
|
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]);
|
@@ -23,7 +23,7 @@ import { TagSetModal } from './TagSetModal';
|
|
23
23
|
import { Tag } from '@carbon/react';
|
24
24
|
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
|
25
25
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
26
|
-
import {
|
26
|
+
import { isRequiredIf } from '../../global/js/utils/props-helper';
|
27
27
|
import { pkg } from '../../settings';
|
28
28
|
var componentName = 'TagSet';
|
29
29
|
var blockClass = "".concat(pkg.prefix, "--tag-set");
|
@@ -107,8 +107,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
107
107
|
}
|
108
108
|
}, /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
|
109
109
|
// ensure id is not duplicated
|
110
|
-
"data-original-id": id
|
111
|
-
filter: false
|
110
|
+
"data-original-id": id
|
112
111
|
}), label));
|
113
112
|
}) : []);
|
114
113
|
setSizingTags(newSizingTags);
|
@@ -119,7 +118,6 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
119
118
|
var label = _ref3.label,
|
120
119
|
other = _objectWithoutProperties(_ref3, _excluded3);
|
121
120
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
|
122
|
-
filter: false,
|
123
121
|
key: "displayed-tag-".concat(index)
|
124
122
|
}), label);
|
125
123
|
}) : [];
|
@@ -306,12 +304,10 @@ TagSet.propTypes = {
|
|
306
304
|
* with properties: **label**\* (required) to supply the tag content, and
|
307
305
|
* other properties will be passed to the Carbon Tag component, such as
|
308
306
|
* **type**, **disabled**, **ref**, **className** , and any other Tag props.
|
309
|
-
* NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
|
310
|
-
* as HTML attributes.
|
311
307
|
*
|
312
308
|
* See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
|
313
309
|
*/
|
314
|
-
tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({},
|
310
|
+
tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Tag.propTypes), {}, {
|
315
311
|
label: PropTypes.string.isRequired,
|
316
312
|
// we duplicate this prop to improve the DocGen
|
317
313
|
type: PropTypes.oneOf(tagTypes)
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Content } from '@carbon/react';
|
3
|
+
export var sidePanelDecorator = function sidePanelDecorator(renderHeader, prefix) {
|
4
|
+
return function (Story) {
|
5
|
+
return /*#__PURE__*/React.createElement("div", {
|
6
|
+
className: "".concat(prefix, "container")
|
7
|
+
}, renderHeader(), /*#__PURE__*/React.createElement(Content, {
|
8
|
+
className: "".concat(prefix, "content")
|
9
|
+
}, /*#__PURE__*/React.createElement(Story, null)));
|
10
|
+
};
|
11
|
+
};
|
@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
|
|
14
14
|
import { Title, Description, Source, Controls, Canvas, Stories, AnchorMdx, useOf } from '@storybook/blocks';
|
15
15
|
import { paramCase } from 'change-case';
|
16
16
|
import { codeSandboxHref, stackblitzHref, storyDocsPageInfo } from './story-helper';
|
17
|
+
import { pkg } from '../../../settings';
|
17
18
|
export var CustomBlocks = function CustomBlocks(_ref) {
|
18
19
|
var blocks = _ref.blocks;
|
19
20
|
return blocks.map(function (block, index) {
|
@@ -81,12 +82,14 @@ export var StoryDocsPage = function StoryDocsPage(_ref2) {
|
|
81
82
|
var storyInfo = storyDocsPageInfo(csfFile);
|
82
83
|
var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
|
83
84
|
var isFullScreen = (csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 || (_csfFile$meta = _csfFile$meta.parameters) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.layout) === 'fullscreen' || false;
|
84
|
-
var storyHelperClass = isFullScreen ?
|
85
|
+
var storyHelperClass = isFullScreen ? "".concat(pkg.prefix, "--story-docs-page--fullscreen") : '';
|
85
86
|
var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
|
86
87
|
var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
|
87
88
|
return !!block.story;
|
88
89
|
}).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;
|
89
|
-
return /*#__PURE__*/React.createElement(
|
90
|
+
return /*#__PURE__*/React.createElement("div", {
|
91
|
+
"data-story-title": storyInfo.title
|
92
|
+
}, /*#__PURE__*/React.createElement(Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
|
90
93
|
var href = _ref3.href,
|
91
94
|
label = _ref3.label;
|
92
95
|
return /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && ' | ', /*#__PURE__*/React.createElement(AnchorMdx, {
|
@@ -174,7 +174,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
174
174
|
className: "".concat(blockClass, "__influencer")
|
175
175
|
}, /*#__PURE__*/_react.default.createElement(_CreateInfluencer.CreateInfluencer, {
|
176
176
|
stepData: stepData,
|
177
|
-
currentStep: currentStep
|
177
|
+
currentStep: currentStep,
|
178
|
+
title: title
|
178
179
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
179
180
|
className: "".concat(blockClass, "__body")
|
180
181
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
@@ -307,7 +308,7 @@ CreateFullPage.propTypes = {
|
|
307
308
|
*/
|
308
309
|
submitButtonText: _propTypes.default.string.isRequired,
|
309
310
|
/**
|
310
|
-
* The main title of the full page, displayed in the
|
311
|
+
* The main title of the full page, displayed in the influencer area.
|
311
312
|
*/
|
312
|
-
title: _propTypes.default.
|
313
|
+
title: _propTypes.default.string
|
313
314
|
};
|
@@ -26,7 +26,8 @@ var componentName = 'CreateInfluencer';
|
|
26
26
|
var CreateInfluencer = function CreateInfluencer(_ref) {
|
27
27
|
var className = _ref.className,
|
28
28
|
currentStep = _ref.currentStep,
|
29
|
-
stepData = _ref.stepData
|
29
|
+
stepData = _ref.stepData,
|
30
|
+
title = _ref.title;
|
30
31
|
var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
|
31
32
|
var dynamicSteps = [];
|
32
33
|
array.forEach(function (item, index) {
|
@@ -54,7 +55,9 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
|
|
54
55
|
var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
|
55
56
|
return /*#__PURE__*/_react.default.createElement("div", {
|
56
57
|
className: "".concat(blockClass, "__left-nav")
|
57
|
-
},
|
58
|
+
}, title && /*#__PURE__*/_react.default.createElement("h3", {
|
59
|
+
className: "".concat(blockClass, "__title")
|
60
|
+
}, title), currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
|
58
61
|
currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
|
59
62
|
: currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
|
60
63
|
,
|
@@ -96,5 +99,9 @@ CreateInfluencer.propTypes = {
|
|
96
99
|
secondaryLabel: _propTypes.default.string,
|
97
100
|
shouldIncludeStep: _propTypes.default.bool,
|
98
101
|
title: _propTypes.default.node
|
99
|
-
}))
|
102
|
+
})),
|
103
|
+
/**
|
104
|
+
* The main title of the full page, displayed in the influencer area.
|
105
|
+
*/
|
106
|
+
title: _propTypes.default.string
|
100
107
|
};
|
@@ -58,6 +58,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
58
58
|
gridHeight = _ref.gridHeight;
|
59
59
|
headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
|
60
60
|
headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
|
61
|
+
headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
|
61
62
|
};
|
62
63
|
setCustomValues({
|
63
64
|
gridHeight: gridElement.offsetHeight,
|
@@ -37,7 +37,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
37
37
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
38
38
|
receivedInitialWidth = _useState6[0],
|
39
39
|
setReceivedInitialWidth = _useState6[1];
|
40
|
-
var
|
40
|
+
var onSelectAllRows = datagridState.onSelectAllRows,
|
41
|
+
selectedRowIds = datagridState.state.selectedRowIds,
|
41
42
|
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
42
43
|
toolbarBatchActions = datagridState.toolbarBatchActions,
|
43
44
|
setGlobalFilter = datagridState.setGlobalFilter,
|
@@ -125,7 +126,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
125
126
|
onCancel: function onCancel() {
|
126
127
|
toggleAllRowsSelected(false);
|
127
128
|
setGlobalFilter(null);
|
128
|
-
}
|
129
|
+
},
|
130
|
+
onSelectAll: function onSelectAll() {
|
131
|
+
toggleAllRowsSelected(true);
|
132
|
+
onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(true);
|
133
|
+
},
|
134
|
+
totalCount: rows && rows.length
|
129
135
|
}, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
|
130
136
|
if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
|
131
137
|
return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {
|