@khanacademy/wonder-blocks-core 12.2.1 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-core
 
+## 12.4.0
+
+### Minor Changes
+
+- 1334e74: Adding dir to View's type to support RTL usage.
+
+## 12.3.0
+
+### Minor Changes
+
+- 28fa0c0: Add focus utilities: `findFocusableNodes` and `isFocusable`
+- 28fa0c0: Add constants for `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys
+
 ## 12.2.1
 
 ### Patch Changes

package/dist/components/text.d.ts

@@ -17,6 +17,7 @@ declare const Text: React.ForwardRefExoticComponent<{
     testId?: string;
     lang?: string;
     className?: string;
+    dir?: "ltr" | "rtl" | "auto";
     htmlFor?: string;
     tabIndex?: number;
     id?: string;

package/dist/es/index.js

@@ -1,343 +1,40 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo, useId, useEffect as useEffect$1, useContext as useContext$1 } from 'react';
 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)
-  };
-}
+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 _excluded$2 = ["children", "style", "tag", "testId"];
-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(_ref, ref) {
-  let {
-      children,
-      style,
-      tag: Tag = "span",
-      testId
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  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 (React.createElement(Tag, _extends({}, otherProps, {
-      style: styleAttributes.style,
-      className: classNames,
-      "data-testid": testId,
-      ref: ref
-    }), children)
-  );
-});
+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 _excluded$1 = ["className", "style"];
-function addStyle(Component, defaultStyle) {
-  return React.forwardRef((props, ref) => {
-    const _ref = props,
-      {
-        className,
-        style
-      } = _ref,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    const reset = typeof Component === "string" ? overrides[Component] : null;
-    const {
-      className: aphroditeClassName,
-      style: inlineStyles
-    } = processStyleList([reset, defaultStyle, style]);
-    return React.createElement(Component, _extends({}, otherProps, {
-      ref: ref,
-      className: [aphroditeClassName, className].filter(Boolean).join(" "),
-      style: inlineStyles
-    }));
-  });
-}
-const overrides = StyleSheet.create({
-  button: {
-    margin: 0,
-    "::-moz-focus-inner": {
-      border: 0
-    }
-  }
-});
+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 _excluded = ["testId", "tag"];
-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"
-    } = props,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const commonProps = _extends({}, restProps, {
-    "data-testid": testId
-  });
-  const StyledTag = useMemo(() => addStyle(tag, styles.default), [tag]);
-  return React.createElement(StyledTag, _extends({}, 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,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})});
 
-let RenderState = function (RenderState) {
-  RenderState["Initial"] = "initial";
-  RenderState["Standard"] = "standard";
-  return RenderState;
-}({});
-let RenderStateInternal = function (RenderStateInternal) {
-  RenderStateInternal["Root"] = "root";
-  RenderStateInternal["Initial"] = "initial";
-  RenderStateInternal["Standard"] = "standard";
-  return RenderStateInternal;
-}({});
-const RenderStateContext = React.createContext(RenderStateInternal.Root);
-RenderStateContext.displayName = "RenderStateContext";
+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";
 
-class InitialFallback extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      mounted: false
-    };
-    this._isTheRootComponent = false;
-  }
-  componentDidMount() {
-    if (this._isTheRootComponent) {
-      this.setState({
-        mounted: true
-      });
-    }
-  }
-  _renderAsRootComponent() {
-    const {
-      mounted
-    } = this.state;
-    const {
-      children,
-      fallback
-    } = this.props;
-    this._isTheRootComponent = true;
-    if (mounted) {
-      return React.createElement(RenderStateContext.Provider, {
-        value: RenderStateInternal.Standard
-      }, children());
-    }
-    if (fallback) {
-      return React.createElement(RenderStateContext.Provider, {
-        value: RenderStateInternal.Initial
-      }, fallback());
-    }
-    return null;
-  }
-  _maybeRender(renderState) {
-    const {
-      children,
-      fallback
-    } = this.props;
-    switch (renderState) {
-      case RenderStateInternal.Root:
-        return this._renderAsRootComponent();
-      case RenderStateInternal.Initial:
-        return fallback ? fallback() : null;
-      case RenderStateInternal.Standard:
-        return children();
-    }
-    {
-      var _JSON$stringify;
-      console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
-      return this._maybeRender(RenderStateInternal.Root);
-    }
-  }
-  render() {
-    return React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
-  }
-}
+class InitialFallback extends React.Component{componentDidMount(){if(this._isTheRootComponent){this.setState({mounted:true});}}_renderAsRootComponent(){const{mounted}=this.state;const{children,fallback}=this.props;this._isTheRootComponent=true;if(mounted){return jsx(RenderStateContext.Provider,{value:RenderStateInternal.Standard,children:children()})}if(fallback){return jsx(RenderStateContext.Provider,{value:RenderStateInternal.Initial,children:fallback()})}return null}_maybeRender(renderState){const{children,fallback}=this.props;switch(renderState){case RenderStateInternal.Root:return this._renderAsRootComponent();case RenderStateInternal.Initial:return fallback?fallback():null;case RenderStateInternal.Standard:return children()}{console.log(`We got a render state we don't understand: "${JSON.stringify(renderState)??""}"`);return this._maybeRender(RenderStateInternal.Root)}}render(){return jsx(RenderStateContext.Consumer,{children:value=>this._maybeRender(value)})}constructor(...args){super(...args),this.state={mounted:false},this._isTheRootComponent=false;}}
 
