@linzjs/lui 17.41.4 → 17.41.6

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 (12) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts +38 -14
  3. package/dist/components/LuiHeaderV2/LuiHeaderV2.d.ts +89 -22
  4. package/dist/index.js +90 -45
  5. package/dist/index.js.map +1 -1
  6. package/dist/lui.css +122 -107
  7. package/dist/lui.css.map +1 -1
  8. package/dist/lui.esm.js +88 -46
  9. package/dist/lui.esm.js.map +1 -1
  10. package/dist/scss/Components/HeaderV2/header-v2.scss +44 -39
  11. package/dist/scss/Components/MenuV2/menu-v2.scss +127 -100
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [17.41.6](https://github.com/linz/lui/compare/v17.41.5...v17.41.6) (2023-03-14)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **LuiDateInput:** remove unnecessary & buggy parse fn on value ([#885](https://github.com/linz/lui/issues/885)) ([aa26b2e](https://github.com/linz/lui/commit/aa26b2e721f5cd09698ba9ba44e0f82f68db8663))
7
+
8
+ ## [17.41.5](https://github.com/linz/lui/compare/v17.41.4...v17.41.5) (2023-03-13)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * 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))
14
+
1
15
  ## [17.41.4](https://github.com/linz/lui/compare/v17.41.3...v17.41.4) (2023-03-12)
2
16
 
3
17
 
package/dist/components/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  import { ReactElement, ReactNode } from 'react';
2
- import { ILuiHeaderMenuItem, ILuiIcon } from '../LuiHeader/LuiHeader';
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 ILuiDrawerMenuOptionV2 {
5
+ interface LuiDrawerMenuOptionV2Props {
7
6
  /**
8
- * The material-ui icon name (see https://material.io/resources/icons/?search=account_c&style=round)
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
- * Whether the option is a sub menu, if true, the drawer will not be closed on click
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
- subMenu?: boolean;
35
+ closeMenuOnClick?: boolean;
35
36
  }
36
- declare const LuiDrawerMenuOptionsV2: ({ children, }: ILuiIcon & {
37
+ declare const LuiDrawerMenuOptionsV2: ({ children, }: {
37
38
  children: ReactNode;
38
39
  }) => JSX.Element;
39
- declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, subMenu, onClick, }: ILuiDrawerMenuOptionV2) => JSX.Element;
40
- declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, size, ...menuPropsCopy }: Omit<ILuiHeaderMenuItem, "onClick"> & {
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 ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {
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
- declare const LuiDropdownMenuV2: ({ ...restOfProps }: Omit<ILuiHeaderMenuItem, "onClick"> & {
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 const LuiDrawerMenuSectionV2: (props: ILuiDrawerMenuSection) => JSX.Element;
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, LuiDrawerMenuOptionsV2, LuiDrawerMenuOptionV2, ILuiDropdownMenuV2, LuiDropdownMenuV2, LuiDrawerMenuSectionV2, LuiDrawerMenuDividerV2, ILuiDrawerMenuOptionV2, };
98
+ export { LuiDrawerMenuV2Props, LuiDrawerMenuV2, LuiDrawerMenuOptionV2Props, LuiDrawerMenuOptionV2, LuiDrawerMenuOptionsV2, LuiDrawerMenuSectionV2Props, LuiDrawerMenuSectionV2, LuiDropdownMenuV2Props, LuiDropdownMenuV2, LuiDrawerMenuDividerV2, };
package/dist/components/LuiHeaderV2/LuiHeaderV2.d.ts CHANGED
@@ -1,38 +1,105 @@
1
- import React, { ReactNode } from 'react';
2
- import { HeaderSize, ILuiCloseableHeaderMenuItem, ILuiHeaderMenuItem } from '../LuiHeader/LuiHeader';
3
- interface HeaderPropsV2 {
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 const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children, sticky, appMenu, }: HeaderPropsV2) => JSX.Element;
13
- declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<ILuiHeaderMenuItem & {
14
- children?: ReactNode;
15
- iconColor?: string | undefined;
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
- * allow to control selected status externally,
18
- * and expect to use onClickOutside and onEscape to handle selected changes
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
- anchorOrigin?: "left" | "right" | undefined;
26
- theme?: "dark" | "light" | undefined;
27
- } | undefined;
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
- interface ILuiCloseableHeaderMenuContextV2 {
30
- isOpen: () => boolean;
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<ILuiCloseableHeaderMenuContextV2>;
35
- declare const LuiCloseableHeaderMenuItemV2: ({ open, setOpen, children, ...props }: ILuiCloseableHeaderMenuItem & {
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
- export { LuiHeaderV2, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2, LuiCloseableHeaderMenuContextV2, };
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
@@ -15657,8 +15657,7 @@ var parseTextDate = function (value, options) {
15657
15657
 
15658
15658
  var DateInput = React$1.forwardRef(function (props, ref) {
15659
15659
  var valueProp = props.value, onChangeProp = props.onChange, onPasteProp = props.onPaste, inputProps = __rest$1(props, ["value", "onChange", "onPaste"]);
15660
- var value = parseTextDate(valueProp);
15661
- return (React__default["default"].createElement("input", __assign$3({}, inputProps, { ref: ref, pattern: "d{2}/d{2}/d{4}", placeholder: "dd/mm/yyyy", type: 'date', value: value, onChange: function (e) { return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e); }, onPaste: function (e) {
15660
+ return (React__default["default"].createElement("input", __assign$3({}, inputProps, { ref: ref, pattern: "d{2}/d{2}/d{4}", placeholder: "dd/mm/yyyy", type: 'date', value: valueProp, onChange: function (e) { return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e); }, onPaste: function (e) {
15662
15661
  var data = e.clipboardData.getData('text');
15663
15662
  var parsedValue = parseTextDate(data, { allowTwoDigitYear: true });
15664
15663
  if (parsedValue) {
@@ -40191,8 +40190,8 @@ var useEscapeFunction = function (onEscape) {
40191
40190
  */
40192
40191
  var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
40193
40192
  var elementRef = React$1.useRef(null);
40194
- var onClickInside = React$1.useCallback(onClickInsideArg, []);
40195
- var onClickOutside = React$1.useCallback(onClickOutsideArg, []);
40193
+ var onClickInside = React$1.useCallback(onClickInsideArg, [onClickInsideArg]);
40194
+ var onClickOutside = React$1.useCallback(onClickOutsideArg, [onClickOutsideArg]);
40196
40195
  React$1.useEffect(function () {
40197
40196
  var handleClick = function (e) {
40198
40197
  var _a;
@@ -40290,7 +40289,8 @@ var LuiCloseableHeaderMenuItem = function (_a) {
40290
40289
  useDeprecatedWarning('LuiCloseableHeaderMenuItem');
40291
40290
  useEscapeFunction(function () { return setOpen(false); });
40292
40291
  var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
40293
- if (!open) {
40292
+ // if it was open, close it
40293
+ if (open) {
40294
40294
  event.stopPropagation();
40295
40295
  setOpen(false);
40296
40296
  }
@@ -40356,12 +40356,12 @@ var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
40356
40356
  }
40357
40357
  });
40358
40358
  var innerItemRef = usePageClickFunction(function () {
40359
- // toggle selected when there is no externalSelected provided
40359
+ // toggle selected when 'externalSelected' is not provided
40360
40360
  if (useInternalSelectedStatus) {
40361
40361
  setInternalSelected(function (prevSelected) { return !prevSelected; });
40362
40362
  }
40363
40363
  }, function () {
40364
- // unselcted when press outside when there is no externalSelected provided
40364
+ // unselected on clicking outside when 'externalSelected' is not provided
40365
40365
  if (useInternalSelectedStatus) {
40366
40366
  setInternalSelected(false);
40367
40367
  }
@@ -40370,46 +40370,63 @@ var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
40370
40370
  }
40371
40371
  });
40372
40372
  var resolvedIcon = !icon && !label ? 'ic_menu' : icon;
40373
+ var rootStyle = 'LuiHeaderV2-menu-item';
40373
40374
  var TooltipElement = function () {
40374
40375
  if (!tooltip) {
40375
40376
  return null;
40376
40377
  }
40377
40378
  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);
40379
+ return (React__default["default"].createElement("span", { className: "menu-tooltip ".concat(anchorOrigin, " ").concat(theme) }, text));
40379
40380
  };
40380
- return (React__default["default"].createElement("div", { className: "LuiHeaderV2-menu-item", ref: ref },
40381
- React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1('LuiHeaderV2-menu-button', { selected: selected }, { unselected: !selected }) },
40381
+ return (React__default["default"].createElement("div", { className: rootStyle, ref: ref },
40382
+ React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1("".concat(rootStyle, "-button"), { selected: selected }, { unselected: !selected }) },
40382
40383
  tooltip && React__default["default"].createElement(TooltipElement, null),
40383
- resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1('LuiHeaderV2-menu-icon', {
40384
+ resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1("".concat(rootStyle, "-button-icon"), {
40384
40385
  clickable: !!onClick
40385
40386
  }), "data-testid": dataTestId, onClick: onClick },
40386
40387
  React__default["default"].createElement(LuiIcon, { size: "lg", name: resolvedIcon, alt: '', color: iconColor }))),
40387
- label && (React__default["default"].createElement("div", { className: clsx$1(onClick && 'clickable', { 'LuiHeaderV2-menu-label': !!resolvedIcon }, { 'LuiHeaderV2-menu-label-only': !resolvedIcon }), onClick: onClick }, label)),
40388
- badge && React__default["default"].createElement("div", { className: "LuiHeaderV2-badge" }, badge)),
40389
- !!children && React__default["default"].createElement("div", { onClick: onClick }, children)));
40388
+ label && (React__default["default"].createElement("div", { className: clsx$1(resolvedIcon
40389
+ ? "".concat(rootStyle, "-button-label")
40390
+ : "".concat(rootStyle, "-button-label-only"), { clickable: !!onClick }), onClick: onClick }, label)),
40391
+ badge && React__default["default"].createElement("div", { className: "".concat(rootStyle, "-button-badge") }, badge)),
40392
+ !!children && React__default["default"].createElement("div", null, children)));
40390
40393
  });
