@khanacademy/wonder-blocks-modal 8.8.0 → 8.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +14 -0
  3. package/dist/components/drawer-dialog.d.ts +1 -1
  4. package/dist/es/index.js +1 -3
  5. package/dist/index.js +1 -3
  6. package/package.json +7 -7
  7. package/dist/hooks/use-direction-detection.d.ts +0 -58
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-modal@8.8.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
2
+ > @khanacademy/wonder-blocks-modal@8.8.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
3
3
  > pnpm exec wonder-blocks-tokens .
4
4
 
5
5
  CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal/dist/css
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @khanacademy/wonder-blocks-modal
2
2
 
3
+ ## 8.8.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 63dcc94: Move `useDirectionDetection` from `wonder-blocks-modal` (internal-only) to `wonder-blocks-core` and export it publicly, so other packages can detect the nearest ancestor's writing direction (RTL/LTR) without depending on `wonder-blocks-modal`. `wonder-blocks-modal`'s own usage (`DrawerDialog`) now imports it from `wonder-blocks-core`; no change to `wonder-blocks-modal`'s public API.
8
+ - Updated dependencies [63dcc94]
9
+ - Updated dependencies [5dd4192]
10
+ - @khanacademy/wonder-blocks-core@12.5.0
11
+ - @khanacademy/wonder-blocks-icon-button@11.5.0
12
+ - @khanacademy/wonder-blocks-announcer@1.1.2
13
+ - @khanacademy/wonder-blocks-breadcrumbs@3.2.28
14
+ - @khanacademy/wonder-blocks-layout@3.1.61
15
+ - @khanacademy/wonder-blocks-typography@5.0.4
16
+
3
17
  ## 8.8.0
4
18
 
5
19
  ### Minor Changes
package/dist/components/drawer-dialog.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { StyleType } from "@khanacademy/wonder-blocks-core";
2
+ import { type StyleType } from "@khanacademy/wonder-blocks-core";
3
3
  type AccessibleDialogProps = {
4
4
  title: React.ReactElement | string;
5
5
  "aria-label"?: never;
package/dist/es/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
- import { View, Id } from '@khanacademy/wonder-blocks-core';
3
+ import { View, Id, useDirectionDetection } from '@khanacademy/wonder-blocks-core';
4
4
  import { StyleSheet } from 'aphrodite';
5
5
  import { border, sizing, mapValuesToCssVars, semanticColor, breakpoint } from '@khanacademy/wonder-blocks-tokens';
6
6
  import { attachAnnouncerToModal, detachAnnouncerFromModal } from '@khanacademy/wonder-blocks-announcer';
@@ -57,8 +57,6 @@ const DrawerBackdrop=({children,testId,initialFocusId,onCloseModal,style})=>{con
57
57
 
58
58
  const defaultProps={backdropDismissEnabled:DEFAULT_DRAWER_BACKDROP_DISMISS_ENABLED};const DrawerLauncher=props=>{const{modal,backdropDismissEnabled=defaultProps.backdropDismissEnabled,initialFocusId,closedFocusId,testId,opened:controlledOpened,onClose,children,schedule,alignment,styles,animated=DEFAULT_DRAWER_ANIMATED,timingDuration,easing}=props;const easingEnter=easing?.enter;const easingExit=easing?.exit;const[uncontrolledOpened,setUncontrolledOpened]=React.useState(false);const[isExiting,setIsExiting]=React.useState(false);const lastElementFocusedOutsideModalRef=React.useRef(null);const opened=typeof controlledOpened==="boolean"?controlledOpened:uncontrolledOpened;const saveLastElementFocused=React.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React.useEffect(()=>{if(controlledOpened&&!prevControlledOpened.current){saveLastElementFocused();}prevControlledOpened.current=controlledOpened;},[controlledOpened,saveLastElementFocused]);const prevControlledOpened=React.useRef(controlledOpened);const returnFocus=React.useCallback(()=>{const focusElement=closedFocusId?document.getElementById(closedFocusId):null;schedule.animationFrame(()=>{if(focusElement){focusElement.focus();}else if(lastElementFocusedOutsideModalRef.current){lastElementFocusedOutsideModalRef.current.focus();}});},[closedFocusId,schedule]);const handleCloseModal=React.useCallback(()=>{if(animated){setIsExiting(true);setTimeout(()=>{setIsExiting(false);if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();},timingDuration??DRAWER_EXIT_DURATION_MS);}else {if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();}},[controlledOpened,onClose,returnFocus,animated,timingDuration]);const openModal=React.useCallback(()=>{saveLastElementFocused();setUncontrolledOpened(true);},[saveLastElementFocused]);const drawerDialogProps=React.useMemo(()=>({alignment,animated,isExiting,timingDuration,easing:{enter:easingEnter,exit:easingExit}}),[alignment,animated,isExiting,timingDuration,easingEnter,easingExit]);const renderModal=React.useCallback(()=>{if(typeof modal==="function"){const renderedModal=modal({closeModal:handleCloseModal});if(!renderedModal){return null}return renderedModal}if(!modal){return null}return modal},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const body=document.body;if(!body){return null}return jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,opened&&!isExiting||opened&&isExiting&&animated?ReactDOM.createPortal(jsx(DrawerContext.Provider,{value:drawerDialogProps,children:jsx(FocusTrap,{style:styles?.container,children:jsx(DrawerBackdrop,{initialFocusId:initialFocusId,testId:testId,style:styles?.backdrop,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})})}),body):null,opened&&!isExiting&&jsxs(Fragment,{children:[jsx(DrawerLauncherKeypressListener,{onClose:handleCloseModal}),jsx(ScrollDisabler,{})]})]})};function DrawerLauncherKeypressListener({onClose}){React.useEffect(()=>{const handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}};window.addEventListener("keyup",handleKeyup);return ()=>window.removeEventListener("keyup",handleKeyup)},[onClose]);return null}DrawerLauncher.displayName="DrawerLauncher";var drawerLauncher = withActionScheduler(DrawerLauncher);
