@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.384-next.3

package/dist/es6/table/lib/TableRow.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 * as React from 'react';
 import styled from '@emotion/styled';
 import { rgba } from 'polished';
@@ -35,10 +13,10 @@ export var TableRowState;
     TableRowState[TableRowState["Hover"] = 4] = "Hover";
     TableRowState[TableRowState["Selected"] = 5] = "Selected";
 })(TableRowState || (TableRowState = {}));
-var errorColor = statusColors.error;
-var errorColorLight = colors.cinnamon200;
-var alertColor = statusColors.warning;
-var alertColorLight = colors.cantaloupe200;
+const errorColor = statusColors.error;
+const errorColorLight = colors.cinnamon200;
+const alertColor = statusColors.warning;
+const alertColorLight = colors.cantaloupe200;
 function makeColoredRow(_bgColor, _borderColor) {
     return {
         backgroundColor: _bgColor,
@@ -49,7 +27,7 @@ function makeColoredRow(_bgColor, _borderColor) {
             left: 0,
             top: -borderWidth,
             content: '""',
-            width: "calc(100% + " + borderWidth + "px)",
+            width: `calc(100% + ${borderWidth}px)`,
             height: borderWidth,
             backgroundColor: _borderColor,
         },
@@ -58,10 +36,10 @@ function makeColoredRow(_bgColor, _borderColor) {
             bottom: -borderWidth,
         },
         '&:first-of-type': {
-            boxShadow: "inset " + borderWidth + "px 0 0 " + _borderColor,
+            boxShadow: `inset ${borderWidth}px 0 0 ${_borderColor}`,
         },
         '&:last-child': {
-            boxShadow: "inset -" + borderWidth + "px 0 0 " + _borderColor,
+            boxShadow: `inset -${borderWidth}px 0 0 ${_borderColor}`,
             '&:before, &:after': {
                 width: '100%',
             },
@@ -69,7 +47,7 @@ function makeColoredRow(_bgColor, _borderColor) {
     };
 }
 function makeColoredRowStyle(_bgColor, _borderColor) {
-    var lightenedBg = rgba(_bgColor, 0.2);
+    const lightenedBg = rgba(_bgColor, 0.2);
     return {
         'th, td': [
             makeColoredRow(lightenedBg, _bgColor),
@@ -92,10 +70,10 @@ function makeBorderlessStyle(_bgColor) {
         },
     };
 }
-var StyledTableRow = styled('tr')({
+const StyledTableRow = styled('tr')({
     'th, td': {
         backgroundColor: colors.frenchVanilla100,
-        padding: space.xs + " " + space.xxs,
+        padding: `${space.xs} ${space.xxs}`,
         fontSize: 13,
         borderRight: cellBorder,
         borderBottom: cellBorder,
@@ -119,36 +97,32 @@ var StyledTableRow = styled('tr')({
             borderBottom: 'none',
         },
     },
-}, function (_a) {
-    var header = _a.header;
-    return header && {
-        '&:last-child': {
-            'th, td': {
-                borderBottom: '1px solid transparent',
-            },
-        },
+}, ({ header }) => header && {
+    '&:last-child': {
         'th, td': {
-            position: 'relative',
-            backgroundColor: colors.frenchVanilla100,
-            verticalAlign: 'middle',
+            borderBottom: '1px solid transparent',
+        },
+    },
+    'th, td': {
+        position: 'relative',
+        backgroundColor: colors.frenchVanilla100,
+        verticalAlign: 'middle',
+        '&:after': {
+            position: 'absolute',
+            left: 0,
+            bottom: -borderWidth,
+            content: '""',
+            width: `calc(100% + ${borderWidth}px)`,
+            height: borderWidth,
+            backgroundColor: borderColor,
+        },
+        '&:last-child': {
             '&:after': {
-                position: 'absolute',
-                left: 0,
-                bottom: -borderWidth,
-                content: '""',
-                width: "calc(100% + " + borderWidth + "px)",
-                height: borderWidth,
-                backgroundColor: borderColor,
-            },
-            '&:last-child': {
-                '&:after': {
-                    width: '100%',
-                },
+                width: '100%',
             },
         },
-    };
-}, function (_a) {
-    var state = _a.state;
+    },
+}, ({ state }) => {
     switch (state) {
         case TableRowState.InputError:
             return makeBorderlessStyle(errorColor);
@@ -190,11 +164,10 @@ var StyledTableRow = styled('tr')({
             };
     }
 });
-export var TableRow = createComponent('tr')({
+export const TableRow = createComponent('tr')({
     displayName: 'TableRow',
-    Component: function (_a, ref, Element) {
-        var state = _a.state, header = _a.header, children = _a.children, elemProps = __rest(_a, ["state", "header", "children"]);
-        return (React.createElement(StyledTableRow, __assign({ as: Element, ref: ref, state: state, header: header }, elemProps), children));
+    Component: ({ state, header, children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledTableRow, Object.assign({ as: Element, ref: ref, state: state, header: header }, elemProps), children));
     },
     subComponents: {
         State: TableRowState,

package/dist/es6/tabs/lib/Tabs.js

@@ -34,7 +34,7 @@ import { TabsPanels } from './TabsPanels';
  * Model](/getting-started/for-developers/resources/compound-components/#configuring-a-model) for
  * more information on model configuration.
  */
-export var Tabs = createContainer()({
+export const Tabs = createContainer()({
     displayName: 'Tabs',
     modelHook: useTabsModel,
     subComponents: {
@@ -124,7 +124,6 @@ export var Tabs = createContainer()({
         // JSDoc of `Menu` instead of `Tabs.Menu`
         Menu: Menu,
     },
-})(function (_a, _, model) {
-    var children = _a.children;
+})(({ children }, _, model) => {
     return React.createElement(Menu, { model: model.menu }, children);
 });

package/dist/es6/tabs/lib/TabsItem.d.ts

@@ -53,7 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
      */
     tabIndex?: number;
 }
-export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
+export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/dist/es6/tabs/lib/TabsItem.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 * as React from 'react';
 import { colors, space, type, borderRadius, iconColors } from '@workday/canvas-kit-react/tokens';
 import { focusRing, hideMouseFocus, styled, createElemPropsHook, composeHooks, ellipsisStyles, EllipsisText, createSubcomponent, useModalityType, } from '@workday/canvas-kit-react/common';
@@ -28,79 +6,97 @@ import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { useListItemRegister, useListItemRovingFocus, isSelected, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
 import { useTabsModel } from './useTabsModel';
-export var StyledTabItem = styled(Box.as('button'))(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: space.xs + " " + space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: colors.licorice300, position: 'relative', borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), hideMouseFocus), { '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+export const StyledTabItem = styled(Box.as('button'))(({ theme }) => ({
+    ...type.levels.subtext.large,
+    fontWeight: type.properties.fontWeights.medium,
+    border: 'none',
+    backgroundColor: 'transparent',
+    flex: '0 0 auto',
+    alignItems: 'center',
+    padding: `${space.xs} ${space.s}`,
+    height: 52,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: colors.licorice300,
+    position: 'relative',
+    borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
+    transition: 'background 150ms ease, color 150ms ease',
+    ...hideMouseFocus,
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        fill: iconColors.active,
+    },
+    '&:hover, &:focus': {
+        backgroundColor: colors.soap200,
+        color: colors.blackPepper400,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: iconColors.hover,
+        },
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.active,
-        }, '&:hover, &:focus': {
-            backgroundColor: colors.soap200,
-            color: colors.blackPepper400,
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: iconColors.hover,
-            },
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: iconColors.active,
-            },
-        }, '&:focus': __assign({ outline: "none" }, focusRing({ inset: 'outer', width: 0, separation: 2 }, theme)), '&:disabled, &[aria-disabled]': {
-            color: colors.licorice100,
+        },
+    },
+    '&:focus': {
+        outline: `none`,
+        ...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
+    },
+    '&:disabled, &[aria-disabled]': {
+        color: colors.licorice100,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: iconColors.disabled,
+        },
+        '&:hover': {
+            cursor: 'auto',
+            backgroundColor: `transparent`,
             '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: iconColors.disabled,
             },
-            '&:hover': {
-                cursor: 'auto',
-                backgroundColor: "transparent",
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: iconColors.disabled,
-                },
-            },
-        }, '&[aria-selected=true]': {
+        },
+    },
+    '&[aria-selected=true]': {
+        color: theme.canvas.palette.primary.main,
+        cursor: 'default',
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: theme.canvas.palette.primary.main,
+        },
+        '&:after': {
+            position: 'absolute',
+            height: space.xxxs,
+            borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
+            backgroundColor: theme.canvas.palette.primary.main,
+            bottom: 0,
+            content: `''`,
+            left: 0,
+            marginTop: '-2px',
+            width: '100%',
+        },
+        '&:hover, &:focus': {
+            backgroundColor: `transparent`,
             color: theme.canvas.palette.primary.main,
-            cursor: 'default',
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: theme.canvas.palette.primary.main,
-            },
-            '&:after': {
-                position: 'absolute',
-                height: space.xxxs,
-                borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px",
-                backgroundColor: theme.canvas.palette.primary.main,
-                bottom: 0,
-                content: "''",
-                left: 0,
-                marginTop: '-2px',
-                width: '100%',
-            },
-            '&:hover, &:focus': {
-                backgroundColor: "transparent",
-                color: theme.canvas.palette.primary.main,
-            },
-        } }));
-}, function (_a) {
-    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? space.xxs : _b;
+        },
+    },
+}), ({ children, gap = space.xxs }) => {
     if (typeof children === 'string') {
         return ellipsisStyles;
     }
     else {
         return {
             display: 'flex',
-            gap: gap,
+            gap,
         };
     }
 });
