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

package/dist/es6/segmented-control/lib/SegmentedControl.js

@@ -1,33 +1,11 @@
-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 } from '@workday/canvas-kit-react/common';
 import { SegmentedControlButton } from './SegmentedControlButton';
-var onButtonClick = function (existingOnClick, onChange, index, event) {
+const onButtonClick = (existingOnClick, onChange, index, event) => {
     if (existingOnClick) {
         existingOnClick(event);
     }
-    var target = event.currentTarget;
+    const target = event.currentTarget;
     if (target && onChange) {
         if (target.value) {
             onChange(target.value);
@@ -37,11 +15,10 @@ var onButtonClick = function (existingOnClick, onChange, index, event) {
         }
     }
 };
-export var SegmentedControl = createComponent('div')({
+export const SegmentedControl = createComponent('div')({
     displayName: 'SegmentedControl',
-    Component: function (_a, ref) {
-        var _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, onChange = _a.onChange, elemProps = __rest(_a, ["value", "children", "onChange"]);
-        return (React.createElement("div", __assign({}, elemProps), React.Children.map(children, function (child, index) {
+    Component: ({ value = 0, children, onChange, ...elemProps }, ref) => {
+        return (React.createElement("div", Object.assign({}, elemProps), React.Children.map(children, (child, index) => {
             if (typeof child.type === typeof SegmentedControlButton) {
                 return React.cloneElement(child, {
                     toggled: typeof value === 'number' ? index === value : child.props.value === value,

package/dist/es6/segmented-control/lib/SegmentedControlButton.js

@@ -1,30 +1,8 @@
-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 React from 'react';
 import { BaseButton, } from '@workday/canvas-kit-react/button';
 import { createComponent, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
 import { colors, borderRadius, space } from '@workday/canvas-kit-react/tokens';
-var getIconButtonColors = function (toggled) {
+const getIconButtonColors = (toggled) => {
     return {
         default: {
             background: toggled ? colors.blueberry400 : colors.soap200,
@@ -49,60 +27,61 @@ var getIconButtonColors = function (toggled) {
         },
     };
 };
-var getSizeStyles = function (size) {
-    var sizeValue = size === 'large' ? "calc(" + space.xl + " + " + space.xxs + ")" : size === 'small' ? space.l : space.xl;
+const getSizeStyles = (size) => {
+    const sizeValue = size === 'large' ? `calc(${space.xl} + ${space.xxs})` : size === 'small' ? space.l : space.xl;
     return {
         width: sizeValue,
         height: sizeValue,
     };
 };
-var StyledButton = styled(BaseButton)({
+const StyledButton = styled(BaseButton)({
     borderRadius: borderRadius.zero,
-    border: "1px solid " + colors.soap500,
+    border: `1px solid ${colors.soap500}`,
     borderLeft: 'none',
     '&:first-of-type': {
-        borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
-        borderLeft: "1px solid " + colors.soap500,
+        borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+        borderLeft: `1px solid ${colors.soap500}`,
     },
     '&:last-of-type': {
-        borderRadius: "0 " + borderRadius.m + " " + borderRadius.m + " 0",
+        borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
     },
     '&[aria-pressed="true"]': {
-        borderColor: colors.blueberry400 + " !important",
+        borderColor: `${colors.blueberry400} !important`,
         '&:hover, &:focus:hover': {
             background: colors.blueberry400,
         },
     },
-    '&:focus': __assign({ borderRadius: borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, mouseFocusBehavior({
-        '&': {
-            borderRadius: borderRadius.zero,
-            '&:first-of-type': {
-                borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
-            },
-            '&:last-of-type': {
-                borderRadius: "0 " + borderRadius.m + " " + borderRadius.m + " 0",
-            },
-        },
-    })),
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        '[aria-pressed="true"]': {
-            borderColor: theme.canvas.palette.primary.main,
-            '&:hover, &:focus:hover': {
-                background: theme.canvas.palette.primary.main,
+    '&:focus': {
+        borderRadius: borderRadius.m,
+        zIndex: 1,
+        animation: 'none',
+        transition: 'all 120ms, border-radius 1ms',
+        ...mouseFocusBehavior({
+            '&': {
+                borderRadius: borderRadius.zero,
+                '&:first-of-type': {
+                    borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+                },
+                '&:last-of-type': {
+                    borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
+                },
             },
+        }),
+    },
+}, ({ theme }) => ({
+    '[aria-pressed="true"]': {
+        borderColor: theme.canvas.palette.primary.main,
+        '&:hover, &:focus:hover': {
+            background: theme.canvas.palette.primary.main,
         },
-    });
-}, function (_a) {
-    var size = _a.size;
-    return (__assign({}, getSizeStyles(size)));
-});
-export var SegmentedControlButton = createComponent('button')({
+    },
+}), ({ size }) => ({
+    ...getSizeStyles(size),
+}));
+export const SegmentedControlButton = createComponent('button')({
     displayName: 'Button',
-    Component: function (_a, ref, Element) {
-        var value = _a.value, icon = _a.icon, toggled = _a.toggled, props = __rest(_a, ["value", "icon", "toggled"]);
-        return (React.createElement(StyledButton, __assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
+    Component: ({ value, icon, toggled, ...props }, ref, Element) => {
+        return (React.createElement(StyledButton, Object.assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
             React.createElement(BaseButton.Icon, { size: props.size || 'large', icon: icon })));
     },
 });

package/dist/es6/select/lib/Select.js

@@ -1,55 +1,47 @@
-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, ErrorType, errorRing, styled, } from '@workday/canvas-kit-react/common';
 import { colors, borderRadius, inputColors, spaceNumbers, type, space, } from '@workday/canvas-kit-react/tokens';
 import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-var StyledSelect = styled('select')(__assign(__assign({}, type.levels.subtext.large), { border: "1px solid " + inputColors.border, display: 'block', backgroundColor: inputColors.background, borderRadius: borderRadius.m, boxSizing: 'border-box', height: space.xl, minWidth: 280, transition: '0.2s box-shadow, 0.2s border-color', padding: spaceNumbers.xxs, margin: 0, MozAppearance: 'none', WebkitAppearance: 'none', '&::placeholder': {
+const StyledSelect = styled('select')({
+    ...type.levels.subtext.large,
+    border: `1px solid ${inputColors.border}`,
+    display: 'block',
+    backgroundColor: inputColors.background,
+    borderRadius: borderRadius.m,
+    boxSizing: 'border-box',
+    height: space.xl,
+    minWidth: 280,
+    transition: '0.2s box-shadow, 0.2s border-color',
+    padding: spaceNumbers.xxs,
+    margin: 0,
+    MozAppearance: 'none',
+    WebkitAppearance: 'none',
+    '&::placeholder': {
         color: inputColors.placeholder,
-    }, '&:hover': {
+    },
+    '&:hover': {
         borderColor: inputColors.hoverBorder,
-    }, '&:focus:not([disabled])': {
+    },
+    '&:focus:not([disabled])': {
         borderColor: inputColors.focusBorder,
-        boxShadow: "inset 0 0 0 1px " + inputColors.focusBorder,
+        boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
         outline: 'none',
-    }, '&:disabled': {
+    },
+    '&:disabled': {
         backgroundColor: inputColors.disabled.background,
         borderColor: inputColors.disabled.border,
         color: inputColors.disabled.text,
         '&::placeholder': {
             color: inputColors.disabled.text,
         },
-    } }), function (_a) {
-    var error = _a.error;
-    return (__assign({}, errorRing(error)));
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        width: '100%',
-    };
+    },
+}, ({ error }) => ({
+    ...errorRing(error),
+}), ({ grow }) => grow && {
+    width: '100%',
 });
-var SelectDropdownIcon = styled(SystemIcon)({
+const SelectDropdownIcon = styled(SystemIcon)({
     position: 'absolute',
     top: space.xxxs,
     right: space.xxxs,
@@ -59,33 +51,24 @@ var SelectDropdownIcon = styled(SystemIcon)({
         transition: '100ms fill',
     },
 });
-var SelectWrapper = styled('div')({
+const SelectWrapper = styled('div')({
     position: 'relative',
-}, function (_a) {
-    var grow = _a.grow;
-    return ({
-        display: grow ? 'block' : 'inline-block',
-    });
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        '& span': {
-            backgroundColor: disabled ? colors.soap100 : colors.frenchVanilla100,
-        },
-        '&:hover path': {
-            fill: disabled ? undefined : colors.licorice500,
-        },
-    });
-});
-export var Select = createComponent('select')({
-    displayName: 'Select',
-    Component: function (_a, ref, Element) {
-        var _b = _a.disabled, disabled = _b === void 0 ? false : _b, grow = _a.grow, children = _a.children, elemProps = __rest(_a, ["disabled", "grow", "children"]);
-        return (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
-            React.createElement(StyledSelect, __assign({ as: Element, disabled: disabled, grow: grow, ref: ref }, elemProps), children),
-            React.createElement(SelectDropdownIcon, { icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500 })));
+}, ({ grow }) => ({
+    display: grow ? 'block' : 'inline-block',
+}), ({ disabled }) => ({
+    '& span': {
+        backgroundColor: disabled ? colors.soap100 : colors.frenchVanilla100,
     },
+    '&:hover path': {
+        fill: disabled ? undefined : colors.licorice500,
+    },
+}));
+export const Select = createComponent('select')({
+    displayName: 'Select',
+    Component: ({ disabled = false, grow, children, ...elemProps }, ref, Element) => (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
+        React.createElement(StyledSelect, Object.assign({ as: Element, disabled: disabled, grow: grow, ref: ref }, elemProps), children),
+        React.createElement(SelectDropdownIcon, { icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500 }))),
     subComponents: {
-        ErrorType: ErrorType,
+        ErrorType,
     },
 });

package/dist/es6/select/lib/SelectOption.js

@@ -1,50 +1,7 @@
-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';
-var SelectOption = /** @class */ (function (_super) {
-    __extends(SelectOption, _super);
-    function SelectOption() {
-        return _super !== null && _super.apply(this, arguments) || this;
+export class SelectOption extends React.Component {
+    render() {
+        const { disabled = false, value, label, ...elemProps } = this.props;
+        return (React.createElement("option", Object.assign({ value: value, label: label, disabled: disabled }, elemProps), label));
     }
-    SelectOption.prototype.render = function () {
-        var _a = this.props, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, label = _a.label, elemProps = __rest(_a, ["disabled", "value", "label"]);
-        return (React.createElement("option", __assign({ value: value, label: label, disabled: disabled }, elemProps), label));
-    };
-    return SelectOption;
-}(React.Component));
-export { SelectOption };
+}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -1,40 +1,3 @@
-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 styled from '@emotion/styled';
 import { colors, space } from '@workday/canvas-kit-react/tokens';
@@ -52,8 +15,8 @@ export var SidePanelBackgroundColor;
     SidePanelBackgroundColor[SidePanelBackgroundColor["Transparent"] = 1] = "Transparent";
     SidePanelBackgroundColor[SidePanelBackgroundColor["Gray"] = 2] = "Gray";
 })(SidePanelBackgroundColor || (SidePanelBackgroundColor = {}));
-var closedWidth = space.xxl;
-var SidePanelContainer = styled('div')({
+const closedWidth = space.xxl;
+const SidePanelContainer = styled('div')({
     overflow: 'hidden',
     height: '100%',
     boxSizing: 'border-box',
@@ -61,15 +24,11 @@ var SidePanelContainer = styled('div')({
     flexDirection: 'column',
     transition: 'width 200ms ease',
     position: 'absolute',
-}, function (_a) {
-    var open = _a.open;
-    return ({
-        alignItems: open ? undefined : 'center',
-        boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
-    });
-}, function (_a) {
-    var open = _a.open, backgroundColor = _a.backgroundColor;
-    var openBackgroundColor;
+}, ({ open }) => ({
+    alignItems: open ? undefined : 'center',
+    boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
+}), ({ open, backgroundColor }) => {
+    let openBackgroundColor;
     switch (backgroundColor) {
         case SidePanelBackgroundColor.Transparent:
             openBackgroundColor = 'transparent';
@@ -85,78 +44,59 @@ var SidePanelContainer = styled('div')({
     return {
         backgroundColor: open ? openBackgroundColor : colors.frenchVanilla100,
     };
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : closedWidth,
-    });
-}, function (_a) {
-    var open = _a.open, padding = _a.padding;
-    return ({
-        padding: open ? padding || space.m : space.s + " 0",
-    });
-}, function (_a) {
-    var openDirection = _a.openDirection;
-    return ({
-        right: openDirection === SidePanelOpenDirection.Right ? space.zero : undefined,
-        left: openDirection === SidePanelOpenDirection.Left ? space.zero : undefined,
-    });
-});
-var ChildrenContainer = styled('div')({
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : closedWidth,
+}), ({ open, padding }) => ({
+    padding: open ? padding || space.m : `${space.s} 0`,
+}), ({ openDirection }) => ({
+    right: openDirection === SidePanelOpenDirection.Right ? space.zero : undefined,
+    left: openDirection === SidePanelOpenDirection.Left ? space.zero : undefined,
+}));
+const ChildrenContainer = styled('div')({
     transition: 'none',
     zIndex: 1, // show above SidePanelFooter when screen is small vertically
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : closedWidth,
-    });
-});
-var ToggleButton = styled(TertiaryButton)({
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : closedWidth,
+}));
+const ToggleButton = styled(TertiaryButton)({
     position: 'absolute',
     bottom: space.s,
-}, function (_a) {
-    var openDirection = _a.openDirection;
-    return ({
-        right: openDirection === SidePanelOpenDirection.Left ? space.s : '',
-        left: openDirection === SidePanelOpenDirection.Right ? space.s : '',
-    });
-});
-var SidePanelFooter = styled('div')({
+}, ({ openDirection }) => ({
+    right: openDirection === SidePanelOpenDirection.Left ? space.s : '',
+    left: openDirection === SidePanelOpenDirection.Right ? space.s : '',
+}));
+const SidePanelFooter = styled('div')({
     position: 'absolute',
     bottom: '0',
     height: 120,
     left: 0,
     background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 0%, #FFFFFF 100%)',
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : space.xxl,
-    });
-});
-var SidePanel = /** @class */ (function (_super) {
-    __extends(SidePanel, _super);
-    function SidePanel(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : space.xxl,
+}));
+export class SidePanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
             screenSize: typeof window !== 'undefined' ? window.innerWidth : 0,
         };
-        _this.handleResize = function () {
-            if (!_this.props.onBreakpointChange || !_this.props.breakpoint) {
+        this.handleResize = () => {
+            if (!this.props.onBreakpointChange || !this.props.breakpoint) {
                 return;
             }
-            if (window.innerWidth > _this.props.breakpoint && !_this.props.open) {
-                _this.props.onBreakpointChange(true);
+            if (window.innerWidth > this.props.breakpoint && !this.props.open) {
+                this.props.onBreakpointChange(true);
             }
-            if (window.innerWidth <= _this.props.breakpoint && _this.props.open) {
-                _this.props.onBreakpointChange(false);
+            if (window.innerWidth <= this.props.breakpoint && this.props.open) {
+                this.props.onBreakpointChange(false);
             }
         };
-        _this.onToggleClick = function () {
-            if (_this.props.onToggleClick) {
-                _this.props.onToggleClick();
+        this.onToggleClick = () => {
+            if (this.props.onToggleClick) {
+                this.props.onToggleClick();
             }
         };
-        _this.toggleButtonDirection = function (open, openDirection) {
+        this.toggleButtonDirection = (open, openDirection) => {
             if (openDirection !== SidePanelOpenDirection.Right) {
                 return open ? chevronLeftIcon : chevronRightIcon;
             }
@@ -164,25 +104,22 @@ var SidePanel = /** @class */ (function (_super) {
                 return open ? chevronRightIcon : chevronLeftIcon;
             }
         };
-        _this.handleResize = _this.handleResize.bind(_this);
-        return _this;
+        this.handleResize = this.handleResize.bind(this);
     }
-    SidePanel.prototype.componentDidMount = function () {
+    componentDidMount() {
         window.addEventListener('resize', this.handleResize);
-    };
-    SidePanel.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
-    };
-    SidePanel.prototype.render = function () {
-        var _a = this.props, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? SidePanelBackgroundColor.White : _b, _c = _a.openNavigationAriaLabel, openNavigationAriaLabel = _c === void 0 ? 'open navigation' : _c, _d = _a.closeNavigationAriaLabel, closeNavigationAriaLabel = _d === void 0 ? 'close navigation' : _d, _e = _a.openDirection, openDirection = _e === void 0 ? SidePanelOpenDirection.Left : _e, _f = _a.breakpoint, breakpoint = _f === void 0 ? 768 : _f, _g = _a.openWidth, openWidth = _g === void 0 ? 300 : _g, header = _a.header, onToggleClick = _a.onToggleClick, open = _a.open, padding = _a.padding, onBreakpointChange = _a.onBreakpointChange, elemProps = __rest(_a, ["backgroundColor", "openNavigationAriaLabel", "closeNavigationAriaLabel", "openDirection", "breakpoint", "openWidth", "header", "onToggleClick", "open", "padding", "onBreakpointChange"]);
-        return (React.createElement(SidePanelContainer, __assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
+    }
+    render() {
+        const { backgroundColor = SidePanelBackgroundColor.White, openNavigationAriaLabel = 'open navigation', closeNavigationAriaLabel = 'close navigation', openDirection = SidePanelOpenDirection.Left, breakpoint = 768, openWidth = 300, header, onToggleClick, open, padding, onBreakpointChange, ...elemProps } = this.props;
+        return (React.createElement(SidePanelContainer, Object.assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
             React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
                 header && open ? (React.createElement(Heading, { as: "h2", size: "small", marginTop: "zero" }, header)) : null,
                 this.props.children),
             React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })))));
-    };
-    SidePanel.OpenDirection = SidePanelOpenDirection;
-    SidePanel.BackgroundColor = SidePanelBackgroundColor;
-    return SidePanel;
-}(React.Component));
-export { SidePanel };
+    }
+}
+SidePanel.OpenDirection = SidePanelOpenDirection;
+SidePanel.BackgroundColor = SidePanelBackgroundColor;

package/dist/es6/skeleton/lib/parts/skeletonHeader.js

@@ -1,33 +1,8 @@
-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 } from '@workday/canvas-kit-react/common';
 import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
 import { SkeletonShape } from './skeletonShape';
-export var SkeletonHeader = createComponent('div')({
+export const SkeletonHeader = createComponent('div')({
     displayName: 'Skeleton.Header',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? colors.soap200 : _b, _c = _a.height, height = _c === void 0 ? '28px' : _c, _d = _a.width, width = _d === void 0 ? '100%' : _d, elemProps = __rest(_a, ["backgroundColor", "height", "width"]);
-        return (React.createElement(SkeletonShape, __assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius.s, height: height, width: width }, elemProps)));
-    },
+    Component: ({ backgroundColor = colors.soap200, height = '28px', width = '100%', ...elemProps }, ref, Element) => (React.createElement(SkeletonShape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius.s, height: height, width: width }, elemProps))),
 });