@launchpad-ui/menu 0.3.6 → 0.4.0

package/dist/index.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -41,29 +44,34 @@ var React = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Menu = require("./styles/Menu.css");
-var MenuBase = (0, import_react.forwardRef)(({ children, size, isVirtual, ...props }, ref) => {
-  const classes = (0, import_clsx.default)("Menu", {
-    "Menu--isVirtual": isVirtual,
-    [`MenuSize--${size}`]: size
-  });
-  return /* @__PURE__ */ React.createElement("div", {
-    ...props,
-    role: "menu",
-    className: classes,
-    ref
-  }, children);
-});
+var import_jsx_runtime = require("react/jsx-runtime");
+var MenuBase = (0, import_react.forwardRef)(
+  ({ children, size, isVirtual, ...props }, ref) => {
+    const classes = (0, import_clsx.default)("Menu", {
+      "Menu--isVirtual": isVirtual,
+      [`MenuSize--${size}`]: size
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      ...props,
+      role: "menu",
+      className: classes,
+      ref,
+      children
+    });
+  }
+);
 MenuBase.displayName = "MenuBase";
 
 // src/MenuDivider.tsx
 var import_separator = require("@react-aria/separator");
 var import_Menu2 = require("./styles/Menu.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var MenuDivider = ({ elementType = "div", orientation, innerRef }) => {
   const { separatorProps } = (0, import_separator.useSeparator)({
     orientation,
     elementType
   });
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     ...separatorProps,
     ref: innerRef,
     className: "Menu-divider"
@@ -78,6 +86,7 @@ var import_focus = require("@react-aria/focus");
 var import_clsx2 = __toESM(require("clsx"));
 var import_react_router_dom = require("react-router-dom");
 var import_Menu3 = require("./styles/Menu.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var defaultElement = "button";
 var MenuItem = ({
   ...props
@@ -101,28 +110,43 @@ var MenuItem = ({
     ...rest
   } = props;
   const Component = component || (asChild ? import_react_slot.Slot : defaultElement);
-  const renderedItem = /* @__PURE__ */ React.createElement(import_focus.FocusRing, {
-    focusRingClass: "has-focus"
-  }, /* @__PURE__ */ React.createElement(Component, {
-    ...rest,
-    disabled,
-    "aria-disabled": disabled ? disabled : void 0,
-    className: (0, import_clsx2.default)("Menu-item", className, { "is-highlighted": isHighlighted }, { "Menu-item--nested": nested }, { "Menu-item--header": groupHeader }),
-    role,
-    onKeyDown
-  }, asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, Icon && /* @__PURE__ */ React.createElement("span", {
-    className: "Menu-item-icon"
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    size: import_icons.IconSize.SMALL
-  })), children)));
+  const renderedItem = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus.FocusRing, {
+    focusRingClass: "has-focus",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
+      ...rest,
+      disabled,
+      "aria-disabled": disabled ? disabled : void 0,
+      className: (0, import_clsx2.default)(
+        "Menu-item",
+        className,
+        { "is-highlighted": isHighlighted },
+        { "Menu-item--nested": nested },
+        { "Menu-item--header": groupHeader }
+      ),
+      role,
+      onKeyDown,
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [
+          Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+            className: "Menu-item-icon",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+              size: import_icons.IconSize.SMALL
+            })
+          }),
+          children
+        ]
+      })
+    })
+  });
   if (tooltip) {
-    return /* @__PURE__ */ React.createElement(import_tooltip.Tooltip, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip, {
       content: tooltip,
       rootElementStyle: { display: "block" },
       allowBoundaryElementOverflow: true,
       placement: tooltipPlacement ? tooltipPlacement : "bottom",
-      ...tooltipOptions || {}
-    }, renderedItem);
+      ...tooltipOptions || {},
+      children: renderedItem
+    });
   }
   return renderedItem;
 };
@@ -142,40 +166,45 @@ var MenuItemLink = ({
     rel: newTab ? "noopener noreferrer" : void 0,
     target: newTab ? "_blank" : void 0
   };
-  return /* @__PURE__ */ React.createElement(MenuItem, {
-    ...finalProps
-  }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+    ...finalProps,
+    children
+  });
 };
 
 // src/MenuItemList.tsx
 var import_react2 = require("react");
 var import_Menu4 = require("./styles/Menu.css");
