@kaizen/components 2.2.3 → 2.3.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 (44) hide show
  1. package/codemods/migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.spec.ts +209 -26
  2. package/codemods/migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.ts +24 -1
  3. package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.spec.ts +107 -1
  4. package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.ts +20 -0
  5. package/codemods/runV1Codemods/__snapshots__/runV1Codemods.spec.ts.snap +2 -3
  6. package/codemods/runV1Codemods/runV1Codemods.spec.ts +2 -3
  7. package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.ts +44 -14
  8. package/dist/cjs/src/MenuV1/index.cjs +4 -3
  9. package/dist/cjs/src/TitleBlock/TitleBlock.cjs +26 -36
  10. package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs +3 -0
  11. package/dist/cjs/src/TitleBlock/subcomponents/MainActions.cjs +90 -45
  12. package/dist/cjs/src/TitleBlock/subcomponents/MainActions.module.scss.cjs +3 -1
  13. package/dist/cjs/src/TitleBlock/subcomponents/SecondaryActions.cjs +51 -14
  14. package/dist/esm/src/MenuV1/index.mjs +5 -3
  15. package/dist/esm/src/TitleBlock/TitleBlock.mjs +27 -37
  16. package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs +3 -0
  17. package/dist/esm/src/TitleBlock/subcomponents/MainActions.mjs +92 -47
  18. package/dist/esm/src/TitleBlock/subcomponents/MainActions.module.scss.mjs +3 -1
  19. package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs +51 -14
  20. package/dist/styles.css +51 -201
  21. package/dist/types/TitleBlock/TitleBlock.d.ts +1 -1
  22. package/dist/types/TitleBlock/subcomponents/MainActions.d.ts +4 -3
  23. package/package.json +1 -1
  24. package/src/TitleBlock/TitleBlock.module.scss +28 -10
  25. package/src/TitleBlock/TitleBlock.spec.tsx +33 -461
  26. package/src/TitleBlock/TitleBlock.tsx +4 -24
  27. package/src/TitleBlock/_docs/TitleBlock.stories.tsx +25 -5
  28. package/src/TitleBlock/_mixins.scss +6 -0
  29. package/src/TitleBlock/subcomponents/MainActions.module.scss +27 -2
  30. package/src/TitleBlock/subcomponents/MainActions.tsx +127 -70
  31. package/src/TitleBlock/subcomponents/SecondaryActions.tsx +105 -45
  32. package/src/TitleBlock/subcomponents/Toolbar.tsx +1 -0
  33. package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.cjs +0 -27
  34. package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.cjs +0 -6
  35. package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.cjs +0 -306
  36. package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.module.scss.cjs +0 -16
  37. package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.mjs +0 -21
  38. package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.mjs +0 -4
  39. package/dist/esm/src/TitleBlock/subcomponents/MobileActions.mjs +0 -300
  40. package/dist/esm/src/TitleBlock/subcomponents/MobileActions.module.scss.mjs +0 -14
  41. package/dist/types/TitleBlock/subcomponents/MobileActions.d.ts +0 -14
  42. package/src/TitleBlock/subcomponents/MobileActions.module.scss +0 -208
  43. package/src/TitleBlock/subcomponents/MobileActions.spec.tsx +0 -210
  44. package/src/TitleBlock/subcomponents/MobileActions.tsx +0 -472
