@workday/canvas-kit-react 14.0.0-alpha.1254-next.0 → 14.0.0-alpha.1256-next.0

package/dist/es6/popup/lib/hooks/usePopupStack.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
-import { useLocalRef, useIsRTL, useCanvasThemeToCssVars } from '@workday/canvas-kit-react/common';
+import { useLocalRef, useCanvasThemeToCssVars, isElementRTL } from '@workday/canvas-kit-react/common';
 import { ThemeContext } from '@emotion/react';
 /**
  * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
@@ -46,7 +46,6 @@ import { ThemeContext } from '@emotion/react';
  */
 export const usePopupStack = (ref, target) => {
     const { elementRef, localRef } = useLocalRef(ref);
-    const isRTL = useIsRTL();
     // Pulls the theme from the context so that we can pass it to `useCanvasThemeToCssVars`
     const theme = React.useContext(ThemeContext);
     const { className, style } = useCanvasThemeToCssVars(theme, {});
@@ -83,13 +82,17 @@ export const usePopupStack = (ref, target) => {
     // hierarchy, so we'll add it back here.
     React.useLayoutEffect(() => {
         var _a, _b;
-        if (isRTL) {
-            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('dir', 'rtl');
-        }
-        else {
-            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('dir');
+        const targetEl = target ? ('current' in target ? target.current : target) : undefined;
+        if (targetEl) {
+            const isRTL = isElementRTL(targetEl);
+            if (isRTL) {
+                (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('dir', 'rtl');
+            }
+            else {
+                (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute('dir', 'ltr');
+            }
         }
-    }, [localRef, isRTL]);
+    }, [localRef, target]);
     /**
      * This pulls the className that gets generated by `useCanvasThemeToCssVars` and adds it to the Popup element to ensure
      * theming is applied. Popups get portaled to the DOM and therefore don't "live" inside the CanvasProvider.

package/dist/es6/segmented-control/lib/SegmentedControlButton.js

@@ -6,7 +6,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 const segmentedControlButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "1lnc1a", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-container);--borderRadius-button-65cb05:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-65cb05:var(--cnvs-brand-primary-base);--border-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
+    base: { name: "1lnc1a", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-85bf0e:var(--cnvs-brand-primary-base);--border-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
     modifiers: {
         segmentedControlButtonSize: {
             small: { name: "151b63", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },

package/dist/es6/tabs/lib/TabsItem.d.ts

@@ -377,11 +377,7 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
     readonly style: {};
     readonly inert: boolean | "" | undefined;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
-    readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void; /**
-     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
-     * should either be `true` or `undefined` and never `false`. This is automatically set by the
-     * component and should only be used in advanced cases.
-     */
+    readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     readonly onClick: () => void;
     readonly 'data-focus-id': string;
     readonly tabIndex: 0 | -1;

package/dist/es6/tabs/lib/TabsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAe7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA8ED,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EApGtB;;;;OAIG;;;;;;;;;;;;;uEAiHJ,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAe7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA8ED,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}

package/dist/es6/tabs/lib/TabsItem.js

@@ -9,7 +9,7 @@ import { useTabsModel } from './useTabsModel';
 import { buttonStencil } from '@workday/canvas-kit-react/button';
 import { system, brand } from '@workday/canvas-tokens-web';
 const tabItemStencil = createStencil({
-    base: { name: "43htft", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
+    base: { name: "43htft", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-85bf0e:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
 }, "tab-item-116136");
 export const StyledTabItem = createComponent('button')({
     displayName: 'StyledTabItem',

package/icon/lib/AccentIcon.tsx

@@ -79,7 +79,15 @@ export const accentIconStencil = createStencil({
 export const AccentIcon = createComponent('span')({
   displayName: 'AccentIcon',
   Component: (
-    {transparent, size, icon, color, shouldMirror, ...elemProps}: AccentIconProps,
+    {
+      transparent,
+      size,
+      icon,
+      color,
+      shouldMirror,
+      shouldMirrorInRTL,
+      ...elemProps
+    }: AccentIconProps,
     ref,
     Element
   ) => {
@@ -94,6 +102,7 @@ export const AccentIcon = createComponent('span')({
             color: transformColorNameToToken(color),
             size: typeof size === 'number' ? px2rem(size) : undefined,
             shouldMirror,
+            shouldMirrorInRTL,
             transparent,
           }),
         ])}

package/icon/lib/AppletIcon.tsx

@@ -62,7 +62,9 @@ export const appletIconStyles = ({
   };
 };
 
-export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
+export interface AppletIconProps
+  extends AppletIconStyles,
+    Pick<SvgProps, 'shouldMirror' | 'shouldMirrorInRTL' | 'cs'> {
   /**
    * The icon to display from `@workday/canvas-applet-icons-web`.
    */

package/icon/lib/Svg.tsx

@@ -9,10 +9,19 @@ export interface SvgProps extends BoxProps {
   src: CanvasIcon;
   type: CanvasIconTypes;
   /**
-   * If set to `true`, transform the SVG's x-axis to mirror the graphic
+   * If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to
+   * always mirror the icon regardless of the content direction. If the SVG should mirror only when
+   * in an right-to-left language, use `shouldMirrorInRTL` instead.
    * @default false
    */
   shouldMirror?: boolean;
+  /**
+   * If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction
+   * is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases.
+   * Setting this to `true` indicates the icon should be mirrored in right-to-left languages.
+   * @default false
+   */
+  shouldMirrorInRTL?: boolean;
 }
 
 export const svgStencil = createStencil({
@@ -38,6 +47,13 @@ export const svgStencil = createStencil({
         transform: 'scaleX(-1)',
       },
     },
+    shouldMirrorInRTL: {
+      true: {
+        '&:dir(rtl)': {
+          transform: 'scaleX(-1)',
+        },
+      },
+    },
   },
 });
 
@@ -56,7 +72,11 @@ export const transformColorNameToToken = (color?: string) => {
 
 export const Svg = createComponent('span')({
   displayName: 'Svg',
-  Component: ({shouldMirror, src, type, ...elemProps}: SvgProps, ref, Element) => {
+  Component: (
+    {shouldMirror, shouldMirrorInRTL, src, type, ...elemProps}: SvgProps,
+    ref,
+    Element
+  ) => {
     try {
       validateIconType(src, type);
     } catch (e) {
@@ -68,7 +88,7 @@ export const Svg = createComponent('span')({
       <Element
         ref={ref}
         dangerouslySetInnerHTML={{__html: src.svg}}
-        {...mergeStyles(elemProps, svgStencil({shouldMirror}))}
+        {...mergeStyles(elemProps, svgStencil({shouldMirror, shouldMirrorInRTL}))}
       />
     );
   },

package/icon/lib/SystemIconCircle.tsx

@@ -38,10 +38,19 @@ export interface SystemIconCircleProps extends CSProps {
    */
   size?: SystemIconCircleSize | number;
   /**
-   * If set to `true`, transform the SVG's x-axis to mirror the graphic
+   * If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to
+   * always mirror the icon regardless of the content direction. If the SVG should mirror only when
+   * in an right-to-left language, use `shouldMirrorInRTL` instead.
    * @default false
    */
   shouldMirror?: boolean;
+  /**
+   * If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction
+   * is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases.
+   * Setting this to `true` indicates the icon should be mirrored in right-to-left languages.
+   * @default false
+   */
+  shouldMirrorInRTL?: boolean;
 }
 
 export const systemIconCircleStencil = createStencil({
@@ -73,7 +82,15 @@ export const systemIconCircleStencil = createStencil({
 export const SystemIconCircle = createComponent('span')({
   displayName: 'SystemIconCircle',
   Component: (
-    {background, color, size, icon, shouldMirror, ...elemProps}: SystemIconCircleProps,
+    {
+      background,
+      color,
+      size,
+      icon,
+      shouldMirror,
+      shouldMirrorInRTL,
+      ...elemProps
+    }: SystemIconCircleProps,
     ref,
     Element
   ) => {
@@ -98,7 +115,13 @@ export const SystemIconCircle = createComponent('span')({
           })
         )}
       >
-        <SystemIcon as={Element} ref={ref} icon={icon} shouldMirror={shouldMirror} />
+        <SystemIcon
+          as={Element}
+          ref={ref}
+          icon={icon}
+          shouldMirror={shouldMirror}
+          shouldMirrorInRTL={shouldMirrorInRTL}
+        />
       </div>
     );
   },

package/modal/lib/ModalOverlay.tsx

@@ -63,7 +63,7 @@ export const modalOverlayContainerStencil = createStencil({
 
 export const useModalOverlay = createElemPropsHook(usePopupModel)(({state}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);
-  usePopupStack(elementRef);
+  usePopupStack(elementRef, state.targetRef);
 
   return {
     // The ref should not be applied to an element. The passed ref will apply to the stackRef instead

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "14.0.0-alpha.1254-next.0",
+  "version": "14.0.0-alpha.1256-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,8 +52,8 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^14.0.0-alpha.1254-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1254-next.0",
+    "@workday/canvas-kit-popup-stack": "^14.0.0-alpha.1256-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1256-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "@workday/design-assets-types": "^0.2.10",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "a177192ec9673c8f8d71ab20c7effc6382cae308"
+  "gitHead": "ecb8230f9b648de52e89d8b84340dcd31b2514b2"
 }

package/popup/lib/hooks/usePopupStack.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {useLocalRef, useIsRTL, useCanvasThemeToCssVars} from '@workday/canvas-kit-react/common';
+import {useLocalRef, useCanvasThemeToCssVars, isElementRTL} from '@workday/canvas-kit-react/common';
 import {ThemeContext, Theme} from '@emotion/react';
 
 /**
@@ -51,7 +51,6 @@ export const usePopupStack = <E extends HTMLElement>(
   target?: HTMLElement | React.RefObject<HTMLElement>
 ): React.RefObject<HTMLElement> => {
   const {elementRef, localRef} = useLocalRef(ref);
-  const isRTL = useIsRTL();
   // Pulls the theme from the context so that we can pass it to `useCanvasThemeToCssVars`
   const theme = React.useContext(ThemeContext as React.Context<Theme>);
 
@@ -93,12 +92,16 @@ export const usePopupStack = <E extends HTMLElement>(
   // The direction will properly follow the theme via React context, but portals lose the `dir`
   // hierarchy, so we'll add it back here.
   React.useLayoutEffect(() => {
-    if (isRTL) {
-      localRef.current?.setAttribute('dir', 'rtl');
-    } else {
-      localRef.current?.removeAttribute('dir');
+    const targetEl = target ? ('current' in target ? target.current : target) : undefined;
+    if (targetEl) {
+      const isRTL = isElementRTL(targetEl);
+      if (isRTL) {
+        localRef.current?.setAttribute('dir', 'rtl');
+      } else {
+        localRef.current?.setAttribute('dir', 'ltr');
+      }
     }
-  }, [localRef, isRTL]);
+  }, [localRef, target]);
 
   /**
    * This pulls the className that gets generated by `useCanvasThemeToCssVars` and adds it to the Popup element to ensure