@atlaskit/user-picker 10.7.0 → 10.9.0

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 CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/user-picker
2
2
 
3
+ ## 10.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`f78b73387c6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f78b73387c6) - Add onKeyDown handler to props
8
+
9
+ ## 10.8.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`38c3ed63070`](https://bitbucket.org/atlassian/atlassian-frontend/commits/38c3ed63070) - Export sub-components of Option
14
+
3
15
  ## 10.7.0
4
16
 
5
17
  ### Minor Changes
@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
12
12
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
13
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
14
14
  var packageName = "@atlaskit/user-picker";
15
- var packageVersion = "10.7.0";
15
+ var packageVersion = "10.9.0";
16
16
  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}$/;
17
17
  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}$/;
18
18
  var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
@@ -322,6 +322,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
322
322
  break;
323
323
  }
324
324
  }
325
+ _this.props.onKeyDown && _this.props.onKeyDown(event);
325
326
  });
326
327
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClearIndicatorHover", function (hoveringClearIndicator) {
327
328
  _this.setState({
@@ -1,12 +1,48 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
7
+ Object.defineProperty(exports, "CustomOption", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _CustomOption.default;
11
+ }
12
+ });
13
+ Object.defineProperty(exports, "EmailOption", {
14
+ enumerable: true,
15
+ get: function get() {
16
+ return _EmailOption.default;
17
+ }
18
+ });
19
+ Object.defineProperty(exports, "GroupOption", {
20
+ enumerable: true,
21
+ get: function get() {
22
+ return _GroupOption.default;
23
+ }
24
+ });
6
25
  Object.defineProperty(exports, "Option", {
7
26
  enumerable: true,
8
27
  get: function get() {
9
28
  return _Option.Option;
10
29
  }
11
30
  });
12
- var _Option = require("./components/Option");
31
+ Object.defineProperty(exports, "TeamOption", {
32
+ enumerable: true,
33
+ get: function get() {
34
+ return _TeamOption.default;
35
+ }
36
+ });
37
+ Object.defineProperty(exports, "UserOption", {
38
+ enumerable: true,
39
+ get: function get() {
40
+ return _UserOption.UserOption;
41
+ }
42
+ });
43
+ var _Option = require("./components/Option");
44
+ var _CustomOption = _interopRequireDefault(require("./components/CustomOption"));
45
+ var _EmailOption = _interopRequireDefault(require("./components/EmailOption"));
46
+ var _GroupOption = _interopRequireDefault(require("./components/GroupOption"));
47
+ var _UserOption = require("./components/UserOption");
48
+ var _TeamOption = _interopRequireDefault(require("./components/TeamOption"));
@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
2
2
  import { v4 as uuidv4 } from 'uuid';
3
3
  import { isCustom, isExternalUser } from './components/utils';
4
4
  const packageName = "@atlaskit/user-picker";
5
- const packageVersion = "10.7.0";
5
+ const packageVersion = "10.9.0";
6
6
  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}$/;
7
7
  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}$/;
8
8
  const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
@@ -311,6 +311,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
311
311
  break;
312
312
  }
313
313
  }
314
+ this.props.onKeyDown && this.props.onKeyDown(event);
314
315
  });
315
316
  _defineProperty(this, "handleClearIndicatorHover", hoveringClearIndicator => {
316
317
  this.setState({
@@ -1 +1,6 @@
1
- export { Option } from './components/Option';
1
+ export { Option } from './components/Option';
2
+ export { default as CustomOption } from './components/CustomOption';
3
+ export { default as EmailOption } from './components/EmailOption';
4
+ export { default as GroupOption } from './components/GroupOption';
5
+ export { UserOption } from './components/UserOption';
6
+ export { default as TeamOption } from './components/TeamOption';
@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
5
5
  import { v4 as uuidv4 } from 'uuid';
6
6
  import { isCustom, isExternalUser } from './components/utils';
7
7
  var packageName = "@atlaskit/user-picker";
8
- var packageVersion = "10.7.0";
8
+ var packageVersion = "10.9.0";
9
9
  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}$/;
10
10
  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}$/;
11
11
  var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
@@ -315,6 +315,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
315
315
  break;
316
316
  }
317
317
  }
318
+ _this.props.onKeyDown && _this.props.onKeyDown(event);
318
319
  });
