@workday/canvas-kit-react 10.0.0-alpha.444-next.0 → 10.0.0-alpha.447-next.0

package/dist/es6/tokens/lib/space.js

@@ -1,32 +1,70 @@
-/** An object of space keys and px values (strings) */
+/**
+ * An object of space keys and rem values (strings)
+ *
+ * Below is a table to show the equivalent values from `px` to `rem`.
+ * This is based on the default browser font size which is `16px`.
+ *
+ * | px Value  | rem Value | space token |
+ * | --------- | --------- | ----------- |
+ * | 0         | 0         | zero        |
+ * | 4px       | 0.25rem   | xxxs        |
+ * | 8px       | 0.5rem    | xxs         |
+ * | 12px      | 0.75rem   | xs          |
+ * | 16px      | 1rem      | s           |
+ * | 24px      | 1.5rem    | m           |
+ * | 32px      | 2rem      | l           |
+ * | 40px      | 2.5rem    | xl          |
+ * | 64px      | 4rem      | xxl         |
+ * | 80px      | 5rem      | xxxl        |
+ *
+ * */
 export const space = {
-    zero: '0px',
-    xxxs: '4px',
-    xxs: '8px',
-    xs: '12px',
-    s: '16px',
-    m: '24px',
-    l: '32px',
-    xl: '40px',
-    xxl: '64px',
-    xxxl: '80px',
+    zero: '0',
+    xxxs: '0.25rem',
+    xxs: '0.5rem',
+    xs: '0.75rem',
+    s: '1rem',
+    m: '1.5rem',
+    l: '2rem',
+    xl: '2.5rem',
+    xxl: '4rem',
+    xxxl: '5rem',
 };
 /**
- * An object of space keys and their numeric px values (numbers)
- * - These are helpful when you need a raw numeric px value.
+ * An object of space keys and their numeric rem values (numbers)
+ * - These are helpful when you need a raw numeric rem value.
  * - Here's an example usage to perform calculations:
  * @example
- * const buttonPaddingLeft = spaceNumbers.s + iconSize;
+ * ```tsx
+ * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ * ```
+ *
+ * Below is a table to show the equivalent values from `px` to `rem`.
+ * This is based on the default browser font size which is `16px`.
+ *
+ * | px Value  | rem Value | space token |
+ * | --------- | --------- | ----------- |
+ * | 0         | 0         | zero        |
+ * | 4px       | 0.25rem   | xxxs        |
+ * | 8px       | 0.5rem    | xxs         |
+ * | 12px      | 0.75rem   | xs          |
+ * | 16px      | 1rem      | s           |
+ * | 24px      | 1.5rem    | m           |
+ * | 32px      | 2rem      | l           |
+ * | 40px      | 2.5rem    | xl          |
+ * | 64px      | 4rem      | xxl         |
+ * | 80px      | 5rem      | xxxl        |
+ *
  */
 export const spaceNumbers = {
     zero: 0,
-    xxxs: 4,
-    xxs: 8,
-    xs: 12,
-    s: 16,
-    m: 24,
-    l: 32,
-    xl: 40,
-    xxl: 64,
-    xxxl: 80,
+    xxxs: 0.25,
+    xxs: 0.5,
+    xs: 0.75,
+    s: 1,
+    m: 1.5,
+    l: 2,
+    xl: 2.5,
+    xxl: 4,
+    xxxl: 5,
 };

package/dist/es6/tooltip/lib/OverflowTooltip.d.ts

@@ -25,6 +25,13 @@ export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivE
      * @default 'top'
      */
     placement?: Placement;
+    /**
+     * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+     * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+     * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+     * disable the fallback placements.
+     */
+    fallbackPlacements?: Placement[];
 }
-export declare const OverflowTooltip: ({ placement, children, ...elemProps }: OverflowTooltipProps) => JSX.Element;
+export declare const OverflowTooltip: ({ placement, fallbackPlacements, children, ...elemProps }: OverflowTooltipProps) => JSX.Element;
 //# sourceMappingURL=OverflowTooltip.d.ts.map

