@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/dist/es6/combobox/lib/useComboboxModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/useComboboxModel.tsx"],"names":[],"mappings":"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"}

package/dist/es6/combobox/lib/useComboboxModel.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { createModelHook, dispatchInputEvent } from '@workday/canvas-kit-react/common';
+import { useMenuModel } from '@workday/canvas-kit-react/menu';
+/**
+ * An input model can be used by compound components that need to work with form fields. Some form
+ * libraries use `onChange` and `value` to update a form object. Others use `onChange` and `ref` to
+ * avoid rerendering. Also autocomplete and test libraries may use the `value` `HTMLInputElement`
+ * property. We need to normalize these use cases so subcomponents can have correct data and all
+ * use-cases are supported.
+ */
+export const useInputModel = createModelHook({
+    defaultConfig: {
+        value: undefined,
+        onChange(event) {
+            return;
+        },
+    },
+})(config => {
+    const inputRef = React.createRef();
+    return {
+        onChange: config.onChange,
+        state: { value: config.value, inputRef },
+        events: {},
+    };
+});
+/**
+ * `ComboboxModel` extends the {@link ListModel} and the {@link InputModel}. Selecting items from
+ * the menu will dispatch an
+ * [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event on the
+ * input which should work with form libraries, automation, and autofill.
+ *
+ * ```tsx
+ * const model = useComboboxModel()
+ *
+ * <Combobox model={model}>{Combobox child components}</Combobox>
+ * ```
+ */
+export const useComboboxModel = createModelHook({
+    defaultConfig: {
+        ...useInputModel.defaultConfig,
+        ...useMenuModel.defaultConfig,
+    },
+    requiredConfig: {
+        ...useInputModel.requiredConfig,
+        ...useMenuModel.requiredConfig,
+    },
+})(config => {
+    const input = useInputModel(config);
+    const menu = useMenuModel(useMenuModel.mergeConfig(config, {
+        shouldVirtualize: true,
+        onSelect({ id }) {
+            dispatchInputEvent(menu.state.targetRef.current, id);
+        },
+    }));
+    const [width, setWidth] = React.useState(0);
+    const state = {
+        /**
+         * The width of the combobox input. This is used to make sure the UI renders the menu the same
+         * width as the input.
+         */
+        width,
+        ...input.state,
+        ...menu.state,
+    };
+    const events = {
+        ...input.events,
+        ...menu.events,
+        /**
+         * Change the width of the menu. Usually this is set to the width of the input.
+         */
+        setWidth(width) {
+            setWidth(width);
+        },
+    };
+    return { ...menu, ...input, state, events };
+});

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

@@ -7,4 +7,5 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}

package/dist/es6/common/index.js

@@ -7,3 +7,4 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';

package/dist/es6/common/lib/CanvasProvider.js

@@ -1,58 +1,17 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { InputProvider } from './InputProvider';
 import { defaultCanvasTheme } from './theming';
-var CanvasProvider = /** @class */ (function (_super) {
-    __extends(CanvasProvider, _super);
-    function CanvasProvider() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CanvasProvider.prototype.render = function () {
-        var _a = this.props, children = _a.children, theme = _a.theme, elemProps = __rest(_a, ["children", "theme"]);
+export class CanvasProvider extends React.Component {
+    render() {
+        const { children, theme, ...elemProps } = this.props;
         return (React.createElement(ThemeProvider, { theme: theme },
             React.createElement(InputProvider, null),
-            React.createElement("div", __assign({ dir: (theme.canvas && theme.canvas.direction) || defaultCanvasTheme.direction }, elemProps), children)));
-    };
-    CanvasProvider.defaultProps = {
-        theme: {
-            canvas: defaultCanvasTheme,
-        },
-    };
-    return CanvasProvider;
-}(React.Component));
-export { CanvasProvider };
+            React.createElement("div", Object.assign({ dir: (theme.canvas && theme.canvas.direction) || defaultCanvasTheme.direction }, elemProps), children)));
+    }
+}
+CanvasProvider.defaultProps = {
+    theme: {
+        canvas: defaultCanvasTheme,
+    },
+};