319
320
  _defineProperty(_assertThisInitialized(_this), "handleClearIndicatorHover", function (hoveringClearIndicator) {
320
321
  _this.setState({
@@ -1 +1,6 @@
1
- export { Option } from './components/Option';
1
+ export { Option } from './components/Option';
2
+ export { default as CustomOption } from './components/CustomOption';
3
+ export { default as EmailOption } from './components/EmailOption';
4
+ export { default as GroupOption } from './components/GroupOption';
5
+ export { UserOption } from './components/UserOption';
6
+ export { default as TeamOption } from './components/TeamOption';
@@ -55,7 +55,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
55
55
  get ariaProps(): {};
56
56
  render(): JSX.Element;
57
57
  }
58
- export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
58
+ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
59
59
  isMulti: boolean;
60
60
  subtle: boolean;
61
61
  noBorder: boolean;
@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
27
27
  };
28
28
  render(): JSX.Element;
29
29
  }
30
- export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
30
+ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
31
31
  boundariesElement: string;
32
32
  width: number;
33
33
  isMulti: boolean;
@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
10
10
  componentDidMount(): void;
11
11
  render(): JSX.Element;
12
12
  }
13
- export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
13
+ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
14
14
  width: number;
15
15
  isMulti: boolean;
16
16
  }, never>> & React.RefAttributes<any>>;
@@ -1,2 +1,12 @@
1
1
  export { Option } from './components/Option';
2
2
  export type { OptionProps } from './components/Option';
3
+ export { default as CustomOption } from './components/CustomOption';
4
+ export type { CustomOptionProps } from './components/CustomOption/main';
5
+ export { default as EmailOption } from './components/EmailOption';
6
+ export type { EmailOptionProps } from './components/EmailOption/main';
7
+ export { default as GroupOption } from './components/GroupOption';
8
+ export type { GroupOptionProps } from './components/GroupOption/main';
9
+ export { UserOption } from './components/UserOption';
10
+ export type { UserOptionProps } from './components/UserOption';
11
+ export { default as TeamOption } from './components/TeamOption';
12
+ export type { TeamOptionProps } from './components/TeamOption/main';
@@ -79,6 +79,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
79
79
  onOpen?: OnPicker;
80
80
  /** Callback that is triggered when popup picker is closed */
81
81
  onClose?: OnPicker;
82
+ /** Callback that is trigger on key down in text input */
83
+ onKeyDown?: (event: React.KeyboardEvent) => void;
82
84
  /** Appearance of the user picker. */
83
85
  appearance?: Appearance;
84
86
  /** Display the picker with a subtle style. */
@@ -55,7 +55,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
55
55
  get ariaProps(): {};
56
56
  render(): JSX.Element;
57
57
  }
58
- export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
58
+ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
59
59
  isMulti: boolean;
60
60
  subtle: boolean;
61
61
  noBorder: boolean;
@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
27
27
  };
28
28
  render(): JSX.Element;
29
29
  }
30
- export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
30
+ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
31
31
  boundariesElement: string;
32
32
  width: number;
33
33
  isMulti: boolean;
@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
10
10
  componentDidMount(): void;
11
11
  render(): JSX.Element;
12
12
  }
13
- export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
13
+ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "name" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
14
14
  width: number;
15
15
  isMulti: boolean;
16
16
  }, never>> & React.RefAttributes<any>>;
@@ -1,2 +1,12 @@
1
1
  export { Option } from './components/Option';
2
2
  export type { OptionProps } from './components/Option';
3
+ export { default as CustomOption } from './components/CustomOption';
4
+ export type { CustomOptionProps } from './components/CustomOption/main';
5
+ export { default as EmailOption } from './components/EmailOption';
6
+ export type { EmailOptionProps } from './components/EmailOption/main';
7
+ export { default as GroupOption } from './components/GroupOption';
8
+ export type { GroupOptionProps } from './components/GroupOption/main';
9
+ export { UserOption } from './components/UserOption';
10
+ export type { UserOptionProps } from './components/UserOption';
11
+ export { default as TeamOption } from './components/TeamOption';
12
+ export type { TeamOptionProps } from './components/TeamOption/main';
@@ -79,6 +79,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
79
79
  onOpen?: OnPicker;
