@sproutsocial/seeds-react-menu 1.3.1 → 1.4.0

package/dist/index.d.mts

@@ -293,7 +293,9 @@ interface TypeMenuHeaderProps extends Omit<React$1.ComponentPropsWithoutRef<"div
  */
 declare const MenuHeader: ({ children, title, leftAction, rightAction, ...rest }: TypeMenuHeaderProps) => react_jsx_runtime.JSX.Element;
 
-type TypeMenuContentProps<I extends TypeMenuItemProps = TypeMenuItemProps> = Omit<React.ComponentPropsWithoutRef<"ul">, "children"> & {
+interface TypeMenuContentContainerProps extends Omit<React.ComponentPropsWithoutRef<"ul">, "children" | "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps, TypePositionSystemProps {
+}
+type TypeMenuContentProps<I extends TypeMenuItemProps = TypeMenuItemProps> = TypeMenuContentContainerProps & {
     innerRef?: React.Ref<HTMLUListElement>;
     emptyStateElement?: React.ReactNode;
 } & TypeChildrenOrItems<I>;
@@ -544,7 +546,7 @@ interface TypeNestedMenuProps<I extends TypeMenuItemProps = TypeNestedMenuItemPr
     };
 }
 
-declare const NestedMenu: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ initialMenuId, menus, onBackButtonClick, backArrowLabel, menuToggleElement, popoutProps, width, stateReducer: rootExternalStateReducer, id: externalNestedMenuId, ...useSelectProps }: TypeNestedMenuProps<I>) => react_jsx_runtime.JSX.Element;
+declare const NestedMenu: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ initialMenuId, menus, onBackButtonClick, backArrowLabel, menuToggleElement, popoutProps: { scheduleUpdateRef: externalPopoutUpdateRef, ...restPopoutProps }, width, stateReducer: rootExternalStateReducer, id: externalNestedMenuId, ...useSelectProps }: TypeNestedMenuProps<I>) => react_jsx_runtime.JSX.Element;
 
 declare const NestedMenuItem: {
     ({ children, childMenuId, onClick: onClickProp, ...rest }: TypeNestedMenuItemProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -293,7 +293,9 @@ interface TypeMenuHeaderProps extends Omit<React$1.ComponentPropsWithoutRef<"div
  */
 declare const MenuHeader: ({ children, title, leftAction, rightAction, ...rest }: TypeMenuHeaderProps) => react_jsx_runtime.JSX.Element;
 
-type TypeMenuContentProps<I extends TypeMenuItemProps = TypeMenuItemProps> = Omit<React.ComponentPropsWithoutRef<"ul">, "children"> & {
+interface TypeMenuContentContainerProps extends Omit<React.ComponentPropsWithoutRef<"ul">, "children" | "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps, TypePositionSystemProps {
+}
+type TypeMenuContentProps<I extends TypeMenuItemProps = TypeMenuItemProps> = TypeMenuContentContainerProps & {
     innerRef?: React.Ref<HTMLUListElement>;
     emptyStateElement?: React.ReactNode;
 } & TypeChildrenOrItems<I>;
@@ -544,7 +546,7 @@ interface TypeNestedMenuProps<I extends TypeMenuItemProps = TypeNestedMenuItemPr
     };
 }
 
-declare const NestedMenu: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ initialMenuId, menus, onBackButtonClick, backArrowLabel, menuToggleElement, popoutProps, width, stateReducer: rootExternalStateReducer, id: externalNestedMenuId, ...useSelectProps }: TypeNestedMenuProps<I>) => react_jsx_runtime.JSX.Element;
+declare const NestedMenu: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ initialMenuId, menus, onBackButtonClick, backArrowLabel, menuToggleElement, popoutProps: { scheduleUpdateRef: externalPopoutUpdateRef, ...restPopoutProps }, width, stateReducer: rootExternalStateReducer, id: externalNestedMenuId, ...useSelectProps }: TypeNestedMenuProps<I>) => react_jsx_runtime.JSX.Element;
 
 declare const NestedMenuItem: {
     ({ children, childMenuId, onClick: onClickProp, ...rest }: TypeNestedMenuItemProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -307,58 +307,46 @@ var import_styled_components2 = __toESM(require("styled-components"));
 
 // ../../node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 // ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-  return self;
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
 }
 
 // ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) {
-    o2.__proto__ = p2;
-    return o2;
-  };
-  return _setPrototypeOf(o, p);
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
+    return t2.__proto__ = e2, t2;
+  }, _setPrototypeOf(t, e);
 }
 
 // ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
 }
 
 // ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o2) {
-    return o2.__proto__ || Object.getPrototypeOf(o2);
-  };
-  return _getPrototypeOf(o);
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t2) {
+    return t2.__proto__ || Object.getPrototypeOf(t2);
+  }, _getPrototypeOf(t);
 }
 
 // ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
