import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useId, isValidElement } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { t as textFieldStyles } from './TextField.module-MRVo1X9H.js';
import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
import { F as FieldLabel } from './FieldLabel-DZWu5dMp.js';
import { I as Icon } from './Icon-BMMbp40n.js';
import { Y as YearlessDateInputWithPicker } from './YearlessDateInputWithPicker-DyytWt0x.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
import { H as Helper } from './Helper-DtDeaYTn.js';

import './DateFieldYearlessRange.css';const dateFieldYearlessRangeStyles = {
	"range-row": "_range-row_vmodf_1",
	"range-root": "_range-root_vmodf_11",
	"sr-only": "_sr-only_vmodf_22"
};

const SvgArrowForward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }));

const DateFieldYearlessRange = (props) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    label,
    moreInfo,
    size,
    hideLabel = false,
    required,
    id: idProp,
    legendProps,
    errorAriaLive: _errorAriaLive,
    onFocus: onFocusProp,
    onBlur: onBlurProp,
    error,
    warning,
    disabled,
    disableHint,
    description,
    mode = "mm/dd",
    startLabel = "Start date",
    endLabel = "End date",
    disablePicker
  } = componentProps;
  const [value, setValue] = useOptionallyControlledState({
    controlledValue: props.value,
    defaultValue: props.defaultValue,
    onChange: props.onChange
  });
  const labelUid = useId();
  const id = idProp ?? labelUid;
  const helperUid = useId();
  const moreInfoUid = useId();
  warnDeprecatedErrorUsage("DateFieldYearlessRange", error);
  const errorMessages = typeof error === "boolean" || error === void 0 ? void 0 : error;
  const handleStartDateChange = (startDate) => {
    setValue({
      ...value,
      startDate
    });
  };
  const handleEndDateChange = (endDate) => {
    setValue({
      ...value,
      endDate
    });
  };
  const ariaDescribedBy = [helperUid, moreInfo && moreInfoUid].filter(Boolean).join(" ");
  return /* @__PURE__ */ jsxs(
    "fieldset",
    {
      className: cx(
        textFieldStyles["textfield"],
        dateFieldYearlessRangeStyles["range-root"]
      ),
      "data-anv": "date-field-yearless-range",
      style: layoutStyles,
      children: [
        /* @__PURE__ */ jsx(
          FieldLabel,
          {
            el: "legend",
            moreInfo,
            moreInfoId: moreInfo ? moreInfoUid : void 0,
            required,
            ...legendProps,
            className: cx(
              legendProps?.className,
              hideLabel ? dateFieldYearlessRangeStyles["sr-only"] : void 0
            ),
            children: label
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: dateFieldYearlessRangeStyles["range-row"], children: [
          /* @__PURE__ */ jsx(
            FieldLabel,
            {
              htmlFor: id + "-start",
              className: dateFieldYearlessRangeStyles["sr-only"],
              children: startLabel
            }
          ),
          /* @__PURE__ */ jsx(
            YearlessDateInputWithPicker,
            {
              id: id + "-start",
              size,
              error: !!error,
              required,
              disabled,
              mode,
              value: value?.startDate,
              onChange: (change) => handleStartDateChange(change.value),
              "aria-describedby": ariaDescribedBy,
              disablePicker,
              onFocus: onFocusProp,
              onBlur: onBlurProp
            }
          ),
          /* @__PURE__ */ jsx(
            Icon,
            {
              svg: SvgArrowForward,
              className: dateFieldYearlessRangeStyles["range-arrow"]
            }
          ),
          /* @__PURE__ */ jsx(
            FieldLabel,
            {
              htmlFor: id + "-end",
              className: dateFieldYearlessRangeStyles["sr-only"],
              children: endLabel
            }
          ),
          /* @__PURE__ */ jsx(
            YearlessDateInputWithPicker,
            {
              id: id + "-end",
              size,
              error: !!error,
              required,
              disabled,
              mode,
              value: value?.endDate,
              onChange: (change) => handleEndDateChange(change.value),
              "aria-labelledby": labelUid,
              "aria-describedby": ariaDescribedBy,
              disablePicker,
              onFocus: onFocusProp,
              onBlur: onBlurProp
            }
          )
        ] }),
        !disableHint || errorMessages || warning || description ? /* @__PURE__ */ jsx(
          Helper,
          {
            id: helperUid,
            hint: disableHint ? void 0 : `Format: ${mode}`,
            showCounter: false,
            error: typeof errorMessages === "string" || Array.isArray(errorMessages) ? errorMessages : void 0,
            warning,
            errorMessage: isValidElement(errorMessages) ? errorMessages : void 0,
            description
          }
        ) : null
      ]
    }
  );
};

export { DateFieldYearlessRange as D };
//# sourceMappingURL=DateFieldYearlessRange-C5ktVUgG.js.map
