@atlaskit/user-picker 10.0.2 → 10.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/CustomOption/main.js +2 -1
  3. package/dist/cjs/components/EmailOption/main.js +2 -1
  4. package/dist/cjs/components/GroupOption/main.js +2 -1
  5. package/dist/cjs/components/PopupUserPicker.js +4 -4
  6. package/dist/cjs/components/TeamOption/main.js +2 -1
  7. package/dist/cjs/components/styles.js +2 -2
  8. package/dist/cjs/version.json +1 -1
  9. package/dist/es2019/components/CustomOption/main.js +2 -1
  10. package/dist/es2019/components/EmailOption/main.js +2 -1
  11. package/dist/es2019/components/GroupOption/main.js +2 -1
  12. package/dist/es2019/components/PopupUserPicker.js +4 -6
  13. package/dist/es2019/components/TeamOption/main.js +2 -1
  14. package/dist/es2019/components/styles.js +2 -2
  15. package/dist/es2019/version.json +1 -1
  16. package/dist/esm/components/CustomOption/main.js +2 -1
  17. package/dist/esm/components/EmailOption/main.js +2 -1
  18. package/dist/esm/components/GroupOption/main.js +2 -1
  19. package/dist/esm/components/PopupUserPicker.js +4 -4
  20. package/dist/esm/components/TeamOption/main.js +2 -1
  21. package/dist/esm/components/styles.js +2 -2
  22. package/dist/esm/version.json +1 -1
  23. package/dist/types/components/styles.d.ts +1 -1
  24. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/user-picker
2
2
 
3
+ ## 10.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`62e83249cb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62e83249cb2) - [ux] PopupUserPicker now supports user-defined styles prop for adding styling to PopupUserPicker.
8
+
3
9
  ## 10.0.2
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/CustomOption/main.js CHANGED
@@ -43,7 +43,8 @@ var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
43
43
  });
44
44
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
45
45
  return (0, _react.jsx)("span", {
46
- css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
46
+ css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
47
+ "data-testid": "user-picker-custom-secondary-text"
47
48
  }, message);
48
49
  });
49
50
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
package/dist/cjs/components/EmailOption/main.js CHANGED
@@ -48,7 +48,8 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
48
48
  });
49
49
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
50
50
  return (0, _react2.jsx)("span", {
51
- css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
51
+ css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
52
+ "data-testid": "user-picker-email-secondary-text"
52
53
  }, label);
53
54
  });
54
55
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {
package/dist/cjs/components/GroupOption/main.js CHANGED
@@ -65,7 +65,8 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
65
65
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
66
66
  var isSelected = _this.props.isSelected;
67
67
  return (0, _react2.jsx)("span", {
68
- css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
68
+ css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
69
+ "data-testid": "user-picker-group-secondary-text"
69
70
  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
70
71
  });
71
72
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {
package/dist/cjs/components/PopupUserPicker.js CHANGED
@@ -61,14 +61,14 @@ var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
61
61
  offset = _this$props.offset,
62
62
  placement = _this$props.placement,
63
63
  rootBoundary = _this$props.rootBoundary,
64
- shouldFlip = _this$props.shouldFlip;
65
- var flipped = this.state.flipped;
64
+ shouldFlip = _this$props.shouldFlip,
65
+ styles = _this$props.styles;
66
66
  var width = this.props.width;
67
- var styles = (0, _styles.getPopupStyles)(width, flipped, isMulti);
67
+ var selectStyles = (0, _styles.getPopupStyles)(width, isMulti, styles);
68
68
  return /*#__PURE__*/_react.default.createElement(_BaseUserPicker.BaseUserPickerWithoutAnalytics, (0, _extends2.default)({}, this.props, {
69
69
  SelectComponent: _select.PopupSelect,
70
70
  width: width,
71
- styles: styles,
71
+ styles: selectStyles,
72
72
  components: (0, _components.getPopupComponents)(!!popupTitle),
73
73
  pickerProps: (0, _popup.getPopupProps)(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
74
74
  }));
package/dist/cjs/components/TeamOption/main.js CHANGED
@@ -80,7 +80,8 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
80
80
  });
81
81
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
82
82
  return (0, _react.jsx)("span", {
83
- css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
83
+ css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
84
+ "data-testid": "user-picker-team-secondary-text"
84
85
  }, message);
85
86
  });
