@atlaskit/select - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

 # @atlaskit/select
 
+## 0.1.4
+
+- [patch] misc updates to select package [bd000c7](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bd000c7)
+
 ## 0.1.3
@@ -4,0 +8,0 @@ - [patch] added temporary SelectWraper to demonstrate validation [0ef5343](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/0ef5343)

dist/cjs/components/input-options.js

@@ -135,2 +135,3 @@ 'use strict';
       var _props = this.props,
+          getStyles = _props.getStyles,
           Icon = _props.Icon,
@@ -141,5 +142,6 @@ isDisabled = _props.isDisabled,
           children = _props.children,
-          props = (0, _objectWithoutProperties3.default)(_props, ['Icon', 'isDisabled', 'isFocused', 'isSelected', 'children']);
+          innerProps = _props.innerProps;
       var isActive = this.state.isActive;
 
+      // styles
 
@@ -150,15 +152,26 @@ var bg = 'transparent';
 
+      var style = {
+        alignItems: 'center',
+        backgroundColor: bg,
+        color: 'inherit',
+        display: 'flex '
+      };
+
+      // prop assignment
+      var props = (0, _extends3.default)({}, innerProps, {
+        onMouseDown: this.onMouseDown,
+        onMouseUp: this.onMouseUp,
+        onMouseLeave: this.onMouseLeave,
+        style: style
+      });
+
       return _react2.default.createElement(
         _reactSelect.components.Option,
-        (0, _extends3.default)({
-          onMouseDown: this.onMouseDown,
-          onMouseUp: this.onMouseUp,
-          onMouseLeave: this.onMouseLeave,
-          style: {
-            alignItems: 'center',
-            backgroundColor: bg,
-            color: 'inherit',
-            display: 'flex '
-          }
-        }, props),
+        {
+          isDisabled: isDisabled,
+          isFocused: isFocused,
+          isSelected: isSelected,
+          getStyles: getStyles,
+          innerProps: props
+        },
         _react2.default.createElement(Icon, {
@@ -165,0 +178,0 @@ primaryColor: getPrimaryColor((0, _extends3.default)({}, this.props, this.state)),

dist/cjs/index.js

@@ -25,2 +25,11 @@ 'use strict';
 
+var _CountrySelect = require('./CountrySelect');
+
+Object.defineProperty(exports, 'CountrySelect', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CountrySelect).default;
+  }
+});
+
 var _RadioSelect = require('./RadioSelect');
@@ -27,0 +36,0 @@

dist/cjs/Select.js

@@ -61,16 +61,3 @@ 'use strict';
 var defaultProps = {
-  backspaceRemovesValue: true,
-  closeMenuOnSelect: true,
-  deleteRemovesValue: true,
-  disabledKey: 'disabled',
-  escapeClearsValue: false,
-  hideSelectedOptions: true,
-  isClearable: true,
-  isDisabled: false,
-  isMulti: false,
-  maxMenuHeight: 300,
-  maxValueHeight: 100,
-  options: [],
-  placeholder: 'Select...',
-  tabSelectsValue: false
+  validationState: 'default'
 };
@@ -109,11 +96,4 @@
 
-      var controlBorderColor = _theme.colors.N40;
-      if (validationState === 'error') controlBorderColor = _theme.colors.R400;
-      if (validationState === 'success') controlBorderColor = _theme.colors.G400;
+      // props must be spread first to stop `components` being overridden
 