package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,0CAIzB,oBAAoB,gBAwCtB,CAAC"}
+{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;CAClC;AAiBD,eAAO,MAAM,eAAe,8DAKzB,oBAAoB,gBAwCtB,CAAC"}

package/dist/es6/tooltip/lib/OverflowTooltip.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
+import { getTransformFromPlacement, Popper, defaultFallbackPlacements, } from '@workday/canvas-kit-react/popup';
 import { mergeCallback } from '@workday/canvas-kit-react/common';
 import { TooltipContainer } from './TooltipContainer';
 import { useTooltip } from './useTooltip';
@@ -64,7 +64,7 @@ function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentP
         return mergedProps;
     }, {});
 }
-export const OverflowTooltip = ({ placement = 'top', children, ...elemProps }) => {
+export const OverflowTooltip = ({ placement = 'top', fallbackPlacements = defaultFallbackPlacements, children, ...elemProps }) => {
     const [titleText, setTitleText] = React.useState('');
     const { targetProps, popperProps, tooltipProps } = useTooltip({ type: 'muted' });
     const onMouseEnter = (event) => {
@@ -89,7 +89,7 @@ export const OverflowTooltip = ({ placement = 'top', children, ...elemProps }) =
             'aria-label': undefined,
             ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
         }),
-        React.createElement(Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+        React.createElement(Popper, Object.assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), ({ placement }) => {
             const transformOrigin = getTransformFromPlacement(placement);
             return (React.createElement(TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
         })));

package/dist/es6/tooltip/lib/Tooltip.d.ts

@@ -20,6 +20,13 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 'top'
      */
     placement?: Placement;
+    /**
+     * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+     * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+     * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+     * disable the fallback placements.
+     */
+    fallbackPlacements?: Placement[];
     /**
      * Determines the tooltip type for accessibility.
      *

package/dist/es6/tooltip/lib/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFAyClB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}

package/dist/es6/tooltip/lib/Tooltip.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import innerText from 'react-innertext';
-import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
+import { getTransformFromPlacement, Popper, defaultFallbackPlacements, } from '@workday/canvas-kit-react/popup';
 import { createComponent, mergeCallback } from '@workday/canvas-kit-react/common';
 import { TooltipContainer } from './TooltipContainer';
 import { useTooltip } from './useTooltip';
@@ -17,7 +17,7 @@ function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentP
 }
 export const Tooltip = createComponent('div')({
     displayName: 'Tooltip',
-    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, ...elemProps }) {
+    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = defaultFallbackPlacements, ...elemProps }) {
         const titleText = innerText(title);
         const { targetProps, popperProps, tooltipProps } = useTooltip({
             type,
@@ -33,7 +33,7 @@ export const Tooltip = createComponent('div')({
                     ? { 'aria-label': children.props['aria-label'] }
                     : {}),
             }),
-            React.createElement(Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+            React.createElement(Popper, Object.assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), ({ placement }) => {
                 const transformOrigin = getTransformFromPlacement(placement);
                 return (React.createElement(TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
             })));

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -23,7 +23,7 @@ export const TooltipContainer = styled('div')({
     ...type.levels.subtext.medium,
     display: 'inline-flex',
     position: 'relative',
-    padding: spaceNumbers.xxs + spaceNumbers.xxxs,
+    padding: space.xs,
     color: colors.frenchVanilla100,
     a: {
         color: colors.frenchVanilla100,
@@ -34,7 +34,7 @@ export const TooltipContainer = styled('div')({
         content: '""',
         borderRadius: borderRadius.m,
         zIndex: -1,
-        margin: spaceNumbers.xxxs,
+        margin: space.xxxs,
         backgroundColor: 'rgba(0,0,0,.85)',
         position: 'absolute',
         top: 0,
@@ -44,9 +44,9 @@ export const TooltipContainer = styled('div')({
     },
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
-        padding: spaceNumbers.xxs + spaceNumbers.xxxs + 2,
+        padding: `${spaceNumbers.s - 0.125}rem`,
         ':before': {
-            margin: spaceNumbers.xxxs + 2,
+            margin: `${spaceNumbers.xxxs + 0.125}rem`,
         },
     },
     // Hide tooltip when the reference element is either clipped or fully hidden
@@ -56,16 +56,16 @@ export const TooltipContainer = styled('div')({
     },
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
-        left: -spaceNumbers.xxxs,
+        left: `-${space.xxxs}`,
     },
     '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
-        right: -spaceNumbers.xxxs,
+        right: `-${space.xxxs}`,
     },
     '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
-        top: -spaceNumbers.xxxs,
+        top: `-${space.xxxs}`,
     },
     '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
-        bottom: -spaceNumbers.xxxs,
+        bottom: `-${space.xxxs}`,
     },
 }, ({ transformOrigin = defaultTransformOrigin }) => {
     if (transformOrigin === null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.0.0-alpha.444-next.0",
+  "version": "10.0.0-alpha.447-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",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.444-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.447-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "83a14407728a4a1dd97d4cab22712a3522ce64e5"
+  "gitHead": "7fc0c577c5f944eabe967840a78fc77f781833ce"
 }

package/popup/lib/Popper.tsx

@@ -4,9 +4,11 @@ import * as PopperJS from '@popperjs/core';
 
 export type Placement = `${PopperJS.Placement}`; // Use template literals to make documentation list them out
 export type PopperOptions = PopperJS.Options;
+export const defaultFallbackPlacements: Placement[] = ['top', 'right', 'bottom', 'left'];
 
 import {usePopupStack} from './hooks';
 import {useLocalRef} from '@workday/canvas-kit-react/common';
+import {fallbackPlacementsModifier} from './fallbackPlacements';
 
 export interface PopperProps {
   /**
@@ -43,6 +45,13 @@ export interface PopperProps {
    * @default bottom
    */
   placement?: Placement;
+  /**
+   * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+   * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+   * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+   * disable the fallback placements.
+   */
+  fallbackPlacements?: Placement[];
   /**
    * A callback function that will be called whenever PopperJS chooses a placement that is different
    * from the provided `placement` preference. If a `placement` preference doesn't fit, PopperJS
@@ -117,6 +126,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       getAnchorClientRect,
       popperOptions = defaultPopperOptions,
       placement: popperPlacement = 'bottom',
+      fallbackPlacements = defaultFallbackPlacements,
       onPlacementChange,
       children,
       portal,
@@ -129,14 +139,19 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
     const [placement, setPlacement] = React.useState(popperPlacement);
     const stackRef = usePopupStack(ref, anchorElement as HTMLElement);
 
+    const placementRef = React.useRef(popperPlacement);
+    placementRef.current = placement;
+
     const placementModifier = React.useMemo((): PopperJS.Modifier<any, any> => {
       return {
         name: 'setPlacement',
         enabled: true,
-        phase: 'main',
+        phase: 'afterWrite',
         fn({state}) {
-          setPlacement(state.placement);
-          onPlacementChange?.(state.placement);
+          if (placementRef.current !== state.placement) {
+            setPlacement(state.placement);
+            onPlacementChange?.(state.placement);
+          }
         },
       };
     }, [setPlacement, onPlacementChange]);
@@ -157,7 +172,16 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
         const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
           placement: popperPlacement,
           ...popperOptions,
-          modifiers: [...(popperOptions.modifiers || []), placementModifier],
+          modifiers: [
+            placementModifier,      
+            {
+              ...fallbackPlacementsModifier,
+              options: {
+                fallbackPlacements,
+              },
+            },
+            ...(popperOptions.modifiers || []),
+          ],
         });
         elementRef(instance); // update the ref with the instance
 
@@ -179,11 +203,20 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
         localRef.current?.setOptions({
           placement: popperPlacement,
           ...popperOptions,
-          modifiers: [...(popperOptions.modifiers || []), placementModifier],
+          modifiers: [
+            placementModifier,
+            {
+              ...fallbackPlacementsModifier,
+              options: {
+                fallbackPlacements,
+              },
+            },
+            ...(popperOptions.modifiers || []),
+          ],
         });
       }
       firstRender.current = false;
-    }, [popperOptions, popperPlacement, placementModifier, localRef]);
+    }, [popperOptions, popperPlacement, fallbackPlacements, placementModifier, localRef]);
 
     const contents = <>{isRenderProp(children) ? children({placement}) : children}</>;
 

package/popup/lib/PopupPopper.tsx

@@ -13,6 +13,13 @@ export interface PopupPopperProps extends PopperProps {
    * @default bottom
    */
   placement?: Placement;
+  /**
+   * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+   * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+   * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+   * disable the fallback placements.
+   */
+  fallbackPlacements?: Placement[];
   /**
    * The additional options passed to the Popper's `popper.js` instance.
    */

package/popup/lib/fallbackPlacements.ts

@@ -0,0 +1,90 @@
+import * as PopperJS from '@popperjs/core';
+
+export type Placement = PopperJS.Placement; // Use template literals to make documentation list them out
+
+const getOppositePlacement = (popperPlacement: Placement): Placement => {
+  const [first, second] = popperPlacement.split('-');
+  let oppositePlacement: Placement;
+  switch (first) {
+    case 'top':
+      oppositePlacement = 'bottom';
+      break;
+    case 'bottom':
+      oppositePlacement = 'top';
+      break;
+    case 'left':
+      oppositePlacement = 'right';
+      break;
+    case 'right':
+      oppositePlacement = 'left';
+      break;
+    default:
+      oppositePlacement = 'auto';
+  }
+  if (second) {
+    oppositePlacement =
+      PopperJS.placements.find(placement => placement.includes(`${oppositePlacement}-${second}`)) ??
+      oppositePlacement;
+  }
+  return oppositePlacement;
+};
+
+const choseAvailablePlacement = (
+  placements: Placement[],
+  state: PopperJS.State,
+  preferredPlacement: Placement
+): Placement => {
+  if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
+    return preferredPlacement;
+  }
+
+  const {reference, popper} = state.rects;
+  const overflow = PopperJS.detectOverflow({...state, placement: placements[0]});
+  const direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
+  const isOverflowed =
+    (overflow.top > 0 || overflow.bottom > 0 || overflow.left > 0 || overflow.right > 0) &&
+    (direction === 'horizontal'
+      ? popper.height / 2 - overflow.top < reference.height ||
+        popper.height / 2 - overflow.bottom < reference.height
+      : popper.width - overflow.left < reference.width ||
+        popper.width - overflow.right < reference.width);
+  const key = placements[0].split('-')[0] as keyof PopperJS.SideObject;
+
+  if (!isOverflowed && overflow[key] <= 0) {
+    return placements[0];
+  } else {
+    return choseAvailablePlacement(placements.slice(1), state, preferredPlacement);
+  }
+};
+
+export type Options = {
+  fallbackPlacements: Placement[];
+};
+
+const name = 'fallbackModifier';
+
+export const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options> = {
+  name: name,
+  enabled: true,
+  phase: 'main',
+  data: {
+    _skip: false,
+  },
+  fn({state, options}: PopperJS.ModifierArguments<Options>) {
+    const preferredPlacement = state.options.placement;
+    const {fallbackPlacements} = options;
+
+    const placements = [
+      preferredPlacement,
+      getOppositePlacement(preferredPlacement),
+      ...(fallbackPlacements || []),
+    ];
+
+    const placementOverride = choseAvailablePlacement(placements, state, preferredPlacement);
+    if (state.placement !== placementOverride) {
+      state.modifiersData[name]._skip = true;
+      state.placement = placementOverride;
+      state.reset = true;
+    }
+  },
+};

