@atlaskit/user-picker 11.23.0 → 11.23.2
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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/components/UserPicker.js +1 -1
- package/dist/cjs/components/styles.js +11 -11
- package/dist/cjs/i18n/en.js +5 -5
- package/dist/cjs/i18n/en_GB.js +5 -5
- package/dist/es2019/components/UserPicker.js +1 -1
- package/dist/es2019/components/styles.js +9 -9
- package/dist/es2019/i18n/en.js +5 -5
- package/dist/es2019/i18n/en_GB.js +5 -5
- package/dist/esm/components/UserPicker.js +1 -1
- package/dist/esm/components/styles.js +11 -11
- package/dist/esm/i18n/en.js +5 -5
- package/dist/esm/i18n/en_GB.js +5 -5
- package/dist/types/components/PopupUserPicker.d.ts +2 -0
- package/dist/types/components/UserPicker.d.ts +2 -1
- package/dist/types/components/styles.d.ts +1 -1
- package/dist/types/types.d.ts +2 -0
- package/dist/types-ts4.5/components/PopupUserPicker.d.ts +2 -0
- package/dist/types-ts4.5/components/UserPicker.d.ts +2 -1
- package/dist/types-ts4.5/components/styles.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +2 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -108,7 +108,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
|
|
|
108
108
|
SelectComponent: SelectComponent
|
|
109
109
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
110
110
|
,
|
|
111
|
-
styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, this.props.height),
|
|
111
|
+
styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, this.props.height, this.props.minHeight),
|
|
112
112
|
components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),
|
|
113
113
|
pickerProps: pickerProps
|
|
114
114
|
})))));
|
|
@@ -10,14 +10,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
10
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
11
|
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
|
|
12
12
|
var _select = require("@atlaskit/select");
|
|
13
|
-
var _excluded = ["
|
|
14
|
-
_excluded2 = ["
|
|
13
|
+
var _excluded = ["_paddingTop", "_paddingBottom", "_paddingLeft", "_paddingRight"],
|
|
14
|
+
_excluded2 = ["_paddingTop", "_paddingBottom", "_position"];
|
|
15
15
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
16
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
17
|
var BORDER_PADDING = exports.BORDER_PADDING = "var(--ds-space-075, 6px)";
|
|
18
18
|
var AVATAR_PADDING = exports.AVATAR_PADDING = 6;
|
|
19
19
|
var INDICATOR_WIDTH = exports.INDICATOR_WIDTH = 39;
|
|
20
|
-
var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles, isVisualRefresh, isPopupStyles, height) {
|
|
20
|
+
var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles, isVisualRefresh, isPopupStyles, height, minHeight) {
|
|
21
21
|
var styles = {
|
|
22
22
|
menu: function menu(css, state) {
|
|
23
23
|
return _objectSpread(_objectSpread({}, css), {}, {
|
|
@@ -45,17 +45,17 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
|
|
|
45
45
|
backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(_colors.R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(_colors.N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(_colors.N10, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
|
|
46
46
|
}),
|
|
47
47
|
padding: 0,
|
|
48
|
-
minHeight: height || isCompact ? 'none' : 44,
|
|
48
|
+
minHeight: minHeight ? minHeight : height || isCompact ? 'none' : 44,
|
|
49
49
|
/* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
|
|
50
50
|
height: height ? height : isCompact || isMulti ? '100%' : 44,
|
|
51
51
|
maxWidth: '100%'
|
|
52
52
|
});
|
|
53
53
|
},
|
|
54
54
|
clearIndicator: function clearIndicator(_ref) {
|
|
55
|
-
var
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
var _paddingTop = _ref._paddingTop,
|
|
56
|
+
_paddingBottom = _ref._paddingBottom,
|
|
57
|
+
_paddingLeft = _ref._paddingLeft,
|
|
58
|
+
_paddingRight = _ref._paddingRight,
|
|
59
59
|
css = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
60
60
|
return _objectSpread(_objectSpread({}, css), {}, {
|
|
61
61
|
// By default show clear indicator, except for on devices where "hover" is supported.
|
|
@@ -78,9 +78,9 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
|
|
|
78
78
|
});
|
|
79
79
|
},
|
|
80
80
|
valueContainer: function valueContainer(_ref2, state) {
|
|
81
|
-
var
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
var _paddingTop = _ref2._paddingTop,
|
|
82
|
+
_paddingBottom = _ref2._paddingBottom,
|
|
83
|
+
_position = _ref2._position,
|
|
84
84
|
css = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
|
|
85
85
|
var isMulti = state.selectProps.isMulti;
|
|
86
86
|
return _objectSpread(_objectSpread({}, css), {}, {
|
package/dist/cjs/i18n/en.js
CHANGED
|
@@ -43,15 +43,15 @@ var _default = exports.default = {
|
|
|
43
43
|
'fabric.elements.user-picker.source.other-atlassian': 'Other Atlassian products',
|
|
44
44
|
'fabric.elements.user-picker.source.other-atlassian-appify': 'Other Atlassian apps',
|
|
45
45
|
'fabric.elements.user-picker.team.byline': 'Team',
|
|
46
|
-
'fabric.elements.user-picker.team.byline.official': '
|
|
46
|
+
'fabric.elements.user-picker.team.byline.official': '{teamTypeName} {verifiedIcon}',
|
|
47
47
|
'fabric.elements.user-picker.team.member.50plus': 'Team • 50+ members',
|
|
48
48
|
'fabric.elements.user-picker.team.member.50plus.including.you': 'Team • 50+ members, including you',
|
|
49
|
-
'fabric.elements.user-picker.team.member.50plus.official': '
|
|
50
|
-
'fabric.elements.user-picker.team.member.50plus.official.including.you': '
|
|
49
|
+
'fabric.elements.user-picker.team.member.50plus.official': '{teamTypeName} {verifiedIcon} • 50+ members',
|
|
50
|
+
'fabric.elements.user-picker.team.member.50plus.official.including.you': '{teamTypeName} {verifiedIcon} • 50+ members, including you',
|
|
51
51
|
'fabric.elements.user-picker.team.member.count': 'Team • {count} {count, plural, one {member} other {members}}',
|
|
52
52
|
'fabric.elements.user-picker.team.member.count.including.you': 'Team • {count} {count, plural, one {member} other {members}}, including you',
|
|
53
|
-
'fabric.elements.user-picker.team.member.count.official': '
|
|
54
|
-
'fabric.elements.user-picker.team.member.count.official.including.you': '
|
|
53
|
+
'fabric.elements.user-picker.team.member.count.official': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
|
|
54
|
+
'fabric.elements.user-picker.team.member.count.official.including.you': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
|
|
55
55
|
'fabric.elements.user-picker.team.type.label': 'Teams',
|
|
56
56
|
'fabric.elements.user-picker.user.type.label': 'People'
|
|
57
57
|
};
|
package/dist/cjs/i18n/en_GB.js
CHANGED
|
@@ -43,15 +43,15 @@ var _default = exports.default = {
|
|
|
43
43
|
'fabric.elements.user-picker.source.other-atlassian': 'Other Atlassian products',
|
|
44
44
|
'fabric.elements.user-picker.source.other-atlassian-appify': 'Other Atlassian apps',
|
|
45
45
|
'fabric.elements.user-picker.team.byline': 'Team',
|
|
46
|
-
'fabric.elements.user-picker.team.byline.official': '
|
|
46
|
+
'fabric.elements.user-picker.team.byline.official': '{teamTypeName} {verifiedIcon}',
|
|
47
47
|
'fabric.elements.user-picker.team.member.50plus': 'Team • 50+ members',
|
|
48
48
|
'fabric.elements.user-picker.team.member.50plus.including.you': 'Team • 50+ members, including you',
|
|
49
|
-
'fabric.elements.user-picker.team.member.50plus.official': '
|
|
50
|
-
'fabric.elements.user-picker.team.member.50plus.official.including.you': '
|
|
49
|
+
'fabric.elements.user-picker.team.member.50plus.official': '{teamTypeName} {verifiedIcon} • 50+ members',
|
|
50
|
+
'fabric.elements.user-picker.team.member.50plus.official.including.you': '{teamTypeName} {verifiedIcon} • 50+ members, including you',
|
|
51
51
|
'fabric.elements.user-picker.team.member.count': 'Team • {count} {count, plural, one {member} other {members}}',
|
|
52
52
|
'fabric.elements.user-picker.team.member.count.including.you': 'Team • {count} {count, plural, one {member} other {members}}, including you',
|
|
53
|
-
'fabric.elements.user-picker.team.member.count.official': '
|
|
54
|
-
'fabric.elements.user-picker.team.member.count.official.including.you': '
|
|
53
|
+
'fabric.elements.user-picker.team.member.count.official': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
|
|
54
|
+
'fabric.elements.user-picker.team.member.count.official.including.you': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
|
|
55
55
|
'fabric.elements.user-picker.team.type.label': 'Teams',
|
|
56
56
|
'fabric.elements.user-picker.user.type.label': 'People'
|
|
57
57
|
};
|
|
@@ -85,7 +85,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
|
|
|
85
85
|
SelectComponent: SelectComponent
|
|
86
86
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
87
87
|
,
|
|
88
|
-
styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, this.props.height),
|
|
88
|
+
styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, this.props.height, this.props.minHeight),
|
|
89
89
|
components: getComponents(isMulti, anchor, showClearIndicator, (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.components ? this.props.components : {}),
|
|
90
90
|
pickerProps: pickerProps
|
|
91
91
|
})))));
|
|
@@ -4,7 +4,7 @@ import { mergeStyles } from '@atlaskit/select';
|
|
|
4
4
|
export const BORDER_PADDING = "var(--ds-space-075, 6px)";
|
|
5
5
|
export const AVATAR_PADDING = 6;
|
|
6
6
|
export const INDICATOR_WIDTH = 39;
|
|
7
|
-
export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles, isVisualRefresh, isPopupStyles, height) => {
|
|
7
|
+
export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles, isVisualRefresh, isPopupStyles, height, minHeight) => {
|
|
8
8
|
let styles = {
|
|
9
9
|
menu: (css, state) => ({
|
|
10
10
|
...css,
|
|
@@ -32,17 +32,17 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
|
|
|
32
32
|
backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? `var(--ds-background-danger, ${R50})` : state.isFocused ? css[':hover'] ? `var(--ds-background-input, ${css[':hover'].backgroundColor})` : `var(--ds-background-input, ${N0})` : state.isDisabled ? `var(--ds-background-disabled, ${N10})` : `var(--ds-background-input-hovered, ${N30})`
|
|
33
33
|
},
|
|
34
34
|
padding: 0,
|
|
35
|
-
minHeight: height || isCompact ? 'none' : 44,
|
|
35
|
+
minHeight: minHeight ? minHeight : height || isCompact ? 'none' : 44,
|
|
36
36
|
/* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
|
|
37
37
|
height: height ? height : isCompact || isMulti ? '100%' : 44,
|
|
38
38
|
maxWidth: '100%'
|
|
39
39
|
};
|
|
40
40
|
},
|
|
41
41
|
clearIndicator: ({
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
_paddingTop,
|
|
43
|
+
_paddingBottom,
|
|
44
|
+
_paddingLeft,
|
|
45
|
+
_paddingRight,
|
|
46
46
|
...css
|
|
47
47
|
}) => ({
|
|
48
48
|
...css,
|
|
@@ -64,9 +64,9 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
|
|
|
64
64
|
paddingRight: "var(--ds-space-050, 4px)"
|
|
65
65
|
}),
|
|
66
66
|
valueContainer: ({
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
67
|
+
_paddingTop,
|
|
68
|
+
_paddingBottom,
|
|
69
|
+
_position,
|
|
70
70
|
...css
|
|
71
71
|
}, state) => {
|
|
72
72
|
const isMulti = state.selectProps.isMulti;
|
package/dist/es2019/i18n/en.js
CHANGED
|
@@ -37,15 +37,15 @@ export default {
|
|
|
37
37
|
'fabric.elements.user-picker.source.other-atlassian': 'Other Atlassian products',
|
|
38
38
|
'fabric.elements.user-picker.source.other-atlassian-appify': 'Other Atlassian apps',
|
|
39
39
|
'fabric.elements.user-picker.team.byline': 'Team',
|
|
40
|
-
'fabric.elements.user-picker.team.byline.official': '
|
|
40
|
+
'fabric.elements.user-picker.team.byline.official': '{teamTypeName} {verifiedIcon}',
|
|
41
41
|
'fabric.elements.user-picker.team.member.50plus': 'Team • 50+ members',
|
|
42
42
|
'fabric.elements.user-picker.team.member.50plus.including.you': 'Team • 50+ members, including you',
|
|
43
|
-
'fabric.elements.user-picker.team.member.50plus.official': '
|
|
44
|
-
'fabric.elements.user-picker.team.member.50plus.official.including.you': '
|
|
43
|
+
'fabric.elements.user-picker.team.member.50plus.official': '{teamTypeName} {verifiedIcon} • 50+ members',
|
|
44
|
+
'fabric.elements.user-picker.team.member.50plus.official.including.you': '{teamTypeName} {verifiedIcon} • 50+ members, including you',
|
|
45
45
|
'fabric.elements.user-picker.team.member.count': 'Team • {count} {count, plural, one {member} other {members}}',
|
|
46
46
|
'fabric.elements.user-picker.team.member.count.including.you': 'Team • {count} {count, plural, one {member} other {members}}, including you',
|
|
47
|
-
'fabric.elements.user-picker.team.member.count.official': '
|
|
48
|
-
'fabric.elements.user-picker.team.member.count.official.including.you': '
|
|
47
|
+
'fabric.elements.user-picker.team.member.count.official': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
|
|
48
|
+
'fabric.elements.user-picker.team.member.count.official.including.you': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
|
|
49
49
|
'fabric.elements.user-picker.team.type.label': 'Teams',
|
|
50
50
|
'fabric.elements.user-picker.user.type.label': 'People'
|
|
51
51
|
};
|
|
@@ -37,15 +37,15 @@ export default {
|
|
|
37
37
|
'fabric.elements.user-picker.source.other-atlassian': 'Other Atlassian products',
|
|
38
38
|
'fabric.elements.user-picker.source.other-atlassian-appify': 'Other Atlassian apps',
|
|
39
39
|
'fabric.elements.user-picker.team.byline': 'Team',
|
|
40
|
-
'fabric.elements.user-picker.team.byline.official': '
|
|
40
|
+
'fabric.elements.user-picker.team.byline.official': '{teamTypeName} {verifiedIcon}',
|
|
41
41
|
'fabric.elements.user-picker.team.member.50plus': 'Team • 50+ members',
|
|
42
42
|
'fabric.elements.user-picker.team.member.50plus.including.you': 'Team • 50+ members, including you',
|
|
43
|
-
'fabric.elements.user-picker.team.member.50plus.official': '
|
|
44
|
-
'fabric.elements.user-picker.team.member.50plus.official.including.you': '
|
|
43
|
+
'fabric.elements.user-picker.team.member.50plus.official': '{teamTypeName} {verifiedIcon} • 50+ members',
|
|
44
|
+
'fabric.elements.user-picker.team.member.50plus.official.including.you': '{teamTypeName} {verifiedIcon} • 50+ members, including you',
|
|
45
45
|
'fabric.elements.user-picker.team.member.count': 'Team • {count} {count, plural, one {member} other {members}}',
|
|
46
46
|
'fabric.elements.user-picker.team.member.count.including.you': 'Team • {count} {count, plural, one {member} other {members}}, including you',
|
|
47
|
-
'fabric.elements.user-picker.team.member.count.official': '
|
|
48
|
-
'fabric.elements.user-picker.team.member.count.official.including.you': '
|
|
47
|
+
'fabric.elements.user-picker.team.member.count.official': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
|
|
48
|
+
'fabric.elements.user-picker.team.member.count.official.including.you': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
|
|
49
49
|
'fabric.elements.user-picker.team.type.label': 'Teams',
|
|
50
50
|
'fabric.elements.user-picker.user.type.label': 'People'
|
|
51
51
|
};
|
|
@@ -100,7 +100,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
|
|
|
100
100
|
SelectComponent: SelectComponent
|
|
101
101
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
102
102
|
,
|
|
103
|
-
styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, this.props.height),
|
|
103
|
+
styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, this.props.height, this.props.minHeight),
|
|
104
104
|
components: getComponents(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),
|
|
105
105
|
pickerProps: pickerProps
|
|
106
106
|
})))));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
var _excluded = ["
|
|
4
|
-
_excluded2 = ["
|
|
3
|
+
var _excluded = ["_paddingTop", "_paddingBottom", "_paddingLeft", "_paddingRight"],
|
|
4
|
+
_excluded2 = ["_paddingTop", "_paddingBottom", "_position"];
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
import { B100, N0, N10, N20, N30, N100, R50, R400, N90 } from '@atlaskit/theme/colors';
|
|
@@ -10,7 +10,7 @@ import { mergeStyles } from '@atlaskit/select';
|
|
|
10
10
|
export var BORDER_PADDING = "var(--ds-space-075, 6px)";
|
|
11
11
|
export var AVATAR_PADDING = 6;
|
|
12
12
|
export var INDICATOR_WIDTH = 39;
|
|
13
|
-
export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles, isVisualRefresh, isPopupStyles, height) {
|
|
13
|
+
export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles, isVisualRefresh, isPopupStyles, height, minHeight) {
|
|
14
14
|
var styles = {
|
|
15
15
|
menu: function menu(css, state) {
|
|
16
16
|
return _objectSpread(_objectSpread({}, css), {}, {
|
|
@@ -38,17 +38,17 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
|
|
|
38
38
|
backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(N10, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")")
|
|
39
39
|
}),
|
|
40
40
|
padding: 0,
|
|
41
|
-
minHeight: height || isCompact ? 'none' : 44,
|
|
41
|
+
minHeight: minHeight ? minHeight : height || isCompact ? 'none' : 44,
|
|
42
42
|
/* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
|
|
43
43
|
height: height ? height : isCompact || isMulti ? '100%' : 44,
|
|
44
44
|
maxWidth: '100%'
|
|
45
45
|
});
|
|
46
46
|
},
|
|
47
47
|
clearIndicator: function clearIndicator(_ref) {
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
var _paddingTop = _ref._paddingTop,
|
|
49
|
+
_paddingBottom = _ref._paddingBottom,
|
|
50
|
+
_paddingLeft = _ref._paddingLeft,
|
|
51
|
+
_paddingRight = _ref._paddingRight,
|
|
52
52
|
css = _objectWithoutProperties(_ref, _excluded);
|
|
53
53
|
return _objectSpread(_objectSpread({}, css), {}, {
|
|
54
54
|
// By default show clear indicator, except for on devices where "hover" is supported.
|
|
@@ -71,9 +71,9 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
|
|
|
71
71
|
});
|
|
72
72
|
},
|
|
73
73
|
valueContainer: function valueContainer(_ref2, state) {
|
|
74
|
-
var
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
var _paddingTop = _ref2._paddingTop,
|
|
75
|
+
_paddingBottom = _ref2._paddingBottom,
|
|
76
|
+
_position = _ref2._position,
|
|
77
77
|
css = _objectWithoutProperties(_ref2, _excluded2);
|
|
78
78
|
var isMulti = state.selectProps.isMulti;
|
|
79
79
|
return _objectSpread(_objectSpread({}, css), {}, {
|
package/dist/esm/i18n/en.js
CHANGED
|
@@ -37,15 +37,15 @@ export default {
|
|
|
37
37
|
'fabric.elements.user-picker.source.other-atlassian': 'Other Atlassian products',
|
|
38
38
|
'fabric.elements.user-picker.source.other-atlassian-appify': 'Other Atlassian apps',
|
|
39
39
|
'fabric.elements.user-picker.team.byline': 'Team',
|
|
40
|
-
'fabric.elements.user-picker.team.byline.official': '
|
|
40
|
+
'fabric.elements.user-picker.team.byline.official': '{teamTypeName} {verifiedIcon}',
|
|
41
41
|
'fabric.elements.user-picker.team.member.50plus': 'Team • 50+ members',
|
|
42
42
|
'fabric.elements.user-picker.team.member.50plus.including.you': 'Team • 50+ members, including you',
|
|
43
|
-
'fabric.elements.user-picker.team.member.50plus.official': '
|
|
44
|
-
'fabric.elements.user-picker.team.member.50plus.official.including.you': '
|
|
43
|
+
'fabric.elements.user-picker.team.member.50plus.official': '{teamTypeName} {verifiedIcon} • 50+ members',
|
|
44
|
+
'fabric.elements.user-picker.team.member.50plus.official.including.you': '{teamTypeName} {verifiedIcon} • 50+ members, including you',
|
|
45
45
|
'fabric.elements.user-picker.team.member.count': 'Team • {count} {count, plural, one {member} other {members}}',
|
|
46
46
|
'fabric.elements.user-picker.team.member.count.including.you': 'Team • {count} {count, plural, one {member} other {members}}, including you',
|
|
47
|
-
'fabric.elements.user-picker.team.member.count.official': '
|
|
48
|
-
'fabric.elements.user-picker.team.member.count.official.including.you': '
|
|
47
|
+
'fabric.elements.user-picker.team.member.count.official': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
|
|
48
|
+
'fabric.elements.user-picker.team.member.count.official.including.you': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
|
|
49
49
|
'fabric.elements.user-picker.team.type.label': 'Teams',
|
|
50
50
|
'fabric.elements.user-picker.user.type.label': 'People'
|
|
51
51
|
};
|
package/dist/esm/i18n/en_GB.js
CHANGED
|
@@ -37,15 +37,15 @@ export default {
|
|
|
37
37
|
'fabric.elements.user-picker.source.other-atlassian': 'Other Atlassian products',
|
|
38
38
|
'fabric.elements.user-picker.source.other-atlassian-appify': 'Other Atlassian apps',
|
|
39
39
|
'fabric.elements.user-picker.team.byline': 'Team',
|
|
40
|
-
'fabric.elements.user-picker.team.byline.official': '
|
|
40
|
+
'fabric.elements.user-picker.team.byline.official': '{teamTypeName} {verifiedIcon}',
|
|
41
41
|
'fabric.elements.user-picker.team.member.50plus': 'Team • 50+ members',
|
|
42
42
|
'fabric.elements.user-picker.team.member.50plus.including.you': 'Team • 50+ members, including you',
|
|
43
|
-
'fabric.elements.user-picker.team.member.50plus.official': '
|
|
44
|
-
'fabric.elements.user-picker.team.member.50plus.official.including.you': '
|
|
43
|
+
'fabric.elements.user-picker.team.member.50plus.official': '{teamTypeName} {verifiedIcon} • 50+ members',
|
|
44
|
+
'fabric.elements.user-picker.team.member.50plus.official.including.you': '{teamTypeName} {verifiedIcon} • 50+ members, including you',
|
|
45
45
|
'fabric.elements.user-picker.team.member.count': 'Team • {count} {count, plural, one {member} other {members}}',
|
|
46
46
|
'fabric.elements.user-picker.team.member.count.including.you': 'Team • {count} {count, plural, one {member} other {members}}, including you',
|
|
47
|
-
'fabric.elements.user-picker.team.member.count.official': '
|
|
48
|
-
'fabric.elements.user-picker.team.member.count.official.including.you': '
|
|
47
|
+
'fabric.elements.user-picker.team.member.count.official': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
|
|
48
|
+
'fabric.elements.user-picker.team.member.count.official.including.you': '{teamTypeName} {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
|
|
49
49
|
'fabric.elements.user-picker.team.type.label': 'Teams',
|
|
50
50
|
'fabric.elements.user-picker.user.type.label': 'People'
|
|
51
51
|
};
|
|
@@ -64,6 +64,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
|
|
|
64
64
|
menuPortalTarget?: HTMLElement;
|
|
65
65
|
menuPosition?: "absolute" | "fixed";
|
|
66
66
|
menuShouldBlockScroll?: boolean;
|
|
67
|
+
minHeight?: number | string;
|
|
67
68
|
name?: string;
|
|
68
69
|
noBorder?: boolean;
|
|
69
70
|
noOptionsMessage?: ((value: {
|
|
@@ -167,6 +168,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
|
|
|
167
168
|
maxOptions?: number | undefined;
|
|
168
169
|
maxPickerHeight?: number | undefined;
|
|
169
170
|
menuMinWidth?: number | undefined;
|
|
171
|
+
minHeight?: number | string | undefined;
|
|
170
172
|
noBorder?: boolean | undefined;
|
|
171
173
|
onClear?: import("..").OnPicker | undefined;
|
|
172
174
|
onClose?: import("..").OnPicker | undefined;
|
|
@@ -55,6 +55,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
55
55
|
menuPortalTarget?: HTMLElement;
|
|
56
56
|
menuPosition?: "absolute" | "fixed";
|
|
57
57
|
menuShouldBlockScroll?: boolean;
|
|
58
|
+
minHeight?: number | string;
|
|
58
59
|
name?: string;
|
|
59
60
|
noBorder?: boolean;
|
|
60
61
|
noOptionsMessage?: ((value: {
|
|
@@ -88,7 +89,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
88
89
|
UNSAFE_hasDraggableParentComponent?: boolean;
|
|
89
90
|
value?: import("..").Value;
|
|
90
91
|
width?: number | string;
|
|
91
|
-
}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
|
|
92
|
+
}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "minHeight" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
|
|
92
93
|
isMulti?: boolean | undefined;
|
|
93
94
|
width?: number | string | undefined;
|
|
94
95
|
} & {} & React.RefAttributes<any>>;
|
|
@@ -2,5 +2,5 @@ import { type StylesConfig } from '@atlaskit/select';
|
|
|
2
2
|
export declare const BORDER_PADDING: "var(--ds-space-075)";
|
|
3
3
|
export declare const AVATAR_PADDING = 6;
|
|
4
4
|
export declare const INDICATOR_WIDTH = 39;
|
|
5
|
-
export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean, isPopupStyles?: boolean, height?: number | string) => StylesConfig>;
|
|
5
|
+
export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean, isPopupStyles?: boolean, height?: number | string, minHeight?: number | string) => StylesConfig>;
|
|
6
6
|
export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean) => StylesConfig>;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -125,6 +125,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
|
|
|
125
125
|
menuPosition?: 'absolute' | 'fixed';
|
|
126
126
|
/** Whether to block scrolling actions */
|
|
127
127
|
menuShouldBlockScroll?: boolean;
|
|
128
|
+
/** Sets the minimum height of the user picker. If not set, the minimum height will be based on the "height" prop then "compact" or "normal" appearance if height is not set. */
|
|
129
|
+
minHeight?: number | string;
|
|
128
130
|
/** Name to use for input element. */
|
|
129
131
|
name?: string;
|
|
130
132
|
/** Display the picker with no border. */
|
|
@@ -64,6 +64,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
|
|
|
64
64
|
menuPortalTarget?: HTMLElement;
|
|
65
65
|
menuPosition?: "absolute" | "fixed";
|
|
66
66
|
menuShouldBlockScroll?: boolean;
|
|
67
|
+
minHeight?: number | string;
|
|
67
68
|
name?: string;
|
|
68
69
|
noBorder?: boolean;
|
|
69
70
|
noOptionsMessage?: ((value: {
|
|
@@ -173,6 +174,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
|
|
|
173
174
|
maxOptions?: number | undefined;
|
|
174
175
|
maxPickerHeight?: number | undefined;
|
|
175
176
|
menuMinWidth?: number | undefined;
|
|
177
|
+
minHeight?: number | string | undefined;
|
|
176
178
|
noBorder?: boolean | undefined;
|
|
177
179
|
onClear?: import("..").OnPicker | undefined;
|
|
178
180
|
onClose?: import("..").OnPicker | undefined;
|
|
@@ -55,6 +55,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
55
55
|
menuPortalTarget?: HTMLElement;
|
|
56
56
|
menuPosition?: "absolute" | "fixed";
|
|
57
57
|
menuShouldBlockScroll?: boolean;
|
|
58
|
+
minHeight?: number | string;
|
|
58
59
|
name?: string;
|
|
59
60
|
noBorder?: boolean;
|
|
60
61
|
noOptionsMessage?: ((value: {
|
|
@@ -88,7 +89,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
88
89
|
UNSAFE_hasDraggableParentComponent?: boolean;
|
|
89
90
|
value?: import("..").Value;
|
|
90
91
|
width?: number | string;
|
|
91
|
-
}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
|
|
92
|
+
}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "minHeight" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
|
|
92
93
|
isMulti?: boolean | undefined;
|
|
93
94
|
width?: number | string | undefined;
|
|
94
95
|
} & {} & React.RefAttributes<any>>;
|
|
@@ -2,5 +2,5 @@ import { type StylesConfig } from '@atlaskit/select';
|
|
|
2
2
|
export declare const BORDER_PADDING: "var(--ds-space-075)";
|
|
3
3
|
export declare const AVATAR_PADDING = 6;
|
|
4
4
|
export declare const INDICATOR_WIDTH = 39;
|
|
5
|
-
export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean, isPopupStyles?: boolean, height?: number | string) => StylesConfig>;
|
|
5
|
+
export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean, isPopupStyles?: boolean, height?: number | string, minHeight?: number | string) => StylesConfig>;
|
|
6
6
|
export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean) => StylesConfig>;
|
|
@@ -125,6 +125,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
|
|
|
125
125
|
menuPosition?: 'absolute' | 'fixed';
|
|
126
126
|
/** Whether to block scrolling actions */
|
|
127
127
|
menuShouldBlockScroll?: boolean;
|
|
128
|
+
/** Sets the minimum height of the user picker. If not set, the minimum height will be based on the "height" prop then "compact" or "normal" appearance if height is not set. */
|
|
129
|
+
minHeight?: number | string;
|
|
128
130
|
/** Name to use for input element. */
|
|
129
131
|
name?: string;
|
|
130
132
|
/** Display the picker with no border. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/user-picker",
|
|
3
|
-
"version": "11.23.
|
|
3
|
+
"version": "11.23.2",
|
|
4
4
|
"description": "Fabric component for display a dropdown to select a user from",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
47
47
|
"@atlaskit/avatar": "^25.8.0",
|
|
48
48
|
"@atlaskit/feature-gate-js-client": "^5.5.0",
|
|
49
|
-
"@atlaskit/icon": "^
|
|
49
|
+
"@atlaskit/icon": "^32.0.0",
|
|
50
50
|
"@atlaskit/logo": "^19.10.0",
|
|
51
51
|
"@atlaskit/lozenge": "^13.4.0",
|
|
52
52
|
"@atlaskit/people-teams-ui-public": "^3.7.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@atlaskit/select": "^21.7.0",
|
|
57
57
|
"@atlaskit/spinner": "^19.0.0",
|
|
58
58
|
"@atlaskit/teams-avatar": "^2.4.0",
|
|
59
|
-
"@atlaskit/theme": "^
|
|
59
|
+
"@atlaskit/theme": "^22.0.0",
|
|
60
60
|
"@atlaskit/tokens": "^11.0.0",
|
|
61
61
|
"@atlaskit/tooltip": "^20.14.0",
|
|
62
62
|
"@atlaskit/ufo": "^0.4.0",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"@af/visual-regression": "workspace:^",
|
|
79
79
|
"@atlaskit/elements-test-helpers": "workspace:^",
|
|
80
80
|
"@atlaskit/heading": "^5.3.0",
|
|
81
|
-
"@atlassian/a11y-jest-testing": "^0.
|
|
81
|
+
"@atlassian/a11y-jest-testing": "^0.11.0",
|
|
82
82
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
83
83
|
"@emotion/styled": "^11.0.0",
|
|
84
84
|
"@testing-library/dom": "^10.1.0",
|