@workday/canvas-kit-preview-react 7.1.5 → 7.2.0-427-next.2

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

@@ -1,56 +1,52 @@
-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';
 import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import SelectMenu from './SelectMenu';
-import SelectOption from './SelectOption';
+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;
 };
-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 @@ 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 @@ 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,29 +175,28 @@ 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 }),
         hasOptions && menuVisibility !== 'closed' && (React.createElement(SelectMenu, { "aria-activedescendant": options[focusedOptionIndex].id, "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired || required ? true : undefined, buttonRef: localButtonRef, id: menuId, error: error, menuRef: menuRef, onKeyDown: onKeyDown, onClose: onClose, placement: menuPlacement, shouldAutoFlip: shouldMenuAutoFlip, shouldAutoFocus: shouldMenuAutoFocus, visibility: menuVisibility }, renderOptions(renderOption))),
         React.createElement(SelectMenuIcon, { className: "menu-icon", icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500, size: menuIconSize })));
 };
-export default SelectBase;

package/dist/es6/select/lib/SelectMenu.d.ts

@@ -37,6 +37,6 @@ interface SelectMenuProps extends Themeable, React.HTMLAttributes<HTMLUListEleme
     visibility?: MenuVisibility;
 }
 export declare const menuAnimationDuration = 200;
-declare const SelectMenu: ({ buttonRef, children, error, menuRef, onClose, placement, shouldAutoFlip, shouldAutoFocus, visibility, ...elemProps }: SelectMenuProps) => JSX.Element;
-export default SelectMenu;
+export declare const SelectMenu: ({ buttonRef, children, error, menuRef, onClose, placement, shouldAutoFlip, shouldAutoFocus, visibility, ...elemProps }: SelectMenuProps) => JSX.Element;
+export {};
 //# sourceMappingURL=SelectMenu.d.ts.map

package/dist/es6/select/lib/SelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,QAAA,MAAM,UAAU,2HAWb,eAAe,gBA2DjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,eAAO,MAAM,UAAU,2HAWpB,eAAe,gBA2DjB,CAAC"}

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();
             }
         },
     };
 };
-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 @@ 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,12 +174,11 @@ 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))));
 };
-export default SelectMenu;

package/dist/es6/select/lib/SelectOption.d.ts

@@ -28,6 +28,5 @@ export interface SelectOptionProps extends Themeable, React.LiHTMLAttributes<HTM
      */
     value?: string;
 }
-declare const SelectOption: ({ children, focused, interactive, optionRef, value, ...elemProps }: SelectOptionProps) => JSX.Element;
-export default SelectOption;
+export declare const SelectOption: ({ children, focused, interactive, optionRef, value, ...elemProps }: SelectOptionProps) => JSX.Element;
 //# sourceMappingURL=SelectOption.d.ts.map

package/dist/es6/select/lib/SelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,QAAA,MAAM,YAAY,uEAOf,iBAAiB,gBAanB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,eAAO,MAAM,YAAY,uEAOtB,iBAAiB,gBAanB,CAAC"}