@atlaskit/user-picker 9.3.2 → 9.3.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 9.3.5
+
+### Patch Changes
+
+- [`45da4e093b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45da4e093b9) - [ux] User picker now shows the "X" clear indicator on mobile, which previously wasn't working because hover was required which doesn't work on mobile.
+
+## 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

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/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,
@@ -77,7 +76,12 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
           paddingRight = _ref.paddingRight,
           css = (0, _objectWithoutProperties2.default)(_ref, _excluded);
       return _objectSpread(_objectSpread({}, css), {}, {
-        opacity: 0,
+        // By default show clear indicator, except for on devices where "hover" is supported.
+        // This means mobile devices (which do not support hover) will be able to see the clear indicator.
+        opacity: 1,
+        '@media (hover: hover) and (pointer: fine)': {
+          opacity: 0
+        },
         transition: css.transition + ', opacity 150ms',
         paddingTop: 0,
         padding: 0,
@@ -96,7 +100,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.2",
+	"version": "9.3.5",
 	"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/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,
@@ -45,7 +44,12 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       paddingRight,
       ...css
     }) => ({ ...css,
-      opacity: 0,
+      // By default show clear indicator, except for on devices where "hover" is supported.
+      // This means mobile devices (which do not support hover) will be able to see the clear indicator.
+      opacity: 1,
+      '@media (hover: hover) and (pointer: fine)': {
+        opacity: 0
+      },
       transition: css.transition + ', opacity 150ms',
       paddingTop: 0,
       padding: 0,
@@ -62,7 +66,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.2",
+	"version": "9.3.5",
 	"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/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,
@@ -58,7 +57,12 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
           css = _objectWithoutProperties(_ref, _excluded);
 
       return _objectSpread(_objectSpread({}, css), {}, {
-        opacity: 0,
+        // By default show clear indicator, except for on devices where "hover" is supported.
+        // This means mobile devices (which do not support hover) will be able to see the clear indicator.
+        opacity: 1,
+        '@media (hover: hover) and (pointer: fine)': {
+          opacity: 0
+        },
         transition: css.transition + ', opacity 150ms',
         paddingTop: 0,
         padding: 0,
@@ -78,7 +82,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.2",
+	"version": "9.3.5",
 	"sideEffects": false
 }

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

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width" | "offset" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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.2",
+  "version": "9.3.5",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,12 +29,12 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/logo": "^13.8.0",
-    "@atlaskit/lozenge": "^11.0.0",
+    "@atlaskit/logo": "^13.9.0",
+    "@atlaskit/lozenge": "^11.2.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/spinner": "^15.1.4",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
@@ -54,19 +54,19 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/modal-dialog": "^12.2.0",
-    "@atlaskit/radio": "^5.3.4",
+    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/textfield": "^5.0.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/textfield": "^5.2.0",
     "@atlaskit/util-data-test": "^17.5.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^10.0.7",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^8.0.1",
-    "@testing-library/react-hooks": "^1.0.4",
-    "@testing-library/user-event": "10.4.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^1.1.0",
+    "@testing-library/user-event": "^13.5.0",
     "@types/uuid": "^3.4.4",
     "enzyme": "^3.10.0",
     "enzyme-react-intl": "^2.0.6",

package/report.api.md

@@ -211,9 +211,9 @@ export declare const PopupUserPicker: React_2.ForwardRefExoticComponent<
     Partial<
       Pick<
         Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>,
+        | 'offset'
         | 'isMulti'
         | 'width'
-        | 'offset'
         | 'boundariesElement'
         | 'placement'
         | 'rootBoundary'