@atlaskit/user-picker 11.20.2 → 11.20.4
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/afm-jira/tsconfig.json +1 -1
- package/afm-products/tsconfig.json +1 -1
- package/dist/cjs/analytics.js +1 -1
- package/dist/cjs/components/AvatarItemOption.js +1 -1
- package/dist/cjs/components/ExternalUserOption/ExternalAvatarItemOption.js +1 -1
- package/dist/cjs/components/ExternalUserOption/main.js +1 -1
- package/dist/cjs/components/MultiValue.js +1 -1
- package/dist/cjs/components/PopupControl.js +1 -1
- package/dist/es2019/analytics.js +1 -1
- package/dist/es2019/components/AvatarItemOption.js +1 -1
- package/dist/es2019/components/ExternalUserOption/ExternalAvatarItemOption.js +1 -1
- package/dist/es2019/components/ExternalUserOption/main.js +1 -1
- package/dist/es2019/components/MultiValue.js +1 -1
- package/dist/es2019/components/PopupControl.js +1 -1
- package/dist/esm/analytics.js +1 -1
- package/dist/esm/components/AvatarItemOption.js +1 -1
- package/dist/esm/components/ExternalUserOption/ExternalAvatarItemOption.js +1 -1
- package/dist/esm/components/ExternalUserOption/main.js +1 -1
- package/dist/esm/components/MultiValue.js +1 -1
- package/dist/esm/components/PopupControl.js +1 -1
- package/dist/types/components/BaseUserPicker.d.ts +23 -20
- package/dist/types/components/popup.d.ts +19 -18
- package/dist/types-ts4.5/components/BaseUserPicker.d.ts +23 -20
- package/dist/types-ts4.5/components/popup.d.ts +19 -18
- package/docs/0-intro.tsx +2 -1
- package/docs/1-smart-user-picker.tsx +2 -1
- package/docs/2-popup-user-picker.tsx +2 -1
- package/package.json +5 -4
- package/build/tsconfig.json +0 -23
package/CHANGELOG.md
CHANGED
package/afm-jira/tsconfig.json
CHANGED
package/dist/cjs/analytics.js
CHANGED
|
@@ -13,7 +13,7 @@ var _utils = require("./components/utils");
|
|
|
13
13
|
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; }
|
|
14
14
|
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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
15
15
|
var packageName = "@atlaskit/user-picker";
|
|
16
|
-
var packageVersion = "11.20.
|
|
16
|
+
var packageVersion = "11.20.3";
|
|
17
17
|
var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
|
|
18
18
|
var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
|
|
19
19
|
var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
|
|
@@ -73,7 +73,7 @@ var optionWrapperFix = (0, _react2.css)({
|
|
|
73
73
|
});
|
|
74
74
|
var getTextStyle = function getTextStyle(isSecondary) {
|
|
75
75
|
var secondaryCssArgs = isSecondary ? {
|
|
76
|
-
font: "var(--ds-font-body-small, normal 400
|
|
76
|
+
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
|
|
77
77
|
} : {};
|
|
78
78
|
if ((0, _platformFeatureFlags.fg)('platform_user_picker_firefox_tab_fix')) {
|
|
79
79
|
return (0, _react2.css)(_objectSpread({
|
|
@@ -46,7 +46,7 @@ var textSection = (0, _react.css)({
|
|
|
46
46
|
var getTextStyle = function getTextStyle(isSecondary) {
|
|
47
47
|
var secondaryCssArgs = isSecondary ? {
|
|
48
48
|
color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
|
|
49
|
-
font: "var(--ds-font-body-small, normal 400
|
|
49
|
+
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
|
|
50
50
|
} : {};
|
|
51
51
|
return (0, _react.css)(_objectSpread(_objectSpread({
|
|
52
52
|
display: 'flex',
|
|
@@ -44,7 +44,7 @@ var imageContainer = exports.imageContainer = (0, _react2.css)({
|
|
|
44
44
|
|
|
45
45
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
46
46
|
var emailDomainWrapper = exports.emailDomainWrapper = (0, _react2.css)({
|
|
47
|
-
fontWeight: "var(--ds-font-weight-bold,
|
|
47
|
+
fontWeight: "var(--ds-font-weight-bold, 653)"
|
|
48
48
|
});
|
|
49
49
|
var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
|
|
50
50
|
function ExternalUserOptionImpl() {
|
|
@@ -48,7 +48,7 @@ var groupTagContainer = (0, _primitives.xcss)({
|
|
|
48
48
|
marginTop: 'space.025'
|
|
49
49
|
});
|
|
50
50
|
var nameWrapper = (0, _react2.css)({
|
|
51
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
51
|
+
font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
52
52
|
paddingLeft: "var(--ds-space-050, 4px)"
|
|
53
53
|
});
|
|
54
54
|
var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
|
|
@@ -26,7 +26,7 @@ var controlWrapper = (0, _react2.css)({
|
|
|
26
26
|
});
|
|
27
27
|
var labelStyle = (0, _react2.css)({
|
|
28
28
|
color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
|
|
29
|
-
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
29
|
+
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
30
30
|
fontWeight: "var(--ds-font-weight-semibold, 600)",
|
|
31
31
|
paddingBottom: "var(--ds-space-050, 4px)",
|
|
32
32
|
paddingLeft: "var(--ds-space-0, 0px)",
|
package/dist/es2019/analytics.js
CHANGED
|
@@ -4,7 +4,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
|
|
|
4
4
|
import { v4 as uuidv4 } from 'uuid';
|
|
5
5
|
import { isCustom, isExternalUser } from './components/utils';
|
|
6
6
|
const packageName = "@atlaskit/user-picker";
|
|
7
|
-
const packageVersion = "11.20.
|
|
7
|
+
const packageVersion = "11.20.3";
|
|
8
8
|
const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
|
|
9
9
|
const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
|
|
10
10
|
const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
|
|
@@ -59,7 +59,7 @@ const optionWrapperFix = css({
|
|
|
59
59
|
});
|
|
60
60
|
const getTextStyle = isSecondary => {
|
|
61
61
|
const secondaryCssArgs = isSecondary ? {
|
|
62
|
-
font: "var(--ds-font-body-small, normal 400
|
|
62
|
+
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
|
|
63
63
|
} : {};
|
|
64
64
|
if (fg('platform_user_picker_firefox_tab_fix')) {
|
|
65
65
|
return css({
|
|
@@ -37,7 +37,7 @@ const textSection = css({
|
|
|
37
37
|
const getTextStyle = isSecondary => {
|
|
38
38
|
const secondaryCssArgs = isSecondary ? {
|
|
39
39
|
color: `var(--ds-text-selected, ${B400})`,
|
|
40
|
-
font: "var(--ds-font-body-small, normal 400
|
|
40
|
+
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
|
|
41
41
|
} : {};
|
|
42
42
|
return css({
|
|
43
43
|
display: 'flex',
|
|
@@ -32,7 +32,7 @@ export const imageContainer = css({
|
|
|
32
32
|
|
|
33
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
34
34
|
export const emailDomainWrapper = css({
|
|
35
|
-
fontWeight: "var(--ds-font-weight-bold,
|
|
35
|
+
fontWeight: "var(--ds-font-weight-bold, 653)"
|
|
36
36
|
});
|
|
37
37
|
class ExternalUserOptionImpl extends React.PureComponent {
|
|
38
38
|
constructor(..._args) {
|
|
@@ -36,7 +36,7 @@ const groupTagContainer = xcss({
|
|
|
36
36
|
marginTop: 'space.025'
|
|
37
37
|
});
|
|
38
38
|
const nameWrapper = css({
|
|
39
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
39
|
+
font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
40
40
|
paddingLeft: "var(--ds-space-050, 4px)"
|
|
41
41
|
});
|
|
42
42
|
export class MultiValue extends React.Component {
|
|
@@ -14,7 +14,7 @@ const controlWrapper = css({
|
|
|
14
14
|
});
|
|
15
15
|
const labelStyle = css({
|
|
16
16
|
color: `var(--ds-text-subtlest, ${N200})`,
|
|
17
|
-
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
17
|
+
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
18
18
|
fontWeight: "var(--ds-font-weight-semibold, 600)",
|
|
19
19
|
paddingBottom: "var(--ds-space-050, 4px)",
|
|
20
20
|
paddingLeft: "var(--ds-space-0, 0px)",
|
package/dist/esm/analytics.js
CHANGED
|
@@ -7,7 +7,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
|
|
|
7
7
|
import { v4 as uuidv4 } from 'uuid';
|
|
8
8
|
import { isCustom, isExternalUser } from './components/utils';
|
|
9
9
|
var packageName = "@atlaskit/user-picker";
|
|
10
|
-
var packageVersion = "11.20.
|
|
10
|
+
var packageVersion = "11.20.3";
|
|
11
11
|
var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
|
|
12
12
|
var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
|
|
13
13
|
var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
|
|
@@ -64,7 +64,7 @@ var optionWrapperFix = css({
|
|
|
64
64
|
});
|
|
65
65
|
var getTextStyle = function getTextStyle(isSecondary) {
|
|
66
66
|
var secondaryCssArgs = isSecondary ? {
|
|
67
|
-
font: "var(--ds-font-body-small, normal 400
|
|
67
|
+
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
|
|
68
68
|
} : {};
|
|
69
69
|
if (fg('platform_user_picker_firefox_tab_fix')) {
|
|
70
70
|
return css(_objectSpread({
|
|
@@ -42,7 +42,7 @@ var textSection = css({
|
|
|
42
42
|
var getTextStyle = function getTextStyle(isSecondary) {
|
|
43
43
|
var secondaryCssArgs = isSecondary ? {
|
|
44
44
|
color: "var(--ds-text-selected, ".concat(B400, ")"),
|
|
45
|
-
font: "var(--ds-font-body-small, normal 400
|
|
45
|
+
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
|
|
46
46
|
} : {};
|
|
47
47
|
return css(_objectSpread(_objectSpread({
|
|
48
48
|
display: 'flex',
|
|
@@ -40,7 +40,7 @@ export var imageContainer = css({
|
|
|
40
40
|
|
|
41
41
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
42
42
|
export var emailDomainWrapper = css({
|
|
43
|
-
fontWeight: "var(--ds-font-weight-bold,
|
|
43
|
+
fontWeight: "var(--ds-font-weight-bold, 653)"
|
|
44
44
|
});
|
|
45
45
|
var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
|
|
46
46
|
function ExternalUserOptionImpl() {
|
|
@@ -43,7 +43,7 @@ var groupTagContainer = xcss({
|
|
|
43
43
|
marginTop: 'space.025'
|
|
44
44
|
});
|
|
45
45
|
var nameWrapper = css({
|
|
46
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
46
|
+
font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
47
47
|
paddingLeft: "var(--ds-space-050, 4px)"
|
|
48
48
|
});
|
|
49
49
|
export var MultiValue = /*#__PURE__*/function (_React$Component) {
|
|
@@ -21,7 +21,7 @@ var controlWrapper = css({
|
|
|
21
21
|
});
|
|
22
22
|
var labelStyle = css({
|
|
23
23
|
color: "var(--ds-text-subtlest, ".concat(N200, ")"),
|
|
24
|
-
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
24
|
+
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
25
25
|
fontWeight: "var(--ds-font-weight-semibold, 600)",
|
|
26
26
|
paddingBottom: "var(--ds-space-050, 4px)",
|
|
27
27
|
paddingLeft: "var(--ds-space-0, 0px)",
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type { Appearance, OptionData, UserPickerProps, UserPickerState } from '../types';
|
|
3
|
+
import type { Appearance, DefaultValue, LoadOptions, LoadUserSource, OnChange, OnInputChange, OnOption, OnPicker, OptionData, UserPickerProps, UserPickerRef, UserPickerState, Value } from '../types';
|
|
3
4
|
import type { AriaAttributes } from 'react';
|
|
5
|
+
import type { SelectComponentsConfig, PopupSelectProps, StylesConfig } from '@atlaskit/select';
|
|
6
|
+
import type { EmailValidator } from './emailValidation';
|
|
4
7
|
export type BaseUserPickerProps = UserPickerProps & {
|
|
5
8
|
components: any;
|
|
6
9
|
name?: string;
|
|
@@ -80,13 +83,13 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
80
83
|
captureMenuScroll?: boolean;
|
|
81
84
|
clearValueLabel?: string;
|
|
82
85
|
closeMenuOnScroll?: boolean | EventListener;
|
|
83
|
-
components?:
|
|
84
|
-
defaultValue?:
|
|
86
|
+
components?: SelectComponentsConfig<OptionData, boolean>;
|
|
87
|
+
defaultValue?: DefaultValue;
|
|
85
88
|
disableInput?: boolean;
|
|
86
89
|
emailLabel?: string;
|
|
87
90
|
fieldId: string | null;
|
|
88
91
|
footer?: React.ReactNode;
|
|
89
|
-
forwardedRef?: React.ForwardedRef<
|
|
92
|
+
forwardedRef?: React.ForwardedRef<UserPickerRef>;
|
|
90
93
|
groupByTypeOrder?: NonNullable<OptionData["type"]>[];
|
|
91
94
|
header?: React.ReactNode;
|
|
92
95
|
height?: number | string;
|
|
@@ -98,12 +101,12 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
98
101
|
isInvalid?: boolean;
|
|
99
102
|
isLoading?: boolean;
|
|
100
103
|
isMulti?: boolean;
|
|
101
|
-
isValidEmail?:
|
|
102
|
-
loadOptions?:
|
|
104
|
+
isValidEmail?: EmailValidator;
|
|
105
|
+
loadOptions?: LoadOptions;
|
|
103
106
|
loadOptionsErrorMessage?: (value: {
|
|
104
107
|
inputValue: string;
|
|
105
108
|
}) => React.ReactNode;
|
|
106
|
-
loadUserSource?:
|
|
109
|
+
loadUserSource?: LoadUserSource;
|
|
107
110
|
maxOptions?: number;
|
|
108
111
|
maxPickerHeight?: number;
|
|
109
112
|
menuIsOpen?: boolean;
|
|
@@ -116,32 +119,32 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
116
119
|
noOptionsMessage?: ((value: {
|
|
117
120
|
inputValue: string;
|
|
118
121
|
}) => string | null | React.ReactNode) | null | React.ReactNode;
|
|
119
|
-
onBlur?:
|
|
120
|
-
onChange?:
|
|
121
|
-
onClear?:
|
|
122
|
-
onClose?:
|
|
123
|
-
onFocus?:
|
|
124
|
-
onInputChange?:
|
|
122
|
+
onBlur?: OnPicker;
|
|
123
|
+
onChange?: OnChange;
|
|
124
|
+
onClear?: OnPicker;
|
|
125
|
+
onClose?: OnPicker;
|
|
126
|
+
onFocus?: OnPicker;
|
|
127
|
+
onInputChange?: OnInputChange;
|
|
125
128
|
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
126
|
-
onOpen?:
|
|
127
|
-
onSelection?:
|
|
129
|
+
onOpen?: OnPicker;
|
|
130
|
+
onSelection?: OnOption;
|
|
128
131
|
open?: boolean;
|
|
129
132
|
openMenuOnClick?: boolean;
|
|
130
133
|
options?: OptionData[];
|
|
131
134
|
placeholder?: React.ReactNode;
|
|
132
135
|
placeholderAvatar?: "person" | "team";
|
|
133
|
-
popupSelectProps?:
|
|
136
|
+
popupSelectProps?: PopupSelectProps<OptionData>;
|
|
134
137
|
required?: boolean;
|
|
135
138
|
search?: string;
|
|
136
139
|
setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
137
140
|
showClearIndicator?: boolean;
|
|
138
141
|
strategy?: "fixed" | "absolute";
|
|
139
|
-
styles?:
|
|
142
|
+
styles?: StylesConfig;
|
|
140
143
|
subtle?: boolean;
|
|
141
144
|
suggestEmailsForDomain?: string;
|
|
142
145
|
textFieldBackgroundColor?: boolean;
|
|
143
146
|
UNSAFE_hasDraggableParentComponent?: boolean;
|
|
144
|
-
value?:
|
|
147
|
+
value?: Value;
|
|
145
148
|
width?: number | string;
|
|
146
149
|
} & {
|
|
147
150
|
components: any;
|
|
@@ -156,14 +159,14 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
156
159
|
*/
|
|
157
160
|
UNSAFE_hasDraggableParentComponent?: boolean;
|
|
158
161
|
width: string | number;
|
|
159
|
-
}, keyof
|
|
162
|
+
}, keyof WithAnalyticsEventsProps>, "options" | "noOptionsMessage" | "placeholder" | "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "components" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "inputId" | "isDisabled" | "isFooterFocused" | "isInvalid" | "isLoading" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuIsOpen" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onKeyDown" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "required" | "search" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "styles" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "value" | "width" | "pickerProps" | "SelectComponent"> & {
|
|
160
163
|
isClearable?: boolean | undefined;
|
|
161
164
|
isMulti?: boolean | undefined;
|
|
162
|
-
openMenuOnClick?: boolean | undefined;
|
|
163
165
|
loadOptionsErrorMessage?: ((value: {
|
|
164
166
|
inputValue: string;
|
|
165
167
|
}) => React.ReactNode) | undefined;
|
|
166
168
|
noBorder?: boolean | undefined;
|
|
169
|
+
openMenuOnClick?: boolean | undefined;
|
|
167
170
|
subtle?: boolean | undefined;
|
|
168
171
|
textFieldBackgroundColor?: boolean | undefined;
|
|
169
172
|
} & {} & React.RefAttributes<any>>;
|
|
@@ -1,48 +1,49 @@
|
|
|
1
|
+
import { type MemoizedFn } from 'memoize-one';
|
|
1
2
|
import { type Placement } from '@atlaskit/popper';
|
|
2
3
|
import { type Target, type BoundariesElement, type RootBoundary } from '../types';
|
|
3
|
-
export declare const getPopupProps:
|
|
4
|
-
|
|
4
|
+
export declare const getPopupProps: MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: "fixed" | "absolute") => {
|
|
5
|
+
autoFocus: boolean;
|
|
5
6
|
controlShouldRenderValue: boolean;
|
|
6
|
-
minMenuWidth: string | number;
|
|
7
7
|
maxMenuWidth: string | number;
|
|
8
|
-
|
|
9
|
-
target: Target;
|
|
10
|
-
popupTitle: string | undefined;
|
|
8
|
+
minMenuWidth: string | number;
|
|
11
9
|
popperProps: {
|
|
12
|
-
placement: Placement;
|
|
13
|
-
strategy: "fixed" | "absolute";
|
|
14
10
|
modifiers: ({
|
|
11
|
+
enabled?: undefined;
|
|
12
|
+
fn?: undefined;
|
|
15
13
|
name: string;
|
|
16
14
|
options: {
|
|
15
|
+
boundary?: undefined;
|
|
17
16
|
offset: number[] | undefined;
|
|
18
17
|
rootBoundary?: undefined;
|
|
19
|
-
boundary?: undefined;
|
|
20
18
|
};
|
|
21
|
-
enabled?: undefined;
|
|
22
19
|
order?: undefined;
|
|
23
|
-
fn?: undefined;
|
|
24
20
|
} | {
|
|
25
|
-
name: string;
|
|
26
21
|
enabled: boolean;
|
|
27
|
-
order: number;
|
|
28
22
|
fn: (data: any) => any;
|
|
23
|
+
name: string;
|
|
29
24
|
options?: undefined;
|
|
25
|
+
order: number;
|
|
30
26
|
} | {
|
|
27
|
+
enabled?: undefined;
|
|
28
|
+
fn?: undefined;
|
|
31
29
|
name: string;
|
|
32
30
|
options: {
|
|
33
|
-
rootBoundary: RootBoundary | undefined;
|
|
34
31
|
boundary: BoundariesElement | undefined;
|
|
35
32
|
offset?: undefined;
|
|
33
|
+
rootBoundary: RootBoundary | undefined;
|
|
36
34
|
};
|
|
37
|
-
enabled?: undefined;
|
|
38
35
|
order?: undefined;
|
|
39
|
-
fn?: undefined;
|
|
40
36
|
} | {
|
|
41
|
-
name: string;
|
|
42
37
|
enabled: boolean | undefined;
|
|
38
|
+
fn?: undefined;
|
|
39
|
+
name: string;
|
|
43
40
|
options?: undefined;
|
|
44
41
|
order?: undefined;
|
|
45
|
-
fn?: undefined;
|
|
46
42
|
})[];
|
|
43
|
+
placement: Placement;
|
|
44
|
+
strategy: "fixed" | "absolute";
|
|
47
45
|
};
|
|
46
|
+
popupTitle: string | undefined;
|
|
47
|
+
searchThreshold: number;
|
|
48
|
+
target: Target;
|
|
48
49
|
}>;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type { Appearance, OptionData, UserPickerProps, UserPickerState } from '../types';
|
|
3
|
+
import type { Appearance, DefaultValue, LoadOptions, LoadUserSource, OnChange, OnInputChange, OnOption, OnPicker, OptionData, UserPickerProps, UserPickerRef, UserPickerState, Value } from '../types';
|
|
3
4
|
import type { AriaAttributes } from 'react';
|
|
5
|
+
import type { SelectComponentsConfig, PopupSelectProps, StylesConfig } from '@atlaskit/select';
|
|
6
|
+
import type { EmailValidator } from './emailValidation';
|
|
4
7
|
export type BaseUserPickerProps = UserPickerProps & {
|
|
5
8
|
components: any;
|
|
6
9
|
name?: string;
|
|
@@ -80,13 +83,13 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
80
83
|
captureMenuScroll?: boolean;
|
|
81
84
|
clearValueLabel?: string;
|
|
82
85
|
closeMenuOnScroll?: boolean | EventListener;
|
|
83
|
-
components?:
|
|
84
|
-
defaultValue?:
|
|
86
|
+
components?: SelectComponentsConfig<OptionData, boolean>;
|
|
87
|
+
defaultValue?: DefaultValue;
|
|
85
88
|
disableInput?: boolean;
|
|
86
89
|
emailLabel?: string;
|
|
87
90
|
fieldId: string | null;
|
|
88
91
|
footer?: React.ReactNode;
|
|
89
|
-
forwardedRef?: React.ForwardedRef<
|
|
92
|
+
forwardedRef?: React.ForwardedRef<UserPickerRef>;
|
|
90
93
|
groupByTypeOrder?: NonNullable<OptionData["type"]>[];
|
|
91
94
|
header?: React.ReactNode;
|
|
92
95
|
height?: number | string;
|
|
@@ -98,12 +101,12 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
98
101
|
isInvalid?: boolean;
|
|
99
102
|
isLoading?: boolean;
|
|
100
103
|
isMulti?: boolean;
|
|
101
|
-
isValidEmail?:
|
|
102
|
-
loadOptions?:
|
|
104
|
+
isValidEmail?: EmailValidator;
|
|
105
|
+
loadOptions?: LoadOptions;
|
|
103
106
|
loadOptionsErrorMessage?: (value: {
|
|
104
107
|
inputValue: string;
|
|
105
108
|
}) => React.ReactNode;
|
|
106
|
-
loadUserSource?:
|
|
109
|
+
loadUserSource?: LoadUserSource;
|
|
107
110
|
maxOptions?: number;
|
|
108
111
|
maxPickerHeight?: number;
|
|
109
112
|
menuIsOpen?: boolean;
|
|
@@ -116,32 +119,32 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
116
119
|
noOptionsMessage?: ((value: {
|
|
117
120
|
inputValue: string;
|
|
118
121
|
}) => string | null | React.ReactNode) | null | React.ReactNode;
|
|
119
|
-
onBlur?:
|
|
120
|
-
onChange?:
|
|
121
|
-
onClear?:
|
|
122
|
-
onClose?:
|
|
123
|
-
onFocus?:
|
|
124
|
-
onInputChange?:
|
|
122
|
+
onBlur?: OnPicker;
|
|
123
|
+
onChange?: OnChange;
|
|
124
|
+
onClear?: OnPicker;
|
|
125
|
+
onClose?: OnPicker;
|
|
126
|
+
onFocus?: OnPicker;
|
|
127
|
+
onInputChange?: OnInputChange;
|
|
125
128
|
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
126
|
-
onOpen?:
|
|
127
|
-
onSelection?:
|
|
129
|
+
onOpen?: OnPicker;
|
|
130
|
+
onSelection?: OnOption;
|
|
128
131
|
open?: boolean;
|
|
129
132
|
openMenuOnClick?: boolean;
|
|
130
133
|
options?: OptionData[];
|
|
131
134
|
placeholder?: React.ReactNode;
|
|
132
135
|
placeholderAvatar?: "person" | "team";
|
|
133
|
-
popupSelectProps?:
|
|
136
|
+
popupSelectProps?: PopupSelectProps<OptionData>;
|
|
134
137
|
required?: boolean;
|
|
135
138
|
search?: string;
|
|
136
139
|
setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
137
140
|
showClearIndicator?: boolean;
|
|
138
141
|
strategy?: "fixed" | "absolute";
|
|
139
|
-
styles?:
|
|
142
|
+
styles?: StylesConfig;
|
|
140
143
|
subtle?: boolean;
|
|
141
144
|
suggestEmailsForDomain?: string;
|
|
142
145
|
textFieldBackgroundColor?: boolean;
|
|
143
146
|
UNSAFE_hasDraggableParentComponent?: boolean;
|
|
144
|
-
value?:
|
|
147
|
+
value?: Value;
|
|
145
148
|
width?: number | string;
|
|
146
149
|
} & {
|
|
147
150
|
components: any;
|
|
@@ -156,14 +159,14 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
156
159
|
*/
|
|
157
160
|
UNSAFE_hasDraggableParentComponent?: boolean;
|
|
158
161
|
width: string | number;
|
|
159
|
-
}, keyof
|
|
162
|
+
}, keyof WithAnalyticsEventsProps>, "options" | "noOptionsMessage" | "placeholder" | "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "components" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "inputId" | "isDisabled" | "isFooterFocused" | "isInvalid" | "isLoading" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuIsOpen" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onKeyDown" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "required" | "search" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "styles" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "value" | "width" | "pickerProps" | "SelectComponent"> & {
|
|
160
163
|
isClearable?: boolean | undefined;
|
|
161
164
|
isMulti?: boolean | undefined;
|
|
162
|
-
openMenuOnClick?: boolean | undefined;
|
|
163
165
|
loadOptionsErrorMessage?: ((value: {
|
|
164
166
|
inputValue: string;
|
|
165
167
|
}) => React.ReactNode) | undefined;
|
|
166
168
|
noBorder?: boolean | undefined;
|
|
169
|
+
openMenuOnClick?: boolean | undefined;
|
|
167
170
|
subtle?: boolean | undefined;
|
|
168
171
|
textFieldBackgroundColor?: boolean | undefined;
|
|
169
172
|
} & {} & React.RefAttributes<any>>;
|
|
@@ -1,48 +1,49 @@
|
|
|
1
|
+
import { type MemoizedFn } from 'memoize-one';
|
|
1
2
|
import { type Placement } from '@atlaskit/popper';
|
|
2
3
|
import { type Target, type BoundariesElement, type RootBoundary } from '../types';
|
|
3
|
-
export declare const getPopupProps:
|
|
4
|
-
|
|
4
|
+
export declare const getPopupProps: MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: "fixed" | "absolute") => {
|
|
5
|
+
autoFocus: boolean;
|
|
5
6
|
controlShouldRenderValue: boolean;
|
|
6
|
-
minMenuWidth: string | number;
|
|
7
7
|
maxMenuWidth: string | number;
|
|
8
|
-
|
|
9
|
-
target: Target;
|
|
10
|
-
popupTitle: string | undefined;
|
|
8
|
+
minMenuWidth: string | number;
|
|
11
9
|
popperProps: {
|
|
12
|
-
placement: Placement;
|
|
13
|
-
strategy: "fixed" | "absolute";
|
|
14
10
|
modifiers: ({
|
|
11
|
+
enabled?: undefined;
|
|
12
|
+
fn?: undefined;
|
|
15
13
|
name: string;
|
|
16
14
|
options: {
|
|
15
|
+
boundary?: undefined;
|
|
17
16
|
offset: number[] | undefined;
|
|
18
17
|
rootBoundary?: undefined;
|
|
19
|
-
boundary?: undefined;
|
|
20
18
|
};
|
|
21
|
-
enabled?: undefined;
|
|
22
19
|
order?: undefined;
|
|
23
|
-
fn?: undefined;
|
|
24
20
|
} | {
|
|
25
|
-
name: string;
|
|
26
21
|
enabled: boolean;
|
|
27
|
-
order: number;
|
|
28
22
|
fn: (data: any) => any;
|
|
23
|
+
name: string;
|
|
29
24
|
options?: undefined;
|
|
25
|
+
order: number;
|
|
30
26
|
} | {
|
|
27
|
+
enabled?: undefined;
|
|
28
|
+
fn?: undefined;
|
|
31
29
|
name: string;
|
|
32
30
|
options: {
|
|
33
|
-
rootBoundary: RootBoundary | undefined;
|
|
34
31
|
boundary: BoundariesElement | undefined;
|
|
35
32
|
offset?: undefined;
|
|
33
|
+
rootBoundary: RootBoundary | undefined;
|
|
36
34
|
};
|
|
37
|
-
enabled?: undefined;
|
|
38
35
|
order?: undefined;
|
|
39
|
-
fn?: undefined;
|
|
40
36
|
} | {
|
|
41
|
-
name: string;
|
|
42
37
|
enabled: boolean | undefined;
|
|
38
|
+
fn?: undefined;
|
|
39
|
+
name: string;
|
|
43
40
|
options?: undefined;
|
|
44
41
|
order?: undefined;
|
|
45
|
-
fn?: undefined;
|
|
46
42
|
})[];
|
|
43
|
+
placement: Placement;
|
|
44
|
+
strategy: "fixed" | "absolute";
|
|
47
45
|
};
|
|
46
|
+
popupTitle: string | undefined;
|
|
47
|
+
searchThreshold: number;
|
|
48
|
+
target: Target;
|
|
48
49
|
}>;
|
package/docs/0-intro.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { code, Example, md, Props, AtlassianInternalWarning } from '@atlaskit/docs';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const _default_1: any = md`
|
|
5
5
|
${(<AtlassianInternalWarning />)}
|
|
6
6
|
|
|
7
7
|
This is the platform field for selecting users. On top of that you can also select [Teams](https://developer.atlassian.com/platform/teams/overview/what-are-teams/).
|
|
@@ -56,3 +56,4 @@ export default md`
|
|
|
56
56
|
/>
|
|
57
57
|
)}
|
|
58
58
|
`;
|
|
59
|
+
export default _default_1;
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { md } from '@atlaskit/docs';
|
|
4
4
|
import SectionMessage from '@atlaskit/section-message';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
const _default_1: any = md`
|
|
7
7
|
${(
|
|
8
8
|
<SectionMessage
|
|
9
9
|
appearance="warning"
|
|
@@ -18,3 +18,4 @@ export default md`
|
|
|
18
18
|
</SectionMessage>
|
|
19
19
|
)}
|
|
20
20
|
`;
|
|
21
|
+
export default _default_1;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { code, Example, md, Props, AtlassianInternalWarning } from '@atlaskit/docs';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const _default_1: any = md`
|
|
5
5
|
${(<AtlassianInternalWarning />)}
|
|
6
6
|
|
|
7
7
|
Popup version of the User Picker. Define a separate target which the menu will display under.
|
|
@@ -31,3 +31,4 @@ export default md`
|
|
|
31
31
|
/>
|
|
32
32
|
)}
|
|
33
33
|
`;
|
|
34
|
+
export default _default_1;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/user-picker",
|
|
3
|
-
"version": "11.20.
|
|
3
|
+
"version": "11.20.4",
|
|
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,18 +46,18 @@
|
|
|
46
46
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
47
47
|
"@atlaskit/avatar": "^25.7.0",
|
|
48
48
|
"@atlaskit/feature-gate-js-client": "^5.5.0",
|
|
49
|
-
"@atlaskit/icon": "^
|
|
49
|
+
"@atlaskit/icon": "^30.0.0",
|
|
50
50
|
"@atlaskit/logo": "^19.10.0",
|
|
51
51
|
"@atlaskit/lozenge": "^13.3.0",
|
|
52
52
|
"@atlaskit/people-teams-ui-public": "^3.7.0",
|
|
53
53
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
54
54
|
"@atlaskit/popper": "^7.1.0",
|
|
55
55
|
"@atlaskit/primitives": "^17.1.0",
|
|
56
|
-
"@atlaskit/select": "^21.
|
|
56
|
+
"@atlaskit/select": "^21.7.0",
|
|
57
57
|
"@atlaskit/spinner": "^19.0.0",
|
|
58
58
|
"@atlaskit/teams-avatar": "^2.4.0",
|
|
59
59
|
"@atlaskit/theme": "^21.0.0",
|
|
60
|
-
"@atlaskit/tokens": "^
|
|
60
|
+
"@atlaskit/tokens": "^10.1.0",
|
|
61
61
|
"@atlaskit/tooltip": "^20.14.0",
|
|
62
62
|
"@atlaskit/ufo": "^0.4.0",
|
|
63
63
|
"@babel/runtime": "^7.0.0",
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
"@af/visual-regression": "workspace:^",
|
|
79
79
|
"@atlaskit/elements-test-helpers": "workspace:^",
|
|
80
80
|
"@atlaskit/heading": "^5.2.0",
|
|
81
|
+
"@atlassian/a11y-jest-testing": "^0.8.0",
|
|
81
82
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
82
83
|
"@emotion/styled": "^11.0.0",
|
|
83
84
|
"@testing-library/dom": "^10.1.0",
|
package/build/tsconfig.json
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../tsconfig",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"declaration": true,
|
|
5
|
-
"target": "es5",
|
|
6
|
-
"paths": {}
|
|
7
|
-
},
|
|
8
|
-
"include": [
|
|
9
|
-
"../src/**/*.ts",
|
|
10
|
-
"../src/**/*.tsx"
|
|
11
|
-
],
|
|
12
|
-
"exclude": [
|
|
13
|
-
"../src/**/__tests__/*",
|
|
14
|
-
"../src/**/*.test.*",
|
|
15
|
-
"../src/**/test.*",
|
|
16
|
-
"../src/**/examples.*",
|
|
17
|
-
"../src/**/examples/*",
|
|
18
|
-
"../src/**/examples/**/*",
|
|
19
|
-
"../src/**/*.stories.*",
|
|
20
|
-
"../src/**/stories/*",
|
|
21
|
-
"../src/**/stories/**/*"
|
|
22
|
-
]
|
|
23
|
-
}
|