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

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,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveContainerStyles = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const 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
+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 common_1.breakpointKeys.find((size) => isWithinBreakpoint_1.isWithinBreakpoint(width, ...ranges[size])) || 'zero';
+};
+// Returns responsive style objects that are within the current CanvasBreakpoint size
+function getStyles(key, styles) {
+    const responsiveStyles = {};
+    const breakpointSize = common_1.breakpointKeys.indexOf(key);
+    for (let i = 0; i <= breakpointSize; i++) {
+        const breakpointName = common_1.breakpointKeys[i];
+        // property is key of the style object
+        Object.keys(styles).forEach((property) => {
+            var _a, _b;
+            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
+            };
+        });
+    }
+    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 = {}) {
+    const canvasTheme = common_1.useTheme(theme);
+    const breakpoints = canvasTheme.canvas.breakpoints.values;
+    const size = getSize(width, breakpoints);
+    return getStyles(size, styles);
+}
+exports.useResponsiveContainerStyles = useResponsiveContainerStyles;

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

@@ -4,17 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorRing = exports.getErrorColors = void 0;
-var types_1 = require("../types");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var chroma_js_1 = __importDefault(require("chroma-js"));
-var isAccessible = function (foreground, background) {
-    if (background === void 0) { background = tokens_1.colors.frenchVanilla100; }
+const types_1 = require("../types");
+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;
 };
 function getErrorColors(error, theme) {
     if (error === types_1.ErrorType.Error) {
         if (theme) {
-            var palette = theme.canvas.palette.error;
+            const palette = theme.canvas.palette.error;
             return {
                 outer: isAccessible(palette.main) ? palette.main : palette.darkest,
                 inner: palette.main,
@@ -29,7 +28,7 @@ function getErrorColors(error, theme) {
     }
     else if (error === types_1.ErrorType.Alert) {
         if (theme) {
-            var palette = theme.canvas.palette.alert;
+            const palette = theme.canvas.palette.alert;
             return {
                 outer: isAccessible(palette.main) ? palette.main : palette.darkest,
                 inner: palette.main,
@@ -51,8 +50,8 @@ function errorRing(error, theme) {
     if (error !== types_1.ErrorType.Error && error !== types_1.ErrorType.Alert) {
         return {};
     }
-    var errorColors = getErrorColors(error, theme);
-    var errorBoxShadow = "inset 0 0 0 " + (errorColors.outer === errorColors.inner ? 1 : 2) + "px " + errorColors.inner;
+    const errorColors = getErrorColors(error, theme);
+    const errorBoxShadow = `inset 0 0 0 ${errorColors.outer === errorColors.inner ? 1 : 2}px ${errorColors.inner}`;
     return {
         borderColor: errorColors.outer,
         transition: '100ms box-shadow',
@@ -62,7 +61,9 @@ function errorRing(error, theme) {
         },
         '&:focus:not([disabled])': {
             borderColor: errorColors.outer,
-            boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder),
+            boxShadow: `${errorBoxShadow},
+        0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+        0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder}`,
         },
     };
 }

package/dist/commonjs/common/lib/styles/focusRing.d.ts

@@ -12,10 +12,7 @@ interface FocusRingOptions {
     inset?: 'inner' | 'outer';
     innerColor?: string;
     outerColor?: string;
-    memoize?: boolean;
 }
-declare function calculateFocusRing({ width, separation, animate, inset, innerColor, outerColor, }: Required<Omit<FocusRingOptions, 'memoize' | 'inset'>> & Pick<FocusRingOptions, 'inset'>): CSSObject;
-export declare const memoizedFocusRing: typeof calculateFocusRing & import("lodash").MemoizedFunction;
 /**
  * A utility to create a canvas style focus ring around your widget.
  * By default, this mixin will create a 2px focus ring tightly wrapped

package/dist/commonjs/common/lib/styles/focusRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAK3D,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,OAAO,EACP,KAAK,EACL,UAAU,EACV,UAAU,GACX,EAAE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC,GACtD,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG,SAAS,CAiC5C;AAED,eAAO,MAAM,iBAAiB,+DAAiE,CAAC;AAEhG;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CA2BlF"}
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI3D,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAsBlF"}

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

@@ -1,49 +1,37 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": 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 index_1 = require("../theming/index");
-var memoize_1 = __importDefault(require("lodash/memoize"));
-function calculateFocusRing(_a) {
-    var width = _a.width, separation = _a.separation, animate = _a.animate, inset = _a.inset, innerColor = _a.innerColor, outerColor = _a.outerColor;
-    var boxShadow, innerWidth, outerWidth;
+exports.focusRing = void 0;
+const react_1 = require("@emotion/react");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const index_1 = require("../theming/index");
+function calculateFocusRing({ width, separation, animate, inset, innerColor, outerColor, }) {
+    let boxShadow, innerWidth, outerWidth;
     switch (inset) {
         case 'outer':
             innerWidth = width + separation;
             outerWidth = separation;
-            boxShadow = "inset 0 0 0 " + outerWidth + "px " + outerColor + ", inset 0 0 0 " + innerWidth + "px " + innerColor;
+            boxShadow = `inset 0 0 0 ${outerWidth}px ${outerColor}, inset 0 0 0 ${innerWidth}px ${innerColor}`;
             break;
         case 'inner':
             innerWidth = separation;
             outerWidth = width;
-            boxShadow = "inset 0 0 0 " + innerWidth + "px " + innerColor + ", 0 0 0 " + outerWidth + "px " + outerColor;
+            boxShadow = `inset 0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
             break;
         default:
             innerWidth = separation;
             outerWidth = width + separation;
-            boxShadow = "0 0 0 " + innerWidth + "px " + innerColor + ", 0 0 0 " + outerWidth + "px " + outerColor;
+            boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
             break;
     }
     if (animate) {
-        var fadeIn = react_1.keyframes({
-            '0%': { boxShadow: boxShadow },
-            '100%': { boxShadow: boxShadow },
+        const fadeIn = react_1.keyframes({
+            '0%': { boxShadow },
+            '100%': { boxShadow },
         });
-        return { animation: fadeIn + " 100ms", boxShadow: boxShadow };
+        return { animation: `${fadeIn} 100ms`, boxShadow };
     }
-    return { boxShadow: boxShadow };
+    return { boxShadow };
 }
-exports.memoizedFocusRing = memoize_1.default(calculateFocusRing, function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return JSON.stringify(args);
-});
 /**
  * A utility to create a canvas style focus ring around your widget.
  * By default, this mixin will create a 2px focus ring tightly wrapped
@@ -66,22 +54,18 @@ exports.memoizedFocusRing = memoize_1.default(calculateFocusRing, function () {
  *
  * @returns {CSSObject} the css object for the focus ring style
  */
-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
+function focusRing(options = {}, theme) {
+    const { width = 2, separation = 0, animate = true, innerColor = tokens_1.canvas.colors.frenchVanilla100, outerColor = 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 = {
+        : index_1.defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
+    const args = {
         width: width,
         separation: separation,
         innerColor: innerColor,
         outerColor: outerColor,
-        animate: animate,
-        inset: inset,
+        animate,
+        inset,
     };
-    if (memoize) {
-        return exports.memoizedFocusRing(args);
-    }
     return calculateFocusRing(args);
 }
 exports.focusRing = focusRing;

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

@@ -1,18 +1,19 @@
 "use strict";
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mouseFocusBehavior = exports.hideMouseFocus = void 0;
 /**
  * A utility to hide the default canvas style focus ring when using mouse input.
  * Requires wrapping your components in an InputProvider component.
  */
-exports.hideMouseFocus = (_a = {},
-    _a["[data-whatinput=\"mouse\"] &:focus,\n    [data-whatinput=\"touch\"] &:focus,\n    [data-whatinput=\"pointer\"] &:focus"] = {
+exports.hideMouseFocus = {
+    [`[data-whatinput="mouse"] &:focus,
+    [data-whatinput="touch"] &:focus,
+    [data-whatinput="pointer"] &:focus`]: {
         outline: 'none',
         boxShadow: 'none',
         animation: 'none',
     },
-    _a);
+};
 /*
  * A utility that simplifies focus selectors since you can't use nested syntax for some reason. Example:
  * [`[data-whatinput="mouse"],
@@ -23,11 +24,14 @@ exports.hideMouseFocus = (_a = {},
        }
    },
  */
-var mouseFocusBehavior = function (selectors) {
-    var output = {};
-    Object.keys(selectors).map(function (selector, index) {
-        selector.split(',').forEach(function (selectorPart) {
-            var prefixedSelector = "\n        [data-whatinput=\"mouse\"] " + selectorPart + ",\n        [data-whatinput=\"touch\"] " + selectorPart + ",\n        [data-whatinput=\"pointer\"] " + selectorPart;
+const mouseFocusBehavior = (selectors) => {
+    const output = {};
+    Object.keys(selectors).map((selector, index) => {
+        selector.split(',').forEach(selectorPart => {
+            const prefixedSelector = `
+        [data-whatinput="mouse"] ${selectorPart},
+        [data-whatinput="touch"] ${selectorPart},
+        [data-whatinput="pointer"] ${selectorPart}`;
             output[prefixedSelector] = selectors[selector];
         });
     });

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

@@ -40,7 +40,7 @@ exports.breakpoints = {
     l: 1024,
     xl: 1440,
 };
-var step = 0.5;
+const step = 0.5;
 /**
  * ### Up
  *
@@ -65,8 +65,8 @@ var step = 0.5;
  * ```
  */
 function up(key) {
-    var value = typeof exports.breakpoints[key] === 'number' ? exports.breakpoints[key] : key;
-    return "@media (min-width: " + value + "px)";
+    const value = typeof exports.breakpoints[key] === 'number' ? exports.breakpoints[key] : key;
+    return `@media (min-width: ${value}px)`;
 }
 exports.up = up;
 /**
@@ -115,14 +115,14 @@ exports.up = up;
  * ```
  */
 function down(endKey) {
-    var endIndex = exports.breakpointKeys.indexOf(endKey) + 1;
-    var upperbound = exports.breakpoints[exports.breakpointKeys[endIndex]];
+    const endIndex = exports.breakpointKeys.indexOf(endKey) + 1;
+    const upperbound = exports.breakpoints[exports.breakpointKeys[endIndex]];
     if (endIndex === exports.breakpointKeys.length) {
         // xl down applies to all sizes
         return up(BreakpointKey.zero);
     }
-    var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : 0;
-    return "@media (max-width: " + (value - step) + "px)";
+    const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : 0;
+    return `@media (max-width: ${value - step}px)`;
 }
 exports.down = down;
 /**
@@ -172,12 +172,12 @@ exports.down = down;
  * ```
  */
 function between(start, end) {
-    var endIndex = exports.breakpointKeys.indexOf(end) + 1;
+    const endIndex = exports.breakpointKeys.indexOf(end) + 1;
     if (endIndex === exports.breakpointKeys.length) {
         return up(start);
     }
-    return ("@media (min-width: " + exports.breakpoints[start] + "px) and " +
-        ("(max-width: " + (exports.breakpoints[exports.breakpointKeys[endIndex]] - step) + "px)"));
+    return (`@media (min-width: ${exports.breakpoints[start]}px) and ` +
+        `(max-width: ${exports.breakpoints[exports.breakpointKeys[endIndex]] - step}px)`);
 }
 exports.between = between;
 /**

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

@@ -1,10 +1,11 @@
 import { CanvasTheme, PartialCanvasTheme } from './types';
-export declare enum ColorDirection {
-    Darken = 0,
-    Brighten = 1
-}
-export declare function shiftColor(hexColor: string, direction: ColorDirection): string;
+export declare const shiftColor: (hexColor: string, amount?: any) => string;
 declare function calculateCanvasTheme(partialTheme: PartialCanvasTheme): CanvasTheme;
-export declare const createCanvasTheme: typeof calculateCanvasTheme & import("lodash").MemoizedFunction;
+/**
+ * Creates a full {@link CanvasTheme} from any partial theme by deeply merging with the
+ * `defaultCanvasTheme` object. The function is memoized, but it is best to run this function
+ * only once and save the result.
+ */
+export declare const createCanvasTheme: typeof calculateCanvasTheme;
 export {};
 //# sourceMappingURL=createCanvasTheme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,WAAW,EACX,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAIjB,oBAAY,cAAc;IACxB,MAAM,IAAA;IACN,QAAQ,IAAA;CACT;AAED,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,UA4BrE;AAuCD,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED,eAAO,MAAM,iBAAiB,iEAAmE,CAAC"}
+{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EACX,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAQjB,eAAO,MAAM,UAAU,aACV,MAAM,yBA+BlB,CAAC;AA+BF,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,6BAAmE,CAAC"}

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

@@ -1,106 +1,81 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCanvasTheme = exports.shiftColor = exports.ColorDirection = void 0;
-var chroma_js_1 = __importDefault(require("chroma-js"));
-var merge_1 = __importDefault(require("lodash/merge"));
-var memoize_1 = __importDefault(require("lodash/memoize"));
-var findKey_1 = __importDefault(require("lodash/findKey"));
-var canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
-var theme_1 = require("./theme");
-var types_1 = require("./types");
-var utils_1 = require("../utils");
-var ColorDirection;
-(function (ColorDirection) {
-    ColorDirection[ColorDirection["Darken"] = 0] = "Darken";
-    ColorDirection[ColorDirection["Brighten"] = 1] = "Brighten";
-})(ColorDirection = exports.ColorDirection || (exports.ColorDirection = {}));
-function shiftColor(hexColor, direction) {
-    var canvasColor = findKey_1.default(canvas_colors_web_1.default, function (color) { return color === hexColor; });
-    var darken = direction === ColorDirection.Darken;
+exports.createCanvasTheme = exports.shiftColor = void 0;
+const chroma_js_1 = __importDefault(require("chroma-js"));
+const canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
+const theme_1 = require("./theme");
+const types_1 = require("./types");
+const utils_1 = require("../utils");
+// Should these be exported?
+const deepMerge_1 = require("../utils/deepMerge");
+const memoize_1 = require("../utils/memoize");
+exports.shiftColor = memoize_1.memoize((hexColor, amount = 100) => {
+    const canvasColor = Object.keys(canvas_colors_web_1.default).find(color => canvas_colors_web_1.default[color] === hexColor);
     if (canvasColor) {
-        var colorRegex = /([a-zAz]*)(\d{3})/g;
-        var match = colorRegex.exec(canvasColor);
+        const colorRegex = /([a-zAz]*)(\d{3})/g;
+        const match = colorRegex.exec(canvasColor);
         if (match) {
-            var baseColor = match[1];
-            var shadeNumber = parseInt(match[2], 10);
-            var newShade = darken ? shadeNumber + 100 : shadeNumber - 100;
+            const baseColor = match[1];
+            const shadeNumber = parseInt(match[2], 10);
+            const newShade = shadeNumber + amount;
             if (newShade >= 100 && newShade <= 600) {
                 return canvas_colors_web_1.default[(baseColor + newShade)];
             }
         }
     }
     try {
-        var newColor = darken ? chroma_js_1.default(hexColor).darken() : chroma_js_1.default(hexColor).brighten();
+        const newColor = amount > 0
+            ? chroma_js_1.default(hexColor).darken(amount / 100)
+            : chroma_js_1.default(hexColor).brighten(-amount / 100);
         return newColor.hex();
     }
     catch (e) {
-        console.warn("Invalid color '" + hexColor + "' used in theme");
+        console.warn(`Invalid color '${hexColor}' used in theme`);
         return hexColor;
     }
-}
-exports.shiftColor = shiftColor;
+}, (color, value) => `${color}.${value}`);
 function fillPalette(defaultPalette, palette) {
     if (!palette) {
         return {};
     }
-    var main = palette.main || defaultPalette.main;
-    var dark = palette.dark ||
-        (palette.main && shiftColor(palette.main, ColorDirection.Darken)) ||
-        defaultPalette.dark;
-    var darkest = palette.darkest ||
-        (palette.main && shiftColor(dark, ColorDirection.Darken)) ||
-        defaultPalette.darkest;
-    var light = palette.light ||
-        (palette.main && shiftColor(palette.main, ColorDirection.Brighten)) ||
-        defaultPalette.light;
-    var lightest = palette.lightest ||
-        (palette.main && shiftColor(light, ColorDirection.Brighten)) ||
-        defaultPalette.lightest;
-    var contrast = palette.contrast || utils_1.pickForegroundColor(main) || defaultPalette.contrast;
+    const main = palette.main || defaultPalette.main;
+    const dark = palette.dark || (palette.main && exports.shiftColor(palette.main, 100)) || defaultPalette.dark;
+    const darkest = palette.darkest || (palette.main && exports.shiftColor(palette.main, 200)) || defaultPalette.darkest;
+    const light = palette.light || (palette.main && exports.shiftColor(palette.main, -100)) || defaultPalette.light;
+    const lightest = palette.lightest || (palette.main && exports.shiftColor(palette.main, -200)) || defaultPalette.lightest;
+    const contrast = palette.contrast || utils_1.pickForegroundColor(main) || defaultPalette.contrast;
     return {
-        lightest: lightest,
-        light: light,
-        main: main,
-        dark: dark,
-        darkest: darkest,
-        contrast: contrast,
+        lightest,
+        light,
+        main,
+        dark,
+        darkest,
+        contrast,
     };
 }
 function calculateCanvasTheme(partialTheme) {
-    var _a = partialTheme.palette, palette = _a === void 0 ? {} : _a, _b = partialTheme.breakpoints, breakpoints = _b === void 0 ? {} : _b, direction = partialTheme.direction, extraFields = __rest(partialTheme, ["palette", "breakpoints", "direction"]);
-    var _c = palette, primary = _c.primary, alert = _c.alert, error = _c.error, success = _c.success, neutral = _c.neutral, _d = _c.common, common = _d === void 0 ? {} : _d;
-    var mergeable = {
+    const { palette = {}, breakpoints = {}, direction, ...extraFields } = partialTheme;
+    const { primary, alert, error, success, neutral, common = {} } = palette;
+    const mergeable = {
         palette: {
-            common: common,
+            common,
             primary: fillPalette(theme_1.defaultCanvasTheme.palette.primary, primary),
             alert: fillPalette(theme_1.defaultCanvasTheme.palette.alert, alert),
             error: fillPalette(theme_1.defaultCanvasTheme.palette.error, error),
             success: fillPalette(theme_1.defaultCanvasTheme.palette.success, success),
             neutral: fillPalette(theme_1.defaultCanvasTheme.palette.neutral, neutral),
         },
-        breakpoints: breakpoints,
+        breakpoints,
         direction: direction === types_1.ContentDirection.RTL ? direction : types_1.ContentDirection.LTR,
     };
-    return merge_1.default({}, theme_1.defaultCanvasTheme, mergeable, extraFields);
+    return deepMerge_1.deepMerge(deepMerge_1.deepMerge({}, theme_1.defaultCanvasTheme), { ...mergeable, ...extraFields });
 }
-exports.createCanvasTheme = memoize_1.default(calculateCanvasTheme, function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return JSON.stringify(args);
-});
+/**
+ * Creates a full {@link CanvasTheme} from any partial theme by deeply merging with the
+ * `defaultCanvasTheme` object. The function is memoized, but it is best to run this function
+ * only once and save the result.
+ */
+exports.createCanvasTheme = memoize_1.memoize(calculateCanvasTheme, (...args) => JSON.stringify(args));