@atlaskit/user-picker 11.6.2 → 11.6.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/user-picker
 
+## 11.6.3
+
+### Patch Changes
+
+- [`d281a835c4897`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d281a835c4897) -
+  [ux]
+
+  - `TeamCreateDialog`
+    - Fixed incorrect ariaDescribedBy identifier so that VoiceOver can read out the error message.
+    - Programmatically focus the input on submit when there is an error.
+
+- Updated dependencies
+
 ## 11.6.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -72,4 +72,4 @@
 			"path": "../../../data/ufo-external/afm-cc/tsconfig.json"
 		}
 	]
-}
+}

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 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; }
 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; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.6.1";
+var packageVersion = "11.6.2";
 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}$/;
 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}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/UserPicker.js

@@ -102,7 +102,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _platformFeatureFlags.fg)('uxissue-914') ? undefined : this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
         (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') ? this.props.height : undefined),
         components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),

package/dist/cjs/components/styles.js

@@ -36,13 +36,13 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
+        borderColor: (0, _platformFeatureFlags.fg)('uxissue-914') ? state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
         backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(_colors.N10, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")"),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
+          borderColor: (0, _platformFeatureFlags.fg)('uxissue-914') ? state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(_colors.R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(_colors.N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(_colors.N10, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
         }),
         padding: 0,

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.6.1";
+const packageVersion = "11.6.2";
 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}$/;
 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}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/UserPicker.js

@@ -79,7 +79,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
       SelectComponent: SelectComponent
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       ,
-      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('uxissue-914') ? undefined : this.props.isInvalid,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
       components: getComponents(isMulti, anchor, showClearIndicator, (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.components ? this.props.components : {}),

package/dist/es2019/components/styles.js

@@ -22,14 +22,14 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
       return {
         ...css,
         width,
-        borderColor: isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
+        borderColor: fg('uxissue-914') ? state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.isInvalid ? `var(--ds-border-danger, ${R400})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})` : isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
         backgroundColor: state.isFocused ? `var(--ds-background-input, ${css['backgroundColor']})` : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? `var(--ds-background-input, ${N10})` : `var(--ds-background-input, ${N20})`,
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': {
           ...css[':hover'],
-          borderColor: isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})`,
+          borderColor: fg('uxissue-914') ? state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.isInvalid ? `var(--ds-border-danger, ${R400})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})` : isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})`,
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? `var(--ds-background-danger, ${R50})` : state.isFocused ? css[':hover'] ? `var(--ds-background-input, ${css[':hover'].backgroundColor})` : `var(--ds-background-input, ${N0})` : state.isDisabled ? `var(--ds-background-disabled, ${N10})` : `var(--ds-background-input-hovered, ${N30})`
         },
         padding: 0,

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.6.1";
+var packageVersion = "11.6.2";
 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}$/;
 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}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/UserPicker.js

@@ -93,7 +93,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('uxissue-914') ? undefined : this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
         fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
         components: getComponents(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),

package/dist/esm/components/styles.js

@@ -29,13 +29,13 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
+        borderColor: fg('uxissue-914') ? state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
         backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(N10, ")") : "var(--ds-background-input, ".concat(N20, ")"),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
+          borderColor: fg('uxissue-914') ? state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(B100, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(N10, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")")
         }),
         padding: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.6.2",
+	"version": "11.6.3",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,18 +50,18 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/avatar": "^25.1.0",
-		"@atlaskit/icon": "^28.0.0",
+		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/people-teams-ui-public": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^14.11.0",
+		"@atlaskit/primitives": "^14.12.0",
 		"@atlaskit/select": "^21.2.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/teams-avatar": "^2.3.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -117,6 +117,9 @@
 		},
 		"product-terminology-refresh": {
 			"type": "boolean"
+		},
+		"uxissue-914": {
+			"type": "boolean"
 		}
 	}
 }