@khanacademy/wonder-blocks-core 12.4.3 → 12.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-core
 
+## 12.5.0
+
+### Minor Changes
+
+- 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.
+
+## 12.4.4
+
+### Patch Changes
+
+- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
+- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
+
 ## 12.4.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -5,11 +5,11 @@ import { StyleSheet, css } from 'aphrodite';
 
 function flatten(list){const result=[];if(!list){return result}else if(Array.isArray(list)){for(const item of list){result.push(...flatten(item));}}else {result.push(list);}return result}function processStyleList(style){const stylesheetStyles=[];const inlineStyles=[];if(!style){return {style:{},className:""}}const shouldInlineStyles=typeof global!=="undefined"&&global.SNAPSHOT_INLINE_APHRODITE;flatten(style).forEach(child=>{const _definition=child._definition;if(_definition!=null){if(shouldInlineStyles){const def={};for(const[key,value]of Object.entries(_definition)){def[key.replace(/-[a-z]/g,match=>match[1].toUpperCase())]=value;}inlineStyles.push(def);}else {stylesheetStyles.push(child);}}else {inlineStyles.push(child);}});const inlineStylesObject=Object.assign({},...inlineStyles);if(inlineStyles.length>0&&!shouldInlineStyles){const inlineStylesStyleSheet=StyleSheet.create({inlineStyles:inlineStylesObject});stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);}return {style:shouldInlineStyles?inlineStylesObject:{},className:css(...stylesheetStyles)}}
 
-const isHeaderRegex=/^h[1-6]$/;const styles$1=StyleSheet.create({text:{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},header:{marginTop:0,marginBottom:0}});const Text=React.forwardRef(function Text({children,style,tag:Tag="span",testId,...otherProps},ref){const isHeader=isHeaderRegex.test(Tag);const styleAttributes=processStyleList([styles$1.text,isHeader&&styles$1.header,style]);const classNames=otherProps.className?[otherProps.className,styleAttributes.className].join(" "):styleAttributes.className;return jsx(Tag,{...otherProps,style:styleAttributes.style,className:classNames,"data-testid":testId,ref:ref,children:children})});
+const isHeaderRegex=/^h[1-6]$/;const styles$1=StyleSheet.create({text:{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},header:{marginBlockStart:0,marginBlockEnd:0}});const Text=React.forwardRef(function Text({children,style,tag="span",testId,...otherProps},ref){const Tag=tag;const isHeader=isHeaderRegex.test(tag);const styleAttributes=processStyleList([styles$1.text,isHeader&&styles$1.header,style]);const classNames=otherProps.className?[otherProps.className,styleAttributes.className].join(" "):styleAttributes.className;return jsx(Tag,{...otherProps,style:styleAttributes.style,className:classNames,"data-testid":testId,ref:ref,children:children})});
 
 function addStyle(Component,defaultStyle){return React.forwardRef((props,ref)=>{const{className,style,...otherProps}=props;const reset=typeof Component==="string"?overrides[Component]:null;const{className:aphroditeClassName,style:inlineStyles}=processStyleList([reset,defaultStyle,style]);return jsx(Component,{...otherProps,ref:ref,className:[aphroditeClassName,className].filter(Boolean).join(" "),style:inlineStyles})})}const overrides=StyleSheet.create({button:{margin:0,"::-moz-focus-inner":{border:0}}});
 