59
59
 
60
- function useDirectionDetection(elementRef,options={}){const{direction:explicitDirection,defaultDirection="ltr"}=options;if(explicitDirection){return explicitDirection}if(elementRef?.current){const elementWithDir=elementRef.current.closest("[dir]");if(elementWithDir){const dirValue=elementWithDir.getAttribute("dir");return dirValue==="rtl"||dirValue==="ltr"?dirValue:defaultDirection}}const documentDir=document.documentElement.getAttribute("dir")||document.body.getAttribute("dir");if(documentDir==="rtl"||documentDir==="ltr"){return documentDir}return defaultDirection}
61
-
62
60
  const DrawerDialog=React.forwardRef(function DrawerDialog(props,ref){const contextProps=useDrawerContext();const alignment=contextProps.alignment??"inlineEnd";const animated=contextProps.animated??DEFAULT_DRAWER_ANIMATED;const isExiting=contextProps.isExiting??DEFAULT_DRAWER_IS_EXITING;const timingDuration=contextProps.timingDuration;const easing=contextProps.easing;const{styles}=props;const direction=useDirectionDetection();const isRtl=direction==="rtl";const phase=isExiting?"exit":"enter";const defaultAnimationStyle=DEFAULT_ANIMATION_STYLES[alignment][isRtl?"rtl":"ltr"][phase];const phaseEasing=easing?.[phase];const animationStyle=!animated?undefined:timingDuration===undefined&&phaseEasing===undefined?defaultAnimationStyle:{...defaultAnimationStyle,...timingDuration!==undefined&&{animationDuration:`${timingDuration}ms`},...phaseEasing!==undefined&&{animationTimingFunction:phaseEasing}};return jsx(FlexibleDialog,{...props,ref:ref,styles:{root:[componentStyles.root,componentStyles[alignment],animationStyle,styles?.root].filter(Boolean),dialog:[alignment==="blockEnd"?componentStyles.dialogBlockEnd:componentStyles.dialogDefault,styles?.dialog].filter(Boolean),panel:styles?.panel,content:styles?.content,closeButton:styles?.closeButton}})});const REST_TRANSFORM="translate3d(0, 0, 0)";const getTransformValue=(isRtl,alignment,offset)=>{if(alignment==="blockEnd"){return `translate3d(0, ${offset}, 0)`}const isNegative=isRtl?alignment==="inlineEnd":alignment==="inlineStart";const signedOffset=isNegative?`calc(-1 * ${offset})`:offset;return `translate3d(${signedOffset}, 0, 0)`};const createKeyframes=(isRtl,alignment)=>({slideIn:{"0%":{transform:getTransformValue(isRtl,alignment,DRAWER_SLIDE_OFFSET),opacity:0},"100%":{transform:REST_TRANSFORM,opacity:1}},slideOut:{"0%":{transform:REST_TRANSFORM,opacity:1},"100%":{transform:getTransformValue(isRtl,alignment,DRAWER_SLIDE_OFFSET),opacity:0}}});const buildDefaultStyle=(isExiting,alignmentKeyframes)=>({animationName:isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn,animationDuration:`${isExiting?DRAWER_EXIT_DURATION_MS:DRAWER_ENTER_DURATION_MS}ms`,animationTimingFunction:isExiting?DRAWER_EXIT_EASING:DRAWER_ENTER_EASING,animationFillMode:isExiting?"forwards":"backwards"});const buildDirectionStyles=alignment=>{const ltrKeyframes=createKeyframes(false,alignment);const rtlKeyframes=alignment==="blockEnd"?ltrKeyframes:createKeyframes(true,alignment);return {ltr:{enter:buildDefaultStyle(false,ltrKeyframes),exit:buildDefaultStyle(true,ltrKeyframes)},rtl:{enter:buildDefaultStyle(false,rtlKeyframes),exit:buildDefaultStyle(true,rtlKeyframes)}}};const DEFAULT_ANIMATION_STYLES={inlineStart:buildDirectionStyles("inlineStart"),inlineEnd:buildDirectionStyles("inlineEnd"),blockEnd:buildDirectionStyles("blockEnd")};const componentStyles=StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"100%",minBlockSize:"100vh",minInlineSize:breakpoint.width.xsMax,maxInlineSize:breakpoint.width.smMax,width:"100%",[breakpoint.mediaQuery.smOrSmaller]:{minInlineSize:"unset",maxInlineSize:"unset"}},dialogDefault:{minBlockSize:"100vh",minInlineSize:"unset"},dialogBlockEnd:{minBlockSize:"unset",minInlineSize:"unset"},inlineStart:{},inlineEnd:{},blockEnd:{height:"auto",minBlockSize:"unset",maxInlineSize:"unset",[breakpoint.mediaQuery.smOrSmaller]:{height:"auto"}}});DrawerDialog.displayName="DrawerDialog";
