@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

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

@@ -1,32 +1,10 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { createComponent, expandHex, styled, ContentDirection, } from '@workday/canvas-kit-react/common';
 import { colors, space, type, inputColors } from '@workday/canvas-kit-react/tokens';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
 import { ColorSwatch } from './parts/ColorSwatch';
-var colorInputWidth = 116;
-var CustomHexInput = styled(TextInput)({
+const colorInputWidth = 116;
+const CustomHexInput = styled(TextInput)({
     boxSizing: 'border-box',
     minWidth: colorInputWidth,
     width: colorInputWidth,
@@ -34,80 +12,66 @@ var CustomHexInput = styled(TextInput)({
     '&:focus::placeholder': {
         color: 'transparent',
     },
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        minWidth: '100%',
-        width: '100%',
-    };
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        backgroundColor: disabled ? colors.soap200 : '',
-    });
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        paddingLeft: theme.canvas.direction === ContentDirection.LTR ? '46px' : 'calc(100% - 86px) /* @noflip */',
-        // We're using @noflip because ColorInput should stay LTR, therefore, we need to adjust the padding using ContentDirection, not using rtl-css-js.
-    });
-});
-var ColorInputContainer = styled('div')({
+}, ({ grow }) => grow && {
+    minWidth: '100%',
+    width: '100%',
+}, ({ disabled }) => ({
+    backgroundColor: disabled ? colors.soap200 : '',
+}), ({ theme }) => ({
+    paddingLeft: theme.canvas.direction === ContentDirection.LTR ? '46px' : 'calc(100% - 86px) /* @noflip */',
+    // We're using @noflip because ColorInput should stay LTR, therefore, we need to adjust the padding using ContentDirection, not using rtl-css-js.
+}));
+const ColorInputContainer = styled('div')({
     position: 'relative',
     width: colorInputWidth,
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        minWidth: '100%',
-        width: '100%',
-    };
+}, ({ grow }) => grow && {
+    minWidth: '100%',
+    width: '100%',
 });
