@workday/canvas-kit-react 11.0.12 → 11.0.13

package/avatar/lib/Avatar.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
+import {styled, focusRing, hideMouseFocus, filterOutProps} from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
 import {SystemIconCircle, SystemIconCircleSize} from '@workday/canvas-kit-react/icon';
@@ -106,7 +106,9 @@ const StyledStack = styled('span')<Pick<AvatarProps, 'size'>>(
   })
 );
 
-const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
+const StyledIcon = styled(SystemIconCircle, {
+  shouldForwardProp: filterOutProps(['isImageLoaded']),
+})<{isImageLoaded: boolean}>(
   {
     transition: fadeTransition,
   },
@@ -115,7 +117,9 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
   })
 );
 
-const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
+const StyledImage = styled('img', {
+  shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
+})<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
   {
     width: '100%',
     height: '100%',

package/common/lib/theming/index.ts

@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export {createCanvasTheme} from './createCanvasTheme';
 export * from './types';
-export {default as styled, StyleRewriteFn} from './styled';
+export {default as styled, StyleRewriteFn, filterOutProps} from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useThemedRing';

package/common/lib/theming/styled.ts

@@ -6,32 +6,39 @@ import rtlCSSJS from 'rtl-css-js';
 
 const noop = (styles: any) => styles;
 
+interface ThemingStyledOptions {
+  shouldForwardProp?: (prop: any) => boolean;
+}
+
+export const filterOutProps = (omittedProps: string[]) => {
+  return (prop: string) => !omittedProps.includes(prop);
+};
+
 // Pulled from https://github.com/emotion-js/emotion/blob/master/packages/styled-base/src/utils.js#L6 (not exported)
 type Interpolations = Array<any>;
 export type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 
-function styled<Props>(node: any) {
+function styled<Props>(node: any, options?: ThemingStyledOptions) {
   return (...args: Interpolation<Props>[]) => {
     const newArgs: Interpolations = args.map(
-      interpolation => (
-        props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}
-      ) => {
-        props.theme = useTheme(props.theme);
-        const direction = props.theme.canvas.direction;
-        const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
-        const maybeConvert = props.theme._styleRewriteFn || noop;
-        try {
-          if (typeof interpolation === 'function') {
-            return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
+      interpolation =>
+        (props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}) => {
+          props.theme = useTheme(props.theme);
+          const direction = props.theme.canvas.direction;
+          const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
+          const maybeConvert = props.theme._styleRewriteFn || noop;
+          try {
+            if (typeof interpolation === 'function') {
+              return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
+            }
+            return maybeFlip(maybeConvert(interpolation) as CSSObject);
+          } catch (e) {
+            return maybeConvert(interpolation);
           }
-          return maybeFlip(maybeConvert(interpolation) as CSSObject);
-        } catch (e) {
-          return maybeConvert(interpolation);
         }
-      }
     );
 
-    return emotionStyled(node)(newArgs);
+    return emotionStyled(node, options)(newArgs);
   };
 }
 

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAqEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAyEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}

package/dist/commonjs/avatar/lib/Avatar.js

@@ -69,12 +69,16 @@ const StyledStack = common_1.styled('span')({
     height: size,
     width: size,
 }));
