@launchpad-ui/menu 0.12.6 → 0.12.8

package/dist/index.js

@@ -31,16 +31,21 @@ const styles = {
   "VirtualMenu-item-list": "_VirtualMenu-item-list_dlpdi_142",
   "VirtualMenu-item": "_VirtualMenu-item_dlpdi_142"
 };
-const MenuBase = /* @__PURE__ */ react.forwardRef(
-  ({ children, size, isVirtual, ...props }, ref) => {
-    const classes = classix.cx(
-      styles.Menu,
-      isVirtual && styles["Menu--isVirtual"],
-      size && styles[`MenuSize--${size}`]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, role: "menu", className: classes, ref, children });
-  }
-);
+const MenuBase = /* @__PURE__ */ react.forwardRef(({
+  children,
+  size,
+  isVirtual,
+  ...props
+}, ref) => {
+  const classes = classix.cx(styles.Menu, isVirtual && styles["Menu--isVirtual"], size && styles[`MenuSize--${size}`]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...props,
+    role: "menu",
+    className: classes,
+    ref,
+    children
+  });
+});
 MenuBase.displayName = "MenuBase";
 const MenuDivider = ({
   elementType = "div",
@@ -48,19 +53,18 @@ const MenuDivider = ({
   innerRef,
   "data-test-id": testId = "menu-divider"
 }) => {
-  const { separatorProps } = separator.useSeparator({
+  const {
+    separatorProps
+  } = separator.useSeparator({
     orientation,
     elementType
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...separatorProps,
-      "data-test-id": testId,
-      ref: innerRef,
-      className: styles["Menu-divider"]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...separatorProps,
+    "data-test-id": testId,
+    ref: innerRef,
+    className: styles["Menu-divider"]
+  });
 };
 const defaultElement = "button";
 const MenuItem = ({
@@ -87,45 +91,51 @@ const MenuItem = ({
     ...rest
   } = props;
   const Component = component || (asChild ? reactSlot.Slot : defaultElement);
-  const renderIcon = icon && /* @__PURE__ */ react.cloneElement(icon, { size: "small" });
-  const renderedItem = /* @__PURE__ */ jsxRuntime.jsx(focus.FocusRing, { focusRingClass: styles["has-focus"], children: /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
+  const renderIcon = icon && /* @__PURE__ */ react.cloneElement(icon, {
+    size: "small"
+  });
+  const renderedItem = /* @__PURE__ */ jsxRuntime.jsx(focus.FocusRing, {
+    focusRingClass: styles["has-focus"],
+    children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...rest,
       disabled,
       "aria-disabled": disabled ? disabled : void 0,
-      className: classix.cx(
-        styles["Menu-item"],
-        className,
-        isHighlighted && styles["is-highlighted"],
-        nested && styles["Menu-item--nested"],
-        groupHeader && styles["Menu-item--header"]
-      ),
+      className: classix.cx(styles["Menu-item"], className, isHighlighted && styles["is-highlighted"], nested && styles["Menu-item--nested"], groupHeader && styles["Menu-item--header"]),
       "data-test-id": testId,
       role,
       onKeyDown,
-      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles["Menu-item-icon"], children: renderIcon }),
-        children
-      ] })
-    }
-  ) });
+      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: styles["Menu-item-icon"],
+          children: renderIcon
+        }), children]
+      })
+    })
+  });
   if (tooltip$1) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      tooltip.Tooltip,
-      {
-        content: tooltip$1,
-        rootElementStyle: { display: "block" },
-        allowBoundaryElementOverflow: true,
-        placement: tooltipPlacement ? tooltipPlacement : "bottom",
-        ...tooltipOptions || {},
-        children: renderedItem
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, {
+      content: tooltip$1,
+      rootElementStyle: {
+        display: "block"
+      },
+      allowBoundaryElementOverflow: true,
+      placement: tooltipPlacement ? tooltipPlacement : "bottom",
+      ...tooltipOptions || {},
+      children: renderedItem
+    });
   }
   return renderedItem;
 };
-const MenuItemList = /* @__PURE__ */ react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, "data-test-id": "menu-item-list", className: styles["Menu-item-list"], children }));
+const MenuItemList = /* @__PURE__ */ react.forwardRef(({
+  children,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+  ...rest,
+  ref,
+  "data-test-id": "menu-item-list",
+  className: styles["Menu-item-list"],
+  children
+}));
 MenuItemList.displayName = "MenuItemList";
 const MenuSearch = /* @__PURE__ */ react.forwardRef((props, ref) => {
   const {
@@ -135,9 +145,9 @@ const MenuSearch = /* @__PURE__ */ react.forwardRef((props, ref) => {
     "data-test-id": testId = "menu-search",
     ...finalProps
   } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles["Menu-search"], children: /* @__PURE__ */ jsxRuntime.jsx(
-    form.TextField,
-    {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: styles["Menu-search"],
+    children: /* @__PURE__ */ jsxRuntime.jsx(form.TextField, {
       ...finalProps,
       ref,
       className: styles["Menu-search-input"],
@@ -148,8 +158,8 @@ const MenuSearch = /* @__PURE__ */ react.forwardRef((props, ref) => {
       autoComplete: "off",
       placeholder,
       "aria-label": ariaLabel || "Search"
-    }
-  ) });
+    })
+  });
 });
 MenuSearch.displayName = "MenuSearch";
 const createItemId = (index, id) => `${id}-item-${index}`;
