@atlaskit/datetime-picker/dist/cjs/internal/fixed-layer-menu-top-layer.js

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

/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FixedLayerMenuTopLayer = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _components = require("@atlaskit/react-select/components");
var _index = require("@atlaskit/top-layer/placement-map/index");
var _popover = require("@atlaskit/top-layer/popover/popover");
var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
var _useAnchoredPopover = require("@atlaskit/top-layer/use-anchored-popover");
var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * Bottom-start placement: time options menu appears below and aligned to the
 * start edge of the trigger (the select input).
 */
var popupPlacement = (0, _index.fromLegacyPlacement)({
  legacy: 'bottom-start'
});

/**
 * Top-layer version of the fixed layer menu used in the time picker.
 *
 * Uses `Popover` + `useAnchoredPopover` so the time options list renders
 * in the browser's top layer via the native Popover API and is positioned
 * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
 * and portal-based layering.
 *
 * Gated behind the `platform-dst-top-layer` feature flag.
 */
var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
  var _selectProps$fixedLay, _selectProps$fixedLay2;
  var className = _ref.className,
    clearValue = _ref.clearValue,
    cx = _ref.cx,
    getStyles = _ref.getStyles,
    getValue = _ref.getValue,
    hasValue = _ref.hasValue,
    innerProps = _ref.innerProps,
    innerRef = _ref.innerRef,
    isLoading = _ref.isLoading,
    isMulti = _ref.isMulti,
    isRtl = _ref.isRtl,
    maxMenuHeight = _ref.maxMenuHeight,
    menuPlacement = _ref.menuPlacement,
    menuPosition = _ref.menuPosition,
    menuShouldScrollIntoView = _ref.menuShouldScrollIntoView,
    minMenuHeight = _ref.minMenuHeight,
    options = _ref.options,
    placement = _ref.placement,
    selectOption = _ref.selectOption,
    selectProps = _ref.selectProps,
    setValue = _ref.setValue,
    children = _ref.children,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  // The select's container element is the anchor for the popup.
  var triggerRef = (0, _react.useRef)((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
  triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
  var popoverRef = (0, _react.useRef)(null);
  (0, _useAnchoredPopover.useAnchoredPopover)({
    anchorRef: triggerRef,
    popoverRef: popoverRef,
    placement: popupPlacement,
    // The Popover is rendered with `isOpen` always true while this
    // component is mounted (react-select conditionally mounts/unmounts
    // the menu), so positioning is always active.
    isOpen: true
  });
  return /*#__PURE__*/React.createElement(_popover.Popover, {
    ref: popoverRef,
    role: "listbox",
    isOpen: true
    // `mode="manual"` opts out of the native popover light-dismiss
    // (Esc / click-outside). react-select already owns those: opening
    // the menu via a click on the input that lives outside the popover
    // element triggers the browser's auto-dismiss as that very click
    // bubbles, slamming the menu shut before the user sees it. With
    // `manual`, react-select's existing onMenuClose / outside-click
    // logic remains the single source of truth.
    ,
    mode: "manual",
    placement: popupPlacement,
    shouldAnimate: true,
    testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
  }, /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement(_components.components.Menu, (0, _extends2.default)({}, rest, {
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
    className: className,
    clearValue: clearValue,
    cx: cx,
    getStyles: getStyles,
    getValue: getValue,
    hasValue: hasValue,
    innerProps: innerProps,
    innerRef: innerRef,
    isLoading: isLoading,
    isMulti: isMulti,
    isRtl: isRtl,
    maxMenuHeight: maxMenuHeight,
    menuPlacement: menuPlacement,
    menuPosition: menuPosition,
    menuShouldScrollIntoView: false || menuShouldScrollIntoView,
    minMenuHeight: minMenuHeight,
    options: options,
    placement: placement,
    selectOption: selectOption,
    selectProps: selectProps,
    setValue: setValue
  }), children)));
};