@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.
Files changed (30) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/afm-jira/tsconfig.json +1 -1
  3. package/afm-products/tsconfig.json +1 -1
  4. package/dist/cjs/analytics.js +1 -1
  5. package/dist/cjs/components/AvatarItemOption.js +1 -1
  6. package/dist/cjs/components/ExternalUserOption/ExternalAvatarItemOption.js +1 -1
  7. package/dist/cjs/components/ExternalUserOption/main.js +1 -1
  8. package/dist/cjs/components/MultiValue.js +1 -1
  9. package/dist/cjs/components/PopupControl.js +1 -1
  10. package/dist/es2019/analytics.js +1 -1
  11. package/dist/es2019/components/AvatarItemOption.js +1 -1
  12. package/dist/es2019/components/ExternalUserOption/ExternalAvatarItemOption.js +1 -1
  13. package/dist/es2019/components/ExternalUserOption/main.js +1 -1
  14. package/dist/es2019/components/MultiValue.js +1 -1
  15. package/dist/es2019/components/PopupControl.js +1 -1
  16. package/dist/esm/analytics.js +1 -1
  17. package/dist/esm/components/AvatarItemOption.js +1 -1
  18. package/dist/esm/components/ExternalUserOption/ExternalAvatarItemOption.js +1 -1
  19. package/dist/esm/components/ExternalUserOption/main.js +1 -1
  20. package/dist/esm/components/MultiValue.js +1 -1
  21. package/dist/esm/components/PopupControl.js +1 -1
  22. package/dist/types/components/BaseUserPicker.d.ts +23 -20
  23. package/dist/types/components/popup.d.ts +19 -18
  24. package/dist/types-ts4.5/components/BaseUserPicker.d.ts +23 -20
  25. package/dist/types-ts4.5/components/popup.d.ts +19 -18
  26. package/docs/0-intro.tsx +2 -1
  27. package/docs/1-smart-user-picker.tsx +2 -1
  28. package/docs/2-popup-user-picker.tsx +2 -1
  29. package/package.json +5 -4
  30. package/build/tsconfig.json +0 -23
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/user-picker
2
2
 
3
+ ## 11.20.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 11.20.3
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 11.20.2
4
16
 
5
17
  ### Patch Changes
@@ -1,5 +1,5 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.jira.json",
2
+ "extends": "../../../../tsconfig.local-consumption.json",
3
3
  "compilerOptions": {
4
4
  "declaration": true,
5
5
  "target": "es5",
@@ -1,5 +1,5 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.products.json",
2
+ "extends": "../../../../tsconfig.local-consumption.json",
3
3
  "compilerOptions": {
4
4
  "declaration": true,
5
5
  "target": "es5",
@@ -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.1";
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 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
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 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
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, 700)"
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)",
@@ -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.1";
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 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
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 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
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, 700)"
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)",
@@ -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.1";
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 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
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 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
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, 700)"
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?: import("@atlaskit/select").SelectComponentsConfig<OptionData, boolean>;
84
- defaultValue?: import("../types").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<import("../types").UserPickerRef>;
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?: import("./emailValidation").EmailValidator;
102
- loadOptions?: import("../types").LoadOptions;
104
+ isValidEmail?: EmailValidator;
105
+ loadOptions?: LoadOptions;
103
106
  loadOptionsErrorMessage?: (value: {
104
107
  inputValue: string;
105
108
  }) => React.ReactNode;
106
- loadUserSource?: import("../types").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?: import("../types").OnPicker;
120
- onChange?: import("../types").OnChange;
121
- onClear?: import("../types").OnPicker;
122
- onClose?: import("../types").OnPicker;
123
- onFocus?: import("../types").OnPicker;
124
- onInputChange?: import("../types").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?: import("../types").OnPicker;
127
- onSelection?: import("../types").OnOption;
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?: import("@atlaskit/select").PopupSelectProps<OptionData>;
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?: import("@atlaskit/select").StylesConfig;
142
+ styles?: StylesConfig;
140
143
  subtle?: boolean;
141
144
  suggestEmailsForDomain?: string;
142
145
  textFieldBackgroundColor?: boolean;
143
146
  UNSAFE_hasDraggableParentComponent?: boolean;
144
- value?: import("../types").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 import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "pickerProps" | "SelectComponent"> & {
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: import("memoize-one").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") => {
4
- searchThreshold: number;
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
- autoFocus: boolean;
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?: import("@atlaskit/select").SelectComponentsConfig<OptionData, boolean>;
84
- defaultValue?: import("../types").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<import("../types").UserPickerRef>;
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?: import("./emailValidation").EmailValidator;
102
- loadOptions?: import("../types").LoadOptions;
104
+ isValidEmail?: EmailValidator;
105
+ loadOptions?: LoadOptions;
103
106
  loadOptionsErrorMessage?: (value: {
104
107
  inputValue: string;
105
108
  }) => React.ReactNode;
106
- loadUserSource?: import("../types").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?: import("../types").OnPicker;
120
- onChange?: import("../types").OnChange;
121
- onClear?: import("../types").OnPicker;
122
- onClose?: import("../types").OnPicker;
123
- onFocus?: import("../types").OnPicker;
124
- onInputChange?: import("../types").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?: import("../types").OnPicker;
127
- onSelection?: import("../types").OnOption;
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?: import("@atlaskit/select").PopupSelectProps<OptionData>;
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?: import("@atlaskit/select").StylesConfig;
142
+ styles?: StylesConfig;
140
143
  subtle?: boolean;
141
144
  suggestEmailsForDomain?: string;
142
145
  textFieldBackgroundColor?: boolean;
143
146
  UNSAFE_hasDraggableParentComponent?: boolean;
144
- value?: import("../types").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 import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "pickerProps" | "SelectComponent"> & {
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: import("memoize-one").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") => {
4
- searchThreshold: number;
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
- autoFocus: boolean;
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
- export default md`
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
- export default md`
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
- export default md`
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.2",
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": "^29.4.0",
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.6.0",
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": "^9.1.0",
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",
@@ -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
- }