-var MenuItemList = (0, import_react2.forwardRef)(({ children, ...rest }, ref) => /* @__PURE__ */ React.createElement("div", {
+var import_jsx_runtime = require("react/jsx-runtime");
+var MenuItemList = (0, import_react2.forwardRef)(({ children, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
   ...rest,
   ref,
   "data-test-id": "menu-item-list",
-  className: "Menu-item-list"
-}, children));
+  className: "Menu-item-list",
+  children
+}));
 MenuItemList.displayName = "MenuItemList";
 
 // src/MenuSearch.tsx
 var import_form = require("@launchpad-ui/form");
 var import_react3 = require("react");
 var import_Menu5 = require("./styles/Menu.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var MenuSearch = (0, import_react3.forwardRef)((props, ref) => {
   const { ariaLabel, placeholder, ...finalProps } = props;
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "Menu-search"
-  }, /* @__PURE__ */ React.createElement(import_form.TextField, {
-    ...finalProps,
-    ref,
-    className: "Menu-search-input",
-    tiny: true,
-    type: "search",
-    autoComplete: "off",
-    placeholder,
-    "aria-label": ariaLabel || "Search"
-  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    className: "Menu-search",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form.TextField, {
+      ...finalProps,
+      ref,
+      className: "Menu-search-input",
+      tiny: true,
+      type: "search",
+      autoComplete: "off",
+      placeholder,
+      "aria-label": ariaLabel || "Search"
+    })
+  });
 });
 MenuSearch.displayName = "MenuSearch";
 
@@ -205,6 +234,7 @@ var chainEventHandlers = (...handlers) => (event) => {
 };
 
 // src/Menu.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var Menu = (props) => {
   const {
     children,
@@ -243,65 +273,76 @@ var Menu = (props) => {
       });
       return { items: elements, searchElement: searchElem };
     }
-    return childrenProps.reduce(({ items, searchElement }, child) => {
-      switch (child.type) {
-        case MenuSearch:
-          return {
-            items,
-            searchElement: (0, import_react4.cloneElement)(child, {
-              onKeyDown: (e) => handleKeyboardInteractions(e, {
-                handleDown: handleArrowDown,
-                handleUp: handleArrowUp
-              })
-            })
-          };
-        case MenuItem:
-        case MenuItemLink:
-          return {
-            items: items.concat(child.props.disabled ? (0, import_react4.cloneElement)(child, {
-              onClick: () => void 0,
-              onKeyDown: () => void 0,
-              tabIndex: -1,
-              disabled: true
-            }) : (0, import_react4.cloneElement)(child, {
-              className: (0, import_clsx3.default)(child.props.className, menuItemClassName),
-              item: child.props.item ?? items.length,
-              onClick: chainEventHandlers(child.props.onClick, () => {
-                onSelect?.(child.props.item ?? items.length);
-              }),
-              onKeyDown: (e) => handleKeyboardInteractions(e, {
-                handleDown: handleArrowDown,
-                handleUp: handleArrowUp
+    return childrenProps.reduce(
+      ({ items, searchElement }, child) => {
+        switch (child.type) {
+          case MenuSearch:
+            return {
+              items,
+              searchElement: (0, import_react4.cloneElement)(child, {
+                onKeyDown: (e) => handleKeyboardInteractions(e, {
+                  handleDown: handleArrowDown,
+                  handleUp: handleArrowUp
+                })
               })
-            })),
-            searchElement
-          };
-        case MenuDivider:
-          return { items: items.concat(child), searchElement };
-        default:
-          return { items, searchElement };
-      }
-    }, { items: [], searchElement: null });
+            };
+          case MenuItem:
+          case MenuItemLink:
+            return {
+              items: items.concat(
+                child.props.disabled ? (0, import_react4.cloneElement)(child, {
+                  onClick: () => void 0,
+                  onKeyDown: () => void 0,
+                  tabIndex: -1,
+                  disabled: true
+                }) : (0, import_react4.cloneElement)(child, {
+                  className: (0, import_clsx3.default)(child.props.className, menuItemClassName),
+                  item: child.props.item ?? items.length,
+                  onClick: chainEventHandlers(child.props.onClick, () => {
+                    onSelect?.(child.props.item ?? items.length);
+                  }),
+                  onKeyDown: (e) => handleKeyboardInteractions(e, {
+                    handleDown: handleArrowDown,
+                    handleUp: handleArrowUp
+                  })
+                })
+              ),
+              searchElement
+            };
+          case MenuDivider:
+            return { items: items.concat(child), searchElement };
+          default:
+            return { items, searchElement };
+        }
+      },
+      { items: [], searchElement: null }
+    );
   }, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);
   if (enableVirtualization) {
-    return /* @__PURE__ */ React.createElement(MenuBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuBase, {
       isVirtual: true,
-      size
-    }, /* @__PURE__ */ React.createElement(ItemVirtualizer, {
-      items: import_react4.Children.toArray(reduceItems.items),
-      searchElement: reduceItems.searchElement,
-      overscan,
-      menuItemClassName,
-      onSelect,
-      itemHeight,
-      focusManager
-    }));
+      size,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemVirtualizer, {
+        items: import_react4.Children.toArray(reduceItems.items),
+        searchElement: reduceItems.searchElement,
+        overscan,
+        menuItemClassName,
+        onSelect,
+        itemHeight,
+        focusManager
+      })
+    });
   }