40391
40394
  var LuiCloseableHeaderMenuContextV2 = React$1.createContext({
40392
- isOpen: function () { return false; },
40395
+ isOpen: false,
40396
+ toggle: function () { },
40393
40397
  open: function () { },
40394
40398
  close: function () { }
40395
40399
  });
40400
+ var useLuiCloseableHeaderMenuContextV2 = function () {
40401
+ return React$1.useContext(LuiCloseableHeaderMenuContextV2);
40402
+ };
40396
40403
  var LuiCloseableHeaderMenuItemV2 = function (_a) {
40397
- var open = _a.open, setOpen = _a.setOpen, children = _a.children, props = __rest$1(_a, ["open", "setOpen", "children"]);
40404
+ var children = _a.children, menuControls = _a.menuControls, props = __rest$1(_a, ["children", "menuControls"]);
40405
+ var isOpen = menuControls.isOpen, setOpen = menuControls.setOpen, toggle = menuControls.toggle;
40406
+ // close on escape
40398
40407
  useEscapeFunction(function () { return setOpen(false); });
40399
- var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
40400
- if (!open) {
40408
+ var menuDiv = usePageClickFunction(function (event) { return event.stopPropagation(); }, // do nothing, let menu item click invoke toggle
40409
+ function (event) {
40410
+ // if it was open, close it
40411
+ if (isOpen) {
40401
40412
  event.stopPropagation();
40402
40413
  setOpen(false);
40403
40414
  }
40404
40415
  });
40405
- var menuControls = {
40406
- isOpen: function () { return open; },
40407
- open: function () { return setOpen(!open); },
40408
- close: function () { return setOpen(false); }
40409
- };
40410
- var menuItemProps = __assign$3({ onClick: function () { return menuControls.open(); } }, props);
40411
- return (React__default["default"].createElement(LuiCloseableHeaderMenuContext.Provider, { value: menuControls },
40416
+ var menuItemProps = __assign$3(__assign$3({ onClick: function () { return toggle(); } }, props), { isSelected: isOpen });
40417
+ return (React__default["default"].createElement(LuiCloseableHeaderMenuContextV2.Provider, { value: {
40418
+ isOpen: isOpen,
40419
+ toggle: toggle,
40420
+ open: function () { return setOpen(true); },
40421
+ close: function () { return setOpen(false); }
40422
+ } },
40412
40423
  React__default["default"].createElement(LuiHeaderMenuItemV2, __assign$3({ ref: menuDiv }, menuItemProps), !!children && children)));
40424
+ };
40425
+ var LuiMenuCloseButtonV2 = function (_a) {
40426
+ 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;
40427
+ var menu = useLuiCloseableHeaderMenuContextV2();
40428
+ return (React__default["default"].createElement("div", { onClick: function () { return menu.close(); }, style: { display: hide ? 'none' : 'block' }, "data-testid": dataTestId },
40429
+ React__default["default"].createElement(LuiIcon, { alt: "", name: icon, size: iconSize, color: iconColor })));
40413
40430
  };
40414
40431
 
40415
40432
  /**
@@ -40500,10 +40517,10 @@ var LuiDrawerMenuOptionsV2 = function (_a) {
40500
40517
  return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-options" }, children));
40501
40518
  };
40502
40519
  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.subMenu, subMenu = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
40504
- var menu = React$1.useContext(LuiCloseableHeaderMenuContextV2);
40520
+ 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;
40521
+ var menu = useLuiCloseableHeaderMenuContextV2();
40505
40522
  return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
40506
- if (!subMenu) {
40523
+ if (closeMenuOnClick) {
40507
40524
  menu.close();
40508
40525
  }
40509
40526
  onClick();
@@ -40513,28 +40530,53 @@ var LuiDrawerMenuOptionV2 = function (_a) {
40513
40530
  label),
40514
40531
  badge && (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-badge" }, badge))));
40515
40532
  };
40533
+ /**
40534
+ * Drawer menu support both sliding and dropdown
40535
+ */
40516
40536
  var LuiDrawerMenuV2 = function (_a) {
40517
- var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'lg' : _c, menuPropsCopy = __rest$1(_a, ["children", "hasStickyHeader", "size"]);
40518
- var _d = React$1.useState(false), open = _d[0], setOpen = _d[1];
40519
- var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen, icon: open ? 'ic_clear' : 'ic_menu', onClick: function () { return setOpen(function (preOpen) { return !preOpen; }); } });
40537
+ var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, // only applied when menu is drawer type
40538
+ _c = _a.size, // only applied when menu is drawer type
40539
+ size = _c === void 0 ? 'lg' : _c, _d = _a.type, type = _d === void 0 ? 'drawer' : _d, menuPropsCopy = __rest$1(_a, ["children", "hasStickyHeader", "size", "type"]);
40540
+ var _e = React$1.useState(false), open = _e[0], setOpen = _e[1];
40541
+ // if drawer is on dropdown mode, don't need to switch icon when open/close
40542
+ var icon = type === 'dropdown' ? 'ic_menu' : open ? 'ic_clear' : 'ic_menu';
40543
+ var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { icon: icon, menuControls: {
40544
+ isOpen: open,
40545
+ toggle: function () { return setOpen(function (preOpen) { return !preOpen; }); },
40546
+ setOpen: function (open) { return setOpen(open); }
40547
+ } });
40520
40548
  React$1.useEffect(function () {
40521
40549
  // Support for non-sticky headers. Scroll back to top when menu is opened
40522
- if (open && !hasStickyHeader) {
40550
+ if (type === 'drawer' && open && !hasStickyHeader) {
40523
40551
  window.scrollTo({ top: 0, behavior: 'smooth' });
40524
40552
  }
40525
- }, [open, hasStickyHeader]);
40553
+ }, [open, hasStickyHeader, type]);
40526
40554
  return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