80
80
  /** Callback that is triggered when popup picker is closed */
81
81
  onClose?: OnPicker;
82
+ /** Callback that is trigger on key down in text input */
83
+ onKeyDown?: (event: React.KeyboardEvent) => void;
82
84
  /** Appearance of the user picker. */
83
85
  appearance?: Appearance;
84
86
  /** Display the picker with a subtle style. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "10.7.0",
3
+ "version": "10.9.0",
4
4
  "description": "Fabric component for display a dropdown to select a user from",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
43
43
  "@atlaskit/select": "^16.5.0",
44
44
  "@atlaskit/spinner": "^15.5.0",
45
45
  "@atlaskit/theme": "^12.5.0",
46
- "@atlaskit/tokens": "^1.15.0",
46
+ "@atlaskit/tokens": "^1.17.0",
47
47
  "@atlaskit/tooltip": "^17.8.0",
48
48
  "@atlaskit/ufo": "^0.2.0",
49
49
  "@babel/runtime": "^7.0.0",
@@ -60,7 +60,6 @@
60
60
  "devDependencies": {
61
61
  "@atlaskit/analytics-viewer": "^0.5.0",
62
62
  "@atlaskit/elements-test-helpers": "^0.7.0",
63
- "@atlaskit/util-data-test": "^17.8.0",
64
63
  "@atlaskit/visual-regression": "*",
65
64
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
66
65
  "@emotion/styled": "^11.0.0",
package/report.api.md CHANGED
@@ -273,6 +273,7 @@ export const PopupUserPicker: React_2.ForwardRefExoticComponent<
273
273
  | 'onClose'
274
274
  | 'onFocus'
275
275
  | 'onInputChange'
276
+ | 'onKeyDown'
276
277
  | 'onOpen'
277
278
  | 'onSelection'
278
279
  | 'open'
@@ -443,6 +444,7 @@ const UserPicker: React_2.ForwardRefExoticComponent<
443
444
  | 'onClose'
444
445
  | 'onFocus'
445
446
  | 'onInputChange'
447
+ | 'onKeyDown'
446
448
  | 'onOpen'
447
449
  | 'onSelection'
448
450
  | 'open'
@@ -498,6 +500,7 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
498
500
  onClear?: OnPicker;
499
501
  onOpen?: OnPicker;
500
502
  onClose?: OnPicker;
503
+ onKeyDown?: (event: React_2.KeyboardEvent) => void;
501
504
  appearance?: Appearance;
502
505
  subtle?: boolean;
503
506
  noBorder?: boolean;
@@ -197,7 +197,7 @@ export interface OptionData {
197
197
  export type OptionIdentifier = Pick<OptionData, 'id' | 'isDisabled' | 'type'>;
198
198
 
199
199
  // @public (undocumented)
200
- export const PopupUserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onOpen" | "onSelection" | "open" | "options" | "placeholder" | "popupTitle" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "target" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "boundariesElement" | "isMulti" | "offset" | "placement" | "rootBoundary" | "shouldFlip" | "width">> & Partial<Pick<{
200
+ export const PopupUserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onKeyDown" | "onOpen" | "onSelection" | "open" | "options" | "placeholder" | "popupTitle" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "target" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "boundariesElement" | "isMulti" | "offset" | "placement" | "rootBoundary" | "shouldFlip" | "width">> & Partial<Pick<{
201
201
  boundariesElement: string;
202
202
  width: number;
203
203
  isMulti: boolean;
@@ -296,7 +296,7 @@ export interface UserHighlight {
296
296
  }
297
297
 
298
298
  // @public (undocumented)
299
- const UserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onOpen" | "onSelection" | "open" | "options" | "placeholder" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
299
+ const UserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onKeyDown" | "onOpen" | "onSelection" | "open" | "options" | "placeholder" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
300
300
  width: number;
301
301
  isMulti: boolean;
302
302
  }, never>> & React_2.RefAttributes<any>>;
@@ -328,6 +328,7 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
328
328
  onClear?: OnPicker;
329
329
  onOpen?: OnPicker;
330
330
  onClose?: OnPicker;
331
+ onKeyDown?: (event: React_2.KeyboardEvent) => void;
331
332
  appearance?: Appearance;
332
333
  subtle?: boolean;
333
334
  noBorder?: boolean;