@@ -182,10 +192,14 @@ const Menu = (props) => {
   } = props;
   const focusManager = focus.useFocusManager();
   const handleArrowDown = react.useCallback(() => {
-    focusManager == null ? void 0 : focusManager.focusNext({ wrap: true });
+    focusManager == null ? void 0 : focusManager.focusNext({
+      wrap: true
+    });
   }, [focusManager]);
   const handleArrowUp = react.useCallback(() => {
-    focusManager == null ? void 0 : focusManager.focusPrevious({ wrap: true });
+    focusManager == null ? void 0 : focusManager.focusPrevious({
+      wrap: true
+    });
   }, [focusManager]);
   const reduceItems = react.useMemo(() => {
     const childrenProps = react.Children.toArray(children);
@@ -203,58 +217,70 @@ const Menu = (props) => {
             break;
         }
       });
-      return { items: elements, searchElement: searchElem };
+      return {
+        items: elements,
+        searchElement: searchElem
+      };
     }
-    return childrenProps.reduce(
-      ({ items, searchElement }, child) => {
-        switch (child.type) {
-          case MenuSearch:
-            return {
-              items,
-              searchElement: /* @__PURE__ */ react.cloneElement(child, {
-                onKeyDown: (e) => handleKeyboardInteractions(e, {
-                  handleDown: handleArrowDown,
-                  handleUp: handleArrowUp
-                })
+    return childrenProps.reduce(({
+      items,
+      searchElement
+    }, child) => {
+      switch (child.type) {
+        case MenuSearch:
+          return {
+            items,
+            searchElement: /* @__PURE__ */ react.cloneElement(child, {
+              onKeyDown: (e) => handleKeyboardInteractions(e, {
+                handleDown: handleArrowDown,
+                handleUp: handleArrowUp
               })
-            };
-          case MenuItem:
-            return {
-              items: items.concat(
-                child.props.disabled ? /* @__PURE__ */ react.cloneElement(child, {
-                  className: classix.cx(child.props.className, menuItemClassName),
-                  onClick: () => void 0,
-                  onKeyDown: () => void 0,
-                  tabIndex: -1,
-                  disabled: true
-                }) : /* @__PURE__ */ react.cloneElement(child, {
-                  className: classix.cx(child.props.className, menuItemClassName),
-                  item: child.props.item ?? items.length,
-                  // set focus on the first menu item if there is no search input, and set in the tab order
-                  onClick: chainEventHandlers(child.props.onClick, () => {
-                    onSelect == null ? void 0 : 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 }
-    );
+            })
+          };
+        case MenuItem:
+          return {
+            items: items.concat(child.props.disabled ? /* @__PURE__ */ react.cloneElement(child, {
+              className: classix.cx(child.props.className, menuItemClassName),
+              onClick: () => void 0,
+              onKeyDown: () => void 0,
+              tabIndex: -1,
+              disabled: true
+            }) : /* @__PURE__ */ react.cloneElement(child, {
+              className: classix.cx(child.props.className, menuItemClassName),
+              item: child.props.item ?? items.length,
+              // set focus on the first menu item if there is no search input, and set in the tab order
+              onClick: chainEventHandlers(child.props.onClick, () => {
+                onSelect == null ? void 0 : 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__ */ jsxRuntime.jsx(MenuBase, { "data-test-id": testId, isVirtual: true, size, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ItemVirtualizer,
-      {
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuBase, {
+      "data-test-id": testId,
+      isVirtual: true,
+      size,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ItemVirtualizer, {
         items: react.Children.toArray(reduceItems.items),
         searchElement: reduceItems.searchElement,
         overscan,
@@ -262,13 +288,17 @@ const Menu = (props) => {
         onSelect,
         itemHeight,
         focusManager
-      }
-    ) });
+      })
+    });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(MenuBase, { "data-test-id": testId, size, children: [
-    reduceItems.searchElement,
-    /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { role: "presentation", children: reduceItems.items })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(MenuBase, {
+    "data-test-id": testId,
+    size,
+    children: [reduceItems.searchElement, /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, {
+      role: "presentation",
+      children: reduceItems.items
+    })]
+  });
 };
 const ItemVirtualizer = (props) => {
   const {
@@ -298,70 +328,61 @@ const ItemVirtualizer = (props) => {
     rowVirtualizer.scrollToIndex(0);
     (_b = (_a = searchRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [rowVirtualizer]);
-  const focusMenuItem = react.useCallback(
-    (index) => {
-      rowVirtualizer.scrollToIndex(index);
-      setNextFocusValue(index);
-    },
-    [rowVirtualizer]
-  );
-  const handleKeyboardFocusInteraction = react.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);
-        }
-        return;
-      }
-      switch (direction) {
-        case "next":
-          rowVirtualizer.scrollToIndex(nextIndex);
-          focusManager == null ? void 0 : focusManager.focusNext();
-          break;
-        case "previous":
-          rowVirtualizer.scrollToIndex(nextIndex);
-          focusManager == null ? void 0 : focusManager.focusPrevious();
-          break;
-      }
-    },
-    [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]
-  );
-  const getItemProps = react.useCallback(
-    (itemElem, index) => {
-      const childProps = itemElem.props;
-      switch (itemElem.type) {
-        case MenuItem:
-          return {
-            className: classix.cx(childProps.className, menuItemClassName),
-            // set focus on the first menu item if there is no search input, and set in the tab order
-            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 == null ? void 0 : onSelect(childProps.item);
-            })
-          };
-        default:
-          return {};
+  const focusMenuItem = react.useCallback((index) => {
+    rowVirtualizer.scrollToIndex(index);
+    setNextFocusValue(index);
+  }, [rowVirtualizer]);
+  const handleKeyboardFocusInteraction = react.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);
       }
-    },
-    [handleKeyboardFocusInteraction, menuItemClassName, onSelect]
-  );
+      return;
+    }
+    switch (direction) {
+      case "next":
+        rowVirtualizer.scrollToIndex(nextIndex);
+        focusManager == null ? void 0 : focusManager.focusNext();
+        break;
+      case "previous":
+        rowVirtualizer.scrollToIndex(nextIndex);
+        focusManager == null ? void 0 : focusManager.focusPrevious();
+        break;
+    }
+  }, [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]);
+  const getItemProps = react.useCallback((itemElem, index) => {
+    const childProps = itemElem.props;
+    switch (itemElem.type) {
+      case MenuItem:
+        return {
+          className: classix.cx(childProps.className, menuItemClassName),
+          // set focus on the first menu item if there is no search input, and set in the tab order
+          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 == null ? void 0 : onSelect(childProps.item);
+          })
+        };
+      default:
+        return {};
+    }
+  }, [handleKeyboardFocusInteraction, menuItemClassName, onSelect]);
   react.useEffect(() => {
     if (nextFocusValue !== null) {
       requestAnimationFrame(() => {
@@ -384,52 +405,42 @@ const ItemVirtualizer = (props) => {
       }
     }
   };
-  const renderSearch = react.useMemo(
-    () => searchElement ? /* @__PURE__ */ react.cloneElement(searchElement, {
-      onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
-        handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
-        handleFocusForward: () => focusMenuItem(0)
-      }),
-      ref: searchRef
-    }) : null,
-    [searchElement, lastVirtualItemIndex, focusMenuItem]
-  );
-  const renderItems = react.useMemo(
-    () => rowVirtualizer.virtualItems.map((virtualRow) => {
-      if (!items) {
-        return null;
-      }
-      const elem = items[virtualRow.index];
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: virtualRow.measureRef,
-          role: "presentation",
-          className: styles["VirtualMenu-item"],
-          style: {
-            transform: `translateY(${virtualRow.start}px)`
-          },
-          children: /* @__PURE__ */ react.cloneElement(elem, getItemProps(elem, virtualRow.index))
-        },
-        virtualRow.index
-      );
+  const renderSearch = react.useMemo(() => searchElement ? /* @__PURE__ */ react.cloneElement(searchElement, {
+    onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
+      handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
+      handleFocusForward: () => focusMenuItem(0)
     }),
-    [rowVirtualizer.virtualItems, items, getItemProps]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    renderSearch,
-    /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { ref: parentRef, role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
+    ref: searchRef
+  }) : null, [searchElement, lastVirtualItemIndex, focusMenuItem]);
+  const renderItems = react.useMemo(() => rowVirtualizer.virtualItems.map((virtualRow) => {
+    if (!items) {
+      return null;
+    }
+    const elem = items[virtualRow.index];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ref: virtualRow.measureRef,
+      role: "presentation",
+      className: styles["VirtualMenu-item"],
+      style: {
+        transform: `translateY(${virtualRow.start}px)`
+      },
+      children: /* @__PURE__ */ react.cloneElement(elem, getItemProps(elem, virtualRow.index))
+    }, virtualRow.index);
+  }), [rowVirtualizer.virtualItems, items, getItemProps]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderSearch, /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, {
+      ref: parentRef,
+      role: "presentation",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         role: "presentation",
         className: styles["VirtualMenu-item-list"],
         style: {
           height: `${rowVirtualizer.totalSize}px`
         },
         children: renderItems
-      }
-    ) })
-  ] });
+      })
+    })]
+  });
 };
 exports.Menu = Menu;
 exports.MenuBase = MenuBase;