carbon-react 138.1.1 → 138.2.1

package/esm/components/action-popover/action-popover.style.js

@@ -3,7 +3,6 @@ import { margin } from "styled-system";
 import Icon from "../icon";
 import StyledIcon from "../icon/icon.style";
 import StyledButton from "../button/button.style";
-import { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 import baseTheme from "../../style/themes/base";
 const oldFocusStyling = `
@@ -224,9 +223,6 @@ const SubMenuItemIcon = styled(ButtonIcon)`
 
     ${type === "chevron_right_thick" && css`
       right: -5px;
-      ${isSafari(navigator) && css`
-        top: var(--sizing100);
-      `}
     `}
   `}
 `;

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

@@ -118,7 +118,14 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       });
     }
   }
-  const listHeight = virtualizer.getTotalSize();
+  const totalSize = virtualizer.getTotalSize();
+  // virtualizer.getTotalSize() returns the total size in pixels for the virtualized items. If nothing is loaded,
+  // then the list height is set to 0 (line 21 of src/components/select/select-list/select-list.style.ts) as
+  // the method always returns a number and never undefined, it seems.
+  // https://github.com/TanStack/virtual/commit/e43e03e500588b2da36f184ecaba2b8e5a506596 suggests that items are
+  // never returned regardless if the container height it 0, so the below line ensures that a container of at
+  // least 1px is always available to render into.
+  const listHeight = totalSize === 0 ? 1 : totalSize;
   useEffect(() => {
     if (isOpen) {
       blockScroll();

package/lib/components/action-popover/action-popover.style.js

@@ -9,7 +9,6 @@ var _styledSystem = require("styled-system");
 var _icon = _interopRequireDefault(require("../icon"));
 var _icon2 = _interopRequireDefault(require("../icon/icon.style"));
 var _button = _interopRequireDefault(require("../button/button.style"));
-var _browserTypeCheck = require("../../__internal__/utils/helpers/browser-type-check");
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -233,9 +232,6 @@ const SubMenuItemIcon = exports.SubMenuItemIcon = (0, _styledComponents.default)
 
     ${type === "chevron_right_thick" && (0, _styledComponents.css)`
       right: -5px;
-      ${(0, _browserTypeCheck.isSafari)(navigator) && (0, _styledComponents.css)`
-        top: var(--sizing100);
-      `}
     `}
   `}
 `;

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

@@ -127,7 +127,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       });
     }
   }
-  const listHeight = virtualizer.getTotalSize();
+  const totalSize = virtualizer.getTotalSize();
+  // virtualizer.getTotalSize() returns the total size in pixels for the virtualized items. If nothing is loaded,
+  // then the list height is set to 0 (line 21 of src/components/select/select-list/select-list.style.ts) as
+  // the method always returns a number and never undefined, it seems.
+  // https://github.com/TanStack/virtual/commit/e43e03e500588b2da36f184ecaba2b8e5a506596 suggests that items are
+  // never returned regardless if the container height it 0, so the below line ensures that a container of at
+  // least 1px is always available to render into.
+  const listHeight = totalSize === 0 ? 1 : totalSize;
   (0, _react.useEffect)(() => {
     if (isOpen) {
       blockScroll();

package/package.json

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