@carbon/ibm-products 2.8.0 → 2.9.0
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/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, {
|