-var PoundSignPrefix = styled('span')(__assign(__assign({ position: 'absolute', top: 10 }, type.levels.subtext.large), { fontFamily: type.properties.fontFamilies.monospace }), function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        color: disabled ? inputColors.disabled.text : undefined,
-    });
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        left: theme.canvas.direction === ContentDirection.LTR ? '36px' : '88px',
-        //    - LTR -> left: 36px;
-        //    - RTL -> right: 88px;
-        //
-        // It's because we're changing the value of this attribute based on ContentDirection but the attribute itself is getting flipped by rtl-css-js.
-        // We're doing this to adjust the spacing of the # sign as it should always stay on the left of the input in both LTR and RTL.
-    });
-});
-var SwatchTile = styled(ColorSwatch)({
+const PoundSignPrefix = styled('span')({
+    position: 'absolute',
+    top: 10,
+    ...type.levels.subtext.large,
+    fontFamily: type.properties.fontFamilies.monospace,
+}, ({ disabled }) => ({
+    color: disabled ? inputColors.disabled.text : undefined,
+}), ({ theme }) => ({
+    left: theme.canvas.direction === ContentDirection.LTR ? '36px' : '88px',
+    //    - LTR -> left: 36px;
+    //    - RTL -> right: 88px;
+    //
+    // It's because we're changing the value of this attribute based on ContentDirection but the attribute itself is getting flipped by rtl-css-js.
+    // We're doing this to adjust the spacing of the # sign as it should always stay on the left of the input in both LTR and RTL.
+}));
+const SwatchTile = styled(ColorSwatch)({
     position: 'absolute',
     top: '10px',
     left: space.xxs,
     boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
     pointerEvents: 'none',
 });
-var isValidHex = function (value) {
+const isValidHex = (value) => {
     return /(^#?[0-9A-F]{3}$)|(^#?[0-9A-F]{6}$)/i.test(value);
 };
-var formatValue = function (value) {
+const formatValue = (value) => {
     return value.replace(/#/g, '').substring(0, 6);
 };
-export var ColorInput = createComponent('input')({
+export const ColorInput = createComponent('input')({
     displayName: 'ColorInput',
-    Component: function (_a, ref, Element) {
-        var _b = _a.placeholder, placeholder = _b === void 0 ? 'FFFFFF' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, showCheck = _a.showCheck, onChange = _a.onChange, onValidColorChange = _a.onValidColorChange, disabled = _a.disabled, error = _a.error, grow = _a.grow, elemProps = __rest(_a, ["placeholder", "value", "showCheck", "onChange", "onValidColorChange", "disabled", "error", "grow"]);
-        var formattedValue = formatValue(value);
-        var handleChange = function (e) {
-            var value = formatValue(e.currentTarget.value);
+    Component: ({ placeholder = 'FFFFFF', value = '', showCheck, onChange, onValidColorChange, disabled, error, grow, ...elemProps }, ref, Element) => {
+        const formattedValue = formatValue(value);
+        const handleChange = (e) => {
+            const value = formatValue(e.currentTarget.value);
             if (onChange) {
                 onChange(e);
             }
             if (isValidHex(value) && onValidColorChange) {
-                onValidColorChange("#" + expandHex(value));
+                onValidColorChange(`#${expandHex(value)}`);
             }
         };
         return (React.createElement(ColorInputContainer, { grow: grow },
-            React.createElement(CustomHexInput, __assign({ dir: "ltr", ref: ref, as: Element, onChange: handleChange, type: "text", placeholder: value ? undefined : placeholder, value: formattedValue, error: error, spellCheck: false, disabled: disabled, grow: grow, maxLength: 7 }, elemProps)),
-            React.createElement(SwatchTile, { showCheck: showCheck, color: isValidHex(formattedValue) ? "#" + formattedValue : '' }),
+            React.createElement(CustomHexInput, Object.assign({ dir: "ltr", ref: ref, as: Element, onChange: handleChange, type: "text", placeholder: value ? undefined : placeholder, value: formattedValue, error: error, spellCheck: false, disabled: disabled, grow: grow, maxLength: 7 }, elemProps)),
+            React.createElement(SwatchTile, { showCheck: showCheck, color: isValidHex(formattedValue) ? `#${formattedValue}` : '' }),
             React.createElement(PoundSignPrefix, { "aria-hidden": true, disabled: disabled }, "#")));
     },
 });

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

@@ -1,39 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { ColorInput } from './ColorInput';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import styled from '@emotion/styled';
 import { colors } from '@workday/canvas-kit-react/tokens';
-var StyledColorPreview = styled(ColorInput)({
+const StyledColorPreview = styled(ColorInput)({
     backgroundColor: colors.frenchVanilla100,
     borderColor: colors.frenchVanilla100,
     pointerEvents: 'none',
 });
-export var ColorPreview = createComponent('input')({
+export const ColorPreview = createComponent('input')({
     displayName: 'ColorPreview',
-    Component: function (_a, ref, Element) {
-        var id = _a.id, value = _a.value, elemProps = __rest(_a, ["id", "value"]);
-        return (React.createElement(StyledColorPreview, __assign({ ref: ref, as: Element, id: id, value: value, readOnly: true, placeholder: "" }, elemProps)));
-    },
+    Component: ({ id, value, ...elemProps }, ref, Element) => (React.createElement(StyledColorPreview, Object.assign({ ref: ref, as: Element, id: id, value: value, readOnly: true, placeholder: "" }, elemProps))),
 });

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

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
 import { pickForegroundColor } from '@workday/canvas-kit-react/common';
 import chroma from 'chroma-js';
@@ -34,7 +12,7 @@ function compareColors(color1, color2) {
     }
     return chroma(color1).hex() === chroma(color2).hex();
 }
-var Container = styled('div')({
+const Container = styled('div')({
     width: 20,
     height: 20,
     borderRadius: borderRadius.s,
@@ -45,16 +23,10 @@ var Container = styled('div')({
         // Account for 24px icon
         margin: -2,
     },
-}, function (_a) {
-    var color = _a.color, showCheck = _a.showCheck;
-    return ({
-        backgroundColor: color,
-        boxShadow: showCheck || compareColors(color, colors.frenchVanilla100)
-            ? 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25)'
-            : undefined,
-    });
-});
-export var ColorSwatch = function (_a) {
-    var color = _a.color, _b = _a.showCheck, showCheck = _b === void 0 ? false : _b, elemProps = __rest(_a, ["color", "showCheck"]);
-    return (React.createElement(Container, __assign({ color: color, showCheck: showCheck }, elemProps), showCheck && (React.createElement(SystemIcon, { fill: pickForegroundColor(color), fillHover: pickForegroundColor(color), icon: checkSmallIcon, color: color }))));
-};
+}, ({ color, showCheck }) => ({
+    backgroundColor: color,
+    boxShadow: showCheck || compareColors(color, colors.frenchVanilla100)
+        ? 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25)'
+        : undefined,
+}));
+export const ColorSwatch = ({ color, showCheck = false, ...elemProps }) => (React.createElement(Container, Object.assign({ color: color, showCheck: showCheck }, elemProps), showCheck && (React.createElement(SystemIcon, { fill: pickForegroundColor(color), fillHover: pickForegroundColor(color), icon: checkSmallIcon, color: color }))));

package/dist/es6/common/lib/CanvasProvider.js

@@ -1,60 +1,17 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { InputProvider } from './InputProvider';
 import { defaultCanvasTheme } from './theming';
-var CanvasProvider = /** @class */ (function (_super) {
-    __extends(CanvasProvider, _super);
-    function CanvasProvider() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CanvasProvider.prototype.render = function () {
-        var _a = this.props, children = _a.children, theme = _a.theme, elemProps = __rest(_a, ["children", "theme"]);
+export class CanvasProvider extends React.Component {
+    render() {
+        const { children, theme, ...elemProps } = this.props;
         return (React.createElement(ThemeProvider, { theme: theme },
             React.createElement(InputProvider, null),
-            React.createElement("div", __assign({ dir: (theme.canvas && theme.canvas.direction) || defaultCanvasTheme.direction }, elemProps), children)));
-    };
-    CanvasProvider.defaultProps = {
-        theme: {
-            canvas: defaultCanvasTheme,
-        },
-    };
-    return CanvasProvider;
-}(React.Component));
-export { CanvasProvider };
+            React.createElement("div", Object.assign({ dir: (theme.canvas && theme.canvas.direction) || defaultCanvasTheme.direction }, elemProps), children)));
+    }
+}
+CanvasProvider.defaultProps = {
+    theme: {
+        canvas: defaultCanvasTheme,
+    },
+};

package/dist/es6/common/lib/EllipsisText.js

@@ -1,27 +1,15 @@
-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);
-};
 import React from 'react';
 import styled from '@emotion/styled';
 import { createComponent } from './utils';
-export var ellipsisStyles = {
+export const ellipsisStyles = {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
 };
-var StyledEllipsisComponent = styled('span')(ellipsisStyles);
-export var EllipsisText = createComponent('span')({
+const StyledEllipsisComponent = styled('span')(ellipsisStyles);
+export const EllipsisText = createComponent('span')({
     displayName: 'EllipsisText',
-    Component: function (elemProps, ref, Element) {
-        if (elemProps === void 0) { elemProps = {}; }
-        return React.createElement(StyledEllipsisComponent, __assign({ as: Element, ref: ref }, elemProps));
+    Component(elemProps = {}, ref, Element) {
+        return React.createElement(StyledEllipsisComponent, Object.assign({ as: Element, ref: ref }, elemProps));
     },
 });