carbon-addons-iot-react 5.1.11 → 5.1.12

package/es/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.js

@@ -16,7 +16,7 @@ import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/es.string.split.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
-import React__default, { useRef, useMemo, useEffect, useState, useCallback } from 'react';
+import React__default, { useRef, useMemo, useEffect, useState } from 'react';
 import ReactDOM__default from 'react-dom';
 import PropTypes from 'prop-types';
 import { OrderedList, ListItem, FormGroup, RadioButtonGroup, RadioButton, Layer, NumberInput, Select, SelectItem, DatePicker, DatePickerInput } from '@carbon/react';
@@ -265,7 +265,7 @@ var defaultProps = {
   hasIconOnly: false,
   menuOffset: undefined,
   datePickerType: 'range',
-  renderInPortal: false,
+  renderInPortal: true,
   useAutoPositioning: false,
   style: {},
   closeOnSelect: true
@@ -277,96 +277,148 @@ var CalendarPortal = function CalendarPortal(_ref) {
     _ref$onClose = _ref.onClose,
     onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
     children = _ref.children;
-  var portalContentRef = useRef(null); // Reference to the calendar portal content element
-  var _useState = useState({
+  var _React$useState = React__default.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    container = _React$useState2[0],
+    setContainer = _React$useState2[1];
+  var portalContentRef = React__default.useRef(null);
+  var _React$useState3 = React__default.useState({
       top: 0,
       left: 0
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    position = _useState2[0],
-    setPosition = _useState2[1]; // State to store the position of the calendar portal
-
-  var portalWidth = 316; // Width of the calendar portal
-
-  var updatePosition = useCallback(function () {
-    var anchor = anchorRef.current; // Reference to the anchor element
-    var portal = portalContentRef.current; // Reference to the calendar portal content element
-
-    if (!anchor || !portal) return false; // Return early if anchor or portal references are null
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    position = _React$useState4[0],
+    setPosition = _React$useState4[1];
+  var portalWidth = 316;
 
-    var rect = anchor.getBoundingClientRect(); // Get the bounding client rectangle of the anchor element
-    var scrollY = window.scrollY || document.documentElement.scrollTop; // Get the current scroll position vertically
-    var scrollX = window.scrollX || document.documentElement.scrollLeft; // Get the current scroll position horizontally
+  // Decide container once the anchor exists (modal or body)
+  React__default.useEffect(function () {
+    var anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+    if (!anchor) {
+      setContainer(document.body);
+      return;
+    }
+    var modal = anchor.closest('.cds--modal-container');
+    setContainer(modal || document.body);
+  }, [anchorRef, isOpen]);
+  var updatePosition = React__default.useCallback(function () {
+    var anchor = anchorRef.current;
+    var portal = portalContentRef.current;
+    var cont = container;
+    if (!anchor || !portal || !cont) return false;
+    var rect = anchor.getBoundingClientRect();
     var _window = window,
       innerWidth = _window.innerWidth,
-      innerHeight = _window.innerHeight; // Get the inner width and height of the window
+      innerHeight = _window.innerHeight;
+    var portalHeight = portal.offsetHeight;
+    var inModal = cont !== document.body;
+    var top;
+    var left;
+    if (inModal) {
+      // ----- inside modal: absolute, relative to modal rect -----
+      var modalRect = cont.getBoundingClientRect();
+      var topSpace = rect.top - modalRect.top;
+      var bottomSpace = modalRect.bottom - rect.bottom;
+      var fitsBelow = bottomSpace >= portalHeight;
+      var fitsAbove = topSpace >= portalHeight;
+      top = fitsBelow ? rect.bottom - modalRect.top : fitsAbove ? rect.top - portalHeight - modalRect.top : rect.bottom - portalHeight - modalRect.top;
+      left = rect.right - portalWidth - modalRect.left;
 
-    var portalHeight = portal.offsetHeight; // Get the height of the calendar portal content element
-
-    var topSpace = rect.top; // Top space available above the anchor element
-    var bottomSpace = innerHeight - rect.bottom; // Bottom space available below the anchor element
+      // clamp within modal width
+      var modalWidth = cont.clientWidth;
+      left = Math.max(0, Math.min(left, modalWidth - portalWidth));
+    } else {
+      // ----- in body: FIXED, relative to viewport (no scroll offsets) -----
+      var _topSpace = rect.top;
+      var _bottomSpace = innerHeight - rect.bottom;
+      var _fitsBelow = _bottomSpace >= portalHeight;
+      var _fitsAbove = _topSpace >= portalHeight;
+      top = _fitsBelow ? rect.bottom : _fitsAbove ? rect.top - portalHeight : Math.max(0, innerHeight - portalHeight);
+      left = rect.right - portalWidth;
+      left = Math.max(0, Math.min(left, innerWidth - portalWidth));
+    }
+    setPosition(function (prev) {
+      return prev.top === top && prev.left === left ? prev : {
+        top: top,
+        left: left
+      };
+    });
+    return true;
+  }, [anchorRef, container]);
 
-    var fitsBelow = bottomSpace >= portalHeight; // Check if the calendar portal fits below the anchor element
-    var fitsAbove = topSpace >= portalHeight; // Check if the calendar portal fits above the anchor element
+  // Run after open + after content lays out
+  React__default.useLayoutEffect(function () {
+    if (!isOpen) return;
+    updatePosition();
+  }, [isOpen, updatePosition]);
 
-    var top = fitsBelow ? rect.bottom + scrollY : fitsAbove ? rect.top + scrollY - portalHeight : Math.max(scrollY, scrollY + rect.bottom - portalHeight); // Calculate the top position of the calendar portal
+  // Reposition on resize/scroll. In modal, listen to modal scroller too.
+  React__default.useEffect(function () {
+    if (!isOpen || !container) return;
+    var inModal = container !== document.body;
+    var modalScroller = inModal ? container.querySelector('.cds--modal-content') || container : null;
+    var onRescroll = function onRescroll() {
+      return updatePosition();
+    };
+    window.addEventListener('resize', onRescroll);
+    window.addEventListener('scroll', onRescroll, {
+      capture: true
+    });
+    if (modalScroller) modalScroller.addEventListener('scroll', onRescroll, {
+      capture: true
+    });
 
-    var left = rect.right - portalWidth + scrollX; // Calculate the left position of the calendar portal
-    left = Math.max(0, Math.min(left, scrollX + innerWidth - portalWidth)); // Ensure the left position is within the viewport
+    // If the calendar's size changes (months switch), keep it stuck to the anchor
+    var ro = new ResizeObserver(onRescroll);
+    if (portalContentRef.current) ro.observe(portalContentRef.current);
 
-    setPosition({
-      top: top,
-      left: left
-    }); // Update the position state
-    return true;
-  });
-  useEffect(function () {
-    if (isOpen) {
-      var frame = requestAnimationFrame(updatePosition); // Request an animation frame to update the position
-      return function () {
-        return cancelAnimationFrame(frame);
-      }; // Cancel the animation frame when the component unmounts
-    }
-    return undefined;
-  }, [isOpen, updatePosition]); // Depend on the isOpen prop to re-run the effect when it changes
+    // eslint-disable-next-line consistent-return
+    return function () {
+      window.removeEventListener('resize', onRescroll);
+      window.removeEventListener('scroll', onRescroll, {
+        capture: true
+      });
+      if (modalScroller) modalScroller.removeEventListener('scroll', onRescroll, {
+        capture: true
+      });
+      ro.disconnect();
+    };
+  }, [isOpen, container, updatePosition]);
 
-  useEffect(function () {
+  // Close on outside click
+  React__default.useEffect(function () {
+    if (!isOpen) return;
     var handleClickOutside = function handleClickOutside(e) {
-      var anchor = anchorRef.current; // Reference to the anchor element
+      var anchor = anchorRef.current;
       if (portalContentRef.current && !portalContentRef.current.contains(e.target) && anchor && !anchor.contains(e.target)) {
-        onClose(); // Call the onClose callback when clicking outside the calendar portal
+        onClose();
       }
     };
-    window.addEventListener('scroll', updatePosition, true); // Listen for scroll events and update the position
-    window.addEventListener('resize', updatePosition); // Listen for resize events and update the position
-    document.addEventListener('mousedown', handleClickOutside); // Listen for mousedown events and handle click outside the calendar portal
-
+    document.addEventListener('mousedown', handleClickOutside);
+    // eslint-disable-next-line consistent-return
     return function () {
-      window.removeEventListener('scroll', updatePosition, true); // Remove the scroll event listener
-      window.removeEventListener('resize', updatePosition); // Remove the resize event listener
-      document.removeEventListener('mousedown', handleClickOutside); // Remove the click outside event listener
+      return document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [anchorRef, onClose, updatePosition]); // Depend on the anchorRef and onClose props to re-run the effect when they change
-
-  if (!isOpen) return null; // Return null if the calendar portal is not open
-
+  }, [isOpen, onClose, anchorRef]);
+  if (!isOpen || !container) return null;
+  var inModal = container !== document.body;
+  var stylePosition = inModal ? 'absolute' : 'fixed';
   return /*#__PURE__*/ReactDOM__default.createPortal(/*#__PURE__*/React__default.createElement("div", {
     ref: portalContentRef,
     className: "datetime-picker-portal",
     style: {
-      position: 'absolute',
-      top: "".concat(position.top, "px"),
-      left: "".concat(position.left, "px"),
-      width: "".concat(portalWidth, "px"),
+      position: stylePosition,
+      top: position.top,
+      left: position.left,
+      width: portalWidth,
       backgroundColor: 'white',
-      padding: '10px',
+      padding: 10,
       zIndex: 9999,
       overflowY: 'auto',
       overflowX: 'hidden',
-      maxHeight: '400px'
+      maxHeight: 400
     }
-  }, children), document.body // Attach the calendar portal to the document body
-  );
+  }, children), container);
 };
 var DateTimePicker = function DateTimePicker(_ref2) {
   var _style$zIndex2;
@@ -398,6 +450,7 @@ var DateTimePicker = function DateTimePicker(_ref2) {
     style = _ref2.style,
     closeOnSelect = _ref2.closeOnSelect,
     others = _objectWithoutProperties(_ref2, _excluded);
+  console.log(renderInPortal);
   var id = useRef(others.id || v4()).current;
   React__default.useEffect(function () {
     {
@@ -430,34 +483,34 @@ var DateTimePicker = function DateTimePicker(_ref2) {
     customRangeKind = _useDateTimePickerRan2[0],
     setCustomRangeKind = _useDateTimePickerRan2[1],
     onCustomRangeChange = _useDateTimePickerRan2[2];
-  var _useState3 = useState(false),
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCustomRange = _useState2[0],
+    setIsCustomRange = _useState2[1];
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    isCustomRange = _useState4[0],
-    setIsCustomRange = _useState4[1];
+    selectedPreset = _useState4[0],
+    setSelectedPreset = _useState4[1];
   var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    selectedPreset = _useState6[0],
-    setSelectedPreset = _useState6[1];
+    currentValue = _useState6[0],
+    setCurrentValue = _useState6[1];
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    currentValue = _useState8[0],
-    setCurrentValue = _useState8[1];
+    lastAppliedValue = _useState8[0],
+    setLastAppliedValue = _useState8[1];
   var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    lastAppliedValue = _useState10[0],
-    setLastAppliedValue = _useState10[1];
-  var _useState11 = useState(null),
+    humanValue = _useState10[0],
+    setHumanValue = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    humanValue = _useState12[0],
-    setHumanValue = _useState12[1];
-  var _useState13 = useState(false),
+    defaultTimeValueUpdate = _useState12[0],
+    setDefaultTimeValueUpdate = _useState12[1];
+  var _useState13 = useState(invalid),
     _useState14 = _slicedToArray(_useState13, 2),
-    defaultTimeValueUpdate = _useState14[0],
-    setDefaultTimeValueUpdate = _useState14[1];
-  var _useState15 = useState(invalid),
-    _useState16 = _slicedToArray(_useState15, 2),
-    invalidState = _useState16[0],
-    setInvalidState = _useState16[1];
+    invalidState = _useState14[0],
+    setInvalidState = _useState14[1];
   var relativeSelect = useRef(null);
   var containerRef = useRef();
   var dropdownRef = useRef();
@@ -498,34 +551,34 @@ var DateTimePicker = function DateTimePicker(_ref2) {
     onNavigateRadioButton = _useDateTimePickerKey.onNavigateRadioButton,
     onNavigatePresets = _useDateTimePickerKey.onNavigatePresets,
     onFieldClick = _useDateTimePickerKey.onFieldClick;
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    singleDateValue = _useState16[0],
+    setSingleDateValue = _useState16[1];
   var _useState17 = useState(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    singleDateValue = _useState18[0],
-    setSingleDateValue = _useState18[1];
+    singleTimeValue = _useState18[0],
+    setSingleTimeValue = _useState18[1];
   var _useState19 = useState(null),
     _useState20 = _slicedToArray(_useState19, 2),
-    singleTimeValue = _useState20[0],
-    setSingleTimeValue = _useState20[1];
+    rangeStartTimeValue = _useState20[0],
+    setRangeStartTimeValue = _useState20[1];
   var _useState21 = useState(null),
     _useState22 = _slicedToArray(_useState21, 2),
-    rangeStartTimeValue = _useState22[0],
-    setRangeStartTimeValue = _useState22[1];
-  var _useState23 = useState(null),
+    rangeEndTimeValue = _useState22[0],
+    setRangeEndTimeValue = _useState22[1];
+  var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    rangeEndTimeValue = _useState24[0],
-    setRangeEndTimeValue = _useState24[1];
+    invalidRangeStartTime = _useState24[0],
+    setInvalidRangeStartTime = _useState24[1];
   var _useState25 = useState(false),
     _useState26 = _slicedToArray(_useState25, 2),
-    invalidRangeStartTime = _useState26[0],
-    setInvalidRangeStartTime = _useState26[1];
+    invalidRangeEndTime = _useState26[0],
+    setInvalidRangeEndTime = _useState26[1];
   var _useState27 = useState(false),
     _useState28 = _slicedToArray(_useState27, 2),
-    invalidRangeEndTime = _useState28[0],
-    setInvalidRangeEndTime = _useState28[1];
-  var _useState29 = useState(false),
-    _useState30 = _slicedToArray(_useState29, 2),
-    invalidRangeStartDate = _useState30[0],
-    setInvalidRangeStartDate = _useState30[1];
+    invalidRangeStartDate = _useState28[0],
+    setInvalidRangeStartDate = _useState28[1];
   var dateTimePickerBaseValue = {
     kind: '',
     preset: {
@@ -1634,7 +1687,7 @@ DateTimePicker.__docgenInfo = {
     },
     "renderInPortal": {
       "defaultValue": {
-        "value": "false",
+        "value": "true",
         "computed": false
       },
       "description": "If set to true it will render outside of the current DOM in a portal, otherwise render as a child",

package/es/components/TimePicker/TimePickerDropdown.js

@@ -511,6 +511,10 @@ var TimePickerSpinner = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     is24hours = _ref2.is24hours,
     amString = _ref2.amString,
     pmString = _ref2.pmString;
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    container = _useState16[0],
+    setContainer = _useState16[1];
   var currentTime = dayjs().format(AVAILABLE_FORMATS);
   var updatedStyle = useMemo(function () {
     var _style$zIndex;
@@ -527,20 +531,25 @@ var TimePickerSpinner = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   var thirdVal = useMemo(function () {
     return is24hours ? '' : timeUtils.getMeridiem(value, currentTime, amString, pmString) === amString ? 'AM' : 'PM';
   }, [is24hours, value, currentTime, amString, pmString]);
-  var _useState15 = useState([firstVal, secondVal, thirdVal]),
-    _useState16 = _slicedToArray(_useState15, 2),
-    selected = _useState16[0],
-    setSelected = _useState16[1];
-  var _useState17 = useState(value),
+  var _useState17 = useState([firstVal, secondVal, thirdVal]),
     _useState18 = _slicedToArray(_useState17, 2),
-    callbackValue = _useState18[0],
-    setCallbackValue = _useState18[1];
-  var _useState19 = useState(0),
+    selected = _useState18[0],
+    setSelected = _useState18[1];
+  var _useState19 = useState(value),
     _useState20 = _slicedToArray(_useState19, 2),
-    setFocusedSpinner = _useState20[1];
+    callbackValue = _useState20[0],
+    setCallbackValue = _useState20[1];
+  var _useState21 = useState(0),
+    _useState22 = _slicedToArray(_useState21, 2),
+    setFocusedSpinner = _useState22[1];
   var secondSpinnerRef = useRef();
   var thirdSpinnerRef = useRef();
   var numberOfSpinners = is24hours ? 2 : 3;
+  useEffect(function () {
+    var active = document.activeElement; // currently focused element
+    var nearestModal = active === null || active === void 0 ? void 0 : active.closest('.cds--modal');
+    setContainer(nearestModal || document.body);
+  }, []);
   useEffect(function () {
     setSelected([firstVal, secondVal, thirdVal]);
   }, [firstVal, secondVal, thirdVal]);
@@ -636,6 +645,7 @@ var TimePickerSpinner = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }, /* eslint-disable-next-line react-hooks/exhaustive-deps */
   [selected[2]]);
   var dropdown = /*#__PURE__*/React__default.createElement("div", {
+    ref: ref,
     "data-testid": testId,
     className: classnames("".concat(iotPrefix, "--time-picker-spinner"), _defineProperty({}, "".concat(iotPrefix, "--time-picker-spinner--24h"), is24hours)),
     style: _objectSpread(_objectSpread({}, updatedStyle), {}, {
@@ -643,7 +653,8 @@ var TimePickerSpinner = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       top: "".concat(position[1], "px")
     })
   }, listSpinner1, listSpinner2, is24hours ? null : listSpinner3);
-  return /*#__PURE__*/ReactDOM__default.createPortal(dropdown, document.body);
+  if (!container) return null;
+  return /*#__PURE__*/ReactDOM__default.createPortal(dropdown, container);
 });
 TimePickerSpinner.propTypes = spinnerPropTypes;
 TimePickerSpinner.defaultProps = defaultSpinnerProps;

package/lib/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.js

@@ -281,7 +281,7 @@ var defaultProps = {
   hasIconOnly: false,
   menuOffset: undefined,
   datePickerType: 'range',
-  renderInPortal: false,
+  renderInPortal: true,
   useAutoPositioning: false,
   style: {},
   closeOnSelect: true
@@ -293,96 +293,148 @@ var CalendarPortal = function CalendarPortal(_ref) {
     _ref$onClose = _ref.onClose,
     onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
     children = _ref.children;
-  var portalContentRef = React.useRef(null); // Reference to the calendar portal content element
-  var _useState = React.useState({
+  var _React$useState = React__default.default.useState(null),
+    _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
+    container = _React$useState2[0],
+    setContainer = _React$useState2[1];
+  var portalContentRef = React__default.default.useRef(null);
+  var _React$useState3 = React__default.default.useState({
       top: 0,
       left: 0
     }),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    position = _useState2[0],
-    setPosition = _useState2[1]; // State to store the position of the calendar portal
-
-  var portalWidth = 316; // Width of the calendar portal
-
-  var updatePosition = React.useCallback(function () {
-    var anchor = anchorRef.current; // Reference to the anchor element
-    var portal = portalContentRef.current; // Reference to the calendar portal content element
-
-    if (!anchor || !portal) return false; // Return early if anchor or portal references are null
+    _React$useState4 = _slicedToArray__default.default(_React$useState3, 2),
+    position = _React$useState4[0],
+    setPosition = _React$useState4[1];
+  var portalWidth = 316;
 
-    var rect = anchor.getBoundingClientRect(); // Get the bounding client rectangle of the anchor element
-    var scrollY = window.scrollY || document.documentElement.scrollTop; // Get the current scroll position vertically
-    var scrollX = window.scrollX || document.documentElement.scrollLeft; // Get the current scroll position horizontally
+  // Decide container once the anchor exists (modal or body)
+  React__default.default.useEffect(function () {
+    var anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+    if (!anchor) {
+      setContainer(document.body);
+      return;
+    }
+    var modal = anchor.closest('.cds--modal-container');
+    setContainer(modal || document.body);
+  }, [anchorRef, isOpen]);
+  var updatePosition = React__default.default.useCallback(function () {
+    var anchor = anchorRef.current;
+    var portal = portalContentRef.current;
+    var cont = container;
+    if (!anchor || !portal || !cont) return false;
+    var rect = anchor.getBoundingClientRect();
     var _window = window,
       innerWidth = _window.innerWidth,
-      innerHeight = _window.innerHeight; // Get the inner width and height of the window
+      innerHeight = _window.innerHeight;
+    var portalHeight = portal.offsetHeight;
+    var inModal = cont !== document.body;
+    var top;
+    var left;
+    if (inModal) {
+      // ----- inside modal: absolute, relative to modal rect -----
+      var modalRect = cont.getBoundingClientRect();
+      var topSpace = rect.top - modalRect.top;
+      var bottomSpace = modalRect.bottom - rect.bottom;
+      var fitsBelow = bottomSpace >= portalHeight;
+      var fitsAbove = topSpace >= portalHeight;
+      top = fitsBelow ? rect.bottom - modalRect.top : fitsAbove ? rect.top - portalHeight - modalRect.top : rect.bottom - portalHeight - modalRect.top;
+      left = rect.right - portalWidth - modalRect.left;
 
-    var portalHeight = portal.offsetHeight; // Get the height of the calendar portal content element
-
-    var topSpace = rect.top; // Top space available above the anchor element
-    var bottomSpace = innerHeight - rect.bottom; // Bottom space available below the anchor element
+      // clamp within modal width
+      var modalWidth = cont.clientWidth;
+      left = Math.max(0, Math.min(left, modalWidth - portalWidth));
+    } else {
+      // ----- in body: FIXED, relative to viewport (no scroll offsets) -----
+      var _topSpace = rect.top;
+      var _bottomSpace = innerHeight - rect.bottom;
+      var _fitsBelow = _bottomSpace >= portalHeight;
+      var _fitsAbove = _topSpace >= portalHeight;
+      top = _fitsBelow ? rect.bottom : _fitsAbove ? rect.top - portalHeight : Math.max(0, innerHeight - portalHeight);
+      left = rect.right - portalWidth;
+      left = Math.max(0, Math.min(left, innerWidth - portalWidth));
+    }
+    setPosition(function (prev) {
+      return prev.top === top && prev.left === left ? prev : {
+        top: top,
+        left: left
+      };
+    });
+    return true;
+  }, [anchorRef, container]);
 
-    var fitsBelow = bottomSpace >= portalHeight; // Check if the calendar portal fits below the anchor element
-    var fitsAbove = topSpace >= portalHeight; // Check if the calendar portal fits above the anchor element
+  // Run after open + after content lays out
+  React__default.default.useLayoutEffect(function () {
+    if (!isOpen) return;
+    updatePosition();
+  }, [isOpen, updatePosition]);
 
-    var top = fitsBelow ? rect.bottom + scrollY : fitsAbove ? rect.top + scrollY - portalHeight : Math.max(scrollY, scrollY + rect.bottom - portalHeight); // Calculate the top position of the calendar portal
+  // Reposition on resize/scroll. In modal, listen to modal scroller too.
+  React__default.default.useEffect(function () {
+    if (!isOpen || !container) return;
+    var inModal = container !== document.body;
+    var modalScroller = inModal ? container.querySelector('.cds--modal-content') || container : null;
+    var onRescroll = function onRescroll() {
+      return updatePosition();
+    };
+    window.addEventListener('resize', onRescroll);
+    window.addEventListener('scroll', onRescroll, {
+      capture: true
+    });
+    if (modalScroller) modalScroller.addEventListener('scroll', onRescroll, {
+      capture: true
+    });
 
-    var left = rect.right - portalWidth + scrollX; // Calculate the left position of the calendar portal
-    left = Math.max(0, Math.min(left, scrollX + innerWidth - portalWidth)); // Ensure the left position is within the viewport
+    // If the calendar's size changes (months switch), keep it stuck to the anchor
+    var ro = new ResizeObserver(onRescroll);
+    if (portalContentRef.current) ro.observe(portalContentRef.current);
 
-    setPosition({
-      top: top,
-      left: left
-    }); // Update the position state
-    return true;
-  });
-  React.useEffect(function () {
-    if (isOpen) {
-      var frame = requestAnimationFrame(updatePosition); // Request an animation frame to update the position
-      return function () {
-        return cancelAnimationFrame(frame);
-      }; // Cancel the animation frame when the component unmounts
-    }
-    return undefined;
-  }, [isOpen, updatePosition]); // Depend on the isOpen prop to re-run the effect when it changes
+    // eslint-disable-next-line consistent-return
+    return function () {
+      window.removeEventListener('resize', onRescroll);
+      window.removeEventListener('scroll', onRescroll, {
+        capture: true
+      });
+      if (modalScroller) modalScroller.removeEventListener('scroll', onRescroll, {
+        capture: true
+      });
+      ro.disconnect();
+    };
+  }, [isOpen, container, updatePosition]);
 
-  React.useEffect(function () {
+  // Close on outside click
+  React__default.default.useEffect(function () {
+    if (!isOpen) return;
     var handleClickOutside = function handleClickOutside(e) {
-      var anchor = anchorRef.current; // Reference to the anchor element
+      var anchor = anchorRef.current;
       if (portalContentRef.current && !portalContentRef.current.contains(e.target) && anchor && !anchor.contains(e.target)) {
-        onClose(); // Call the onClose callback when clicking outside the calendar portal
+        onClose();
       }
     };
-    window.addEventListener('scroll', updatePosition, true); // Listen for scroll events and update the position
-    window.addEventListener('resize', updatePosition); // Listen for resize events and update the position
-    document.addEventListener('mousedown', handleClickOutside); // Listen for mousedown events and handle click outside the calendar portal
-
+    document.addEventListener('mousedown', handleClickOutside);
+    // eslint-disable-next-line consistent-return
     return function () {
-      window.removeEventListener('scroll', updatePosition, true); // Remove the scroll event listener
-      window.removeEventListener('resize', updatePosition); // Remove the resize event listener
-      document.removeEventListener('mousedown', handleClickOutside); // Remove the click outside event listener
+      return document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [anchorRef, onClose, updatePosition]); // Depend on the anchorRef and onClose props to re-run the effect when they change
-
-  if (!isOpen) return null; // Return null if the calendar portal is not open
-
+  }, [isOpen, onClose, anchorRef]);
+  if (!isOpen || !container) return null;
+  var inModal = container !== document.body;
+  var stylePosition = inModal ? 'absolute' : 'fixed';
   return /*#__PURE__*/ReactDOM__default.default.createPortal(/*#__PURE__*/React__default.default.createElement("div", {
     ref: portalContentRef,
     className: "datetime-picker-portal",
     style: {
-      position: 'absolute',
-      top: "".concat(position.top, "px"),
-      left: "".concat(position.left, "px"),
-      width: "".concat(portalWidth, "px"),
+      position: stylePosition,
+      top: position.top,
+      left: position.left,
+      width: portalWidth,
       backgroundColor: 'white',
-      padding: '10px',
+      padding: 10,
       zIndex: 9999,
       overflowY: 'auto',
       overflowX: 'hidden',
-      maxHeight: '400px'
+      maxHeight: 400
     }
-  }, children), document.body // Attach the calendar portal to the document body
-  );
+  }, children), container);
 };
 var DateTimePicker = function DateTimePicker(_ref2) {
   var _style$zIndex2;
@@ -414,6 +466,7 @@ var DateTimePicker = function DateTimePicker(_ref2) {
     style = _ref2.style,
     closeOnSelect = _ref2.closeOnSelect,
     others = _objectWithoutProperties__default.default(_ref2, _excluded);
+  console.log(renderInPortal);
   var id = React.useRef(others.id || uuid.v4()).current;
   React__default.default.useEffect(function () {
     {
@@ -446,34 +499,34 @@ var DateTimePicker = function DateTimePicker(_ref2) {
     customRangeKind = _useDateTimePickerRan2[0],
     setCustomRangeKind = _useDateTimePickerRan2[1],
     onCustomRangeChange = _useDateTimePickerRan2[2];
-  var _useState3 = React.useState(false),
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    isCustomRange = _useState2[0],
+    setIsCustomRange = _useState2[1];
+  var _useState3 = React.useState(null),
     _useState4 = _slicedToArray__default.default(_useState3, 2),
-    isCustomRange = _useState4[0],
-    setIsCustomRange = _useState4[1];
+    selectedPreset = _useState4[0],
+    setSelectedPreset = _useState4[1];
   var _useState5 = React.useState(null),
     _useState6 = _slicedToArray__default.default(_useState5, 2),
-    selectedPreset = _useState6[0],
-    setSelectedPreset = _useState6[1];
+    currentValue = _useState6[0],
+    setCurrentValue = _useState6[1];
   var _useState7 = React.useState(null),
     _useState8 = _slicedToArray__default.default(_useState7, 2),
-    currentValue = _useState8[0],
-    setCurrentValue = _useState8[1];
+    lastAppliedValue = _useState8[0],
+    setLastAppliedValue = _useState8[1];
   var _useState9 = React.useState(null),
     _useState10 = _slicedToArray__default.default(_useState9, 2),
-    lastAppliedValue = _useState10[0],
-    setLastAppliedValue = _useState10[1];
-  var _useState11 = React.useState(null),
+    humanValue = _useState10[0],
+    setHumanValue = _useState10[1];
+  var _useState11 = React.useState(false),
     _useState12 = _slicedToArray__default.default(_useState11, 2),
-    humanValue = _useState12[0],
-    setHumanValue = _useState12[1];
-  var _useState13 = React.useState(false),
+    defaultTimeValueUpdate = _useState12[0],
+    setDefaultTimeValueUpdate = _useState12[1];
+  var _useState13 = React.useState(invalid),
     _useState14 = _slicedToArray__default.default(_useState13, 2),
-    defaultTimeValueUpdate = _useState14[0],
-    setDefaultTimeValueUpdate = _useState14[1];
-  var _useState15 = React.useState(invalid),
-    _useState16 = _slicedToArray__default.default(_useState15, 2),
-    invalidState = _useState16[0],
-    setInvalidState = _useState16[1];
+    invalidState = _useState14[0],
+    setInvalidState = _useState14[1];
   var relativeSelect = React.useRef(null);
   var containerRef = React.useRef();
   var dropdownRef = React.useRef();
@@ -514,34 +567,34 @@ var DateTimePicker = function DateTimePicker(_ref2) {
     onNavigateRadioButton = _useDateTimePickerKey.onNavigateRadioButton,
     onNavigatePresets = _useDateTimePickerKey.onNavigatePresets,
     onFieldClick = _useDateTimePickerKey.onFieldClick;
+  var _useState15 = React.useState(null),
+    _useState16 = _slicedToArray__default.default(_useState15, 2),
+    singleDateValue = _useState16[0],
+    setSingleDateValue = _useState16[1];
   var _useState17 = React.useState(null),
     _useState18 = _slicedToArray__default.default(_useState17, 2),
-    singleDateValue = _useState18[0],
-    setSingleDateValue = _useState18[1];
+    singleTimeValue = _useState18[0],
+    setSingleTimeValue = _useState18[1];
   var _useState19 = React.useState(null),
     _useState20 = _slicedToArray__default.default(_useState19, 2),
-    singleTimeValue = _useState20[0],
-    setSingleTimeValue = _useState20[1];
+    rangeStartTimeValue = _useState20[0],
+    setRangeStartTimeValue = _useState20[1];
   var _useState21 = React.useState(null),
     _useState22 = _slicedToArray__default.default(_useState21, 2),
-    rangeStartTimeValue = _useState22[0],
-    setRangeStartTimeValue = _useState22[1];
-  var _useState23 = React.useState(null),
+    rangeEndTimeValue = _useState22[0],
+    setRangeEndTimeValue = _useState22[1];
+  var _useState23 = React.useState(false),
     _useState24 = _slicedToArray__default.default(_useState23, 2),
-    rangeEndTimeValue = _useState24[0],
-    setRangeEndTimeValue = _useState24[1];
+    invalidRangeStartTime = _useState24[0],
+    setInvalidRangeStartTime = _useState24[1];
   var _useState25 = React.useState(false),
     _useState26 = _slicedToArray__default.default(_useState25, 2),
-    invalidRangeStartTime = _useState26[0],
-    setInvalidRangeStartTime = _useState26[1];
+    invalidRangeEndTime = _useState26[0],
+    setInvalidRangeEndTime = _useState26[1];
   var _useState27 = React.useState(false),
     _useState28 = _slicedToArray__default.default(_useState27, 2),
-    invalidRangeEndTime = _useState28[0],
-    setInvalidRangeEndTime = _useState28[1];
-  var _useState29 = React.useState(false),
-    _useState30 = _slicedToArray__default.default(_useState29, 2),
-    invalidRangeStartDate = _useState30[0],
-    setInvalidRangeStartDate = _useState30[1];
+    invalidRangeStartDate = _useState28[0],
+    setInvalidRangeStartDate = _useState28[1];
   var dateTimePickerBaseValue = {
     kind: '',
     preset: {
@@ -1650,7 +1703,7 @@ DateTimePicker.__docgenInfo = {
     },
     "renderInPortal": {
       "defaultValue": {
-        "value": "false",
+        "value": "true",
         "computed": false
       },
       "description": "If set to true it will render outside of the current DOM in a portal, otherwise render as a child",

package/lib/components/TimePicker/TimePickerDropdown.js

@@ -527,6 +527,10 @@ var TimePickerSpinner = /*#__PURE__*/React__default.default.forwardRef(function
     is24hours = _ref2.is24hours,
     amString = _ref2.amString,
     pmString = _ref2.pmString;
+  var _useState15 = React.useState(null),
+    _useState16 = _slicedToArray__default.default(_useState15, 2),
+    container = _useState16[0],
+    setContainer = _useState16[1];
   var currentTime = dayjs__default.default().format(AVAILABLE_FORMATS);
   var updatedStyle = React.useMemo(function () {
     var _style$zIndex;
@@ -543,20 +547,25 @@ var TimePickerSpinner = /*#__PURE__*/React__default.default.forwardRef(function
   var thirdVal = React.useMemo(function () {
     return is24hours ? '' : timeUtils.getMeridiem(value, currentTime, amString, pmString) === amString ? 'AM' : 'PM';
   }, [is24hours, value, currentTime, amString, pmString]);
-  var _useState15 = React.useState([firstVal, secondVal, thirdVal]),
-    _useState16 = _slicedToArray__default.default(_useState15, 2),
-    selected = _useState16[0],
-    setSelected = _useState16[1];
-  var _useState17 = React.useState(value),
+  var _useState17 = React.useState([firstVal, secondVal, thirdVal]),
     _useState18 = _slicedToArray__default.default(_useState17, 2),
-    callbackValue = _useState18[0],
-    setCallbackValue = _useState18[1];
-  var _useState19 = React.useState(0),
+    selected = _useState18[0],
+    setSelected = _useState18[1];
+  var _useState19 = React.useState(value),
     _useState20 = _slicedToArray__default.default(_useState19, 2),
-    setFocusedSpinner = _useState20[1];
+    callbackValue = _useState20[0],
+    setCallbackValue = _useState20[1];
+  var _useState21 = React.useState(0),
+    _useState22 = _slicedToArray__default.default(_useState21, 2),
+    setFocusedSpinner = _useState22[1];
   var secondSpinnerRef = React.useRef();
   var thirdSpinnerRef = React.useRef();
   var numberOfSpinners = is24hours ? 2 : 3;
+  React.useEffect(function () {
+    var active = document.activeElement; // currently focused element
+    var nearestModal = active === null || active === void 0 ? void 0 : active.closest('.cds--modal');
+    setContainer(nearestModal || document.body);
+  }, []);
   React.useEffect(function () {
     setSelected([firstVal, secondVal, thirdVal]);
   }, [firstVal, secondVal, thirdVal]);
@@ -652,6 +661,7 @@ var TimePickerSpinner = /*#__PURE__*/React__default.default.forwardRef(function
   }, /* eslint-disable-next-line react-hooks/exhaustive-deps */
   [selected[2]]);
   var dropdown = /*#__PURE__*/React__default.default.createElement("div", {
+    ref: ref,
     "data-testid": testId,
     className: classnames__default.default("".concat(iotPrefix, "--time-picker-spinner"), _defineProperty__default.default({}, "".concat(iotPrefix, "--time-picker-spinner--24h"), is24hours)),
     style: _objectSpread(_objectSpread({}, updatedStyle), {}, {
@@ -659,7 +669,8 @@ var TimePickerSpinner = /*#__PURE__*/React__default.default.forwardRef(function
       top: "".concat(position[1], "px")
     })
   }, listSpinner1, listSpinner2, is24hours ? null : listSpinner3);
-  return /*#__PURE__*/ReactDOM__default.default.createPortal(dropdown, document.body);
+  if (!container) return null;
+  return /*#__PURE__*/ReactDOM__default.default.createPortal(dropdown, container);
 });
 TimePickerSpinner.propTypes = spinnerPropTypes;
 TimePickerSpinner.defaultProps = defaultSpinnerProps;

package/package.json

@@ -344,11 +344,11 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "5.1.11",
+  "version": "5.1.12",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",
     "got": "11.8.5"
   },
-  "gitHead": "60bb638a38f0961aff808ea54184360160bc7900"
+  "gitHead": "261d0506c0139a221abedd8f992fa085cba94f5c"
 }

package/umd/carbon-addons-iot-react.js

@@ -267842,6 +267842,10 @@ ${formatRule(Codicon.menuSubmenu)}
       is24hours = _ref2.is24hours,
       amString = _ref2.amString,
       pmString = _ref2.pmString;
+    var _useState15 = React$1.useState(null),
+      _useState16 = _slicedToArray$9(_useState15, 2),
+      container = _useState16[0],
+      setContainer = _useState16[1];
     var currentTime = dayjs_min().format(AVAILABLE_FORMATS);
     var updatedStyle = React$1.useMemo(function () {
       var _style$zIndex;
@@ -267858,20 +267862,25 @@ ${formatRule(Codicon.menuSubmenu)}
     var thirdVal = React$1.useMemo(function () {
       return is24hours ? '' : timeUtils.getMeridiem(value, currentTime, amString, pmString) === amString ? 'AM' : 'PM';
     }, [is24hours, value, currentTime, amString, pmString]);
-    var _useState15 = React$1.useState([firstVal, secondVal, thirdVal]),
-      _useState16 = _slicedToArray$9(_useState15, 2),
-      selected = _useState16[0],
-      setSelected = _useState16[1];
-    var _useState17 = React$1.useState(value),
+    var _useState17 = React$1.useState([firstVal, secondVal, thirdVal]),
       _useState18 = _slicedToArray$9(_useState17, 2),
-      callbackValue = _useState18[0],
-      setCallbackValue = _useState18[1];
-    var _useState19 = React$1.useState(0),
+      selected = _useState18[0],
+      setSelected = _useState18[1];
+    var _useState19 = React$1.useState(value),
       _useState20 = _slicedToArray$9(_useState19, 2),
-      setFocusedSpinner = _useState20[1];
+      callbackValue = _useState20[0],
+      setCallbackValue = _useState20[1];
+    var _useState21 = React$1.useState(0),
+      _useState22 = _slicedToArray$9(_useState21, 2),
+      setFocusedSpinner = _useState22[1];
     var secondSpinnerRef = React$1.useRef();
     var thirdSpinnerRef = React$1.useRef();
     var numberOfSpinners = is24hours ? 2 : 3;
+    React$1.useEffect(function () {
+      var active = document.activeElement; // currently focused element
+      var nearestModal = active === null || active === void 0 ? void 0 : active.closest('.cds--modal');
+      setContainer(nearestModal || document.body);
+    }, []);
     React$1.useEffect(function () {
       setSelected([firstVal, secondVal, thirdVal]);
     }, [firstVal, secondVal, thirdVal]);
@@ -267967,6 +267976,7 @@ ${formatRule(Codicon.menuSubmenu)}
     }, /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [selected[2]]);
     var dropdown = /*#__PURE__*/React$1.createElement("div", {
+      ref: ref,
       "data-testid": testId,
       className: classnames("".concat(iotPrefix$1g, "--time-picker-spinner"), _defineProperty$c({}, "".concat(iotPrefix$1g, "--time-picker-spinner--24h"), is24hours)),
       style: _objectSpread$1i(_objectSpread$1i({}, updatedStyle), {}, {
@@ -267974,7 +267984,8 @@ ${formatRule(Codicon.menuSubmenu)}
         top: "".concat(position[1], "px")
       })
     }, listSpinner1, listSpinner2, is24hours ? null : listSpinner3);
-    return /*#__PURE__*/ReactDOM.createPortal(dropdown, document.body);
+    if (!container) return null;
+    return /*#__PURE__*/ReactDOM.createPortal(dropdown, container);
   });
   TimePickerSpinner.propTypes = spinnerPropTypes;
   TimePickerSpinner.defaultProps = defaultSpinnerProps;
@@ -269996,7 +270007,7 @@ ${formatRule(Codicon.menuSubmenu)}
     hasIconOnly: false,
     menuOffset: undefined,
     datePickerType: 'range',
-    renderInPortal: false,
+    renderInPortal: true,
     useAutoPositioning: false,
     style: {},
     closeOnSelect: true
@@ -270008,96 +270019,148 @@ ${formatRule(Codicon.menuSubmenu)}
       _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
       children = _ref.children;
-    var portalContentRef = React$1.useRef(null); // Reference to the calendar portal content element
-    var _useState = React$1.useState({
+    var _React$useState = React$1.useState(null),
+      _React$useState2 = _slicedToArray$9(_React$useState, 2),
+      container = _React$useState2[0],
+      setContainer = _React$useState2[1];
+    var portalContentRef = React$1.useRef(null);
+    var _React$useState3 = React$1.useState({
         top: 0,
         left: 0
       }),
-      _useState2 = _slicedToArray$9(_useState, 2),
-      position = _useState2[0],
-      setPosition = _useState2[1]; // State to store the position of the calendar portal
-
-    var portalWidth = 316; // Width of the calendar portal
+      _React$useState4 = _slicedToArray$9(_React$useState3, 2),
+      position = _React$useState4[0],
+      setPosition = _React$useState4[1];
+    var portalWidth = 316;
 
+    // Decide container once the anchor exists (modal or body)
+    React$1.useEffect(function () {
+      var anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      if (!anchor) {
+        setContainer(document.body);
+        return;
+      }
+      var modal = anchor.closest('.cds--modal-container');
+      setContainer(modal || document.body);
+    }, [anchorRef, isOpen]);
     var updatePosition = React$1.useCallback(function () {
-      var anchor = anchorRef.current; // Reference to the anchor element
-      var portal = portalContentRef.current; // Reference to the calendar portal content element
-
-      if (!anchor || !portal) return false; // Return early if anchor or portal references are null
-
-      var rect = anchor.getBoundingClientRect(); // Get the bounding client rectangle of the anchor element
-      var scrollY = window.scrollY || document.documentElement.scrollTop; // Get the current scroll position vertically
-      var scrollX = window.scrollX || document.documentElement.scrollLeft; // Get the current scroll position horizontally
+      var anchor = anchorRef.current;
+      var portal = portalContentRef.current;
+      var cont = container;
+      if (!anchor || !portal || !cont) return false;
+      var rect = anchor.getBoundingClientRect();
       var _window = window,
         innerWidth = _window.innerWidth,
-        innerHeight = _window.innerHeight; // Get the inner width and height of the window
-
-      var portalHeight = portal.offsetHeight; // Get the height of the calendar portal content element
-
-      var topSpace = rect.top; // Top space available above the anchor element
-      var bottomSpace = innerHeight - rect.bottom; // Bottom space available below the anchor element
+        innerHeight = _window.innerHeight;
+      var portalHeight = portal.offsetHeight;
+      var inModal = cont !== document.body;
+      var top;
+      var left;
+      if (inModal) {
+        // ----- inside modal: absolute, relative to modal rect -----
+        var modalRect = cont.getBoundingClientRect();
+        var topSpace = rect.top - modalRect.top;
+        var bottomSpace = modalRect.bottom - rect.bottom;
+        var fitsBelow = bottomSpace >= portalHeight;
+        var fitsAbove = topSpace >= portalHeight;
+        top = fitsBelow ? rect.bottom - modalRect.top : fitsAbove ? rect.top - portalHeight - modalRect.top : rect.bottom - portalHeight - modalRect.top;
+        left = rect.right - portalWidth - modalRect.left;
+
+        // clamp within modal width
+        var modalWidth = cont.clientWidth;
+        left = Math.max(0, Math.min(left, modalWidth - portalWidth));
+      } else {
+        // ----- in body: FIXED, relative to viewport (no scroll offsets) -----
+        var _topSpace = rect.top;
+        var _bottomSpace = innerHeight - rect.bottom;
+        var _fitsBelow = _bottomSpace >= portalHeight;
+        var _fitsAbove = _topSpace >= portalHeight;
+        top = _fitsBelow ? rect.bottom : _fitsAbove ? rect.top - portalHeight : Math.max(0, innerHeight - portalHeight);
+        left = rect.right - portalWidth;
+        left = Math.max(0, Math.min(left, innerWidth - portalWidth));
+      }
+      setPosition(function (prev) {
+        return prev.top === top && prev.left === left ? prev : {
+          top: top,
+          left: left
+        };
+      });
+      return true;
+    }, [anchorRef, container]);
 
-      var fitsBelow = bottomSpace >= portalHeight; // Check if the calendar portal fits below the anchor element
-      var fitsAbove = topSpace >= portalHeight; // Check if the calendar portal fits above the anchor element
+    // Run after open + after content lays out
+    React$1.useLayoutEffect(function () {
+      if (!isOpen) return;
+      updatePosition();
+    }, [isOpen, updatePosition]);
 
-      var top = fitsBelow ? rect.bottom + scrollY : fitsAbove ? rect.top + scrollY - portalHeight : Math.max(scrollY, scrollY + rect.bottom - portalHeight); // Calculate the top position of the calendar portal
+    // Reposition on resize/scroll. In modal, listen to modal scroller too.
+    React$1.useEffect(function () {
+      if (!isOpen || !container) return;
+      var inModal = container !== document.body;
+      var modalScroller = inModal ? container.querySelector('.cds--modal-content') || container : null;
+      var onRescroll = function onRescroll() {
+        return updatePosition();
+      };
+      window.addEventListener('resize', onRescroll);
+      window.addEventListener('scroll', onRescroll, {
+        capture: true
+      });
+      if (modalScroller) modalScroller.addEventListener('scroll', onRescroll, {
+        capture: true
+      });
 
-      var left = rect.right - portalWidth + scrollX; // Calculate the left position of the calendar portal
-      left = Math.max(0, Math.min(left, scrollX + innerWidth - portalWidth)); // Ensure the left position is within the viewport
+      // If the calendar's size changes (months switch), keep it stuck to the anchor
+      var ro = new ResizeObserver(onRescroll);
+      if (portalContentRef.current) ro.observe(portalContentRef.current);
 
-      setPosition({
-        top: top,
-        left: left
-      }); // Update the position state
-      return true;
-    });
-    React$1.useEffect(function () {
-      if (isOpen) {
-        var frame = requestAnimationFrame(updatePosition); // Request an animation frame to update the position
-        return function () {
-          return cancelAnimationFrame(frame);
-        }; // Cancel the animation frame when the component unmounts
-      }
-      return undefined;
-    }, [isOpen, updatePosition]); // Depend on the isOpen prop to re-run the effect when it changes
+      // eslint-disable-next-line consistent-return
+      return function () {
+        window.removeEventListener('resize', onRescroll);
+        window.removeEventListener('scroll', onRescroll, {
+          capture: true
+        });
+        if (modalScroller) modalScroller.removeEventListener('scroll', onRescroll, {
+          capture: true
+        });
+        ro.disconnect();
+      };
+    }, [isOpen, container, updatePosition]);
 
+    // Close on outside click
     React$1.useEffect(function () {
+      if (!isOpen) return;
       var handleClickOutside = function handleClickOutside(e) {
-        var anchor = anchorRef.current; // Reference to the anchor element
+        var anchor = anchorRef.current;
         if (portalContentRef.current && !portalContentRef.current.contains(e.target) && anchor && !anchor.contains(e.target)) {
-          onClose(); // Call the onClose callback when clicking outside the calendar portal
+          onClose();
         }
       };
-      window.addEventListener('scroll', updatePosition, true); // Listen for scroll events and update the position
-      window.addEventListener('resize', updatePosition); // Listen for resize events and update the position
-      document.addEventListener('mousedown', handleClickOutside); // Listen for mousedown events and handle click outside the calendar portal
-
+      document.addEventListener('mousedown', handleClickOutside);
+      // eslint-disable-next-line consistent-return
       return function () {
-        window.removeEventListener('scroll', updatePosition, true); // Remove the scroll event listener
-        window.removeEventListener('resize', updatePosition); // Remove the resize event listener
-        document.removeEventListener('mousedown', handleClickOutside); // Remove the click outside event listener
+        return document.removeEventListener('mousedown', handleClickOutside);
       };
-    }, [anchorRef, onClose, updatePosition]); // Depend on the anchorRef and onClose props to re-run the effect when they change
-
-    if (!isOpen) return null; // Return null if the calendar portal is not open
-
+    }, [isOpen, onClose, anchorRef]);
+    if (!isOpen || !container) return null;
+    var inModal = container !== document.body;
+    var stylePosition = inModal ? 'absolute' : 'fixed';
     return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React$1.createElement("div", {
       ref: portalContentRef,
       className: "datetime-picker-portal",
       style: {
-        position: 'absolute',
-        top: "".concat(position.top, "px"),
-        left: "".concat(position.left, "px"),
-        width: "".concat(portalWidth, "px"),
+        position: stylePosition,
+        top: position.top,
+        left: position.left,
+        width: portalWidth,
         backgroundColor: 'white',
-        padding: '10px',
+        padding: 10,
         zIndex: 9999,
         overflowY: 'auto',
         overflowX: 'hidden',
-        maxHeight: '400px'
+        maxHeight: 400
       }
-    }, children), document.body // Attach the calendar portal to the document body
-    );
+    }, children), container);
   };
   var DateTimePicker$2 = function DateTimePicker(_ref2) {
     var _style$zIndex2;
@@ -270129,6 +270192,7 @@ ${formatRule(Codicon.menuSubmenu)}
       style = _ref2.style,
       closeOnSelect = _ref2.closeOnSelect,
       others = _objectWithoutProperties$3(_ref2, _excluded$C);
+    console.log(renderInPortal);
     var id = React$1.useRef(others.id || v4()).current;
     React$1.useEffect(function () {
       {
@@ -270161,34 +270225,34 @@ ${formatRule(Codicon.menuSubmenu)}
       customRangeKind = _useDateTimePickerRan2[0],
       setCustomRangeKind = _useDateTimePickerRan2[1],
       onCustomRangeChange = _useDateTimePickerRan2[2];
-    var _useState3 = React$1.useState(false),
+    var _useState = React$1.useState(false),
+      _useState2 = _slicedToArray$9(_useState, 2),
+      isCustomRange = _useState2[0],
+      setIsCustomRange = _useState2[1];
+    var _useState3 = React$1.useState(null),
       _useState4 = _slicedToArray$9(_useState3, 2),
-      isCustomRange = _useState4[0],
-      setIsCustomRange = _useState4[1];
+      selectedPreset = _useState4[0],
+      setSelectedPreset = _useState4[1];
     var _useState5 = React$1.useState(null),
       _useState6 = _slicedToArray$9(_useState5, 2),
-      selectedPreset = _useState6[0],
-      setSelectedPreset = _useState6[1];
+      currentValue = _useState6[0],
+      setCurrentValue = _useState6[1];
     var _useState7 = React$1.useState(null),
       _useState8 = _slicedToArray$9(_useState7, 2),
-      currentValue = _useState8[0],
-      setCurrentValue = _useState8[1];
+      lastAppliedValue = _useState8[0],
+      setLastAppliedValue = _useState8[1];
     var _useState9 = React$1.useState(null),
       _useState10 = _slicedToArray$9(_useState9, 2),
-      lastAppliedValue = _useState10[0],
-      setLastAppliedValue = _useState10[1];
-    var _useState11 = React$1.useState(null),
+      humanValue = _useState10[0],
+      setHumanValue = _useState10[1];
+    var _useState11 = React$1.useState(false),
       _useState12 = _slicedToArray$9(_useState11, 2),
-      humanValue = _useState12[0],
-      setHumanValue = _useState12[1];
-    var _useState13 = React$1.useState(false),
+      defaultTimeValueUpdate = _useState12[0],
+      setDefaultTimeValueUpdate = _useState12[1];
+    var _useState13 = React$1.useState(invalid),
       _useState14 = _slicedToArray$9(_useState13, 2),
-      defaultTimeValueUpdate = _useState14[0],
-      setDefaultTimeValueUpdate = _useState14[1];
-    var _useState15 = React$1.useState(invalid),
-      _useState16 = _slicedToArray$9(_useState15, 2),
-      invalidState = _useState16[0],
-      setInvalidState = _useState16[1];
+      invalidState = _useState14[0],
+      setInvalidState = _useState14[1];
     var relativeSelect = React$1.useRef(null);
     var containerRef = React$1.useRef();
     var dropdownRef = React$1.useRef();
@@ -270229,34 +270293,34 @@ ${formatRule(Codicon.menuSubmenu)}
       onNavigateRadioButton = _useDateTimePickerKey.onNavigateRadioButton,
       onNavigatePresets = _useDateTimePickerKey.onNavigatePresets,
       onFieldClick = _useDateTimePickerKey.onFieldClick;
+    var _useState15 = React$1.useState(null),
+      _useState16 = _slicedToArray$9(_useState15, 2),
+      singleDateValue = _useState16[0],
+      setSingleDateValue = _useState16[1];
     var _useState17 = React$1.useState(null),
       _useState18 = _slicedToArray$9(_useState17, 2),
-      singleDateValue = _useState18[0],
-      setSingleDateValue = _useState18[1];
+      singleTimeValue = _useState18[0],
+      setSingleTimeValue = _useState18[1];
     var _useState19 = React$1.useState(null),
       _useState20 = _slicedToArray$9(_useState19, 2),
-      singleTimeValue = _useState20[0],
-      setSingleTimeValue = _useState20[1];
+      rangeStartTimeValue = _useState20[0],
+      setRangeStartTimeValue = _useState20[1];
     var _useState21 = React$1.useState(null),
       _useState22 = _slicedToArray$9(_useState21, 2),
-      rangeStartTimeValue = _useState22[0],
-      setRangeStartTimeValue = _useState22[1];
-    var _useState23 = React$1.useState(null),
+      rangeEndTimeValue = _useState22[0],
+      setRangeEndTimeValue = _useState22[1];
+    var _useState23 = React$1.useState(false),
       _useState24 = _slicedToArray$9(_useState23, 2),
-      rangeEndTimeValue = _useState24[0],
-      setRangeEndTimeValue = _useState24[1];
+      invalidRangeStartTime = _useState24[0],
+      setInvalidRangeStartTime = _useState24[1];
     var _useState25 = React$1.useState(false),
       _useState26 = _slicedToArray$9(_useState25, 2),
-      invalidRangeStartTime = _useState26[0],
-      setInvalidRangeStartTime = _useState26[1];
+      invalidRangeEndTime = _useState26[0],
+      setInvalidRangeEndTime = _useState26[1];
     var _useState27 = React$1.useState(false),
       _useState28 = _slicedToArray$9(_useState27, 2),
-      invalidRangeEndTime = _useState28[0],
-      setInvalidRangeEndTime = _useState28[1];
-    var _useState29 = React$1.useState(false),
-      _useState30 = _slicedToArray$9(_useState29, 2),
-      invalidRangeStartDate = _useState30[0],
-      setInvalidRangeStartDate = _useState30[1];
+      invalidRangeStartDate = _useState28[0],
+      setInvalidRangeStartDate = _useState28[1];
     var dateTimePickerBaseValue = {
       kind: '',
       preset: {
@@ -271365,7 +271429,7 @@ ${formatRule(Codicon.menuSubmenu)}
       },
       "renderInPortal": {
         "defaultValue": {
-          "value": "false",
+          "value": "true",
           "computed": false
         },
         "description": "If set to true it will render outside of the current DOM in a portal, otherwise render as a child",