-const styles=StyleSheet.create({default:{alignItems:"stretch",borderWidth:0,borderStyle:"solid",boxSizing:"border-box",display:"flex",flexDirection:"column",margin:0,padding:0,position:"relative",zIndex:0,minHeight:0,minWidth:0}});const View=React.forwardRef(function View(props,ref){const{testId,tag="div",...restProps}=props;const commonProps={...restProps,"data-testid":testId};const StyledTag=useMemo(()=>addStyle(tag,styles.default),[tag]);return jsx(StyledTag,{...commonProps,ref:ref})});
+const styles=StyleSheet.create({default:{alignItems:"stretch",borderWidth:0,borderStyle:"solid",boxSizing:"border-box",display:"flex",flexDirection:"column",margin:0,padding:0,position:"relative",zIndex:0,minBlockSize:0,minInlineSize:0}});const View=React.forwardRef(function View(props,ref){const{testId,tag="div",...restProps}=props;const commonProps={...restProps,"data-testid":testId};const StyledTag=useMemo(()=>addStyle(tag,styles.default),[tag]);return jsx(StyledTag,{...commonProps,ref:ref})});
 
 var RenderState=/*#__PURE__*/function(RenderState){RenderState["Initial"]="initial";RenderState["Standard"]="standard";return RenderState}({});var RenderStateInternal=/*#__PURE__*/function(RenderStateInternal){RenderStateInternal["Root"]="root";RenderStateInternal["Initial"]="initial";RenderStateInternal["Standard"]="standard";return RenderStateInternal}({});const RenderStateContext=React.createContext("root");RenderStateContext.displayName="RenderStateContext";
 
@@ -19,6 +19,8 @@ let serverSide=false;var Server = {isServerSide:()=>serverSide,setServerSide:()=
 
 const Id=({id,children})=>{const generatedId=useId();return jsx(Fragment,{children:children(id??generatedId)})};
 
+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}
+
 const useForceUpdate=()=>{const[,setUpdateState]=React.useState({});const forceUpdate=React.useCallback(()=>{setUpdateState({});},[]);return forceUpdate};
 
 const useIsMounted=()=>{const isMountedRef=React.useRef(false);const isMounted=React.useCallback(()=>isMountedRef.current,[]);React.useEffect(()=>{isMountedRef.current=true;return ()=>{isMountedRef.current=false;}},[]);return isMounted};
@@ -39,4 +41,4 @@ const keys={enter:"Enter",escape:"Escape",tab:"Tab",space:" ",up:"ArrowUp",down:
 
 const FOCUSABLE_ELEMENTS='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}
 
-export { Id, InitialFallback, RenderState, RenderStateRoot, Server, Text, View, addStyle, findFocusableNodes, keys, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, usePreHydrationEffect, useRenderState };
+export { Id, InitialFallback, RenderState, RenderStateRoot, Server, Text, View, addStyle, findFocusableNodes, keys, useDirectionDetection, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, usePreHydrationEffect, useRenderState };

package/dist/hooks/use-direction-detection.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+type Direction = "ltr" | "rtl";
+interface DirectionDetectionOptions {
+    /**
+     * Explicit direction to use, bypassing DOM detection.
+     * Useful when direction is known from external sources like RequestInfo.
+     */
+    direction?: Direction;
+    /**
+     * The default direction to use if no dir attribute is found.
+     * Defaults to "ltr".
+     */
+    defaultDirection?: Direction;
+}
+/**
+ * Hook for detecting the text direction (LTR/RTL). Supports both element-specific
+ * and document-level direction detection.
+ *
+ * This hook performs DOM queries on each render and does not use state or
+ * observers, making it stable and predictable.
+ *
+ * @param elementRef - Optional ref to the element to start searching from.
+ *                     If provided, searches up the DOM tree from this element.
+ *                     If not provided, uses document-level detection.
+ * @param options - Configuration options for direction detection
+ * @returns The detected direction ("ltr" or "rtl")
+ *
+ * @example
+ * ```tsx
+ * // Element-specific detection - searches up DOM tree from the element
+ * const MyComponent = () => {
+ *     const ref = React.useRef<HTMLDivElement>(null);
+ *     const direction = useDirectionDetection(ref);
+ *
+ *     return (
+ *         <div ref={ref}>
+ *             Direction is: {direction}
+ *         </div>
+ *     );
+ * };
+ *
+ * // Document-level detection - uses document.documentElement.dir
+ * const MyOtherComponent = () => {
+ *     const direction = useDirectionDetection();
+ *     return <div>Page direction is: {direction}</div>;
+ * };
+ *
+ * // With explicit direction (e.g., from RequestInfo)
+ * const MyRTLComponent = ({requestInfo}) => {
+ *     const direction = useDirectionDetection(undefined, {
+ *         direction: requestInfo.isRTL ? "rtl" : "ltr"
+ *     });
+ *     return <div>Explicit direction: {direction}</div>;
+ * };
+ * ```
+ */
+export declare function useDirectionDetection(elementRef?: React.RefObject<HTMLElement | null>, options?: DirectionDetectionOptions): Direction;
+export {};

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as InitialFallback } from "./components/initial-fallback";
 export { default as addStyle } from "./util/add-style";
 export { default as Server } from "./util/server";
 export { Id } from "./components/id";
