@atlaskit/user-picker 10.0.1 → 10.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 10.0.3
+
+### Patch Changes
+
+- [`62e83249cb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62e83249cb2) - [ux] PopupUserPicker now supports user-defined styles prop for adding styling to PopupUserPicker.
+
+## 10.0.2
+
+### Patch Changes
+
+- [`edc295b63a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edc295b63a2) - [ux] Fixes bug where the user picker opens the menu on click, but doesn't reopen the menu on the second click.
+
 ## 10.0.1
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -247,6 +247,11 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         options: []
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpen", function () {
+      _this.setState({
+        menuIsOpen: true
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
       _this.resetInputState();
       (0, _utils.callCallback)(_this.props.onClose, _this.getSessionId());
@@ -474,6 +479,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         instanceId: fieldId,
         inputId: inputId,
         onChange: this.handleChange,
+        onMenuOpen: this.handleOpen,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onMenuClose: this.handleClose,

package/dist/cjs/components/CustomOption/main.js

@@ -43,7 +43,8 @@ var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
       return (0, _react.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-custom-secondary-text"
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {

package/dist/cjs/components/EmailOption/main.js

@@ -48,7 +48,8 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
       return (0, _react2.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-email-secondary-text"
       }, label);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {

package/dist/cjs/components/GroupOption/main.js

@@ -65,7 +65,8 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return (0, _react2.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-group-secondary-text"
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {

package/dist/cjs/components/PopupUserPicker.js

@@ -61,14 +61,14 @@ var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         offset = _this$props.offset,
         placement = _this$props.placement,
         rootBoundary = _this$props.rootBoundary,
-        shouldFlip = _this$props.shouldFlip;
-      var flipped = this.state.flipped;
+        shouldFlip = _this$props.shouldFlip,
+        styles = _this$props.styles;
       var width = this.props.width;
-      var styles = (0, _styles.getPopupStyles)(width, flipped, isMulti);
+      var selectStyles = (0, _styles.getPopupStyles)(width, isMulti, styles);
       return /*#__PURE__*/_react.default.createElement(_BaseUserPicker.BaseUserPickerWithoutAnalytics, (0, _extends2.default)({}, this.props, {
         SelectComponent: _select.PopupSelect,
         width: width,
-        styles: styles,
+        styles: selectStyles,
         components: (0, _components.getPopupComponents)(!!popupTitle),
         pickerProps: (0, _popup.getPopupProps)(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
       }));

package/dist/cjs/components/TeamOption/main.js

@@ -80,7 +80,8 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
       return (0, _react.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-team-secondary-text"
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/styles.js

@@ -169,7 +169,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
   return overrideStyles ? (0, _select.mergeStyles)(styles, overrideStyles) : styles;
 });
 exports.getStyles = getStyles;
-var getPopupStyles = (0, _memoizeOne.default)(function (width, flip, isMulti) {
-  return _objectSpread({}, getStyles(width, isMulti));
+var getPopupStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles) {
+  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
 });
 exports.getPopupStyles = getPopupStyles;

package/dist/cjs/version.json

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

package/dist/es2019/components/BaseUserPicker.js

@@ -235,6 +235,11 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         options: []
       });
     });
+    _defineProperty(this, "handleOpen", () => {
+      this.setState({
+        menuIsOpen: true
+      });
+    });
     _defineProperty(this, "handleClose", () => {
       this.resetInputState();
       callCallback(this.props.onClose, this.getSessionId());
@@ -456,6 +461,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       instanceId: fieldId,
       inputId: inputId,
       onChange: this.handleChange,
+      onMenuOpen: this.handleOpen,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       onMenuClose: this.handleClose,

package/dist/es2019/components/CustomOption/main.js

@@ -24,7 +24,8 @@ export class CustomOption extends React.PureComponent {
       }, name))];
     });
     _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
-      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+      "data-testid": "user-picker-custom-secondary-text"
     }, message));
     _defineProperty(this, "renderByline", () => {
       var _this$props$data;

package/dist/es2019/components/EmailOption/main.js

@@ -27,7 +27,8 @@ export class EmailOption extends React.PureComponent {
     });
     _defineProperty(this, "renderSecondaryText", label => {
       return jsx("span", {
-        css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+        css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+        "data-testid": "user-picker-email-secondary-text"
       }, label);
     });
     _defineProperty(this, "renderOption", label => jsx(AvatarItemOption, {

package/dist/es2019/components/GroupOption/main.js

@@ -45,7 +45,8 @@ export class GroupOption extends React.PureComponent {
         isSelected
       } = this.props;
       return jsx("span", {
-        css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+        css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+        "data-testid": "user-picker-group-secondary-text"
       }, jsx(FormattedMessage, messages.groupByline));
     });
     _defineProperty(this, "getLozengeProps", () => typeof this.props.group.lozenge === 'string' ? {

package/dist/es2019/components/PopupUserPicker.js

@@ -42,17 +42,15 @@ export class PopupUserPickerWithoutAnalytics extends React.Component {
       offset,
       placement,
       rootBoundary,
-      shouldFlip
+      shouldFlip,
+      styles
     } = this.props;
-    const {
-      flipped
-    } = this.state;
     const width = this.props.width;
-    const styles = getPopupStyles(width, flipped, isMulti);
+    const selectStyles = getPopupStyles(width, isMulti, styles);
     return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
       SelectComponent: PopupSelect,
       width: width,
-      styles: styles,
+      styles: selectStyles,
       components: getPopupComponents(!!popupTitle),
       pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
     }));

package/dist/es2019/components/TeamOption/main.js

@@ -63,7 +63,8 @@ export class TeamOption extends React.PureComponent {
       }
     });
     _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
