@launchpad-ui/menu 0.10.0 → 0.10.2
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/dist/Menu.d.ts +2 -2
- package/dist/Menu.d.ts.map +1 -1
- package/dist/MenuDivider.d.ts +1 -1
- package/dist/MenuDivider.d.ts.map +1 -1
- package/dist/MenuItem.d.ts +1 -1
- package/dist/MenuItem.d.ts.map +1 -1
- package/dist/index.es.js +200 -222
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +201 -223
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/Menu.d.ts
CHANGED
@@ -31,13 +31,13 @@ type ControlledMenuProps<T> = {
|
|
31
31
|
'data-test-id'?: string;
|
32
32
|
};
|
33
33
|
type MenuProps<T extends number | string> = ControlledMenuProps<T>;
|
34
|
-
declare const Menu: <T extends string | number>(props: MenuProps<T>) => JSX.Element;
|
34
|
+
declare const Menu: <T extends string | number>(props: MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
|
35
35
|
type ItemVirtualizerProps<T> = Omit<ControlledMenuProps<T>, 'children'> & {
|
36
36
|
items: ReactElement[] | null;
|
37
37
|
searchElement?: ReactElement | null;
|
38
38
|
focusManager: FocusManager;
|
39
39
|
};
|
40
|
-
declare const ItemVirtualizer: <T extends string | number>(props: ItemVirtualizerProps<T>) => JSX.Element;
|
40
|
+
declare const ItemVirtualizer: <T extends string | number>(props: ItemVirtualizerProps<T>) => import("react/jsx-runtime").JSX.Element;
|
41
41
|
export { Menu, ItemVirtualizer };
|
42
42
|
export type { MenuProps, ItemVirtualizerProps };
|
43
43
|
//# sourceMappingURL=Menu.d.ts.map
|
package/dist/Menu.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BpE,KAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAEnE,QAAA,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BpE,KAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAEnE,QAAA,MAAM,IAAI,6FAuHT,CAAC;AAEF,KAAK,oBAAoB,CAAC,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,eAAe,wGA+MpB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/MenuDivider.d.ts
CHANGED
@@ -5,7 +5,7 @@ type MenuDividerProps = SeparatorProps & {
|
|
5
5
|
innerRef?: RefObject<HTMLDivElement>;
|
6
6
|
'data-test-id'?: string;
|
7
7
|
};
|
8
|
-
declare const MenuDivider: ({ elementType, orientation, innerRef, "data-test-id": testId, }: MenuDividerProps) => JSX.Element;
|
8
|
+
declare const MenuDivider: ({ elementType, orientation, innerRef, "data-test-id": testId, }: MenuDividerProps) => import("react/jsx-runtime").JSX.Element;
|
9
9
|
export { MenuDivider };
|
10
10
|
export type { MenuDividerProps };
|
11
11
|
//# sourceMappingURL=MenuDivider.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuDivider.d.ts","sourceRoot":"","sources":["../src/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,gBAAgB,GAAG,cAAc,GAAG;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,WAAW,oEAKd,gBAAgB,
|
1
|
+
{"version":3,"file":"MenuDivider.d.ts","sourceRoot":"","sources":["../src/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,gBAAgB,GAAG,cAAc,GAAG;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,WAAW,oEAKd,gBAAgB,4CAOlB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
|
package/dist/MenuItem.d.ts
CHANGED
@@ -26,7 +26,7 @@ type MenuItemProps<P, T extends ElementType = typeof defaultElement> = Polymorph
|
|
26
26
|
}) | (MenuItemOwnProps & {
|
27
27
|
item?: undefined;
|
28
28
|
}), T>;
|
29
|
-
declare const MenuItem: <P, T extends ElementType
|
29
|
+
declare const MenuItem: <P, T extends ElementType = "button">({ ...props }: MenuItemProps<P, T>) => import("react/jsx-runtime").JSX.Element;
|
30
30
|
export { MenuItem };
|
31
31
|
export type { MenuItemProps };
|
32
32
|
//# sourceMappingURL=MenuItem.d.ts.map
|
package/dist/MenuItem.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKhD,OAAO,mBAAmB,CAAC;AAG3B,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAExC,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAE1E,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,KAAK,CAC5D,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACjC,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACtC,qBAAqB,CAAC,CAAC,CAAC,EAC5B,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc,WAAW,CAAC;AAEhC,KAAK,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,GAAG,OAAO,cAAc,IAAI,uBAAuB,CAC1F,CAAC,gBAAgB,GAAG;IAClB,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,GACF,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,EACJ,CAAC,CACF,CAAC;AAEF,QAAA,MAAM,QAAQ,
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKhD,OAAO,mBAAmB,CAAC;AAG3B,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAExC,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAE1E,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,KAAK,CAC5D,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACjC,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACtC,qBAAqB,CAAC,CAAC,CAAC,EAC5B,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc,WAAW,CAAC;AAEhC,KAAK,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,GAAG,OAAO,cAAc,IAAI,uBAAuB,CAC1F,CAAC,gBAAgB,GAAG;IAClB,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,GACF,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,EACJ,CAAC,CACF,CAAC;AAEF,QAAA,MAAM,QAAQ,qHA0Eb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/index.es.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import './style.css';
|
2
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
2
3
|
import { cx } from "classix";
|
3
4
|
import { forwardRef, useCallback, useMemo, Children, cloneElement, useRef, useId, useState, useEffect } from "react";
|
4
|
-
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
5
5
|
import { useSeparator } from "@react-aria/separator";
|
6
6
|
import { Tooltip } from "@launchpad-ui/tooltip";
|
7
7
|
import { Slot } from "@radix-ui/react-slot";
|
@@ -9,21 +9,12 @@ import { FocusRing, useFocusManager } from "@react-aria/focus";
|
|
9
9
|
import { TextField } from "@launchpad-ui/form";
|
10
10
|
import { useVirtual } from "react-virtual";
|
11
11
|
const Menu$1 = "";
|
12
|
-
const MenuBase = forwardRef(
|
13
|
-
children,
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
const classes = cx("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
|
19
|
-
return /* @__PURE__ */ jsx("div", {
|
20
|
-
...props,
|
21
|
-
role: "menu",
|
22
|
-
className: classes,
|
23
|
-
ref,
|
24
|
-
children
|
25
|
-
});
|
26
|
-
});
|
12
|
+
const MenuBase = forwardRef(
|
13
|
+
({ children, size, isVirtual, ...props }, ref) => {
|
14
|
+
const classes = cx("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
|
15
|
+
return /* @__PURE__ */ jsx("div", { ...props, role: "menu", className: classes, ref, children });
|
16
|
+
}
|
17
|
+
);
|
27
18
|
MenuBase.displayName = "MenuBase";
|
28
19
|
const MenuDivider = ({
|
29
20
|
elementType = "div",
|
@@ -31,24 +22,18 @@ const MenuDivider = ({
|
|
31
22
|
innerRef,
|
32
23
|
"data-test-id": testId = "menu-divider"
|
33
24
|
}) => {
|
34
|
-
const {
|
35
|
-
separatorProps
|
36
|
-
} = useSeparator({
|
25
|
+
const { separatorProps } = useSeparator({
|
37
26
|
orientation,
|
38
27
|
elementType
|
39
28
|
});
|
40
|
-
return /* @__PURE__ */ jsx("div", {
|
41
|
-
...separatorProps,
|
42
|
-
"data-test-id": testId,
|
43
|
-
ref: innerRef,
|
44
|
-
className: "Menu-divider"
|
45
|
-
});
|
29
|
+
return /* @__PURE__ */ jsx("div", { ...separatorProps, "data-test-id": testId, ref: innerRef, className: "Menu-divider" });
|
46
30
|
};
|
47
31
|
const defaultElement = "button";
|
48
32
|
const MenuItem = ({
|
49
33
|
...props
|
50
34
|
}) => {
|
51
35
|
const {
|
36
|
+
// TODO: remove component prop once we migrate over to asChild format
|
52
37
|
component,
|
53
38
|
children,
|
54
39
|
isHighlighted,
|
@@ -68,50 +53,44 @@ const MenuItem = ({
|
|
68
53
|
...rest
|
69
54
|
} = props;
|
70
55
|
const Component = component || (asChild ? Slot : defaultElement);
|
71
|
-
const renderedItem = /* @__PURE__ */ jsx(FocusRing, {
|
72
|
-
|
73
|
-
|
56
|
+
const renderedItem = /* @__PURE__ */ jsx(FocusRing, { focusRingClass: "has-focus", children: /* @__PURE__ */ jsx(
|
57
|
+
Component,
|
58
|
+
{
|
74
59
|
...rest,
|
75
60
|
disabled,
|
76
61
|
"aria-disabled": disabled ? disabled : void 0,
|
77
|
-
className: cx(
|
62
|
+
className: cx(
|
63
|
+
"Menu-item",
|
64
|
+
className,
|
65
|
+
isHighlighted && "is-highlighted",
|
66
|
+
nested && "Menu-item--nested",
|
67
|
+
groupHeader && "Menu-item--header"
|
68
|
+
),
|
78
69
|
"data-test-id": testId,
|
79
70
|
role,
|
80
71
|
onKeyDown,
|
81
|
-
children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, {
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
}), children]
|
88
|
-
})
|
89
|
-
})
|
90
|
-
});
|
72
|
+
children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
|
73
|
+
Icon && /* @__PURE__ */ jsx("span", { className: "Menu-item-icon", children: /* @__PURE__ */ jsx(Icon, { size: "small" }) }),
|
74
|
+
children
|
75
|
+
] })
|
76
|
+
}
|
77
|
+
) });
|
91
78
|
if (tooltip) {
|
92
|
-
return /* @__PURE__ */ jsx(
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
79
|
+
return /* @__PURE__ */ jsx(
|
80
|
+
Tooltip,
|
81
|
+
{
|
82
|
+
content: tooltip,
|
83
|
+
rootElementStyle: { display: "block" },
|
84
|
+
allowBoundaryElementOverflow: true,
|
85
|
+
placement: tooltipPlacement ? tooltipPlacement : "bottom",
|
86
|
+
...tooltipOptions || {},
|
87
|
+
children: renderedItem
|
88
|
+
}
|
89
|
+
);
|
102
90
|
}
|
103
91
|
return renderedItem;
|
104
92
|
};
|
105
|
-
const MenuItemList = forwardRef(({
|
106
|
-
children,
|
107
|
-
...rest
|
108
|
-
}, ref) => /* @__PURE__ */ jsx("div", {
|
109
|
-
...rest,
|
110
|
-
ref,
|
111
|
-
"data-test-id": "menu-item-list",
|
112
|
-
className: "Menu-item-list",
|
113
|
-
children
|
114
|
-
}));
|
93
|
+
const MenuItemList = forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ...rest, ref, "data-test-id": "menu-item-list", className: "Menu-item-list", children }));
|
115
94
|
MenuItemList.displayName = "MenuItemList";
|
116
95
|
const MenuSearch = forwardRef((props, ref) => {
|
117
96
|
const {
|
@@ -121,9 +100,9 @@ const MenuSearch = forwardRef((props, ref) => {
|
|
121
100
|
"data-test-id": testId = "menu-search",
|
122
101
|
...finalProps
|
123
102
|
} = props;
|
124
|
-
return /* @__PURE__ */ jsx("div", {
|
125
|
-
|
126
|
-
|
103
|
+
return /* @__PURE__ */ jsx("div", { className: "Menu-search", children: /* @__PURE__ */ jsx(
|
104
|
+
TextField,
|
105
|
+
{
|
127
106
|
...finalProps,
|
128
107
|
ref,
|
129
108
|
className: "Menu-search-input",
|
@@ -134,8 +113,8 @@ const MenuSearch = forwardRef((props, ref) => {
|
|
134
113
|
autoComplete: "off",
|
135
114
|
placeholder,
|
136
115
|
"aria-label": ariaLabel || "Search"
|
137
|
-
}
|
138
|
-
});
|
116
|
+
}
|
117
|
+
) });
|
139
118
|
});
|
140
119
|
MenuSearch.displayName = "MenuSearch";
|
141
120
|
const createItemId = (index, id) => `${id}-item-${index}`;
|
@@ -168,14 +147,10 @@ const Menu = (props) => {
|
|
168
147
|
} = props;
|
169
148
|
const focusManager = useFocusManager();
|
170
149
|
const handleArrowDown = useCallback(() => {
|
171
|
-
focusManager.focusNext({
|
172
|
-
wrap: true
|
173
|
-
});
|
150
|
+
focusManager.focusNext({ wrap: true });
|
174
151
|
}, [focusManager]);
|
175
152
|
const handleArrowUp = useCallback(() => {
|
176
|
-
focusManager.focusPrevious({
|
177
|
-
wrap: true
|
178
|
-
});
|
153
|
+
focusManager.focusPrevious({ wrap: true });
|
179
154
|
}, [focusManager]);
|
180
155
|
const reduceItems = useMemo(() => {
|
181
156
|
const childrenProps = Children.toArray(children);
|
@@ -193,70 +168,57 @@ const Menu = (props) => {
|
|
193
168
|
break;
|
194
169
|
}
|
195
170
|
});
|
196
|
-
return {
|
197
|
-
items: elements,
|
198
|
-
searchElement: searchElem
|
199
|
-
};
|
171
|
+
return { items: elements, searchElement: searchElem };
|
200
172
|
}
|
201
|
-
return childrenProps.reduce(
|
202
|
-
items,
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
handleDown: handleArrowDown,
|
213
|
-
handleUp: handleArrowUp
|
214
|
-
})
|
215
|
-
})
|
216
|
-
};
|
217
|
-
case MenuItem:
|
218
|
-
return {
|
219
|
-
items: items.concat(child.props.disabled ? cloneElement(child, {
|
220
|
-
onClick: () => void 0,
|
221
|
-
onKeyDown: () => void 0,
|
222
|
-
tabIndex: -1,
|
223
|
-
disabled: true
|
224
|
-
}) : cloneElement(child, {
|
225
|
-
className: cx(child.props.className, menuItemClassName),
|
226
|
-
item: (_a = child.props.item) != null ? _a : items.length,
|
227
|
-
onClick: chainEventHandlers(child.props.onClick, () => {
|
228
|
-
var _a2;
|
229
|
-
onSelect == null ? void 0 : onSelect((_a2 = child.props.item) != null ? _a2 : items.length);
|
230
|
-
}),
|
231
|
-
onKeyDown: (e) => handleKeyboardInteractions(e, {
|
232
|
-
handleDown: handleArrowDown,
|
233
|
-
handleUp: handleArrowUp
|
173
|
+
return childrenProps.reduce(
|
174
|
+
({ items, searchElement }, child) => {
|
175
|
+
switch (child.type) {
|
176
|
+
case MenuSearch:
|
177
|
+
return {
|
178
|
+
items,
|
179
|
+
searchElement: cloneElement(child, {
|
180
|
+
onKeyDown: (e) => handleKeyboardInteractions(e, {
|
181
|
+
handleDown: handleArrowDown,
|
182
|
+
handleUp: handleArrowUp
|
183
|
+
})
|
234
184
|
})
|
235
|
-
}
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
185
|
+
};
|
186
|
+
case MenuItem:
|
187
|
+
return {
|
188
|
+
items: items.concat(
|
189
|
+
child.props.disabled ? cloneElement(child, {
|
190
|
+
onClick: () => void 0,
|
191
|
+
onKeyDown: () => void 0,
|
192
|
+
tabIndex: -1,
|
193
|
+
disabled: true
|
194
|
+
}) : cloneElement(child, {
|
195
|
+
className: cx(child.props.className, menuItemClassName),
|
196
|
+
item: child.props.item ?? items.length,
|
197
|
+
// set focus on the first menu item if there is no search input, and set in the tab order
|
198
|
+
onClick: chainEventHandlers(child.props.onClick, () => {
|
199
|
+
onSelect == null ? void 0 : onSelect(child.props.item ?? items.length);
|
200
|
+
}),
|
201
|
+
onKeyDown: (e) => handleKeyboardInteractions(e, {
|
202
|
+
handleDown: handleArrowDown,
|
203
|
+
handleUp: handleArrowUp
|
204
|
+
})
|
205
|
+
})
|
206
|
+
),
|
207
|
+
searchElement
|
208
|
+
};
|
209
|
+
case MenuDivider:
|
210
|
+
return { items: items.concat(child), searchElement };
|
211
|
+
default:
|
212
|
+
return { items, searchElement };
|
213
|
+
}
|
214
|
+
},
|
215
|
+
{ items: [], searchElement: null }
|
216
|
+
);
|
253
217
|
}, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);
|
254
218
|
if (enableVirtualization) {
|
255
|
-
return /* @__PURE__ */ jsx(MenuBase, {
|
256
|
-
|
257
|
-
|
258
|
-
size,
|
259
|
-
children: /* @__PURE__ */ jsx(ItemVirtualizer, {
|
219
|
+
return /* @__PURE__ */ jsx(MenuBase, { "data-test-id": testId, isVirtual: true, size, children: /* @__PURE__ */ jsx(
|
220
|
+
ItemVirtualizer,
|
221
|
+
{
|
260
222
|
items: Children.toArray(reduceItems.items),
|
261
223
|
searchElement: reduceItems.searchElement,
|
262
224
|
overscan,
|
@@ -264,17 +226,13 @@ const Menu = (props) => {
|
|
264
226
|
onSelect,
|
265
227
|
itemHeight,
|
266
228
|
focusManager
|
267
|
-
}
|
268
|
-
});
|
229
|
+
}
|
230
|
+
) });
|
269
231
|
}
|
270
|
-
return /* @__PURE__ */ jsxs(MenuBase, {
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
role: "presentation",
|
275
|
-
children: reduceItems.items
|
276
|
-
})]
|
277
|
-
});
|
232
|
+
return /* @__PURE__ */ jsxs(MenuBase, { "data-test-id": testId, size, children: [
|
233
|
+
reduceItems.searchElement,
|
234
|
+
/* @__PURE__ */ jsx(MenuItemList, { role: "presentation", children: reduceItems.items })
|
235
|
+
] });
|
278
236
|
};
|
279
237
|
const ItemVirtualizer = (props) => {
|
280
238
|
const {
|
@@ -304,60 +262,70 @@ const ItemVirtualizer = (props) => {
|
|
304
262
|
rowVirtualizer.scrollToIndex(0);
|
305
263
|
(_b = (_a = searchRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
306
264
|
}, [rowVirtualizer]);
|
307
|
-
const focusMenuItem = useCallback(
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
if (hasSearch) {
|
319
|
-
focusSearchBar();
|
320
|
-
} else {
|
321
|
-
focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
|
265
|
+
const focusMenuItem = useCallback(
|
266
|
+
(index) => {
|
267
|
+
rowVirtualizer.scrollToIndex(index);
|
268
|
+
setNextFocusValue(index);
|
269
|
+
},
|
270
|
+
[rowVirtualizer]
|
271
|
+
);
|
272
|
+
const handleKeyboardFocusInteraction = useCallback(
|
273
|
+
(direction) => {
|
274
|
+
if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) {
|
275
|
+
return;
|
322
276
|
}
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
277
|
+
const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
|
278
|
+
const shouldWrap = direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0;
|
279
|
+
if (shouldWrap) {
|
280
|
+
if (hasSearch) {
|
281
|
+
focusSearchBar();
|
282
|
+
} else {
|
283
|
+
focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
|
284
|
+
}
|
285
|
+
return;
|
286
|
+
}
|
287
|
+
switch (direction) {
|
288
|
+
case "next":
|
289
|
+
rowVirtualizer.scrollToIndex(nextIndex);
|
290
|
+
focusManager.focusNext();
|
291
|
+
break;
|
292
|
+
case "previous":
|
293
|
+
rowVirtualizer.scrollToIndex(nextIndex);
|
294
|
+
focusManager.focusPrevious();
|
295
|
+
break;
|
296
|
+
}
|
297
|
+
},
|
298
|
+
[focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]
|
299
|
+
);
|
300
|
+
const getItemProps = useCallback(
|
301
|
+
(itemElem, index) => {
|
302
|
+
const childProps = itemElem.props;
|
303
|
+
switch (itemElem.type) {
|
304
|
+
case MenuItem:
|
305
|
+
return {
|
306
|
+
className: cx(childProps.className, menuItemClassName),
|
307
|
+
// set focus on the first menu item if there is no search input, and set in the tab order
|
308
|
+
onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
|
309
|
+
handleFocusBackward: handleKeyboardFocusInteraction,
|
310
|
+
handleFocusForward: handleKeyboardFocusInteraction
|
311
|
+
}),
|
312
|
+
onFocus: chainEventHandlers(childProps.onFocus, () => {
|
313
|
+
focusedItemIndex.current = index;
|
314
|
+
}),
|
315
|
+
id: createItemId(index, menuId.current),
|
316
|
+
onBlur: chainEventHandlers(childProps.onBlur, () => {
|
317
|
+
focusedItemIndex.current = null;
|
318
|
+
}),
|
319
|
+
onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
|
320
|
+
onSelect == null ? void 0 : onSelect(childProps.item);
|
321
|
+
})
|
322
|
+
};
|
323
|
+
default:
|
324
|
+
return {};
|
325
|
+
}
|
326
|
+
},
|
327
|
+
[handleKeyboardFocusInteraction, menuItemClassName, onSelect]
|
328
|
+
);
|
361
329
|
useEffect(() => {
|
362
330
|
if (nextFocusValue !== null) {
|
363
331
|
requestAnimationFrame(() => {
|
@@ -380,42 +348,52 @@ const ItemVirtualizer = (props) => {
|
|
380
348
|
}
|
381
349
|
}
|
382
350
|
};
|
383
|
-
const renderSearch = useMemo(
|
384
|
-
|
385
|
-
|
386
|
-
|
351
|
+
const renderSearch = useMemo(
|
352
|
+
() => searchElement ? cloneElement(searchElement, {
|
353
|
+
onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
|
354
|
+
handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
|
355
|
+
handleFocusForward: () => focusMenuItem(0)
|
356
|
+
}),
|
357
|
+
ref: searchRef
|
358
|
+
}) : null,
|
359
|
+
[searchElement, lastVirtualItemIndex, focusMenuItem]
|
360
|
+
);
|
361
|
+
const renderItems = useMemo(
|
362
|
+
() => rowVirtualizer.virtualItems.map((virtualRow) => {
|
363
|
+
if (!items) {
|
364
|
+
return null;
|
365
|
+
}
|
366
|
+
const elem = items[virtualRow.index];
|
367
|
+
return /* @__PURE__ */ jsx(
|
368
|
+
"div",
|
369
|
+
{
|
370
|
+
ref: virtualRow.measureRef,
|
371
|
+
role: "presentation",
|
372
|
+
className: cx("VirtualMenu-item"),
|
373
|
+
style: {
|
374
|
+
transform: `translateY(${virtualRow.start}px)`
|
375
|
+
},
|
376
|
+
children: cloneElement(elem, getItemProps(elem, virtualRow.index))
|
377
|
+
},
|
378
|
+
virtualRow.index
|
379
|
+
);
|
387
380
|
}),
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
return /* @__PURE__ */ jsx("div", {
|
396
|
-
ref: virtualRow.measureRef,
|
397
|
-
role: "presentation",
|
398
|
-
className: cx("VirtualMenu-item"),
|
399
|
-
style: {
|
400
|
-
transform: `translateY(${virtualRow.start}px)`
|
401
|
-
},
|
402
|
-
children: cloneElement(elem, getItemProps(elem, virtualRow.index))
|
403
|
-
}, virtualRow.index);
|
404
|
-
}), [rowVirtualizer.virtualItems, items, getItemProps]);
|
405
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
406
|
-
children: [renderSearch, /* @__PURE__ */ jsx(MenuItemList, {
|
407
|
-
ref: parentRef,
|
408
|
-
role: "presentation",
|
409
|
-
children: /* @__PURE__ */ jsx("div", {
|
381
|
+
[rowVirtualizer.virtualItems, items, getItemProps]
|
382
|
+
);
|
383
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
384
|
+
renderSearch,
|
385
|
+
/* @__PURE__ */ jsx(MenuItemList, { ref: parentRef, role: "presentation", children: /* @__PURE__ */ jsx(
|
386
|
+
"div",
|
387
|
+
{
|
410
388
|
role: "presentation",
|
411
389
|
className: "VirtualMenu-item-list",
|
412
390
|
style: {
|
413
391
|
height: `${rowVirtualizer.totalSize}px`
|
414
392
|
},
|
415
393
|
children: renderItems
|
416
|
-
}
|
417
|
-
})
|
418
|
-
});
|
394
|
+
}
|
395
|
+
) })
|
396
|
+
] });
|
419
397
|
};
|
420
398
|
export {
|
421
399
|
Menu,
|