@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.
Files changed (53) hide show
  1. package/css/index-full-carbon.css +236 -182
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +5 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +7 -2
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +188 -157
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +92 -50
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/CreateFullPage/CreateFullPage.js +4 -3
  18. package/es/components/CreateInfluencer/CreateInfluencer.js +10 -3
  19. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
  20. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -2
  21. package/es/components/Datagrid/Datagrid/DraggableElement.js +61 -68
  22. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +23 -15
  23. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +5 -5
  24. package/es/components/FilterSummary/FilterSummary.js +9 -3
  25. package/es/components/OptionsTile/OptionsTile.js +1 -1
  26. package/es/components/SidePanel/SidePanel.js +3 -1
  27. package/es/components/TagSet/TagSet.js +3 -7
  28. package/es/global/decorators/sidePanelDecorator.js +11 -0
  29. package/es/global/js/utils/StoryDocsPage.js +5 -2
  30. package/lib/components/CreateFullPage/CreateFullPage.js +4 -3
  31. package/lib/components/CreateInfluencer/CreateInfluencer.js +10 -3
  32. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
  33. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +8 -2
  34. package/lib/components/Datagrid/Datagrid/DraggableElement.js +62 -68
  35. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +23 -15
  36. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +5 -5
  37. package/lib/components/FilterSummary/FilterSummary.js +9 -4
  38. package/lib/components/OptionsTile/OptionsTile.js +1 -1
  39. package/lib/components/SidePanel/SidePanel.js +3 -1
  40. package/lib/components/TagSet/TagSet.js +2 -6
  41. package/lib/global/decorators/sidePanelDecorator.js +19 -0
  42. package/lib/global/js/utils/StoryDocsPage.js +5 -2
  43. package/package.json +13 -15
  44. package/scss/components/CreateInfluencer/_create-influencer.scss +6 -2
  45. package/scss/components/CreateSidePanel/_storybook-styles.scss +3 -0
  46. package/scss/components/DataSpreadsheet/_storybook-styles.scss +7 -2
  47. package/scss/components/Datagrid/_storybook-styles.scss +10 -2
  48. package/scss/components/Datagrid/styles/_datagrid.scss +32 -5
  49. package/scss/components/EditSidePanel/_storybook-styles.scss +8 -5
  50. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
  51. package/scss/components/SidePanel/_storybook-styles.scss +7 -0
  52. package/scss/global/decorators/_side-panel-decorator.scss +18 -0
  53. 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
- var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
21
+
22
+ // const DRAG_TYPE = `${blockClass}__shared-ui-draggable-element`;
23
+
22
24
  var DraggableElement = function DraggableElement(_ref) {
23
25
  var _cx;
24
- var id = _ref.id,
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
- var _useDrop = useDrop({
45
- accept: DRAG_TYPE + type,
46
- collect: function collect(monitor) {
47
- return {
48
- isOver: !!monitor.isOver()
49
- };
50
- },
51
- drop: function drop(item) {
52
- moveElement(item.index, index);
53
- },
54
- canDrop: function canDrop() {
55
- return !disabled;
56
- },
57
- hover: function hover(item) {
58
- var dragIndex = item.index;
59
- var hoverIndex = index;
60
- // Don't replace items with themselves
61
- if (dragIndex === hoverIndex || disabled) {
62
- return;
63
- }
64
- moveElement(dragIndex, hoverIndex);
65
- // Time to actually perform the action
66
- // Note: we're mutating the monitor item here!
67
- // Generally it's better to avoid mutations,
68
- // but it's good here for the sake of performance
69
- // to avoid expensive index searches.
70
- // eslint-disable-next-line no-param-reassign
71
- item.index = hoverIndex;
72
- }
73
- }),
74
- _useDrop2 = _slicedToArray(_useDrop, 2),
75
- isOver = _useDrop2[0].isOver,
76
- drop = _useDrop2[1];
77
- var _useDrag = useDrag({
78
- type: DRAG_TYPE + type,
79
- item: {
80
- id: id,
81
- index: index
82
- },
83
- canDrag: function canDrag() {
84
- return !disabled;
85
- },
86
- collect: function collect(monitor) {
87
- return {
88
- isDragging: monitor.isDragging()
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 _useState = useState(false),
102
- _useState2 = _slicedToArray(_useState, 2),
103
- isGrabbed = _useState2[0],
104
- setIsGrabbed = _useState2[1];
105
- var _useState3 = useState(isFocused),
106
- _useState4 = _slicedToArray(_useState3, 2),
107
- isFocusedOnItem = _useState4[0],
108
- setIsFocusedOnItem = _useState4[1];
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, 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
- var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
48
- var dragCard = columns[dragIndex];
49
- setColumnsObject(update(columns, {
50
- $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
51
- }));
52
- }, [columns, setColumnsObject]);
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
- moveElement: moveElement,
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
- moveElement: moveElement,
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
- return {
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(id, "-toggle"),
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 = 'initial';
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 { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
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({}, prepareProps(Tag.propTypes, 'filter')), {}, {
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 ? 'c4p--story-docs-page--fullscreen' : '';
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(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
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 header area.
311
+ * The main title of the full page, displayed in the influencer area.
311
312
  */
312
- title: _propTypes.default.node
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
- }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
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 selectedRowIds = datagridState.state.selectedRowIds,
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, {