@atlaskit/user-picker 9.4.1 → 9.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 9.5.0
+
+### Minor Changes
+
+- [`a4d4f93b480`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a4d4f93b480) - [ux] UserPicker now supports disabling option items through a new optional `isDisabled` field on data passed to the `options` prop.
+
 ## 9.4.1
 
 ### Patch Changes

package/dist/cjs/components/AvatarItemOption.js

@@ -19,6 +19,8 @@ var _core = require("@emotion/core");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _utils = require("./utils");
 
 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; }
@@ -39,16 +41,20 @@ var AsyncTooltip = /*#__PURE__*/_react.default.lazy(function () {
   });
 });
 
-var wrapper = (0, _core.css)({
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  display: 'flex',
-  lineHeight: 1,
-  outline: 'none',
-  margin: 0,
-  width: '100%',
-  cursor: 'pointer'
-});
+var wrapper = function wrapper(isDisabled) {
+  return (0, _core.css)({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    lineHeight: 1,
+    outline: 'none',
+    margin: 0,
+    width: '100%',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    opacity: isDisabled ? (0, _tokens.token)('opacity.disabled', '0.4') : undefined
+  });
+};
+
 var optionWrapper = (0, _core.css)({
   maxWidth: '100%',
   minWidth: 0,
@@ -86,9 +92,10 @@ exports.textWrapper = textWrapper;
 
 var AvatarItemOption = function AvatarItemOption(_ref) {
   var avatar = _ref.avatar,
+      isDisabled = _ref.isDisabled,
+      lozenge = _ref.lozenge,
       primaryText = _ref.primaryText,
-      secondaryText = _ref.secondaryText,
-      lozenge = _ref.lozenge;
+      secondaryText = _ref.secondaryText;
 
   var renderLozenge = function renderLozenge() {
     if ((0, _utils.isLozengeText)(lozenge)) {
@@ -109,7 +116,7 @@ var AvatarItemOption = function AvatarItemOption(_ref) {
   };
 
   return (0, _core.jsx)("span", {
-    css: wrapper
+    css: wrapper(isDisabled)
   }, avatar, (0, _core.jsx)("div", {
     css: optionWrapper
   }, (0, _core.jsx)("div", null, (0, _core.jsx)("div", {

package/dist/cjs/components/EmailOption/main.js

@@ -82,9 +82,10 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
         avatar: (0, _core.jsx)(_AddOptionAvatar.AddOptionAvatar, {
           label: label
         }),
+        lozenge: _this.getLozengeProps(),
+        isDisabled: _this.props.email.isDisabled,
         primaryText: _this.renderPrimaryText(),
-        secondaryText: _this.renderSecondaryText(label),
-        lozenge: _this.getLozengeProps()
+        secondaryText: _this.renderSecondaryText(label)
       });
     });
     return _this;

package/dist/cjs/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -19,16 +19,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-var outerWrapper = (0, _core.css)({
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  display: 'flex',
-  lineHeight: 1,
-  outline: 'none',
-  margin: 0,
-  width: '100%',
-  cursor: 'pointer'
-});
+var outerWrapper = function outerWrapper(isDisabled) {
+  return (0, _core.css)({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    lineHeight: 1,
+    outline: 'none',
+    margin: 0,
+    width: '100%',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    opacity: isDisabled ? (0, _tokens.token)('opacity.disabled', '0.4') : undefined
+  });
+};
+
 var detailsWrapper = (0, _core.css)({
   display: 'flex',
   maxWidth: '100%',
@@ -65,11 +69,12 @@ var getTextStyle = function getTextStyle(isSecondary) {
 
 var ExternalAvatarItemOption = function ExternalAvatarItemOption(_ref) {
   var avatar = _ref.avatar,
+      isDisabled = _ref.isDisabled,
       primaryText = _ref.primaryText,
       secondaryText = _ref.secondaryText,
       sourcesInfoTooltip = _ref.sourcesInfoTooltip;
   return (0, _core.jsx)("div", {
-    css: outerWrapper
+    css: outerWrapper(isDisabled)
   }, avatar, (0, _core.jsx)("div", {
     css: detailsWrapper
   }, (0, _core.jsx)("div", {

package/dist/cjs/components/ExternalUserOption/main.js

@@ -152,6 +152,7 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return (0, _core.jsx)(_ExternalAvatarItemOption.ExternalAvatarItemOption, {
         avatar: this.renderAvatar(),
+        isDisabled: this.props.user.isDisabled,
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),
         sourcesInfoTooltip: this.getSourcesInfoTooltip()

package/dist/cjs/components/GroupOption/main.js

@@ -108,9 +108,10 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
-        secondaryText: this.renderByline(),
+        isDisabled: this.props.group.isDisabled,
+        lozenge: this.getLozengeProps(),
         primaryText: this.getPrimaryText(),
-        lozenge: this.getLozengeProps()
+        secondaryText: this.renderByline()
       });
     }
   }]);

package/dist/cjs/components/TeamOption/main.js

@@ -143,9 +143,10 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
-        secondaryText: this.renderCustomByLine() || this.renderByline(),
+        isDisabled: this.props.team.isDisabled,
+        lozenge: this.getLozengeProps(),
         primaryText: this.getPrimaryText(),
-        lozenge: this.getLozengeProps()
+        secondaryText: this.renderCustomByLine() || this.renderByline()
       });
     }
   }]);

package/dist/cjs/components/UserOption.js

@@ -111,9 +111,10 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
+        lozenge: this.getLozengeProps(),
+        isDisabled: this.props.user.isDisabled,
         primaryText: this.getPrimaryText(),
-        secondaryText: this.renderSecondaryText(),
-        lozenge: this.getLozengeProps()
+        secondaryText: this.renderSecondaryText()
       });
     }
   }]);

