@atlaskit/user-picker 9.3.4 → 9.3.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/dist/cjs/components/styles.js

@@ -76,7 +76,12 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
           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,

package/dist/cjs/version.json

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

package/dist/es2019/components/styles.js

@@ -44,7 +44,12 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, 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,

package/dist/es2019/version.json

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

package/dist/esm/components/styles.js

@@ -57,7 +57,12 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
           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,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.3.4",
+	"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.3.4",
+  "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'