@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 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
@@ -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,iEAuHT,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,4EA+MpB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}
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"}
@@ -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,gBAOlB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
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"}
@@ -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<any> = "button">({ ...props }: MenuItemProps<P, T>) => JSX.Element;
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
@@ -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,8FA0Eb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
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
- size,
15
- isVirtual,
16
- ...props
17
- }, ref) => {
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
- focusRingClass: "has-focus",
73
- children: /* @__PURE__ */ jsx(Component, {
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("Menu-item", className, isHighlighted && "is-highlighted", nested && "Menu-item--nested", groupHeader && "Menu-item--header"),
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
- children: [Icon && /* @__PURE__ */ jsx("span", {
83
- className: "Menu-item-icon",
84
- children: /* @__PURE__ */ jsx(Icon, {
85
- size: "small"
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(Tooltip, {
93
- content: tooltip,
94
- rootElementStyle: {
95
- display: "block"
96
- },
97
- allowBoundaryElementOverflow: true,
98
- placement: tooltipPlacement ? tooltipPlacement : "bottom",
99
- ...tooltipOptions || {},
100
- children: renderedItem
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
- className: "Menu-search",
126
- children: /* @__PURE__ */ jsx(TextField, {
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
- searchElement
204
- }, child) => {
205
- var _a;
206
- switch (child.type) {
207
- case MenuSearch:
208
- return {
209
- items,
210
- searchElement: cloneElement(child, {
211
- onKeyDown: (e) => handleKeyboardInteractions(e, {
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
- searchElement
237
- };
238
- case MenuDivider:
239
- return {
240
- items: items.concat(child),
241
- searchElement
242
- };
243
- default:
244
- return {
245
- items,
246
- searchElement
247
- };
248
- }
249
- }, {
250
- items: [],
251
- searchElement: null
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
- "data-test-id": testId,
257
- isVirtual: true,
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
- "data-test-id": testId,
272
- size,
273
- children: [reduceItems.searchElement, /* @__PURE__ */ jsx(MenuItemList, {
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((index) => {
308
- rowVirtualizer.scrollToIndex(index);
309
- setNextFocusValue(index);
310
- }, [rowVirtualizer]);
311
- const handleKeyboardFocusInteraction = useCallback((direction) => {
312
- if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) {
313
- return;
314
- }
315
- const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
316
- const shouldWrap = direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0;
317
- if (shouldWrap) {
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
- return;
324
- }
325
- switch (direction) {
326
- case "next":
327
- rowVirtualizer.scrollToIndex(nextIndex);
328
- focusManager.focusNext();
329
- break;
330
- case "previous":
331
- rowVirtualizer.scrollToIndex(nextIndex);
332
- focusManager.focusPrevious();
333
- break;
334
- }
335
- }, [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]);
336
- const getItemProps = useCallback((itemElem, index) => {
337
- const childProps = itemElem.props;
338
- switch (itemElem.type) {
339
- case MenuItem:
340
- return {
341
- className: cx(childProps.className, menuItemClassName),
342
- onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
343
- handleFocusBackward: handleKeyboardFocusInteraction,
344
- handleFocusForward: handleKeyboardFocusInteraction
345
- }),
346
- onFocus: chainEventHandlers(childProps.onFocus, () => {
347
- focusedItemIndex.current = index;
348
- }),
349
- id: createItemId(index, menuId.current),
350
- onBlur: chainEventHandlers(childProps.onBlur, () => {
351
- focusedItemIndex.current = null;
352
- }),
353
- onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
354
- onSelect == null ? void 0 : onSelect(childProps.item);
355
- })
356
- };
357
- default:
358
- return {};
359
- }
360
- }, [handleKeyboardFocusInteraction, menuItemClassName, onSelect]);
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(() => searchElement ? cloneElement(searchElement, {
384
- onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
385
- handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
386
- handleFocusForward: () => focusMenuItem(0)
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
- ref: searchRef
389
- }) : null, [searchElement, lastVirtualItemIndex, focusMenuItem]);
390
- const renderItems = useMemo(() => rowVirtualizer.virtualItems.map((virtualRow) => {
391
- if (!items) {
392
- return null;
393
- }
394
- const elem = items[virtualRow.index];
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,