@atlaskit/status 5.9.1 → 5.9.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/status
 
+## 5.9.2
+
+### Patch Changes
+
+- [`501b7257aaa6d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/501b7257aaa6d) -
+  Add a capped, scrollable status suggestion list with parent-constrained labels behind
+  platform_editor_status_popup_suggestions_patch_1.
+- Updated dependencies
+
 ## 5.9.1
 
 ### Patch Changes

package/dist/cjs/components/Status.compiled.css

@@ -1,3 +1,5 @@
+._1e0c1o8l{display:inline-block}
 ._1frxnkob>*{vertical-align:middle}
 ._1k0l7vkz>*{line-height:1pc}
-._d0dzdf4r>*{display:inline-block!important}
+._d0dzdf4r>*{display:inline-block!important}
+._p12f1osq{max-width:100%}

package/dist/cjs/components/Status.js

@@ -43,6 +43,9 @@ var MAX_WIDTH = 200;
  */
 var inlineBlockStyles = null;
 
+// Bound the Lozenge to its parent while keeping short statuses content-sized.
+var constrainedToParentStyles = null;
+
 // eg. Version/4.0 Chrome/95.0.4638.50
 var isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
 var StatusInternal = /*#__PURE__*/function (_PureComponent) {
@@ -100,7 +103,8 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         style = _this$props.style,
         role = _this$props.role,
         onClick = _this$props.onClick,
-        isBold = _this$props.isBold;
+        isBold = _this$props.isBold,
+        isConstrainedToParent = _this$props.isConstrainedToParent;
       if (text.trim().length === 0) {
         return null;
       }
@@ -108,7 +112,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
       // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
       return /*#__PURE__*/React.createElement("span", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: (0, _runtime.ax)([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", "status-lozenge-span"]),
+        className: (0, _runtime.ax)([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", isConstrainedToParent && "_1e0c1o8l _p12f1osq", "status-lozenge-span"]),
         onClick: onClick,
         onKeyDown: onClick ? this.handleKeyDown : undefined,
         onMouseEnter: this.handleMouseEnter,

package/dist/cjs/components/StatusPicker.compiled.css

@@ -1,4 +1,10 @@
-._n6341ihb [data-ds--text-field--container]{border-color:var(--ds-border-bold,#7d818a)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._n6341ihb [data-ds--text-field--container]{border-color:var(--ds-border-bold,#7d818a)}._15mtglyw{overscroll-behavior-y:none}
+._18m91wug{overflow-y:auto}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkidpf{margin-top:0}
+._1bsb1osq{width:100%}
 ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._c71l4d55{max-height:232px}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._otyridpf{margin-bottom:0}

package/dist/cjs/components/StatusPicker.js

@@ -24,6 +24,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var fieldTextWrapperStyles = null;
+
+// Keep the existing content position while reserving space inside the scrollport for focus rings.
+var scrollContainerStyles = null;
 var Picker = /*#__PURE__*/function (_PureComponent) {
   function Picker() {
     var _this;
@@ -70,7 +73,14 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         selectedColor = _this$props.selectedColor,
         onColorClick = _this$props.onColorClick,
         onColorHover = _this$props.onColorHover,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        scrollableContent = _this$props.scrollableContent;
+      var colorPalette = /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
+        key: this.colorPaletteKey,
+        onClick: onColorClick,
+        onHover: onColorHover,
+        selectedColor: selectedColor
+      });
 
       // Using <React.Fragment> instead of [] to workaround Enzyme
       // (https://github.com/airbnb/enzyme/issues/1149)
@@ -86,12 +96,10 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         spellCheck: false,
         autoComplete: "off",
         "aria-label": intl.formatMessage(_i18n.messages.statusInputLabel)
-      })), /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
-        key: this.colorPaletteKey,
-        onClick: onColorClick,
-        onHover: onColorHover,
-        selectedColor: selectedColor
-      }));
+      })), scrollableContent ? /*#__PURE__*/_react.default.createElement("div", {
+        "data-status-picker-scroll-container": true,
+        className: (0, _runtime.ax)(["_19pk1b66 _c71l4d55 _18m91wug _15mtglyw _ca0q1b66 _1bsb1osq"])
+      }, colorPalette, scrollableContent) : colorPalette);
     }
   }, {
     key: "componentDidUpdate",

package/dist/cjs/components/analytics.js

@@ -10,7 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "5.9.0";
+var packageVersion = "5.9.1";
 var createStatusAnalyticsAndFire = exports.createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/es2019/components/Status.compiled.css

@@ -1,3 +1,5 @@
+._1e0c1o8l{display:inline-block}
 ._1frxnkob>*{vertical-align:middle}
 ._1k0l7vkz>*{line-height:1pc}
-._d0dzdf4r>*{display:inline-block!important}
+._d0dzdf4r>*{display:inline-block!important}
+._p12f1osq{max-width:100%}

package/dist/es2019/components/Status.js

@@ -27,6 +27,9 @@ const MAX_WIDTH = 200;
  */
 const inlineBlockStyles = null;
 
+// Bound the Lozenge to its parent while keeping short statuses content-sized.
+const constrainedToParentStyles = null;
+
 // eg. Version/4.0 Chrome/95.0.4638.50
 const isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
 class StatusInternal extends PureComponent {
@@ -79,7 +82,8 @@ class StatusInternal extends PureComponent {
       style,
       role,
       onClick,
-      isBold
+      isBold,
+      isConstrainedToParent
     } = this.props;
     if (text.trim().length === 0) {
       return null;
@@ -88,7 +92,7 @@ class StatusInternal extends PureComponent {
     // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
     return /*#__PURE__*/React.createElement("span", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: ax([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", "status-lozenge-span"]),
+      className: ax([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", isConstrainedToParent && "_1e0c1o8l _p12f1osq", "status-lozenge-span"]),
       onClick: onClick,
       onKeyDown: onClick ? this.handleKeyDown : undefined,
       onMouseEnter: this.handleMouseEnter,

package/dist/es2019/components/StatusPicker.compiled.css

@@ -1,4 +1,10 @@
-._n6341ihb [data-ds--text-field--container]{border-color:var(--ds-border-bold,#7d818a)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._n6341ihb [data-ds--text-field--container]{border-color:var(--ds-border-bold,#7d818a)}._15mtglyw{overscroll-behavior-y:none}
+._18m91wug{overflow-y:auto}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkidpf{margin-top:0}
+._1bsb1osq{width:100%}
 ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._c71l4d55{max-height:232px}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._otyridpf{margin-bottom:0}

package/dist/es2019/components/StatusPicker.js

@@ -8,6 +8,9 @@ import { injectIntl } from 'react-intl';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
 const fieldTextWrapperStyles = null;
+
+// Keep the existing content position while reserving space inside the scrollport for focus rings.
+const scrollContainerStyles = null;
 class Picker extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -45,8 +48,15 @@ class Picker extends PureComponent {
       selectedColor,
       onColorClick,
       onColorHover,
-      intl
+      intl,
+      scrollableContent
     } = this.props;
+    const colorPalette = /*#__PURE__*/React.createElement(ColorPalette, {
+      key: this.colorPaletteKey,
+      onClick: onColorClick,
+      onHover: onColorHover,
+      selectedColor: selectedColor
+    });
 
     // Using <React.Fragment> instead of [] to workaround Enzyme
     // (https://github.com/airbnb/enzyme/issues/1149)
@@ -62,12 +72,10 @@ class Picker extends PureComponent {
       spellCheck: false,
       autoComplete: "off",
       "aria-label": intl.formatMessage(messages.statusInputLabel)
-    })), /*#__PURE__*/React.createElement(ColorPalette, {
-      key: this.colorPaletteKey,
-      onClick: onColorClick,
-      onHover: onColorHover,
-      selectedColor: selectedColor
-    }));
+    })), scrollableContent ? /*#__PURE__*/React.createElement("div", {
+      "data-status-picker-scroll-container": true,
+      className: ax(["_19pk1b66 _c71l4d55 _18m91wug _15mtglyw _ca0q1b66 _1bsb1osq"])
+    }, colorPalette, scrollableContent) : colorPalette);
   }
   componentDidUpdate() {
     if (this.inputRef && this.props.autoFocus) {

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "5.9.0";
+const packageVersion = "5.9.1";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = {
     ...payload,

package/dist/esm/components/Status.compiled.css

@@ -1,3 +1,5 @@
+._1e0c1o8l{display:inline-block}
 ._1frxnkob>*{vertical-align:middle}
 ._1k0l7vkz>*{line-height:1pc}
-._d0dzdf4r>*{display:inline-block!important}
+._d0dzdf4r>*{display:inline-block!important}
+._p12f1osq{max-width:100%}

package/dist/esm/components/Status.js

@@ -34,6 +34,9 @@ var MAX_WIDTH = 200;
  */
 var inlineBlockStyles = null;
 
+// Bound the Lozenge to its parent while keeping short statuses content-sized.
+var constrainedToParentStyles = null;
+
 // eg. Version/4.0 Chrome/95.0.4638.50
 var isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
 var StatusInternal = /*#__PURE__*/function (_PureComponent) {
@@ -91,7 +94,8 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         style = _this$props.style,
         role = _this$props.role,
         onClick = _this$props.onClick,
-        isBold = _this$props.isBold;
+        isBold = _this$props.isBold,
+        isConstrainedToParent = _this$props.isConstrainedToParent;
       if (text.trim().length === 0) {
         return null;
       }
@@ -99,7 +103,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
       // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
       return /*#__PURE__*/React.createElement("span", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ax([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", "status-lozenge-span"]),
+        className: ax([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", isConstrainedToParent && "_1e0c1o8l _p12f1osq", "status-lozenge-span"]),
         onClick: onClick,
         onKeyDown: onClick ? this.handleKeyDown : undefined,
         onMouseEnter: this.handleMouseEnter,

package/dist/esm/components/StatusPicker.compiled.css

@@ -1,4 +1,10 @@
-._n6341ihb [data-ds--text-field--container]{border-color:var(--ds-border-bold,#7d818a)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._n6341ihb [data-ds--text-field--container]{border-color:var(--ds-border-bold,#7d818a)}._15mtglyw{overscroll-behavior-y:none}
+._18m91wug{overflow-y:auto}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkidpf{margin-top:0}
+._1bsb1osq{width:100%}
 ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._c71l4d55{max-height:232px}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._otyridpf{margin-bottom:0}

package/dist/esm/components/StatusPicker.js

@@ -15,6 +15,9 @@ import { injectIntl } from 'react-intl';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
 var fieldTextWrapperStyles = null;
+
+// Keep the existing content position while reserving space inside the scrollport for focus rings.
+var scrollContainerStyles = null;
 var Picker = /*#__PURE__*/function (_PureComponent) {
   function Picker() {
     var _this;
@@ -61,7 +64,14 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         selectedColor = _this$props.selectedColor,
         onColorClick = _this$props.onColorClick,
         onColorHover = _this$props.onColorHover,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        scrollableContent = _this$props.scrollableContent;
+      var colorPalette = /*#__PURE__*/React.createElement(ColorPalette, {
+        key: this.colorPaletteKey,
+        onClick: onColorClick,
+        onHover: onColorHover,
+        selectedColor: selectedColor
+      });
 
       // Using <React.Fragment> instead of [] to workaround Enzyme
       // (https://github.com/airbnb/enzyme/issues/1149)
@@ -77,12 +87,10 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         spellCheck: false,
         autoComplete: "off",
         "aria-label": intl.formatMessage(messages.statusInputLabel)
-      })), /*#__PURE__*/React.createElement(ColorPalette, {
-        key: this.colorPaletteKey,
-        onClick: onColorClick,
-        onHover: onColorHover,
-        selectedColor: selectedColor
-      }));
+      })), scrollableContent ? /*#__PURE__*/React.createElement("div", {
+        "data-status-picker-scroll-container": true,
+        className: ax(["_19pk1b66 _c71l4d55 _18m91wug _15mtglyw _ca0q1b66 _1bsb1osq"])
+      }, colorPalette, scrollableContent) : colorPalette);
     }
   }, {
     key: "componentDidUpdate",

package/dist/esm/components/analytics.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "5.9.0";
+var packageVersion = "5.9.1";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/types/components/Status.d.ts

@@ -9,6 +9,7 @@ export type StatusStyle = 'bold' | 'subtle';
 export interface OwnProps {
     color: Color;
     isBold?: boolean;
+    isConstrainedToParent?: boolean;
     localId?: string;
     onClick?: (event: React.SyntheticEvent<any>) => void;
     onHover?: () => void;

package/dist/types/components/StatusPicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { type WithIntlProps, type WrappedComponentProps } from 'react-intl';
 import { type Color } from './Status';
 export type ColorType = Color;
@@ -8,6 +8,7 @@ export interface Props {
     onColorHover?: (value: ColorType) => void;
     onEnter: () => void;
     onTextChanged: (value: string) => void;
+    scrollableContent?: ReactNode;
     selectedColor: ColorType;
     text: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/status",
-	"version": "5.9.1",
+	"version": "5.9.2",
 	"description": "Fabric Status React Components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,8 +51,8 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^169.0.0",
-		"@atlaskit/tokens": "^16.10.0",
+		"@atlaskit/tmp-editor-statsig": "^170.0.0",
+		"@atlaskit/tokens": "^16.11.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2"
 	},