@workday/canvas-kit-react 8.0.0 → 8.0.1

package/dist/commonjs/collection/lib/useGridModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useGridModel.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;IAGrB;;;;;;;;;OASG;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH;;;;;;;;;OASG;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASL,CAAC"}

package/dist/commonjs/collection/lib/useGridModel.js

@@ -0,0 +1,52 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridModel = void 0;
+var common_1 = require("@workday/canvas-kit-react/common");
+var useCursorListModel_1 = require("./useCursorListModel");
+var useListModel_1 = require("./useListModel");
+var _a = useListModel_1.useListModel.defaultConfig, columnCount = _a.columnCount, orientation = _a.orientation, defaultConfig = __rest(_a, ["columnCount", "orientation"]);
+exports.useGridModel = common_1.createModelHook({
+    defaultConfig: __assign(__assign({}, defaultConfig), { 
+        /**
+         * Controls the state changes when the user sends navigation events to the model. For example,
+         * when the user hits the "right" arrow, a behavior hook will determine directionality
+         * (left-to-right or right-to-left) and call the correct navigation method. In our example, a
+         * left-to-right language would send a `getNext`. The navigation manager may return the next
+         * item in the list. Different managers can be created for slightly different use cases. The
+         * default navigation manager will stop when the end of a row/column is detected. For example,
+         * `getNext` will return the same item the cursor was previously on if the cursor is on the last
+         * item of a row.
+         */
+        navigation: useCursorListModel_1.navigationManager }),
+    requiredConfig: __assign({ 
+        /**
+         * The number of columns represented in a grid
+         */
+        columnCount: 1 }, useListModel_1.useListModel.requiredConfig),
+    contextOverride: useListModel_1.useListModel.Context,
+})(function (config) {
+    var list = useListModel_1.useListModel(config);
+    return list;
+});

package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA6CzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}

package/dist/commonjs/collection/lib/useListItemRovingFocus.js

@@ -100,10 +100,12 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
             if (event.ctrlKey) {
                 for (var key in ctrlKeyMap) {
                     if (hasOwnKey(ctrlKeyMap, key)) {
-                        keyDownRef.current = true;
-                        (_a = events[ctrlKeyMap[key]]) === null || _a === void 0 ? void 0 : _a.call(events);
-                        event.preventDefault();
-                        return;
+                        if (event.key === key) {
+                            keyDownRef.current = true;
+                            (_a = events[ctrlKeyMap[key]]) === null || _a === void 0 ? void 0 : _a.call(events);
+                            event.preventDefault();
+                            return;
+                        }
                     }
                 }
             }

package/dist/commonjs/collection/lib/useListRenderItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Generic } from '@workday/canvas-kit-react/common';
 import { useBaseListModel } from './useBaseListModel';
-export declare function useListRenderItems<T>(model: ReturnType<typeof useBaseListModel>, children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode): {} | null | undefined;
+export declare function useListRenderItems<T>(model: ReturnType<typeof useBaseListModel>, children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode): React.ReactNode;
 //# sourceMappingURL=useListRenderItem.d.ts.map

package/dist/commonjs/collection/lib/useListRenderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListRenderItem.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListRenderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,yBAuBhF"}
+{"version":3,"file":"useListRenderItem.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListRenderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,GAC9E,KAAK,CAAC,SAAS,CAgCjB"}

package/dist/commonjs/collection/lib/useListRenderItem.js

@@ -11,19 +11,29 @@ function useListRenderItems(model, children) {
             ? model.state.UNSTABLE_virtual.virtualItems.map(function (virtual) {
                 var item = model.state.items[virtual.index];
                 var child = children(item.value, virtual.index);
-                return react_1.default.cloneElement(child, {
-                    // We call this `virtual` instead of `virtualItem` to avoid a React render warning
-                    // about capital letters in attributes. React thinks this will be applied to the DOM
-                    // element even though we remove it later...
-                    virtual: virtual,
-                    key: item.id,
-                    item: item,
-                });
+                if (react_1.default.isValidElement(child)) {
+                    return react_1.default.cloneElement(child, {
+                        // We call this `virtual` instead of `virtualItem` to avoid a React render warning
+                        // about capital letters in attributes. React thinks this will be applied to the DOM
+                        // element even though we remove it later...
+                        virtual: virtual,
+                        key: item.id,
+                        item: item,
+                    });
+                }
+                return child;
             })
             : model.state.items.map(function (item) {
-                return react_1.default.cloneElement(children(item.value, item.index), { key: item.id, item: item.value });
+                var child = children(item.value, item.index);
+                if (react_1.default.isValidElement(child)) {
+                    return react_1.default.cloneElement(child, {
+                        key: item.id,
+                        item: item.value,
+                    });
+                }
+                return child;
             })
-        : null;
-    return items || children;
+        : children;
+    return items;
 }
 exports.useListRenderItems = useListRenderItems;

package/dist/commonjs/color-picker/index.d.ts

