@atlaskit/user-picker 9.3.1 → 9.3.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 9.3.4
+
+### Patch Changes
+
+- [`dbff164b600`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dbff164b600) - [ux] Fix for appearance=compact not being applied correctly to user pickers
+
+## 9.3.3
+
+### Patch Changes
+
+- [`2c7609cef36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c7609cef36) - onSelection prop is now also called for user pickers where isMulti=true. Previously onSelection was only called for user picker where isMulti was false
+
+## 9.3.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
 ## 9.3.1
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -119,8 +119,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       switch (action) {
         case 'select-option':
-          if (value && !Array.isArray(value)) {
-            (0, _utils.callCallback)(onSelection, value.data, _this.getSessionId());
+          if (value) {
+            (0, _utils.callCallback)(onSelection, (0, _utils.extractOptionValue)(value), _this.getSessionId());
           }
 
           _this.fireEvent(_analytics.selectEvent, isMulti ? option : value);

package/dist/cjs/components/ExternalUserSourcesContainer.js

@@ -29,10 +29,14 @@ var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
   }
 
   return _react.default.Children.map(children, function (child) {
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      sources: sources,
-      sourcesLoading: sourcesLoading
-    });
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error
+      _react.default.cloneElement(child, {
+        sources: sources,
+        sourcesLoading: sourcesLoading
+      })
+    );
   });
 };
 

package/dist/cjs/components/UserPicker.js

@@ -125,7 +125,7 @@ var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement(_BaseUserPicker.BaseUserPickerWithoutAnalytics, (0, _extends2.default)({}, this.props, {
         width: width,
         SelectComponent: SelectComponent,
-        styles: (0, _styles.getStyles)(width, isMulti, this.props.styles),
+        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles),
         components: (0, _components.getComponents)(isMulti, anchor),
         pickerProps: pickerProps
       })))));

package/dist/cjs/components/styles.js

@@ -39,7 +39,7 @@ var INDICATOR_WIDTH = 39;
 exports.INDICATOR_WIDTH = INDICATOR_WIDTH;
 var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
-var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles) {
+var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -48,7 +48,6 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
       });
     },
     control: function control(css, state) {
-      var isCompact = state.selectProps.appearance === 'compact';
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
@@ -96,7 +95,6 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
           paddingBottom = _ref2.paddingBottom,
           position = _ref2.position,
           css = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-      var isCompact = state.selectProps.appearance === 'compact';
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         paddingTop: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.3.1",
+	"version": "9.3.4",
 	"sideEffects": false
 }

package/dist/es2019/components/BaseUserPicker.js

@@ -96,8 +96,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
 
       switch (action) {
         case 'select-option':
-          if (value && !Array.isArray(value)) {
-            callCallback(onSelection, value.data, this.getSessionId());
+          if (value) {
+            callCallback(onSelection, extractOptionValue(value), this.getSessionId());
           }
 
           this.fireEvent(selectEvent, isMulti ? option : value);

package/dist/es2019/components/ExternalUserSourcesContainer.js

@@ -18,7 +18,10 @@ export const ExternalUserSourcesContainer = ({
     });
   }
 
-  return React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+  return React.Children.map(children, child =>
+  /*#__PURE__*/
+  // @ts-expect-error
+  React.cloneElement(child, {
     sources,
     sourcesLoading
   }));

package/dist/es2019/components/UserPicker.js

@@ -66,7 +66,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
     }, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
       width: width,
       SelectComponent: SelectComponent,
-      styles: getStyles(width, isMulti, this.props.styles),
+      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles),
       components: getComponents(isMulti, anchor),
       pickerProps: pickerProps
     })))));

package/dist/es2019/components/styles.js

@@ -9,14 +9,13 @@ export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
 const TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 const TAG_MARGIN_WIDTH = 4;
-export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
+export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles) => {
   let styles = {
     menu: (css, state) => ({ ...css,
       width,
       minWidth: state.selectProps.menuMinWidth
     }),
     control: (css, state) => {
-      const isCompact = state.selectProps.appearance === 'compact';
       const isMulti = state.selectProps.isMulti;
       return { ...css,
         width,
@@ -62,7 +61,6 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       position,
       ...css
     }, state) => {
-      const isCompact = state.selectProps.appearance === 'compact';
       const isMulti = state.selectProps.isMulti;
       return { ...css,
         paddingTop: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.3.1",
+	"version": "9.3.4",
 	"sideEffects": false
 }

package/dist/esm/components/BaseUserPicker.js

@@ -102,8 +102,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
 
       switch (action) {
         case 'select-option':
-          if (value && !Array.isArray(value)) {
-            callCallback(onSelection, value.data, _this.getSessionId());
+          if (value) {
+            callCallback(onSelection, extractOptionValue(value), _this.getSessionId());
           }
 
           _this.fireEvent(selectEvent, isMulti ? option : value);

package/dist/esm/components/ExternalUserSourcesContainer.js

@@ -18,9 +18,13 @@ export var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(
   }
 
   return React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      sources: sources,
-      sourcesLoading: sourcesLoading
-    });
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error
+      React.cloneElement(child, {
+        sources: sources,
+        sourcesLoading: sourcesLoading
+      })
+    );
   });
 };

package/dist/esm/components/UserPicker.js

@@ -89,7 +89,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
       }, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
         width: width,
         SelectComponent: SelectComponent,
-        styles: getStyles(width, isMulti, this.props.styles),
+        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles),
         components: getComponents(isMulti, anchor),
         pickerProps: pickerProps
       })))));

package/dist/esm/components/styles.js

@@ -19,7 +19,7 @@ export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
 var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
-export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
+export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -28,7 +28,6 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
       });
     },
     control: function control(css, state) {
-      var isCompact = state.selectProps.appearance === 'compact';
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
@@ -78,7 +77,6 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
           position = _ref2.position,
           css = _objectWithoutProperties(_ref2, _excluded2);
 
-      var isCompact = state.selectProps.appearance === 'compact';
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         paddingTop: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.3.1",
+	"version": "9.3.4",
 	"sideEffects": false
 }

package/dist/types/components/styles.d.ts

@@ -1,7 +1,7 @@
 export declare const BORDER_PADDING = 6;
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
-export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean | undefined, overrideStyles?: Partial<import("react-select").Styles<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined) => Partial<import("react-select").Styles<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | {
+export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean | undefined, isCompact?: boolean | undefined, overrideStyles?: Partial<import("react-select").Styles<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined) => Partial<import("react-select").Styles<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | {
     menu: (css: any, state: any) => any;
     control: (css: any, state: any) => any;
     clearIndicator: ({ paddingTop, paddingBottom, paddingLeft, paddingRight, ...css }: any) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.3.1",
+  "version": "9.3.4",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/select": "^15.4.0",
+    "@atlaskit/select": "^15.6.0",
     "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -73,7 +73,7 @@
     "faker": "^4.1.0",
     "mock-apollo-client": "^0.1.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@repo/internal": {

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/user-picker"
+## API Report File for "@atlaskit/user-picker".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 import { Placement } from '@atlaskit/popper';