@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.4

package/lib/components/NavBarSection/NavBarSection.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["hasSeparator", "title", "items"],
-    _excluded2 = ["key", "children"];
+  _excluded2 = ["key", "children"];
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
@@ -10,30 +10,26 @@ import React, { useRef } from 'react';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Button, Separator, Text } from '../../';
+import { Button, Separator, Text } from '../..';
 import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
+
 /**
  * Composed component that creates a group
  * with title, and separator options.
  *
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarSection = function NavBarSection(_ref) {
   var hasSeparator = _ref.hasSeparator,
-      title = _ref.title,
-      items = _ref.items,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    title = _ref.title,
+    items = _ref.items,
+    others = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
-
   var childrenItems = _filterInstanceProperty(items).call(items, function (item) {
     return item.children;
   });
-
   return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
     variant: "separator.navBarSeparator"
   }), title && ___EmotionJSX(Text, {
@@ -55,92 +51,67 @@ var NavBarSection = function NavBarSection(_ref) {
     }));
   })));
 };
-
 var SectionItem = function SectionItem(_ref2) {
   var item = _ref2.item;
-
   var key = item.key,
-      children = item.children,
-      others = _objectWithoutProperties(item, _excluded2);
-
-  var headerButtonRef = useRef();
+    children = item.children,
+    others = _objectWithoutProperties(item, _excluded2);
   var navBarState = useNavBarContext();
   var expandedKeys = navBarState.expandedKeys,
-      setExpandedKeys = navBarState.setExpandedKeys;
-
+    setExpandedKeys = navBarState.setExpandedKeys;
   var isExpanded = _includesInstanceProperty(expandedKeys).call(expandedKeys, key);
-
   var firstChildKey = children.length ? children[0].key : null;
   var lastChildKey = children.length ? children[children.length - 1].key : null;
-
   var onExpandedChange = function onExpandedChange(isOpen) {
     var newArray;
-
     if (isOpen) {
       var _context;
-
       newArray = _concatInstanceProperty(_context = []).call(_context, expandedKeys, [key]);
     } else {
       newArray = _filterInstanceProperty(expandedKeys).call(expandedKeys, function (thiskey) {
         return thiskey !== key;
       });
     }
-
     setExpandedKeys(newArray);
   };
-
   var focusManager = useFocusManager();
-
   var _onKeyDown = function onKeyDown(e, childKey) {
     var _e$target;
-
     switch (e.which) {
       case 39:
       case 40:
         if (childKey !== lastChildKey) {
           focusManager.focusNext();
         }
-
         e.preventDefault();
         break;
-
       case 37:
       case 38:
         if (childKey !== firstChildKey) {
           focusManager.focusPrevious();
         }
-
         e.preventDefault();
         break;
-
       case 27:
         onExpandedChange(false);
-        headerButtonRef.current.focus();
         break;
-
       case 32:
         if (childKey && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.href) {
           e.target.click();
         }
-
         break;
-
       default:
         break;
     }
   };
-
   var _useKeyboard = useKeyboard({
-    onKeyDown: function onKeyDown(e) {
-      _onKeyDown(e);
-
-      e.continuePropagation();
-    }
-  }),
-      keyboardProps = _useKeyboard.keyboardProps;
-
+      onKeyDown: function onKeyDown(e) {
+        _onKeyDown(e);
+        e.continuePropagation();
+      }
+    }),
+    keyboardProps = _useKeyboard.keyboardProps;
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({
-    ref: headerButtonRef,
     variant: "variants.navBar.sectionButton",
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
@@ -152,17 +123,14 @@ var SectionItem = function SectionItem(_ref2) {
     onKeyDown: _onKeyDown
   }));
 };
-
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
 NavBarSection.propTypes = {
   /** If true, a separator will render at the end of the section */
   hasSeparator: PropTypes.bool,
-
   /** If present, this string will render at the top of the section */
   title: PropTypes.string,
