@khanacademy/wonder-blocks-icon 5.3.23 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-icon
 
+## 6.0.0
+
+### Major Changes
+
+- a1f5a09: `PhosphorIcon` now automatically mirrors directional icons in RTL via a central allowlist, so call sites must stop swapping icons on `isRtl` (or pass `mirrorInRtl` to override per call site) to avoid double-flipping.
+
 ## 5.3.23
 
 ### Patch Changes

package/dist/components/phosphor-icon.d.ts

@@ -28,6 +28,13 @@ import { IconSize, PhosphorIconAsset } from "../types";
  * - medium: 2.4rem (24px)
  * - large: 4.8rem (48px)
  * - xlarge: 9.6rem (96px)
+ *
+ * ## Right-to-left
+ *
+ * Directional glyphs (arrows, carets, and similar) are mirrored automatically
+ * in RTL via a central allowlist. Pass the LTR-facing icon — do not swap icons
+ * based on `isRtl`. Use `mirrorInRtl` to override the allowlist per call site.
+ * See the PhosphorIcon RTL Mirroring docs for the list.
  */
 export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProps, "aria-hidden" | "aria-label" | "role"> & {
     /**
@@ -70,4 +77,14 @@ export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProp
      * - `string`: an import referencing an arbitrary SVG file.
      */
     icon: PhosphorIconAsset | string;
+    /**
+     * Whether to mirror this icon's glyph in right-to-left content, overriding
+     * the directional allowlist.
+     *
+     * - `true`: mirror even if the icon is not allowlisted (e.g. a custom
+     *   directional SVG).
+     * - `false`: do not mirror even if the icon is allowlisted.
+     * - omitted: use the allowlist.
+     */
+    mirrorInRtl?: boolean;
 } & React.RefAttributes<HTMLSpanElement>>;

package/dist/es/index.js

