@atlaskit/react-select 2.4.8 → 2.4.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 2.4.10
+
+### Patch Changes
+
+- [#157159](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157159)
+  [`8da004db78761`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8da004db78761) -
+  Migrate menuPortal inline styles to compiled styles
+
+## 2.4.9
+
+### Patch Changes
+
+- [#156309](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156309)
+  [`684b2b1960644`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/684b2b1960644) -
+  Remove all possible CSS selector patterns that would be invalid in inline styles
+
 ## 2.4.8
 
 ### Patch Changes

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

@@ -1,9 +1,13 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1osq{top:100%}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1nmo{top:var(--menu-top)}
+._154i1osq{top:100%}
 ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
 ._18m91wug{overflow-y:auto}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1bsb1qxj{width:var(--menu-width)}
+._1ltva1vk{left:var(--menu-left)}
+._1pbydx66{z-index:9999}
 ._1pbykb7n{z-index:1}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
@@ -11,6 +15,7 @@
 ._94n51osq{bottom:100%}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._kqswcp1v{position:var(--menu-position)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}

package/dist/cjs/compiled/components/menu.js

@@ -397,6 +397,9 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref4) {
 var menuPortalCSS = exports.menuPortalCSS = function menuPortalCSS() {
   return {};
 };
+var menuPortalStyles = {
+  root: "_1pbydx66 _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
+};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
   var appendTo = props.appendTo,
@@ -474,15 +477,14 @@ var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
   // same wrapper element whether fixed or portalled
   var menuWrapper = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _react2.cx)(className, xcss, '-MenuPortal'),
+    className: (0, _runtime.ax)([menuPortalStyles.root, (0, _react2.cx)(className, xcss, '-MenuPortal')]),
     ref: setMenuPortalElement,
     style: _objectSpread({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      zIndex: 9999,
-      left: computedPosition.rect.left,
-      position: menuPosition,
-      top: computedPosition.offset,
-      width: computedPosition.rect.width
+      '--menu-left': "".concat(computedPosition.rect.left, "px"),
+      '--menu-position': menuPosition,
+      '--menu-top': "".concat(computedPosition.offset, "px"),
+      '--menu-width': "".concat(computedPosition.rect.width, "px")
     }, css)
   }, innerProps), children);
   return /*#__PURE__*/React.createElement(PortalPlacementContext.Provider, {

package/dist/cjs/utils.js

@@ -350,27 +350,35 @@ var removeProps = exports.removeProps = function removeProps(propsObj) {
  * @returns A new object containing only supported styles.
  */
 var filterUnsupportedSelectors = exports.filterUnsupportedSelectors = function filterUnsupportedSelectors(styles) {
-  var unsupportedSelectors = [':hover', ':focus', ':active', ':visited', ':link', ':checked', ':disabled', ':enabled', ':first-child', ':last-child', ':nth-child', ':nth-last-child', ':only-child', ':first-of-type', ':last-of-type', ':nth-of-type', ':nth-last-of-type', ':only-of-type', ':empty', ':not', ':root', ':target', ':before', ':after', '::before', '::after', '::placeholder', '::selection', '::backdrop', '::marker', '::first-line', '::first-letter', '::spelling-error', '::grammar-error', '[attr]',
-  // Attribute selectors
-  '[attr=value]',
-  // Attribute value selectors
-  '[attr^=value]',
-  // Attribute starts with
-  '[attr$=value]',
-  // Attribute ends with
-  '[attr*=value]',
-  // Attribute contains
-  '[attr|=value]',
-  // Attribute value with hyphen
-  '[attr~=value]',
-  // Attribute value in space-separated list
+  var unsupportedSelectors = [':',
+  // pseudo-classes/elements
+  '[',
+  // attribute selectors
   '>',
-  // Child combinator
+  // child combinator
   '+',
-  // Adjacent sibling combinator
+  // adjacent sibling combinator
   '~',
-  // General sibling combinator
-  ' ' // Descendant combinator
+  // general sibling combinator
+  ' ',
+  // descendant combinator
+  '*',
+  // universal selector
+  '#',
+  // ID selector
+  '.',
+  // class selector
+  '@',
+  // at-rules
+  '&',
+  // parent selector
+  '|',
+  // namespace separator
+  '^',
+  // starts with
+  '$',
+  // ends with
+  '=' // equals
   ];
   return Object.keys(styles).reduce(function (filteredStyles, key) {
     if (!unsupportedSelectors.some(function (selector) {

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

@@ -1,9 +1,13 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1osq{top:100%}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1nmo{top:var(--menu-top)}
+._154i1osq{top:100%}
 ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
 ._18m91wug{overflow-y:auto}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1bsb1qxj{width:var(--menu-width)}
+._1ltva1vk{left:var(--menu-left)}
+._1pbydx66{z-index:9999}
 ._1pbykb7n{z-index:1}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
@@ -11,6 +15,7 @@
 ._94n51osq{bottom:100%}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._kqswcp1v{position:var(--menu-position)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}

package/dist/es2019/compiled/components/menu.js

@@ -386,6 +386,9 @@ export const LoadingMessage = ({
 // ==============================
 
 export const menuPortalCSS = () => ({});
+const menuPortalStyles = {
+  root: "_1pbydx66 _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
+};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const MenuPortal = props => {
   const {
@@ -459,15 +462,14 @@ export const MenuPortal = props => {
   // same wrapper element whether fixed or portalled
   const menuWrapper = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: cx(className, xcss, '-MenuPortal'),
+    className: ax([menuPortalStyles.root, cx(className, xcss, '-MenuPortal')]),
     ref: setMenuPortalElement,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      zIndex: 9999,
-      left: computedPosition.rect.left,
-      position: menuPosition,
-      top: computedPosition.offset,
-      width: computedPosition.rect.width,
+      '--menu-left': `${computedPosition.rect.left}px`,
+      '--menu-position': menuPosition,
+      '--menu-top': `${computedPosition.offset}px`,
+      '--menu-width': `${computedPosition.rect.width}px`,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ...css
     }

package/dist/es2019/utils.js

@@ -305,27 +305,35 @@ export const removeProps = (propsObj, ...properties) => {
  * @returns A new object containing only supported styles.
  */
 export const filterUnsupportedSelectors = styles => {
-  const unsupportedSelectors = [':hover', ':focus', ':active', ':visited', ':link', ':checked', ':disabled', ':enabled', ':first-child', ':last-child', ':nth-child', ':nth-last-child', ':only-child', ':first-of-type', ':last-of-type', ':nth-of-type', ':nth-last-of-type', ':only-of-type', ':empty', ':not', ':root', ':target', ':before', ':after', '::before', '::after', '::placeholder', '::selection', '::backdrop', '::marker', '::first-line', '::first-letter', '::spelling-error', '::grammar-error', '[attr]',
-  // Attribute selectors
-  '[attr=value]',
-  // Attribute value selectors
-  '[attr^=value]',
-  // Attribute starts with
-  '[attr$=value]',
-  // Attribute ends with
-  '[attr*=value]',
-  // Attribute contains
-  '[attr|=value]',
-  // Attribute value with hyphen
-  '[attr~=value]',
-  // Attribute value in space-separated list
+  const unsupportedSelectors = [':',
+  // pseudo-classes/elements
+  '[',
+  // attribute selectors
   '>',
-  // Child combinator
+  // child combinator
   '+',
-  // Adjacent sibling combinator
+  // adjacent sibling combinator
   '~',
-  // General sibling combinator
-  ' ' // Descendant combinator
+  // general sibling combinator
+  ' ',
+  // descendant combinator
+  '*',
+  // universal selector
+  '#',
+  // ID selector
+  '.',
+  // class selector
+  '@',
+  // at-rules
+  '&',
+  // parent selector
+  '|',
+  // namespace separator
+  '^',
+  // starts with
+  '$',
+  // ends with
+  '=' // equals
   ];
   return Object.keys(styles).reduce((filteredStyles, key) => {
     if (!unsupportedSelectors.some(selector => key.includes(selector))) {

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

@@ -1,9 +1,13 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1osq{top:100%}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1nmo{top:var(--menu-top)}
+._154i1osq{top:100%}
 ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
 ._18m91wug{overflow-y:auto}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1bsb1qxj{width:var(--menu-width)}
+._1ltva1vk{left:var(--menu-left)}
+._1pbydx66{z-index:9999}
 ._1pbykb7n{z-index:1}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
@@ -11,6 +15,7 @@
 ._94n51osq{bottom:100%}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._kqswcp1v{position:var(--menu-position)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}

package/dist/esm/compiled/components/menu.js

@@ -391,6 +391,9 @@ export var LoadingMessage = function LoadingMessage(_ref4) {
 export var menuPortalCSS = function menuPortalCSS() {
   return {};
 };
+var menuPortalStyles = {
+  root: "_1pbydx66 _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
+};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var MenuPortal = function MenuPortal(props) {
   var appendTo = props.appendTo,
@@ -468,15 +471,14 @@ export var MenuPortal = function MenuPortal(props) {
   // same wrapper element whether fixed or portalled
   var menuWrapper = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: cx(className, xcss, '-MenuPortal'),
+    className: ax([menuPortalStyles.root, cx(className, xcss, '-MenuPortal')]),
     ref: setMenuPortalElement,
     style: _objectSpread({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      zIndex: 9999,
-      left: computedPosition.rect.left,
-      position: menuPosition,
-      top: computedPosition.offset,
-      width: computedPosition.rect.width
+      '--menu-left': "".concat(computedPosition.rect.left, "px"),
+      '--menu-position': menuPosition,
+      '--menu-top': "".concat(computedPosition.offset, "px"),
+      '--menu-width': "".concat(computedPosition.rect.width, "px")
     }, css)
   }, innerProps), children);
   return /*#__PURE__*/React.createElement(PortalPlacementContext.Provider, {

package/dist/esm/utils.js

@@ -323,27 +323,35 @@ export var removeProps = function removeProps(propsObj) {
  * @returns A new object containing only supported styles.
  */
 export var filterUnsupportedSelectors = function filterUnsupportedSelectors(styles) {
-  var unsupportedSelectors = [':hover', ':focus', ':active', ':visited', ':link', ':checked', ':disabled', ':enabled', ':first-child', ':last-child', ':nth-child', ':nth-last-child', ':only-child', ':first-of-type', ':last-of-type', ':nth-of-type', ':nth-last-of-type', ':only-of-type', ':empty', ':not', ':root', ':target', ':before', ':after', '::before', '::after', '::placeholder', '::selection', '::backdrop', '::marker', '::first-line', '::first-letter', '::spelling-error', '::grammar-error', '[attr]',
-  // Attribute selectors
-  '[attr=value]',
-  // Attribute value selectors
-  '[attr^=value]',
-  // Attribute starts with
-  '[attr$=value]',
-  // Attribute ends with
-  '[attr*=value]',
-  // Attribute contains
-  '[attr|=value]',
-  // Attribute value with hyphen
-  '[attr~=value]',
-  // Attribute value in space-separated list
+  var unsupportedSelectors = [':',
+  // pseudo-classes/elements
+  '[',
+  // attribute selectors
   '>',
-  // Child combinator
+  // child combinator
   '+',
-  // Adjacent sibling combinator
+  // adjacent sibling combinator
   '~',
-  // General sibling combinator
-  ' ' // Descendant combinator
+  // general sibling combinator
+  ' ',
+  // descendant combinator
+  '*',
+  // universal selector
+  '#',
+  // ID selector
+  '.',
+  // class selector
+  '@',
+  // at-rules
+  '&',
+  // parent selector
+  '|',
+  // namespace separator
+  '^',
+  // starts with
+  '$',
+  // ends with
+  '=' // equals
   ];
   return Object.keys(styles).reduce(function (filteredStyles, key) {
     if (!unsupportedSelectors.some(function (selector) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.4.8",
+	"version": "2.4.10",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",