-
   /**
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
    * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).

package/lib/components/NavBarSection/index.js

@@ -1,4 +1,4 @@
-export { default } from './NavBarSection';
+export { default as NavBarItem } from './NavBarItem';
 export { default as NavBarItemButton } from './NavBarItemButton';
 export { default as NavBarItemLink } from './NavBarItemLink';
-export { default as NavBarItem } from './NavBarItem';
+export { default } from './NavBarSection';

package/lib/components/NumberField/NumberField.js

@@ -10,25 +10,23 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
-import omit from 'lodash/omit';
-import PropTypes from 'prop-types';
-import MenuDown from 'mdi-react/MenuDownIcon';
-import MenuUp from 'mdi-react/MenuUpIcon';
 import { mergeProps, useNumberField } from 'react-aria';
 import { useNumberFieldState } from 'react-stately';
 import { useLocale } from '@react-aria/i18n';
+import omit from 'lodash/omit';
+import MenuDown from 'mdi-react/MenuDownIcon';
+import MenuUp from 'mdi-react/MenuUpIcon';
+import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+
 /**
  * Number fields allow users to enter a number, and increment or
  * decrement the value using stepper buttons.
@@ -37,42 +35,34 @@ import statuses from '../../utils/devUtils/constants/statuses';
  * and [useNumberFieldState](https://react-spectrum.adobe.com/react-stately/useNumberFieldState.html) from
  * React Stately.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-      status = props.status;
-
+    status = props.status;
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
   var inputRef = React.useRef();
   var incrRef = React.useRef();
   var decRef = React.useRef();
-
   var _useNumberField = useNumberField(props, state, inputRef),
-      labelProps = _useNumberField.labelProps,
-      groupProps = _useNumberField.groupProps,
-      inputProps = _useNumberField.inputProps,
-      incrementButtonProps = _useNumberField.incrementButtonProps,
-      decrementButtonProps = _useNumberField.decrementButtonProps;
-
+    labelProps = _useNumberField.labelProps,
+    groupProps = _useNumberField.groupProps,
+    inputProps = _useNumberField.inputProps,
+    incrementButtonProps = _useNumberField.incrementButtonProps,
+    decrementButtonProps = _useNumberField.decrementButtonProps;
   var _useField = useField(props),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var ControlArrows = ___EmotionJSX(Box, {
     variant: "forms.numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
@@ -89,10 +79,10 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
     size: 18
-  }))); // this needed to remove console warning in React 16
-  // I believe once we update to 17 - we can remove this
-
+  })));
 
+  // this needed to remove console warning in React 16
+  // I believe once we update to 17 - we can remove this
   var onInputFocus = useCallback(function (e) {
     e.persist();
     fieldControlInputProps.onFocus(e);
@@ -109,33 +99,26 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
       onBlur: onInputBlur
     });
   }, [fieldControlInputProps, onInputBlur, onInputFocus]);
-
   var onInputChange = function onInputChange(e) {
     var _context;
-
     var minValue = props.minValue;
-
     var trimmedInputValue = _trimInstanceProperty(_context = e.target.value).call(_context);
-
     var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
       target: _objectSpread(_objectSpread({}, e.target), {}, {
         value: trimmedInputValue
       })
     });
-
     if (!trimmedInputValue && typeof minValue !== 'undefined') {
       var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
         target: _objectSpread(_objectSpread({}, e.target), {}, {
           value: minValue.toString()
         })
       });
-
       inputProps.onChange(minValueEvent);
     } else {
       inputProps.onChange(trimmedValueEvent);
     }
   };
-
   inputProps['aria-roledescription'] = null;
   var helperTextId = useMemo(function () {
     return uuid();
@@ -146,9 +129,9 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.numberField.arrowsWrapper"
   }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
     variant: "forms.input.numberField",
-    ref: inputRef // we don't want to merge this props, we want to
+    ref: inputRef
+    // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
-
   }, updatedFieldControlInputProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
     onChange: onInputChange,
     "aria-describedby": helperText && helperTextId,
@@ -163,85 +146,63 @@ NumberField.propTypes = _objectSpread(_objectSpread({
   /** A custom aria-label for the decrement button.
    * If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel: PropTypes.string,
-
   /** A custom aria-label for the increment button.
    * If not provided, the localized string "Increment" is used. */
   incrementAriaLabel: PropTypes.string,
-
   /** Formatting options for the value displayed in the number field.
    * This also affects what characters are allowed to be typed by the user.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
    * */
   formatOptions: PropTypes.shape({}),
-
   /** Whether the input is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether user input is required on the input before form submission. */
   isRequired: PropTypes.bool,
-
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onFocus: PropTypes.func,
-
   /** Handler that is called when the element's focus status changes. */
   onFocusChange: PropTypes.func,
-
   /** Handler that is called when a key is pressed. */
   onKeyDown: PropTypes.func,
-
   /** Handler that is called when a key is released. */
   onKeyUp: PropTypes.func,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: PropTypes.string,
-
   /** The amount that the input value changes with each increment or decrement "tick".
    * The step prop can be used to snap the value to certain increments.
    * You can read more about this prop here
    * [Step values](https://react-spectrum.adobe.com/react-aria/useNumberField.html#step-values)
    * */
   step: PropTypes.number,
-
   /** The smallest value allowed for the input. */
   minValue: PropTypes.number,
-
   /** The largest value allowed for the input. */
   maxValue: PropTypes.number,
-
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /**
    * Handler that is called when the value changes.
    * (value: number) => void
    */
   onChange: PropTypes.func,
-
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** The default value (uncontrolled). */
   defaultValue: PropTypes.number,
-
   /** The current value (controlled). */
   value: PropTypes.number
 }, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);

package/lib/components/NumberField/NumberField.stories.js

