@workday/canvas-kit-preview-react 11.1.6 → 11.1.7

package/color-picker/lib/ColorPicker.tsx

@@ -7,7 +7,7 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import styled from '@emotion/styled';
 
 import {ResetButton} from './parts/ColorReset';
-import {SwatchBook} from './parts/SwatchBook';
+import {SwatchBook, SwatchBookColorObject} from './parts/SwatchBook';
 
 export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -21,7 +21,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The array of colors to be rendered in the swatchbook.
    */
-  colorSet?: string[];
+  colorSet?: string[] | SwatchBookColorObject[];
   /**
    * If true, render an input for entering a custom hex color.
    * @default false
@@ -149,13 +149,19 @@ const HexColorInput = styled(ColorInput)({
   width: '168px',
 });
 
-const isCustomColor = (colors: string[], hexCode?: string) => {
+const isCustomColor = (colors: (string | SwatchBookColorObject)[], hexCode?: string) => {
   if (!hexCode) {
     return false;
   }
 
   const lowercaseHex = hexCode.toLowerCase();
-  return !colors.includes(lowercaseHex);
+  return !colors.some((color: string | SwatchBookColorObject) => {
+    if (typeof color === 'string') {
+      return color.toLowerCase() === lowercaseHex;
+    } else {
+      return color.value.toLowerCase() === lowercaseHex;
+    }
+  });
 };
 
 export const ColorPicker = ({

package/color-picker/lib/parts/SwatchBook.tsx

@@ -4,8 +4,13 @@ import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react/common';
 import {ColorSwatch} from '@workday/canvas-kit-react/color-picker';
 
+export interface SwatchBookColorObject {
+  value: string;
+  label: string;
+}
+
 export interface SwatchBookProps {
-  colors: string[];
+  colors: (string | SwatchBookColorObject)[];
   value?: string;
   onSelect: (color: string) => void;
 }
@@ -58,26 +63,33 @@ const Container = styled('div')({
   margin: `0px -${space.xxs} -${space.xxs} 0px`,
 });
 
-export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => (
-  <Container>
-    {colors.map((color, index) => {
-      const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
+export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => {
+  return (
+    <Container>
+      {colors.map((color: string | SwatchBookColorObject, index: number) => {
+        const hexCode = typeof color === 'object' ? color.value : color;
+        const label = typeof color === 'object' ? color.label : color;
+        const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
 
-      const handleClick = () => onSelect(color);
-      const handleKeyDown = (event: React.KeyboardEvent) =>
-        (event.key === 'Enter' || event.key === ' ') && onSelect(color);
+        const handleClick = () => onSelect(hexCode);
+        const handleKeyDown = (event: React.KeyboardEvent) =>
+          (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
 
-      return (
-        <SwatchContainer
-          key={index + '-' + color}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-          tabIndex={0}
-          isSelected={isSelected}
-        >
-          <ColorSwatch color={color} showCheck={isSelected} />
-        </SwatchContainer>
-      );
-    })}
-  </Container>
-);
+        return (
+          <SwatchContainer
+            key={index + '-' + color}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            tabIndex={0}
+            isSelected={isSelected}
+            role="button"
+            aria-label={label}
+            aria-selected={isSelected}
+          >
+            <ColorSwatch color={hexCode} showCheck={isSelected} />
+          </SwatchContainer>
+        );
+      })}
+    </Container>
+  );
+};

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SwatchBookColorObject } from './parts/SwatchBook';
 export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The function called when the ColorPicker state changes.
@@ -11,7 +12,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The array of colors to be rendered in the swatchbook.
      */
