@kaizen/components 0.0.0-canary-guidance-block-codemod-20251215033932 → 0.0.0-canary-01-titleblock-20251216220648
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/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.spec.ts +105 -0
- package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.ts +4 -14
- package/dist/cjs/src/MenuV1/index.cjs +4 -3
- package/dist/cjs/src/TitleBlock/TitleBlock.cjs +32 -36
- package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs +5 -1
- package/dist/cjs/src/TitleBlock/subcomponents/MainActions.cjs +90 -45
- package/dist/cjs/src/TitleBlock/subcomponents/MainActions.module.scss.cjs +3 -1
- package/dist/cjs/src/TitleBlock/subcomponents/SecondaryActions.cjs +51 -14
- package/dist/esm/src/MenuV1/index.mjs +5 -3
- package/dist/esm/src/TitleBlock/TitleBlock.mjs +33 -37
- package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs +5 -1
- package/dist/esm/src/TitleBlock/subcomponents/MainActions.mjs +92 -47
- package/dist/esm/src/TitleBlock/subcomponents/MainActions.module.scss.mjs +3 -1
- package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs +51 -14
- package/dist/styles.css +89 -210
- package/dist/types/TitleBlock/TitleBlock.d.ts +1 -1
- package/dist/types/TitleBlock/subcomponents/MainActions.d.ts +4 -3
- package/package.json +1 -1
- package/src/Avatar/Avatar.module.css +1 -0
- package/src/TitleBlock/TitleBlock.module.scss +63 -19
- package/src/TitleBlock/TitleBlock.spec.tsx +33 -461
- package/src/TitleBlock/TitleBlock.tsx +7 -24
- package/src/TitleBlock/_docs/TitleBlock.stories.tsx +59 -12
- package/src/TitleBlock/_mixins.scss +6 -0
- package/src/TitleBlock/subcomponents/MainActions.module.scss +20 -2
- package/src/TitleBlock/subcomponents/MainActions.tsx +127 -70
- package/src/TitleBlock/subcomponents/SecondaryActions.tsx +105 -45
- package/src/TitleBlock/subcomponents/Toolbar.tsx +1 -0
- package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.cjs +0 -27
- package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.cjs +0 -6
- package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.cjs +0 -306
- package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.module.scss.cjs +0 -16
- package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.mjs +0 -21
- package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.mjs +0 -4
- package/dist/esm/src/TitleBlock/subcomponents/MobileActions.mjs +0 -300
- package/dist/esm/src/TitleBlock/subcomponents/MobileActions.module.scss.mjs +0 -14
- package/dist/types/TitleBlock/subcomponents/MobileActions.d.ts +0 -14
- package/src/TitleBlock/subcomponents/MobileActions.module.scss +0 -208
- package/src/TitleBlock/subcomponents/MobileActions.spec.tsx +0 -210
- package/src/TitleBlock/subcomponents/MobileActions.tsx +0 -472
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var classnames = require('classnames');
|
|
6
|
-
var Heading = require('../../../Heading/Heading.cjs');
|
|
7
|
-
var MenuHeading_module = require('./MenuHeading.module.scss.cjs');
|
|
8
|
-
function _interopDefault(e) {
|
|
9
|
-
return e && e.__esModule ? e : {
|
|
10
|
-
default: e
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
14
|
-
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
|
|
15
|
-
var MenuHeading = function (_a) {
|
|
16
|
-
var id = _a.id,
|
|
17
|
-
classNameOverride = _a.classNameOverride,
|
|
18
|
-
restProps = tslib.__rest(_a, ["id", "classNameOverride"]);
|
|
19
|
-
return React__default.default.createElement(Heading.Heading, tslib.__assign({
|
|
20
|
-
id: id,
|
|
21
|
-
variant: "heading-6",
|
|
22
|
-
tag: "span",
|
|
23
|
-
classNameOverride: classnames__default.default(MenuHeading_module.heading, classNameOverride)
|
|
24
|
-
}, restProps));
|
|
25
|
-
};
|
|
26
|
-
MenuHeading.displayName = 'MenuHeading';
|
|
27
|
-
exports.MenuHeading = MenuHeading;
|
|
@@ -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 };
|