@@ -6,7 +6,11 @@ import { sizing } from '@khanacademy/wonder-blocks-tokens';
 
 function getSize$1(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=addStyle("div");const Icon=React.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsx(StyledDiv,{style:[getSize$1(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=StyleSheet.create({small:{width:sizing.size_160,height:sizing.size_160},medium:{width:sizing.size_240,height:sizing.size_240},large:{width:sizing.size_480,height:sizing.size_480},xlarge:{width:sizing.size_960,height:sizing.size_960}});
 
-const StyledSpan=addStyle("span");const PhosphorIcon=React.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const sizeStyles=getSize(size);const classNames=`${className??""}`;return jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,sizeStyles,{backgroundColor:color,maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});function getSize(size){switch(size){case"small":default:return styles.small;case"medium":return styles.medium;case"large":return styles.large;case"xlarge":return styles.xlarge}}const styles=StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"},small:{width:sizing.size_160,height:sizing.size_160},medium:{width:sizing.size_240,height:sizing.size_240},large:{width:sizing.size_480,height:sizing.size_480},xlarge:{width:sizing.size_960,height:sizing.size_960}});PhosphorIcon.displayName="PhosphorIcon";
+const MIRRORED_ICON_NAMES=new Set(["arrow-arc-left","arrow-arc-right","arrow-bend-double-up-left","arrow-bend-double-up-right","arrow-bend-down-left","arrow-bend-down-right","arrow-bend-left-down","arrow-bend-left-up","arrow-bend-right-down","arrow-bend-right-up","arrow-bend-up-left","arrow-bend-up-right","arrow-circle-down-left","arrow-circle-down-right","arrow-circle-left","arrow-circle-right","arrow-circle-up-left","arrow-circle-up-right","arrow-down-left","arrow-down-right","arrow-elbow-down-left","arrow-elbow-down-right","arrow-elbow-left","arrow-elbow-left-down","arrow-elbow-left-up","arrow-elbow-right","arrow-elbow-right-down","arrow-elbow-right-up","arrow-elbow-up-left","arrow-elbow-up-right","arrow-fat-left","arrow-fat-line-left","arrow-fat-line-right","arrow-fat-lines-left","arrow-fat-lines-right","arrow-fat-right","arrow-left","arrow-line-down-left","arrow-line-down-right","arrow-line-left","arrow-line-right","arrow-line-up-left","arrow-line-up-right","arrow-right","arrow-square-down-left","arrow-square-down-right","arrow-square-left","arrow-square-right","arrow-u-down-left","arrow-u-down-right","arrow-u-left-down","arrow-u-left-up","arrow-u-right-down","arrow-u-right-up","arrow-u-up-left","arrow-u-up-right","arrow-up-left","caret-circle-double-left","caret-circle-double-right","caret-circle-left","caret-circle-right","caret-double-left","caret-double-right","caret-left","caret-line-left","caret-line-right","caret-right","paper-plane","paper-plane-right","paper-plane-tilt","sign-in","sign-out","text-indent","text-outdent"]);
+
+const WEIGHT_SUFFIXES=["-bold","-fill","-thin","-light","-duotone"];function getPhosphorIconName(icon){if(!icon||icon.startsWith("data:")){return undefined}const path=icon.split(/[?#]/)[0];const basename=path.substring(path.lastIndexOf("/")+1);if(!basename.toLowerCase().endsWith(".svg")){return undefined}const withoutExtension=basename.slice(0,-".svg".length);for(const suffix of WEIGHT_SUFFIXES){if(withoutExtension.endsWith(suffix)){return withoutExtension.slice(0,-suffix.length)}}return withoutExtension}function shouldMirrorIconInRtl(icon){const name=getPhosphorIconName(icon);if(!name){return false}const segments=name.split("-");for(let i=0;i<segments.length;i++){if(MIRRORED_ICON_NAMES.has(segments.slice(i).join("-"))){return true}}for(let end=1;end<segments.length;end++){if(MIRRORED_ICON_NAMES.has(segments.slice(0,end).join("-"))){return true}}return false}function resolveMirrorInRtl(icon,mirrorInRtl){return mirrorInRtl??shouldMirrorIconInRtl(icon)}
+
+const StyledSpan=addStyle("span");const PhosphorIcon=React.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,mirrorInRtl,...sharedProps}=props;const sizeStyles=getSize(size);const classNames=`${className??""}`;const shouldMirror=resolveMirrorInRtl(icon,mirrorInRtl);return jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,sizeStyles,{backgroundColor:color,maskImage:`url(${icon})`},shouldMirror&&styles.mirroredInRtl,style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});function getSize(size){switch(size){case"small":default:return styles.small;case"medium":return styles.medium;case"large":return styles.large;case"xlarge":return styles.xlarge}}const styles=StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"},mirroredInRtl:{[":dir(rtl)"]:{transform:"scaleX(-1)"}},small:{width:sizing.size_160,height:sizing.size_160},medium:{width:sizing.size_240,height:sizing.size_240},large:{width:sizing.size_480,height:sizing.size_480},xlarge:{width:sizing.size_960,height:sizing.size_960}});PhosphorIcon.displayName="PhosphorIcon";
 
 function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}
 

package/dist/index.js

@@ -30,7 +30,11 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function getSize$1(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=wonderBlocksCore.addStyle("div");const Icon=React__namespace.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React__namespace.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsxRuntime.jsx(StyledDiv,{style:[getSize$1(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=aphrodite.StyleSheet.create({small:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},medium:{width:wonderBlocksTokens.sizing.size_240,height:wonderBlocksTokens.sizing.size_240},large:{width:wonderBlocksTokens.sizing.size_480,height:wonderBlocksTokens.sizing.size_480},xlarge:{width:wonderBlocksTokens.sizing.size_960,height:wonderBlocksTokens.sizing.size_960}});
 
-const StyledSpan=wonderBlocksCore.addStyle("span");const PhosphorIcon=React__namespace.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const sizeStyles=getSize(size);const classNames=`${className??""}`;return jsxRuntime.jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,sizeStyles,{backgroundColor:color,maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});function getSize(size){switch(size){case"small":default:return styles.small;case"medium":return styles.medium;case"large":return styles.large;case"xlarge":return styles.xlarge}}const styles=aphrodite.StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"},small:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},medium:{width:wonderBlocksTokens.sizing.size_240,height:wonderBlocksTokens.sizing.size_240},large:{width:wonderBlocksTokens.sizing.size_480,height:wonderBlocksTokens.sizing.size_480},xlarge:{width:wonderBlocksTokens.sizing.size_960,height:wonderBlocksTokens.sizing.size_960}});PhosphorIcon.displayName="PhosphorIcon";
+const MIRRORED_ICON_NAMES=new Set(["arrow-arc-left","arrow-arc-right","arrow-bend-double-up-left","arrow-bend-double-up-right","arrow-bend-down-left","arrow-bend-down-right","arrow-bend-left-down","arrow-bend-left-up","arrow-bend-right-down","arrow-bend-right-up","arrow-bend-up-left","arrow-bend-up-right","arrow-circle-down-left","arrow-circle-down-right","arrow-circle-left","arrow-circle-right","arrow-circle-up-left","arrow-circle-up-right","arrow-down-left","arrow-down-right","arrow-elbow-down-left","arrow-elbow-down-right","arrow-elbow-left","arrow-elbow-left-down","arrow-elbow-left-up","arrow-elbow-right","arrow-elbow-right-down","arrow-elbow-right-up","arrow-elbow-up-left","arrow-elbow-up-right","arrow-fat-left","arrow-fat-line-left","arrow-fat-line-right","arrow-fat-lines-left","arrow-fat-lines-right","arrow-fat-right","arrow-left","arrow-line-down-left","arrow-line-down-right","arrow-line-left","arrow-line-right","arrow-line-up-left","arrow-line-up-right","arrow-right","arrow-square-down-left","arrow-square-down-right","arrow-square-left","arrow-square-right","arrow-u-down-left","arrow-u-down-right","arrow-u-left-down","arrow-u-left-up","arrow-u-right-down","arrow-u-right-up","arrow-u-up-left","arrow-u-up-right","arrow-up-left","caret-circle-double-left","caret-circle-double-right","caret-circle-left","caret-circle-right","caret-double-left","caret-double-right","caret-left","caret-line-left","caret-line-right","caret-right","paper-plane","paper-plane-right","paper-plane-tilt","sign-in","sign-out","text-indent","text-outdent"]);
+
+const WEIGHT_SUFFIXES=["-bold","-fill","-thin","-light","-duotone"];function getPhosphorIconName(icon){if(!icon||icon.startsWith("data:")){return undefined}const path=icon.split(/[?#]/)[0];const basename=path.substring(path.lastIndexOf("/")+1);if(!basename.toLowerCase().endsWith(".svg")){return undefined}const withoutExtension=basename.slice(0,-".svg".length);for(const suffix of WEIGHT_SUFFIXES){if(withoutExtension.endsWith(suffix)){return withoutExtension.slice(0,-suffix.length)}}return withoutExtension}function shouldMirrorIconInRtl(icon){const name=getPhosphorIconName(icon);if(!name){return false}const segments=name.split("-");for(let i=0;i<segments.length;i++){if(MIRRORED_ICON_NAMES.has(segments.slice(i).join("-"))){return true}}for(let end=1;end<segments.length;end++){if(MIRRORED_ICON_NAMES.has(segments.slice(0,end).join("-"))){return true}}return false}function resolveMirrorInRtl(icon,mirrorInRtl){return mirrorInRtl??shouldMirrorIconInRtl(icon)}
+
+const StyledSpan=wonderBlocksCore.addStyle("span");const PhosphorIcon=React__namespace.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,mirrorInRtl,...sharedProps}=props;const sizeStyles=getSize(size);const classNames=`${className??""}`;const shouldMirror=resolveMirrorInRtl(icon,mirrorInRtl);return jsxRuntime.jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,sizeStyles,{backgroundColor:color,maskImage:`url(${icon})`},shouldMirror&&styles.mirroredInRtl,style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});function getSize(size){switch(size){case"small":default:return styles.small;case"medium":return styles.medium;case"large":return styles.large;case"xlarge":return styles.xlarge}}const styles=aphrodite.StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"},mirroredInRtl:{[":dir(rtl)"]:{transform:"scaleX(-1)"}},small:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},medium:{width:wonderBlocksTokens.sizing.size_240,height:wonderBlocksTokens.sizing.size_240},large:{width:wonderBlocksTokens.sizing.size_480,height:wonderBlocksTokens.sizing.size_480},xlarge:{width:wonderBlocksTokens.sizing.size_960,height:wonderBlocksTokens.sizing.size_960}});PhosphorIcon.displayName="PhosphorIcon";
 
 function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}
 

package/dist/util/directional-icons.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Extracts the Phosphor icon name from a resolved asset reference.
+ *
+ * The `icon` prop is whatever the bundler produced for the SVG import, so the
+ * shape varies by environment:
+ * - Vite dev server: `/node_modules/.../assets/regular/arrow-right.svg`
+ * - Vite production / Storybook build: `/assets/arrow-right-[hash].svg`
+ * - rspack `asset/resource`: `/images/[hash]-arrow-right.svg`
+ * - Jest transform: `arrow-right.svg`
+ *
+ * All of these end in `<name>[-weight].svg`, optionally behind a content hash
+ * and a directory prefix, so the name is recovered from the final path
+ * segment. Returns `undefined` when no name can be recovered — most notably
+ * for `data:` URIs, which carry no file name at all.
+ */
+export declare function getPhosphorIconName(icon: string): string | undefined;
+/**
+ * Whether the given icon asset should be mirrored in right-to-left content.
+ *
+ * Bundlers insert a content hash next to the icon name:
+ * - rspack `asset/resource`: `[hash]-[name][ext]` (hash prefix)
+ * - Vite production builds: `[name]-[hash][ext]` (hash suffix)
+ *
+ * We match every `-`-delimited prefix and suffix of the basename against the
+ * allowlist so both forms resolve (e.g. `arrow-right` from
+ * `a1b2c3d4-arrow-right` or `arrow-right-a1b2c3d4`). Returns `false` when the
+ * icon cannot be identified.
+ */
+export declare function shouldMirrorIconInRtl(icon: string): boolean;
+/**
+ * Resolves whether an icon is mirrored in RTL, honoring the `mirrorInRtl`
+ * override.
+ *
+ * `mirrorInRtl` wins in both directions when set: `true` opts a custom
+ * directional SVG in, `false` opts an allowlisted icon out. Omitting it falls
+ * back to the allowlist.
+ */
+export declare function resolveMirrorInRtl(icon: string, mirrorInRtl?: boolean): boolean;

package/dist/util/mirrored-icon-names.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Icon names mirrored in RTL by `PhosphorIcon`. Single source of truth —
+ * add or remove names in a Wonder Blocks PR rather than special-casing a call
+ * site. `mirrorInRtl` exists for the exceptions. See the PhosphorIcon RTL docs
+ * for deliberate exclusions (media, launch, trends, physical text-align, etc.).
+ *
+ * Names are the Phosphor asset names, without the weight suffix — browse them
+ * at https://phosphoricons.com/. All weights of a name share one entry, so
+ * `caret-right` covers `caret-right-bold`, `caret-right-fill`, and so on.
+ */
+export declare const MIRRORED_ICON_NAMES: ReadonlySet<string>;

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "5.3.23",
+  "version": "6.0.0",
   "publishConfig": {
     "access": "public"
   },