@@ -1,306 +0,0 @@
1
- 'use strict';
2
-
3
- var tslib = require('tslib');
4
- var React = require('react');
5
- var classnames = require('classnames');
6
- var reactFocusOn = require('react-focus-on');
7
- var Icon = require('../../Icon/Icon.cjs');
8
- var index = require('../../MenuV1/index.cjs');
9
- var constants = require('../constants.cjs');
10
- var utils = require('../utils.cjs');
11
- var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
12
- var MobileActions_module = require('./MobileActions.module.scss.cjs');
13
- function _interopDefault(e) {
14
- return e && e.__esModule ? e : {
15
- default: e
16
- };
17
- }
18
- var React__default = /*#__PURE__*/_interopDefault(React);
19
- var classnames__default = /*#__PURE__*/_interopDefault(classnames);
20
- var menuItemIsLink = function (item) {
21
- return 'href' in item;
22
- };
23
- var defaultActionIsLink = function (action) {
24
- return 'href' in action;
25
- };
26
- var defaultActionIsButton = function (action) {
27
- return !('href' in action) && 'onClick' in action || 'component' in action;
28
- };
29
- var filterActions = function (menuItems, filterType) {
30
- return menuItems.filter(function (item) {
31
- return filterType === 'link' ? menuItemIsLink(item) : !menuItemIsLink(item);
32
- });
33
- };
34
- /** Returns a filtered array of TitleBlockMenuItem based on actionType
35
- * This is use to sort a selectively render the action into a specifc order
36
- */
37
- var renderPrimaryActionDrawerContent = function (primaryAction, actionType) {
38
- if (!primaryAction) return null;
39
- if (utils.isMenuGroupNotButton(primaryAction)) {
40
- var filteredActions = filterActions(primaryAction.menuItems, actionType);
41
- return filteredActions.map(function (item, idx) {
42
- var itemType = menuItemIsLink(item) ? 'link' : 'action';
43
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
44
- key: "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
45
- "data-automation-id": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
46
- "data-testid": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx)
47
- }));
48
- });
49
- }
50
- return null;
51
- };
52
- var renderDefaultLink = function (defaultAction) {
53
- if (!defaultActionIsLink(defaultAction)) return;
54
- if ('component' in defaultAction) {
55
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, defaultAction, {
56
- key: "title-block-mobile-actions-default-link",
57
- "data-automation-id": "title-block-mobile-actions-default-link",
58
- "data-testid": "title-block-mobile-actions-default-link"
59
- }));
60
- }
61
- return React__default.default.createElement(index.MenuItem, {
62
- href: defaultAction.href,
63
- label: defaultAction.label,
64
- icon: defaultAction.icon,
65
- disabled: defaultAction.disabled,
66
- key: "title-block-mobile-actions-default-link",
67
- "data-automation-id": "title-block-mobile-actions-default-link",
68
- "data-testid": "title-block-mobile-actions-default-link",
69
- id: defaultAction.id
70
- });
71
- };
72
- var renderDefaultAction = function (defaultAction) {
73
- if (!defaultActionIsLink(defaultAction)) {
74
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, defaultAction, {
75
- key: "title-block-mobile-actions-default-action",
76
- "data-automation-id": "title-block-mobile-actions-default-action",
77
- "data-testid": "title-block-mobile-actions-default-action"
78
- }));
79
- }
80
- return null;
81
- };
82
- var renderSecondaryActions = function (secondaryActions) {
83
- if (!secondaryActions) return null;
84
- var secondaryActionMenuItems = utils.convertSecondaryActionsToMenuItems(secondaryActions);
85
- return secondaryActionMenuItems.map(function (item, idx) {
86
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
87
- key: "title-block-mobile-actions-secondary-action-".concat(idx),
88
- "data-testid": "title-block-mobile-actions-secondary-action"
89
- }));
90
- });
91
- };
92
- var renderSecondaryOverflowMenuItems = function (secondaryOverflowMenuItems) {
93
- return secondaryOverflowMenuItems.map(function (item, idx) {
94
- return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
95
- key: "title-block-mobile-actions-overflow-menu-item-".concat(idx),
96
- "data-testid": "title-block-mobile-actions-overflow-menu-item"
97
- }));
98
- });
99
- };
100
- var DrawerMenuContent = function (_a) {
101
- var _b, _c, _d;
102
- var primaryAction = _a.primaryAction,
103
- defaultAction = _a.defaultAction,
104
- secondaryActions = _a.secondaryActions,
105
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
106
- var showOtherActionsHeading = (_c = (_b = defaultAction && defaultActionIsButton(defaultAction)) !== null && _b !== void 0 ? _b : secondaryActions) !== null && _c !== void 0 ? _c : secondaryOverflowMenuItems;
107
- return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(index.MenuList, null, primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'link'), defaultAction && renderDefaultLink(defaultAction), primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'action')), ((_d = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _d !== void 0 ? _d : secondaryOverflowMenuItems) && React__default.default.createElement(index.MenuList, {
108
- heading: showOtherActionsHeading ? React__default.default.createElement(index.MenuHeading, null, "Other actions") : undefined
109
- }, defaultAction && renderDefaultAction(defaultAction), secondaryActions && renderSecondaryActions(secondaryActions), secondaryOverflowMenuItems && renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems)));
110
- };
111
- var renderDrawerHandleLabel = function (label, icon, drawerHandleLabelIconPosition) {
112
- if (drawerHandleLabelIconPosition === 'end') {
113
- return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("span", {
114
- className: MobileActions_module.drawerHandleLabelText,
115
- "data-testid": "drawer-handle-lable-text"
116
- }, label), React__default.default.createElement(React__default.default.Fragment, null, icon && React__default.default.createElement("span", {
117
- className: MobileActions_module.drawerHandleIcon
118
- }, icon)));
119
- } else {
120
- return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(React__default.default.Fragment, null, icon && React__default.default.createElement("span", {
121
- className: MobileActions_module.drawerHandleIcon
122
- }, icon)), React__default.default.createElement("span", {
123
- className: MobileActions_module.drawerHandleLabelText,
124
- "data-testid": "drawer-handle-lable-text"
125
- }, label));
126
- }
127
- };
128
- var ButtonOrLink = function (_a) {
129
- var action = _a.action,
130
- children = _a.children;
131
- if (typeof action === 'object' && 'onClick' in action && 'href' in action) {
132
- return React__default.default.createElement("a", {
133
- onClick: action.onClick,
134
- href: action.href,
135
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
136
- "data-testid": "title-block-mobile-actions-primary-button"
137
- }, children);
138
- }
139
- if (typeof action === 'function') {
140
- return React__default.default.createElement("button", {
141
- type: "button",
142
- onClick: action,
143
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
144
- "data-testid": "title-block-mobile-actions-primary-button"
145
- }, children);
146
- }
147
- if (typeof action === 'string') {
148
- return React__default.default.createElement("a", {
149
- href: action,
150
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
151
- "data-testid": "title-block-mobile-actions-primary-button"
152
- }, children);
153
- }
154
- // when there's no action (e.g. primary button is disabled)
155
- return React__default.default.createElement("button", {
156
- type: "button",
157
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
158
- "data-testid": "title-block-mobile-actions-primary-button"
159
- }, children);
160
- };
161
- var getAction = function (primaryAction) {
162
- if (primaryAction && !primaryAction.disabled) {
163
- if (primaryAction.onClick && primaryAction.href) {
164
- return {
165
- href: primaryAction.href,
166
- onClick: primaryAction.onClick
167
- };
168
- }
169
- if (primaryAction.onClick) {
170
- return primaryAction.onClick;
171
- }
172
- if (primaryAction.href) {
173
- return primaryAction.href;
174
- }
175
- }
176
- return undefined;
177
- };
178
- var DrawerHandle = function (_a) {
179
- var _b;
180
- var primaryAction = _a.primaryAction,
181
- secondaryActions = _a.secondaryActions,
182
- defaultAction = _a.defaultAction,
183
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
184
- drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
185
- toggleDisplay = _a.toggleDisplay,
186
- isOpen = _a.isOpen;
187
- var showDrawer = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems;
188
- if (primaryAction) {
189
- // If the primary action is a menu
190
- if (utils.isMenuGroupNotButton(primaryAction)) {
191
- return React__default.default.createElement("div", {
192
- className: classnames__default.default(MobileActions_module.mobileActionsTopRow, MobileActions_module.mobileActionsTopRowSingleButton),
193
- "data-testid": "title-block-mobile-actions-drawer-handle"
194
- }, React__default.default.createElement("button", {
195
- type: "button",
196
- className: classnames__default.default(MobileActions_module.mobileActionsExpandButton, MobileActions_module.mobileActionsPrimaryLabel),
197
- onClick: toggleDisplay,
198
- "aria-expanded": isOpen
199
- }, primaryAction.label, React__default.default.createElement("span", {
200
- className: MobileActions_module.mobileActionsChevronSquare
201
- }, React__default.default.createElement(Icon.Icon, {
202
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
203
- isPresentational: true
204
- }))));
205
- }
206
- // If the primary action is a button, or has no onClick/href/action
207
- return React__default.default.createElement("div", {
208
- className: classnames__default.default(MobileActions_module.mobileActionsTopRow, !showDrawer && MobileActions_module.mobileActionsTopRowSingleButton),
209
- "data-testid": "title-block-mobile-actions-drawer-handle"
210
- }, 'component' in primaryAction ? React__default.default.createElement(primaryAction.component, tslib.__assign({
211
- className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton)
212
- }, primaryAction), primaryAction.label && renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition)) : React__default.default.createElement(ButtonOrLink, {
213
- action: getAction(primaryAction)
214
- }, renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition)), showDrawer && React__default.default.createElement("button", {
215
- type: "button",
216
- className: MobileActions_module.mobileActionsExpandButton,
217
- onClick: toggleDisplay,
218
- "aria-expanded": isOpen,
219
- id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
220
- "aria-label": "Other actions"
221
- }, React__default.default.createElement(Icon.Icon, {
222
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
223
- isPresentational: true
224
- })));
225
- }
226
- // if there are default/secondary actions but no primary action
227
- if (showDrawer) {
228
- return React__default.default.createElement("div", {
229
- className: classnames__default.default(MobileActions_module.mobileActionsTopRow, MobileActions_module.mobileActionsTopRowSingleButton),
230
- "data-testid": "title-block-mobile-actions-drawer-handle"
231
- }, React__default.default.createElement("button", {
232
- type: "button",
233
- className: classnames__default.default(MobileActions_module.mobileActionsExpandButton, MobileActions_module.mobileActionsPrimaryLabel),
234
- onClick: toggleDisplay,
235
- "aria-expanded": isOpen,
236
- id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
237
- }, renderDrawerHandleLabel('Other actions'), React__default.default.createElement("span", {
238
- className: MobileActions_module.mobileActionsChevronSquare
239
- }, React__default.default.createElement(Icon.Icon, {
240
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
241
- isPresentational: true
242
- }))));
243
- }
244
- return null;
245
- };
246
- var MobileActions = function (_a) {
247
- var _b, _c;
248
- var primaryAction = _a.primaryAction,
249
- defaultAction = _a.defaultAction,
250
- secondaryActions = _a.secondaryActions,
251
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
252
- drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
253
- _d = _a.autoHide,
254
- autoHide = _d === void 0 ? false : _d;
255
- var _e = React.useState(false),
256
- isOpen = _e[0],
257
- setIsOpen = _e[1];
258
- var menuContent = React__default.default.createRef();
259
- var toggleDisplay = function () {
260
- setIsOpen(!isOpen);
261
- };
262
- // This callback handler will not run when autoHide === "off"
263
- var handleDocumentClickForAutoHide = React.useCallback(function (e) {
264
- var _a;
265
- if (isOpen && e.target instanceof Node && ((_a = menuContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
266
- setIsOpen(false);
267
- }
268
- },
269
- // @todo: Fix if possible - avoiding breaking in eslint upgrade
270
- // eslint-disable-next-line react-hooks/exhaustive-deps
271
- [menuContent]);
272
- React.useEffect(function () {
273
- if (autoHide) {
274
- document.addEventListener('click', handleDocumentClickForAutoHide, true);
275
- }
276
- return function () {
277
- if (autoHide) {
278
- document.removeEventListener('click', handleDocumentClickForAutoHide, true);
279
- }
280
- };
281
- }, [autoHide, handleDocumentClickForAutoHide]);
282
- return React__default.default.createElement("div", {
283
- className: classnames__default.default(MobileActions_module.mobileActionsContainer, isOpen && MobileActions_module.isOpen)
284
- }, React__default.default.createElement(reactFocusOn.FocusOn, {
285
- enabled: isOpen,
286
- scrollLock: false
287
- }, React__default.default.createElement(DrawerHandle, {
288
- primaryAction: primaryAction,
289
- secondaryActions: secondaryActions,
290
- defaultAction: defaultAction,
291
- secondaryOverflowMenuItems: secondaryOverflowMenuItems,
292
- drawerHandleLabelIconPosition: drawerHandleLabelIconPosition,
293
- toggleDisplay: toggleDisplay,
294
- isOpen: isOpen
295
- }), ((_c = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems) !== null && _c !== void 0 ? _c : primaryAction && utils.isMenuGroupNotButton(primaryAction)) && React__default.default.createElement("div", {
296
- ref: menuContent,
297
- className: MobileActions_module.mobileActionsMenuContainer
298
- }, React__default.default.createElement(DrawerMenuContent, {
299
- primaryAction: primaryAction,
300
- defaultAction: defaultAction,
301
- secondaryActions: secondaryActions,
302
- secondaryOverflowMenuItems: secondaryOverflowMenuItems
303
- }))));
304
- };
305
- MobileActions.displayName = 'MobileActions';
306
- exports.MobileActions = MobileActions;
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "mobileActionsContainer": "MobileActions-module_mobileActionsContainer__XoepA",
5
- "isOpen": "MobileActions-module_isOpen__D40v5",
6
- "mobileActionsMenuContainer": "MobileActions-module_mobileActionsMenuContainer__x--Eb",
7
- "mobileActionsTopRow": "MobileActions-module_mobileActionsTopRow__RXNFZ",
8
- "mobileActionsTopRowSingleButton": "MobileActions-module_mobileActionsTopRowSingleButton__5EjiI",
9
- "drawerHandleIcon": "MobileActions-module_drawerHandleIcon__q9ewm",
10
- "drawerHandleLabelText": "MobileActions-module_drawerHandleLabelText__MwJTA",
11
- "mobileActionsPrimaryLabel": "MobileActions-module_mobileActionsPrimaryLabel__8yfuH",
12
- "mobileActionsPrimaryButton": "MobileActions-module_mobileActionsPrimaryButton__Xsvo-",
13
- "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__XuHNU",
14
- "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__SPIsI"
15
- };
16
- module.exports = styles;
@@ -1,21 +0,0 @@
1
- import { __rest, __assign } from 'tslib';
2
- import React from 'react';
3
- import classnames from 'classnames';
4
- import { Heading } from '../../../Heading/Heading.mjs';
5
- import styles from './MenuHeading.module.scss.mjs';
6
- const MenuHeading = /*#__PURE__*/function () {
7
- const MenuHeading = function (_a) {
8
- var id = _a.id,
9
- classNameOverride = _a.classNameOverride,
10
- restProps = __rest(_a, ["id", "classNameOverride"]);
11
- return /*#__PURE__*/React.createElement(Heading, __assign({
12
- id: id,
13
- variant: "heading-6",
14
- tag: "span",
15
- classNameOverride: classnames(styles.heading, classNameOverride)
16
- }, restProps));
17
- };
18
- MenuHeading.displayName = 'MenuHeading';
19
- return MenuHeading;
20
- }();
21
- export { MenuHeading };
@@ -1,4 +0,0 @@
1
- var styles = {
2
- "heading": "MenuHeading-module_heading__hrHGy"
3
- };
4
- export { styles as default };
@@ -1,300 +0,0 @@
1
- import { __assign } from 'tslib';
2
- import React, { useState, useCallback, useEffect } from 'react';
3
- import classnames from 'classnames';
4
- import { FocusOn } from 'react-focus-on';
5
- import { Icon } from '../../Icon/Icon.mjs';
6
- import { MenuList, MenuHeading, MenuItem } from '../../MenuV1/index.mjs';
7
- import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from '../constants.mjs';
8
- import { isMenuGroupNotButton, convertSecondaryActionsToMenuItems } from '../utils.mjs';
9
- import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
10
- import styles from './MobileActions.module.scss.mjs';
11
- var menuItemIsLink = function (item) {
12
- return 'href' in item;
13
- };
14
- var defaultActionIsLink = function (action) {
15
- return 'href' in action;
16
- };
17
- var defaultActionIsButton = function (action) {
18
- return !('href' in action) && 'onClick' in action || 'component' in action;
19
- };
20
- var filterActions = function (menuItems, filterType) {
21
- return menuItems.filter(function (item) {
22
- return filterType === 'link' ? menuItemIsLink(item) : !menuItemIsLink(item);
23
- });
24
- };
25
- /** Returns a filtered array of TitleBlockMenuItem based on actionType
26
- * This is use to sort a selectively render the action into a specifc order
27
- */
28
- var renderPrimaryActionDrawerContent = function (primaryAction, actionType) {
29
- if (!primaryAction) return null;
30
- if (isMenuGroupNotButton(primaryAction)) {
31
- var filteredActions = filterActions(primaryAction.menuItems, actionType);
32
- return filteredActions.map(function (item, idx) {
33
- var itemType = menuItemIsLink(item) ? 'link' : 'action';
34
- return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
35
- key: "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
36
- "data-automation-id": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
37
- "data-testid": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx)
38
- }));
39
- });
40
- }
41
- return null;
42
- };
43
- var renderDefaultLink = function (defaultAction) {
44
- if (!defaultActionIsLink(defaultAction)) return;
45
- if ('component' in defaultAction) {
46
- return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, {
47
- key: "title-block-mobile-actions-default-link",
48
- "data-automation-id": "title-block-mobile-actions-default-link",
49
- "data-testid": "title-block-mobile-actions-default-link"
50
- }));
51
- }
52
- return /*#__PURE__*/React.createElement(MenuItem, {
53
- href: defaultAction.href,
54
- label: defaultAction.label,
55
- icon: defaultAction.icon,
56
- disabled: defaultAction.disabled,
57
- key: "title-block-mobile-actions-default-link",
58
- "data-automation-id": "title-block-mobile-actions-default-link",
59
- "data-testid": "title-block-mobile-actions-default-link",
60
- id: defaultAction.id
61
- });
62
- };
63
- var renderDefaultAction = function (defaultAction) {
64
- if (!defaultActionIsLink(defaultAction)) {
65
- return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, {
66
- key: "title-block-mobile-actions-default-action",
67
- "data-automation-id": "title-block-mobile-actions-default-action",
68
- "data-testid": "title-block-mobile-actions-default-action"
69
- }));
70
- }
71
- return null;
72
- };
73
- var renderSecondaryActions = function (secondaryActions) {
74
- if (!secondaryActions) return null;
75
- var secondaryActionMenuItems = convertSecondaryActionsToMenuItems(secondaryActions);
76
- return secondaryActionMenuItems.map(function (item, idx) {
77
- return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
78
- key: "title-block-mobile-actions-secondary-action-".concat(idx),
79
- "data-testid": "title-block-mobile-actions-secondary-action"
80
- }));
81
- });
82
- };
83
- var renderSecondaryOverflowMenuItems = function (secondaryOverflowMenuItems) {
84
- return secondaryOverflowMenuItems.map(function (item, idx) {
85
- return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
86
- key: "title-block-mobile-actions-overflow-menu-item-".concat(idx),
87
- "data-testid": "title-block-mobile-actions-overflow-menu-item"
88
- }));
89
- });
90
- };
91
- var DrawerMenuContent = function (_a) {
92
- var _b, _c, _d;
93
- var primaryAction = _a.primaryAction,
94
- defaultAction = _a.defaultAction,
95
- secondaryActions = _a.secondaryActions,
96
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
97
- var showOtherActionsHeading = (_c = (_b = defaultAction && defaultActionIsButton(defaultAction)) !== null && _b !== void 0 ? _b : secondaryActions) !== null && _c !== void 0 ? _c : secondaryOverflowMenuItems;
98
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuList, null, primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'link'), defaultAction && renderDefaultLink(defaultAction), primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'action')), ((_d = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _d !== void 0 ? _d : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(MenuList, {
99
- heading: showOtherActionsHeading ? /*#__PURE__*/React.createElement(MenuHeading, null, "Other actions") : undefined
100
- }, defaultAction && renderDefaultAction(defaultAction), secondaryActions && renderSecondaryActions(secondaryActions), secondaryOverflowMenuItems && renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems))));
101
- };
102
- var renderDrawerHandleLabel = function (label, icon, drawerHandleLabelIconPosition) {
103
- if (drawerHandleLabelIconPosition === 'end') {
104
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
105
- className: styles.drawerHandleLabelText,
106
- "data-testid": "drawer-handle-lable-text"
107
- }, label), /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
108
- className: styles.drawerHandleIcon
109
- }, icon)));
110
- } else {
111
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
112
- className: styles.drawerHandleIcon
113
- }, icon)), /*#__PURE__*/React.createElement("span", {
114
- className: styles.drawerHandleLabelText,
115
- "data-testid": "drawer-handle-lable-text"
116
- }, label));
117
- }
118
- };
119
- var ButtonOrLink = function (_a) {
120
- var action = _a.action,
121
- children = _a.children;
122
- if (typeof action === 'object' && 'onClick' in action && 'href' in action) {
123
- return /*#__PURE__*/React.createElement("a", {
124
- onClick: action.onClick,
125
- href: action.href,
126
- className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
127
- "data-testid": "title-block-mobile-actions-primary-button"
128
- }, children);
129
- }
130
- if (typeof action === 'function') {
131
- return /*#__PURE__*/React.createElement("button", {
132
- type: "button",
133
- onClick: action,
134
- className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
135
- "data-testid": "title-block-mobile-actions-primary-button"
136
- }, children);
137
- }
138
- if (typeof action === 'string') {
139
- return /*#__PURE__*/React.createElement("a", {
140
- href: action,
141
- className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
142
- "data-testid": "title-block-mobile-actions-primary-button"
143
- }, children);
144
- }
145
- // when there's no action (e.g. primary button is disabled)
146
- return /*#__PURE__*/React.createElement("button", {
147
- type: "button",
148
- className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
149
- "data-testid": "title-block-mobile-actions-primary-button"
150
- }, children);
151
- };
152
- var getAction = function (primaryAction) {
153
- if (primaryAction && !primaryAction.disabled) {
154
- if (primaryAction.onClick && primaryAction.href) {
155
- return {
156
- href: primaryAction.href,
157
- onClick: primaryAction.onClick
158
- };
159
- }
160
- if (primaryAction.onClick) {
161
- return primaryAction.onClick;
162
- }
163
- if (primaryAction.href) {
164
- return primaryAction.href;
165
- }
166
- }
167
- return undefined;
168
- };
169
- var DrawerHandle = function (_a) {
170
- var _b;
171
- var primaryAction = _a.primaryAction,
172
- secondaryActions = _a.secondaryActions,
173
- defaultAction = _a.defaultAction,
174
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
175
- drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
176
- toggleDisplay = _a.toggleDisplay,
177
- isOpen = _a.isOpen;
178
- var showDrawer = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems;
179
- if (primaryAction) {
180
- // If the primary action is a menu
181
- if (isMenuGroupNotButton(primaryAction)) {
182
- return /*#__PURE__*/React.createElement("div", {
183
- className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton),
184
- "data-testid": "title-block-mobile-actions-drawer-handle"
185
- }, /*#__PURE__*/React.createElement("button", {
186
- type: "button",
187
- className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel),
188
- onClick: toggleDisplay,
189
- "aria-expanded": isOpen
190
- }, primaryAction.label, /*#__PURE__*/React.createElement("span", {
191
- className: styles.mobileActionsChevronSquare
192
- }, /*#__PURE__*/React.createElement(Icon, {
193
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
194
- isPresentational: true
195
- }))));
196
- }
197
- // If the primary action is a button, or has no onClick/href/action
198
- return /*#__PURE__*/React.createElement("div", {
199
- className: classnames(styles.mobileActionsTopRow, !showDrawer && styles.mobileActionsTopRowSingleButton),
200
- "data-testid": "title-block-mobile-actions-drawer-handle"
201
- }, 'component' in primaryAction ? (/*#__PURE__*/React.createElement(primaryAction.component, __assign({
202
- className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton)
203
- }, primaryAction), primaryAction.label && renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))) : (/*#__PURE__*/React.createElement(ButtonOrLink, {
204
- action: getAction(primaryAction)
205
- }, renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))), showDrawer && (/*#__PURE__*/React.createElement("button", {
206
- type: "button",
207
- className: styles.mobileActionsExpandButton,
208
- onClick: toggleDisplay,
209
- "aria-expanded": isOpen,
210
- id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
211
- "aria-label": "Other actions"
212
- }, /*#__PURE__*/React.createElement(Icon, {
213
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
214
- isPresentational: true
215
- }))));
216
- }
217
- // if there are default/secondary actions but no primary action
218
- if (showDrawer) {
219
- return /*#__PURE__*/React.createElement("div", {
220
- className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton),
221
- "data-testid": "title-block-mobile-actions-drawer-handle"
222
- }, /*#__PURE__*/React.createElement("button", {
223
- type: "button",
224
- className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel),
225
- onClick: toggleDisplay,
226
- "aria-expanded": isOpen,
227
- id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
228
- }, renderDrawerHandleLabel('Other actions'), /*#__PURE__*/React.createElement("span", {
229
- className: styles.mobileActionsChevronSquare
230
- }, /*#__PURE__*/React.createElement(Icon, {
231
- name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
232
- isPresentational: true
233
- }))));
234
- }
235
- return null;
236
- };
237
- const MobileActions = /*#__PURE__*/function () {
238
- const MobileActions = function (_a) {
239
- var _b, _c;
240
- var primaryAction = _a.primaryAction,
241
- defaultAction = _a.defaultAction,
242
- secondaryActions = _a.secondaryActions,
243
- secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
244
- drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
245
- _d = _a.autoHide,
246
- autoHide = _d === void 0 ? false : _d;
247
- var _e = useState(false),
248
- isOpen = _e[0],
249
- setIsOpen = _e[1];
250
- var menuContent = /*#__PURE__*/React.createRef();
251
- var toggleDisplay = function () {
252
- setIsOpen(!isOpen);
253
- };
254
- // This callback handler will not run when autoHide === "off"
255
- var handleDocumentClickForAutoHide = useCallback(function (e) {
256
- var _a;
257
- if (isOpen && e.target instanceof Node && ((_a = menuContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
258
- setIsOpen(false);
259
- }
260
- },
261
- // @todo: Fix if possible - avoiding breaking in eslint upgrade
262
- // eslint-disable-next-line react-hooks/exhaustive-deps
263
- [menuContent]);
264
- useEffect(function () {
265
- if (autoHide) {
266
- document.addEventListener('click', handleDocumentClickForAutoHide, true);
267
- }
268
- return function () {
269
- if (autoHide) {
270
- document.removeEventListener('click', handleDocumentClickForAutoHide, true);
271
- }
272
- };
273
- }, [autoHide, handleDocumentClickForAutoHide]);
274
- return /*#__PURE__*/React.createElement("div", {
275
- className: classnames(styles.mobileActionsContainer, isOpen && styles.isOpen)
276
- }, /*#__PURE__*/React.createElement(FocusOn, {
277
- enabled: isOpen,
278
- scrollLock: false
279
- }, /*#__PURE__*/React.createElement(DrawerHandle, {
280
- primaryAction: primaryAction,
281
- secondaryActions: secondaryActions,
282
- defaultAction: defaultAction,
283
- secondaryOverflowMenuItems: secondaryOverflowMenuItems,
284
- drawerHandleLabelIconPosition: drawerHandleLabelIconPosition,
285
- toggleDisplay: toggleDisplay,
286
- isOpen: isOpen
287
- }), ((_c = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems) !== null && _c !== void 0 ? _c : primaryAction && isMenuGroupNotButton(primaryAction)) && (/*#__PURE__*/React.createElement("div", {
288
- ref: menuContent,
289
- className: styles.mobileActionsMenuContainer
290
- }, /*#__PURE__*/React.createElement(DrawerMenuContent, {
291
- primaryAction: primaryAction,
292
- defaultAction: defaultAction,
293
- secondaryActions: secondaryActions,
294
- secondaryOverflowMenuItems: secondaryOverflowMenuItems
295
- })))));
296
- };
297
- MobileActions.displayName = 'MobileActions';
298
- return MobileActions;
299
- }();
300
- export { MobileActions };
@@ -1,14 +0,0 @@
1
- var styles = {
2
- "mobileActionsContainer": "MobileActions-module_mobileActionsContainer__XoepA",
3
- "isOpen": "MobileActions-module_isOpen__D40v5",
4
- "mobileActionsMenuContainer": "MobileActions-module_mobileActionsMenuContainer__x--Eb",
5
- "mobileActionsTopRow": "MobileActions-module_mobileActionsTopRow__RXNFZ",
6
- "mobileActionsTopRowSingleButton": "MobileActions-module_mobileActionsTopRowSingleButton__5EjiI",
7
- "drawerHandleIcon": "MobileActions-module_drawerHandleIcon__q9ewm",
8
- "drawerHandleLabelText": "MobileActions-module_drawerHandleLabelText__MwJTA",
9
- "mobileActionsPrimaryLabel": "MobileActions-module_mobileActionsPrimaryLabel__8yfuH",
10
- "mobileActionsPrimaryButton": "MobileActions-module_mobileActionsPrimaryButton__Xsvo-",
11
- "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__XuHNU",
12
- "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__SPIsI"
13
- };
14
- export { styles as default };