+export { useDirectionDetection } from "./hooks/use-direction-detection";
 export { useForceUpdate } from "./hooks/use-force-update";
 export { useIsMounted } from "./hooks/use-is-mounted";
 export { useLatestRef } from "./hooks/use-latest-ref";

package/dist/index.js

@@ -28,11 +28,11 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function flatten(list){const result=[];if(!list){return result}else if(Array.isArray(list)){for(const item of list){result.push(...flatten(item));}}else {result.push(list);}return result}function processStyleList(style){const stylesheetStyles=[];const inlineStyles=[];if(!style){return {style:{},className:""}}const shouldInlineStyles=typeof global!=="undefined"&&global.SNAPSHOT_INLINE_APHRODITE;flatten(style).forEach(child=>{const _definition=child._definition;if(_definition!=null){if(shouldInlineStyles){const def={};for(const[key,value]of Object.entries(_definition)){def[key.replace(/-[a-z]/g,match=>match[1].toUpperCase())]=value;}inlineStyles.push(def);}else {stylesheetStyles.push(child);}}else {inlineStyles.push(child);}});const inlineStylesObject=Object.assign({},...inlineStyles);if(inlineStyles.length>0&&!shouldInlineStyles){const inlineStylesStyleSheet=aphrodite.StyleSheet.create({inlineStyles:inlineStylesObject});stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);}return {style:shouldInlineStyles?inlineStylesObject:{},className:aphrodite.css(...stylesheetStyles)}}
 
-const isHeaderRegex=/^h[1-6]$/;const styles$1=aphrodite.StyleSheet.create({text:{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},header:{marginTop:0,marginBottom:0}});const Text=React__namespace.forwardRef(function Text({children,style,tag:Tag="span",testId,...otherProps},ref){const isHeader=isHeaderRegex.test(Tag);const styleAttributes=processStyleList([styles$1.text,isHeader&&styles$1.header,style]);const classNames=otherProps.className?[otherProps.className,styleAttributes.className].join(" "):styleAttributes.className;return jsxRuntime.jsx(Tag,{...otherProps,style:styleAttributes.style,className:classNames,"data-testid":testId,ref:ref,children:children})});
+const isHeaderRegex=/^h[1-6]$/;const styles$1=aphrodite.StyleSheet.create({text:{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},header:{marginBlockStart:0,marginBlockEnd:0}});const Text=React__namespace.forwardRef(function Text({children,style,tag="span",testId,...otherProps},ref){const Tag=tag;const isHeader=isHeaderRegex.test(tag);const styleAttributes=processStyleList([styles$1.text,isHeader&&styles$1.header,style]);const classNames=otherProps.className?[otherProps.className,styleAttributes.className].join(" "):styleAttributes.className;return jsxRuntime.jsx(Tag,{...otherProps,style:styleAttributes.style,className:classNames,"data-testid":testId,ref:ref,children:children})});
 
 function addStyle(Component,defaultStyle){return React__namespace.forwardRef((props,ref)=>{const{className,style,...otherProps}=props;const reset=typeof Component==="string"?overrides[Component]:null;const{className:aphroditeClassName,style:inlineStyles}=processStyleList([reset,defaultStyle,style]);return jsxRuntime.jsx(Component,{...otherProps,ref:ref,className:[aphroditeClassName,className].filter(Boolean).join(" "),style:inlineStyles})})}const overrides=aphrodite.StyleSheet.create({button:{margin:0,"::-moz-focus-inner":{border:0}}});
 