package/dist/cjs/components/creatable.js

@@ -51,7 +51,7 @@ var isOptionDisabled = function isOptionDisabled() {
       return isValidEmail(option.data.id) !== 'VALID';
     }
 
-    return false;
+    return !!option.isDisabled;
   };
 };
 

package/dist/cjs/components/creatableEmailSuggestion.js

@@ -61,7 +61,7 @@ var isOptionDisabled = function isOptionDisabled() {
       return isValidEmail(option.data.id) !== 'VALID';
     }
 
-    return false;
+    return !!option.isDisabled;
   };
 }; // Generates user picker props to always create an email item visible
 // to the user as a suggested option when they are typing in a value

package/dist/cjs/components/utils.js

@@ -64,17 +64,19 @@ var isOptionData = function isOptionData(option) {
 var optionToSelectableOption = function optionToSelectableOption(option) {
   if (isOptionData(option)) {
     return {
+      data: option,
+      isDisabled: option.isDisabled,
       label: option.name,
-      value: option.id,
-      data: option
+      value: option.id
     };
   } else {
     return {
-      label: option.id,
-      value: option.id,
       data: _objectSpread(_objectSpread({}, option), {}, {
         name: option.id
-      })
+      }),
+      isDisabled: option.isDisabled,
+      label: option.id,
+      value: option.id
     };
   }
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.4.1",
+	"version": "9.5.0",
 	"sideEffects": false
 }

package/dist/es2019/components/AvatarItemOption.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { css, jsx } from '@emotion/core';
 import Lozenge from '@atlaskit/lozenge';
+import { token } from '@atlaskit/tokens';
 import { isLozengeText } from './utils';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import(
 /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
@@ -11,7 +12,8 @@ const AsyncTooltip = /*#__PURE__*/React.lazy(() => import(
     default: module.default
   };
 }));
