@workday/canvas-kit-preview-react 9.0.0-alpha.364-next.3 → 9.0.0-alpha.382-next.2

package/dist/es6/select/lib/SelectBase.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 React, { useLayoutEffect } from 'react';
 import { errorRing, styled, useUniqueId, } from '@workday/canvas-kit-react/common';
 import { colors, borderRadius, inputColors, spaceNumbers, type, space, } from '@workday/canvas-kit-react/tokens';
@@ -29,28 +7,46 @@ import { SelectMenu } from './SelectMenu';
 import { SelectOption } from './SelectOption';
 import { scrollIntoViewIfNeeded } from './scrolling';
 import { getCorrectedIndexByValue } from './utils';
-export var buttonBorderWidth = 1;
-export var buttonDefaultWidth = 280;
-var menuIconSize = 24;
-var buttonPadding = spaceNumbers.xxs - buttonBorderWidth;
-var SelectButton = styled('button')(__assign(__assign({}, type.levels.subtext.large), { border: buttonBorderWidth + "px solid " + inputColors.border, cursor: 'default', display: 'block', backgroundColor: inputColors.background, borderRadius: borderRadius.m, boxSizing: 'border-box', height: space.xl, outline: 'none', overflow: 'hidden', padding: buttonPadding, paddingRight: spaceNumbers.xxs + menuIconSize + buttonPadding, textAlign: 'left', textOverflow: 'ellipsis', transition: '0.2s box-shadow, 0.2s border-color', whiteSpace: 'nowrap', 
+export const buttonBorderWidth = 1;
+export const buttonDefaultWidth = 280;
+const menuIconSize = 24;
+const buttonPadding = spaceNumbers.xxs - buttonBorderWidth;
+const SelectButton = styled('button')({
+    ...type.levels.subtext.large,
+    border: `${buttonBorderWidth}px solid ${inputColors.border}`,
+    cursor: 'default',
+    display: 'block',
+    backgroundColor: inputColors.background,
+    borderRadius: borderRadius.m,
+    boxSizing: 'border-box',
+    height: space.xl,
+    outline: 'none',
+    overflow: 'hidden',
+    padding: buttonPadding,
+    paddingRight: spaceNumbers.xxs + menuIconSize + buttonPadding,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    transition: '0.2s box-shadow, 0.2s border-color',
+    whiteSpace: 'nowrap',
     // width is required (instead of minWidth) in order for the button to
     // be sized properly for lengthy options
-    width: buttonDefaultWidth, '&::placeholder': {
+    width: buttonDefaultWidth,
+    '&::placeholder': {
         color: inputColors.placeholder,
-    }, '&: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, menuVisibility = _a.menuVisibility, theme = _a.theme;
-    var themedFocusOutlineColor = theme.canvas.palette.common.focusOutline;
-    var buttonFocusStyles = {
+    },
+}, ({ error, menuVisibility, theme }) => {
+    const themedFocusOutlineColor = theme.canvas.palette.common.focusOutline;
+    const buttonFocusStyles = {
         borderColor: themedFocusOutlineColor,
-        boxShadow: "inset 0 0 0 1px " + themedFocusOutlineColor,
+        boxShadow: `inset 0 0 0 1px ${themedFocusOutlineColor}`,
     };
     if (error === undefined) {
         // If there isn't an error, apply focus and hover styles if the menu is
@@ -58,21 +54,22 @@ var SelectButton = styled('button')(__assign(__assign({}, type.levels.subtext.la
         // or in the process of opening: style the button as if it had focus)
         return menuVisibility === 'closed' || menuVisibility === 'closing'
             ? {
-                '&:focus:not([disabled])': __assign({}, buttonFocusStyles),
+                '&:focus:not([disabled])': {
+                    ...buttonFocusStyles,
+                },
                 '&:hover:not([disabled]):not(:focus)': {
                     borderColor: inputColors.hoverBorder,
                 },
             }
-            : __assign({}, buttonFocusStyles);
+            : { ...buttonFocusStyles };
     }
-    return __assign({}, errorRing(error, theme));
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        width: '100%',
+    return {
+        ...errorRing(error, theme),
     };
+}, ({ grow }) => grow && {
+    width: '100%',
 });
-var SelectMenuIcon = styled(SystemIcon)({
+const SelectMenuIcon = styled(SystemIcon)({
     position: 'absolute',
     top: space.xxxs,
     right: space.xxxs,
@@ -82,57 +79,65 @@ var SelectMenuIcon = styled(SystemIcon)({
         transition: '100ms fill',
     },
 });
-var SelectInput = styled('input')({
+const SelectInput = styled('input')({
     display: 'none',
 });
-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 ({
-        '&:hover .menu-icon path': {
-            fill: disabled ? undefined : colors.licorice500,
-        },
-    });
-});
-var defaultRenderOption = function (option) {
+}, ({ grow }) => ({
+    display: grow ? 'block' : 'inline-block',
+}), ({ disabled }) => ({
+    '&:hover .menu-icon path': {
+        fill: disabled ? undefined : colors.licorice500,
+    },
+}));
+const defaultRenderOption = option => {
     return React.createElement("div", null, defaultRenderSelected(option));
 };
-var defaultRenderSelected = function (option) {
+const defaultRenderSelected = option => {
     return option.label;
 };
-export var SelectBase = function (_a) {
-    var ariaLabelledBy = _a["aria-labelledby"], ariaRequired = _a["aria-required"], as = _a.as, forwardedButtonRef = _a.forwardedButtonRef, localButtonRef = _a.localButtonRef, disabled = _a.disabled, error = _a.error, _b = _a.focusedOptionIndex, focusedOptionIndex = _b === void 0 ? 0 : _b, grow = _a.grow, inputRef = _a.inputRef, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? 'bottom' : _c, menuRef = _a.menuRef, _d = _a.menuVisibility, menuVisibility = _d === void 0 ? 'closed' : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onClose = _a.onClose, onOptionSelection = _a.onOptionSelection, options = _a.options, _e = _a.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, _f = _a.renderSelected, renderSelected = _f === void 0 ? defaultRenderSelected : _f, required = _a.required, _g = _a.shouldMenuAutoFlip, shouldMenuAutoFlip = _g === void 0 ? true : _g, _h = _a.shouldMenuAutoFocus, shouldMenuAutoFocus = _h === void 0 ? true : _h, value = _a.value, elemProps = __rest(_a, ['aria-labelledby', 'aria-required', "as", "forwardedButtonRef", "localButtonRef", "disabled", "error", "focusedOptionIndex", "grow", "inputRef", "menuPlacement", "menuRef", "menuVisibility", "onChange", "onKeyDown", "onClose", "onOptionSelection", "options", "renderOption", "renderSelected", "required", "shouldMenuAutoFlip", "shouldMenuAutoFocus", "value"]);
-    var focusedOptionRef = React.useRef(null);
-    var menuId = useUniqueId();
-    var renderOptions = function (renderOption) {
-        var selectedOptionIndex = getCorrectedIndexByValue(options, value);
-        return options.map(function (option, index) {
-            var optionProps = __assign({ 'aria-disabled': option.disabled ? true : undefined, 'aria-selected': selectedOptionIndex === index ? true : undefined, error: error, focused: focusedOptionIndex === index, id: option.id, interactive: menuVisibility === 'opening' || menuVisibility === 'opened', key: option.id, optionRef: focusedOptionIndex === index ? focusedOptionRef : undefined, value: option.value }, (onOptionSelection
-                ? {
-                    onClick: function (event) {
-                        // TODO: Figure out why this preventDefault call exists.
-                        // Removing it doesn't have any obvious consequences,
-                        // but need to do more careful testing.
-                        event.preventDefault();
-                        onOptionSelection(index);
-                    },
-                }
-                : {}));
+export const SelectBase = ({ 'aria-labelledby': ariaLabelledBy, 'aria-required': ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex = 0, grow, inputRef, menuPlacement = 'bottom', menuRef, menuVisibility = 'closed', onChange, onKeyDown, onClose, onOptionSelection, options, renderOption = defaultRenderOption, renderSelected = defaultRenderSelected, required, shouldMenuAutoFlip = true, shouldMenuAutoFocus = true, value, ...elemProps }) => {
+    const focusedOptionRef = React.useRef(null);
+    const menuId = useUniqueId();
+    const renderOptions = (renderOption) => {
+        const selectedOptionIndex = getCorrectedIndexByValue(options, value);
+        return options.map((option, index) => {
+            const optionProps = {
+                'aria-disabled': option.disabled ? true : undefined,
+                'aria-selected': selectedOptionIndex === index ? true : undefined,
+                error,
+                focused: focusedOptionIndex === index,
+                id: option.id,
+                interactive: menuVisibility === 'opening' || menuVisibility === 'opened',
+                key: option.id,
+                optionRef: focusedOptionIndex === index ? focusedOptionRef : undefined,
+                value: option.value,
+                ...(onOptionSelection
+                    ? {
+                        onClick: (event) => {
+                            // TODO: Figure out why this preventDefault call exists.
+                            // Removing it doesn't have any obvious consequences,
+                            // but need to do more careful testing.
+                            event.preventDefault();
+                            onOptionSelection(index);
+                        },
+                    }
+                    : {}),
+            };
             // Pass in additional information about the option state: focused, selected
-            var normalizedOption = __assign(__assign({}, option), { focused: optionProps.focused, selected: !!optionProps['aria-selected'] });
-            return React.createElement(SelectOption, __assign({}, optionProps), renderOption(normalizedOption));
+            const normalizedOption = {
+                ...option,
+                focused: optionProps.focused,
+                selected: !!optionProps['aria-selected'],
+            };
+            return React.createElement(SelectOption, Object.assign({}, optionProps), renderOption(normalizedOption));
         });
     };
     // If the focused option changed, scroll the newly focused option into view (if
     // necessary) but do NOT center it
-    useLayoutEffect(function () {
-        var focusedOption = focusedOptionRef.current;
+    useLayoutEffect(() => {
+        const focusedOption = focusedOptionRef.current;
         if (focusedOption) {
             // TODO: Figure out if rAF is the best approach here. I initially added
             // rAF to get the Select States Menu On story to render correctly in IE.
@@ -145,7 +150,7 @@ export var SelectBase = function (_a) {
             // This rAF call also has the additional benefit of fixing a jarring menu
             // placement issue in IE (https://github.com/Workday/canvas-kit/issues/791),
             // so I'm leaving it in for now.
-            var animateId_1 = requestAnimationFrame(function () {
+            const animateId = requestAnimationFrame(() => {
                 // We cannot use the native Element.scrollIntoView() here because it
                 // doesn't work properly with the portalled menu: when using the keyboard
                 // to advance focus through the options, using scrollIntoView to keep the
@@ -153,16 +158,16 @@ export var SelectBase = function (_a) {
                 // call our own scrollIntoViewIfNeeded function.
                 scrollIntoViewIfNeeded(focusedOption, false);
             });
-            return function () {
-                cancelAnimationFrame(animateId_1);
+            return () => {
+                cancelAnimationFrame(animateId);
             };
         }
         return undefined;
     }, [focusedOptionIndex]);
     // If the menu was just opened, scroll the focused option into view (if
     // necessary) and center it
-    useLayoutEffect(function () {
-        var focusedOption = focusedOptionRef.current;
+    useLayoutEffect(() => {
+        const focusedOption = focusedOptionRef.current;
         // We need to scroll if the menu is either opening or opened in case we decide to
         // bypass the opening state and jump straight to opened (like in visual testing,
         // for instance)
@@ -170,25 +175,25 @@ export var SelectBase = function (_a) {
             // TODO: This rAF call is also necessary for the Menu On visual testing
             // stories to render properly in IE (see above, both rAF calls need to be
             // present). It has no bearing on the menu placement issue.
-            var animateId_2 = requestAnimationFrame(function () {
+            const animateId = requestAnimationFrame(() => {
                 scrollIntoViewIfNeeded(focusedOption, true);
             });
-            return function () {
-                cancelAnimationFrame(animateId_2);
+            return () => {
+                cancelAnimationFrame(animateId);
             };
         }
         return undefined;
     }, [menuVisibility]);
     // Do a bit of error-checking in case options weren't provided
-    var hasOptions = options.length > 0;
-    var selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
-    var selectedOptionValue = selectedOption ? selectedOption.value : '';
+    const hasOptions = options.length > 0;
+    const selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
+    const selectedOptionValue = selectedOption ? selectedOption.value : '';
     return (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
-        React.createElement(SelectButton, __assign({ "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, 
+        React.createElement(SelectButton, Object.assign({ "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, 
             // Prevent Firefox from triggering click handler on spacebar during
             // type-ahead when the menu is closed (and, thus, incorrectly displaying
             // the menu)
-            onKeyUp: function (e) {
+            onKeyUp: e => {
                 e.preventDefault();
             }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue }, elemProps), !!selectedOption && renderSelected(selectedOption)),
         React.createElement(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }),

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

@@ -1,35 +1,13 @@
-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, { useState, useEffect, useLayoutEffect, useCallback } from 'react';
 import { ErrorType, styled } from '@workday/canvas-kit-react/common';
 import { Popper, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, useTransferOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
 import { colors, borderRadius, inputColors } from '@workday/canvas-kit-react/tokens';
 import { buttonBorderWidth } from './SelectBase';
-export var menuAnimationDuration = 200;
-var menuBorderStyles = function (theme, error) {
-    var borderColor = theme.canvas.palette.common.focusOutline;
-    var dividerBorderColor = borderColor;
-    var dividerBorderWidth = 1;
+export const menuAnimationDuration = 200;
+const menuBorderStyles = (theme, error) => {
+    let borderColor = theme.canvas.palette.common.focusOutline;
+    let dividerBorderColor = borderColor;
+    let dividerBorderWidth = 1;
     if (error === ErrorType.Error) {
         borderColor = theme.canvas.palette.error.main;
         dividerBorderColor = borderColor;
@@ -39,7 +17,7 @@ var menuBorderStyles = function (theme, error) {
         dividerBorderColor = theme.canvas.palette.alert.main;
         dividerBorderWidth = 2;
     }
-    var dividerBorder = dividerBorderWidth + "px solid " + dividerBorderColor;
+    const dividerBorder = `${dividerBorderWidth}px solid ${dividerBorderColor}`;
     return {
         borderColor: borderColor,
         // Render the divider using a pseudo-element
@@ -62,9 +40,9 @@ var menuBorderStyles = function (theme, error) {
         },
     };
 };
-var menuListBorderStyles = function (theme, error) {
-    var borderColor = theme.canvas.palette.common.focusOutline;
-    var borderWidth = 1;
+const menuListBorderStyles = (theme, error) => {
+    let borderColor = theme.canvas.palette.common.focusOutline;
+    let borderWidth = 1;
     if (error === ErrorType.Error) {
         borderColor = theme.canvas.palette.error.main;
     }
@@ -72,7 +50,7 @@ var menuListBorderStyles = function (theme, error) {
         borderColor = theme.canvas.palette.alert.main;
         borderWidth = 2;
     }
-    var border = borderWidth + "px solid " + borderColor;
+    const border = `${borderWidth}px solid ${borderColor}`;
     return {
         borderLeft: border,
         borderRight: border,
@@ -84,67 +62,59 @@ var menuListBorderStyles = function (theme, error) {
         },
     };
 };
-var Menu = styled('div')({
+const Menu = styled('div')({
     backgroundColor: colors.frenchVanilla100,
-    border: "1px solid " + inputColors.border,
+    border: `1px solid ${inputColors.border}`,
     boxSizing: 'border-box',
     position: 'relative',
-    transition: "opacity " + menuAnimationDuration + "ms",
+    transition: `opacity ${menuAnimationDuration}ms`,
     '[data-popper-placement="bottom"] &': {
-        borderRadius: "0 0 " + borderRadius.m + " " + borderRadius.m,
+        borderRadius: `0 0 ${borderRadius.m} ${borderRadius.m}`,
         borderTop: 0,
     },
     '[data-popper-placement="top"] &': {
-        borderRadius: borderRadius.m + " " + borderRadius.m + " 0 0",
+        borderRadius: `${borderRadius.m} ${borderRadius.m} 0 0`,
         borderBottom: 0,
     },
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    return (__assign({}, menuBorderStyles(theme, error)));
-}, function (_a) {
-    var visibility = _a.visibility;
-    return ({
-        opacity: visibility === 'opening' || visibility === 'opened' || visibility === 'close' ? 1 : 0,
-    });
-}, function (_a) {
-    var width = _a.width;
-    return ({
-        width: width,
-    });
-});
-var MenuList = styled('ul')({
+}, ({ error, theme }) => ({
+    ...menuBorderStyles(theme, error),
+}), ({ visibility }) => ({
+    opacity: visibility === 'opening' || visibility === 'opened' || visibility === 'close' ? 1 : 0,
+}), ({ width }) => ({
+    width: width,
+}));
+const MenuList = styled('ul')({
     listStyle: 'none',
     margin: 0,
     maxHeight: 200,
     outline: 'none',
     overflowY: 'auto',
     padding: 0,
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    return (__assign({}, menuListBorderStyles(theme, error)));
-});
-var generatePopperOptions = function (props) {
-    var menuRef = props.menuRef, placement = props.placement, shouldAutoFlip = props.shouldAutoFlip, shouldAutoFocus = props.shouldAutoFocus;
-    var fallbackPlacements = [];
+}, ({ error, theme }) => ({
+    ...menuListBorderStyles(theme, error),
+}));
+const generatePopperOptions = (props) => {
+    const { menuRef, placement, shouldAutoFlip, shouldAutoFocus } = props;
+    let fallbackPlacements = [];
     if (shouldAutoFlip) {
         fallbackPlacements = placement === 'top' ? ['bottom'] : ['top'];
     }
-    var modifiers = [
+    const modifiers = [
         {
             name: 'flip',
             options: {
-                fallbackPlacements: fallbackPlacements,
+                fallbackPlacements,
             },
         },
         {
             name: 'offset',
             options: {
-                offset: function () {
-                    var skidding = 0;
+                offset: () => {
+                    const skidding = 0;
                     // Displace menu towards the button to obscure the bottom
                     // edge of the button and to create a smooth visual
                     // connection between the button and the menu
-                    var distance = -parseInt(borderRadius.m, 10);
+                    const distance = -parseInt(borderRadius.m, 10);
                     return [skidding, distance];
                 },
             },
@@ -159,32 +129,31 @@ var generatePopperOptions = function (props) {
         },
     ];
     return {
-        modifiers: modifiers,
+        modifiers,
         // TODO: Consider using a more general-purpose focus function here rather
         // than relying on Popper's onFirstUpdate for better control over how
         // focus is managed
-        onFirstUpdate: function () {
+        onFirstUpdate: () => {
             if (shouldAutoFocus && menuRef && menuRef.current) {
                 menuRef.current.focus();
             }
         },
     };
 };
-export var SelectMenu = function (_a) {
-    var buttonRef = _a.buttonRef, children = _a.children, error = _a.error, menuRef = _a.menuRef, onClose = _a.onClose, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.shouldAutoFlip, shouldAutoFlip = _c === void 0 ? true : _c, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? true : _d, _e = _a.visibility, visibility = _e === void 0 ? 'closed' : _e, elemProps = __rest(_a, ["buttonRef", "children", "error", "menuRef", "onClose", "placement", "shouldAutoFlip", "shouldAutoFocus", "visibility"]);
-    var model = usePopupModel({
+export const SelectMenu = ({ buttonRef, children, error, menuRef, onClose, placement = 'bottom', shouldAutoFlip = true, shouldAutoFocus = true, visibility = 'closed', ...elemProps }) => {
+    const model = usePopupModel({
         initialVisibility: 'visible',
         returnFocusRef: buttonRef,
         onHide: onClose,
     });
-    var _f = useState(0), width = _f[0], setWidth = _f[1];
-    var handleWidthChange = useCallback(function () {
+    const [width, setWidth] = useState(0);
+    const handleWidthChange = useCallback(() => {
         if (buttonRef && buttonRef.current && visibility !== 'closed') {
-            var newMenuWidth = buttonRef.current.clientWidth + 2 * buttonBorderWidth;
+            const newMenuWidth = buttonRef.current.clientWidth + 2 * buttonBorderWidth;
             setWidth(newMenuWidth);
         }
     }, [buttonRef, visibility]);
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
         handleWidthChange();
     }, [handleWidthChange]);
     // TODO: Figure out a better way to handle width changes in the reference button.
@@ -193,10 +162,10 @@ export var SelectMenu = function (_a) {
     // the case when `grow = true` and the user resizes the browser window while the
     // menu is opened, but doesn't address cases where the reference button size changes
     // through other means.
-    useEffect(function () {
+    useEffect(() => {
         // Update menu width state on resize to ensure menu resizes as window resizes
         window.addEventListener('resize', handleWidthChange);
-        return function () {
+        return () => {
             window.removeEventListener('resize', handleWidthChange);
         };
     }, [handleWidthChange]);
@@ -205,11 +174,11 @@ export var SelectMenu = function (_a) {
     useReturnFocus(model);
     useTransferOnFullscreenExit(model);
     return (React.createElement(Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
-            menuRef: menuRef,
-            placement: placement,
-            shouldAutoFlip: shouldAutoFlip,
-            shouldAutoFocus: shouldAutoFocus,
+            menuRef,
+            placement,
+            shouldAutoFlip,
+            shouldAutoFocus,
         }), ref: model.state.stackRef },
         React.createElement(Menu, { error: error, visibility: visibility, width: width },
-            React.createElement(MenuList, __assign({ error: error, ref: menuRef, role: "listbox", tabIndex: -1 }, elemProps), children))));
+            React.createElement(MenuList, Object.assign({ error: error, ref: menuRef, role: "listbox", tabIndex: -1 }, elemProps), children))));
 };

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

@@ -1,43 +1,24 @@
-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 { ErrorType, pickForegroundColor, styled, } from '@workday/canvas-kit-react/common';
 import { colors, commonColors, type } from '@workday/canvas-kit-react/tokens';
-var optionPadding = 6;
-var activeStyles = function (theme) {
-    var activeBgColor = theme.canvas.palette.primary.main;
+const optionPadding = 6;
+const activeStyles = (theme) => {
+    const activeBgColor = theme.canvas.palette.primary.main;
     return {
         backgroundColor: activeBgColor,
         color: pickForegroundColor(activeBgColor),
     };
 };
-var Option = styled('li')(__assign(__assign({}, type.levels.subtext.large), { cursor: 'default', 
+const Option = styled('li')({
+    ...type.levels.subtext.large,
+    cursor: 'default',
     // Apply listStyle at the list item style to ensure it's styled properly
     // in Visual Testing States
-    listStyle: 'none', 
+    listStyle: 'none',
     // In case the content of the option is empty/undefined for some reason
-    minHeight: type.levels.subtext.large.lineHeight, textAlign: 'left' }), function (_a) {
-    var disabled = _a["aria-disabled"], focused = _a.focused, interactive = _a.interactive, theme = _a.theme;
+    minHeight: type.levels.subtext.large.lineHeight,
+    textAlign: 'left',
+}, ({ 'aria-disabled': disabled, focused, interactive, theme }) => {
     if (disabled) {
         // If the option is disabled, return disabled styles...
         return {
@@ -46,35 +27,40 @@ var Option = styled('li')(__assign(__assign({}, type.levels.subtext.large), { cu
     }
     else if (focused) {
         // ...else if the option is focused, return focused styles...
-        return __assign({}, activeStyles(theme));
+        return {
+            ...activeStyles(theme),
+        };
     }
     else {
         // ...else return hover and selected (via aria-selected) styles
-        var selectedBgColor = theme.canvas.palette.primary.lightest;
-        var selectedStyles = {
+        const selectedBgColor = theme.canvas.palette.primary.lightest;
+        const selectedStyles = {
             '&[aria-selected="true"]': {
                 backgroundColor: selectedBgColor,
                 color: pickForegroundColor(selectedBgColor),
             },
         };
         // Only display interactive (hover/active) styles if the option is interactive
-        var interactiveStyles = interactive
+        const interactiveStyles = interactive
             ? {
                 '&:hover': {
                     backgroundColor: commonColors.hoverBackground,
                 },
-                '&:active, &:active[aria-selected="true"]': __assign({}, activeStyles(theme)),
+                '&:active, &:active[aria-selected="true"]': {
+                    ...activeStyles(theme),
+                },
             }
             : {};
-        return __assign(__assign({}, interactiveStyles), selectedStyles);
+        return {
+            // Place selected styles after interactive styles to have selected styles
+            // override interactive styles (subject to CSS specificity rules)
+            ...interactiveStyles,
+            ...selectedStyles,
+        };
     }
-}, function (_a) {
-    var error = _a.error;
-    return ({
-        padding: optionPadding + "px " + (error === ErrorType.Alert ? optionPadding - 1 : optionPadding) + "px",
-    });
-});
-export var SelectOption = function (_a) {
-    var children = _a.children, _b = _a.focused, focused = _b === void 0 ? false : _b, _c = _a.interactive, interactive = _c === void 0 ? true : _c, optionRef = _a.optionRef, value = _a.value, elemProps = __rest(_a, ["children", "focused", "interactive", "optionRef", "value"]);
-    return (React.createElement(Option, __assign({ "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option" }, elemProps), children));
+}, ({ error }) => ({
+    padding: `${optionPadding}px ${error === ErrorType.Alert ? optionPadding - 1 : optionPadding}px`,
+}));
+export const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
+    return (React.createElement(Option, Object.assign({ "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option" }, elemProps), children));
 };