@wordpress/components 32.6.0 → 33.0.0

package/build/menu/popover.cjs

@@ -40,7 +40,6 @@ var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Popover = (0, import_element.forwardRef)(function Popover2({
   gutter,
-  children,
   shift,
   modal = true,
   ...otherProps
@@ -61,6 +60,12 @@ var Popover = (0, import_element.forwardRef)(function Popover2({
   if (!menuContext?.store) {
     throw new Error("Menu.Popover can only be rendered inside a Menu component");
   }
+  const renderMenu = (0, import_element.useCallback)((htmlProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.MenuMotionRoot, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.MenuSurface, {
+      ...htmlProps,
+      variant: menuContext.variant
+    })
+  }), [menuContext.variant]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.Menu, {
     ...otherProps,
     ref,
@@ -74,8 +79,7 @@ var Popover = (0, import_element.forwardRef)(function Popover2({
     wrapperProps,
     hideOnEscape,
     unmountOnHide: true,
-    variant: menuContext.variant,
-    children
+    render: renderMenu
   });
 });
 // Annotate the CommonJS export names for ESM import in node:

package/build/menu/popover.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/menu/popover.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo, forwardRef, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Popover = forwardRef(function Popover({\n  gutter,\n  children,\n  shift,\n  modal = true,\n  ...otherProps\n}, ref) {\n  const menuContext = useContext(Context);\n\n  // Extract the side from the applied placement \u2014 useful for animations.\n  // Using `currentPlacement` instead of `placement` to make sure that we\n  // use the final computed placement (including \"flips\" etc).\n  const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];\n  const hideOnEscape = useCallback(event => {\n    // Pressing Escape can cause unexpected consequences (ie. exiting\n    // full screen mode on MacOs, close parent modals...).\n    event.preventDefault();\n    // Returning `true` causes the menu to hide.\n    return true;\n  }, []);\n  const computedDirection = Ariakit.useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';\n  const wrapperProps = useMemo(() => ({\n    dir: computedDirection,\n    style: {\n      direction: computedDirection\n    }\n  }), [computedDirection]);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Popover can only be rendered inside a Menu component');\n  }\n  return /*#__PURE__*/_jsx(Styled.Menu, {\n    ...otherProps,\n    ref: ref,\n    modal: modal,\n    store: menuContext.store\n    // Root menu has an 8px distance from its trigger,\n    // otherwise 0 (which causes the submenu to slightly overlap)\n    ,\n    gutter: gutter ?? (menuContext.store.parent ? 0 : 8)\n    // Align nested menu by the same (but opposite) amount\n    // as the menu container's padding.\n    ,\n    shift: shift ?? (menuContext.store.parent ? -4 : 0),\n    hideOnHoverOutside: false,\n    \"data-side\": appliedPlacementSide,\n    \"data-submenu\": !!menuContext.store.parent || undefined,\n    wrapperProps: wrapperProps,\n    hideOnEscape: hideOnEscape,\n    unmountOnHide: true,\n    variant: menuContext.variant,\n    children: children\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA6D;AAM7D,aAAwB;AACxB,qBAAwB;AACxB,yBAA4B;AACrB,IAAM,cAAU,2BAAW,SAASA,SAAQ;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG,KAAK;AACN,QAAM,kBAAc,2BAAW,sBAAO;AAKtC,QAAM,uBAA+B,sBAAc,aAAa,OAAO,kBAAkB,GAAG,MAAM,GAAG,EAAE,CAAC;AACxG,QAAM,mBAAe,4BAAY,WAAS;AAGxC,UAAM,eAAe;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4B,sBAAc,aAAa,OAAO,KAAK,IAAI,QAAQ;AACrF,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF,IAAI,CAAC,iBAAiB,CAAC;AACvB,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAoB,uCAAAC,KAAY,aAAM;AAAA,IACpC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,IAInB,QAAQ,WAAW,YAAY,MAAM,SAAS,IAAI;AAAA,IAIlD,OAAO,UAAU,YAAY,MAAM,SAAS,KAAK;AAAA,IACjD,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB,CAAC,CAAC,YAAY,MAAM,UAAU;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,SAAS,YAAY;AAAA,IACrB;AAAA,EACF,CAAC;AACH,CAAC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo, forwardRef, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Popover = forwardRef(function Popover({\n  gutter,\n  shift,\n  modal = true,\n  ...otherProps\n}, ref) {\n  const menuContext = useContext(Context);\n\n  // Extract the side from the applied placement \u2014 useful for animations.\n  // Using `currentPlacement` instead of `placement` to make sure that we\n  // use the final computed placement (including \"flips\" etc).\n  const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];\n  const hideOnEscape = useCallback(event => {\n    // Pressing Escape can cause unexpected consequences (ie. exiting\n    // full screen mode on MacOs, close parent modals...).\n    event.preventDefault();\n    // Returning `true` causes the menu to hide.\n    return true;\n  }, []);\n  const computedDirection = Ariakit.useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';\n  const wrapperProps = useMemo(() => ({\n    dir: computedDirection,\n    style: {\n      direction: computedDirection\n    }\n  }), [computedDirection]);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Popover can only be rendered inside a Menu component');\n  }\n  const renderMenu = useCallback(htmlProps => /*#__PURE__*/_jsx(Styled.MenuMotionRoot, {\n    children: /*#__PURE__*/_jsx(Styled.MenuSurface, {\n      ...htmlProps,\n      variant: menuContext.variant\n    })\n  }), [menuContext.variant]);\n  return /*#__PURE__*/_jsx(Styled.Menu, {\n    ...otherProps,\n    ref: ref,\n    modal: modal,\n    store: menuContext.store\n    // Root menu has an 8px distance from its trigger,\n    // otherwise 0 (which causes the submenu to slightly overlap)\n    ,\n    gutter: gutter ?? (menuContext.store.parent ? 0 : 8)\n    // Align nested menu by the same (but opposite) amount\n    // as the menu container's padding.\n    ,\n    shift: shift ?? (menuContext.store.parent ? -4 : 0),\n    hideOnHoverOutside: false,\n    \"data-side\": appliedPlacementSide,\n    \"data-submenu\": !!menuContext.store.parent || undefined,\n    wrapperProps: wrapperProps,\n    hideOnEscape: hideOnEscape,\n    unmountOnHide: true,\n    render: renderMenu\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA6D;AAM7D,aAAwB;AACxB,qBAAwB;AACxB,yBAA4B;AACrB,IAAM,cAAU,2BAAW,SAASA,SAAQ;AAAA,EACjD;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG,KAAK;AACN,QAAM,kBAAc,2BAAW,sBAAO;AAKtC,QAAM,uBAA+B,sBAAc,aAAa,OAAO,kBAAkB,GAAG,MAAM,GAAG,EAAE,CAAC;AACxG,QAAM,mBAAe,4BAAY,WAAS;AAGxC,UAAM,eAAe;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4B,sBAAc,aAAa,OAAO,KAAK,IAAI,QAAQ;AACrF,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF,IAAI,CAAC,iBAAiB,CAAC;AACvB,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,QAAM,iBAAa,4BAAY,eAA0B,uCAAAC,KAAY,uBAAgB;AAAA,IACnF,UAAuB,uCAAAA,KAAY,oBAAa;AAAA,MAC9C,GAAG;AAAA,MACH,SAAS,YAAY;AAAA,IACvB,CAAC;AAAA,EACH,CAAC,GAAG,CAAC,YAAY,OAAO,CAAC;AACzB,SAAoB,uCAAAA,KAAY,aAAM;AAAA,IACpC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,IAInB,QAAQ,WAAW,YAAY,MAAM,SAAS,IAAI;AAAA,IAIlD,OAAO,UAAU,YAAY,MAAM,SAAS,KAAK;AAAA,IACjD,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB,CAAC,CAAC,YAAY,MAAM,UAAU;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,EACV,CAAC;AACH,CAAC;",
   "names": ["Popover", "_jsx"]
 }