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

The React implementation of the Equinor Design System

import { useDateFieldState } from '@react-stately/datepicker';
import { useDateField } from 'react-aria';
import { createCalendar } from '@internationalized/date';
import { DateSegment } from './DateSegment.js';
import { forwardRef } from 'react';
import { jsx } from 'react/jsx-runtime';

// In some cases we need to use the index as key
/* eslint-disable react/no-array-index-key */
/**
 * A field that wraps segments for inputting a date / date-time
 */
const DateFieldSegments = /*#__PURE__*/forwardRef((props, ref) => {
  const state = useDateFieldState({
    ...props,
    locale: props.locale,
    createCalendar
  });
  const {
    fieldProps
  } = useDateField({
    ...props,
    // Type-casting as react-aria expects string | ReactNode, but we only pass strings
    'aria-label': props.label ?? 'Date input field'
  }, state, ref);
  return /*#__PURE__*/jsx("div", {
    ...fieldProps,
    style: {
      display: 'flex'
    },
    ref: ref,
    children: state.segments.map((segment, i) => /*#__PURE__*/jsx(DateSegment, {
      segment: segment,
      state: state
    }, i))
  });
});
DateFieldSegments.displayName = 'SingleDateField';

export { DateFieldSegments };