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

The React implementation of the Equinor Design System

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

/**
 * DateField is the input field used in {@link DatePicker} to type in a single date.
 * Encapsulates styling / functionality for typing a date
 */
const DateField = /*#__PURE__*/forwardRef(function ({
  fieldProps,
  groupProps,
  variant,
  dateCreateProps,
  ...props
}, ref) {
  const state = useDateFieldState(dateCreateProps);
  const inputRef = useRef(null);
  return /*#__PURE__*/jsxs(InputFieldWrapper, {
    ...groupProps,
    readonly: fieldProps.isReadOnly,
    disabled: state.isDisabled,
    color: state.isInvalid ? 'warning' : variant,
    ref: ref,
    className: `field ${state.isInvalid ? 'invalid' : 'valid'}`,
    children: [/*#__PURE__*/jsx(DateFieldSegments, {
      ...state,
      ...fieldProps,
      locale: dateCreateProps.locale,
      ref: inputRef
    }), /*#__PURE__*/jsx("span", {
      style: {
        flex: '1 1 auto'
      }
    }), props.rightAdornments]
  });
});
DateField.displayName = 'DateField';

export { DateField };