-      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+      "data-testid": "user-picker-team-secondary-text"
     }, message));
     _defineProperty(this, "renderAvatar", () => {
       const {

package/dist/es2019/components/styles.js

@@ -149,6 +149,6 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
-export const getPopupStyles = memoizeOne((width, flip, isMulti) => ({
-  ...getStyles(width, isMulti)
+export const getPopupStyles = memoizeOne((width, isMulti, overrideStyles) => ({
+  ...getStyles(width, isMulti, false, overrideStyles)
 }));

package/dist/es2019/version.json

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

package/dist/esm/components/BaseUserPicker.js

@@ -240,6 +240,11 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         options: []
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "handleOpen", function () {
+      _this.setState({
+        menuIsOpen: true
+      });
+    });
     _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
       _this.resetInputState();
       callCallback(_this.props.onClose, _this.getSessionId());
@@ -467,6 +472,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         instanceId: fieldId,
         inputId: inputId,
         onChange: this.handleChange,
+        onMenuOpen: this.handleOpen,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onMenuClose: this.handleClose,

package/dist/esm/components/CustomOption/main.js

@@ -37,7 +37,8 @@ export var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
       return jsx("span", {
-        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-custom-secondary-text"
       }, message);
     });
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {

package/dist/esm/components/EmailOption/main.js

@@ -42,7 +42,8 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function (label) {
       return jsx("span", {
-        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-email-secondary-text"
       }, label);
     });
     _defineProperty(_assertThisInitialized(_this), "renderOption", function (label) {

package/dist/esm/components/GroupOption/main.js

@@ -58,7 +58,8 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return jsx("span", {
-        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-group-secondary-text"
       }, jsx(FormattedMessage, messages.groupByline));
     });
     _defineProperty(_assertThisInitialized(_this), "getLozengeProps", function () {

package/dist/esm/components/PopupUserPicker.js

@@ -54,14 +54,14 @@ export var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
         offset = _this$props.offset,
         placement = _this$props.placement,
         rootBoundary = _this$props.rootBoundary,
-        shouldFlip = _this$props.shouldFlip;
-      var flipped = this.state.flipped;
+        shouldFlip = _this$props.shouldFlip,
+        styles = _this$props.styles;
       var width = this.props.width;
-      var styles = getPopupStyles(width, flipped, isMulti);
+      var selectStyles = getPopupStyles(width, isMulti, styles);
       return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
         SelectComponent: PopupSelect,
         width: width,
-        styles: styles,
+        styles: selectStyles,
         components: getPopupComponents(!!popupTitle),
         pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
       }));

package/dist/esm/components/TeamOption/main.js

@@ -74,7 +74,8 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
       return jsx("span", {
-        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-team-secondary-text"
       }, message);
     });
     _defineProperty(_assertThisInitialized(_this), "renderAvatar", function () {

package/dist/esm/components/styles.js

@@ -158,6 +158,6 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
-export var getPopupStyles = memoizeOne(function (width, flip, isMulti) {
-  return _objectSpread({}, getStyles(width, isMulti));
+export var getPopupStyles = memoizeOne(function (width, isMulti, overrideStyles) {
+  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
 });

package/dist/esm/version.json

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

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

@@ -39,6 +39,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private handleFocus;
     private resetInputState;
     private handleBlur;
+    private handleOpen;
     private handleClose;
     private handleInputChange;
     private fireEvent;

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

@@ -39,4 +39,4 @@ export declare const getStyles: import("memoize-one").MemoizedFn<(width: string
     singleValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").SingleValueProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
     valueContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ValueContainerProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
 }>;
-export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, flip?: boolean | undefined, isMulti?: boolean | undefined) => StylesConfig<import("@atlaskit/select").OptionType, false>>;
+export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean | undefined, overrideStyles?: StylesConfig<import("@atlaskit/select").OptionType, false> | undefined) => StylesConfig<import("@atlaskit/select").OptionType, false>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.0.1",
+  "version": "10.0.3",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,13 +29,13 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/logo": "^13.11.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/popper": "^5.4.0",
     "@atlaskit/select": "^16.1.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.1.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -78,7 +78,9 @@
   },
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "design-tokens": [
+        "color"
+      ]
     }
   },
   "keywords": [