package/dist/es6/common/lib/EllipsisText.d.ts

@@ -1,5 +1,4 @@
 import { CSSObject } from '@emotion/styled';
-import { ElementComponent } from '..';
 export declare const ellipsisStyles: CSSObject;
-export declare const EllipsisText: ElementComponent<"span", {}>;
+export declare const EllipsisText: import("./utils").ElementComponent<"span", unknown>;
 //# sourceMappingURL=EllipsisText.d.ts.map

package/dist/es6/common/lib/EllipsisText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../common/lib/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,SAI5B,CAAC;AAGF,eAAO,MAAM,YAAY,8BAA0E,CAAC"}
+{"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../common/lib/EllipsisText.tsx"],"names":[],"mappings":"AACA,OAAe,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAIlD,eAAO,MAAM,cAAc,EAAE,SAI5B,CAAC;AAIF,eAAO,MAAM,YAAY,qDAKvB,CAAC"}

package/dist/es6/common/lib/EllipsisText.js

@@ -1,8 +1,15 @@
+import React from 'react';
 import styled from '@emotion/styled';
-export var ellipsisStyles = {
+import { createComponent } from './utils';
+export const ellipsisStyles = {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
 };
-// Recast as an `ElementComponent` due to better type support for `as` and `ref`
-export var EllipsisText = styled('span')(ellipsisStyles);
+const StyledEllipsisComponent = styled('span')(ellipsisStyles);
+export const EllipsisText = createComponent('span')({
+    displayName: 'EllipsisText',
+    Component(elemProps = {}, ref, Element) {
+        return React.createElement(StyledEllipsisComponent, Object.assign({ as: Element, ref: ref }, elemProps));
+    },
+});

package/dist/es6/common/lib/InputProvider.d.ts

@@ -36,7 +36,7 @@ export declare const inputEventMap: {
 /**
  * This component takes heavy inspiration from what-input (https://github.com/ten1seven/what-input)
  */
-export declare class InputProvider extends React.Component<InputProviderProps> {
+export declare class InputProvider extends React.Component<React.PropsWithChildren<InputProviderProps>> {
     private eventTimer;
     private currentInput;
     private currentIntent;
@@ -57,7 +57,7 @@ export declare class InputProvider extends React.Component<InputProviderProps> {
     setIntent(event: InputEvent): void;
     eventBuffer(event: Event): void;
     detectScrolling(event: React.MouseEvent): void;
-    render(): {} | null;
+    render(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | null;
 }
 export default InputProvider;
 //# sourceMappingURL=InputProvider.d.ts.map

package/dist/es6/common/lib/InputProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/InputProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CACxD;AAED,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,UAAU,eAAe;CAC1B;AAED,aAAK,UAAU,GACX,KAAK,GACL,KAAK,CAAC,aAAa,GACnB,KAAK,CAAC,UAAU,GAChB,KAAK,CAAC,UAAU,GAChB,KAAK,CAAC,YAAY,CAAC;AAUvB,eAAO,MAAM,aAAa;;;;;;;;;;CAUzB,CAAC;AA8DF;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC;IACpE,OAAO,CAAC,UAAU,CAAqB;IAEvC,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,eAAe,CAAW;IAClC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,kBAAkB,CAAS;gBAEvB,KAAK,EAAE,GAAG;IAuBtB,aAAa,sBAA4B;IAEzC,YAAY,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,WAAW;IAgBjF,iBAAiB;IAejB,gBAAgB;IAgBhB,oBAAoB;IAWpB,eAAe,CAAC,MAAM,EAAE,OAAO;IA6C/B,QAAQ,CAAC,KAAK,EAAE,UAAU;IA4C1B,SAAS,CAAC,KAAK,EAAE,UAAU;IAoB3B,WAAW,CAAC,KAAK,EAAE,KAAK;IAcxB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU;IAUvC,MAAM;CAGP;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InputProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/InputProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CACxD;AAED,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,UAAU,eAAe;CAC1B;AAED,aAAK,UAAU,GACX,KAAK,GACL,KAAK,CAAC,aAAa,GACnB,KAAK,CAAC,UAAU,GAChB,KAAK,CAAC,UAAU,GAChB,KAAK,CAAC,YAAY,CAAC;AAUvB,eAAO,MAAM,aAAa;;;;;;;;;;CAUzB,CAAC;AA8DF;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IAC7F,OAAO,CAAC,UAAU,CAAqB;IAEvC,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,eAAe,CAAW;IAClC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,kBAAkB,CAAS;gBAEvB,KAAK,EAAE,GAAG;IAuBtB,aAAa,sBAA4B;IAEzC,YAAY,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,WAAW;IAgBjF,iBAAiB;IAYjB,gBAAgB;IAgBhB,oBAAoB;IAWpB,eAAe,CAAC,MAAM,EAAE,OAAO;IA6C/B,QAAQ,CAAC,KAAK,EAAE,UAAU;IA4C1B,SAAS,CAAC,KAAK,EAAE,UAAU;IAoB3B,WAAW,CAAC,KAAK,EAAE,KAAK;IAcxB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU;IAUvC,MAAM;CAGP;AAED,eAAe,aAAa,CAAC"}

package/dist/es6/common/lib/InputProvider.js

@@ -1,20 +1,4 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var _a;
 import * as React from 'react';
-// @ts-ignore
-import elementClosestPolyfill from 'element-closest';
 export var InputType;
 (function (InputType) {
     InputType["Initial"] = "initial";
@@ -36,29 +20,29 @@ export var InputEventType;
     InputEventType["TouchStart"] = "touchstart";
 })(InputEventType || (InputEventType = {}));
 // form input types
-var formInputs = ['input', 'select', 'textarea'];
+const formInputs = ['input', 'select', 'textarea'];
 // list of modifier keys commonly used with the mouse and
 // can be safely ignored to prevent false keyboard detection
-var ignoreKeys = ['Shift', 'Control', 'Alt', 'Meta', 'OS'];
+const ignoreKeys = ['Shift', 'Control', 'Alt', 'Meta', 'OS'];
 // mapping of events to input types
-export var inputEventMap = (_a = {},
-    _a[InputEventType.KeyDown] = InputType.Keyboard,
-    _a[InputEventType.KeyUp] = InputType.Keyboard,
-    _a[InputEventType.MouseDown] = InputType.Mouse,
-    _a[InputEventType.MouseMove] = InputType.Mouse,
-    _a[InputEventType.Wheel] = InputType.Mouse,
-    _a[InputEventType.MouseWheel] = InputType.Mouse,
-    _a[InputEventType.PointerDown] = InputType.Pointer,
-    _a[InputEventType.PointerMove] = InputType.Pointer,
-    _a[InputEventType.TouchStart] = InputType.Touch,
-    _a);
+export const inputEventMap = {
+    [InputEventType.KeyDown]: InputType.Keyboard,
+    [InputEventType.KeyUp]: InputType.Keyboard,
+    [InputEventType.MouseDown]: InputType.Mouse,
+    [InputEventType.MouseMove]: InputType.Mouse,
+    [InputEventType.Wheel]: InputType.Mouse,
+    [InputEventType.MouseWheel]: InputType.Mouse,
+    [InputEventType.PointerDown]: InputType.Pointer,
+    [InputEventType.PointerMove]: InputType.Pointer,
+    [InputEventType.TouchStart]: InputType.Touch,
+};
 // map of IE 10 pointer events
-var pointerMap = {
+const pointerMap = {
     2: InputType.Touch,
     3: InputType.Touch,
     4: InputType.Mouse,
 };
-var getPointerType = function (event) {
+const getPointerType = (event) => {
     if (typeof event.pointerType === 'number') {
         return pointerMap[event.pointerType];
     }
@@ -72,8 +56,8 @@ var getPointerType = function (event) {
 };
 // detect version of mouse wheel event to use
 // via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
-var detectWheel = function () {
-    var wheelType;
+const detectWheel = () => {
+    let wheelType;
     // Modern browsers support "wheel"
     /* istanbul ignore else for coverage */
     if ('onwheel' in document.createElement('div')) {
@@ -85,17 +69,17 @@ var detectWheel = function () {
     }
     return wheelType;
 };
-var supportsPassive = function () {
-    var supportsPassive;
+const supportsPassive = () => {
+    let supportsPassive;
     try {
         /* istanbul ignore next function for coverage */
-        var opts = Object.defineProperty({}, 'passive', {
-            get: function () {
+        const opts = Object.defineProperty({}, 'passive', {
+            get: () => {
                 supportsPassive = true;
             },
         });
         /* istanbul ignore next function for coverage */
-        var stub = function () {
+        const stub = () => {
             return;
         };
         window.addEventListener('test', stub, opts);
@@ -110,20 +94,19 @@ var supportsPassive = function () {
 /**
  * This component takes heavy inspiration from what-input (https://github.com/ten1seven/what-input)
  */
-var InputProvider = /** @class */ (function (_super) {
-    __extends(InputProvider, _super);
-    function InputProvider(props) {
-        var _this = _super.call(this, props) || this;
-        _this.isBuffering = false;
-        _this.isScrolling = false; // Unused if props.provideIntent is not defined
-        _this.mousePosX = null; // Unused if props.provideIntent is not defined
-        _this.mousePosY = null; // Unused if props.provideIntent is not defined
-        _this.deferInputTracking = false; // True if there is another input provider
+export class InputProvider extends React.Component {
+    constructor(props) {
+        super(props);
+        this.isBuffering = false;
+        this.isScrolling = false; // Unused if props.provideIntent is not defined
+        this.mousePosX = null; // Unused if props.provideIntent is not defined
+        this.mousePosY = null; // Unused if props.provideIntent is not defined
+        this.deferInputTracking = false; // True if there is another input provider
         // Need to remember how it component was mounted so we ensure listener removal
-        _this.provideIntent = _this.props.provideIntent;
+        this.provideIntent = this.props.provideIntent;
         // check for sessionStorage support
         // then check for session variables and use if available
-        var storedInput, storedIntent;
+        let storedInput, storedIntent;
         try {
             storedInput = window.sessionStorage.getItem('what-input');
             storedIntent = window.sessionStorage.getItem('what-intent');
@@ -132,14 +115,13 @@ var InputProvider = /** @class */ (function (_super) {
             /* istanbul ignore next line for coverage */
             console.warn('Failed to retrieve input status from session storage' + e);
         }
-        _this.currentInput = storedInput || InputType.Initial;
-        _this.currentIntent = storedIntent || InputType.Initial;
-        _this.setInput = _this.setInput.bind(_this);
-        _this.setIntent = _this.setIntent.bind(_this);
-        _this.eventBuffer = _this.eventBuffer.bind(_this);
-        return _this;
+        this.currentInput = storedInput || InputType.Initial;
+        this.currentIntent = storedIntent || InputType.Initial;
+        this.setInput = this.setInput.bind(this);
+        this.setIntent = this.setIntent.bind(this);
+        this.eventBuffer = this.eventBuffer.bind(this);
     }
-    InputProvider.prototype.getContainer = function (container) {
+    getContainer(container) {
         // Note: Not a default prop because using document when defining default props causes errors during SSR
         if (!container) {
             return document.body;
@@ -154,10 +136,8 @@ var InputProvider = /** @class */ (function (_super) {
             }
         }
         return container;
-    };
-    InputProvider.prototype.componentDidMount = function () {
-        // For IE11 and under, we'll need to polyfill element.closest
-        elementClosestPolyfill(window);
+    }
+    componentDidMount() {
         // Check for passive event listener support
         this.supportsPassive = supportsPassive();
         if (this.getContainer(this.props.container).closest('[data-whatinput]')) {
@@ -166,9 +146,9 @@ var InputProvider = /** @class */ (function (_super) {
         }
         this.updateAttributes();
         this.enableListeners(true);
-    };
-    InputProvider.prototype.updateAttributes = function () {
-        var intent = this.provideIntent ? this.currentIntent : null;
+    }
+    updateAttributes() {
+        const intent = this.provideIntent ? this.currentIntent : null;
         this.getContainer(this.props.container).setAttribute('data-whatinput', this.currentInput);
         if (intent) {
             this.getContainer(this.props.container).setAttribute('data-whatintent', intent);
@@ -181,8 +161,8 @@ var InputProvider = /** @class */ (function (_super) {
             /* istanbul ignore next line for coverage */
             console.warn('Failed to set input status in session storage' + e);
         }
-    };
-    InputProvider.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         if (this.deferInputTracking) {
             return;
         }
@@ -190,8 +170,8 @@ var InputProvider = /** @class */ (function (_super) {
         this.getContainer(this.props.container).removeAttribute('data-whatintent');
         window.clearTimeout(this.eventTimer);
         this.enableListeners(false);
-    };
-    InputProvider.prototype.enableListeners = function (enable) {
+    }
+    enableListeners(enable) {
         /* istanbul ignore if for coverage */
         if (typeof window === 'undefined') {
             return;
@@ -199,10 +179,10 @@ var InputProvider = /** @class */ (function (_super) {
         // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
         // can only demonstrate potential, but not actual, interaction
         // and are treated separately
-        var options = this.supportsPassive
+        const options = this.supportsPassive
             ? { passive: true } // fixes Type '{ passive: boolean; }' has no properties in common with type 'EventListenerOptions'.  TS2345
             : false;
-        var fn = enable ? window.addEventListener : window.removeEventListener;
+        const fn = enable ? window.addEventListener : window.removeEventListener;
         // pointer events (mouse, pen, touch)
         if (window.PointerEvent) {
             fn('pointerdown', this.setInput);
@@ -229,21 +209,21 @@ var InputProvider = /** @class */ (function (_super) {
         // keyboard events
         fn('keydown', this.eventBuffer);
         fn('keyup', this.eventBuffer);
-    };
-    InputProvider.prototype.setInput = function (event) {
+    }
+    setInput(event) {
         // only execute if the event buffer timer isn't running
         /* istanbul ignore if for coverage */
         if (this.isBuffering) {
             return;
         }
-        var eventKey = 'key' in event ? event.key : undefined;
-        var eventType = event.type;
-        var value = inputEventMap[eventType];
+        const eventKey = 'key' in event ? event.key : undefined;
+        const eventType = event.type;
+        let value = inputEventMap[eventType];
         if (value === InputType.Pointer) {
             value = getPointerType(event);
         }
-        var ignoreMatch = eventKey ? ignoreKeys.indexOf(eventKey) === -1 : undefined;
-        var shouldUpdate = (value === InputType.Keyboard && eventKey && ignoreMatch) ||
+        const ignoreMatch = eventKey ? ignoreKeys.indexOf(eventKey) === -1 : undefined;
+        const shouldUpdate = (value === InputType.Keyboard && eventKey && ignoreMatch) ||
             value === InputType.Mouse ||
             value === InputType.Touch;
         if (this.currentInput !== value && shouldUpdate) {
@@ -252,8 +232,8 @@ var InputProvider = /** @class */ (function (_super) {
         }
         if (this.currentIntent !== value && shouldUpdate && this.provideIntent) {
             // preserve intent for keyboard typing in form fields
-            var activeElem = document.activeElement;
-            var notFormInput = activeElem &&
+            const activeElem = document.activeElement;
+            const notFormInput = activeElem &&
                 activeElem.nodeName &&
                 formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1;
             /* istanbul ignore else for coverage */
@@ -262,37 +242,36 @@ var InputProvider = /** @class */ (function (_super) {
                 this.updateAttributes();
             }
         }
-    };
+    }
     // updates input intent for `mousemove` and `pointermove`
-    InputProvider.prototype.setIntent = function (event) {
+    setIntent(event) {
         // test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
         this.detectScrolling(event);
         // only execute if the event buffer timer isn't running
         // or scrolling isn't happening
         /* istanbul ignore else for coverage */
         if (!this.isBuffering && !this.isScrolling) {
-            var eventType = event.type;
-            var value = inputEventMap[eventType];
+            const eventType = event.type;
+            let value = inputEventMap[eventType];
             if (value === InputType.Pointer) {
                 value = getPointerType(event);
             }
             this.currentIntent = value;
             this.updateAttributes();
         }
-    };
+    }
     // buffers events that frequently also fire mouse events
-    InputProvider.prototype.eventBuffer = function (event) {
-        var _this = this;
+    eventBuffer(event) {
         // set the current input
         this.setInput(event);
         window.clearTimeout(this.eventTimer);
         this.isBuffering = true;
         /* istanbul ignore next function for coverage */
-        this.eventTimer = window.setTimeout(function () {
-            _this.isBuffering = false;
+        this.eventTimer = window.setTimeout(() => {
+            this.isBuffering = false;
         }, 100);
-    };
-    InputProvider.prototype.detectScrolling = function (event) {
+    }
+    detectScrolling(event) {
         if (this.mousePosX !== event.screenX || this.mousePosY !== event.screenY) {
             this.isScrolling = false;
             this.mousePosX = event.screenX;
@@ -301,11 +280,9 @@ var InputProvider = /** @class */ (function (_super) {
         else {
             this.isScrolling = true;
         }
-    };
-    InputProvider.prototype.render = function () {
+    }
+    render() {
         return this.props.children || null;
-    };
-    return InputProvider;
-}(React.Component));
-export { InputProvider };
+    }
+}
 export default InputProvider;

package/dist/es6/common/lib/parts/_brand-assets.js

@@ -1,6 +1,6 @@
-var CDN_URI = 'https://design.workday.com/images/';
-export var dubLogoBlue = "<img src=\"" + CDN_URI + "ck-dub-logo-blue.svg\" alt=\"\">";
-export var dubLogoWhite = "<img src=\"" + CDN_URI + "ck-dub-logo-white.svg\" alt=\"\">";
-export var wdayLogoBlue = "<img src=\"" + CDN_URI + "ck-wday-logo-blue.svg\" alt=\"\">";
-export var wdayLogoWhite = "<img src=\"" + CDN_URI + "ck-wday-logo-white.svg\" alt=\"\">";
-export var miniWdayLogoBlue = "<img src=\"" + CDN_URI + "ck-mini-wday-logo-blue.svg\" alt=\"\">";
+const CDN_URI = 'https://design.workday.com/images/';
+export const dubLogoBlue = `<img src="${CDN_URI}ck-dub-logo-blue.svg" alt="">`;
+export const dubLogoWhite = `<img src="${CDN_URI}ck-dub-logo-white.svg" alt="">`;
+export const wdayLogoBlue = `<img src="${CDN_URI}ck-wday-logo-blue.svg" alt="">`;
+export const wdayLogoWhite = `<img src="${CDN_URI}ck-wday-logo-white.svg" alt="">`;
+export const miniWdayLogoBlue = `<img src="${CDN_URI}ck-mini-wday-logo-blue.svg" alt="">`;

package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.d.ts

@@ -0,0 +1,78 @@
+import { breakpointKeys } from "@workday/canvas-kit-react/common";
+import type { AllStyleProps } from "@workday/canvas-kit-react/layout";
+export declare type BreakpointKeys = typeof breakpointKeys[number];
+declare type ResponsiveCSSObject<T> = {
+    [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> & AllStyleProps;
+};
+declare type CSSObject<T> = {
+    [P in keyof T]: AllStyleProps;
+};
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+export declare function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(styles: ResponsiveCSSObject<T>, width: number, theme?: {}): CSSObject<T>;
+export {};
+//# sourceMappingURL=useResponsiveContainerStyles.d.ts.map

package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveContainerStyles.d.ts","sourceRoot":"","sources":["../../../../../common/lib/responsive/useResponsiveContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAqB,MAAM,kCAAkC,CAAC;AAC/F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGpE,oBAAY,cAAc,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAE3D,aAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,GAC5D,aAAa;CAChB,CAAC;AACF,aAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa;CAC9B,CAAC;AAsCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAC3E,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,KAAK,KAAK,gBAOX"}