@@ -1,6 +1,3 @@
-import ColorInput from './lib/ColorInput';
-import ColorPreview from './lib/ColorPreview';
-export { ColorInput, ColorPreview };
 export * from './lib/ColorInput';
 export * from './lib/ColorPreview';
 export * from './lib/parts/ColorSwatch';

package/dist/commonjs/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/dist/commonjs/color-picker/index.js

@@ -9,15 +9,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPreview = exports.ColorInput = void 0;
-var ColorInput_1 = __importDefault(require("./lib/ColorInput"));
-exports.ColorInput = ColorInput_1.default;
-var ColorPreview_1 = __importDefault(require("./lib/ColorPreview"));
-exports.ColorPreview = ColorPreview_1.default;
 __exportStar(require("./lib/ColorInput"), exports);
 __exportStar(require("./lib/ColorPreview"), exports);
 __exportStar(require("./lib/parts/ColorSwatch"), exports);

package/dist/commonjs/color-picker/lib/ColorInput.d.ts

@@ -36,5 +36,4 @@ export interface ColorInputProps extends Themeable, TextInputProps, GrowthBehavi
     onValidColorChange?: (color: string) => void;
 }
 export declare const ColorInput: import("../../common").ElementComponent<"input", ColorInputProps>;
-export default ColorInput;
 //# sourceMappingURL=ColorInput.d.ts.map

package/dist/commonjs/color-picker/lib/ColorInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,cAAc;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA+ED,eAAO,MAAM,UAAU,mEA0DrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,cAAc;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA8ED,eAAO,MAAM,UAAU,mEA0DrB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorInput.js

@@ -96,9 +96,8 @@ var PoundSignPrefix = common_1.styled('span')(__assign(__assign({ position: 'abs
 });
 var SwatchTile = common_1.styled(ColorSwatch_1.ColorSwatch)({
     position: 'absolute',
-    top: 0,
+    top: '10px',
     left: tokens_1.space.xxs,
-    marginTop: '10px',
     boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
     pointerEvents: 'none',
 });
@@ -128,4 +127,3 @@ exports.ColorInput = common_1.createComponent('input')({
             React.createElement(PoundSignPrefix, { "aria-hidden": true, disabled: disabled }, "#")));
     },
 });
-exports.default = exports.ColorInput;

package/dist/commonjs/color-picker/lib/ColorPreview.d.ts

@@ -10,5 +10,4 @@ export interface ColorPreviewProps extends TextInputProps {
     id?: string;
 }
 export declare const ColorPreview: import("../../common").ElementComponent<"input", ColorPreviewProps>;
-export default ColorPreview;
 //# sourceMappingURL=ColorPreview.d.ts.map

package/dist/commonjs/color-picker/lib/ColorPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPreview.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAIpE,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,eAAO,MAAM,YAAY,qEAavB,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColorPreview.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAIpE,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,eAAO,MAAM,YAAY,qEAavB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPreview.js

@@ -46,11 +46,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPreview = void 0;
 var React = __importStar(require("react"));
