@workday/canvas-kit-react 8.0.0-alpha.254-next.23 → 8.0.0-alpha.428-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/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

@@ -57,7 +57,7 @@ export declare class InputProvider extends React.Component<React.PropsWithChildr
     setIntent(event: InputEvent): void;
     eventBuffer(event: Event): void;
     detectScrolling(event: React.MouseEvent): void;
-    render(): number | true | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactFragment | 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.js

@@ -1,17 +1,3 @@
-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';
 export var InputType;
 (function (InputType) {
@@ -34,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];
     }
@@ -70,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')) {
@@ -83,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);
@@ -108,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');
@@ -130,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;
@@ -152,8 +136,8 @@ var InputProvider = /** @class */ (function (_super) {
             }
         }
         return container;
-    };
-    InputProvider.prototype.componentDidMount = function () {
+    }
+    componentDidMount() {
         // Check for passive event listener support
         this.supportsPassive = supportsPassive();
         if (this.getContainer(this.props.container).closest('[data-whatinput]')) {
@@ -162,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);
@@ -177,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;
         }
@@ -186,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;
@@ -195,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);
@@ -225,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) {
@@ -248,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 */
@@ -258,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;
@@ -297,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.js

@@ -1,62 +1,34 @@
-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;
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 import { useTheme, breakpointKeys } from "@workday/canvas-kit-react/common";
 import { isWithinBreakpoint } from '../utils/isWithinBreakpoint';
 // Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
-var getSize = function (width, breakpoints) {
-    var ranges = {
+const getSize = (width, breakpoints) => {
+    const ranges = {
         'zero': [0, breakpoints.s],
         's': [breakpoints.s, breakpoints.m],
         'm': [breakpoints.m, breakpoints.l],
         'l': [breakpoints.l, breakpoints.xl],
         'xl': [breakpoints.xl]
     };
-    return breakpointKeys.find(function (size) { return isWithinBreakpoint.apply(void 0, __spreadArrays([width], ranges[size])); }) || 'zero';
+    return breakpointKeys.find((size) => isWithinBreakpoint(width, ...ranges[size])) || 'zero';
 };
 // Returns responsive style objects that are within the current CanvasBreakpoint size
 function getStyles(key, styles) {
-    var responsiveStyles = {};
-    var breakpointSize = breakpointKeys.indexOf(key);
-    var _loop_1 = function (i) {
-        var breakpointName = breakpointKeys[i];
+    const responsiveStyles = {};
+    const breakpointSize = breakpointKeys.indexOf(key);
+    for (let i = 0; i <= breakpointSize; i++) {
+        const breakpointName = breakpointKeys[i];
         // property is key of the style object
-        Object.keys(styles).forEach(function (property) {
+        Object.keys(styles).forEach((property) => {
             var _a, _b;
-            var _c = styles[property], zero = _c.zero, s = _c.s, m = _c.m, l = _c.l, xl = _c.xl, base = __rest(_c, ["zero", "s", "m", "l", "xl"]);
-            var currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
-            var previousBreakpointStyles = (_b = responsiveStyles[property]) !== null && _b !== void 0 ? _b : {};
-            responsiveStyles[property] = __assign(__assign(__assign({}, base), previousBreakpointStyles), currentBreakpointStyles);
+            const { zero, s, m, l, xl, ...base } = styles[property];
+            const currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
+            const previousBreakpointStyles = (_b = responsiveStyles[property]) !== null && _b !== void 0 ? _b : {};
+            responsiveStyles[property] = {
+                ...base,
+                ...previousBreakpointStyles,
+                ...currentBreakpointStyles
+            };
         });
-    };
-    for (var i = 0; i <= breakpointSize; i++) {
-        _loop_1(i);
     }
     return responsiveStyles;
 }
@@ -126,10 +98,9 @@ return (
 );
 ```
  */
-export function useResponsiveContainerStyles(styles, width, theme) {
-    if (theme === void 0) { theme = {}; }
-    var canvasTheme = useTheme(theme);
-    var breakpoints = canvasTheme.canvas.breakpoints.values;
-    var size = getSize(width, breakpoints);
+export function useResponsiveContainerStyles(styles, width, theme = {}) {
+    const canvasTheme = useTheme(theme);
+    const breakpoints = canvasTheme.canvas.breakpoints.values;
+    const size = getSize(width, breakpoints);
     return getStyles(size, styles);
 }

package/dist/es6/common/lib/styles/accessibleHide.js

@@ -2,7 +2,7 @@
  * A utility to hide content normal users while still making accessible to screenreaders
  * See https://a11y-101.com/development/skip-link
  */
-export var accessibleHide = {
+export const accessibleHide = {
     clip: 'rect(1px, 1px, 1px, 1px)',
     clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
     position: 'absolute',