63
61
 
64
62
  function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
package/dist/index.js CHANGED
@@ -86,9 +86,7 @@ const DrawerBackdrop=({children,testId,initialFocusId,onCloseModal,style})=>{con
86
86
 
87
87
  const defaultProps={backdropDismissEnabled:DEFAULT_DRAWER_BACKDROP_DISMISS_ENABLED};const DrawerLauncher=props=>{const{modal,backdropDismissEnabled=defaultProps.backdropDismissEnabled,initialFocusId,closedFocusId,testId,opened:controlledOpened,onClose,children,schedule,alignment,styles,animated=DEFAULT_DRAWER_ANIMATED,timingDuration,easing}=props;const easingEnter=easing?.enter;const easingExit=easing?.exit;const[uncontrolledOpened,setUncontrolledOpened]=React__namespace.useState(false);const[isExiting,setIsExiting]=React__namespace.useState(false);const lastElementFocusedOutsideModalRef=React__namespace.useRef(null);const opened=typeof controlledOpened==="boolean"?controlledOpened:uncontrolledOpened;const saveLastElementFocused=React__namespace.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React__namespace.useEffect(()=>{if(controlledOpened&&!prevControlledOpened.current){saveLastElementFocused();}prevControlledOpened.current=controlledOpened;},[controlledOpened,saveLastElementFocused]);const prevControlledOpened=React__namespace.useRef(controlledOpened);const returnFocus=React__namespace.useCallback(()=>{const focusElement=closedFocusId?document.getElementById(closedFocusId):null;schedule.animationFrame(()=>{if(focusElement){focusElement.focus();}else if(lastElementFocusedOutsideModalRef.current){lastElementFocusedOutsideModalRef.current.focus();}});},[closedFocusId,schedule]);const handleCloseModal=React__namespace.useCallback(()=>{if(animated){setIsExiting(true);setTimeout(()=>{setIsExiting(false);if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();},timingDuration??DRAWER_EXIT_DURATION_MS);}else {if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();}},[controlledOpened,onClose,returnFocus,animated,timingDuration]);const openModal=React__namespace.useCallback(()=>{saveLastElementFocused();setUncontrolledOpened(true);},[saveLastElementFocused]);const drawerDialogProps=React__namespace.useMemo(()=>({alignment,animated,isExiting,timingDuration,easing:{enter:easingEnter,exit:easingExit}}),[alignment,animated,isExiting,timingDuration,easingEnter,easingExit]);const renderModal=React__namespace.useCallback(()=>{if(typeof modal==="function"){const renderedModal=modal({closeModal:handleCloseModal});if(!renderedModal){return null}return renderedModal}if(!modal){return null}return modal},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const body=document.body;if(!body){return null}return jsxRuntime.jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,opened&&!isExiting||opened&&isExiting&&animated?ReactDOM__namespace.createPortal(jsxRuntime.jsx(DrawerContext.Provider,{value:drawerDialogProps,children:jsxRuntime.jsx(FocusTrap,{style:styles?.container,children:jsxRuntime.jsx(DrawerBackdrop,{initialFocusId:initialFocusId,testId:testId,style:styles?.backdrop,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})})}),body):null,opened&&!isExiting&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(DrawerLauncherKeypressListener,{onClose:handleCloseModal}),jsxRuntime.jsx(ScrollDisabler,{})]})]})};function DrawerLauncherKeypressListener({onClose}){React__namespace.useEffect(()=>{const handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}};window.addEventListener("keyup",handleKeyup);return ()=>window.removeEventListener("keyup",handleKeyup)},[onClose]);return null}DrawerLauncher.displayName="DrawerLauncher";var drawerLauncher = wonderBlocksTiming.withActionScheduler(DrawerLauncher);
