@linzjs/lui 17.41.4 → 17.41.5
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/CHANGELOG.md +7 -0
- package/dist/components/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts +38 -14
- package/dist/components/LuiHeaderV2/LuiHeaderV2.d.ts +89 -22
- package/dist/index.js +89 -43
- package/dist/index.js.map +1 -1
- package/dist/lui.css +122 -107
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +87 -44
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/HeaderV2/header-v2.scss +44 -39
- package/dist/scss/Components/MenuV2/menu-v2.scss +127 -100
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [17.41.5](https://github.com/linz/lui/compare/v17.41.4...v17.41.5) (2023-03-13)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* fix LuiHeaderV2 and it associated component as per UX review feedback ([#884](https://github.com/linz/lui/issues/884)) ([5436cdd](https://github.com/linz/lui/commit/5436cdd75e70080a3a242ee4ead8f8f871d58869))
|
|
7
|
+
|
|
1
8
|
## [17.41.4](https://github.com/linz/lui/compare/v17.41.3...v17.41.4) (2023-03-12)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { ILuiDrawerMenu, ILuiDrawerMenuSection } from '../LuiHeaderMenu/LuiHeaderMenus';
|
|
2
|
+
import { LuiHeaderMenuItemV2Props } from '../LuiHeaderV2/LuiHeaderV2';
|
|
4
3
|
import { Size } from '../common/ResponsiveUtils';
|
|
5
4
|
import { IconSize } from '../LuiIcon/LuiIcon';
|
|
6
|
-
interface
|
|
5
|
+
interface LuiDrawerMenuOptionV2Props {
|
|
7
6
|
/**
|
|
8
|
-
* The
|
|
7
|
+
* The LUI icon name or icon element
|
|
9
8
|
*/
|
|
10
9
|
icon?: string | ReactElement;
|
|
11
10
|
/**
|
|
@@ -29,21 +28,32 @@ interface ILuiDrawerMenuOptionV2 {
|
|
|
29
28
|
*/
|
|
30
29
|
onClick?: () => void;
|
|
31
30
|
/**
|
|
32
|
-
*
|
|
31
|
+
* whether close drawer menu on clicking, default to true
|
|
32
|
+
* true - close menu on clicking
|
|
33
|
+
* false - remains open on clicking
|
|
33
34
|
*/
|
|
34
|
-
|
|
35
|
+
closeMenuOnClick?: boolean;
|
|
35
36
|
}
|
|
36
|
-
declare const LuiDrawerMenuOptionsV2: ({ children, }:
|
|
37
|
+
declare const LuiDrawerMenuOptionsV2: ({ children, }: {
|
|
37
38
|
children: ReactNode;
|
|
38
39
|
}) => JSX.Element;
|
|
39
|
-
declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize,
|
|
40
|
-
declare
|
|
40
|
+
declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, closeMenuOnClick, onClick, }: LuiDrawerMenuOptionV2Props) => JSX.Element;
|
|
41
|
+
declare type LuiDrawerMenuV2Props = Omit<LuiHeaderMenuItemV2Props, 'onClick' | 'isSelected'> & {
|
|
42
|
+
hasStickyHeader?: boolean;
|
|
43
|
+
size?: Exclude<Size, 'xs'>;
|
|
44
|
+
type?: 'drawer' | 'dropdown';
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* Drawer menu support both sliding and dropdown
|
|
48
|
+
*/
|
|
49
|
+
declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, size, type, ...menuPropsCopy }: Omit<LuiHeaderMenuItemV2Props, "onClick" | "isSelected"> & {
|
|
41
50
|
hasStickyHeader?: boolean | undefined;
|
|
42
|
-
} & {
|
|
43
51
|
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
52
|
+
type?: "drawer" | "dropdown" | undefined;
|
|
53
|
+
} & {
|
|
44
54
|
children: ReactNode;
|
|
45
55
|
}) => JSX.Element;
|
|
46
|
-
declare type
|
|
56
|
+
declare type LuiDropdownMenuV2Props = Omit<LuiHeaderMenuItemV2Props, 'onClick' | 'isSelected'> & {
|
|
47
57
|
/**
|
|
48
58
|
* The anchor origin of dropdown, default to left
|
|
49
59
|
*/
|
|
@@ -55,7 +65,13 @@ declare type ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {
|
|
|
55
65
|
*/
|
|
56
66
|
size?: Size | 'xxl';
|
|
57
67
|
};
|
|
58
|
-
|
|
68
|
+
/**
|
|
69
|
+
* LuiDropdownMenuV2 dropdown content element
|
|
70
|
+
*/
|
|
71
|
+
export declare const LuiDropdownMenuV2DropContent: ({ children, }: {
|
|
72
|
+
children: ReactNode;
|
|
73
|
+
}) => JSX.Element;
|
|
74
|
+
declare const LuiDropdownMenuV2: (props: Omit<LuiHeaderMenuItemV2Props, "onClick" | "isSelected"> & {
|
|
59
75
|
/**
|
|
60
76
|
* The anchor origin of dropdown, default to left
|
|
61
77
|
*/
|
|
@@ -69,6 +85,14 @@ declare const LuiDropdownMenuV2: ({ ...restOfProps }: Omit<ILuiHeaderMenuItem, "
|
|
|
69
85
|
} & {
|
|
70
86
|
children: ReactNode;
|
|
71
87
|
}) => JSX.Element;
|
|
72
|
-
declare
|
|
88
|
+
declare type LuiDrawerMenuSectionV2Props = {
|
|
89
|
+
/**
|
|
90
|
+
* Optional tile, displays a header if set
|
|
91
|
+
*/
|
|
92
|
+
title?: string;
|
|
93
|
+
collapsible?: boolean;
|
|
94
|
+
children: ReactNode;
|
|
95
|
+
};
|
|
96
|
+
declare const LuiDrawerMenuSectionV2: (props: LuiDrawerMenuSectionV2Props) => JSX.Element;
|
|
73
97
|
declare const LuiDrawerMenuDividerV2: () => JSX.Element;
|
|
74
|
-
export { LuiDrawerMenuV2,
|
|
98
|
+
export { LuiDrawerMenuV2Props, LuiDrawerMenuV2, LuiDrawerMenuOptionV2Props, LuiDrawerMenuOptionV2, LuiDrawerMenuOptionsV2, LuiDrawerMenuSectionV2Props, LuiDrawerMenuSectionV2, LuiDropdownMenuV2Props, LuiDropdownMenuV2, LuiDrawerMenuDividerV2, };
|
|
@@ -1,38 +1,105 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import { HeaderSize
|
|
3
|
-
|
|
1
|
+
import React, { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { HeaderSize } from '../LuiHeader/LuiHeader';
|
|
3
|
+
import { IconSize } from '../LuiIcon/LuiIcon';
|
|
4
|
+
declare type LuiHeaderV2Props = {
|
|
4
5
|
headingText?: string;
|
|
5
6
|
size?: HeaderSize;
|
|
6
7
|
homeLink?: string | (() => void);
|
|
7
8
|
transparent?: boolean;
|
|
8
9
|
sticky?: boolean;
|
|
9
10
|
appMenu?: ReactNode;
|
|
11
|
+
};
|
|
12
|
+
declare const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children, sticky, appMenu, }: LuiHeaderV2Props & {
|
|
10
13
|
children: ReactNode;
|
|
11
|
-
}
|
|
12
|
-
declare
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
}) => JSX.Element;
|
|
15
|
+
declare type LuiHeaderMenuItemV2Props = {
|
|
16
|
+
/**
|
|
17
|
+
* LuiIcon name
|
|
18
|
+
*/
|
|
19
|
+
icon?: string;
|
|
20
|
+
/**
|
|
21
|
+
* icon color,
|
|
22
|
+
*/
|
|
23
|
+
iconColor?: string;
|
|
16
24
|
/**
|
|
17
|
-
*
|
|
18
|
-
|
|
25
|
+
* The label that will show up beside (right) the icon, if not specified then it won't show up
|
|
26
|
+
*/
|
|
27
|
+
label?: string | ReactElement;
|
|
28
|
+
/**
|
|
29
|
+
* The string that will show up as a notification badge which will show up at the upper right corner of the icon
|
|
30
|
+
*/
|
|
31
|
+
badge?: string;
|
|
32
|
+
/**
|
|
33
|
+
* The callback handler to be registered which will be called when menu item is clicked
|
|
34
|
+
*/
|
|
35
|
+
onClick?: () => void;
|
|
36
|
+
/**
|
|
37
|
+
* The test id used to reference the html element which is bound to the onClick function
|
|
38
|
+
*/
|
|
39
|
+
'data-testid'?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Allow the selected state to be controlled externally
|
|
42
|
+
*/
|
|
43
|
+
isSelected?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* The callback handler to be registered which will be called when outside of menu item is clicked
|
|
46
|
+
*/
|
|
47
|
+
onClickOutside?: () => void;
|
|
48
|
+
/**
|
|
49
|
+
* The callback handler to be registered which will be called when Escape key is pressed
|
|
50
|
+
*/
|
|
51
|
+
onEscape?: () => void;
|
|
52
|
+
/**
|
|
53
|
+
* The tooltip when mouse over the menu item
|
|
19
54
|
*/
|
|
20
|
-
isSelected?: boolean | undefined;
|
|
21
|
-
onClickOutside?: (() => void) | undefined;
|
|
22
|
-
onEscape?: (() => void) | undefined;
|
|
23
55
|
tooltip?: {
|
|
56
|
+
/**
|
|
57
|
+
* The tooltip text
|
|
58
|
+
*/
|
|
24
59
|
text: string;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
60
|
+
/**
|
|
61
|
+
* The tooltip anchor origin, default to left
|
|
62
|
+
*/
|
|
63
|
+
anchorOrigin?: 'left' | 'right';
|
|
64
|
+
/**
|
|
65
|
+
* The tooltip theme, default to dark
|
|
66
|
+
*/
|
|
67
|
+
theme?: 'dark' | 'light';
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<LuiHeaderMenuItemV2Props & {
|
|
71
|
+
children?: ReactNode;
|
|
28
72
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
-
|
|
30
|
-
isOpen:
|
|
73
|
+
export declare type LuiCloseableHeaderMenuContextType = {
|
|
74
|
+
isOpen: boolean;
|
|
75
|
+
toggle: () => void;
|
|
31
76
|
open: () => void;
|
|
32
77
|
close: () => void;
|
|
33
|
-
}
|
|
34
|
-
declare const LuiCloseableHeaderMenuContextV2: React.Context<
|
|
35
|
-
declare const
|
|
78
|
+
};
|
|
79
|
+
export declare const LuiCloseableHeaderMenuContextV2: React.Context<LuiCloseableHeaderMenuContextType>;
|
|
80
|
+
declare const useLuiCloseableHeaderMenuContextV2: () => LuiCloseableHeaderMenuContextType;
|
|
81
|
+
declare type LuiCloseableHeaderMenuItemV2Props = Omit<LuiHeaderMenuItemV2Props, 'onClick' | 'isSelected'> & {
|
|
82
|
+
menuControls: {
|
|
83
|
+
isOpen: boolean;
|
|
84
|
+
toggle: () => void;
|
|
85
|
+
setOpen: (open: boolean) => void;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
declare const LuiCloseableHeaderMenuItemV2: ({ children, menuControls, ...props }: Omit<LuiHeaderMenuItemV2Props, "onClick" | "isSelected"> & {
|
|
89
|
+
menuControls: {
|
|
90
|
+
isOpen: boolean;
|
|
91
|
+
toggle: () => void;
|
|
92
|
+
setOpen: (open: boolean) => void;
|
|
93
|
+
};
|
|
94
|
+
} & {
|
|
36
95
|
children?: ReactNode;
|
|
37
96
|
}) => JSX.Element;
|
|
38
|
-
|
|
97
|
+
declare type LuiMenuCloseButtonV2Props = {
|
|
98
|
+
'data-testid'?: string;
|
|
99
|
+
hide?: boolean;
|
|
100
|
+
icon?: string;
|
|
101
|
+
iconSize?: IconSize;
|
|
102
|
+
iconColor?: string;
|
|
103
|
+
};
|
|
104
|
+
declare const LuiMenuCloseButtonV2: ({ icon, hide, iconSize, iconColor, "data-testid": dataTestId, }: LuiMenuCloseButtonV2Props) => JSX.Element;
|
|
105
|
+
export { LuiHeaderV2Props, LuiHeaderV2, LuiHeaderMenuItemV2Props, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2Props, LuiCloseableHeaderMenuItemV2, useLuiCloseableHeaderMenuContextV2, LuiMenuCloseButtonV2Props, LuiMenuCloseButtonV2, };
|
package/dist/index.js
CHANGED
|
@@ -40191,8 +40191,8 @@ var useEscapeFunction = function (onEscape) {
|
|
|
40191
40191
|
*/
|
|
40192
40192
|
var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
|
|
40193
40193
|
var elementRef = React$1.useRef(null);
|
|
40194
|
-
var onClickInside = React$1.useCallback(onClickInsideArg, []);
|
|
40195
|
-
var onClickOutside = React$1.useCallback(onClickOutsideArg, []);
|
|
40194
|
+
var onClickInside = React$1.useCallback(onClickInsideArg, [onClickInsideArg]);
|
|
40195
|
+
var onClickOutside = React$1.useCallback(onClickOutsideArg, [onClickOutsideArg]);
|
|
40196
40196
|
React$1.useEffect(function () {
|
|
40197
40197
|
var handleClick = function (e) {
|
|
40198
40198
|
var _a;
|
|
@@ -40290,7 +40290,8 @@ var LuiCloseableHeaderMenuItem = function (_a) {
|
|
|
40290
40290
|
useDeprecatedWarning('LuiCloseableHeaderMenuItem');
|
|
40291
40291
|
useEscapeFunction(function () { return setOpen(false); });
|
|
40292
40292
|
var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
|
|
40293
|
-
if
|
|
40293
|
+
// if it was open, close it
|
|
40294
|
+
if (open) {
|
|
40294
40295
|
event.stopPropagation();
|
|
40295
40296
|
setOpen(false);
|
|
40296
40297
|
}
|
|
@@ -40356,12 +40357,12 @@ var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
|
|
|
40356
40357
|
}
|
|
40357
40358
|
});
|
|
40358
40359
|
var innerItemRef = usePageClickFunction(function () {
|
|
40359
|
-
// toggle selected when
|
|
40360
|
+
// toggle selected when 'externalSelected' is not provided
|
|
40360
40361
|
if (useInternalSelectedStatus) {
|
|
40361
40362
|
setInternalSelected(function (prevSelected) { return !prevSelected; });
|
|
40362
40363
|
}
|
|
40363
40364
|
}, function () {
|
|
40364
|
-
//
|
|
40365
|
+
// unselected on clicking outside when 'externalSelected' is not provided
|
|
40365
40366
|
if (useInternalSelectedStatus) {
|
|
40366
40367
|
setInternalSelected(false);
|
|
40367
40368
|
}
|
|
@@ -40370,46 +40371,63 @@ var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
|
|
|
40370
40371
|
}
|
|
40371
40372
|
});
|
|
40372
40373
|
var resolvedIcon = !icon && !label ? 'ic_menu' : icon;
|
|
40374
|
+
var rootStyle = 'LuiHeaderV2-menu-item';
|
|
40373
40375
|
var TooltipElement = function () {
|
|
40374
40376
|
if (!tooltip) {
|
|
40375
40377
|
return null;
|
|
40376
40378
|
}
|
|
40377
40379
|
var text = tooltip.text, _a = tooltip.anchorOrigin, anchorOrigin = _a === void 0 ? 'left' : _a, _b = tooltip.theme, theme = _b === void 0 ? 'dark' : _b;
|
|
40378
|
-
return React__default["default"].createElement("span", { className: "tooltip ".concat(anchorOrigin, " ").concat(theme) }, text);
|
|
40380
|
+
return (React__default["default"].createElement("span", { className: "menu-tooltip ".concat(anchorOrigin, " ").concat(theme) }, text));
|
|
40379
40381
|
};
|
|
40380
|
-
return (React__default["default"].createElement("div", { className:
|
|
40381
|
-
React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1(
|
|
40382
|
+
return (React__default["default"].createElement("div", { className: rootStyle, ref: ref },
|
|
40383
|
+
React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1("".concat(rootStyle, "-button"), { selected: selected }, { unselected: !selected }) },
|
|
40382
40384
|
tooltip && React__default["default"].createElement(TooltipElement, null),
|
|
40383
|
-
resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1(
|
|
40385
|
+
resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1("".concat(rootStyle, "-button-icon"), {
|
|
40384
40386
|
clickable: !!onClick
|
|
40385
40387
|
}), "data-testid": dataTestId, onClick: onClick },
|
|
40386
40388
|
React__default["default"].createElement(LuiIcon, { size: "lg", name: resolvedIcon, alt: '', color: iconColor }))),
|
|
40387
|
-
label && (React__default["default"].createElement("div", { className: clsx$1(
|
|
40388
|
-
|
|
40389
|
-
|
|
40389
|
+
label && (React__default["default"].createElement("div", { className: clsx$1(resolvedIcon
|
|
40390
|
+
? "".concat(rootStyle, "-button-label")
|
|
40391
|
+
: "".concat(rootStyle, "-button-label-only"), { clickable: !!onClick }), onClick: onClick }, label)),
|
|
40392
|
+
badge && React__default["default"].createElement("div", { className: "".concat(rootStyle, "-button-badge") }, badge)),
|
|
40393
|
+
!!children && React__default["default"].createElement("div", null, children)));
|
|
40390
40394
|
});
|
|
40391
40395
|
var LuiCloseableHeaderMenuContextV2 = React$1.createContext({
|
|
40392
|
-
isOpen:
|
|
40396
|
+
isOpen: false,
|
|
40397
|
+
toggle: function () { },
|
|
40393
40398
|
open: function () { },
|
|
40394
40399
|
close: function () { }
|
|
40395
40400
|
});
|
|
40401
|
+
var useLuiCloseableHeaderMenuContextV2 = function () {
|
|
40402
|
+
return React$1.useContext(LuiCloseableHeaderMenuContextV2);
|
|
40403
|
+
};
|
|
40396
40404
|
var LuiCloseableHeaderMenuItemV2 = function (_a) {
|
|
40397
|
-
var
|
|
40405
|
+
var children = _a.children, menuControls = _a.menuControls, props = __rest$1(_a, ["children", "menuControls"]);
|
|
40406
|
+
var isOpen = menuControls.isOpen, setOpen = menuControls.setOpen, toggle = menuControls.toggle;
|
|
40407
|
+
// close on escape
|
|
40398
40408
|
useEscapeFunction(function () { return setOpen(false); });
|
|
40399
|
-
var menuDiv = usePageClickFunction(function (event) { return
|
|
40400
|
-
|
|
40409
|
+
var menuDiv = usePageClickFunction(function (event) { return event.stopPropagation(); }, // do nothing, let menu item click invoke toggle
|
|
40410
|
+
function (event) {
|
|
40411
|
+
// if it was open, close it
|
|
40412
|
+
if (isOpen) {
|
|
40401
40413
|
event.stopPropagation();
|
|
40402
40414
|
setOpen(false);
|
|
40403
40415
|
}
|
|
40404
40416
|
});
|
|
40405
|
-
var
|
|
40406
|
-
|
|
40407
|
-
|
|
40408
|
-
|
|
40409
|
-
|
|
40410
|
-
|
|
40411
|
-
|
|
40417
|
+
var menuItemProps = __assign$3(__assign$3({ onClick: function () { return toggle(); } }, props), { isSelected: isOpen });
|
|
40418
|
+
return (React__default["default"].createElement(LuiCloseableHeaderMenuContextV2.Provider, { value: {
|
|
40419
|
+
isOpen: isOpen,
|
|
40420
|
+
toggle: toggle,
|
|
40421
|
+
open: function () { return setOpen(true); },
|
|
40422
|
+
close: function () { return setOpen(false); }
|
|
40423
|
+
} },
|
|
40412
40424
|
React__default["default"].createElement(LuiHeaderMenuItemV2, __assign$3({ ref: menuDiv }, menuItemProps), !!children && children)));
|
|
40425
|
+
};
|
|
40426
|
+
var LuiMenuCloseButtonV2 = function (_a) {
|
|
40427
|
+
var _b = _a.icon, icon = _b === void 0 ? 'ic_clear' : _b, _c = _a.hide, hide = _c === void 0 ? false : _c, _d = _a.iconSize, iconSize = _d === void 0 ? 'md' : _d, iconColor = _a.iconColor, _e = _a["data-testid"], dataTestId = _e === void 0 ? 'close-button' : _e;
|
|
40428
|
+
var menu = useLuiCloseableHeaderMenuContextV2();
|
|
40429
|
+
return (React__default["default"].createElement("div", { onClick: function () { return menu.close(); }, style: { display: hide ? 'none' : 'block' }, "data-testid": dataTestId },
|
|
40430
|
+
React__default["default"].createElement(LuiIcon, { alt: "", name: icon, size: iconSize, color: iconColor })));
|
|
40413
40431
|
};
|
|
40414
40432
|
|
|
40415
40433
|
/**
|
|
@@ -40500,10 +40518,10 @@ var LuiDrawerMenuOptionsV2 = function (_a) {
|
|
|
40500
40518
|
return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-options" }, children));
|
|
40501
40519
|
};
|
|
40502
40520
|
var LuiDrawerMenuOptionV2 = function (_a) {
|
|
40503
|
-
var icon = _a.icon, iconColor = _a.iconColor, label = _a.label, badge = _a.badge, _b = _a.iconSize, iconSize = _b === void 0 ? 'md' : _b, _c = _a.
|
|
40504
|
-
var menu =
|
|
40521
|
+
var icon = _a.icon, iconColor = _a.iconColor, label = _a.label, badge = _a.badge, _b = _a.iconSize, iconSize = _b === void 0 ? 'md' : _b, _c = _a.closeMenuOnClick, closeMenuOnClick = _c === void 0 ? true : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
|
|
40522
|
+
var menu = useLuiCloseableHeaderMenuContextV2();
|
|
40505
40523
|
return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
|
|
40506
|
-
if (
|
|
40524
|
+
if (closeMenuOnClick) {
|
|
40507
40525
|
menu.close();
|
|
40508
40526
|
}
|
|
40509
40527
|
onClick();
|
|
@@ -40513,28 +40531,53 @@ var LuiDrawerMenuOptionV2 = function (_a) {
|
|
|
40513
40531
|
label),
|
|
40514
40532
|
badge && (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-badge" }, badge))));
|
|
40515
40533
|
};
|
|
40534
|
+
/**
|
|
40535
|
+
* Drawer menu support both sliding and dropdown
|
|
40536
|
+
*/
|
|
40516
40537
|
var LuiDrawerMenuV2 = function (_a) {
|
|
40517
|
-
var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b,
|
|
40518
|
-
|
|
40519
|
-
|
|
40538
|
+
var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, // only applied when menu is drawer type
|
|
40539
|
+
_c = _a.size, // only applied when menu is drawer type
|
|
40540
|
+
size = _c === void 0 ? 'lg' : _c, _d = _a.type, type = _d === void 0 ? 'drawer' : _d, menuPropsCopy = __rest$1(_a, ["children", "hasStickyHeader", "size", "type"]);
|
|
40541
|
+
var _e = React$1.useState(false), open = _e[0], setOpen = _e[1];
|
|
40542
|
+
// if drawer is on dropdown mode, don't need to switch icon when open/close
|
|
40543
|
+
var icon = type === 'dropdown' ? 'ic_menu' : open ? 'ic_clear' : 'ic_menu';
|
|
40544
|
+
var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { icon: icon, menuControls: {
|
|
40545
|
+
isOpen: open,
|
|
40546
|
+
toggle: function () { return setOpen(function (preOpen) { return !preOpen; }); },
|
|
40547
|
+
setOpen: function (open) { return setOpen(open); }
|
|
40548
|
+
} });
|
|
40520
40549
|
React$1.useEffect(function () {
|
|
40521
40550
|
// Support for non-sticky headers. Scroll back to top when menu is opened
|
|
40522
|
-
if (open && !hasStickyHeader) {
|
|
40551
|
+
if (type === 'drawer' && open && !hasStickyHeader) {
|
|
40523
40552
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
40524
40553
|
}
|
|
40525
|
-
}, [open, hasStickyHeader]);
|
|
40554
|
+
}, [open, hasStickyHeader, type]);
|
|
40526
40555
|
return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
|
|
40527
|
-
React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer',
|
|
40528
|
-
|
|
40529
|
-
}, {
|
|
40556
|
+
React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer-container', {
|
|
40557
|
+
drawer: type === 'drawer'
|
|
40558
|
+
}, { dropdown: type === 'dropdown' }) },
|
|
40559
|
+
React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer', size, {
|
|
40560
|
+
open: open
|
|
40561
|
+
}, { drawer: type === 'drawer' }, { dropdown: type === 'dropdown' }, { sticky: type === 'drawer' && hasStickyHeader }, { 'non-sticky': type === 'drawer' && !hasStickyHeader }), "data-testid": 'drawer', "aria-hidden": !open }, children))));
|
|
40530
40562
|
};
|
|
40531
|
-
|
|
40532
|
-
|
|
40533
|
-
|
|
40563
|
+
/**
|
|
40564
|
+
* LuiDropdownMenuV2 dropdown content element
|
|
40565
|
+
*/
|
|
40566
|
+
var LuiDropdownMenuV2DropContent = function (_a) {
|
|
40567
|
+
var children = _a.children;
|
|
40568
|
+
var menu = useLuiCloseableHeaderMenuContextV2();
|
|
40569
|
+
return React__default["default"].createElement("div", { onClick: function () { return menu.close(); } }, children);
|
|
40570
|
+
};
|
|
40571
|
+
var LuiDropdownMenuV2 = function (props) {
|
|
40572
|
+
var children = props.children, _a = props.anchorOrigin, _b = _a === void 0 ? {
|
|
40534
40573
|
horizontal: 'left'
|
|
40535
|
-
} :
|
|
40536
|
-
var
|
|
40537
|
-
var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), {
|
|
40574
|
+
} : _a, _c = _b.horizontal, horizontal = _c === void 0 ? 'left' : _c, _d = props.size, size = _d === void 0 ? 'md' : _d, menuPropsCopy = __rest$1(props, ["children", "anchorOrigin", "size"]);
|
|
40575
|
+
var _e = React$1.useState(false), open = _e[0], setOpen = _e[1];
|
|
40576
|
+
var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { menuControls: {
|
|
40577
|
+
isOpen: open,
|
|
40578
|
+
toggle: function () { return setOpen(function (preOpen) { return !preOpen; }); },
|
|
40579
|
+
setOpen: function (open) { return setOpen(open); }
|
|
40580
|
+
} });
|
|
40538
40581
|
return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
|
|
40539
40582
|
React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-dropdown-container" },
|
|
40540
40583
|
React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-dropdown', { 'anchor-horizontal-icon-left': horizontal === 'left' }, {
|
|
@@ -40543,7 +40586,8 @@ var LuiDropdownMenuV2 = function (_a) {
|
|
|
40543
40586
|
'anchor-horizontal-label-right': menuPropsCopy.label && horizontal === 'right'
|
|
40544
40587
|
}, "dropdown-".concat(size), {
|
|
40545
40588
|
open: open
|
|
40546
|
-
}), "data-testid": 'dropdown', "aria-hidden": !open },
|
|
40589
|
+
}), "data-testid": 'dropdown', "aria-hidden": !open },
|
|
40590
|
+
React__default["default"].createElement(LuiDropdownMenuV2DropContent, null, children)))));
|
|
40547
40591
|
};
|
|
40548
40592
|
var LuiDrawerMenuSectionV2 = function (props) {
|
|
40549
40593
|
var children = props.children, title = props.title, collapsible = props.collapsible;
|
|
@@ -40551,8 +40595,7 @@ var LuiDrawerMenuSectionV2 = function (props) {
|
|
|
40551
40595
|
collapsible && (React__default["default"].createElement(LuiExpandableBanner, { label: title || '', className: "LuiDrawerMenuSectionV2-header" }, children)),
|
|
40552
40596
|
!collapsible && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
40553
40597
|
title && (React__default["default"].createElement("div", { className: "LuiDrawerMenuSectionV2-header" },
|
|
40554
|
-
React__default["default"].createElement("div", { className: 'lui-expand-header'
|
|
40555
|
-
React__default["default"].createElement("h3", null, title)))),
|
|
40598
|
+
React__default["default"].createElement("div", { className: 'lui-expand-header' }, title))),
|
|
40556
40599
|
children))));
|
|
40557
40600
|
};
|
|
40558
40601
|
var LuiDrawerMenuDividerV2 = function () {
|
|
@@ -58608,6 +58651,7 @@ exports.LuiDrawerMenuSectionV2 = LuiDrawerMenuSectionV2;
|
|
|
58608
58651
|
exports.LuiDrawerMenuV2 = LuiDrawerMenuV2;
|
|
58609
58652
|
exports.LuiDropdownMenu = LuiDropdownMenu;
|
|
58610
58653
|
exports.LuiDropdownMenuV2 = LuiDropdownMenuV2;
|
|
58654
|
+
exports.LuiDropdownMenuV2DropContent = LuiDropdownMenuV2DropContent;
|
|
58611
58655
|
exports.LuiErrorPage = LuiErrorPage;
|
|
58612
58656
|
exports.LuiExpandableBanner = LuiExpandableBanner;
|
|
58613
58657
|
exports.LuiFileInputBox = LuiFileInputBox;
|
|
@@ -58636,6 +58680,7 @@ exports.LuiLoadingSpinnerChristmas = LuiLoadingSpinnerChristmas;
|
|
|
58636
58680
|
exports.LuiLoadingSpinnerEaster = LuiLoadingSpinnerEaster;
|
|
58637
58681
|
exports.LuiMenu = LuiMenu;
|
|
58638
58682
|
exports.LuiMenuCloseButton = LuiMenuCloseButton;
|
|
58683
|
+
exports.LuiMenuCloseButtonV2 = LuiMenuCloseButtonV2;
|
|
58639
58684
|
exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
|
|
58640
58685
|
exports.LuiMiniSpinner = LuiMiniSpinner;
|
|
58641
58686
|
exports.LuiModal = LuiModal;
|
|
@@ -58676,6 +58721,7 @@ exports.useClickedOutsideElement = useClickedOutsideElement;
|
|
|
58676
58721
|
exports.useEscapeFunction = useEscapeFunction;
|
|
58677
58722
|
exports.useLOLGlobalClientRefContext = useLOLGlobalClientRefContext;
|
|
58678
58723
|
exports.useLOLUserContext = useLOLUserContext;
|
|
58724
|
+
exports.useLuiCloseableHeaderMenuContextV2 = useLuiCloseableHeaderMenuContextV2;
|
|
58679
58725
|
exports.useLuiFloatingWindow = useFloatingWindow;
|
|
58680
58726
|
exports.useMediaQuery = useMediaQuery;
|
|
58681
58727
|
exports.usePageClickFunction = usePageClickFunction;
|