-const StyledIcon = common_1.styled(icon_1.SystemIconCircle)({
+const StyledIcon = common_1.styled(icon_1.SystemIconCircle, {
+    shouldForwardProp: common_1.filterOutProps(['isImageLoaded']),
+})({
     transition: fadeTransition,
 }, ({ isImageLoaded }) => ({
     opacity: isImageLoaded ? 0 : 1,
 }));
-const StyledImage = common_1.styled('img')({
+const StyledImage = common_1.styled('img', {
+    shouldForwardProp: common_1.filterOutProps(['isLoaded', 'objectFit']),
+})({
     width: '100%',
     height: '100%',
     borderRadius: tokens_1.borderRadius.circle,

package/dist/commonjs/common/lib/theming/index.d.ts

@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export { createCanvasTheme } from './createCanvasTheme';
 export * from './types';
-export { default as styled, StyleRewriteFn } from './styled';
+export { default as styled, StyleRewriteFn, filterOutProps } from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useThemedRing';

package/dist/commonjs/common/lib/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3E,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/common/lib/theming/index.js

@@ -13,13 +13,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.styled = exports.createCanvasTheme = void 0;
+exports.filterOutProps = exports.styled = exports.createCanvasTheme = void 0;
 __exportStar(require("./breakpoints"), exports);
 var createCanvasTheme_1 = require("./createCanvasTheme");
 Object.defineProperty(exports, "createCanvasTheme", { enumerable: true, get: function () { return createCanvasTheme_1.createCanvasTheme; } });
 __exportStar(require("./types"), exports);
 var styled_1 = require("./styled");
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return __importDefault(styled_1).default; } });
+Object.defineProperty(exports, "filterOutProps", { enumerable: true, get: function () { return styled_1.filterOutProps; } });
 __exportStar(require("./theme"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useThemedRing"), exports);

package/dist/commonjs/common/lib/theming/styled.d.ts

@@ -1,5 +1,6 @@
 import { CreateStyled } from '@emotion/styled';
 import { CSSProperties } from '@workday/canvas-kit-react/tokens';
+export declare const filterOutProps: (omittedProps: string[]) => (prop: string) => boolean;
 export declare type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 declare const _default: CreateStyled;
 export default _default;

package/dist/commonjs/common/lib/theming/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAS/D,oBAAY,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE,aAAa,KAAK,aAAa,GAAG,SAAS,CAAC;;AA2BhF,wBAAsC"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAW/D,eAAO,MAAM,cAAc,iBAAkB,MAAM,EAAE,YACrC,MAAM,YACrB,CAAC;AAIF,oBAAY,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE,aAAa,KAAK,aAAa,GAAG,SAAS,CAAC;;AA0BhF,wBAAsC"}

package/dist/commonjs/common/lib/theming/styled.js

@@ -3,11 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterOutProps = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const index_1 = require("./index");
 const rtl_css_js_1 = __importDefault(require("rtl-css-js"));
 const noop = (styles) => styles;
-function styled(node) {
+const filterOutProps = (omittedProps) => {
+    return (prop) => !omittedProps.includes(prop);
+};
+exports.filterOutProps = filterOutProps;
+function styled(node, options) {
     return (...args) => {
         const newArgs = args.map(interpolation => (props) => {
             props.theme = index_1.useTheme(props.theme);
@@ -24,7 +29,7 @@ function styled(node) {
                 return maybeConvert(interpolation);
             }
         });
-        return styled_1.default(node)(newArgs);
+        return styled_1.default(node, options)(newArgs);
     };
 }
 exports.default = styled;

package/dist/commonjs/skeleton/lib/parts/skeletonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA6BD,eAAO,MAAM,YAAY,uFAYvB,CAAC"}
+{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+BD,eAAO,MAAM,YAAY,uFAYvB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/skeletonText.js

@@ -30,7 +30,9 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const TextContainer = styled_1.default('div')({
     marginBottom: tokens_1.space.m,
 });
-const Line = styled_1.default('div')(({ backgroundColor, width }) => {
+const Line = styled_1.default('div', {
+    shouldForwardProp: common_1.filterOutProps(['backgroundColor', 'width']),
+})(({ backgroundColor, width }) => {
     return {
         backgroundColor,
         width,

package/dist/commonjs/tabs/lib/TabsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAStD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUvB,CAAC;AAMF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAStD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUvB,CAAC;AAQF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}

package/dist/commonjs/tabs/lib/TabsList.js

@@ -33,7 +33,9 @@ exports.useTabsList = common_1.composeHooks(common_1.createElemPropsHook(useTabs
         overflowX: modality === 'touch' ? 'auto' : undefined,
     };
 }), collection_1.useOverflowListMeasure, collection_1.useListResetCursorOnBlur);
-const StyledStack = common_1.styled(layout_1.Flex)(({ maskImage }) => ({
+const StyledStack = common_1.styled(layout_1.Flex, {
+    shouldForwardProp: common_1.filterOutProps(['maskImage']),
+})(({ maskImage }) => ({
     maskImage: maskImage,
 }));
 exports.TabsList = common_1.createSubcomponent('div')({

package/dist/es6/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAqEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAyEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}

package/dist/es6/avatar/lib/Avatar.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { styled, focusRing, hideMouseFocus } from '@workday/canvas-kit-react/common';
+import { styled, focusRing, hideMouseFocus, filterOutProps } from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
 import { SystemIconCircle, SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
@@ -44,12 +44,16 @@ const StyledStack = styled('span')({
     height: size,
     width: size,
 }));
-const StyledIcon = styled(SystemIconCircle)({
+const StyledIcon = styled(SystemIconCircle, {
+    shouldForwardProp: filterOutProps(['isImageLoaded']),
+})({
     transition: fadeTransition,
 }, ({ isImageLoaded }) => ({
     opacity: isImageLoaded ? 0 : 1,
 }));
-const StyledImage = styled('img')({
+const StyledImage = styled('img', {
+    shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
+})({
     width: '100%',
     height: '100%',
     borderRadius: borderRadius.circle,

package/dist/es6/common/lib/theming/index.d.ts

@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export { createCanvasTheme } from './createCanvasTheme';
 export * from './types';
-export { default as styled, StyleRewriteFn } from './styled';
+export { default as styled, StyleRewriteFn, filterOutProps } from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useThemedRing';

package/dist/es6/common/lib/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3E,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/es6/common/lib/theming/index.js

@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export { createCanvasTheme } from './createCanvasTheme';
 export * from './types';
-export { default as styled } from './styled';
+export { default as styled, filterOutProps } from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useThemedRing';

package/dist/es6/common/lib/theming/styled.d.ts

@@ -1,5 +1,6 @@
 import { CreateStyled } from '@emotion/styled';
 import { CSSProperties } from '@workday/canvas-kit-react/tokens';
+export declare const filterOutProps: (omittedProps: string[]) => (prop: string) => boolean;
 export declare type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 declare const _default: CreateStyled;
 export default _default;

package/dist/es6/common/lib/theming/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAS/D,oBAAY,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE,aAAa,KAAK,aAAa,GAAG,SAAS,CAAC;;AA2BhF,wBAAsC"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAW/D,eAAO,MAAM,cAAc,iBAAkB,MAAM,EAAE,YACrC,MAAM,YACrB,CAAC;AAIF,oBAAY,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE,aAAa,KAAK,aAAa,GAAG,SAAS,CAAC;;AA0BhF,wBAAsC"}

package/dist/es6/common/lib/theming/styled.js

@@ -2,7 +2,10 @@ import { default as emotionStyled } from '@emotion/styled';
 import { useTheme, ContentDirection } from './index';
 import rtlCSSJS from 'rtl-css-js';
 const noop = (styles) => styles;
-function styled(node) {
+export const filterOutProps = (omittedProps) => {
+    return (prop) => !omittedProps.includes(prop);
+};
+function styled(node, options) {
     return (...args) => {
         const newArgs = args.map(interpolation => (props) => {
             props.theme = useTheme(props.theme);
@@ -19,7 +22,7 @@ function styled(node) {
                 return maybeConvert(interpolation);
             }
         });
-        return emotionStyled(node)(newArgs);
+        return emotionStyled(node, options)(newArgs);
     };
 }
 export default styled;

package/dist/es6/skeleton/lib/parts/skeletonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA6BD,eAAO,MAAM,YAAY,uFAYvB,CAAC"}
+{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+BD,eAAO,MAAM,YAAY,uFAYvB,CAAC"}

package/dist/es6/skeleton/lib/parts/skeletonText.js

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { createComponent } from '@workday/canvas-kit-react/common';
+import { createComponent, filterOutProps } from '@workday/canvas-kit-react/common';
 import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
 const TextContainer = styled('div')({
     marginBottom: space.m,
 });
-const Line = styled('div')(({ backgroundColor, width }) => {
+const Line = styled('div', {
+    shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
+})(({ backgroundColor, width }) => {
     return {
         backgroundColor,
         width,

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

@@ -1 +1 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAStD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUvB,CAAC;AAMF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAStD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUvB,CAAC;AAQF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { commonColors } from '@workday/canvas-kit-react/tokens';
-import { composeHooks, createSubcomponent, createElemPropsHook, useModalityType, styled, } from '@workday/canvas-kit-react/common';
+import { composeHooks, createSubcomponent, createElemPropsHook, useModalityType, styled, filterOutProps, } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { useOverflowListMeasure, useListRenderItems, useListResetCursorOnBlur, } from '@workday/canvas-kit-react/collection';
 import { useTabsModel } from './useTabsModel';
@@ -11,7 +11,9 @@ export const useTabsList = composeHooks(createElemPropsHook(useTabsModel)(() =>
         overflowX: modality === 'touch' ? 'auto' : undefined,
     };
 }), useOverflowListMeasure, useListResetCursorOnBlur);
-const StyledStack = styled(Flex)(({ maskImage }) => ({
+const StyledStack = styled(Flex, {
+    shouldForwardProp: filterOutProps(['maskImage']),
+})(({ maskImage }) => ({
     maskImage: maskImage,
 }));
 export const TabsList = createSubcomponent('div')({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.12",
+  "version": "11.0.13",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.12",
-    "@workday/canvas-kit-styling": "^11.0.12",
+    "@workday/canvas-kit-popup-stack": "^11.0.13",
+    "@workday/canvas-kit-styling": "^11.0.13",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "442dc6bb54412fe61deba996cb6e686cc4090777"
+  "gitHead": "f6d83142c8ccd9edbad52077f6df02a1296e2787"
 }

package/skeleton/lib/parts/skeletonText.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {createComponent, filterOutProps, StyledType} from '@workday/canvas-kit-react/common';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 
 const TextContainer = styled('div')<StyledType>({
@@ -21,7 +21,9 @@ export interface SkeletonTextProps {
   backgroundColor?: string;
 }
 
-const Line = styled('div')<
+const Line = styled('div', {
+  shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
+})<
   {
     backgroundColor: string;
     width: number | string;

package/tabs/lib/TabsList.tsx

@@ -9,6 +9,7 @@ import {
   useModalityType,
   styled,
   StyledType,
+  filterOutProps,
 } from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
@@ -45,7 +46,9 @@ export const useTabsList = composeHooks(
   useListResetCursorOnBlur
 );
 
-const StyledStack = styled(Flex)<StyledType & {maskImage?: string}>(({maskImage}) => ({
+const StyledStack = styled(Flex, {
+  shouldForwardProp: filterOutProps(['maskImage']),
+})<StyledType & {maskImage?: string}>(({maskImage}) => ({
   maskImage: maskImage,
 }));
 
@@ -84,7 +87,7 @@ export const useTouchDirection = () => {
 
   React.useEffect(() => {
     let prevXPos = window.pageXOffset;
-    const handleTouchMove = function(e: TouchEvent) {
+    const handleTouchMove = function (e: TouchEvent) {
       const currXPos = e.touches[0].clientX;
       setIsDragging(true);
       if (currXPos > prevXPos) {
@@ -95,7 +98,7 @@ export const useTouchDirection = () => {
       prevXPos = currXPos;
       e.preventDefault();
     };
-    const handleDragEnd = function() {
+    const handleDragEnd = function () {
       setIsDragging(false);
     };
     window.addEventListener('touchmove', handleTouchMove);