-      var controlBorderColorHover = _theme.colors.N50;
-      if (validationState === 'error') controlBorderColorHover = _theme.colors.R300;
-      if (validationState === 'success') controlBorderColorHover = _theme.colors.G300;
-
-      // props must be spread first to stop `components` being overridden
       return _react2.default.createElement(_reactSelect2.default, (0, _extends3.default)({}, props, {
@@ -124,11 +104,26 @@ components: this.components,
             var isFocused = _ref.isFocused;
+
+            var borderColor = isFocused ? _theme.colors.B100 : _theme.colors.N20;
+            if (validationState === 'error') borderColor = _theme.colors.R400;
+            if (validationState === 'success') borderColor = _theme.colors.G400;
+
+            var borderColorHover = isFocused ? _theme.colors.B100 : _theme.colors.N20;
+            if (validationState === 'error') borderColorHover = _theme.colors.R400;
+            if (validationState === 'success') borderColorHover = _theme.colors.G400;
+
+            var lgBorder = isFocused || validationState !== 'default';
+            var transitionDuration = '200ms';
+
             return (0, _extends3.default)({}, styles, {
               backgroundColor: isFocused ? _theme.colors.N0 : _theme.colors.N10,
-              borderColor: isFocused ? _theme.colors.B300 : controlBorderColor,
+              borderColor: borderColor,
               borderStyle: 'solid',
-              borderWidth: 2,
+              borderWidth: lgBorder ? 2 : 1,
               boxShadow: 'none',
+              padding: lgBorder ? 0 : 1,
+              transition: 'background-color ' + transitionDuration + ' ease-in-out,\n                border-color ' + transitionDuration + ' ease-in-out',
 
               ':hover': {
-                borderColor: isFocused ? _theme.colors.B300 : controlBorderColorHover
+                backgroundColor: isFocused ? _theme.colors.N0 : _theme.colors.N20,
+                borderColor: borderColorHover
               }
@@ -141,2 +136,4 @@ });
               color: isFocused ? _theme.colors.N200 : _theme.colors.N80,
+              paddingBottom: 6,
+              paddingTop: 6,
 
@@ -158,2 +155,8 @@ ':hover': {
             return (0, _extends3.default)({}, styles, { backgroundColor: backgroundColor, color: color });
+          },
+          placeholder: function placeholder(styles) {
+            return (0, _extends3.default)({}, styles, { color: _theme.colors.N100 });
+          },
+          singleValue: function singleValue(styles) {
+            return (0, _extends3.default)({}, styles, { color: _theme.colors.N900 });
           }
@@ -160,0 +163,0 @@ }

dist/esm/components/input-options.js

@@ -94,2 +94,3 @@ import _extends from 'babel-runtime/helpers/extends';
       var _props = this.props,
+          getStyles = _props.getStyles,
           Icon = _props.Icon,
@@ -100,6 +101,6 @@ isDisabled = _props.isDisabled,
           children = _props.children,
-          props = _objectWithoutProperties(_props, ['Icon', 'isDisabled', 'isFocused', 'isSelected', 'children']);
-
+          innerProps = _props.innerProps;
       var isActive = this.state.isActive;
 
+      // styles
 
@@ -110,15 +111,26 @@ var bg = 'transparent';
 
+      var style = {
+        alignItems: 'center',
+        backgroundColor: bg,
+        color: 'inherit',
+        display: 'flex '
+      };
+
+      // prop assignment
+      var props = _extends({}, innerProps, {
+        onMouseDown: this.onMouseDown,
+        onMouseUp: this.onMouseUp,
+        onMouseLeave: this.onMouseLeave,
+        style: style
+      });
+
       return React.createElement(
         components.Option,
-        _extends({
-          onMouseDown: this.onMouseDown,
-          onMouseUp: this.onMouseUp,
-          onMouseLeave: this.onMouseLeave,
-          style: {
-            alignItems: 'center',
-            backgroundColor: bg,
-            color: 'inherit',
-            display: 'flex '
-          }
-        }, props),
+        {
+          isDisabled: isDisabled,
+          isFocused: isFocused,
+          isSelected: isSelected,
+          getStyles: getStyles,
+          innerProps: props
+        },
         React.createElement(Icon, {
@@ -125,0 +137,0 @@ primaryColor: getPrimaryColor(_extends({}, this.props, this.state)),

dist/esm/index.js

 export { default } from './Select';
 export { default as CheckboxSelect } from './CheckboxSelect';
+export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';

dist/esm/Select.js

@@ -19,16 +19,3 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 var defaultProps = {
-  backspaceRemovesValue: true,
-  closeMenuOnSelect: true,
-  deleteRemovesValue: true,
-  disabledKey: 'disabled',
-  escapeClearsValue: false,
-  hideSelectedOptions: true,
-  isClearable: true,
-  isDisabled: false,
-  isMulti: false,
-  maxMenuHeight: 300,
-  maxValueHeight: 100,
-  options: [],
-  placeholder: 'Select...',
-  tabSelectsValue: false
+  validationState: 'default'
 };
@@ -67,11 +54,5 @@
 
-      var controlBorderColor = colors.N40;
-      if (validationState === 'error') controlBorderColor = colors.R400;
-      if (validationState === 'success') controlBorderColor = colors.G400;
+      // props must be spread first to stop `components` being overridden
 
-      var controlBorderColorHover = colors.N50;
-      if (validationState === 'error') controlBorderColorHover = colors.R300;
-      if (validationState === 'success') controlBorderColorHover = colors.G300;
 
-      // props must be spread first to stop `components` being overridden
       return React.createElement(Select, _extends({}, props, {
@@ -82,11 +63,26 @@ components: this.components,
             var isFocused = _ref.isFocused;
+
+            var borderColor = isFocused ? colors.B100 : colors.N20;
+            if (validationState === 'error') borderColor = colors.R400;
+            if (validationState === 'success') borderColor = colors.G400;
+
+            var borderColorHover = isFocused ? colors.B100 : colors.N20;
+            if (validationState === 'error') borderColorHover = colors.R400;
+            if (validationState === 'success') borderColorHover = colors.G400;
+
+            var lgBorder = isFocused || validationState !== 'default';
+            var transitionDuration = '200ms';
+
             return _extends({}, styles, {
               backgroundColor: isFocused ? colors.N0 : colors.N10,
-              borderColor: isFocused ? colors.B300 : controlBorderColor,
+              borderColor: borderColor,
               borderStyle: 'solid',
-              borderWidth: 2,
+              borderWidth: lgBorder ? 2 : 1,
               boxShadow: 'none',
+              padding: lgBorder ? 0 : 1,
+              transition: 'background-color ' + transitionDuration + ' ease-in-out,\n                border-color ' + transitionDuration + ' ease-in-out',
 
               ':hover': {
-                borderColor: isFocused ? colors.B300 : controlBorderColorHover
+                backgroundColor: isFocused ? colors.N0 : colors.N20,
+                borderColor: borderColorHover
               }
@@ -99,2 +95,4 @@ });
               color: isFocused ? colors.N200 : colors.N80,
+              paddingBottom: 6,
+              paddingTop: 6,
 
@@ -116,2 +114,8 @@ ':hover': {
             return _extends({}, styles, { backgroundColor: backgroundColor, color: color });
+          },
+          placeholder: function placeholder(styles) {
+            return _extends({}, styles, { color: colors.N100 });
+          },
+          singleValue: function singleValue(styles) {
+            return _extends({}, styles, { color: colors.N900 });
           }
@@ -118,0 +122,0 @@ }

dist/package.json

 {
 	"name": "@atlaskit/select",
-	"version": "0.1.2"
+	"version": "0.1.3"
 }

package.json

 {
   "name": "@atlaskit/select",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React component which allows selection of item(s) from a dropdown list.",
@@ -26,3 +26,3 @@ "license": "Apache-2.0",
     "@atlaskit/theme": "^2.3.1",
-    "react-select": "2.0.0-alpha.2",
+    "react-select": "2.0.0-alpha.4",
     "react-transition-group": "^2.2.1",
@@ -29,0 +29,0 @@ "styled-components": "^1.4.6"

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79216

increased by110.09%

Number of package files

25

increased by19.05%

Lines of code

1207

increased by52.98%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedreact-select@2.0.0-alpha.4(transitive)

• - Removedreact-select@2.0.0-alpha.2(transitive)

• Updatedreact-select@2.0.0-alpha.4