@atlaskit/datetime-picker/dist/es2019/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 _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./fixed-layer.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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';
const 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
export default class FixedLayer extends React.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "update", noop);
  }
  componentDidUpdate(prevProps) {
    if (prevProps.inputValue !== this.props.inputValue) {
      this.update();
    }
  }
  render() {
    const {
      containerRef,
      content,
      testId
    } = this.props;

    // Wait for containerRef callback to cause a re-render
    if (!containerRef) {
      return /*#__PURE__*/React.createElement("div", null);
    }
    const 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, ({
        ref
      }) => /*#__PURE__*/React.createElement("div", {
        ref: ref,
        "data-layer-child": true,
        style: divStyles,
        className: ax([styles.root])
      })), /*#__PURE__*/React.createElement(Popper, null, ({
        ref,
        style,
        update
      }) => {
        this.update = update;
        return /*#__PURE__*/React.createElement("div", {
          ref: ref,
          style: style,
          "data-testid": testId && `${testId}--popper--container`,
          className: ax([styles.popperStyles])
        }, content);
      }))
    );
  }
}