40527
- React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer', size, {
40528
- open: open
40529
- }, { sticky: hasStickyHeader }, { 'non-sticky': !hasStickyHeader }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
40555
+ React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer-container', {
40556
+ drawer: type === 'drawer'
40557
+ }, { dropdown: type === 'dropdown' }) },
40558
+ React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer', size, {
40559
+ open: open
40560
+ }, { drawer: type === 'drawer' }, { dropdown: type === 'dropdown' }, { sticky: type === 'drawer' && hasStickyHeader }, { 'non-sticky': type === 'drawer' && !hasStickyHeader }), "data-testid": 'drawer', "aria-hidden": !open }, children))));
40530
40561
  };
40531
- var LuiDropdownMenuV2 = function (_a) {
40532
- var restOfProps = __rest$1(_a, []);
40533
- var children = restOfProps.children, _b = restOfProps.anchorOrigin, _c = _b === void 0 ? {
40562
+ /**
40563
+ * LuiDropdownMenuV2 dropdown content element
40564
+ */
40565
+ var LuiDropdownMenuV2DropContent = function (_a) {
40566
+ var children = _a.children;
40567
+ var menu = useLuiCloseableHeaderMenuContextV2();
40568
+ return React__default["default"].createElement("div", { onClick: function () { return menu.close(); } }, children);
40569
+ };
40570
+ var LuiDropdownMenuV2 = function (props) {
40571
+ var children = props.children, _a = props.anchorOrigin, _b = _a === void 0 ? {
40534
40572
  horizontal: 'left'
40535
- } : _b, _d = _c.horizontal, horizontal = _d === void 0 ? 'left' : _d, _e = restOfProps.size, size = _e === void 0 ? 'md' : _e, menuPropsCopy = __rest$1(restOfProps, ["children", "anchorOrigin", "size"]);
40536
- var _f = React$1.useState(false), open = _f[0], setOpen = _f[1];
40537
- var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen });
40573
+ } : _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"]);
40574
+ var _e = React$1.useState(false), open = _e[0], setOpen = _e[1];
40575
+ var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { menuControls: {
40576
+ isOpen: open,
40577
+ toggle: function () { return setOpen(function (preOpen) { return !preOpen; }); },
40578
+ setOpen: function (open) { return setOpen(open); }
40579
+ } });
40538
40580
  return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
