@atlaskit/select 16.1.0 → 16.1.2

package/dist/es2019/createSelect.js

@@ -8,45 +8,36 @@ import * as defaultComponents from './components';
 import baseStyles from './styles';
 export default function createSelect(WrappedComponent) {
   var _class;
-
   return _class = class AtlaskitSelect extends Component {
     constructor(props) {
       super(props);
-
       _defineProperty(this, "components", {});
-
       _defineProperty(this, "select", null);
-
       _defineProperty(this, "cacheComponents", components => {
-        this.components = { ...defaultComponents,
+        this.components = {
+          ...defaultComponents,
           ...components
         };
       });
-
       _defineProperty(this, "onSelectRef", ref => {
         this.select = ref;
       });
-
       this.cacheComponents = memoizeOne(this.cacheComponents, isEqual).bind(this);
       this.cacheComponents(props.components || {});
     }
-
     UNSAFE_componentWillReceiveProps(nextProps) {
       this.cacheComponents(nextProps.components);
     }
-
     focus() {
       if (this.select) {
         this.select.focus();
       }
     }
-
     blur() {
       if (this.select) {
         this.select.blur();
       }
     }
-
     render() {
       const {
         styles,
@@ -57,19 +48,20 @@ export default function createSelect(WrappedComponent) {
         appearance,
         ...props
       } = this.props;
-      const isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
+      const isCompact = spacing === 'compact';
 
+      // props must be spread first to stop `components` being overridden
       return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
         ref: this.onSelectRef,
         isMulti: isMulti,
         "aria-live": "assertive"
       }, props, {
         components: this.components,
-        styles: mergeStyles(baseStyles( // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
+        styles: mergeStyles(baseStyles(
+        // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
         typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
       }));
     }
-
   }, _defineProperty(_class, "defaultProps", {
     validationState: 'default',
     // TODO: uncomment the next line when cleaning up validationState prop so it has a default value

package/dist/es2019/data/countries.js

@@ -1,4 +1,5 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 export const allCountries = [{
   icon: '🇦🇫',
   name: 'Afghanistan',
@@ -1245,8 +1246,9 @@ export const allCountries = [{
   name: 'Zimbabwe',
   abbr: 'ZW',
   code: '263'
-}]; // separate countries into groups
+}];
 
+// separate countries into groups
 export const groupedCountries = [{
   label: 'Suggested',
   options: allCountries.filter(c => c.suggested)

package/dist/es2019/extract-react-types/react-popper-props.js

@@ -1,2 +1,3 @@
 // this is to DOCUMENT/display the underlying react popper props, for our atlaskit/select documentation
+
 export default function ertHackForPopper(_) {}

package/dist/es2019/extract-react-types/react-select-async.js

@@ -1,2 +1,3 @@
 // for documentation ONLY
+
 export default function ertHackForPopper(_) {}

package/dist/es2019/extract-react-types/react-select-creatable.js

@@ -1,2 +1,3 @@
 // for documentation purposes ONLY
+
 export default function ertHackForSelect(_) {}

package/dist/es2019/extract-react-types/react-select-props.js

@@ -1,2 +1,3 @@
 // this is to DOCUMENT/display the underlying react select props, for our atlaskit/select documentation
+
 export default function ertHackForSelect(_) {}

package/dist/es2019/index.js

@@ -10,6 +10,7 @@ export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';
 export { default as PopupSelect } from './PopupSelect';
+
 /**
  * Types not exported on the public API, didn't find usages in sourcegraph
  *

package/dist/es2019/styles.js

@@ -7,14 +7,16 @@ export default function baseStyles(validationState, isCompact = false, appearanc
   return {
     container: (css, {
       isDisabled
-    }) => ({ ...css,
+    }) => ({
+      ...css,
       fontFamily: fontFamily(),
       // react-select disables pointer events when isDisabled is true.
       // We override this and make the inner container turn it off instead.
       pointerEvents: 'all',
       cursor: isDisabled ? 'not-allowed' : css.cursor
     }),
-    input: css => ({ ...css,
+    input: css => ({
+      ...css,
       color: "var(--ds-text, hsl(0, 0%, 20%))"
     }),
     control: (css, {
@@ -24,46 +26,37 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N20})`;
       let backgroundColor = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input, ${N20})`;
       let backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
-
       if (isDisabled) {
         backgroundColor = `var(--ds-background-disabled, ${N20})`;
         borderColor = `var(--ds-background-disabled, ${N20})`;
       }
-
       if (validationState === 'error') {
         borderColor = `var(--ds-border-danger, ${R400})`;
       }
-
       if (validationState === 'success') {
         borderColor = `var(--ds-border-success, ${G400})`;
       }
-
       let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N30})`;
-
       if (validationState === 'error') {
         borderColorHover = `var(--ds-border-danger, ${R400})`;
       }
-
       if (validationState === 'success') {
         borderColorHover = `var(--ds-border-success, ${G400})`;
       }
-
       const transitionDuration = '200ms';
-
       if (appearance === 'subtle') {
         borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : 'transparent';
         backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : 'transparent';
         backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
       }
-
       if (appearance === 'none') {
         borderColor = 'transparent';
         backgroundColor = 'transparent';
         backgroundColorHover = 'transparent';
         borderColorHover = 'transparent';
       }
-
-      return { ...css,
+      return {
+        ...css,
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,
         backgroundColor,
@@ -99,13 +92,15 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         }
       };
     },
-    valueContainer: css => ({ ...css,
+    valueContainer: css => ({
+      ...css,
       paddingLeft: paddingExcludingBorder,
       paddingRight: paddingExcludingBorder,
       paddingBottom: isCompact ? 0 : 2,
       paddingTop: isCompact ? 0 : 2
     }),
-    clearIndicator: css => ({ ...css,
+    clearIndicator: css => ({
+      ...css,
       color: `var(--ds-text-subtlest, ${N70})`,
       paddingLeft: ICON_PADDING,
       paddingRight: ICON_PADDING,
@@ -115,7 +110,8 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         color: `var(--ds-text-subtle, ${N500})`
       }
     }),
-    loadingIndicator: css => ({ ...css,
+    loadingIndicator: css => ({
+      ...css,
       paddingBottom: isCompact ? 0 : 6,
       paddingTop: isCompact ? 0 : 6
     }),
@@ -123,12 +119,11 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => {
       let color = `var(--ds-text-subtle, ${N500})`;
-
       if (isDisabled) {
         color = `var(--ds-text-disabled, ${N70})`;
       }
-
-      return { ...css,
+      return {
+        ...css,
         color,
         paddingLeft: ICON_PADDING,
         paddingRight: ICON_PADDING,
@@ -139,7 +134,8 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         }
       };
     },
-    indicatorsContainer: css => ({ ...css,
+    indicatorsContainer: css => ({
+      ...css,
       paddingRight: paddingExcludingBorder - ICON_PADDING
     }),
     option: (css, {
@@ -148,16 +144,13 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => {
       let color = `var(--ds-text, ${N800})`;
-
       if (isDisabled) {
         color = `var(--ds-text-disabled, ${N70})`;
       } else if (isSelected) {
         color = `var(--ds-text-selected, ${B400})`;
       }
-
       let boxShadow;
       let backgroundColor;
-
       if (isDisabled) {
         backgroundColor = undefined;
       } else if (isSelected && isFocused) {
@@ -167,13 +160,12 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       } else if (isFocused) {
         backgroundColor = `var(--ds-background-neutral-subtle-hovered, ${N20})`;
       }
-
       if (!isDisabled && (isFocused || isSelected)) {
         boxShadow = `inset 2px 0px 0px ${`var(--ds-border-selected, ${B400})`}`;
       }
-
       const cursor = isDisabled ? 'not-allowed' : css.cursor;
-      return { ...css,
+      return {
+        ...css,
         padding: '6px 12px',
         backgroundColor,
         color,
@@ -189,27 +181,32 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     },
     placeholder: (css, {
       isDisabled
-    }) => ({ ...css,
+    }) => ({
+      ...css,
       color: isDisabled ? `var(--ds-text-disabled, ${N300})` : `var(--ds-text-subtlest, ${N300})`
     }),
     singleValue: (css, {
       isDisabled
-    }) => ({ ...css,
+    }) => ({
+      ...css,
       color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`,
       lineHeight: `${gridSize() * 2}px` // 16px
-
     }),
-    menu: css => ({ ...css,
+
+    menu: css => ({
+      ...css,
       backgroundColor: "var(--ds-surface-overlay, white)",
       boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
     }),
-    menuList: css => ({ ...css,
+    menuList: css => ({
+      ...css,
       paddingTop: gridSize(),
       paddingBottom: gridSize()
     }),
     multiValue: (css, {
       isFocused
-    }) => ({ ...css,
+    }) => ({
+      ...css,
       borderRadius: '2px',
       backgroundColor: isFocused ? `var(--ds-background-selected, ${N40})` : `var(--ds-background-neutral, ${N40})`,
       boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
@@ -219,14 +216,16 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       },
       color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
     }),
-    multiValueLabel: css => ({ ...css,
+    multiValueLabel: css => ({
+      ...css,
       padding: '2px',
       color: 'inherit',
       paddingRight: '2px'
     }),
     multiValueRemove: (css, {
       isFocused
-    }) => ({ ...css,
+    }) => ({
+      ...css,
       backgroundColor: isFocused ? `var(--ds-UNSAFE_util-transparent, ${R75})` : undefined,
       fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
       paddingLeft: '2px',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.1.0",
+	"version": "16.1.2",
 	"sideEffects": false
 }

package/dist/esm/CheckboxSelect.js

@@ -2,23 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["components"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import Select from './Select';
 import { CheckboxOption } from './components/input-options';
-
 var CheckboxSelect = function CheckboxSelect(_ref) {
   var components = _ref.components,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   var temp = _objectSpread(_objectSpread({}, components), {}, {
     Option: CheckboxOption
   });
-
   return /*#__PURE__*/React.createElement(Select, _extends({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
@@ -26,5 +20,4 @@ var CheckboxSelect = function CheckboxSelect(_ref) {
     components: temp
   }, props));
 };
-
 export default CheckboxSelect;

package/dist/esm/CountrySelect.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { jsx, css } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
@@ -12,46 +12,43 @@ var labelStyles = css({
 });
 var flagStyles = css({
   fontSize: '18px',
-  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
-  marginRight: "var(--ds-scale-100, 8px)"
+  marginRight: "var(--ds-space-100, 8px)"
 });
-
 var Opt = function Opt(_ref) {
   var children = _ref.children,
-      icon = _ref.icon;
+    icon = _ref.icon;
   return jsx("div", {
     css: labelStyles
   }, jsx("span", {
     css: flagStyles
   }, icon), children);
-}; // return the country name; used for searching
-
+};
 
+// return the country name; used for searching
 var getOptionLabel = function getOptionLabel(_ref2) {
   var abbr = _ref2.abbr,
-      code = _ref2.code,
-      name = _ref2.name;
+    code = _ref2.code,
+    name = _ref2.name;
   return "".concat(name, " (").concat(abbr.toUpperCase(), ") +").concat(code);
-}; // set the country's abbreviation for the option value, (also searchable)
-
+};
 
+// set the country's abbreviation for the option value, (also searchable)
 var getOptionValue = function getOptionValue(opt) {
   return opt.abbr;
-}; // the text node of the control
-
+};
 
+// the text node of the control
 var controlLabel = function controlLabel(opt) {
   return jsx(Opt, {
     icon: opt.icon
   }, opt.abbr.toUpperCase());
-}; // the text node for an option
-
-
+};
+// the text node for an option
 var optionLabel = function optionLabel(_ref3) {
   var abbr = _ref3.abbr,
-      code = _ref3.code,
-      icon = _ref3.icon,
-      name = _ref3.name;
+    code = _ref3.code,
+    icon = _ref3.icon,
+    name = _ref3.name;
   return jsx(Opt, {
     icon: icon
   }, getOptionLabel({
@@ -59,15 +56,15 @@ var optionLabel = function optionLabel(_ref3) {
     code: code,
     name: name
   }));
-}; // switch formatters based on render context (menu | value)
-
+};
 
+// switch formatters based on render context (menu | value)
 var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
   var context = _ref4.context;
   return context === 'value' ? controlLabel(opt) : optionLabel(opt);
-}; // put it all together
-
+};
 
+// put it all together
 var CountrySelect = function CountrySelect(props) {
   return jsx(Select, _extends({
     isClearable: false,
@@ -78,5 +75,4 @@ var CountrySelect = function CountrySelect(props) {
     options: groupedCountries
   }, props));
 };
-
 export default CountrySelect;