@@ -8,16 +8,13 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState } from 'react';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import NumberField from './NumberField';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/NumberField',
@@ -120,10 +117,9 @@ export var Decimals = function Decimals() {
 };
 export var ControlledState = function ControlledState() {
   var _useState = useState(12),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return ___EmotionJSX(NumberField, {
     label: "Controlled State",
     value: value,

package/lib/components/NumberField/NumberField.styles.js

@@ -7,15 +7,11 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 var _objectSpread2;
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import { input } from '../Input/Input.styles';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { input } from '../Input/Input.styles';
 var sharedStyles = {
   WebkitAppearance: 'none',
   margin: 0
@@ -27,7 +23,6 @@ var noDefaultArrows = {
     MozAppearance: 'textfield'
   }
 };
-
 var arrowsWrapper = _objectSpread(_objectSpread({
   display: 'flex',
   justifyContent: 'center',
@@ -39,7 +34,6 @@ var arrowsWrapper = _objectSpread(_objectSpread({
 }), _defineProperty(_objectSpread2, "&.is-".concat(statuses.WARNING, "::after"), {
   bg: 'warning.bright'
 }), _objectSpread2));
-
 var arrows = {
   position: 'absolute',
   right: '10px'

package/lib/components/NumberField/NumberField.test.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { fireEvent } from '@testing-library/react';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import userEvent from '@testing-library/user-event';
 import { NumberField } from '../../index';
-import axeTest from '../../utils/testUtils/testAxe';
 import statuses from '../../utils/devUtils/constants/statuses';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-NumberField';
 var testLabel = 'test-NumberField-label';
@@ -22,13 +22,12 @@ var defaultProps = {
   incrementAriaLabel: incrementAriaLabel,
   decrementAriaLabel: decrementAriaLabel
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NumberField, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent, {
   // ListItem represents list's child without parent
   rules: {

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -3,12 +3,13 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "isOpen", "onClose", "className", "state", "size", "triggerRef"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { FocusScope } from 'react-aria';
-import { Box } from '../../';
-import { useStatusClasses, useOverlayPanelState } from '../../hooks';
+import PropTypes from 'prop-types';
+import { Box } from '../..';
+import { useOverlayPanelState, useStatusClasses } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+
 /**
  * In Astro, side panels are used to show details and present modal interactions.
  *
@@ -16,43 +17,34 @@ import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
  * This is a Storybook only issue and will not effect the way it works in your app. Be sure to
  * use Chrome or Safari to view how this component works.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$sx;
-
   var children = props.children,
-      isOpen = props.isOpen,
-      onCloseProp = props.onClose,
-      className = props.className,
-      state = props.state,
-      size = props.size,
-      triggerRef = props.triggerRef,
-      others = _objectWithoutProperties(props, _excluded);
-
+    isOpen = props.isOpen,
+    onCloseProp = props.onClose,
+    className = props.className,
+    state = props.state,
+    size = props.size,
+    triggerRef = props.triggerRef,
+    others = _objectWithoutProperties(props, _excluded);
   var _useOverlayPanelState = useOverlayPanelState(),
-      onClose = _useOverlayPanelState.onClose;
-
+    onClose = _useOverlayPanelState.onClose;
   var overlayPanelRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return overlayPanelRef.current;
   });
-
   var _useStatusClasses = useStatusClasses(className, _defineProperty({
-    isOpen: isOpen
-  }, "is-".concat(props !== null && props !== void 0 && (_props$sx = props.sx) !== null && _props$sx !== void 0 && _props$sx.width ? 'custom' : size), size)),
-      classNames = _useStatusClasses.classNames;
-
+      isOpen: isOpen
+    }, "is-".concat(props !== null && props !== void 0 && (_props$sx = props.sx) !== null && _props$sx !== void 0 && _props$sx.width ? 'custom' : size), size)),
+    classNames = _useStatusClasses.classNames;
   var handleClose = function handleClose(e) {
     e.stopPropagation();
-
     if (e.key === 'Escape') {
       onClose(state, triggerRef, onCloseProp);
     }
   };
-
   return ___EmotionJSX(FocusScope, {
     autoFocus: true
   }, ___EmotionJSX(Box, _extends({
@@ -69,23 +61,18 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
 OverlayPanel.propTypes = {
   /** Sets the open state of the menu. */
   isOpen: PropTypes.bool,
-
   /** Sets the size of the overlay panel. */
   size: PropTypes.oneOf(_Object$values(panelSizes)),
-
   /** JSX styling that is passed into the component. */
   sx: PropTypes.shape({
     width: PropTypes.string
   }),
-
   /** State object that is passed in from the useOverlayPanelState hook */
   state: PropTypes.shape({
     close: PropTypes.func
   }),
-
   /** Callback function that runs when the esc key is used to close the OverlayPanel. */
   onClose: PropTypes.func,
-
   /** Ref that is connected to the button that triggers the overlay state.
    Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
   triggerRef: PropTypes.shape({})