@atlaskit/datetime-picker/dist/esm/internal/fixed-layer.js

A date time picker allows the user to select an associated date and time.

/* fixed-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./fixed-layer.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
import React from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { sizes } from '@atlaskit/icon/constants/default';
import { Manager } from '@atlaskit/popper/manager';
import { Popper } from '@atlaskit/popper/main';
import { Reference } from '@atlaskit/popper/reference';
var styles = {
  root: "_bfhk1j28 _kqswstnw _152tze3t",
  popperStyles: "_1pbyowjs"
};
/**
 * This component renders layered content with fixed positioning.
 * Scroll is locked outside the layer to prevent the layered content from detaching from the
 * container ref.
 */
// eslint-disable-next-line @repo/internal/react/no-class-components
var FixedLayer = /*#__PURE__*/function (_React$Component) {
  function FixedLayer() {
    var _this;
    _classCallCheck(this, FixedLayer);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, FixedLayer, [].concat(args));
    _defineProperty(_this, "update", noop);
    return _this;
  }
  _inherits(FixedLayer, _React$Component);
  return _createClass(FixedLayer, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.inputValue !== this.props.inputValue) {
        this.update();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props = this.props,
        containerRef = _this$props.containerRef,
        content = _this$props.content,
        testId = _this$props.testId;

      // Wait for containerRef callback to cause a re-render
      if (!containerRef) {
        return /*#__PURE__*/React.createElement("div", null);
      }
      var divStyles = {
        height: containerRef.getBoundingClientRect().height,
        // Don't block the clear button
        width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - 8
      };
      return (
        /*#__PURE__*/
        /* Need to wrap layer in a fixed position div so that it will render its content as fixed
         * We need to set the intial top value to where the container is and zIndex so that it still
         * applies since we're creating a new stacking context. */
        React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref) {
          var ref = _ref.ref;
          return /*#__PURE__*/React.createElement("div", {
            ref: ref,
            "data-layer-child": true,
            style: divStyles,
            className: ax([styles.root])
          });
        }), /*#__PURE__*/React.createElement(Popper, null, function (_ref2) {
          var ref = _ref2.ref,
            style = _ref2.style,
            update = _ref2.update;
          _this2.update = update;
          return /*#__PURE__*/React.createElement("div", {
            ref: ref,
            style: style,
            "data-testid": testId && "".concat(testId, "--popper--container"),
            className: ax([styles.popperStyles])
          }, content);
        }))
      );
    }
  }]);
}(React.Component);
export { FixedLayer as default };