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

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

@@ -0,0 +1,15 @@
+/**
+ * For custom themes that do not overwrite every default.
+ */
+export declare type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+/**
+ * The functions gets a new object proxy. This is used for theme to ensure regardless of a partial theme object
+ * there will be a fallback theme object so that properties aren't undefined regardless of the `target` object.
+ * This function will also handle nested properties.
+ * @param target A partial object with up to the same shape as the `fallback` object
+ * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
+ */
+export declare function getObjectProxy<T extends {}>(target: RecursivePartial<T> | undefined, fallback: T): T;
+//# sourceMappingURL=getObjectProxy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getObjectProxy.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getObjectProxy.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,gBAAgB,CAAC,CAAC,IAAI;KAC/B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,EAAE,EACzC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,EACvC,QAAQ,EAAE,CAAC,GACV,CAAC,CAmBH"}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getObjectProxy = void 0;
+/**
+ * The functions gets a new object proxy. This is used for theme to ensure regardless of a partial theme object
+ * there will be a fallback theme object so that properties aren't undefined regardless of the `target` object.
+ * This function will also handle nested properties.
+ * @param target A partial object with up to the same shape as the `fallback` object
+ * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
+ */
+function getObjectProxy(target, fallback) {
+    if (target) {
+        return new Proxy(target, {
+            get(target, prop, receiver) {
+                if (typeof fallback[prop] === 'object') {
+                    return getObjectProxy(target[prop], fallback[prop]);
+                }
+                const targetProp = target[prop];
+                if (targetProp !== undefined) {
+                    return targetProp;
+                }
+                return Reflect.get(fallback, prop, receiver);
+            },
+            ownKeys() {
+                return Reflect.ownKeys(fallback);
+            },
+        });
+    }
+    return fallback;
+}
+exports.getObjectProxy = getObjectProxy;

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

@@ -1,8 +1,10 @@
 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 './useThemedRing';
 export * from './useIsRTL';
+export * from './getObjectProxy';
 //# sourceMappingURL=index.d.ts.map

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,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

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

@@ -22,4 +22,6 @@ var styled_1 = require("./styled");
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return __importDefault(styled_1).default; } });
 __exportStar(require("./theme"), exports);
 __exportStar(require("./useTheme"), exports);
+__exportStar(require("./useThemedRing"), exports);
 __exportStar(require("./useIsRTL"), exports);
+__exportStar(require("./getObjectProxy"), exports);

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

