@grafana/ui/dist/cjs/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var react = require('@floating-ui/react');
var React = require('react');
var data = require('@grafana/data');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var floating = require('../../../utils/floating.cjs');
var Input = require('../../Input/Input.cjs');
var DatePicker = require('../DatePicker/DatePicker.cjs');

"use strict";
const formatDate = (date) => data.dateTime(date).format("L");
const DatePickerWithInput = React.forwardRef(
  ({ value, minDate, maxDate, onChange, closeOnSelect, placeholder = "Date", ...rest }, ref) => {
    const [open, setOpen] = React.useState(false);
    const styles = ThemeContext.useStyles2(getStyles);
    const placement = "bottom-start";
    const middleware = floating.getPositioningMiddleware(placement);
    const { context, refs, floatingStyles } = react.useFloating({
      open,
      placement,
      onOpenChange: setOpen,
      middleware,
      whileElementsMounted: react.autoUpdate,
      strategy: "fixed"
    });
    const click = react.useClick(context);
    const dismiss = react.useDismiss(context);
    const { getReferenceProps, getFloatingProps } = react.useInteractions([dismiss, click]);
    React.useImperativeHandle(ref, () => refs.domReference.current, [
      refs.domReference
    ]);
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        Input.Input,
        {
          ref: refs.setReference,
          type: "text",
          autoComplete: "off",
          placeholder,
          value: value ? formatDate(value) : value,
          onChange: (ev) => {
            if (ev.target.value === "") {
              onChange("");
            }
          },
          className: styles.input,
          ...rest,
          ...getReferenceProps()
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.popover, ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: /* @__PURE__ */ jsxRuntime.jsx(
        DatePicker.DatePicker,
        {
          isOpen: open,
          value: value && typeof value !== "string" ? value : data.dateTime().toDate(),
          minDate,
          maxDate,
          onChange: (ev) => {
            onChange(ev);
            if (closeOnSelect) {
              setOpen(false);
            }
          },
          onClose: () => setOpen(false)
        }
      ) })
    ] });
  }
);
DatePickerWithInput.displayName = "DatePickerWithInput";
const getStyles = (theme) => {
  return {
    container: css.css({
      position: "relative"
    }),
    input: css.css({
      /* hides the native Calendar picker icon given when using type=date */
      "input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator": {
        display: "none",
        WebkitAppearance: "none"
      }
    }),
    popover: css.css({
      zIndex: theme.zIndex.tooltip
    })
  };
};

exports.DatePickerWithInput = DatePickerWithInput;
//# sourceMappingURL=DatePickerWithInput.cjs.map