@equinor/eds-core-react/dist/esm/components/Datepicker/fields/DateRangeField.js

The React implementation of the Equinor Design System

import { forwardRef, useRef } from 'react';
import { InputFieldWrapper } from './FieldWrapper.js';
import { DateFieldSegments } from './DateFieldSegments.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Typography } from '../../Typography/Typography.js';

/**
 * DateRangeField is the input field used in {@link DateRangePicker} to type in a date range.
 */
const DateRangeField = /*#__PURE__*/forwardRef(function (props, ref) {
  const fromRef = useRef(null);
  const toRef = useRef(null);
  return /*#__PURE__*/jsxs(InputFieldWrapper, {
    ref: ref,
    readonly: props.startFieldProps.isReadOnly,
    className: "field",
    disabled: props.disabled,
    color: props.variant,
    ...props.groupProps,
    children: [/*#__PURE__*/jsx(DateFieldSegments, {
      ...props.startFieldProps,
      ref: fromRef,
      locale: props.locale
    }), /*#__PURE__*/jsx(Typography, {
      as: 'span',
      variant: 'text',
      group: 'input',
      style: {
        padding: '0 4px'
      },
      children: "\u2014"
    }), /*#__PURE__*/jsx(DateFieldSegments, {
      ...props.endFieldProps,
      ref: toRef,
      locale: props.locale
    }), /*#__PURE__*/jsx("span", {
      style: {
        flex: '1 1 auto'
      }
    }), props.rightAdornments]
  });
});
DateRangeField.displayName = 'DateRangeField';

export { DateRangeField };