-function _isNativeFunction(fn) {
+function _isNativeFunction(t) {
   try {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
-  } catch (e) {
-    return typeof fn === "function";
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
   }
 }
 
@@ -384,31 +372,27 @@ function _construct(t, e, r) {
 }
 
 // ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
-  _wrapNativeSuper = function _wrapNativeSuper2(Class2) {
-    if (Class2 === null || !_isNativeFunction(Class2)) return Class2;
-    if (typeof Class2 !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class2)) return _cache.get(Class2);
-      _cache.set(Class2, Wrapper);
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? /* @__PURE__ */ new Map() : void 0;
+  return _wrapNativeSuper = function _wrapNativeSuper2(t2) {
+    if (null === t2 || !_isNativeFunction(t2)) return t2;
+    if ("function" != typeof t2) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t2)) return r.get(t2);
+      r.set(t2, Wrapper);
     }
     function Wrapper() {
-      return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
+      return _construct(t2, arguments, _getPrototypeOf(this).constructor);
     }
-    Wrapper.prototype = Object.create(Class2.prototype, {
+    return Wrapper.prototype = Object.create(t2.prototype, {
       constructor: {
         value: Wrapper,
         enumerable: false,
         writable: true,
         configurable: true
       }
-    });
-    return _setPrototypeOf(Wrapper, Class2);
-  };
-  return _wrapNativeSuper(Class);
+    }), _setPrototypeOf(Wrapper, t2);
+  }, _wrapNativeSuper(t);
 }
 
 // ../../node_modules/polished/dist/polished.esm.js
@@ -2192,11 +2176,20 @@ var import_styled_components5 = __toESM(require("styled-components"));
 var StyledMenuContent = import_styled_components5.default.ul`
   margin: 0;
   padding: 0;
+  overflow: auto;
 
   &:focus {
     outline: none;
     box-shadow: none;
   }
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+  ${position}
 `;
 
 // src/hooks/useMenuChildren.tsx
@@ -2653,8 +2646,10 @@ var CustomPopoutContent = (0, import_styled_components11.default)(import_seeds_r
   padding: 0;
   margin-left: 0;
   margin-right: 0;
+  overflow: hidden;
 `;
 var menuAnimationConfig = {
+  layout: true,
   initial: {
     scale: 0,
     opacity: 0,
@@ -2809,20 +2804,29 @@ var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var MenuToggleButton = (props) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_seeds_react_button.Button,
-    {
-      appearance: "secondary",
-      ...getToggleButtonProps?.({
-        // Decide if we want the preventKeyAction stuff. Maybe create a prop to allow for this to be overriden.
-        ...getDropdownProps?.({ ref, preventKeyAction: true }) || { ref },
-        refKey: "innerRef",
-        ...ariaProps,
-        ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
-      }),
-      ...props
-    }
-  );
+  const {
+    onClick: userOnClick,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    ...restProps
+  } = props;
+  const defaultDropdownProps = {
+    ref,
+    onClick: userOnClick,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur
+  };
+  const dropdownProps = getDropdownProps?.({
+    ...defaultDropdownProps,
+    preventKeyAction: true
+  }) ?? defaultDropdownProps;
+  const toggleButtonProps = getToggleButtonProps?.({
+    ...dropdownProps,
+    refKey: "innerRef",
+    ...ariaProps,
+    ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_button.Button, { appearance: "secondary", ...toggleButtonProps, ...restProps });
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
@@ -4233,19 +4237,23 @@ var NestedMenuPopout = ({
   content,
   menuToggleElement,
   width: width2,
+  onClose,
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     MenuPopout,
     {
-      ...popoutProps,
-      onClose: () => setTimeout(() => resetSelectedMenuPath?.(), 100),
+      onClose: () => {
+        onClose?.();
+        setTimeout(() => resetSelectedMenuPath?.(), 100);
+      },
       isOpen: !!rootMenuContextProps.isOpen,
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
       width: width2,
       content: (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      ...popoutProps,
       children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         MenuToggleProvider,
         {
@@ -4269,7 +4277,10 @@ var NestedMenu = ({
   onBackButtonClick,
   backArrowLabel,
   menuToggleElement,
-  popoutProps = {},
+  popoutProps: {
+    scheduleUpdateRef: externalPopoutUpdateRef,
+    ...restPopoutProps
+  } = {},
   width: width2 = "300px",
   stateReducer: rootExternalStateReducer,
   id: externalNestedMenuId,
@@ -4318,6 +4329,7 @@ var NestedMenu = ({
   const [activeMenuContext, setActiveMenuContext] = (0, import_react32.useState)(defaultMenuContext);
   const [currentMenuId, setCurrentMenuId] = (0, import_react32.useState)(initialMenuId);
   const [isAdding, setIsAdding] = (0, import_react32.useState)(false);
+  const [popoutUpdateRef, setPopoutUpdateRef] = (0, import_react32.useState)();
   const setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
@@ -4326,6 +4338,7 @@ var NestedMenu = ({
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
+      popoutUpdateRef?.();
     }
   }, [selectedMenuPath.join("-")]);
   const resetSelectedMenuPath = () => {
@@ -4479,7 +4492,11 @@ var NestedMenu = ({
           ) }),
           menuToggleElement,
           width: width2,
-          ...popoutProps
+          scheduleUpdateRef: (callback) => {
+            setPopoutUpdateRef(callback);
+            externalPopoutUpdateRef?.(callback);
+          },
+          ...restPopoutProps
         }
       )
     }