@workday/canvas-kit-react 8.6.10 → 8.6.11

package/dist/commonjs/popup/lib/Popper.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PopperJS from '@popperjs/core';
 export declare type Placement = `${PopperJS.Placement}`;
 export declare type PopperOptions = PopperJS.Options;
+export declare const defaultFallbackPlacements: Placement[];
 export interface PopperProps {
     /**
      * The reference element used to position the Popper. Popper content will try to follow the
@@ -39,6 +40,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

package/dist/commonjs/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAC7C,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

package/dist/commonjs/popup/lib/Popper.js

@@ -46,12 +46,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popper = void 0;
+exports.Popper = exports.defaultFallbackPlacements = void 0;
 var React = __importStar(require("react"));
 var ReactDOM = __importStar(require("react-dom"));
 var PopperJS = __importStar(require("@popperjs/core"));
+exports.defaultFallbackPlacements = ['top', 'right', 'bottom', 'left'];
 var hooks_1 = require("./hooks");
 var common_1 = require("@workday/canvas-kit-react/common");
+var fallbackPlacements_1 = require("./fallbackPlacements");
 /**
  * A thin wrapper component around the Popper.js positioning engine. For reference:
  * https://popper.js.org/. `Popper` also automatically works with the {@link PopupStack} system.
@@ -90,20 +92,24 @@ var defaultPopperOptions = {};
 // Popper bails early if `open` is false and React hooks cannot be called conditionally,
 // so we're breaking out the open version into another component.
 var OpenPopper = React.forwardRef(function (_a, ref) {
-    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, popperInstanceRef = _a.popperInstanceRef;
+    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? exports.defaultFallbackPlacements : _d, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, popperInstanceRef = _a.popperInstanceRef;
     var firstRender = React.useRef(true);
-    var _d = common_1.useLocalRef(popperInstanceRef), localRef = _d.localRef, elementRef = _d.elementRef;
-    var _e = React.useState(popperPlacement), placement = _e[0], setPlacement = _e[1];
+    var _e = common_1.useLocalRef(popperInstanceRef), localRef = _e.localRef, elementRef = _e.elementRef;
+    var _f = React.useState(popperPlacement), placement = _f[0], setPlacement = _f[1];
     var stackRef = hooks_1.usePopupStack(ref, anchorElement);
+    var placementRef = React.useRef(popperPlacement);
+    placementRef.current = placement;
     var placementModifier = React.useMemo(function () {
         return {
             name: 'setPlacement',
             enabled: true,
-            phase: 'main',
+            phase: 'afterWrite',
             fn: function (_a) {
                 var state = _a.state;
-                setPlacement(state.placement);
-                onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
+                if (placementRef.current !== state.placement) {
+                    setPlacement(state.placement);
+                    onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
+                }
             },
         };
     }, [setPlacement, onPlacementChange]);
@@ -117,7 +123,12 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
             return undefined;
         }
         if (stackRef.current) {
-            var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray(__spreadArray([], (popperOptions.modifiers || [])), [placementModifier]) }));
+            var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray([
+                    placementModifier,
+                    __assign(__assign({}, fallbackPlacements_1.fallbackPlacementsModifier), { options: {
+                            fallbackPlacements: fallbackPlacements,
+                        } })
+                ], (popperOptions.modifiers || [])) }));
             elementRef(instance_1); // update the ref with the instance
             return function () {
                 instance_1 === null || instance_1 === void 0 ? void 0 : instance_1.destroy();
@@ -133,10 +144,15 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
         var _a;
         // Only update options if this is _not_ the first render
         if (!firstRender.current) {
-            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray(__spreadArray([], (popperOptions.modifiers || [])), [placementModifier]) }));
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray([
+                    placementModifier,
+                    __assign(__assign({}, fallbackPlacements_1.fallbackPlacementsModifier), { options: {
+                            fallbackPlacements: fallbackPlacements,
+                        } })
+                ], (popperOptions.modifiers || [])) }));
         }
         firstRender.current = false;
-    }, [popperOptions, popperPlacement, placementModifier, localRef]);
+    }, [popperOptions, popperPlacement, fallbackPlacements, placementModifier, localRef]);
     var contents = React.createElement(React.Fragment, null, isRenderProp(children) ? children({ placement: placement }) : children);
     if (!portal) {
         return contents;

package/dist/commonjs/popup/lib/PopupPopper.d.ts

@@ -8,6 +8,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/dist/commonjs/popup/lib/PopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
+{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

package/dist/commonjs/popup/lib/fallbackPlacements.d.ts

@@ -0,0 +1,9 @@
+import * as PopperJS from '@popperjs/core';
+export declare type Placement = PopperJS.Placement;
+export declare type Options = {
+    fallbackPlacements: Placement[];
+};
+declare const name = "fallbackModifier";
+export declare const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options>;
+export {};
+//# sourceMappingURL=fallbackPlacements.d.ts.map

package/dist/commonjs/popup/lib/fallbackPlacements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAyD3C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwB9E,CAAC"}

package/dist/commonjs/popup/lib/fallbackPlacements.js

@@ -0,0 +1,110 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fallbackPlacementsModifier = void 0;
+var PopperJS = __importStar(require("@popperjs/core"));
+var getOppositePlacement = function (popperPlacement) {
+    var _a;
+    var _b = popperPlacement.split('-'), first = _b[0], second = _b[1];
+    var oppositePlacement;
+    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 =
+            (_a = PopperJS.placements.find(function (placement) { return placement.includes(oppositePlacement + "-" + second); })) !== null && _a !== void 0 ? _a : oppositePlacement;
+    }
+    return oppositePlacement;
+};
+var choseAvailablePlacement = function (placements, state, preferredPlacement) {
+    if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
+        return preferredPlacement;
+    }
+    var _a = state.rects, reference = _a.reference, popper = _a.popper;
+    var overflow = PopperJS.detectOverflow(__assign(__assign({}, state), { placement: placements[0] }));
+    var direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
+    var 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);
+    var key = placements[0].split('-')[0];
+    if (!isOverflowed && overflow[key] <= 0) {
+        return placements[0];
+    }
+    else {
+        return choseAvailablePlacement(placements.slice(1), state, preferredPlacement);
+    }
+};
+var name = 'fallbackModifier';
+exports.fallbackPlacementsModifier = {
+    name: name,
+    enabled: true,
+    phase: 'main',
+    data: {
+        _skip: false,
+    },
+    fn: function (_a) {
+        var state = _a.state, options = _a.options;
+        var preferredPlacement = state.options.placement;
+        var fallbackPlacements = options.fallbackPlacements;
+        var placements = __spreadArray([
+            preferredPlacement,
+            getOppositePlacement(preferredPlacement)
+        ], (fallbackPlacements || []));
+        var placementOverride = choseAvailablePlacement(placements, state, preferredPlacement);
+        if (state.placement !== placementOverride) {
+            state.modifiersData[name]._skip = true;
+            state.placement = placementOverride;
+            state.reset = true;
+        }
+    },
+};

package/dist/commonjs/popup/lib/hooks/usePopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;mCAGX,SAAS;;;OAevB,CAAC"}
+{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;mCAOX,SAAS;;;OAevB,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupPopper.js

@@ -14,12 +14,15 @@ var react_1 = __importDefault(require("react"));
 exports.usePopupPopper = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (_a, ref) {
     var state = _a.state, events = _a.events;
     var elementRef = common_1.useForkRef(ref, state.stackRef);
+    // Create a mutable ref of the placement to keep a stable `onPlacementChange` reference.
+    var placementRef = react_1.default.useRef(state.placement);
+    placementRef.current = state.placement;
     var onPlacementChange = react_1.default.useCallback(function (placement) {
-        if (placement !== state.placement) {
+        if (placement !== placementRef.current) {
             // only update if the placement has changed
             events.updatePlacement({ placement: placement });
         }
-    }, [events, state.placement]);
+    }, [events]);
     return {
         open: state.visibility !== 'hidden',
         anchorElement: state.targetRef,

package/dist/commonjs/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/commonjs/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/commonjs/tooltip/lib/OverflowTooltip.js

@@ -112,9 +112,9 @@ function mergeCallbacks(elemProps, componentProps, keys) {
     }, {});
 }
 var OverflowTooltip = function (_a) {
-    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, children = _a.children, elemProps = __rest(_a, ["placement", "children"]);
-    var _c = React.useState(''), titleText = _c[0], setTitleText = _c[1];
-    var _d = useTooltip_1.useTooltip({ type: 'muted' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
+    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.fallbackPlacements, fallbackPlacements = _c === void 0 ? popup_1.defaultFallbackPlacements : _c, children = _a.children, elemProps = __rest(_a, ["placement", "fallbackPlacements", "children"]);
+    var _d = React.useState(''), titleText = _d[0], setTitleText = _d[1];
+    var _e = useTooltip_1.useTooltip({ type: 'muted' }), targetProps = _e.targetProps, popperProps = _e.popperProps, tooltipProps = _e.tooltipProps;
     var onMouseEnter = function (event) {
         var target = event.currentTarget;
         setTitleText(target instanceof HTMLElement ? target.innerText : '');
@@ -132,7 +132,7 @@ var OverflowTooltip = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter,
             onFocus: onFocus, 'aria-label': undefined }), mergeCallbacks(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter, onFocus: onFocus }), children.props))),
-        React.createElement(popup_1.Popper, __assign({ placement: placement }, popperProps), function (_a) {
+        React.createElement(popup_1.Popper, __assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), function (_a) {
             var placement = _a.placement;
             var transformOrigin = popup_1.getTransformFromPlacement(placement);
             return (React.createElement(TooltipContainer_1.TooltipContainer, __assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));

package/dist/commonjs/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/commonjs/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/commonjs/tooltip/lib/Tooltip.js

@@ -66,19 +66,19 @@ function mergeCallbacks(elemProps, componentProps, keys) {
 exports.Tooltip = common_1.createComponent('div')({
     displayName: 'Tooltip',
     Component: function (_a) {
-        var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay"]);
+        var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, _f = _a.fallbackPlacements, fallbackPlacements = _f === void 0 ? popup_1.defaultFallbackPlacements : _f, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay", "fallbackPlacements"]);
         var titleText = react_innertext_1.default(title);
-        var _f = useTooltip_1.useTooltip({
+        var _g = useTooltip_1.useTooltip({
             type: type,
             titleText: titleText,
             showDelay: showDelay,
             hideDelay: hideDelay,
-        }), targetProps = _f.targetProps, popperProps = _f.popperProps, tooltipProps = _f.tooltipProps;
+        }), targetProps = _g.targetProps, popperProps = _g.popperProps, tooltipProps = _g.tooltipProps;
         return (React.createElement(React.Fragment, null,
             React.cloneElement(children, __assign(__assign(__assign({}, targetProps), mergeCallbacks(children.props, targetProps)), (type === 'muted' && children.props['aria-label']
                 ? { 'aria-label': children.props['aria-label'] }
                 : {}))),
-            React.createElement(popup_1.Popper, __assign({ placement: placement }, popperProps), function (_a) {
+            React.createElement(popup_1.Popper, __assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), function (_a) {
                 var placement = _a.placement;
                 var transformOrigin = popup_1.getTransformFromPlacement(placement);
                 return (React.createElement(TooltipContainer_1.TooltipContainer, __assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));

package/dist/es6/popup/lib/Popper.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PopperJS from '@popperjs/core';
 export declare type Placement = `${PopperJS.Placement}`;
 export declare type PopperOptions = PopperJS.Options;
+export declare const defaultFallbackPlacements: Placement[];
 export interface PopperProps {
     /**
      * The reference element used to position the Popper. Popper content will try to follow the
@@ -39,6 +40,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

package/dist/es6/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAC7C,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

package/dist/es6/popup/lib/Popper.js

@@ -28,8 +28,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as PopperJS from '@popperjs/core';
+export var defaultFallbackPlacements = ['top', 'right', 'bottom', 'left'];
 import { usePopupStack } from './hooks';
 import { useLocalRef } from '@workday/canvas-kit-react/common';
+import { fallbackPlacementsModifier } from './fallbackPlacements';
 /**
  * A thin wrapper component around the Popper.js positioning engine. For reference:
  * https://popper.js.org/. `Popper` also automatically works with the {@link PopupStack} system.
@@ -68,20 +70,24 @@ var defaultPopperOptions = {};
 // Popper bails early if `open` is false and React hooks cannot be called conditionally,
 // so we're breaking out the open version into another component.
 var OpenPopper = React.forwardRef(function (_a, ref) {
-    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, popperInstanceRef = _a.popperInstanceRef;
+    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? defaultFallbackPlacements : _d, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, popperInstanceRef = _a.popperInstanceRef;
     var firstRender = React.useRef(true);
-    var _d = useLocalRef(popperInstanceRef), localRef = _d.localRef, elementRef = _d.elementRef;
-    var _e = React.useState(popperPlacement), placement = _e[0], setPlacement = _e[1];
+    var _e = useLocalRef(popperInstanceRef), localRef = _e.localRef, elementRef = _e.elementRef;
+    var _f = React.useState(popperPlacement), placement = _f[0], setPlacement = _f[1];
     var stackRef = usePopupStack(ref, anchorElement);
+    var placementRef = React.useRef(popperPlacement);
+    placementRef.current = placement;
     var placementModifier = React.useMemo(function () {
         return {
             name: 'setPlacement',
             enabled: true,
-            phase: 'main',
+            phase: 'afterWrite',
             fn: function (_a) {
                 var state = _a.state;
-                setPlacement(state.placement);
-                onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
+                if (placementRef.current !== state.placement) {
+                    setPlacement(state.placement);
+                    onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
+                }
             },
         };
     }, [setPlacement, onPlacementChange]);
@@ -95,7 +101,12 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
             return undefined;
         }
         if (stackRef.current) {
-            var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray(__spreadArray([], (popperOptions.modifiers || [])), [placementModifier]) }));
+            var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray([
+                    placementModifier,
+                    __assign(__assign({}, fallbackPlacementsModifier), { options: {
+                            fallbackPlacements: fallbackPlacements,
+                        } })
+                ], (popperOptions.modifiers || [])) }));
             elementRef(instance_1); // update the ref with the instance
             return function () {
                 instance_1 === null || instance_1 === void 0 ? void 0 : instance_1.destroy();
@@ -111,10 +122,15 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
         var _a;
         // Only update options if this is _not_ the first render
         if (!firstRender.current) {
-            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray(__spreadArray([], (popperOptions.modifiers || [])), [placementModifier]) }));
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray([
+                    placementModifier,
+                    __assign(__assign({}, fallbackPlacementsModifier), { options: {
+                            fallbackPlacements: fallbackPlacements,
+                        } })
+                ], (popperOptions.modifiers || [])) }));
         }
         firstRender.current = false;
-    }, [popperOptions, popperPlacement, placementModifier, localRef]);
+    }, [popperOptions, popperPlacement, fallbackPlacements, placementModifier, localRef]);
     var contents = React.createElement(React.Fragment, null, isRenderProp(children) ? children({ placement: placement }) : children);
     if (!portal) {
         return contents;

package/dist/es6/popup/lib/PopupPopper.d.ts

@@ -8,6 +8,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/dist/es6/popup/lib/PopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
+{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

package/dist/es6/popup/lib/fallbackPlacements.d.ts

@@ -0,0 +1,9 @@
+import * as PopperJS from '@popperjs/core';
+export declare type Placement = PopperJS.Placement;
+export declare type Options = {
+    fallbackPlacements: Placement[];
+};
+declare const name = "fallbackModifier";
+export declare const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options>;
+export {};
+//# sourceMappingURL=fallbackPlacements.d.ts.map

package/dist/es6/popup/lib/fallbackPlacements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAyD3C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwB9E,CAAC"}

package/dist/es6/popup/lib/fallbackPlacements.js

@@ -0,0 +1,88 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+import * as PopperJS from '@popperjs/core';
+var getOppositePlacement = function (popperPlacement) {
+    var _a;
+    var _b = popperPlacement.split('-'), first = _b[0], second = _b[1];
+    var oppositePlacement;
+    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 =
+            (_a = PopperJS.placements.find(function (placement) { return placement.includes(oppositePlacement + "-" + second); })) !== null && _a !== void 0 ? _a : oppositePlacement;
+    }
+    return oppositePlacement;
+};
+var choseAvailablePlacement = function (placements, state, preferredPlacement) {
+    if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
+        return preferredPlacement;
+    }
+    var _a = state.rects, reference = _a.reference, popper = _a.popper;
+    var overflow = PopperJS.detectOverflow(__assign(__assign({}, state), { placement: placements[0] }));
+    var direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
+    var 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);
+    var key = placements[0].split('-')[0];
+    if (!isOverflowed && overflow[key] <= 0) {
+        return placements[0];
+    }
+    else {
+        return choseAvailablePlacement(placements.slice(1), state, preferredPlacement);
+    }
+};
+var name = 'fallbackModifier';
+export var fallbackPlacementsModifier = {
+    name: name,
+    enabled: true,
+    phase: 'main',
+    data: {
+        _skip: false,
+    },
+    fn: function (_a) {
+        var state = _a.state, options = _a.options;
+        var preferredPlacement = state.options.placement;
+        var fallbackPlacements = options.fallbackPlacements;
+        var placements = __spreadArray([
+            preferredPlacement,
+            getOppositePlacement(preferredPlacement)
+        ], (fallbackPlacements || []));
+        var placementOverride = choseAvailablePlacement(placements, state, preferredPlacement);
+        if (state.placement !== placementOverride) {
+            state.modifiersData[name]._skip = true;
+            state.placement = placementOverride;
+            state.reset = true;
+        }
+    },
+};

package/dist/es6/popup/lib/hooks/usePopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;mCAGX,SAAS;;;OAevB,CAAC"}
+{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;mCAOX,SAAS;;;OAevB,CAAC"}

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

@@ -8,12 +8,15 @@ import React from 'react';
 export var usePopupPopper = createElemPropsHook(usePopupModel)(function (_a, ref) {
     var state = _a.state, events = _a.events;
     var elementRef = useForkRef(ref, state.stackRef);
+    // Create a mutable ref of the placement to keep a stable `onPlacementChange` reference.
+    var placementRef = React.useRef(state.placement);
+    placementRef.current = state.placement;
     var onPlacementChange = React.useCallback(function (placement) {
-        if (placement !== state.placement) {
+        if (placement !== placementRef.current) {
             // only update if the placement has changed
             events.updatePlacement({ placement: placement });
         }
-    }, [events, state.placement]);
+    }, [events]);
     return {
         open: state.visibility !== 'hidden',
         anchorElement: state.targetRef,

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

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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';
@@ -88,9 +88,9 @@ function mergeCallbacks(elemProps, componentProps, keys) {
     }, {});
 }
 export var OverflowTooltip = function (_a) {
-    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, children = _a.children, elemProps = __rest(_a, ["placement", "children"]);
-    var _c = React.useState(''), titleText = _c[0], setTitleText = _c[1];
-    var _d = useTooltip({ type: 'muted' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
+    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.fallbackPlacements, fallbackPlacements = _c === void 0 ? defaultFallbackPlacements : _c, children = _a.children, elemProps = __rest(_a, ["placement", "fallbackPlacements", "children"]);
+    var _d = React.useState(''), titleText = _d[0], setTitleText = _d[1];
+    var _e = useTooltip({ type: 'muted' }), targetProps = _e.targetProps, popperProps = _e.popperProps, tooltipProps = _e.tooltipProps;
     var onMouseEnter = function (event) {
         var target = event.currentTarget;
         setTitleText(target instanceof HTMLElement ? target.innerText : '');
@@ -108,7 +108,7 @@ export var OverflowTooltip = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter,
             onFocus: onFocus, 'aria-label': undefined }), mergeCallbacks(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter, onFocus: onFocus }), children.props))),
-        React.createElement(Popper, __assign({ placement: placement }, popperProps), function (_a) {
+        React.createElement(Popper, __assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), function (_a) {
             var placement = _a.placement;
             var transformOrigin = getTransformFromPlacement(placement);
             return (React.createElement(TooltipContainer, __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

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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';
@@ -41,19 +41,19 @@ function mergeCallbacks(elemProps, componentProps, keys) {
 export var Tooltip = createComponent('div')({
     displayName: 'Tooltip',
     Component: function (_a) {
-        var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay"]);
+        var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, _f = _a.fallbackPlacements, fallbackPlacements = _f === void 0 ? defaultFallbackPlacements : _f, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay", "fallbackPlacements"]);
         var titleText = innerText(title);
-        var _f = useTooltip({
+        var _g = useTooltip({
             type: type,
             titleText: titleText,
             showDelay: showDelay,
             hideDelay: hideDelay,
-        }), targetProps = _f.targetProps, popperProps = _f.popperProps, tooltipProps = _f.tooltipProps;
+        }), targetProps = _g.targetProps, popperProps = _g.popperProps, tooltipProps = _g.tooltipProps;
         return (React.createElement(React.Fragment, null,
             React.cloneElement(children, __assign(__assign(__assign({}, targetProps), mergeCallbacks(children.props, targetProps)), (type === 'muted' && children.props['aria-label']
                 ? { 'aria-label': children.props['aria-label'] }
                 : {}))),
-            React.createElement(Popper, __assign({ placement: placement }, popperProps), function (_a) {
+            React.createElement(Popper, __assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), function (_a) {
                 var placement = _a.placement;
                 var transformOrigin = getTransformFromPlacement(placement);
                 return (React.createElement(TooltipContainer, __assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.6.10",
+  "version": "8.6.11",
   "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": "^8.6.10",
+    "@workday/canvas-kit-popup-stack": "^8.6.11",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "bb8329642b121f28363380a4de395d97c30afa7a"
+  "gitHead": "2281a7827d217de9c9532f480579becac6550607"
 }

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/tooltip/lib/OverflowTooltip.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-import {getTransformFromPlacement, Placement, Popper} from '@workday/canvas-kit-react/popup';
+import {
+  getTransformFromPlacement,
+  Placement,
+  Popper,
+  defaultFallbackPlacements,
+} from '@workday/canvas-kit-react/popup';
 import {mergeCallback} from '@workday/canvas-kit-react/common';
 
 import {TooltipContainer} from './TooltipContainer';
@@ -77,6 +82,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[];
 }
 
 function mergeCallbacks<T extends {[key: string]: any}>(
@@ -96,6 +108,7 @@ function mergeCallbacks<T extends {[key: string]: any}>(
 
 export const OverflowTooltip = ({
   placement = 'top',
+  fallbackPlacements = defaultFallbackPlacements,
   children,
   ...elemProps
 }: OverflowTooltipProps) => {
@@ -126,7 +139,7 @@ export const OverflowTooltip = ({
         'aria-label': undefined, // we don't need a label, the accessible name will be the content
         ...mergeCallbacks({...targetProps, onMouseEnter, onFocus}, children.props),
       })}
-      <Popper placement={placement} {...popperProps}>
+      <Popper placement={placement} fallbackPlacements={fallbackPlacements} {...popperProps}>
         {({placement}) => {
           const transformOrigin = getTransformFromPlacement(placement);
           return (

package/tooltip/lib/Tooltip.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import innerText from 'react-innertext';
 
-import {getTransformFromPlacement, Placement, Popper} from '@workday/canvas-kit-react/popup';
+import {
+  getTransformFromPlacement,
+  Placement,
+  Popper,
+  defaultFallbackPlacements,
+} from '@workday/canvas-kit-react/popup';
 import {createComponent, mergeCallback} from '@workday/canvas-kit-react/common';
 
 import {TooltipContainer} from './TooltipContainer';
@@ -27,6 +32,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.
    *
@@ -78,6 +90,7 @@ export const Tooltip = createComponent('div')({
     children,
     showDelay = 300,
     hideDelay = 100,
+    fallbackPlacements = defaultFallbackPlacements,
     ...elemProps
   }: TooltipProps) {
     const titleText = innerText(title);
@@ -97,7 +110,7 @@ export const Tooltip = createComponent('div')({
             ? {'aria-label': children.props['aria-label']}
             : {}),
         })}
-        <Popper placement={placement} {...popperProps}>
+        <Popper placement={placement} fallbackPlacements={fallbackPlacements} {...popperProps}>
           {({placement}) => {
             const transformOrigin = getTransformFromPlacement(placement);
             return (