-let serverSide = false;
-var Server = {
-  isServerSide: () => serverSide,
-  setServerSide: () => {
-    serverSide = true;
-  }
-};
+let serverSide=false;var Server = {isServerSide:()=>serverSide,setServerSide:()=>{serverSide=true;}};
 
-const Id = ({
-  id,
-  children
-}) => {
-  const generatedId = useId();
-  return React.createElement(React.Fragment, null, children(id != null ? id : generatedId));
-};
+const Id=({id,children})=>{const generatedId=useId();return jsx(Fragment,{children:children(id??generatedId)})};
 
-const useForceUpdate = () => {
-  const [, setUpdateState] = React.useState({});
-  const forceUpdate = React.useCallback(() => {
-    setUpdateState({});
-  }, []);
-  return forceUpdate;
-};
+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;
-};
+const useIsMounted=()=>{const isMountedRef=React.useRef(false);const isMounted=React.useCallback(()=>isMountedRef.current,[]);React.useEffect(()=>{isMountedRef.current=true;return ()=>{isMountedRef.current=false;}},[]);return isMounted};
 
-function useLatestRef(value) {
-  const ref = React.useRef(value);
-  ref.current = value;
-  return ref;
-}
+function useLatestRef(value){const ref=React.useRef(value);ref.current=value;return ref}
 
-const useOnMountEffect = callback => {
-  const isMountedRef = React.useRef(true);
-  React.useEffect(() => {
-    const cleanup = callback(isMountedRef);
-    return () => {
-      cleanup == null || cleanup();
-      isMountedRef.current = false;
-    };
-  }, []);
-};
+const useOnMountEffect=callback=>{const isMountedRef=React.useRef(true);React.useEffect(()=>{const cleanup=callback(isMountedRef);return ()=>{cleanup?.();isMountedRef.current=false;}},[]);};
 
-const useOnline = () => {
-  const forceUpdate = useForceUpdate();
-  useEffect$1(() => {
-    const handleChange = () => forceUpdate();
-    window.addEventListener("online", handleChange);
-    window.addEventListener("offline", handleChange);
-    return () => {
-      window.removeEventListener("online", handleChange);
-      window.removeEventListener("offline", handleChange);
-    };
-  }, [forceUpdate]);
-  return navigator.onLine;
-};
+const useOnline=()=>{const forceUpdate=useForceUpdate();useEffect$1(()=>{const handleChange=()=>forceUpdate();window.addEventListener("online",handleChange);window.addEventListener("offline",handleChange);return ()=>{window.removeEventListener("online",handleChange);window.removeEventListener("offline",handleChange);}},[forceUpdate]);return navigator.onLine};
 
-const usePreHydrationEffect = effect => {
-  const effectCallRef = React.useRef(Server.isServerSide() ? () => {} : React.useLayoutEffect);
-  effectCallRef.current(effect, []);
-};
+const usePreHydrationEffect=effect=>{const effectCallRef=React.useRef(Server.isServerSide()?()=>{}:React.useLayoutEffect);effectCallRef.current(effect,[]);};
 
-const useRenderState = () => {
-  const rawRenderState = useContext$1(RenderStateContext);
-  if (rawRenderState === RenderStateInternal.Standard) {
-    return RenderState.Standard;
-  } else {
-    return RenderState.Initial;
-  }
-};
+const useRenderState=()=>{const rawRenderState=useContext$1(RenderStateContext);if(rawRenderState===RenderStateInternal.Standard){return RenderState.Standard}else {return RenderState.Initial}};
 