86
87
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
package/dist/cjs/components/styles.js CHANGED
@@ -169,7 +169,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
169
169
  return overrideStyles ? (0, _select.mergeStyles)(styles, overrideStyles) : styles;
170
170
  });
171
171
  exports.getStyles = getStyles;
172
- var getPopupStyles = (0, _memoizeOne.default)(function (width, flip, isMulti) {
173
- return _objectSpread({}, getStyles(width, isMulti));
172
+ var getPopupStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles) {
173
+ return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
174
174
  });
175
175
  exports.getPopupStyles = getPopupStyles;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "10.0.2",
3
+ "version": "10.0.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/CustomOption/main.js CHANGED
@@ -24,7 +24,8 @@ export class CustomOption extends React.PureComponent {
24
24
  }, name))];
25
25
  });
26
26
  _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
27
- css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
27
+ css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
28
+ "data-testid": "user-picker-custom-secondary-text"
28
29
  }, message));
29
30
  _defineProperty(this, "renderByline", () => {
30
31
  var _this$props$data;
package/dist/es2019/components/EmailOption/main.js CHANGED
@@ -27,7 +27,8 @@ export class EmailOption extends React.PureComponent {
27
27
  });
28
28
  _defineProperty(this, "renderSecondaryText", label => {
29
29
  return jsx("span", {
30
- css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
30
+ css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
31
+ "data-testid": "user-picker-email-secondary-text"
31
32
  }, label);
32
33
  });
33
34
  _defineProperty(this, "renderOption", label => jsx(AvatarItemOption, {
package/dist/es2019/components/GroupOption/main.js CHANGED
@@ -45,7 +45,8 @@ export class GroupOption extends React.PureComponent {
45
45
  isSelected
46
46
  } = this.props;
47
47
  return jsx("span", {
48
- css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
48
+ css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
49
+ "data-testid": "user-picker-group-secondary-text"
49
50
  }, jsx(FormattedMessage, messages.groupByline));
50
51
  });
51
52
  _defineProperty(this, "getLozengeProps", () => typeof this.props.group.lozenge === 'string' ? {
package/dist/es2019/components/PopupUserPicker.js CHANGED
@@ -42,17 +42,15 @@ export class PopupUserPickerWithoutAnalytics extends React.Component {
42
42
  offset,
43
43
  placement,
44
44
  rootBoundary,
45
- shouldFlip
45
+ shouldFlip,
46
+ styles
46
47
  } = this.props;
47
- const {
48
- flipped
49
- } = this.state;
50
48
  const width = this.props.width;
51
- const styles = getPopupStyles(width, flipped, isMulti);
49
+ const selectStyles = getPopupStyles(width, isMulti, styles);
52
50
  return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
53
51
  SelectComponent: PopupSelect,
54
52
  width: width,
55
- styles: styles,
53
+ styles: selectStyles,
56
54
  components: getPopupComponents(!!popupTitle),
57
55
  pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
58
56
  }));
package/dist/es2019/components/TeamOption/main.js CHANGED
@@ -63,7 +63,8 @@ export class TeamOption extends React.PureComponent {
63
63
  }
64
64
  });
65
65
  _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
66
- css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
66
+ css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
67
+ "data-testid": "user-picker-team-secondary-text"
67
68
  }, message));
68
69
  _defineProperty(this, "renderAvatar", () => {
69
70
  const {
package/dist/es2019/components/styles.js CHANGED
@@ -149,6 +149,6 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
149
149
  };
150
150
  return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
151
151
  });
