carbon-react 114.12.1 → 114.12.3

package/esm/components/box/box.component.js

@@ -1,11 +1,24 @@
 import styled, { css } from "styled-components";
-import { space, layout, flexbox, position } from "styled-system";
+import { space, layout, flexbox, position as positionFn } from "styled-system";
 import Logger from "../../__internal__/utils/logger";
 import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 let isDeprecationWarningTriggered = false;
+
+const calculatePosition = props => {
+  const {
+    position,
+    ...rest
+  } = positionFn(props);
+  return {
+    position,
+    zIndex: ["sticky", "fixed"].includes(position) ? 1 : undefined,
+    ...rest
+  };
+};
+
 export const Box = styled.div`
   ${() => {
   if (!isDeprecationWarningTriggered) {
@@ -19,7 +32,7 @@ export const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
-  ${position}
+  ${calculatePosition}
 
   ${({
   color,

package/esm/components/select/multi-select/multi-select.component.js

@@ -353,11 +353,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
     setTextValue("");
     const isAlreadySelected = actualValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
-
-    if (!isAlreadySelected && isControlled.current && onChange) {
-      onChange(createCustomEvent([...actualValue, newValue]));
-    }
-
     textboxRef.focus();
     isMouseDownReported.current = false;
     updateValue(previousValue => {
@@ -367,7 +362,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
       return [...previousValue, newValue];
     });
-  }, [createCustomEvent, onChange, textboxRef, actualValue, updateValue]);
+  }, [textboxRef, actualValue, updateValue]);
 
   function onSelectListClose() {
     setOpenState(false);

package/lib/components/box/box.component.js

@@ -25,6 +25,19 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 let isDeprecationWarningTriggered = false;
+
+const calculatePosition = props => {
+  const {
+    position,
+    ...rest
+  } = (0, _styledSystem.position)(props);
+  return {
+    position,
+    zIndex: ["sticky", "fixed"].includes(position) ? 1 : undefined,
+    ...rest
+  };
+};
+
 const Box = _styledComponents.default.div`
   ${() => {
   if (!isDeprecationWarningTriggered) {
@@ -39,7 +52,7 @@ const Box = _styledComponents.default.div`
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
-  ${_styledSystem.position}
+  ${calculatePosition}
 
   ${({
   color,

package/lib/components/select/multi-select/multi-select.component.js

@@ -383,11 +383,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
 
     setTextValue("");
     const isAlreadySelected = actualValue.findIndex(val => (0, _isExpectedValue.default)(val, newValue)) !== -1;
-
-    if (!isAlreadySelected && isControlled.current && onChange) {
-      onChange(createCustomEvent([...actualValue, newValue]));
-    }
-
     textboxRef.focus();
     isMouseDownReported.current = false;
     updateValue(previousValue => {
@@ -397,7 +392,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
 
       return [...previousValue, newValue];
     });
-  }, [createCustomEvent, onChange, textboxRef, actualValue, updateValue]);
+  }, [textboxRef, actualValue, updateValue]);
 
   function onSelectListClose() {
     setOpenState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.12.1",
+  "version": "114.12.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",