-var ColorInput_1 = __importDefault(require("./ColorInput"));
+var ColorInput_1 = require("./ColorInput");
 var common_1 = require("@workday/canvas-kit-react/common");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var StyledColorPreview = styled_1.default(ColorInput_1.default)({
+var StyledColorPreview = styled_1.default(ColorInput_1.ColorInput)({
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderColor: tokens_1.colors.frenchVanilla100,
     pointerEvents: 'none',
@@ -62,4 +62,3 @@ exports.ColorPreview = common_1.createComponent('input')({
         return (React.createElement(StyledColorPreview, __assign({ ref: ref, as: Element, id: id, value: value, readOnly: true, placeholder: "" }, elemProps)));
     },
 });
-exports.default = exports.ColorPreview;

package/dist/commonjs/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/commonjs/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/commonjs/common/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./lib/utils"), exports);
 __exportStar(require("./lib/CanvasProvider"), exports);
 __exportStar(require("./lib/InputProvider"), exports);
 __exportStar(require("./lib/EllipsisText"), exports);
+__exportStar(require("./lib/responsive/useResponsiveContainerStyles"), exports);

package/dist/commonjs/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(): number | true | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactFragment | null;
 }
 export default InputProvider;
 //# sourceMappingURL=InputProvider.d.ts.map

package/dist/commonjs/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/commonjs/common/lib/InputProvider.js

@@ -31,15 +31,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputProvider = exports.inputEventMap = exports.InputEventType = exports.InputType = void 0;
 var React = __importStar(require("react"));
-// @ts-ignore
-var element_closest_1 = __importDefault(require("element-closest"));
 var InputType;
 (function (InputType) {
     InputType["Initial"] = "initial";
@@ -181,8 +176,6 @@ var InputProvider = /** @class */ (function (_super) {
         return container;
     };
     InputProvider.prototype.componentDidMount = function () {
-        // For IE11 and under, we'll need to polyfill element.closest
-        element_closest_1.default(window);
         // Check for passive event listener support
         this.supportsPassive = supportsPassive();
         if (this.getContainer(this.props.container).closest('[data-whatinput]')) {

package/dist/commonjs/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/commonjs/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"}

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.js

@@ -0,0 +1,139 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveContainerStyles = void 0;
+var common_1 = require("@workday/canvas-kit-react/common");
+var isWithinBreakpoint_1 = require("../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 = {
+        'zero': [0, breakpoints.s],
+        's': [breakpoints.s, breakpoints.m],
+        'm': [breakpoints.m, breakpoints.l],
+        'l': [breakpoints.l, breakpoints.xl],
+        'xl': [breakpoints.xl]
+    };
+    return common_1.breakpointKeys.find(function (size) { return isWithinBreakpoint_1.isWithinBreakpoint.apply(void 0, __spreadArrays([width], ranges[size])); }) || 'zero';
+};
+// Returns responsive style objects that are within the current CanvasBreakpoint size
+function getStyles(key, styles) {
+    var responsiveStyles = {};
+    var breakpointSize = common_1.breakpointKeys.indexOf(key);
+    var _loop_1 = function (i) {
+        var breakpointName = common_1.breakpointKeys[i];
+        // property is key of the style object
+        Object.keys(styles).forEach(function (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);
+        });
+    };
+    for (var i = 0; i <= breakpointSize; i++) {
+        _loop_1(i);
+    }
+    return responsiveStyles;
+}
+/**
+ * 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>
+);
+```
+ */
+function useResponsiveContainerStyles(styles, width, theme) {
+    if (theme === void 0) { theme = {}; }
+    var canvasTheme = common_1.useTheme(theme);
+    var breakpoints = canvasTheme.canvas.breakpoints.values;
+    var size = getSize(width, breakpoints);
+    return getStyles(size, styles);
+}
+exports.useResponsiveContainerStyles = useResponsiveContainerStyles;

package/dist/commonjs/common/lib/styles/focusRing.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.focusRing = exports.memoizedFocusRing = void 0;
 var react_1 = require("@emotion/react");
-var tokens_1 = __importDefault(require("@workday/canvas-kit-react/tokens"));
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var index_1 = require("../theming/index");
 var memoize_1 = __importDefault(require("lodash/memoize"));
 function calculateFocusRing(_a) {
@@ -68,7 +68,7 @@ exports.memoizedFocusRing = memoize_1.default(calculateFocusRing, function () {
  */
 function focusRing(options, theme) {
     if (options === void 0) { options = {}; }
-    var _a = options.width, width = _a === void 0 ? 2 : _a, _b = options.separation, separation = _b === void 0 ? 0 : _b, _c = options.animate, animate = _c === void 0 ? true : _c, _d = options.innerColor, innerColor = _d === void 0 ? tokens_1.default.colors.frenchVanilla100 : _d, _e = options.outerColor, outerColor = _e === void 0 ? theme && theme.canvas
+    var _a = options.width, width = _a === void 0 ? 2 : _a, _b = options.separation, separation = _b === void 0 ? 0 : _b, _c = options.animate, animate = _c === void 0 ? true : _c, _d = options.innerColor, innerColor = _d === void 0 ? tokens_1.canvas.colors.frenchVanilla100 : _d, _e = options.outerColor, outerColor = _e === void 0 ? theme && theme.canvas
         ? theme.canvas.palette.common.focusOutline
         : index_1.defaultCanvasTheme.palette.common.focusOutline : _e, _f = options.memoize, memoize = _f === void 0 ? true : _f, inset = options.inset;
     var args = {

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 } from './styled';
+export { default as styled, StyleRewriteFn } from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useIsRTL';

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,EAAC,MAAM,UAAU,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,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,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

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

@@ -1,4 +1,6 @@
 import { CreateStyled } from '@emotion/styled';
+import { CSSProperties } from '@workday/canvas-kit-react/tokens';
+export declare type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 declare const _default: CreateStyled;
 export default _default;
 //# sourceMappingURL=styled.d.ts.map

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;;AAkCjG,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;AAS/D,oBAAY,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE,aAAa,KAAK,aAAa,GAAG,SAAS,CAAC;;AA2BhF,wBAAsC"}

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var styled_1 = __importDefault(require("@emotion/styled"));
 var index_1 = require("./index");
 var rtl_css_js_1 = __importDefault(require("rtl-css-js"));
-var StaticStates_1 = require("../utils/StaticStates");
 var noop = function (styles) { return styles; };
 function styled(node) {
     return function () {
@@ -18,7 +17,7 @@ function styled(node) {
             props.theme = index_1.useTheme(props.theme);
             var direction = props.theme.canvas.direction;
             var maybeFlip = direction === index_1.ContentDirection.RTL ? rtl_css_js_1.default : noop;
-            var maybeConvert = props.theme._staticStates ? StaticStates_1.convertToStaticStates : noop;
+            var maybeConvert = props.theme._styleRewriteFn || noop;
             try {
                 if (typeof interpolation === 'function') {
                     return maybeFlip(maybeConvert(interpolation(props)));