-  return /* @__PURE__ */ React.createElement(MenuBase, {
-    size
-  }, reduceItems.searchElement, /* @__PURE__ */ React.createElement(MenuItemList, {
-    role: "presentation"
-  }, reduceItems.items));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuBase, {
+    size,
+    children: [
+      reduceItems.searchElement,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemList, {
+        role: "presentation",
+        children: reduceItems.items
+      })
+    ]
+  });
 };
 var ItemVirtualizer = (props) => {
   const {
@@ -330,63 +371,72 @@ var ItemVirtualizer = (props) => {
     rowVirtualizer.scrollToIndex(0);
     searchRef.current?.focus?.();
   }, [rowVirtualizer]);
-  const focusMenuItem = (0, import_react4.useCallback)((index) => {
-    rowVirtualizer.scrollToIndex(index);
-    setNextFocusValue(index);
-  }, [rowVirtualizer]);
-  const handleKeyboardFocusInteraction = (0, import_react4.useCallback)((direction) => {
-    if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) {
-      return;
-    }
-    const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
-    const shouldWrap = direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0;
-    if (shouldWrap) {
-      if (hasSearch) {
-        focusSearchBar();
-      } else {
-        focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
+  const focusMenuItem = (0, import_react4.useCallback)(
+    (index) => {
+      rowVirtualizer.scrollToIndex(index);
+      setNextFocusValue(index);
+    },
+    [rowVirtualizer]
+  );
+  const handleKeyboardFocusInteraction = (0, import_react4.useCallback)(
+    (direction) => {
+      if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) {
+        return;
       }
-      return;
-    }
-    switch (direction) {
-      case "next":
-        rowVirtualizer.scrollToIndex(nextIndex);
-        focusManager.focusNext();
-        break;
-      case "previous":
-        rowVirtualizer.scrollToIndex(nextIndex);
-        focusManager.focusPrevious();
-        break;
-      default:
-        break;
-    }
-  }, [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]);
-  const getItemProps = (0, import_react4.useCallback)((itemElem, index) => {
-    const childProps = itemElem.props;
-    switch (itemElem.type) {
-      case MenuItem:
-      case MenuItemLink:
-        return {
-          className: (0, import_clsx3.default)(childProps.className, menuItemClassName),
-          onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
-            handleFocusBackward: handleKeyboardFocusInteraction,
-            handleFocusForward: handleKeyboardFocusInteraction
-          }),
-          onFocus: chainEventHandlers(childProps.onFocus, () => {
-            focusedItemIndex.current = index;
-          }),
-          id: createItemId(index, menuId.current),
-          onBlur: chainEventHandlers(childProps.onBlur, () => {
-            focusedItemIndex.current = null;
-          }),
-          onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
-            onSelect?.(childProps.item);
-          })
-        };
-      default:
-        return {};
-    }
-  }, [handleKeyboardFocusInteraction, menuItemClassName, onSelect]);
+      const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
+      const shouldWrap = direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0;
+      if (shouldWrap) {
+        if (hasSearch) {
+          focusSearchBar();
+        } else {
+          focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
+        }
+        return;
+      }
+      switch (direction) {
+        case "next":
+          rowVirtualizer.scrollToIndex(nextIndex);
+          focusManager.focusNext();
+          break;
+        case "previous":
+          rowVirtualizer.scrollToIndex(nextIndex);
+          focusManager.focusPrevious();
+          break;
+        default:
+          break;
+      }
+    },
+    [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]
+  );
+  const getItemProps = (0, import_react4.useCallback)(
+    (itemElem, index) => {
+      const childProps = itemElem.props;
+      switch (itemElem.type) {
+        case MenuItem:
+        case MenuItemLink:
+          return {
+            className: (0, import_clsx3.default)(childProps.className, menuItemClassName),
+            onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
+              handleFocusBackward: handleKeyboardFocusInteraction,
+              handleFocusForward: handleKeyboardFocusInteraction
+            }),
+            onFocus: chainEventHandlers(childProps.onFocus, () => {
+              focusedItemIndex.current = index;
+            }),
+            id: createItemId(index, menuId.current),
+            onBlur: chainEventHandlers(childProps.onBlur, () => {
+              focusedItemIndex.current = null;
+            }),
+            onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
+              onSelect?.(childProps.item);
+            })
+          };
+        default:
+          return {};
+      }
+    },
+    [handleKeyboardFocusInteraction, menuItemClassName, onSelect]
+  );
   (0, import_react4.useEffect)(() => {
     if (nextFocusValue !== null) {
       requestAnimationFrame(() => {
@@ -408,38 +458,51 @@ var ItemVirtualizer = (props) => {
       }
     }
   };
-  const renderSearch = (0, import_react4.useMemo)(() => searchElement ? (0, import_react4.cloneElement)(searchElement, {
-    onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
-      handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
-      handleFocusForward: () => focusMenuItem(0)
-    }),
-    ref: searchRef
-  }) : null, [searchElement, lastVirtualItemIndex, focusMenuItem]);
-  const renderItems = (0, import_react4.useMemo)(() => rowVirtualizer.virtualItems.map((virtualRow) => {
-    if (!items) {
-      return null;
-    }
-    const elem = items[virtualRow.index];
-    return /* @__PURE__ */ React.createElement("div", {
-      key: virtualRow.index,
-      ref: elem.type !== MenuItem || elem.type !== MenuItemLink ? virtualRow.measureRef : void 0,
-      role: "presentation",
-      className: (0, import_clsx3.default)("VirtualMenu-item"),
-      style: {
-        transform: `translateY(${virtualRow.start}px)`
+  const renderSearch = (0, import_react4.useMemo)(
+    () => searchElement ? (0, import_react4.cloneElement)(searchElement, {
+      onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
+        handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
+        handleFocusForward: () => focusMenuItem(0)
+      }),
+      ref: searchRef
+    }) : null,
+    [searchElement, lastVirtualItemIndex, focusMenuItem]
+  );
+  const renderItems = (0, import_react4.useMemo)(
+    () => rowVirtualizer.virtualItems.map((virtualRow) => {
+      if (!items) {
+        return null;
       }
-    }, (0, import_react4.cloneElement)(elem, getItemProps(elem, virtualRow.index)));
-  }), [rowVirtualizer.virtualItems, items, getItemProps]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, renderSearch, /* @__PURE__ */ React.createElement(MenuItemList, {
-    ref: parentRef,
-    role: "presentation"
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "presentation",
-    className: "VirtualMenu-item-list",
-    style: {
-      height: `${rowVirtualizer.totalSize}px`
-    }
-  }, renderItems)));
+      const elem = items[virtualRow.index];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        ref: elem.type !== MenuItem || elem.type !== MenuItemLink ? virtualRow.measureRef : void 0,
+        role: "presentation",
+        className: (0, import_clsx3.default)("VirtualMenu-item"),
+        style: {
+          transform: `translateY(${virtualRow.start}px)`
+        },
+        children: (0, import_react4.cloneElement)(elem, getItemProps(elem, virtualRow.index))
+      }, virtualRow.index);
+    }),
+    [rowVirtualizer.virtualItems, items, getItemProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+      renderSearch,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemList, {
+        ref: parentRef,
+        role: "presentation",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+          role: "presentation",
+          className: "VirtualMenu-item-list",
+          style: {
+            height: `${rowVirtualizer.totalSize}px`
+          },
+          children: renderItems
+        })
+      })
+    ]
+  });
 };
 
 // src/types.ts