-export var useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(function (_a, _, elemProps) {
-    var state = _a.state;
-    if (elemProps === void 0) { elemProps = {}; }
-    var name = elemProps['data-id'] || '';
-    var selected = !!elemProps['data-id'] && isSelected(name, state);
+export const useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
+    const name = elemProps['data-id'] || '';
+    const selected = !!elemProps['data-id'] && isSelected(name, state);
     return {
         type: 'button',
         role: 'tab',
-        id: state.id + "-" + name,
+        id: `${state.id}-${name}`,
         'aria-selected': selected,
-        'aria-controls': "tabpanel-" + state.id + "-" + name,
+        'aria-controls': `tabpanel-${state.id}-${name}`,
     };
 }), useListItemSelect, useOverflowListItemMeasure, useListItemRovingFocus, useListItemRegister);
-export var TabsItem = createSubcomponent('button')({
+export const TabsItem = createSubcomponent('button')({
     displayName: 'Tabs.Item',
     modelHook: useTabsModel,
     elemPropsHook: useTabsItem,
@@ -108,9 +104,8 @@ export var TabsItem = createSubcomponent('button')({
         Icon: SystemIcon,
         Text: EllipsisText,
     },
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    var modality = useModalityType();
+})(({ children, ...elemProps }, Element) => {
+    const modality = useModalityType();
     return (React.createElement(OverflowTooltip, null,
-        React.createElement(StyledTabItem, __assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
+        React.createElement(StyledTabItem, Object.assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
 });

package/dist/es6/tabs/lib/TabsList.js

@@ -1,65 +1,39 @@
-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 { commonColors } from '@workday/canvas-kit-react/tokens';
 import { composeHooks, createSubcomponent, createElemPropsHook, useModalityType, styled, } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { useOverflowListMeasure, useListRenderItems, useListResetCursorOnBlur, } from '@workday/canvas-kit-react/collection';
 import { useTabsModel } from './useTabsModel';
-export var useTabsList = composeHooks(createElemPropsHook(useTabsModel)(function () {
-    var modality = useModalityType();
+export const useTabsList = composeHooks(createElemPropsHook(useTabsModel)(() => {
+    const modality = useModalityType();
     return {
         role: 'tablist',
         overflowX: modality === 'touch' ? 'auto' : undefined,
     };
 }), useOverflowListMeasure, useListResetCursorOnBlur);
-var StyledStack = styled(Flex)(function (_a) {
-    var maskImage = _a.maskImage;
-    return ({
-        maskImage: maskImage,
-    });
-});
-export var TabsList = createSubcomponent('div')({
+const StyledStack = styled(Flex)(({ maskImage }) => ({
+    maskImage: maskImage,
+}));
+export const TabsList = createSubcomponent('div')({
     displayName: 'Tabs.List',
     modelHook: useTabsModel,
     elemPropsHook: useTabsList,
-})(function (_a, Element, model) {
-    var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
-    var modality = useModalityType();
-    var touchStates = useTouchDirection();
-    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', gap: "xs", maskImage: modality === 'touch' && touchStates.isDragging
-            ? "linear-gradient(" + (touchStates.direction === 'left' ? 'to left' : 'to right') + ", white 80%, transparent)"
+})(({ children, overflowButton, ...elemProps }, Element, model) => {
+    const modality = useModalityType();
+    const touchStates = useTouchDirection();
+    return (React.createElement(StyledStack, Object.assign({ as: Element, position: "relative", borderBottom: `1px solid ${commonColors.divider}`, paddingX: modality === 'touch' ? 'zero' : 'm', gap: "xs", maskImage: modality === 'touch' && touchStates.isDragging
+            ? `linear-gradient(${touchStates.direction === 'left' ? 'to left' : 'to right'}, white 80%, transparent)`
             : undefined }, elemProps),
         useListRenderItems(model, children),
         overflowButton));
 });
-export var useTouchDirection = function () {
-    var _a = React.useState(false), isDragging = _a[0], setIsDragging = _a[1];
-    var _b = React.useState('right'), touchDir = _b[0], setTouchDirection = _b[1];
-    React.useEffect(function () {
-        var prevXPos = window.pageXOffset;
-        var handleTouchMove = function (e) {
-            var currXPos = e.touches[0].clientX;
+export const useTouchDirection = () => {
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [touchDir, setTouchDirection] = React.useState('right');
+    React.useEffect(() => {
+        let prevXPos = window.pageXOffset;
+        const handleTouchMove = function (e) {
+            const currXPos = e.touches[0].clientX;
             setIsDragging(true);
             if (currXPos > prevXPos) {
                 setTouchDirection('left');
@@ -70,13 +44,13 @@ export var useTouchDirection = function () {
             prevXPos = currXPos;
             e.preventDefault();
         };
-        var handleDragEnd = function () {
+        const handleDragEnd = function () {
             setIsDragging(false);
         };
         window.addEventListener('touchmove', handleTouchMove);
         window.addEventListener('touchstart', handleDragEnd);
         window.addEventListener('touchend', handleDragEnd);
-        return function () {
+        return () => {
             window.removeEventListener('touchmove', handleTouchMove);
             window.removeEventListener('touchstart', handleDragEnd);
             window.removeEventListener('touchend', handleDragEnd);

package/dist/es6/tabs/lib/TabsMenuPopper.js

@@ -1,35 +1,12 @@
-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 { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { usePopupPopper, Popper } from '@workday/canvas-kit-react/popup';
 import { useMenuModel } from '@workday/canvas-kit-react/menu';
-export var useTabsMenuPopper = usePopupPopper;
-export var TabsMenuPopper = createSubcomponent('div')({
+export const useTabsMenuPopper = usePopupPopper;
+export const TabsMenuPopper = createSubcomponent('div')({
     displayName: 'Tabs.MenuPopper',
     modelHook: useMenuModel,
     elemPropsHook: useTabsMenuPopper,
-})(function (_a) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(Popper, __assign({}, elemProps), children);
+})(({ children, ...elemProps }) => {
+    return React.createElement(Popper, Object.assign({}, elemProps), children);
 });

package/dist/es6/tabs/lib/TabsOverflowButton.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 * as React from 'react';
 import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
 import { createElemPropsHook, composeHooks, createSubModelElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
@@ -28,18 +6,17 @@ import { useOverflowListTarget } from '@workday/canvas-kit-react/collection';
 import { useMenuTarget } from '@workday/canvas-kit-react/menu';
 import { useTabsModel } from './useTabsModel';
 import { StyledTabItem } from './TabsItem';
-export var useTabsOverflowButton = composeHooks(createElemPropsHook(useTabsModel)(function () {
+export const useTabsOverflowButton = composeHooks(createElemPropsHook(useTabsModel)(() => {
     return {
         'aria-haspopup': true,
     };
-}), useOverflowListTarget, createSubModelElemPropsHook(useTabsModel)(function (m) { return m.menu; }, useMenuTarget));
-export var TabsOverflowButton = createSubcomponent('button')({
+}), useOverflowListTarget, createSubModelElemPropsHook(useTabsModel)(m => m.menu, useMenuTarget));
+export const TabsOverflowButton = createSubcomponent('button')({
     displayName: 'Tabs.OverflowButton',
     modelHook: useTabsModel,
     elemPropsHook: useTabsOverflowButton,
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(StyledTabItem, __assign({ type: "button", gap: "xxxs", as: Element }, elemProps),
+})(({ children, ...elemProps }, Element) => {
+    return (React.createElement(StyledTabItem, Object.assign({ type: "button", gap: "xxxs", as: Element }, elemProps),
         React.createElement("span", null, children),
         React.createElement(SystemIcon, { icon: chevronDownSmallIcon })));
 });