@atlaskit/user-picker 9.1.1 → 9.2.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.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/BaseUserPicker.js +5 -1
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/components/BaseUserPicker.js +5 -1
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/components/BaseUserPicker.js +5 -1
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/components/BaseUserPicker.d.ts +1 -1
  9. package/dist/types/components/PopupUserPicker.d.ts +1 -1
  10. package/dist/types/components/UserPicker.d.ts +1 -1
  11. package/dist/types/types.d.ts +4 -0
  12. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/user-picker
2
2
 
3
+ ## 9.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`64dc40c32bc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64dc40c32bc) - Add support for aria-labelledby and aria-live
8
+
3
9
  ## 9.1.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/BaseUserPicker.js CHANGED
@@ -516,7 +516,9 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
516
516
  fieldId = _this$props4.fieldId,
517
517
  inputId = _this$props4.inputId,
518
518
  maxPickerHeight = _this$props4.maxPickerHeight,
519
- textFieldBackgroundColor = _this$props4.textFieldBackgroundColor;
519
+ textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
520
+ ariaLabelledBy = _this$props4.ariaLabelledBy,
521
+ ariaLive = _this$props4.ariaLive;
520
522
  var _this$state3 = this.state,
521
523
  count = _this$state3.count,
522
524
  hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -528,6 +530,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
528
530
  return /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
529
531
  value: value,
530
532
  autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
533
+ "aria-labelledby": ariaLabelledBy,
534
+ "aria-live": ariaLive,
531
535
  ref: this.handleSelectRef,
532
536
  isMulti: isMulti,
533
537
  options: this.getOptions(),
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "9.1.1",
3
+ "version": "9.2.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/BaseUserPicker.js CHANGED
@@ -470,7 +470,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
470
470
  fieldId,
471
471
  inputId,
472
472
  maxPickerHeight,
473
- textFieldBackgroundColor
473
+ textFieldBackgroundColor,
474
+ ariaLabelledBy,
475
+ ariaLive
474
476
  } = this.props;
475
477
  const {
476
478
  count,
@@ -484,6 +486,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
484
486
  return /*#__PURE__*/React.createElement(SelectComponent, _extends({
485
487
  value: value,
486
488
  autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
489
+ "aria-labelledby": ariaLabelledBy,
490
+ "aria-live": ariaLive,
487
491
  ref: this.handleSelectRef,
488
492
  isMulti: isMulti,
489
493
  options: this.getOptions(),
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "9.1.1",
3
+ "version": "9.2.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/BaseUserPicker.js CHANGED
@@ -518,7 +518,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
518
518
  fieldId = _this$props4.fieldId,
519
519
  inputId = _this$props4.inputId,
520
520
  maxPickerHeight = _this$props4.maxPickerHeight,
521
- textFieldBackgroundColor = _this$props4.textFieldBackgroundColor;
521
+ textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
522
+ ariaLabelledBy = _this$props4.ariaLabelledBy,
523
+ ariaLive = _this$props4.ariaLive;
522
524
  var _this$state3 = this.state,
523
525
  count = _this$state3.count,
524
526
  hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -530,6 +532,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
530
532
  return /*#__PURE__*/React.createElement(SelectComponent, _extends({
531
533
  value: value,
532
534
  autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
535
+ "aria-labelledby": ariaLabelledBy,
536
+ "aria-live": ariaLive,
533
537
  ref: this.handleSelectRef,
534
538
  isMulti: isMulti,
535
539
  options: this.getOptions(),
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "9.1.1",
3
+ "version": "9.2.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/BaseUserPicker.d.ts CHANGED
@@ -51,7 +51,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
51
51
  private getAppearance;
52
52
  render(): JSX.Element;
53
53
  }
54
- export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
54
+ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "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" | "subtle" | "noBorder">> & Partial<Pick<{
55
55
  isMulti: boolean;
56
56
  subtle: boolean;
57
57
  noBorder: boolean;
package/dist/types/components/PopupUserPicker.d.ts CHANGED
@@ -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>, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width" | "offset" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
30
+ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "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>, "isMulti" | "width" | "offset" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
31
31
  boundariesElement: string;
32
32
  width: number;
33
33
  isMulti: boolean;
package/dist/types/components/UserPicker.d.ts CHANGED
@@ -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>, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions"> & 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>, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "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>>;
package/dist/types/types.d.ts CHANGED
@@ -132,6 +132,10 @@ export declare type UserPickerProps = WithAnalyticsEventsProps & {
132
132
  closeMenuOnScroll?: boolean | EventListener;
133
133
  /** Whether to block scrolling actions */
134
134
  menuShouldBlockScroll?: boolean;
135
+ /** Accessibility: Identifies the element (or elements) that labels the current element.*/
136
+ ariaLabelledBy?: string;
137
+ /** Accessibility: Used to set the priority with which screen reader should treat updates to live regions.*/
138
+ ariaLive?: 'polite' | 'off' | 'assertive';
135
139
  };
136
140
  export declare type PopupUserPickerProps = UserPickerProps & {
137
141
  /** Whether to use the popup version of the single picker */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "9.1.1",
3
+ "version": "9.2.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/"
@@ -59,7 +59,7 @@
59
59
  "@atlaskit/range": "^6.0.0",
60
60
  "@atlaskit/section-message": "^6.0.0",
61
61
  "@atlaskit/textfield": "^5.0.0",
62
- "@atlaskit/util-data-test": "^17.2.0",
62
+ "@atlaskit/util-data-test": "^17.3.0",
63
63
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
64
64
  "@emotion/styled": "^10.0.7",
65
65
  "@testing-library/dom": "^7.7.3",