-const {
-  useEffect,
-  useState,
-  useContext
-} = React;
-const RenderStateRoot = ({
-  children,
-  throwIfNested: _throwIfNested = true
-}) => {
-  const [firstRender, setFirstRender] = useState(true);
-  const renderState = useContext(RenderStateContext);
-  useEffect(() => {
-    setFirstRender(false);
-  }, []);
-  if (renderState !== RenderStateInternal.Root) {
-    if (_throwIfNested) {
-      throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
-    }
-    return React.createElement(React.Fragment, null, children);
-  }
-  const value = firstRender ? RenderStateInternal.Initial : RenderStateInternal.Standard;
-  return React.createElement(RenderStateContext.Provider, {
-    value: value
-  }, children);
-};
+const{useEffect,useState,useContext}=React;const RenderStateRoot=({children,throwIfNested=true})=>{const[firstRender,setFirstRender]=useState(true);const renderState=useContext(RenderStateContext);useEffect(()=>{setFirstRender(false);},[]);if(renderState!==RenderStateInternal.Root){if(throwIfNested){throw new Error("There's already a <RenderStateRoot> above this instance in "+"the render tree.  This instance should be removed.")}return jsx(Fragment,{children:children})}const value=firstRender?RenderStateInternal.Initial:RenderStateInternal.Standard;return jsx(RenderStateContext.Provider,{value:value,children:children})};
 
-const keys = {
-  enter: "Enter",
-  escape: "Escape",
-  tab: "Tab",
-  space: " ",
-  up: "ArrowUp",
-  down: "ArrowDown"
-};
+const keys={enter:"Enter",escape:"Escape",tab:"Tab",space:" ",up:"ArrowUp",down:"ArrowDown",left:"ArrowLeft",right:"ArrowRight",home:"Home",end:"End"};
 
 export { Id, InitialFallback, RenderState, RenderStateRoot, Server, Text, View, addStyle, keys, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, usePreHydrationEffect, useRenderState };

package/dist/index.js

@@ -2,13 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var aphrodite = require('aphrodite');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -27,345 +24,41 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 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)
-  };
-}
+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 _excluded$2 = ["children", "style", "tag", "testId"];
-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(_ref, ref) {
-  let {
-      children,
-      style,
-      tag: Tag = "span",
-      testId
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
-  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 (React__namespace.createElement(Tag, _extends__default["default"]({}, otherProps, {
-      style: styleAttributes.style,
-      className: classNames,
-      "data-testid": testId,
-      ref: ref
-    }), children)
-  );
-});
+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 _excluded$1 = ["className", "style"];
-function addStyle(Component, defaultStyle) {
-  return React__namespace.forwardRef((props, ref) => {
-    const _ref = props,
-      {
-        className,
-        style
-      } = _ref,
-      otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
-    const reset = typeof Component === "string" ? overrides[Component] : null;
-    const {
-      className: aphroditeClassName,
-      style: inlineStyles
-    } = processStyleList([reset, defaultStyle, style]);
-    return React__namespace.createElement(Component, _extends__default["default"]({}, otherProps, {
-      ref: ref,
-      className: [aphroditeClassName, className].filter(Boolean).join(" "),
-      style: inlineStyles
-    }));
-  });
-}
-const overrides = aphrodite.StyleSheet.create({
-  button: {
-    margin: 0,
-    "::-moz-focus-inner": {
-      border: 0
-    }
-  }
-});
+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 _excluded = ["testId", "tag"];
-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"
-    } = props,
-    restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const commonProps = _extends__default["default"]({}, restProps, {
-    "data-testid": testId
-  });
-  const StyledTag = React.useMemo(() => addStyle(tag, styles.default), [tag]);
-  return React__namespace.createElement(StyledTag, _extends__default["default"]({}, 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,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})});
 
-let RenderState = function (RenderState) {
-  RenderState["Initial"] = "initial";
-  RenderState["Standard"] = "standard";
-  return RenderState;
-}({});
-let RenderStateInternal = function (RenderStateInternal) {
-  RenderStateInternal["Root"] = "root";
-  RenderStateInternal["Initial"] = "initial";
-  RenderStateInternal["Standard"] = "standard";
-  return RenderStateInternal;
-}({});
-const RenderStateContext = React__namespace.createContext(RenderStateInternal.Root);
-RenderStateContext.displayName = "RenderStateContext";
+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";
 
