@khanacademy/wonder-blocks-dropdown 10.3.12 → 10.4.0

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-dropdown@10.3.12 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
+> @khanacademy/wonder-blocks-dropdown@10.4.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/dist/css

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.4.0
+
+### Minor Changes
+
+- 6f24d7d: Allow ActionMenu to support any valid popper placement
+
 ## 10.3.12
 
 ### Patch Changes

package/dist/components/action-menu.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type AriaProps, type StyleType } from "@khanacademy/wonder-blocks-core";
+import { Placement } from "@popperjs/core";
 import DropdownOpener from "./dropdown-opener";
 import type { Item, DropdownItem, OpenerProps } from "../util/types";
 type Props = AriaProps & Readonly<{
@@ -31,10 +32,11 @@ type Props = AriaProps & Readonly<{
      */
     selectedValues?: Array<string>;
     /**
-     * Whether this menu should be left-aligned or right-aligned with the
-     * opener component. Defaults to left-aligned.
+     * The alignment of the menu component in relation to the opener
+     * component. Defaults to "left", which is below the opener and left
+     * aligned. Any valid Popper placement is also supported.
      */
-    alignment: "left" | "right";
+    alignment: "left" | "right" | Placement;
     /**
      * Whether this component is disabled. A disabled dropdown may not be opened
      * and does not support interaction. Defaults to false.

package/dist/components/dropdown-core.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import { Placement } from "@popperjs/core";
 import type { DropdownItem } from "../util/types";
 type LabelsValues = {
     /**
@@ -89,7 +90,7 @@ type ExportProps = Readonly<{
      * Whether this menu should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.
      */
-    alignment?: "left" | "right";
+    alignment?: "left" | "right" | Placement;
     /**
      * Whether to auto focus an option. Defaults to true.
      */

package/dist/components/dropdown-popper.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import { Placement } from "@popperjs/core";
 type Props = {
     /**
      * The children that will be wrapped by PopperJS.
@@ -13,7 +14,7 @@ type Props = {
      * Whether this menu should be left-aligned or right-aligned with the
      * reference component. Defaults to left-aligned.
      */
-    alignment?: "left" | "right";
+    alignment?: "left" | "right" | Placement;
     /**
      * The popper's reference.
      * @see https://popper.js.org/react-popper/v2/render-props/#innerref

package/dist/es/index.js

@@ -53,7 +53,7 @@ class DropdownCoreVirtualized extends React.Component{componentDidMount(){const{
 
 function modifyMaxHeight({state,options}){const overflow=detectOverflow(state,options);const{y}=state.modifiersData.preventOverflow||{x:0,y:0};const{height}=state.rects.popper;const[basePlacement]=state.placement.split("-");const heightProp=basePlacement==="top"?"top":"bottom";const maxHeight=height-overflow[heightProp]-y;state.styles.popper={...state.styles.popper,maxHeight:`${maxHeight}px`,["--popper-max-height"]:`${maxHeight}px`};}const maxHeightModifier={name:"maxHeight",enabled:true,phase:"main",options:{padding:DROPDOWN_ITEM_HEIGHT},requiresIfExists:["offset","preventOverflow","flip"],fn:modifyMaxHeight};
 
-const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}return ReactDOM.createPortal(jsx(Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:alignment==="left"?"bottom-start":"bottom-end",modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
+const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}const placement=alignment==="left"?"bottom-start":alignment==="right"?"bottom-end":alignment;return ReactDOM.createPortal(jsx(Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:placement,modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
 
 function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
 

package/dist/index.js

@@ -86,7 +86,7 @@ class DropdownCoreVirtualized extends React__namespace.Component{componentDidMou
 
 function modifyMaxHeight({state,options}){const overflow=core.detectOverflow(state,options);const{y}=state.modifiersData.preventOverflow||{x:0,y:0};const{height}=state.rects.popper;const[basePlacement]=state.placement.split("-");const heightProp=basePlacement==="top"?"top":"bottom";const maxHeight=height-overflow[heightProp]-y;state.styles.popper={...state.styles.popper,maxHeight:`${maxHeight}px`,["--popper-max-height"]:`${maxHeight}px`};}const maxHeightModifier={name:"maxHeight",enabled:true,phase:"main",options:{padding:DROPDOWN_ITEM_HEIGHT},requiresIfExists:["offset","preventOverflow","flip"],fn:modifyMaxHeight};
 
-const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=wonderBlocksModal.maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}return ReactDOM__namespace.createPortal(jsxRuntime.jsx(reactPopper.Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:alignment==="left"?"bottom-start":"bottom-end",modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsxRuntime.jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
+const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=wonderBlocksModal.maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}const placement=alignment==="left"?"bottom-start":alignment==="right"?"bottom-end":alignment;return ReactDOM__namespace.createPortal(jsxRuntime.jsx(reactPopper.Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:placement,modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsxRuntime.jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
 
 function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "10.3.12",
+  "version": "10.4.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -21,19 +21,19 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-announcer": "1.0.3",
+    "@khanacademy/wonder-blocks-form": "7.3.8",
+    "@khanacademy/wonder-blocks-icon": "5.2.20",
     "@khanacademy/wonder-blocks-cell": "5.0.14",
-    "@khanacademy/wonder-blocks-clickable": "7.1.26",
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.20",
     "@khanacademy/wonder-blocks-icon-button": "10.5.1",
     "@khanacademy/wonder-blocks-modal": "8.4.3",
+    "@khanacademy/wonder-blocks-clickable": "7.1.26",
     "@khanacademy/wonder-blocks-pill": "3.1.41",
     "@khanacademy/wonder-blocks-search-field": "5.1.46",
     "@khanacademy/wonder-blocks-styles": "0.2.32",
-    "@khanacademy/wonder-blocks-timing": "7.0.2",
     "@khanacademy/wonder-blocks-tokens": "14.0.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.22",
-    "@khanacademy/wonder-blocks-form": "7.3.8"
+    "@khanacademy/wonder-blocks-timing": "7.0.2",
+    "@khanacademy/wonder-blocks-typography": "4.2.22"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",