@sproutsocial/seeds-react-menu 1.3.1 → 1.4.0

package/.turbo/turbo-build.log

@@ -84,14 +84,14 @@ ESM Build start
          ╵       ~~~~~~~~~
 
 
-CJS dist/index.js     142.61 KB
-CJS dist/index.js.map 368.34 KB
-CJS ⚡️ Build success in 596ms
-ESM dist/esm/index.js     132.96 KB
-ESM dist/esm/index.js.map 367.06 KB
-ESM ⚡️ Build success in 595ms
+CJS dist/index.js     143.00 KB
+CJS dist/index.js.map 369.68 KB
+CJS ⚡️ Build success in 664ms
+ESM dist/esm/index.js     133.33 KB
+ESM dist/esm/index.js.map 368.41 KB
+ESM ⚡️ Build success in 664ms
 DTS Build start
-DTS ⚡️ Build success in 16013ms
-DTS dist/index.d.ts  37.08 KB
-DTS dist/index.d.mts 37.08 KB
-Done in 19.00s.
+DTS ⚡️ Build success in 11407ms
+DTS dist/index.d.ts  37.42 KB
+DTS dist/index.d.mts 37.42 KB
+Done in 15.16s.

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.4.0
+
+### Minor Changes
+
+- 37915da: Add system props to the `MenuContent` component
+
+### Patch Changes
+
+- cc72db4: Smooths Menu animations when the height changes [[DS-3495)](https://sprout.atlassian.net/browse/DS-3495)]
+- Updated dependencies [37915da]
+  - @sproutsocial/seeds-react-popout@2.3.0
+
+## 1.3.2
+
+### Patch Changes
+
+- a67b345: Users can now add event listeners like onClick, onBlur, and onKeyDown to MenuToggleButton.
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -239,58 +239,46 @@ import styled, { css as css4 } from "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;
   }
 }
 
@@ -316,31 +304,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
@@ -2131,11 +2115,20 @@ import styled3 from "styled-components";
 var StyledMenuContent = styled3.ul`
   margin: 0;
   padding: 0;
+  overflow: auto;
 
   &:focus {
     outline: none;
     box-shadow: none;
   }
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+  ${position}
 `;
 
 // src/hooks/useMenuChildren.tsx
@@ -2602,8 +2595,10 @@ var CustomPopoutContent = styled8(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
+  overflow: hidden;
 `;
 var menuAnimationConfig = {
+  layout: true,
   initial: {
     scale: 0,
     opacity: 0,
@@ -2758,20 +2753,29 @@ import { Button } from "@sproutsocial/seeds-react-button";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var MenuToggleButton = (props) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx13(
-    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__ */ jsx13(Button, { appearance: "secondary", ...toggleButtonProps, ...restProps });
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
@@ -4186,19 +4190,23 @@ var NestedMenuPopout = ({
   content,
   menuToggleElement,
   width: width2,
+  onClose,
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
   return /* @__PURE__ */ jsx33(
     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__ */ jsx33(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      ...popoutProps,
       children: (toggleProps) => /* @__PURE__ */ jsx33(
         MenuToggleProvider,
         {
@@ -4222,7 +4230,10 @@ var NestedMenu = ({
   onBackButtonClick,
   backArrowLabel,
   menuToggleElement,
-  popoutProps = {},
+  popoutProps: {
+    scheduleUpdateRef: externalPopoutUpdateRef,
+    ...restPopoutProps
+  } = {},
   width: width2 = "300px",
   stateReducer: rootExternalStateReducer,
   id: externalNestedMenuId,
@@ -4271,6 +4282,7 @@ var NestedMenu = ({
   const [activeMenuContext, setActiveMenuContext] = useState(defaultMenuContext);
   const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
   const [isAdding, setIsAdding] = useState(false);
+  const [popoutUpdateRef, setPopoutUpdateRef] = useState();
   const setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
@@ -4279,6 +4291,7 @@ var NestedMenu = ({
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
+      popoutUpdateRef?.();
     }
   }, [selectedMenuPath.join("-")]);
   const resetSelectedMenuPath = () => {
@@ -4432,7 +4445,11 @@ var NestedMenu = ({
           ) }),
           menuToggleElement,
           width: width2,
-          ...popoutProps
+          scheduleUpdateRef: (callback) => {
+            setPopoutUpdateRef(callback);
+            externalPopoutUpdateRef?.(callback);
+          },
+          ...restPopoutProps
         }
       )
     }