-    colorSet?: string[];
+    colorSet?: string[] | SwatchBookColorObject[];
     /**
      * If true, render an input for entering a custom hex color.
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAa,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAErE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4GD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}

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

@@ -116,7 +116,14 @@ const isCustomColor = (colors, hexCode) => {
         return false;
     }
     const lowercaseHex = hexCode.toLowerCase();
-    return !colors.includes(lowercaseHex);
+    return !colors.some((color) => {
+        if (typeof color === 'string') {
+            return color.toLowerCase() === lowercaseHex;
+        }
+        else {
+            return color.value.toLowerCase() === lowercaseHex;
+        }
+    });
 };
 const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
     const [validHexValue, setValidHexValue] = React.useState('');

package/dist/commonjs/color-picker/lib/parts/SwatchBook.d.ts

@@ -1,5 +1,9 @@
+export interface SwatchBookColorObject {
+    value: string;
+    label: string;
+}
 export interface SwatchBookProps {
-    colors: string[];
+    colors: (string | SwatchBookColorObject)[];
     value?: string;
     onSelect: (color: string) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,gBAsBpE,CAAC"}
+{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,gBA6BpE,CAAC"}

package/dist/commonjs/color-picker/lib/parts/SwatchBook.js

@@ -64,11 +64,15 @@ const Container = styled_1.default('div')({
     flexWrap: 'wrap',
     margin: `0px -${tokens_1.space.xxs} -${tokens_1.space.xxs} 0px`,
 });
-const SwatchBook = ({ colors, value, onSelect }) => (React.createElement(Container, null, colors.map((color, index) => {
-    const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
-    const handleClick = () => onSelect(color);
-    const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(color);
-    return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected },
-        React.createElement(color_picker_1.ColorSwatch, { color: color, showCheck: isSelected })));
-})));
+const SwatchBook = ({ colors, value, onSelect }) => {
+    return (React.createElement(Container, null, colors.map((color, index) => {
+        const hexCode = typeof color === 'object' ? color.value : color;
+        const label = typeof color === 'object' ? color.label : color;
+        const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
+        const handleClick = () => onSelect(hexCode);
+        const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
+        return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected, role: "button", "aria-label": label, "aria-selected": isSelected },
+            React.createElement(color_picker_1.ColorSwatch, { color: hexCode, showCheck: isSelected })));
+    })));
+};
 exports.SwatchBook = SwatchBook;

package/dist/es6/color-picker/lib/ColorPicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SwatchBookColorObject } from './parts/SwatchBook';
 export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The function called when the ColorPicker state changes.
@@ -11,7 +12,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The array of colors to be rendered in the swatchbook.
      */
-    colorSet?: string[];
+    colorSet?: string[] | SwatchBookColorObject[];
     /**
      * If true, render an input for entering a custom hex color.
      * @default false

package/dist/es6/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAa,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAErE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4GD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}

package/dist/es6/color-picker/lib/ColorPicker.js

@@ -91,7 +91,14 @@ const isCustomColor = (colors, hexCode) => {
         return false;
     }
     const lowercaseHex = hexCode.toLowerCase();
-    return !colors.includes(lowercaseHex);
+    return !colors.some((color) => {
+        if (typeof color === 'string') {
+            return color.toLowerCase() === lowercaseHex;
+        }
+        else {
+            return color.value.toLowerCase() === lowercaseHex;
+        }
+    });
 };
 export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
     const [validHexValue, setValidHexValue] = React.useState('');

package/dist/es6/color-picker/lib/parts/SwatchBook.d.ts

@@ -1,5 +1,9 @@
+export interface SwatchBookColorObject {
+    value: string;
+    label: string;
+}
 export interface SwatchBookProps {
-    colors: string[];
+    colors: (string | SwatchBookColorObject)[];
     value?: string;
     onSelect: (color: string) => void;
 }

package/dist/es6/color-picker/lib/parts/SwatchBook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,gBAsBpE,CAAC"}
+{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,gBA6BpE,CAAC"}

package/dist/es6/color-picker/lib/parts/SwatchBook.js

@@ -39,10 +39,14 @@ const Container = styled('div')({
     flexWrap: 'wrap',
     margin: `0px -${space.xxs} -${space.xxs} 0px`,
 });
-export const SwatchBook = ({ colors, value, onSelect }) => (React.createElement(Container, null, colors.map((color, index) => {
-    const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
-    const handleClick = () => onSelect(color);
-    const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(color);
-    return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected },
-        React.createElement(ColorSwatch, { color: color, showCheck: isSelected })));
-})));
+export const SwatchBook = ({ colors, value, onSelect }) => {
+    return (React.createElement(Container, null, colors.map((color, index) => {
+        const hexCode = typeof color === 'object' ? color.value : color;
+        const label = typeof color === 'object' ? color.label : color;
+        const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
+        const handleClick = () => onSelect(hexCode);
+        const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
+        return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected, role: "button", "aria-label": label, "aria-selected": isSelected },
+            React.createElement(ColorSwatch, { color: hexCode, showCheck: isSelected })));
+    })));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "11.1.6",
+  "version": "11.1.7",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^11.1.6",
-    "@workday/canvas-kit-styling": "^11.1.6",
+    "@workday/canvas-kit-react": "^11.1.7",
+    "@workday/canvas-kit-styling": "^11.1.7",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "631d1ec692f362e0dfac142a038fed1fb6a97fb6"
+  "gitHead": "f2f16c84455ece760c07e75631480f0ec65b9ada"
 }