40539
40581
  React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-dropdown-container" },
40540
40582
  React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-dropdown', { 'anchor-horizontal-icon-left': horizontal === 'left' }, {
@@ -40543,7 +40585,8 @@ var LuiDropdownMenuV2 = function (_a) {
40543
40585
  'anchor-horizontal-label-right': menuPropsCopy.label && horizontal === 'right'
40544
40586
  }, "dropdown-".concat(size), {
40545
40587
  open: open
40546
- }), "data-testid": 'dropdown', "aria-hidden": !open }, children))));
40588
+ }), "data-testid": 'dropdown', "aria-hidden": !open },
40589
+ React__default["default"].createElement(LuiDropdownMenuV2DropContent, null, children)))));
40547
40590
  };
40548
40591
  var LuiDrawerMenuSectionV2 = function (props) {
40549
40592
  var children = props.children, title = props.title, collapsible = props.collapsible;
@@ -40551,8 +40594,7 @@ var LuiDrawerMenuSectionV2 = function (props) {
40551
40594
  collapsible && (React__default["default"].createElement(LuiExpandableBanner, { label: title || '', className: "LuiDrawerMenuSectionV2-header" }, children)),
40552
40595
  !collapsible && (React__default["default"].createElement(React__default["default"].Fragment, null,
40553
40596
  title && (React__default["default"].createElement("div", { className: "LuiDrawerMenuSectionV2-header" },
40554
- React__default["default"].createElement("div", { className: 'lui-expand-header', style: { cursor: 'default' } },
40555
- React__default["default"].createElement("h3", null, title)))),
40597
+ React__default["default"].createElement("div", { className: 'lui-expand-header' }, title))),
40556
40598
  children))));