88
88
 
89
- function useDirectionDetection(elementRef,options={}){const{direction:explicitDirection,defaultDirection="ltr"}=options;if(explicitDirection){return explicitDirection}if(elementRef?.current){const elementWithDir=elementRef.current.closest("[dir]");if(elementWithDir){const dirValue=elementWithDir.getAttribute("dir");return dirValue==="rtl"||dirValue==="ltr"?dirValue:defaultDirection}}const documentDir=document.documentElement.getAttribute("dir")||document.body.getAttribute("dir");if(documentDir==="rtl"||documentDir==="ltr"){return documentDir}return defaultDirection}
90
-
91
- const DrawerDialog=React__namespace.forwardRef(function DrawerDialog(props,ref){const contextProps=useDrawerContext();const alignment=contextProps.alignment??"inlineEnd";const animated=contextProps.animated??DEFAULT_DRAWER_ANIMATED;const isExiting=contextProps.isExiting??DEFAULT_DRAWER_IS_EXITING;const timingDuration=contextProps.timingDuration;const easing=contextProps.easing;const{styles}=props;const direction=useDirectionDetection();const isRtl=direction==="rtl";const phase=isExiting?"exit":"enter";const defaultAnimationStyle=DEFAULT_ANIMATION_STYLES[alignment][isRtl?"rtl":"ltr"][phase];const phaseEasing=easing?.[phase];const animationStyle=!animated?undefined:timingDuration===undefined&&phaseEasing===undefined?defaultAnimationStyle:{...defaultAnimationStyle,...timingDuration!==undefined&&{animationDuration:`${timingDuration}ms`},...phaseEasing!==undefined&&{animationTimingFunction:phaseEasing}};return jsxRuntime.jsx(FlexibleDialog,{...props,ref:ref,styles:{root:[componentStyles.root,componentStyles[alignment],animationStyle,styles?.root].filter(Boolean),dialog:[alignment==="blockEnd"?componentStyles.dialogBlockEnd:componentStyles.dialogDefault,styles?.dialog].filter(Boolean),panel:styles?.panel,content:styles?.content,closeButton:styles?.closeButton}})});const REST_TRANSFORM="translate3d(0, 0, 0)";const getTransformValue=(isRtl,alignment,offset)=>{if(alignment==="blockEnd"){return `translate3d(0, ${offset}, 0)`}const isNegative=isRtl?alignment==="inlineEnd":alignment==="inlineStart";const signedOffset=isNegative?`calc(-1 * ${offset})`:offset;return `translate3d(${signedOffset}, 0, 0)`};const createKeyframes=(isRtl,alignment)=>({slideIn:{"0%":{transform:getTransformValue(isRtl,alignment,DRAWER_SLIDE_OFFSET),opacity:0},"100%":{transform:REST_TRANSFORM,opacity:1}},slideOut:{"0%":{transform:REST_TRANSFORM,opacity:1},"100%":{transform:getTransformValue(isRtl,alignment,DRAWER_SLIDE_OFFSET),opacity:0}}});const buildDefaultStyle=(isExiting,alignmentKeyframes)=>({animationName:isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn,animationDuration:`${isExiting?DRAWER_EXIT_DURATION_MS:DRAWER_ENTER_DURATION_MS}ms`,animationTimingFunction:isExiting?DRAWER_EXIT_EASING:DRAWER_ENTER_EASING,animationFillMode:isExiting?"forwards":"backwards"});const buildDirectionStyles=alignment=>{const ltrKeyframes=createKeyframes(false,alignment);const rtlKeyframes=alignment==="blockEnd"?ltrKeyframes:createKeyframes(true,alignment);return {ltr:{enter:buildDefaultStyle(false,ltrKeyframes),exit:buildDefaultStyle(true,ltrKeyframes)},rtl:{enter:buildDefaultStyle(false,rtlKeyframes),exit:buildDefaultStyle(true,rtlKeyframes)}}};const DEFAULT_ANIMATION_STYLES={inlineStart:buildDirectionStyles("inlineStart"),inlineEnd:buildDirectionStyles("inlineEnd"),blockEnd:buildDirectionStyles("blockEnd")};const componentStyles=aphrodite.StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"100%",minBlockSize:"100vh",minInlineSize:wonderBlocksTokens.breakpoint.width.xsMax,maxInlineSize:wonderBlocksTokens.breakpoint.width.smMax,width:"100%",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{minInlineSize:"unset",maxInlineSize:"unset"}},dialogDefault:{minBlockSize:"100vh",minInlineSize:"unset"},dialogBlockEnd:{minBlockSize:"unset",minInlineSize:"unset"},inlineStart:{},inlineEnd:{},blockEnd:{height:"auto",minBlockSize:"unset",maxInlineSize:"unset",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{height:"auto"}}});DrawerDialog.displayName="DrawerDialog";
89
+ const DrawerDialog=React__namespace.forwardRef(function DrawerDialog(props,ref){const contextProps=useDrawerContext();const alignment=contextProps.alignment??"inlineEnd";const animated=contextProps.animated??DEFAULT_DRAWER_ANIMATED;const isExiting=contextProps.isExiting??DEFAULT_DRAWER_IS_EXITING;const timingDuration=contextProps.timingDuration;const easing=contextProps.easing;const{styles}=props;const direction=wonderBlocksCore.useDirectionDetection();const isRtl=direction==="rtl";const phase=isExiting?"exit":"enter";const defaultAnimationStyle=DEFAULT_ANIMATION_STYLES[alignment][isRtl?"rtl":"ltr"][phase];const phaseEasing=easing?.[phase];const animationStyle=!animated?undefined:timingDuration===undefined&&phaseEasing===undefined?defaultAnimationStyle:{...defaultAnimationStyle,...timingDuration!==undefined&&{animationDuration:`${timingDuration}ms`},...phaseEasing!==undefined&&{animationTimingFunction:phaseEasing}};return jsxRuntime.jsx(FlexibleDialog,{...props,ref:ref,styles:{root:[componentStyles.root,componentStyles[alignment],animationStyle,styles?.root].filter(Boolean),dialog:[alignment==="blockEnd"?componentStyles.dialogBlockEnd:componentStyles.dialogDefault,styles?.dialog].filter(Boolean),panel:styles?.panel,content:styles?.content,closeButton:styles?.closeButton}})});const REST_TRANSFORM="translate3d(0, 0, 0)";const getTransformValue=(isRtl,alignment,offset)=>{if(alignment==="blockEnd"){return `translate3d(0, ${offset}, 0)`}const isNegative=isRtl?alignment==="inlineEnd":alignment==="inlineStart";const signedOffset=isNegative?`calc(-1 * ${offset})`:offset;return `translate3d(${signedOffset}, 0, 0)`};const createKeyframes=(isRtl,alignment)=>({slideIn:{"0%":{transform:getTransformValue(isRtl,alignment,DRAWER_SLIDE_OFFSET),opacity:0},"100%":{transform:REST_TRANSFORM,opacity:1}},slideOut:{"0%":{transform:REST_TRANSFORM,opacity:1},"100%":{transform:getTransformValue(isRtl,alignment,DRAWER_SLIDE_OFFSET),opacity:0}}});const buildDefaultStyle=(isExiting,alignmentKeyframes)=>({animationName:isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn,animationDuration:`${isExiting?DRAWER_EXIT_DURATION_MS:DRAWER_ENTER_DURATION_MS}ms`,animationTimingFunction:isExiting?DRAWER_EXIT_EASING:DRAWER_ENTER_EASING,animationFillMode:isExiting?"forwards":"backwards"});const buildDirectionStyles=alignment=>{const ltrKeyframes=createKeyframes(false,alignment);const rtlKeyframes=alignment==="blockEnd"?ltrKeyframes:createKeyframes(true,alignment);return {ltr:{enter:buildDefaultStyle(false,ltrKeyframes),exit:buildDefaultStyle(true,ltrKeyframes)},rtl:{enter:buildDefaultStyle(false,rtlKeyframes),exit:buildDefaultStyle(true,rtlKeyframes)}}};const DEFAULT_ANIMATION_STYLES={inlineStart:buildDirectionStyles("inlineStart"),inlineEnd:buildDirectionStyles("inlineEnd"),blockEnd:buildDirectionStyles("blockEnd")};const componentStyles=aphrodite.StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"100%",minBlockSize:"100vh",minInlineSize:wonderBlocksTokens.breakpoint.width.xsMax,maxInlineSize:wonderBlocksTokens.breakpoint.width.smMax,width:"100%",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{minInlineSize:"unset",maxInlineSize:"unset"}},dialogDefault:{minBlockSize:"100vh",minInlineSize:"unset"},dialogBlockEnd:{minBlockSize:"unset",minInlineSize:"unset"},inlineStart:{},inlineEnd:{},blockEnd:{height:"auto",minBlockSize:"unset",maxInlineSize:"unset",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{height:"auto"}}});DrawerDialog.displayName="DrawerDialog";
92
90
 