-class InitialFallback extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      mounted: false
-    };
-    this._isTheRootComponent = false;
-  }
-  componentDidMount() {
-    if (this._isTheRootComponent) {
-      this.setState({
-        mounted: true
-      });
-    }
-  }
-  _renderAsRootComponent() {
-    const {
-      mounted
-    } = this.state;
-    const {
-      children,
-      fallback
-    } = this.props;
-    this._isTheRootComponent = true;
-    if (mounted) {
-      return React__namespace.createElement(RenderStateContext.Provider, {
-        value: RenderStateInternal.Standard
-      }, children());
-    }
-    if (fallback) {
-      return React__namespace.createElement(RenderStateContext.Provider, {
-        value: RenderStateInternal.Initial
-      }, fallback());
-    }
-    return null;
-  }
-  _maybeRender(renderState) {
-    const {
-      children,
-      fallback
-    } = this.props;
-    switch (renderState) {
-      case RenderStateInternal.Root:
-        return this._renderAsRootComponent();
-      case RenderStateInternal.Initial:
-        return fallback ? fallback() : null;
-      case RenderStateInternal.Standard:
-        return children();
-    }
-    {
-      var _JSON$stringify;
-      console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
-      return this._maybeRender(RenderStateInternal.Root);
-    }
-  }
-  render() {
-    return React__namespace.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
-  }
-}
+class InitialFallback extends React__namespace.Component{componentDidMount(){if(this._isTheRootComponent){this.setState({mounted:true});}}_renderAsRootComponent(){const{mounted}=this.state;const{children,fallback}=this.props;this._isTheRootComponent=true;if(mounted){return jsxRuntime.jsx(RenderStateContext.Provider,{value:RenderStateInternal.Standard,children:children()})}if(fallback){return jsxRuntime.jsx(RenderStateContext.Provider,{value:RenderStateInternal.Initial,children:fallback()})}return null}_maybeRender(renderState){const{children,fallback}=this.props;switch(renderState){case RenderStateInternal.Root:return this._renderAsRootComponent();case RenderStateInternal.Initial:return fallback?fallback():null;case RenderStateInternal.Standard:return children()}{console.log(`We got a render state we don't understand: "${JSON.stringify(renderState)??""}"`);return this._maybeRender(RenderStateInternal.Root)}}render(){return jsxRuntime.jsx(RenderStateContext.Consumer,{children:value=>this._maybeRender(value)})}constructor(...args){super(...args),this.state={mounted:false},this._isTheRootComponent=false;}}
 
-let serverSide = false;
-var Server = {
-  isServerSide: () => serverSide,
-  setServerSide: () => {
-    serverSide = true;
-  }
-};
+let serverSide=false;var Server = {isServerSide:()=>serverSide,setServerSide:()=>{serverSide=true;}};
 
-const Id = ({
-  id,
-  children
-}) => {
-  const generatedId = React.useId();
-  return React__namespace.createElement(React__namespace.Fragment, null, children(id != null ? id : generatedId));
-};
+const Id=({id,children})=>{const generatedId=React.useId();return jsxRuntime.jsx(jsxRuntime.Fragment,{children:children(id??generatedId)})};
 
-const useForceUpdate = () => {
-  const [, setUpdateState] = React__namespace.useState({});
-  const forceUpdate = React__namespace.useCallback(() => {
-    setUpdateState({});
-  }, []);
-  return forceUpdate;
-};
+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;
-};
+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};
 
-function useLatestRef(value) {
-  const ref = React__namespace.useRef(value);
-  ref.current = value;
-  return ref;
-}
+function useLatestRef(value){const ref=React__namespace.useRef(value);ref.current=value;return ref}
 
-const useOnMountEffect = callback => {
-  const isMountedRef = React__namespace.useRef(true);
-  React__namespace.useEffect(() => {
-    const cleanup = callback(isMountedRef);
-    return () => {
-      cleanup == null || cleanup();
-      isMountedRef.current = false;
-    };
-  }, []);
-};
+const useOnMountEffect=callback=>{const isMountedRef=React__namespace.useRef(true);React__namespace.useEffect(()=>{const cleanup=callback(isMountedRef);return ()=>{cleanup?.();isMountedRef.current=false;}},[]);};
 
-const useOnline = () => {
-  const forceUpdate = useForceUpdate();
-  React.useEffect(() => {
-    const handleChange = () => forceUpdate();
-    window.addEventListener("online", handleChange);
-    window.addEventListener("offline", handleChange);
-    return () => {
-      window.removeEventListener("online", handleChange);
-      window.removeEventListener("offline", handleChange);
-    };
-  }, [forceUpdate]);
-  return navigator.onLine;
-};
+const useOnline=()=>{const forceUpdate=useForceUpdate();React.useEffect(()=>{const handleChange=()=>forceUpdate();window.addEventListener("online",handleChange);window.addEventListener("offline",handleChange);return ()=>{window.removeEventListener("online",handleChange);window.removeEventListener("offline",handleChange);}},[forceUpdate]);return navigator.onLine};
 