-const styles=aphrodite.StyleSheet.create({default:{alignItems:"stretch",borderWidth:0,borderStyle:"solid",boxSizing:"border-box",display:"flex",flexDirection:"column",margin:0,padding:0,position:"relative",zIndex:0,minHeight:0,minWidth:0}});const View=React__namespace.forwardRef(function View(props,ref){const{testId,tag="div",...restProps}=props;const commonProps={...restProps,"data-testid":testId};const StyledTag=React.useMemo(()=>addStyle(tag,styles.default),[tag]);return jsxRuntime.jsx(StyledTag,{...commonProps,ref:ref})});
+const styles=aphrodite.StyleSheet.create({default:{alignItems:"stretch",borderWidth:0,borderStyle:"solid",boxSizing:"border-box",display:"flex",flexDirection:"column",margin:0,padding:0,position:"relative",zIndex:0,minBlockSize:0,minInlineSize:0}});const View=React__namespace.forwardRef(function View(props,ref){const{testId,tag="div",...restProps}=props;const commonProps={...restProps,"data-testid":testId};const StyledTag=React.useMemo(()=>addStyle(tag,styles.default),[tag]);return jsxRuntime.jsx(StyledTag,{...commonProps,ref:ref})});
 
 var RenderState=/*#__PURE__*/function(RenderState){RenderState["Initial"]="initial";RenderState["Standard"]="standard";return RenderState}({});var RenderStateInternal=/*#__PURE__*/function(RenderStateInternal){RenderStateInternal["Root"]="root";RenderStateInternal["Initial"]="initial";RenderStateInternal["Standard"]="standard";return RenderStateInternal}({});const RenderStateContext=React__namespace.createContext("root");RenderStateContext.displayName="RenderStateContext";
 
@@ -42,6 +42,8 @@ let serverSide=false;var Server = {isServerSide:()=>serverSide,setServerSide:()=
 
 const Id=({id,children})=>{const generatedId=React.useId();return jsxRuntime.jsx(jsxRuntime.Fragment,{children:children(id??generatedId)})};
 
+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}
+
 const useForceUpdate=()=>{const[,setUpdateState]=React__namespace.useState({});const forceUpdate=React__namespace.useCallback(()=>{setUpdateState({});},[]);return forceUpdate};
 
 const useIsMounted=()=>{const isMountedRef=React__namespace.useRef(false);const isMounted=React__namespace.useCallback(()=>isMountedRef.current,[]);React__namespace.useEffect(()=>{isMountedRef.current=true;return ()=>{isMountedRef.current=false;}},[]);return isMounted};
@@ -72,6 +74,7 @@ exports.View = View;
 exports.addStyle = addStyle;
 exports.findFocusableNodes = findFocusableNodes;
 exports.keys = keys;
+exports.useDirectionDetection = useDirectionDetection;
 exports.useForceUpdate = useForceUpdate;
 exports.useIsMounted = useIsMounted;
 exports.useLatestRef = useLatestRef;

package/dist/util/types.d.ts

@@ -79,7 +79,15 @@ export type TextViewSharedProps = {
     tabIndex?: number;
     id?: string;
     title?: string;
+    /**
+     * Should be ignored
+     * @ignore
+     */
     "data-modal-launcher-portal"?: boolean;
+    /**
+     * Should be ignored
+     * @ignore
+     */
     "data-placement"?: string;
 } & AriaProps & EventHandlers;
 export * from "./types.propsfor";

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "12.4.3",
+  "version": "12.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "3.3.0",
-    "@khanacademy/wonder-blocks-testing-core": "5.0.0"
+    "@khanacademy/wonder-blocks-testing-core": "5.2.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"