40557
40599
  };
40558
40600
  var LuiDrawerMenuDividerV2 = function () {
@@ -58608,6 +58650,7 @@ exports.LuiDrawerMenuSectionV2 = LuiDrawerMenuSectionV2;
58608
58650
  exports.LuiDrawerMenuV2 = LuiDrawerMenuV2;
58609
58651
  exports.LuiDropdownMenu = LuiDropdownMenu;
58610
58652
  exports.LuiDropdownMenuV2 = LuiDropdownMenuV2;
58653
+ exports.LuiDropdownMenuV2DropContent = LuiDropdownMenuV2DropContent;
58611
58654
  exports.LuiErrorPage = LuiErrorPage;
58612
58655
  exports.LuiExpandableBanner = LuiExpandableBanner;
58613
58656
  exports.LuiFileInputBox = LuiFileInputBox;
@@ -58636,6 +58679,7 @@ exports.LuiLoadingSpinnerChristmas = LuiLoadingSpinnerChristmas;
58636
58679
  exports.LuiLoadingSpinnerEaster = LuiLoadingSpinnerEaster;
58637
58680
  exports.LuiMenu = LuiMenu;
58638
58681
  exports.LuiMenuCloseButton = LuiMenuCloseButton;
58682
+ exports.LuiMenuCloseButtonV2 = LuiMenuCloseButtonV2;
58639
58683
  exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
58640
58684
  exports.LuiMiniSpinner = LuiMiniSpinner;
58641
58685
  exports.LuiModal = LuiModal;
@@ -58676,6 +58720,7 @@ exports.useClickedOutsideElement = useClickedOutsideElement;
58676
58720
  exports.useEscapeFunction = useEscapeFunction;
58677
58721
  exports.useLOLGlobalClientRefContext = useLOLGlobalClientRefContext;
58678
58722
  exports.useLOLUserContext = useLOLUserContext;
58723
+ exports.useLuiCloseableHeaderMenuContextV2 = useLuiCloseableHeaderMenuContextV2;
58679
58724
  exports.useLuiFloatingWindow = useFloatingWindow;
58680
58725
  exports.useMediaQuery = useMediaQuery;
58681
58726
  exports.usePageClickFunction = usePageClickFunction;