@atlaskit/select 16.1.0 → 16.1.2

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -12,16 +12,17 @@ import { N80 } from '@atlaskit/theme/colors';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
 import { bind } from 'bind-event-listener';
-
 /** Are we rendering on the client or server? */
-const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement); // ==============================
+const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+// ==============================
 // Types
 // ==============================
 
-
 // ==============================
 // Class
 // ==============================
+
 const modifiers = [{
   name: 'offset',
   options: {
@@ -41,102 +42,82 @@ const defaultPopperProps = {
   modifiers,
   placement: 'bottom-start'
 };
-
 const isEmpty = obj => Object.keys(obj).length === 0;
-
 export default class PopupSelect extends PureComponent {
   constructor(...args) {
     var _this$defaultOpenStat;
-
     super(...args);
-
     _defineProperty(this, "menuRef", null);
-
     _defineProperty(this, "selectRef", null);
-
     _defineProperty(this, "targetRef", null);
-
     _defineProperty(this, "unbindWindowClick", null);
-
     _defineProperty(this, "unbindWindowKeydown", null);
-
     _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState || (this.props.isInvalid ? 'error' : 'default'), this.props.spacing === 'compact', 'default'), {
-      groupHeading: provided => ({ ...provided,
+      groupHeading: provided => ({
+        ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
       })
     }));
-
     _defineProperty(this, "isOpenControlled", this.props.isOpen !== undefined);
-
     _defineProperty(this, "defaultOpenState", this.isOpenControlled ? this.props.isOpen : this.props.defaultIsOpen);
-
     _defineProperty(this, "state", {
       focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
-
     _defineProperty(this, "popperWrapperId", `${uid({
       options: this.props.options
     })}-popup-select`);
-
     _defineProperty(this, "handleKeyDown", event => {
       switch (event.key) {
         case 'Escape':
         case 'Esc':
           this.close();
           break;
-
         default:
       }
-
       if (this.props.onKeyDown) {
         /* @ts-ignore - updating type of event React.KeyboardEvent effects the unbindWindowsKeyDown listener. Check if this can be fixed once the component gets refactor to functional */
         this.props.onKeyDown(event);
       }
     });
-
     _defineProperty(this, "handleClick", ({
       target
     }) => {
       const {
         isOpen
-      } = this.state; // appease flow
-
+      } = this.state;
+      // appease flow
       if (!(target instanceof Element)) {
         return;
-      } // NOTE: Why not use the <Blanket /> component to close?
+      }
+
+      // NOTE: Why not use the <Blanket /> component to close?
       // We don't want to interupt the user's flow. Taking this approach allows
       // user to click "through" to other elements and close the popout.
-
-
       if (isOpen && this.menuRef && !this.menuRef.contains(target)) {
         this.close();
-      } // open on target click -- we can't trust consumers to spread the onClick
-      // property to the target
-
+      }
 
+      // open on target click -- we can't trust consumers to spread the onClick
+      // property to the target
       if (!isOpen && this.targetRef && this.targetRef.contains(target)) {
         this.open();
       }
     });
-
     _defineProperty(this, "handleSelectChange", (value, actionMeta) => {
       const {
         closeMenuOnSelect,
         onChange
       } = this.props;
-
       if (closeMenuOnSelect && actionMeta.action !== 'clear') {
         this.close();
       }
-
       if (onChange) {
         onChange(value, actionMeta);
       }
     });
-
     _defineProperty(this, "handleFirstPopperUpdate", () => {
       // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
       // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
@@ -145,33 +126,26 @@ export default class PopupSelect extends PureComponent {
         focusLockEnabled: true
       });
     });
-
     _defineProperty(this, "open", options => {
       const {
         onOpen
       } = this.props;
-
       if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
         return;
       }
-
       if (onOpen) {
         onOpen();
       }
-
       this.setState({
         isOpen: true
       });
-
       if (this.selectRef) {
         this.selectRef.openMenu('first');
       }
-
       if (typeof window === 'undefined') {
         return;
       }
-
       this.unbindWindowKeydown = bind(window, {
         type: 'keydown',
         listener: this.handleKeyDown,
@@ -180,47 +154,37 @@ export default class PopupSelect extends PureComponent {
         }
       });
     });
-
     _defineProperty(this, "close", options => {
       var _this$unbindWindowKey;
-
       const {
         onClose
       } = this.props;
-
       if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
         return;
       }
-
       if (onClose) {
         onClose();
       }
-
       this.setState({
         isOpen: false
       });
       this.setState({
         focusLockEnabled: false
       });
-
       if (this.targetRef != null) {
         this.targetRef.focus();
       }
-
       if (typeof window === 'undefined') {
         return;
       }
-
       (_this$unbindWindowKey = this.unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(this);
       this.unbindWindowKeydown = null;
     });
-
     _defineProperty(this, "resolveTargetRef", popperRef => ref => {
       // avoid thrashing fn calls
       if (!this.targetRef && popperRef && ref) {
         this.targetRef = ref;
-
         if (typeof popperRef === 'function') {
           popperRef(ref);
         } else {
@@ -228,21 +192,17 @@ export default class PopupSelect extends PureComponent {
         }
       }
     });
-
     _defineProperty(this, "resolveMenuRef", popperRef => ref => {
       this.menuRef = ref;
-
       if (typeof popperRef === 'function') {
         popperRef(ref);
       } else {
         popperRef.current = ref;
       }
     });
-
     _defineProperty(this, "getSelectRef", ref => {
       this.selectRef = ref;
     });
-
     _defineProperty(this, "getItemCount", () => {
       const {
         options
@@ -257,17 +217,15 @@ export default class PopupSelect extends PureComponent {
       });
       return count;
     });
-
     _defineProperty(this, "getMaxHeight", () => {
       const {
         maxMenuHeight
       } = this.props;
-
       if (!this.selectRef) {
         return maxMenuHeight;
-      } // subtract the control height to maintain consistency
-
+      }
 
+      // subtract the control height to maintain consistency
       const showSearchControl = this.showSearchControl();
       const {
         controlRef
@@ -276,7 +234,6 @@ export default class PopupSelect extends PureComponent {
       const maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
     });
-
     _defineProperty(this, "showSearchControl", () => {
       const {
         searchThreshold,
@@ -284,7 +241,6 @@ export default class PopupSelect extends PureComponent {
       } = this.props;
       return isSearchable && this.getItemCount() > searchThreshold;
     });
-
     _defineProperty(this, "renderSelect", () => {
       const {
         footer,
@@ -301,18 +257,16 @@ export default class PopupSelect extends PureComponent {
       } = this.state;
       const showSearchControl = this.showSearchControl();
       const portalDestination = canUseDOM() ? document.body : null;
-      const components = { ...mergedComponents,
+      const components = {
+        ...mergedComponents,
         Control: showSearchControl ? mergedComponents.Control : DummyControl
       };
-
       if (!portalDestination || !isOpen) {
         return null;
       }
-
       const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: state => {
           var _mergedPopperProps$on;
-
           this.handleFirstPopperUpdate();
           (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
         }
@@ -350,39 +304,35 @@ export default class PopupSelect extends PureComponent {
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);
     });
   }
-
   static getDerivedStateFromProps(props, state) {
-    const newState = {}; // Merge consumer and default popper props
+    const newState = {};
 
-    const mergedPopperProps = { ...defaultPopperProps,
+    // Merge consumer and default popper props
+    const mergedPopperProps = {
+      ...defaultPopperProps,
       ...props.popperProps
     };
-
     if (!shallowEqualObjects(mergedPopperProps, state.mergedPopperProps)) {
       newState.mergedPopperProps = mergedPopperProps;
-    } // Merge consumer and default components
-
+    }
 
-    const mergedComponents = { ...defaultComponents,
+    // Merge consumer and default components
+    const mergedComponents = {
+      ...defaultComponents,
       ...props.components
     };
-
     if (!shallowEqualObjects(mergedComponents, state.mergedComponents)) {
       newState.mergedComponents = mergedComponents;
     }
-
     if (!isEmpty(newState)) {
       return newState;
     }
-
     return null;
   }
-
   componentDidMount() {
     if (typeof window === 'undefined') {
       return;
     }
-
     this.unbindWindowClick = bind(window, {
       type: 'click',
       listener: this.handleClick,
@@ -391,25 +341,20 @@ export default class PopupSelect extends PureComponent {
       }
     });
   }
-
   componentWillUnmount() {
     var _this$unbindWindowCli, _this$unbindWindowKey2;
-
     if (typeof window === 'undefined') {
       return;
     }
-
     (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
     this.unbindWindowClick = null;
     (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
     this.unbindWindowKeydown = null;
   }
-
   componentDidUpdate(prevProps) {
     const {
       isOpen
     } = this.props;
-
     if (prevProps.isOpen !== isOpen) {
       if (isOpen === true) {
         this.open({
@@ -421,9 +366,10 @@ export default class PopupSelect extends PureComponent {
         });
       }
     }
-  } // Event Handlers
-  // ==============================
+  }
 
+  // Event Handlers
+  // ==============================
 
   render() {
     const {
@@ -442,9 +388,7 @@ export default class PopupSelect extends PureComponent {
       'aria-controls': isOpen ? this.popperWrapperId : undefined
     })), this.renderSelect());
   }
-
 }
-
 _defineProperty(PopupSelect, "defaultProps", {
   closeMenuOnSelect: true,
   components: {},

package/dist/es2019/PopupSelect/components.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { components } from 'react-select';
 import { jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -24,7 +24,9 @@ export const MenuDialog = ({
   },
   style: style,
   id: id
-}, children); // ==============================
+}, children);
+
+// ==============================
 // Custom Components
 // ==============================
 
@@ -37,7 +39,6 @@ const DropdownIndicator = () => jsx("div", {
 }, jsx(SearchIcon, {
   label: "open"
 }));
-
 const Control = ({
   innerRef,
   innerProps,
@@ -50,16 +51,15 @@ const Control = ({
 }, jsx(components.Control, _extends({}, props, {
   innerProps: innerProps
 })));
+export const DummyControl = props => jsx(VisuallyHidden, null, jsx(components.Control, props));
 
-export const DummyControl = props => jsx(VisuallyHidden, null, jsx(components.Control, props)); // NOTE `props` intentionally omitted from `Fragment`
+// NOTE `props` intentionally omitted from `Fragment`
 // eslint-disable-next-line
-
 const Menu = ({
   children,
   innerProps,
   ...props
 }) => jsx("div", innerProps, children);
-
 export const defaultComponents = {
   Control,
   DropdownIndicator,

package/dist/es2019/RadioSelect.js

@@ -2,15 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Select from './Select';
 import { RadioOption } from './components/input-options';
-
 const RadioSelect = ({
   components,
   ...props
 }) => /*#__PURE__*/React.createElement(Select, _extends({}, props, {
   isMulti: false,
-  components: { ...components,
+  components: {
+    ...components,
     Option: RadioOption
   }
 }));
-
 export default RadioSelect;

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "16.1.0";
+const packageVersion = "16.1.2";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/components/indicators.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';

package/dist/es2019/components/input-options.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
@@ -9,7 +8,6 @@ import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { B100, B200, B300, B400, B75, DN200, DN10, DN30, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
-
 const getPrimitiveStyles = props => {
   const {
     cx,
@@ -35,7 +33,8 @@ const getPrimitiveStyles = props => {
       borderLeft: isFocused ? '2px solid transparent' : ''
     }
   };
-  const augmentedStyles = { ...getStyles('option', props),
+  const augmentedStyles = {
+    ...getStyles('option', props),
     ...styles
   };
   const bemClasses = {
@@ -43,12 +42,13 @@ const getPrimitiveStyles = props => {
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
     'option--is-selected': isSelected
-  }; // maintain react-select API
+  };
 
+  // maintain react-select API
   return [augmentedStyles, cx(bemClasses, className)];
-}; // maintains function shape
-
+};
 
+// maintains function shape
 const backgroundColor = themed({
   light: `var(--ds-background-neutral, ${N0})`,
   dark: `var(--ds-background-neutral, ${DN10})`
@@ -56,7 +56,9 @@ const backgroundColor = themed({
 const transparent = themed({
   light: 'transparent',
   dark: 'transparent'
-}); // state of the parent option
+});
+
+// state of the parent option
 
 // the primary color represents the outer or background element
 const getPrimaryColor = ({
@@ -67,7 +69,6 @@ const getPrimaryColor = ({
   ...rest
 }) => {
   let color = backgroundColor;
-
   if (isDisabled && isSelected) {
     color = themed({
       light: `var(--ds-background-disabled, ${B75})`,
@@ -104,11 +105,10 @@ const getPrimaryColor = ({
       dark: `var(--ds-background-selected-bold, ${B100})`
     });
   }
-
   return color(rest);
-}; // the secondary color represents the radio dot or checkmark
-
+};
 
+// the secondary color represents the radio dot or checkmark
 const getSecondaryColor = ({
   isActive,
   isDisabled,
@@ -119,7 +119,6 @@ const getSecondaryColor = ({
     light: `var(--ds-surface, ${N0})`,
     dark: `var(--ds-surface, ${DN10})`
   });
-
   if (isDisabled && isSelected) {
     color = themed({
       light: `var(--ds-text-disabled, ${N70})`,
@@ -133,11 +132,10 @@ const getSecondaryColor = ({
   } else if (!isSelected) {
     color = transparent;
   }
-
   return color(rest);
-}; // the border color surrounds the checkbox/radio
-
+};
 
+// the border color surrounds the checkbox/radio
 const getBorderColor = ({
   isActive,
   isDisabled,
@@ -160,31 +158,24 @@ const getBorderColor = ({
   } else if (isSelected) {
     return `var(--ds-background-selected-bold, ${B400})`;
   }
-
   return `var(--ds-border-input, ${N100})`;
 };
-
 class ControlOption extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       isActive: false
     });
-
     _defineProperty(this, "onMouseDown", () => this.setState({
       isActive: true
     }));
-
     _defineProperty(this, "onMouseUp", () => this.setState({
       isActive: false
     }));
-
     _defineProperty(this, "onMouseLeave", () => this.setState({
       isActive: false
     }));
   }
-
   render() {
     const {
       getStyles,
@@ -193,9 +184,11 @@ class ControlOption extends Component {
       innerProps,
       innerRef,
       ...rest
-    } = this.props; // prop assignment
+    } = this.props;
 
-    const props = { ...innerProps,
+    // prop assignment
+    const props = {
+      ...innerProps,
       onMouseDown: this.onMouseDown,
       onMouseUp: this.onMouseUp,
       onMouseLeave: this.onMouseLeave
@@ -224,7 +217,8 @@ class ControlOption extends Component {
           // This is an a11y fix for Select only for now but it may be rolled
           // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
           '& svg rect, & svg circle:first-of-type': {
-            stroke: getBorderColor({ ...this.props,
+            stroke: getBorderColor({
+              ...this.props,
               ...this.state
             }),
             strokeWidth: '2px',
@@ -233,10 +227,12 @@ class ControlOption extends Component {
         }
       }, !!Icon ? jsx(Icon, {
         label: "",
-        primaryColor: getPrimaryColor({ ...this.props,
+        primaryColor: getPrimaryColor({
+          ...this.props,
           ...this.state
         }),
-        secondaryColor: getSecondaryColor({ ...this.props,
+        secondaryColor: getSecondaryColor({
+          ...this.props,
           ...this.state
         })
       }) : null), jsx("div", {
@@ -249,9 +245,7 @@ class ControlOption extends Component {
       }, children))
     );
   }
-
 }
-
 export const CheckboxOption = props => jsx(ControlOption, _extends({
   Icon: CheckboxIcon
 }, props));