package/popup/lib/hooks/usePopupPopper.ts

@@ -9,14 +9,18 @@ import {Placement} from '../Popper';
  */
 export const usePopupPopper = createElemPropsHook(usePopupModel)(({state, events}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);
+
+  // Create a mutable ref of the placement to keep a stable `onPlacementChange` reference.
+  const placementRef = React.useRef(state.placement);
+  placementRef.current = state.placement;
   const onPlacementChange = React.useCallback(
     (placement: Placement) => {
-      if (placement !== state.placement) {
+      if (placement !== placementRef.current) {
         // only update if the placement has changed
         events.updatePlacement({placement});
       }
     },
-    [events, state.placement]
+    [events]
   );
 
   return {

package/radio/lib/Radio.tsx

@@ -8,7 +8,13 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {
+  borderRadius,
+  colors,
+  inputColors,
+  space,
+  spaceNumbers,
+} from '@workday/canvas-kit-react/tokens';
 import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface RadioProps extends Themeable {
@@ -47,13 +53,13 @@ export interface RadioProps extends Themeable {
   variant?: 'inverse' | undefined;
 }
 
-const radioBorderRadius = 9;
-const radioDot = 8;
-const radioHeight = 18;
-const radioTapArea = spaceNumbers.m;
+const radioBorderRadius = `${spaceNumbers.xxs + 0.0625}rem`;
+const radioDot = space.xxs;
+const radioHeight = (spaceNumbers.xl - spaceNumbers.xxxs) / 2;
+const radioTapArea = space.m;
 const radioContainerHeight = radioTapArea;
-const radioLabelDistance = spaceNumbers.xs;
-const radioWidth = 18;
+const radioLabelDistance = space.xs;
+const radioWidth = radioHeight;
 const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
 
 const RadioContainer = styled('div')({
@@ -70,17 +76,17 @@ const RadioContainer = styled('div')({
  */
 const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   display: 'flex',
-  height: radioHeight,
-  width: radioWidth,
+  height: `${radioHeight}rem`,
+  width: `${radioWidth}rem`,
 });
 
 const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
   {
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: radioHeight,
+    height: `${radioHeight}rem`,
     transition: 'box-shadow 150ms ease-out',
-    width: radioWidth,
+    width: `${radioWidth}rem`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
   },
@@ -129,7 +135,7 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
     // `span:first-of-type` refers to `RadioRipple`, the light grey
     // element that animates around the component on hover
     '&:hover ~ span:first-of-type': {
-      boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${colors.soap200}`,
+      boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${colors.soap200}`,
     },
 
     // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
@@ -212,13 +218,13 @@ const RadioBackground = styled('div')<RadioProps>(
     borderWidth: '1px',
     boxSizing: 'border-box',
     display: 'flex',
-    height: radioHeight,
+    height: `${radioHeight}rem`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: radioWidth,
+    width: `${radioWidth}rem`,
   },
   ({
     checked,

package/select/lib/Select.tsx

@@ -8,14 +8,7 @@ import {
   styled,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {
-  colors,
-  borderRadius,
-  inputColors,
-  spaceNumbers,
-  type,
-  space,
-} from '@workday/canvas-kit-react/tokens';
+import {colors, borderRadius, inputColors, type, space} from '@workday/canvas-kit-react/tokens';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {SelectOption} from './SelectOption';
@@ -55,7 +48,7 @@ const StyledSelect = styled('select')<SelectProps & StyledType>(
     height: space.xl,
     minWidth: 280,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: spaceNumbers.xxs,
+    padding: space.xxs,
     margin: 0, // Fix Safari
     MozAppearance: 'none', // FF bugfix: hide arrow so it doesn't show under ours
     WebkitAppearance: 'none',

package/table/lib/TableRow.tsx

@@ -100,7 +100,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
       fontSize: 13,
       borderRight: cellBorder,
       borderBottom: cellBorder,
-      height: spaceNumbers.xl + spaceNumbers.xxs,
+      height: `${spaceNumbers.xl + spaceNumbers.xxs}rem`,
       boxSizing: 'border-box',
       transition: 'background-color 0.2s',
     },

package/text-area/lib/TextArea.tsx

@@ -8,7 +8,13 @@ import {
   styled,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
+import {
+  borderRadius,
+  inputColors,
+  space,
+  spaceNumbers,
+  type,
+} from '@workday/canvas-kit-react/tokens';
 
 export interface TextAreaProps extends Themeable, GrowthBehavior {
   /**
@@ -59,10 +65,10 @@ const StyledTextArea = styled('textarea')<TextAreaProps & StyledType>(
     backgroundColor: inputColors.background,
     borderRadius: borderRadius.m,
     boxSizing: 'border-box',
-    minHeight: 64,
-    minWidth: 280,
+    minHeight: space.xxl,
+    minWidth: `${spaceNumbers.xxxl * 3 + spaceNumbers.xl}rem`,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: spaceNumbers.xxs, // Compensate for border
+    padding: space.xxs, // Compensate for border
     margin: 0, // Fix Safari
     '&::webkit-resizer': {
       display: 'none',

package/text-input/lib/TextInput.tsx

@@ -33,7 +33,7 @@ const StyledTextInput = styled('input')<
     boxSizing: 'border-box',
     height: 40,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: spaceNumbers.xxs, // Compensate for border
+    padding: `${spaceNumbers.xxs}rem`, // Compensate for border
     margin: 0, // Fix Safari
     '&::placeholder': {
       color: inputColors.placeholder,