152
- export const getPopupStyles = memoizeOne((width, flip, isMulti) => ({
153
- ...getStyles(width, isMulti)
152
+ export const getPopupStyles = memoizeOne((width, isMulti, overrideStyles) => ({
153
+ ...getStyles(width, isMulti, false, overrideStyles)
154
154
  }));
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "10.0.2",
3
+ "version": "10.0.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/CustomOption/main.js CHANGED
@@ -37,7 +37,8 @@ export var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
37
37
  });
38
38
  _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
39
39
  return jsx("span", {
40
- css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
40
+ css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
41
+ "data-testid": "user-picker-custom-secondary-text"
41
42
  }, message);
42
43
  });
43
44
  _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
package/dist/esm/components/EmailOption/main.js CHANGED
@@ -42,7 +42,8 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
42
42
  });
43
43
  _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function (label) {
44
44
  return jsx("span", {
45
- css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
45
+ css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
46
+ "data-testid": "user-picker-email-secondary-text"
46
47
  }, label);
47
48
  });
48
49
  _defineProperty(_assertThisInitialized(_this), "renderOption", function (label) {
package/dist/esm/components/GroupOption/main.js CHANGED
@@ -58,7 +58,8 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
58
58
  _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
59
59
  var isSelected = _this.props.isSelected;
60
60
  return jsx("span", {
61
- css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
61
+ css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
62
+ "data-testid": "user-picker-group-secondary-text"
62
63
  }, jsx(FormattedMessage, messages.groupByline));
63
64
  });
64
65
  _defineProperty(_assertThisInitialized(_this), "getLozengeProps", function () {
package/dist/esm/components/PopupUserPicker.js CHANGED
@@ -54,14 +54,14 @@ export var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
54
54
  offset = _this$props.offset,
55
55
  placement = _this$props.placement,
56
56
  rootBoundary = _this$props.rootBoundary,
57
- shouldFlip = _this$props.shouldFlip;
58
- var flipped = this.state.flipped;
57
+ shouldFlip = _this$props.shouldFlip,
58
+ styles = _this$props.styles;
59
59
  var width = this.props.width;
60
- var styles = getPopupStyles(width, flipped, isMulti);
60
+ var selectStyles = getPopupStyles(width, isMulti, styles);
61
61
  return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
62
62
  SelectComponent: PopupSelect,
63
63
  width: width,
64
- styles: styles,
64
+ styles: selectStyles,
65
65
  components: getPopupComponents(!!popupTitle),
66
66
  pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
67
67
  }));
package/dist/esm/components/TeamOption/main.js CHANGED
@@ -74,7 +74,8 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
74
74
  });
75
75
  _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
76
76
  return jsx("span", {
77
- css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
77
+ css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
78
+ "data-testid": "user-picker-team-secondary-text"
78
79
  }, message);
79
80
  });
80
81
  _defineProperty(_assertThisInitialized(_this), "renderAvatar", function () {
package/dist/esm/components/styles.js CHANGED
@@ -158,6 +158,6 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
158
158
  };
159
159
  return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
160
160
  });
161
- export var getPopupStyles = memoizeOne(function (width, flip, isMulti) {
162
- return _objectSpread({}, getStyles(width, isMulti));
161
+ export var getPopupStyles = memoizeOne(function (width, isMulti, overrideStyles) {
162
+ return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
163
163
  });
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "10.0.2",
3
+ "version": "10.0.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/styles.d.ts CHANGED
@@ -39,4 +39,4 @@ export declare const getStyles: import("memoize-one").MemoizedFn<(width: string
39
39
  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;
40
40
  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;
41
41
  }>;
42
- export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, flip?: boolean | undefined, isMulti?: boolean | undefined) => StylesConfig<import("@atlaskit/select").OptionType, false>>;
42
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "10.0.2",
3
+ "version": "10.0.3",
4
4
  "description": "Fabric component for display a dropdown to select a user from",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -78,7 +78,9 @@
78
78
  },
79
79
  "techstack": {
80
80
  "@repo/internal": {
81
- "theming": "tokens"
81
+ "design-tokens": [
82
+ "color"
83
+ ]
82
84
  }
83
85
  },
84
86
  "keywords": [