-const usePreHydrationEffect = effect => {
-  const effectCallRef = React__namespace.useRef(Server.isServerSide() ? () => {} : React__namespace.useLayoutEffect);
-  effectCallRef.current(effect, []);
-};
+const usePreHydrationEffect=effect=>{const effectCallRef=React__namespace.useRef(Server.isServerSide()?()=>{}:React__namespace.useLayoutEffect);effectCallRef.current(effect,[]);};
 
-const useRenderState = () => {
-  const rawRenderState = React.useContext(RenderStateContext);
-  if (rawRenderState === RenderStateInternal.Standard) {
-    return RenderState.Standard;
-  } else {
-    return RenderState.Initial;
-  }
-};
+const useRenderState=()=>{const rawRenderState=React.useContext(RenderStateContext);if(rawRenderState===RenderStateInternal.Standard){return RenderState.Standard}else {return RenderState.Initial}};
 
-const {
-  useEffect,
-  useState,
-  useContext
-} = React__namespace;
-const RenderStateRoot = ({
-  children,
-  throwIfNested: _throwIfNested = true
-}) => {
-  const [firstRender, setFirstRender] = useState(true);
-  const renderState = useContext(RenderStateContext);
-  useEffect(() => {
-    setFirstRender(false);
-  }, []);
-  if (renderState !== RenderStateInternal.Root) {
-    if (_throwIfNested) {
-      throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
-    }
-    return React__namespace.createElement(React__namespace.Fragment, null, children);
-  }
-  const value = firstRender ? RenderStateInternal.Initial : RenderStateInternal.Standard;
-  return React__namespace.createElement(RenderStateContext.Provider, {
-    value: value
-  }, children);
-};
+const{useEffect,useState,useContext}=React__namespace;const RenderStateRoot=({children,throwIfNested=true})=>{const[firstRender,setFirstRender]=useState(true);const renderState=useContext(RenderStateContext);useEffect(()=>{setFirstRender(false);},[]);if(renderState!==RenderStateInternal.Root){if(throwIfNested){throw new Error("There's already a <RenderStateRoot> above this instance in "+"the render tree.  This instance should be removed.")}return jsxRuntime.jsx(jsxRuntime.Fragment,{children:children})}const value=firstRender?RenderStateInternal.Initial:RenderStateInternal.Standard;return jsxRuntime.jsx(RenderStateContext.Provider,{value:value,children:children})};
 
-const keys = {
-  enter: "Enter",
-  escape: "Escape",
-  tab: "Tab",
-  space: " ",
-  up: "ArrowUp",
-  down: "ArrowDown"
-};
+const keys={enter:"Enter",escape:"Escape",tab:"Tab",space:" ",up:"ArrowUp",down:"ArrowDown",left:"ArrowLeft",right:"ArrowRight",home:"Home",end:"End"};
 
 exports.Id = Id;
 exports.InitialFallback = InitialFallback;

package/dist/util/focus.d.ts

@@ -0,0 +1,6 @@
+export declare function findFocusableNodes(root: HTMLElement | Document): Array<HTMLElement>;
+/**
+ * Checks if an element is focusable
+ * @see https://html.spec.whatwg.org/multipage/interaction.html#focusable-area
+ */
+export declare function isFocusable(element: HTMLElement): boolean;

package/dist/util/keys.d.ts

@@ -9,4 +9,8 @@ export declare const keys: {
     readonly space: " ";
     readonly up: "ArrowUp";
     readonly down: "ArrowDown";
+    readonly left: "ArrowLeft";
+    readonly right: "ArrowRight";
+    readonly home: "Home";
+    readonly end: "End";
 };

package/dist/util/types.d.ts

@@ -71,6 +71,10 @@ export type TextViewSharedProps = {
      * Optional CSS classes for the entire dropdown component.
      */
     className?: string;
+    /**
+     * The text direction for the element.
+     */
+    dir?: "ltr" | "rtl" | "auto";
     htmlFor?: string;
     tabIndex?: number;
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "12.2.1",
+  "version": "12.4.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -9,19 +9,18 @@
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
-  "dependencies": {
-    "@babel/runtime": "^7.24.5"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router": "5.3.4",
-    "react-router-dom": "5.3.4"
+    "react-router-dom": "5.3.4",
+    "react-router-dom-v5-compat": "^6.30.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.1",
-    "@khanacademy/wonder-blocks-testing-core": "2.2.1"
+    "@khanacademy/wb-dev-build-settings": "3.2.0",
+    "@khanacademy/wonder-blocks-testing-core": "3.0.1"
   },
   "author": "",
   "license": "MIT",