93
91
  function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
94
92
 
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "8.8.0",
6
+ "version": "8.8.1",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -28,15 +28,15 @@
28
28
  "./styles.css": "./dist/css/vars.css"
29
29
  },
30
30
  "dependencies": {
31
- "@khanacademy/wonder-blocks-announcer": "1.1.1",
32
- "@khanacademy/wonder-blocks-breadcrumbs": "3.2.27",
33
- "@khanacademy/wonder-blocks-core": "12.4.4",
34
- "@khanacademy/wonder-blocks-icon-button": "11.4.6",
35
- "@khanacademy/wonder-blocks-layout": "3.1.60",
31
+ "@khanacademy/wonder-blocks-announcer": "1.1.2",
32
+ "@khanacademy/wonder-blocks-breadcrumbs": "3.2.28",
33
+ "@khanacademy/wonder-blocks-core": "12.5.0",
34
+ "@khanacademy/wonder-blocks-icon-button": "11.5.0",
35
+ "@khanacademy/wonder-blocks-layout": "3.1.61",
36
36
  "@khanacademy/wonder-blocks-styles": "0.2.53",
37
37
  "@khanacademy/wonder-blocks-timing": "7.1.0",
38
38
  "@khanacademy/wonder-blocks-tokens": "17.3.0",
39
- "@khanacademy/wonder-blocks-typography": "5.0.3"
39
+ "@khanacademy/wonder-blocks-typography": "5.0.4"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@phosphor-icons/core": "^2.0.2",
package/dist/hooks/use-direction-detection.d.ts DELETED
@@ -1,58 +0,0 @@
1
- import * as React from "react";
2
- type Direction = "ltr" | "rtl";
3
- interface DirectionDetectionOptions {
4
- /**
5
- * Explicit direction to use, bypassing DOM detection.
6
- * Useful when direction is known from external sources like RequestInfo.
7
- */
8
- direction?: Direction;
9
- /**
10
- * The default direction to use if no dir attribute is found.
11
- * Defaults to "ltr".
12
- */
13
- defaultDirection?: Direction;
14
- }
15
- /**
16
- * Hook for detecting the text direction (LTR/RTL). Supports both element-specific
17
- * and document-level direction detection.
18
- *
19
- * This hook performs DOM queries on each render and does not use state or
20
- * observers, making it stable and predictable.
21
- *
22
- * @param elementRef - Optional ref to the element to start searching from.
23
- * If provided, searches up the DOM tree from this element.
24
- * If not provided, uses document-level detection.
25
- * @param options - Configuration options for direction detection
26
- * @returns The detected direction ("ltr" or "rtl")
27
- *
28
- * @example
29
- * ```tsx
30
- * // Element-specific detection - searches up DOM tree from the element
31
- * const MyComponent = () => {
32
- * const ref = React.useRef<HTMLDivElement>(null);
33
- * const direction = useDirectionDetection(ref);
34
- *
35
- * return (
36
- * <div ref={ref}>
37
- * Direction is: {direction}
38
- * </div>
39
- * );
40
- * };
41
- *
42
- * // Document-level detection - uses document.documentElement.dir
43
- * const MyOtherComponent = () => {
44
- * const direction = useDirectionDetection();
45
- * return <div>Page direction is: {direction}</div>;
46
- * };
47
- *
48
- * // With explicit direction (e.g., from RequestInfo)
49
- * const MyRTLComponent = ({requestInfo}) => {
50
- * const direction = useDirectionDetection(undefined, {
51
- * direction: requestInfo.isRTL ? "rtl" : "ltr"
52
- * });
53
- * return <div>Explicit direction: {direction}</div>;
54
- * };
55
- * ```
56
- */
57
- export declare function useDirectionDetection(elementRef?: React.RefObject<HTMLElement | null>, options?: DirectionDetectionOptions): Direction;
58
- export {};