@workday/canvas-kit-react 7.0.0-alpha.79-next.7 → 7.0.0-alpha.82-next.10

package/button/lib/BaseButton.tsx

@@ -267,8 +267,8 @@ export const getPaddingStyles = (
     case 'small':
       return icon
         ? iconPosition === 'start'
-          ? `0 20px 0 ${space.s}`
-          : `0 ${space.s} 0 20px`
+          ? `0 ${space.s} 0 ${space.xs}`
+          : `0 ${space.xs} 0 ${space.s}`
         : `0 ${space.s}`;
 
     case 'extraSmall':

package/button/lib/SecondaryButton.tsx

@@ -162,12 +162,11 @@ export const getSecondaryButtonColors = (
         focus: {
           background: colors.frenchVanilla100,
           icon: colors.blackPepper500,
-          border: colors.blackPepper400,
           label: colors.blackPepper500,
           focusRing: focusRing(
             {
-              separation: 1,
-              innerColor: colors.blackPepper400,
+              separation: 2,
+              innerColor: 'currentColor',
               outerColor: colors.frenchVanilla100,
             },
             theme

package/dist/commonjs/button/lib/BaseButton.js

@@ -167,8 +167,8 @@ var getPaddingStyles = function (children, size, icon, iconPosition) {
         case 'small':
             return icon
                 ? iconPosition === 'start'
-                    ? "0 20px 0 " + tokens_1.space.s
-                    : "0 " + tokens_1.space.s + " 0 20px"
+                    ? "0 " + tokens_1.space.s + " 0 " + tokens_1.space.xs
+                    : "0 " + tokens_1.space.xs + " 0 " + tokens_1.space.s
                 : "0 " + tokens_1.space.s;
         case 'extraSmall':
             return icon

package/dist/commonjs/button/lib/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAqFF,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAoFF,CAAC"}

package/dist/commonjs/button/lib/SecondaryButton.js

@@ -117,11 +117,10 @@ var getSecondaryButtonColors = function (variant, theme) {
                 focus: {
                     background: tokens_1.colors.frenchVanilla100,
                     icon: tokens_1.colors.blackPepper500,
-                    border: tokens_1.colors.blackPepper400,
                     label: tokens_1.colors.blackPepper500,
                     focusRing: common_1.focusRing({
-                        separation: 1,
-                        innerColor: tokens_1.colors.blackPepper400,
+                        separation: 2,
+                        innerColor: 'currentColor',
                         outerColor: tokens_1.colors.frenchVanilla100,
                     }, theme),
                 },

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

@@ -18,14 +18,6 @@ export interface PopperProps {
     children: ((props: {
         placement: Placement;
     }) => React.ReactNode) | React.ReactNode;
-    /**
-     * The element that contains the portal children when `portal` is true. It is best to not define
-     * this unless you know what you're doing. Popper works with a PopupStack and in order for
-     * z-indexes to work correctly, all Popups on your page should live on the same root element
-     * otherwise you risk running into rendering issues:
-     * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-     */
-    containerElement?: Element | null;
     /**
      * When provided, this optional callback will be used to determine positioning for the Popper element
      * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -58,7 +50,7 @@ export interface PopperProps {
      */
     popperOptions?: Partial<PopperOptions>;
     /**
-     * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+     * If false, render the Popper within the
      * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
      * overflows. If you set this to `false`, you may experience issues where you content gets cut off
      * by scrollbars or `overflow: hidden`

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,QAAQ,CAAC,SAAS,CAAC;AAC3C,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,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;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,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,QAAQ,CAAC,SAAS,CAAC;AAC3C,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,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

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

@@ -77,7 +77,7 @@ 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, containerElement = _a.containerElement, 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, 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];
@@ -128,7 +128,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
     if (!portal) {
         return contents;
     }
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current);
+    return ReactDOM.createPortal(contents, stackRef.current);
 });
 // Typescript threw an error about non-callable signatures. Using typeof as a 'function' returns
 // a type of `Function` which isn't descriptive enough for Typescript. We don't do any detection

package/dist/commonjs/toast/lib/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA8ChB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA+ChB,CAAC"}

package/dist/commonjs/toast/lib/Toast.js

@@ -73,7 +73,8 @@ exports.Toast = common_1.createComponent('div')({
         _c = _a.iconColor, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
         iconColor = _c === void 0 ? tokens_1.colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
         var isInteractive = onClose || onActionClick;
-        return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
+        var isError = iconColor === tokens_1.colors.cinnamon500 && icon === canvas_system_icons_web_1.exclamationCircleIcon;
+        return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive }, elemProps),
             onClose && React.createElement(popup_1.Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
             React.createElement(popup_1.Popup.Body, null,
                 React.createElement(ToastContentContainer, { onClose: onClose },

package/dist/es6/button/lib/BaseButton.js

@@ -144,8 +144,8 @@ export var getPaddingStyles = function (children, size, icon, iconPosition) {
         case 'small':
             return icon
                 ? iconPosition === 'start'
-                    ? "0 20px 0 " + space.s
-                    : "0 " + space.s + " 0 20px"
+                    ? "0 " + space.s + " 0 " + space.xs
+                    : "0 " + space.xs + " 0 " + space.s
                 : "0 " + space.s;
         case 'extraSmall':
             return icon

package/dist/es6/button/lib/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAqFF,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAoFF,CAAC"}

package/dist/es6/button/lib/SecondaryButton.js

@@ -95,11 +95,10 @@ export var getSecondaryButtonColors = function (variant, theme) {
                 focus: {
                     background: colors.frenchVanilla100,
                     icon: colors.blackPepper500,
-                    border: colors.blackPepper400,
                     label: colors.blackPepper500,
                     focusRing: focusRing({
-                        separation: 1,
-                        innerColor: colors.blackPepper400,
+                        separation: 2,
+                        innerColor: 'currentColor',
                         outerColor: colors.frenchVanilla100,
                     }, theme),
                 },

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

@@ -18,14 +18,6 @@ export interface PopperProps {
     children: ((props: {
         placement: Placement;
     }) => React.ReactNode) | React.ReactNode;
-    /**
-     * The element that contains the portal children when `portal` is true. It is best to not define
-     * this unless you know what you're doing. Popper works with a PopupStack and in order for
-     * z-indexes to work correctly, all Popups on your page should live on the same root element
-     * otherwise you risk running into rendering issues:
-     * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-     */
-    containerElement?: Element | null;
     /**
      * When provided, this optional callback will be used to determine positioning for the Popper element
      * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -58,7 +50,7 @@ export interface PopperProps {
      */
     popperOptions?: Partial<PopperOptions>;
     /**
-     * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+     * If false, render the Popper within the
      * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
      * overflows. If you set this to `false`, you may experience issues where you content gets cut off
      * by scrollbars or `overflow: hidden`

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,QAAQ,CAAC,SAAS,CAAC;AAC3C,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,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;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,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,QAAQ,CAAC,SAAS,CAAC;AAC3C,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,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

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

@@ -55,7 +55,7 @@ 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, containerElement = _a.containerElement, 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, 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];
@@ -106,7 +106,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
     if (!portal) {
         return contents;
     }
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current);
+    return ReactDOM.createPortal(contents, stackRef.current);
 });
 // Typescript threw an error about non-callable signatures. Using typeof as a 'function' returns
 // a type of `Function` which isn't descriptive enough for Typescript. We don't do any detection

package/dist/es6/toast/lib/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA8ChB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA+ChB,CAAC"}

package/dist/es6/toast/lib/Toast.js

@@ -24,7 +24,7 @@ import * as React from 'react';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { space, colors, type } from '@workday/canvas-kit-react/tokens';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { checkIcon } from '@workday/canvas-system-icons-web';
+import { checkIcon, exclamationCircleIcon } from '@workday/canvas-system-icons-web';
 import { createComponent, styled } from '@workday/canvas-kit-react/common';
 import { Hyperlink } from '@workday/canvas-kit-react/button';
 var toastWidth = 360;
@@ -51,7 +51,8 @@ export var Toast = createComponent('div')({
         _c = _a.iconColor, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
         iconColor = _c === void 0 ? colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
         var isInteractive = onClose || onActionClick;
-        return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
+        var isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
+        return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive }, elemProps),
             onClose && React.createElement(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
             React.createElement(Popup.Body, null,
                 React.createElement(ToastContentContainer, { onClose: onClose },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.79-next.7+578f91ad",
+  "version": "7.0.0-alpha.82-next.10+ea197cab",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -57,9 +57,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.79-next.7+578f91ad",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.79-next.7+578f91ad",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.79-next.7+578f91ad",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.82-next.10+ea197cab",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.82-next.10+ea197cab",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.82-next.10+ea197cab",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -77,5 +77,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "578f91adfde267929daf4f55b7a6463f8739421e"
+  "gitHead": "ea197cab142c9ff0e0c40de332f915fbcf869bfe"
 }

package/popup/lib/Popper.tsx

@@ -22,14 +22,6 @@ export interface PopperProps {
    * `anchorElement`.
    */
   children: ((props: {placement: Placement}) => React.ReactNode) | React.ReactNode;
-  /**
-   * The element that contains the portal children when `portal` is true. It is best to not define
-   * this unless you know what you're doing. Popper works with a PopupStack and in order for
-   * z-indexes to work correctly, all Popups on your page should live on the same root element
-   * otherwise you risk running into rendering issues:
-   * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-   */
-  containerElement?: Element | null;
   /**
    * When provided, this optional callback will be used to determine positioning for the Popper element
    * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -62,7 +54,7 @@ export interface PopperProps {
    */
   popperOptions?: Partial<PopperOptions>;
   /**
-   * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+   * If false, render the Popper within the
    * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
    * overflows. If you set this to `false`, you may experience issues where you content gets cut off
    * by scrollbars or `overflow: hidden`
@@ -113,7 +105,6 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       onPlacementChange,
       children,
       portal,
-      containerElement,
       popperInstanceRef,
     }: PopperProps,
     ref
@@ -185,7 +176,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       return contents;
     }
 
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current!);
+    return ReactDOM.createPortal(contents, stackRef.current!);
   }
 );
 

package/toast/lib/Toast.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {space, colors, type, CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {checkIcon} from '@workday/canvas-system-icons-web';
+import {checkIcon, exclamationCircleIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {createComponent, ExtractProps, styled, StyledType} from '@workday/canvas-kit-react/common';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
@@ -85,6 +85,7 @@ export const Toast = createComponent('div')({
     Element
   ) => {
     const isInteractive = onClose || onActionClick;
+    const isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
 
     return (
       <Popup.Card
@@ -93,8 +94,8 @@ export const Toast = createComponent('div')({
         width={toastWidth}
         padding="s"
         depth={5}
-        role={isInteractive ? 'dialog' : 'status'}
-        aria-live={isInteractive ? 'off' : 'polite'}
+        role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'}
+        aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'}
         aria-atomic={!isInteractive}
         {...elemProps}
       >

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

@@ -18,14 +18,6 @@ export interface PopperProps {
     children: ((props: {
         placement: Placement;
     }) => React.ReactNode) | React.ReactNode;
-    /**
-     * The element that contains the portal children when `portal` is true. It is best to not define
-     * this unless you know what you're doing. Popper works with a PopupStack and in order for
-     * z-indexes to work correctly, all Popups on your page should live on the same root element
-     * otherwise you risk running into rendering issues:
-     * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-     */
-    containerElement?: Element | null;
     /**
      * When provided, this optional callback will be used to determine positioning for the Popper element
      * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -58,7 +50,7 @@ export interface PopperProps {
      */
     popperOptions?: Partial<PopperOptions>;
     /**
-     * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+     * If false, render the Popper within the
      * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
      * overflows. If you set this to `false`, you may experience issues where you content gets cut off
      * by scrollbars or `overflow: hidden`

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

@@ -18,14 +18,6 @@ export interface PopperProps {
     children: ((props: {
         placement: Placement;
     }) => React.ReactNode) | React.ReactNode;
-    /**
-     * The element that contains the portal children when `portal` is true. It is best to not define
-     * this unless you know what you're doing. Popper works with a PopupStack and in order for
-     * z-indexes to work correctly, all Popups on your page should live on the same root element
-     * otherwise you risk running into rendering issues:
-     * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-     */
-    containerElement?: Element | null;
     /**
      * When provided, this optional callback will be used to determine positioning for the Popper element
      * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -58,7 +50,7 @@ export interface PopperProps {
      */
     popperOptions?: Partial<PopperOptions>;
     /**
-     * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+     * If false, render the Popper within the
      * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
      * overflows. If you set this to `false`, you may experience issues where you content gets cut off
      * by scrollbars or `overflow: hidden`