@@ -3,22 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 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; };
+const styled_1 = __importDefault(require("@emotion/styled"));
+const index_1 = require("./index");
+const rtl_css_js_1 = __importDefault(require("rtl-css-js"));
+const noop = (styles) => styles;
 function styled(node) {
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var newArgs = args.map(function (interpolation) { return function (props) {
+    return (...args) => {
+        const newArgs = args.map(interpolation => (props) => {
             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;
+            const direction = props.theme.canvas.direction;
+            const maybeFlip = direction === index_1.ContentDirection.RTL ? rtl_css_js_1.default : noop;
+            const maybeConvert = props.theme._styleRewriteFn || noop;
             try {
                 if (typeof interpolation === 'function') {
                     return maybeFlip(maybeConvert(interpolation(props)));
@@ -28,7 +23,7 @@ function styled(node) {
             catch (e) {
                 return maybeConvert(interpolation);
             }
-        }; });
+        });
         return styled_1.default(node)(newArgs);
     };
 }

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

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultCanvasTheme = void 0;
-var canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
-var types_1 = require("./types");
-var breakpoints_1 = require("./breakpoints");
+const canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
+const types_1 = require("./types");
+const breakpoints_1 = require("./breakpoints");
 exports.defaultCanvasTheme = {
     palette: {
         primary: {

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

@@ -20,9 +20,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsRTL = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("@emotion/react");
-var types_1 = require("./types");
+const React = __importStar(require("react"));
+const react_1 = require("@emotion/react");
+const types_1 = require("./types");
 function useDefaultTheme(theme, config, fn) {
     return theme || fn(config);
 }
@@ -32,8 +32,8 @@ function useDefaultTheme(theme, config, fn) {
  * @example
  * const isRTL = useIsRTL();
  */
-var useIsRTL = function (partialTheme) {
-    var theme = useDefaultTheme(partialTheme, react_1.ThemeContext, React.useContext);
+const useIsRTL = (partialTheme) => {
+    const theme = useDefaultTheme(partialTheme, react_1.ThemeContext, React.useContext);
     return (theme && theme.canvas && theme.canvas.direction) === types_1.ContentDirection.RTL;
 };
 exports.useIsRTL = useIsRTL;

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

@@ -1,11 +1,47 @@
 import { EmotionCanvasTheme, PartialEmotionCanvasTheme } from './index';
 /**
- * Hook function to get the correct theme object.
- * @param {Object=} theme - The theme object returned from the emotion ThemeContext
- * (through ThemeProvider). The Canvas Kit theme is namespaced within this variable under the `canvas` key.
+ * Function to get the correct theme object for `styled` and class components
+ * or to be used outside component.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
  *
- * NOTE: If you are using a class component, you MUST pass the theme.
- * If not passed, the function will try to pull the theme from ThemeContext.
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * The passed partial theme object will be merged with the default Canvas theme
+ * (using memoized createCanvasTheme()) to establish any missing fields that have
+ * not been defined by the consumer's theme object.
+ *
+ * If theme is not passed, the function will try to retrieve it from the window object.
+ * If window theme is not found, it will return the default Canvas theme.
+ *
+ * @example
+ * import {getTheme} from '@workday/canvas-kit-react/common';
+ *
+ * const theme = getTheme();
+ * const {up, down} = theme.canvas.breakpoints;
+ * const small = down('m'); // Returns '@media (max-width: 768px)'
+ * const medium = up('m'); // Returns '@media (min-width: 768px)'
+ *
+ * const styles = {
+ *  [small]: {
+ *    margin: space.m
+ *  },
+ *  [medium]: {
+ *    margin: space.l
+ *  }
+ * }
+ */
+export declare function getTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme;
+/**
+ * Hook function to get the correct theme object for functional components.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
+ *
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * NOTE: If theme is not passed, the function will try to pull the theme from ThemeContext.
  * If that does not work, it will try to retrieve it from the window object.
  * As a last resort, it will return the default Canvas theme.
  *
@@ -16,6 +52,14 @@ import { EmotionCanvasTheme, PartialEmotionCanvasTheme } from './index';
  * Providing the default theme here is currently a work around for when no
  * ThemeProvider or context exists.
  * Tracked on https://github.com/emotion-js/emotion/issues/1193.
+ *
+ * @example
+ * export const ErrorMessage = () => {
+ *  const theme = useTheme();
+ *  return (
+ *    <Subtext size="large" color={theme.canvas.palette.error.main}>
+ *  );
+ * }
  */
 export declare function useTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme;
 //# sourceMappingURL=useTheme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAOjB;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAqB9E"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useTheme.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAOjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAY9E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAkB9E"}

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

@@ -1,31 +1,68 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// refactor for v5
+/// <reference types="@types/node" />
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = void 0;
-var get_1 = __importDefault(require("lodash/get"));
-var react_1 = require("@emotion/react");
-var index_1 = require("./index");
-var getFilledTheme = function (theme) { return (__assign(__assign({}, theme), { canvas: index_1.createCanvasTheme(theme.canvas) })); };
+exports.useTheme = exports.getTheme = void 0;
+const react_1 = require("@emotion/react");
+const index_1 = require("./index");
+const getFilledTheme = (theme) => ({
+    ...theme,
+    canvas: index_1.createCanvasTheme(theme.canvas),
+});
+/**
+ * Function to get the correct theme object for `styled` and class components
+ * or to be used outside component.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
+ *
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * The passed partial theme object will be merged with the default Canvas theme
+ * (using memoized createCanvasTheme()) to establish any missing fields that have
+ * not been defined by the consumer's theme object.
+ *
+ * If theme is not passed, the function will try to retrieve it from the window object.
+ * If window theme is not found, it will return the default Canvas theme.
+ *
+ * @example
+ * import {getTheme} from '@workday/canvas-kit-react/common';
+ *
+ * const theme = getTheme();
+ * const {up, down} = theme.canvas.breakpoints;
+ * const small = down('m'); // Returns '@media (max-width: 768px)'
+ * const medium = up('m'); // Returns '@media (min-width: 768px)'
+ *
+ * const styles = {
+ *  [small]: {
+ *    margin: space.m
+ *  },
+ *  [medium]: {
+ *    margin: space.l
+ *  }
+ * }
+ */
+function getTheme(theme) {
+    var _a, _b, _c;
+    if (theme === null || theme === void 0 ? void 0 : theme.canvas) {
+        return getFilledTheme(theme);
+    }
+    const windowTheme = typeof window !== 'undefined' && ((_c = (_b = (_a = window) === null || _a === void 0 ? void 0 : _a.workday) === null || _b === void 0 ? void 0 : _b.canvas) === null || _c === void 0 ? void 0 : _c.theme);
+    if (windowTheme) {
+        return getFilledTheme({ canvas: windowTheme });
+    }
+    return { canvas: index_1.defaultCanvasTheme };
+}
+exports.getTheme = getTheme;
 /**
- * Hook function to get the correct theme object.
- * @param {Object=} theme - The theme object returned from the emotion ThemeContext
- * (through ThemeProvider). The Canvas Kit theme is namespaced within this variable under the `canvas` key.
+ * Hook function to get the correct theme object for functional components.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
  *
- * NOTE: If you are using a class component, you MUST pass the theme.
- * If not passed, the function will try to pull the theme from ThemeContext.
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * NOTE: If theme is not passed, the function will try to pull the theme from ThemeContext.
  * If that does not work, it will try to retrieve it from the window object.
  * As a last resort, it will return the default Canvas theme.
  *
@@ -36,25 +73,30 @@ var getFilledTheme = function (theme) { return (__assign(__assign({}, theme), {
  * Providing the default theme here is currently a work around for when no
  * ThemeProvider or context exists.
  * Tracked on https://github.com/emotion-js/emotion/issues/1193.
+ *
+ * @example
+ * export const ErrorMessage = () => {
+ *  const theme = useTheme();
+ *  return (
+ *    <Subtext size="large" color={theme.canvas.palette.error.main}>
+ *  );
+ * }
  */
 function useTheme(theme) {
-    if (theme && theme.canvas) {
-        return getFilledTheme(theme);
-    }
-    try {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        var contextTheme = react_1.useTheme();
-        if (contextTheme && contextTheme.canvas) {
-            return getFilledTheme(contextTheme);
+    if (!theme) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const contextTheme = react_1.useTheme();
+            if (contextTheme === null || contextTheme === void 0 ? void 0 : contextTheme.canvas) {
+                return getFilledTheme(contextTheme);
+            }
+        }
+        catch (e) {
+            if (process && process.env.NODE_ENV === 'development') {
+                console.warn('useTheme: Context not supported or invalid. Please consider using `getTheme` function instead for `styled` or class components.');
+            }
         }
     }
-    catch (e) {
-        // Context not supported or invalid (probably called from within a class component)
-    }
-    var windowTheme = typeof window !== 'undefined' && get_1.default(window, 'window.workday.canvas.theme');
-    if (windowTheme) {
-        return getFilledTheme({ canvas: windowTheme });
-    }
-    return { canvas: index_1.defaultCanvasTheme };
+    return getTheme(theme);
 }
 exports.useTheme = useTheme;

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

@@ -0,0 +1,43 @@
+import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+import { CSSProperties } from '@workday/canvas-kit-react/tokens';
+declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface ContrastColors {
+    outer?: string;
+    inner?: string;
+}
+export declare function getPaletteColorsForFocusRing(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
+/**
+ * This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.
+ * It supports `error`, `alert`, and `success` states. It will try and use the corresponding
+ * `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
+ * which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
+ * ring when the input is focused. Note: You should not rely on these colors alone to differentiate
+ * alerts, but use them in combination with icons or hint text.
+ * ```tsx
+ * // Add here jsx pragma to use css
+ * import {jsx} from '@emotion/core';
+ * import React from 'react';
+ * import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+ * import {useThemedRing} from '@workday/canvas-kit-react/common';
+ *
+ * export const MyInput = ({handleChange}) => {
+ *  const [value, setValue] = React.useState('invalid@email');
+ *  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *    setValue(event.target.value);
+ *  };
+ *
+ *  const alertStyles = useThemedRing('alert');
+ *
+ *  return (
+ *    <TextInput>
+ *     <TextInput.Label>Email</TextInput.Label>
+ *      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+ *      <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
+ *    </TextInput>
+ *  );
+ * };
+ *```
+ */
+export declare const useThemedRing: (type: paletteSelection) => CSSProperties;
+export {};
+//# sourceMappingURL=useThemedRing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAClG,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAIlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,SAAU,gBAAgB,KAAG,aAyBtD,CAAC"}

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

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemedRing = exports.getPaletteColorsForFocusRing = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const chroma_js_1 = __importDefault(require("chroma-js"));
+const isAccessible = (foreground, background = tokens_1.colors.frenchVanilla100) => {
+    return chroma_js_1.default.contrast(foreground, background) >= 3;
+};
+const getPaletteColorsFromTheme = (palette, fallbackColors) => {
+    return {
+        outer: isAccessible(palette.main)
+            ? palette.main
+            : isAccessible(palette.darkest)
+                ? palette.darkest
+                : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
+        inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
+    };
+};
+function getPaletteColorsForFocusRing(type, theme) {
+    const palette = theme.canvas.palette[type];
+    switch (type) {
+        case 'error': {
+            return getPaletteColorsFromTheme(palette, { outer: tokens_1.inputColors.error.border });
+        }
+        case 'alert': {
+            return getPaletteColorsFromTheme(palette, { outer: tokens_1.colors.cantaloupe600 });
+        }
+        case 'success': {
+            return getPaletteColorsFromTheme(palette, {
+                outer: tokens_1.colors.greenApple600,
+                // The theme default for success.main is set to the darkest GreenApple
+                // For our default ring, we need to override it so the inner ring is a bit lighter
+                inner: palette.main === tokens_1.colors.greenApple600 ? tokens_1.statusColors.success : palette.main,
+            });
+        }
+        default: {
+            return getPaletteColorsFromTheme(palette);
+        }
+    }
+}
+exports.getPaletteColorsForFocusRing = getPaletteColorsForFocusRing;
+/**
+ * This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.
+ * It supports `error`, `alert`, and `success` states. It will try and use the corresponding
+ * `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
+ * which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
+ * ring when the input is focused. Note: You should not rely on these colors alone to differentiate
+ * alerts, but use them in combination with icons or hint text.
+ * ```tsx
+ * // Add here jsx pragma to use css
+ * import {jsx} from '@emotion/core';
+ * import React from 'react';
+ * import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+ * import {useThemedRing} from '@workday/canvas-kit-react/common';
+ *
+ * export const MyInput = ({handleChange}) => {
+ *  const [value, setValue] = React.useState('invalid@email');
+ *  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *    setValue(event.target.value);
+ *  };
+ *
+ *  const alertStyles = useThemedRing('alert');
+ *
+ *  return (
+ *    <TextInput>
+ *     <TextInput.Label>Email</TextInput.Label>
+ *      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+ *      <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
+ *    </TextInput>
+ *  );
+ * };
+ *```
+ */
+const useThemedRing = (type) => {
+    const theme = common_1.useTheme();
+    const paletteColors = getPaletteColorsForFocusRing(type, theme);
+    if (!((paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.outer) || (paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.inner))) {
+        return {};
+    }
+    const errorBoxShadow = `inset 0 0 0 ${paletteColors.outer === paletteColors.inner ? 1 : 2}px ${paletteColors.inner}`;
+    return {
+        borderColor: paletteColors.outer,
+        transition: '100ms box-shadow',
+        boxShadow: errorBoxShadow,
+        '&:hover, &:disabled': {
+            borderColor: paletteColors.outer,
+        },
+        '&:focus:not([disabled])': {
+            borderColor: paletteColors.outer,
+            boxShadow: `${errorBoxShadow},
+        0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+        0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder}`,
+        },
+    };
+};
+exports.useThemedRing = useThemedRing;

package/dist/commonjs/common/lib/utils/changeFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,SAmB3C,CAAC"}
+{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,SAkB3C,CAAC"}

package/dist/commonjs/common/lib/utils/changeFocus.js

@@ -5,21 +5,27 @@ exports.changeFocus = void 0;
  * Programmatically change focus in a way that causes a focus ring around the new element.
  * @param element Element that should be focused
  */
-var changeFocus = function (element) {
+const changeFocus = (element) => {
     // Normally the browser will ignore calls to `focus` on an element that already has focus, but we
     // don't want to accidentally show the focus ring in this case, so we'll detect and bail early.
     // We'll also bail if there is no element
     if (document.activeElement === element || !element) {
         return;
     }
-    if (element instanceof HTMLElement) {
+    if (hasCallableProperty(element, 'focus')) {
         // Dispatch an unidentified keyboard event for an input provider prior to a focus change so that
         // the ring will appear.
-        if (typeof KeyboardEvent === 'function') {
-            var event_1 = new KeyboardEvent('keydown', { bubbles: true, key: 'Unidentified' });
-            element.dispatchEvent(event_1);
+        if (typeof KeyboardEvent === 'function' && hasCallableProperty(element, 'dispatchEvent')) {
+            const event = new KeyboardEvent('keydown', { bubbles: true, key: 'Unidentified' });
+            element.dispatchEvent(event);
         }
         element.focus();
     }
 };
 exports.changeFocus = changeFocus;
+function hasCallableProperty(input, method) {
+    return (!!input &&
+        typeof input === 'object' &&
+        method in input &&
+        typeof input[method] === 'function');
+}

package/dist/commonjs/common/lib/utils/colorUtils.d.ts

@@ -1,3 +1,10 @@
+import { CanvasColor } from '@workday/canvas-kit-react/tokens';
+/**
+ * The function takes in a color string or an enum value of CanvasColor and returns its hex value color.
+ * @param value a string or an enum value of CanvasColor
+ * @returns the hex value color
+ */
+export declare function getColor(value?: CanvasColor | string): string | undefined;
 export declare const expandHex: (hex: string) => string;
 /**
  *

package/dist/commonjs/common/lib/utils/colorUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/colorUtils.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,QAAS,MAAM,WAKpC,CAAC;AAWF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAClB,MAAM,wFAoBnB,CAAC"}
+{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/colorUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAS,MAAM,kCAAkC,CAAC;AAGrE;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,sBAKpD;AAGD,eAAO,MAAM,SAAS,QAAS,MAAM,WAKpC,CAAC;AAWF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAClB,MAAM,wFAqBnB,CAAC"}