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

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

@@ -1,15 +1,4 @@
 "use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,50 +18,57 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectBase = exports.buttonDefaultWidth = exports.buttonBorderWidth = void 0;
-var react_1 = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var SelectMenu_1 = require("./SelectMenu");
-var SelectOption_1 = require("./SelectOption");
-var scrolling_1 = require("./scrolling");
-var utils_1 = require("./utils");
+const react_1 = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const SelectMenu_1 = require("./SelectMenu");
+const SelectOption_1 = require("./SelectOption");
+const scrolling_1 = require("./scrolling");
+const utils_1 = require("./utils");
 exports.buttonBorderWidth = 1;
 exports.buttonDefaultWidth = 280;
-var menuIconSize = 24;
-var buttonPadding = tokens_1.spaceNumbers.xxs - exports.buttonBorderWidth;
-var SelectButton = common_1.styled('button')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { border: exports.buttonBorderWidth + "px solid " + tokens_1.inputColors.border, cursor: 'default', display: 'block', backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', height: tokens_1.space.xl, outline: 'none', overflow: 'hidden', padding: buttonPadding, paddingRight: tokens_1.spaceNumbers.xxs + menuIconSize + buttonPadding, textAlign: 'left', textOverflow: 'ellipsis', transition: '0.2s box-shadow, 0.2s border-color', whiteSpace: 'nowrap', 
+const menuIconSize = 24;
+const buttonPadding = tokens_1.spaceNumbers.xxs - exports.buttonBorderWidth;
+const SelectButton = common_1.styled('button')({
+    ...tokens_1.type.levels.subtext.large,
+    border: `${exports.buttonBorderWidth}px solid ${tokens_1.inputColors.border}`,
+    cursor: 'default',
+    display: 'block',
+    backgroundColor: tokens_1.inputColors.background,
+    borderRadius: tokens_1.borderRadius.m,
+    boxSizing: 'border-box',
+    height: tokens_1.space.xl,
+    outline: 'none',
+    overflow: 'hidden',
+    padding: buttonPadding,
+    paddingRight: tokens_1.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: exports.buttonDefaultWidth, '&::placeholder': {
+    width: exports.buttonDefaultWidth,
+    '&::placeholder': {
         color: tokens_1.inputColors.placeholder,
-    }, '&:disabled': {
+    },
+    '&:disabled': {
         backgroundColor: tokens_1.inputColors.disabled.background,
         borderColor: tokens_1.inputColors.disabled.border,
         color: tokens_1.inputColors.disabled.text,
         '&::placeholder': {
             color: tokens_1.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
@@ -80,21 +76,22 @@ var SelectButton = common_1.styled('button')(__assign(__assign({}, tokens_1.type
         // 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: tokens_1.inputColors.hoverBorder,
                 },
             }
-            : __assign({}, buttonFocusStyles);
+            : { ...buttonFocusStyles };
     }
-    return __assign({}, common_1.errorRing(error, theme));
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        width: '100%',
+    return {
+        ...common_1.errorRing(error, theme),
     };
+}, ({ grow }) => grow && {
+    width: '100%',
 });
-var SelectMenuIcon = common_1.styled(icon_1.SystemIcon)({
+const SelectMenuIcon = common_1.styled(icon_1.SystemIcon)({
     position: 'absolute',
     top: tokens_1.space.xxxs,
     right: tokens_1.space.xxxs,
@@ -104,57 +101,65 @@ var SelectMenuIcon = common_1.styled(icon_1.SystemIcon)({
         transition: '100ms fill',
     },
 });
-var SelectInput = common_1.styled('input')({
+const SelectInput = common_1.styled('input')({
     display: 'none',
 });
-var SelectWrapper = common_1.styled('div')({
+const SelectWrapper = common_1.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 : tokens_1.colors.licorice500,
-        },
-    });
-});
-var defaultRenderOption = function (option) {
+}, ({ grow }) => ({
+    display: grow ? 'block' : 'inline-block',
+}), ({ disabled }) => ({
+    '&:hover .menu-icon path': {
+        fill: disabled ? undefined : tokens_1.colors.licorice500,
+    },
+}));
+const defaultRenderOption = option => {
     return react_1.default.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_1.default.useRef(null);
-    var menuId = common_1.useUniqueId();
-    var renderOptions = function (renderOption) {
-        var selectedOptionIndex = utils_1.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);
-                    },
-                }
-                : {}));
+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_1.default.useRef(null);
+    const menuId = common_1.useUniqueId();
+    const renderOptions = (renderOption) => {
+        const selectedOptionIndex = utils_1.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_1.default.createElement(SelectOption_1.SelectOption, __assign({}, optionProps), renderOption(normalizedOption));
+            const normalizedOption = {
+                ...option,
+                focused: optionProps.focused,
+                selected: !!optionProps['aria-selected'],
+            };
+            return react_1.default.createElement(SelectOption_1.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
-    react_1.useLayoutEffect(function () {
-        var focusedOption = focusedOptionRef.current;
+    react_1.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.
@@ -167,7 +172,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
@@ -175,16 +180,16 @@ var SelectBase = function (_a) {
                 // call our own scrollIntoViewIfNeeded function.
                 scrolling_1.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
-    react_1.useLayoutEffect(function () {
-        var focusedOption = focusedOptionRef.current;
+    react_1.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)
@@ -192,25 +197,25 @@ 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(() => {
                 scrolling_1.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[utils_1.getCorrectedIndexByValue(options, value)] : null;
-    var selectedOptionValue = selectedOption ? selectedOption.value : '';
+    const hasOptions = options.length > 0;
+    const selectedOption = hasOptions ? options[utils_1.getCorrectedIndexByValue(options, value)] : null;
+    const selectedOptionValue = selectedOption ? selectedOption.value : '';
     return (react_1.default.createElement(SelectWrapper, { grow: grow, disabled: disabled },
-        react_1.default.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_1.default.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_1.default.createElement(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }),

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

@@ -1,15 +1,4 @@
 "use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,29 +18,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectMenu = exports.menuAnimationDuration = void 0;
-var react_1 = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var SelectBase_1 = require("./SelectBase");
+const react_1 = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const SelectBase_1 = require("./SelectBase");
 exports.menuAnimationDuration = 200;
-var menuBorderStyles = function (theme, error) {
-    var borderColor = theme.canvas.palette.common.focusOutline;
-    var dividerBorderColor = borderColor;
-    var dividerBorderWidth = 1;
+const menuBorderStyles = (theme, error) => {
+    let borderColor = theme.canvas.palette.common.focusOutline;
+    let dividerBorderColor = borderColor;
+    let dividerBorderWidth = 1;
     if (error === common_1.ErrorType.Error) {
         borderColor = theme.canvas.palette.error.main;
         dividerBorderColor = borderColor;
@@ -61,7 +39,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
@@ -84,9 +62,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 === common_1.ErrorType.Error) {
         borderColor = theme.canvas.palette.error.main;
     }
@@ -94,7 +72,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,
@@ -106,67 +84,59 @@ var menuListBorderStyles = function (theme, error) {
         },
     };
 };
-var Menu = common_1.styled('div')({
+const Menu = common_1.styled('div')({
     backgroundColor: tokens_1.colors.frenchVanilla100,
-    border: "1px solid " + tokens_1.inputColors.border,
+    border: `1px solid ${tokens_1.inputColors.border}`,
     boxSizing: 'border-box',
     position: 'relative',
-    transition: "opacity " + exports.menuAnimationDuration + "ms",
+    transition: `opacity ${exports.menuAnimationDuration}ms`,
     '[data-popper-placement="bottom"] &': {
-        borderRadius: "0 0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m,
+        borderRadius: `0 0 ${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m}`,
         borderTop: 0,
     },
     '[data-popper-placement="top"] &': {
-        borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0 0",
+        borderRadius: `${tokens_1.borderRadius.m} ${tokens_1.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 = common_1.styled('ul')({
+}, ({ error, theme }) => ({
+    ...menuBorderStyles(theme, error),
+}), ({ visibility }) => ({
+    opacity: visibility === 'opening' || visibility === 'opened' || visibility === 'close' ? 1 : 0,
+}), ({ width }) => ({
+    width: width,
+}));
+const MenuList = common_1.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(tokens_1.borderRadius.m, 10);
+                    const distance = -parseInt(tokens_1.borderRadius.m, 10);
                     return [skidding, distance];
                 },
             },
@@ -181,32 +151,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 = popup_1.usePopupModel({
+const SelectMenu = ({ buttonRef, children, error, menuRef, onClose, placement = 'bottom', shouldAutoFlip = true, shouldAutoFocus = true, visibility = 'closed', ...elemProps }) => {
+    const model = popup_1.usePopupModel({
         initialVisibility: 'visible',
         returnFocusRef: buttonRef,
         onHide: onClose,
     });
-    var _f = react_1.useState(0), width = _f[0], setWidth = _f[1];
-    var handleWidthChange = react_1.useCallback(function () {
+    const [width, setWidth] = react_1.useState(0);
+    const handleWidthChange = react_1.useCallback(() => {
         if (buttonRef && buttonRef.current && visibility !== 'closed') {
-            var newMenuWidth = buttonRef.current.clientWidth + 2 * SelectBase_1.buttonBorderWidth;
+            const newMenuWidth = buttonRef.current.clientWidth + 2 * SelectBase_1.buttonBorderWidth;
             setWidth(newMenuWidth);
         }
     }, [buttonRef, visibility]);
-    react_1.useLayoutEffect(function () {
+    react_1.useLayoutEffect(() => {
         handleWidthChange();
     }, [handleWidthChange]);
     // TODO: Figure out a better way to handle width changes in the reference button.
@@ -215,10 +184,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.
-    react_1.useEffect(function () {
+    react_1.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]);
@@ -227,12 +196,12 @@ var SelectMenu = function (_a) {
     popup_1.useReturnFocus(model);
     popup_1.useTransferOnFullscreenExit(model);
     return (react_1.default.createElement(popup_1.Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
-            menuRef: menuRef,
-            placement: placement,
-            shouldAutoFlip: shouldAutoFlip,
-            shouldAutoFocus: shouldAutoFocus,
+            menuRef,
+            placement,
+            shouldAutoFlip,
+            shouldAutoFocus,
         }), ref: model.state.stackRef },
         react_1.default.createElement(Menu, { error: error, visibility: visibility, width: width },
-            react_1.default.createElement(MenuList, __assign({ error: error, ref: menuRef, role: "listbox", tabIndex: -1 }, elemProps), children))));
+            react_1.default.createElement(MenuList, Object.assign({ error: error, ref: menuRef, role: "listbox", tabIndex: -1 }, elemProps), children))));
 };
 exports.SelectMenu = SelectMenu;