-const wrapper = css({
+
+const wrapper = isDisabled => css({
   alignItems: 'center',
   boxSizing: 'border-box',
   display: 'flex',
@@ -19,8 +21,10 @@ const wrapper = css({
   outline: 'none',
   margin: 0,
   width: '100%',
-  cursor: 'pointer'
+  cursor: isDisabled ? 'not-allowed' : 'pointer',
+  opacity: isDisabled ? token('opacity.disabled', '0.4') : undefined
 });
+
 const optionWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
@@ -53,9 +57,10 @@ export const textWrapper = color => css({
 });
 export const AvatarItemOption = ({
   avatar,
+  isDisabled,
+  lozenge,
   primaryText,
-  secondaryText,
-  lozenge
+  secondaryText
 }) => {
   const renderLozenge = () => {
     if (isLozengeText(lozenge)) {
@@ -76,7 +81,7 @@ export const AvatarItemOption = ({
   };
 
   return jsx("span", {
-    css: wrapper
+    css: wrapper(isDisabled)
   }, avatar, jsx("div", {
     css: optionWrapper
   }, jsx("div", null, jsx("div", {

package/dist/es2019/components/EmailOption/main.js

@@ -42,9 +42,10 @@ export class EmailOption extends React.PureComponent {
       avatar: jsx(AddOptionAvatar, {
         label: label
       }),
+      lozenge: this.getLozengeProps(),
+      isDisabled: this.props.email.isDisabled,
       primaryText: this.renderPrimaryText(),
-      secondaryText: this.renderSecondaryText(label),
-      lozenge: this.getLozengeProps()
+      secondaryText: this.renderSecondaryText(label)
     }));
   }
 

package/dist/es2019/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -2,7 +2,8 @@
 import { css, jsx } from '@emotion/core';
 import { B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-const outerWrapper = css({
+
+const outerWrapper = isDisabled => css({
   alignItems: 'center',
   boxSizing: 'border-box',
   display: 'flex',
@@ -10,8 +11,10 @@ const outerWrapper = css({
   outline: 'none',
   margin: 0,
   width: '100%',
-  cursor: 'pointer'
+  cursor: isDisabled ? 'not-allowed' : 'pointer',
+  opacity: isDisabled ? token('opacity.disabled', '0.4') : undefined
 });
+
 const detailsWrapper = css({
   display: 'flex',
   maxWidth: '100%',
@@ -48,11 +51,12 @@ const getTextStyle = isSecondary => {
 
 export const ExternalAvatarItemOption = ({
   avatar,
+  isDisabled,
   primaryText,
   secondaryText,
   sourcesInfoTooltip
 }) => jsx("div", {
-  css: outerWrapper
+  css: outerWrapper(isDisabled)
 }, avatar, jsx("div", {
   css: detailsWrapper
 }, jsx("div", {

package/dist/es2019/components/ExternalUserOption/main.js

@@ -103,6 +103,7 @@ class ExternalUserOptionImpl extends React.PureComponent {
   render() {
     return jsx(ExternalAvatarItemOption, {
       avatar: this.renderAvatar(),
+      isDisabled: this.props.user.isDisabled,
       primaryText: this.getPrimaryText(),
       secondaryText: this.renderSecondaryText(),
       sourcesInfoTooltip: this.getSourcesInfoTooltip()

package/dist/es2019/components/GroupOption/main.js

@@ -62,9 +62,10 @@ export class GroupOption extends React.PureComponent {
   render() {
     return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
-      secondaryText: this.renderByline(),
+      isDisabled: this.props.group.isDisabled,
+      lozenge: this.getLozengeProps(),
       primaryText: this.getPrimaryText(),
-      lozenge: this.getLozengeProps()
+      secondaryText: this.renderByline()
     });
   }
 

package/dist/es2019/components/TeamOption/main.js

@@ -104,9 +104,10 @@ export class TeamOption extends React.PureComponent {
   render() {
     return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
-      secondaryText: this.renderCustomByLine() || this.renderByline(),
+      isDisabled: this.props.team.isDisabled,
+      lozenge: this.getLozengeProps(),
       primaryText: this.getPrimaryText(),
-      lozenge: this.getLozengeProps()
+      secondaryText: this.renderCustomByLine() || this.renderByline()
     });
   }
 

package/dist/es2019/components/UserOption.js

@@ -69,9 +69,10 @@ export class UserOption extends React.PureComponent {
   render() {
     return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
+      lozenge: this.getLozengeProps(),
+      isDisabled: this.props.user.isDisabled,
       primaryText: this.getPrimaryText(),
-      secondaryText: this.renderSecondaryText(),
-      lozenge: this.getLozengeProps()
+      secondaryText: this.renderSecondaryText()
     });
   }
 

package/dist/es2019/components/creatable.js

@@ -29,7 +29,7 @@ const isOptionDisabled = (isValidEmail = defaultIsValidEmail) => option => {
     return isValidEmail(option.data.id) !== 'VALID';
   }
 
-  return false;
+  return !!option.isDisabled;
 };
 
 function creatableProps(isValidEmail) {

package/dist/es2019/components/creatableEmailSuggestion.js

@@ -40,7 +40,7 @@ const isOptionDisabled = (isValidEmail = defaultIsValidEmail) => option => {
     return isValidEmail(option.data.id) !== 'VALID';
   }
 
-  return false;
+  return !!option.isDisabled;
 }; // Generates user picker props to always create an email item visible
 // to the user as a suggested option when they are typing in a value
 

package/dist/es2019/components/utils.js

@@ -13,17 +13,19 @@ const isOptionData = option => option.name !== undefined;
 export const optionToSelectableOption = option => {
   if (isOptionData(option)) {
     return {
+      data: option,
+      isDisabled: option.isDisabled,
       label: option.name,
-      value: option.id,
-      data: option
+      value: option.id
     };
   } else {
     return {
-      label: option.id,
-      value: option.id,
       data: { ...option,
         name: option.id
-      }
+      },
+      isDisabled: option.isDisabled,
+      label: option.id,
+      value: option.id
     };
   }
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.4.1",
+	"version": "9.5.0",
 	"sideEffects": false
 }

package/dist/esm/components/AvatarItemOption.js

@@ -9,6 +9,7 @@ import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { css, jsx } from '@emotion/core';
 import Lozenge from '@atlaskit/lozenge';
+import { token } from '@atlaskit/tokens';
 import { isLozengeText } from './utils';
 var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
   return import(
@@ -19,16 +20,21 @@ var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
     };
   });
 });
-var wrapper = css({
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  display: 'flex',
-  lineHeight: 1,
-  outline: 'none',
-  margin: 0,
-  width: '100%',
-  cursor: 'pointer'
-});
+
+var wrapper = function wrapper(isDisabled) {
+  return css({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    lineHeight: 1,
+    outline: 'none',
+    margin: 0,
+    width: '100%',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    opacity: isDisabled ? token('opacity.disabled', '0.4') : undefined
+  });
+};
+
 var optionWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
@@ -62,9 +68,10 @@ export var textWrapper = function textWrapper(color) {
 };
 export var AvatarItemOption = function AvatarItemOption(_ref) {
   var avatar = _ref.avatar,
+      isDisabled = _ref.isDisabled,
+      lozenge = _ref.lozenge,
       primaryText = _ref.primaryText,
-      secondaryText = _ref.secondaryText,
-      lozenge = _ref.lozenge;
+      secondaryText = _ref.secondaryText;
 
   var renderLozenge = function renderLozenge() {
     if (isLozengeText(lozenge)) {
@@ -85,7 +92,7 @@ export var AvatarItemOption = function AvatarItemOption(_ref) {
   };
 
   return jsx("span", {
-    css: wrapper
+    css: wrapper(isDisabled)
   }, avatar, jsx("div", {
     css: optionWrapper
   }, jsx("div", null, jsx("div", {

package/dist/esm/components/EmailOption/main.js

@@ -65,9 +65,10 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
         avatar: jsx(AddOptionAvatar, {
           label: label
         }),
+        lozenge: _this.getLozengeProps(),
+        isDisabled: _this.props.email.isDisabled,
         primaryText: _this.renderPrimaryText(),
-        secondaryText: _this.renderSecondaryText(label),
-        lozenge: _this.getLozengeProps()
+        secondaryText: _this.renderSecondaryText(label)
       });
     });
 

package/dist/esm/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -8,16 +8,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { css, jsx } from '@emotion/core';
 import { B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-var outerWrapper = css({
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  display: 'flex',
-  lineHeight: 1,
-  outline: 'none',
-  margin: 0,
-  width: '100%',
-  cursor: 'pointer'
-});
+
+var outerWrapper = function outerWrapper(isDisabled) {
+  return css({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    lineHeight: 1,
+    outline: 'none',
+    margin: 0,
+    width: '100%',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    opacity: isDisabled ? token('opacity.disabled', '0.4') : undefined
+  });
+};
+
 var detailsWrapper = css({
   display: 'flex',
   maxWidth: '100%',
@@ -54,11 +59,12 @@ var getTextStyle = function getTextStyle(isSecondary) {
 
 export var ExternalAvatarItemOption = function ExternalAvatarItemOption(_ref) {
   var avatar = _ref.avatar,
+      isDisabled = _ref.isDisabled,
       primaryText = _ref.primaryText,
       secondaryText = _ref.secondaryText,
       sourcesInfoTooltip = _ref.sourcesInfoTooltip;
   return jsx("div", {
-    css: outerWrapper
+    css: outerWrapper(isDisabled)
   }, avatar, jsx("div", {
     css: detailsWrapper
   }, jsx("div", {

package/dist/esm/components/ExternalUserOption/main.js

@@ -129,6 +129,7 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return jsx(ExternalAvatarItemOption, {
         avatar: this.renderAvatar(),
+        isDisabled: this.props.user.isDisabled,
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),
         sourcesInfoTooltip: this.getSourcesInfoTooltip()

package/dist/esm/components/GroupOption/main.js

@@ -88,9 +88,10 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return jsx(AvatarItemOption, {
         avatar: this.renderAvatar(),
-        secondaryText: this.renderByline(),
+        isDisabled: this.props.group.isDisabled,
+        lozenge: this.getLozengeProps(),
         primaryText: this.getPrimaryText(),
-        lozenge: this.getLozengeProps()
+        secondaryText: this.renderByline()
       });
     }
   }]);

package/dist/esm/components/TeamOption/main.js

@@ -126,9 +126,10 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return jsx(AvatarItemOption, {
         avatar: this.renderAvatar(),
-        secondaryText: this.renderCustomByLine() || this.renderByline(),
+        isDisabled: this.props.team.isDisabled,
+        lozenge: this.getLozengeProps(),
         primaryText: this.getPrimaryText(),
-        lozenge: this.getLozengeProps()
+        secondaryText: this.renderCustomByLine() || this.renderByline()
       });
     }
   }]);

package/dist/esm/components/UserOption.js

@@ -94,9 +94,10 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return jsx(AvatarItemOption, {
         avatar: this.renderAvatar(),
+        lozenge: this.getLozengeProps(),
+        isDisabled: this.props.user.isDisabled,
         primaryText: this.getPrimaryText(),
-        secondaryText: this.renderSecondaryText(),
-        lozenge: this.getLozengeProps()
+        secondaryText: this.renderSecondaryText()
       });
     }
   }]);

package/dist/esm/components/creatable.js

@@ -38,7 +38,7 @@ var isOptionDisabled = function isOptionDisabled() {
       return isValidEmail(option.data.id) !== 'VALID';
     }
 
-    return false;
+    return !!option.isDisabled;
   };
 };
 

package/dist/esm/components/creatableEmailSuggestion.js

@@ -48,7 +48,7 @@ var isOptionDisabled = function isOptionDisabled() {
       return isValidEmail(option.data.id) !== 'VALID';
     }
 
-    return false;
+    return !!option.isDisabled;
   };
 }; // Generates user picker props to always create an email item visible
 // to the user as a suggested option when they are typing in a value