@react-spectrum/labeledvalue 3.1.18 → 3.2.0

package/dist/LabeledValue.main.js

@@ -1,4 +1,4 @@
-require("./vars.b904ab57.css");
+require("./vars.6c953d9a.css");
 var $eb2fc0ee655eff6b$exports = require("./fieldlabel_vars_css.main.js");
 var $lcZyr$internationalizeddate = require("@internationalized/date");
 var $lcZyr$reactspectrumutils = require("@react-spectrum/utils");
@@ -34,9 +34,14 @@ $parcel$export(module.exports, "LabeledValue", () => $2a7417c2df2197f7$export$d1
 
 
 
-function $2a7417c2df2197f7$var$LabeledValue(props, ref) {
+const $2a7417c2df2197f7$export$d1328f67a56fa517 = /*#__PURE__*/ (0, ($parcel$interopDefault($lcZyr$react))).forwardRef(function LabeledValue(props, ref) {
     let { value: value, formatOptions: formatOptions } = props;
     let domRef = (0, $lcZyr$reactspectrumutils.useDOMRef)(ref);
+    (0, $lcZyr$react.useEffect)(()=>{
+        if ((domRef === null || domRef === void 0 ? void 0 : domRef.current) && domRef.current.querySelectorAll('input, [contenteditable], textarea').length > 0) throw new Error('LabeledValue cannot contain an editable value.');
+    }, [
+        domRef
+    ]);
     let children;
     if (Array.isArray(value)) children = /*#__PURE__*/ (0, ($parcel$interopDefault($lcZyr$react))).createElement($2a7417c2df2197f7$var$FormattedStringList, {
         value: value,
@@ -59,6 +64,7 @@ function $2a7417c2df2197f7$var$LabeledValue(props, ref) {
         formatOptions: formatOptions
     });
     if (typeof value === 'string') children = value;
+    if (/*#__PURE__*/ (0, ($parcel$interopDefault($lcZyr$react))).isValidElement(value)) children = value;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($lcZyr$react))).createElement((0, $lcZyr$reactspectrumlabel.Field), {
         ...props,
         wrapperProps: (0, $lcZyr$reactariautils.filterDOMProps)(props),
@@ -66,7 +72,7 @@ function $2a7417c2df2197f7$var$LabeledValue(props, ref) {
         elementType: "span",
         wrapperClassName: (0, $lcZyr$reactspectrumutils.classNames)((0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))), 'spectrum-LabeledValue')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($lcZyr$react))).createElement("span", null, children));
-}
+});
 function $2a7417c2df2197f7$var$FormattedStringList(props) {
     let stringFormatter = (0, $lcZyr$reactariai18n.useListFormatter)(props.formatOptions);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($lcZyr$react))).createElement((0, ($parcel$interopDefault($lcZyr$react))).Fragment, null, stringFormatter.format(props.value));
@@ -128,9 +134,6 @@ function $2a7417c2df2197f7$var$convertValue(value) {
     let date = (0, $lcZyr$internationalizeddate.today)((0, $lcZyr$internationalizeddate.getLocalTimeZone)());
     return (0, $lcZyr$internationalizeddate.toCalendarDateTime)(date, value);
 }
-/**
- * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
- */ let $2a7417c2df2197f7$export$d1328f67a56fa517 = /*#__PURE__*/ (0, ($parcel$interopDefault($lcZyr$react))).forwardRef($2a7417c2df2197f7$var$LabeledValue);
 
 
 //# sourceMappingURL=LabeledValue.main.js.map

package/dist/LabeledValue.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CalendarDate, CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, ZonedDateTime} from '@internationalized/date';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {filterDOMProps} from '@react-aria/utils';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport React, {ReactNode} from 'react';\nimport {useDateFormatter, useListFormatter, useNumberFormatter} from '@react-aria/i18n';\n\n// NOTE: the types here need to be synchronized with the ones in docs/types.ts, which are simpler so the documentation generator can handle them.\n\nexport interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, DOMProps {\n  /** The content to display as the label. */\n  label: ReactNode\n}\n\ntype NumberValue = number | RangeValue<number>;\ninterface NumberProps<T extends NumberValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.NumberFormatOptions\n}\n\nexport type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;\ntype RangeDateTime = RangeValue<DateTime>;\ntype DateTimeValue = DateTime | RangeDateTime;\ninterface DateProps<T extends DateTimeValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.DateTimeFormatOptions\n}\n\ninterface StringProps<T extends string> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: never\n}\n\ninterface StringListProps<T extends string[]> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.ListFormatOptions\n}\n\ntype LabeledValueProps<T> =\n  T extends NumberValue ? NumberProps<T> :\n  T extends DateTimeValue ? DateProps<T> :\n  T extends string[] ? StringListProps<T> :\n  T extends string ? StringProps<T> :\n  never;\n\ntype SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime>;\nexport type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;\n\nfunction LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {\n  let {\n    value,\n    formatOptions\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let children;\n  if (Array.isArray(value)) {\n    children = <FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start === 'number' && typeof value.end === 'number') {\n    children = <FormattedNumber value={value as NumberValue} formatOptions={formatOptions as Intl.NumberFormatOptions}  />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start !== 'number' && typeof value.end !== 'number') {\n    children = <FormattedDate value={value as DateTimeValue} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'number') {\n    children = <FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && ('calendar' in value || 'hour' in value) || (value instanceof Date)) {\n    children = <FormattedDate value={value} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'string') {\n    children = value;\n  }\n\n  return (\n    <Field {...props as any} wrapperProps={filterDOMProps(props as any)} ref={domRef} elementType=\"span\" wrapperClassName={classNames(labelStyles, 'spectrum-LabeledValue')}>\n      <span>{children}</span>\n    </Field>\n  );\n}\n\nfunction FormattedStringList<T extends string[]>(props: StringListProps<T>) {\n  let stringFormatter = useListFormatter(props.formatOptions);\n\n  return (\n    <>{stringFormatter.format(props.value)}</>\n  );\n}\n\nfunction FormattedNumber<T extends NumberValue>(props: NumberProps<T>) {\n  let numberFormatter = useNumberFormatter(props.formatOptions);\n  let value = props.value;\n\n  if (typeof value === 'object') {\n    return <>{numberFormatter.formatRange(value.start, value.end)}</>;\n  }\n\n  return <>{numberFormatter.format(value)}</>;\n}\n\nfunction FormattedDate<T extends DateTimeValue>(props: DateProps<T>) {\n  let {value, formatOptions} = props;\n  if (!formatOptions) {\n    formatOptions = getDefaultFormatOptions('start' in value ? value.start : value);\n  }\n\n  let dateFormatter = useDateFormatter(formatOptions);\n  let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();\n  let final: Date;\n\n  if ('start' in value && 'end' in value) {\n    let start = value.start;\n    let end = value.end;\n\n    start = convertDateTime(start, timeZone);\n    end = convertDateTime(end, timeZone);\n\n    return <>{dateFormatter.formatRange(start, end)}</>;\n  }\n\n  final = convertDateTime(value, timeZone);\n  return <>{dateFormatter.format(final)}</>;\n}\n\nfunction convertDateTime(value: DateTime, timeZone: any) {\n  if ('timeZone' in value) {\n    return value.toDate();\n  } else if ('calendar' in value) {\n    return value.toDate(timeZone);\n  } else if (!(value instanceof Date)) {\n    return convertValue(value).toDate(timeZone);\n  }\n\n  return value;\n}\n\nfunction getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {\n  if (value instanceof Date) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('timeZone' in value) {\n    return {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: value.timeZone, timeZoneName: 'short'};\n  } else if ('hour' in value && 'year' in value) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('hour' in value) {\n    return {timeStyle: 'short'};\n  } else {\n    return {dateStyle: 'long'};\n  }\n}\n\nfunction convertValue(value: Time) {\n  let date = today(getLocalTimeZone());\n\n  return toCalendarDateTime(date, value);\n}\n\n/**\n * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.\n */\nlet _LabeledValue = React.forwardRef(LabeledValue);\nexport {_LabeledValue as LabeledValue};\n"],"names":[],"version":3,"file":"LabeledValue.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CalendarDate, CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, ZonedDateTime} from '@internationalized/date';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {filterDOMProps} from '@react-aria/utils';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport React, {ReactElement, ReactNode, useEffect} from 'react';\nimport {useDateFormatter, useListFormatter, useNumberFormatter} from '@react-aria/i18n';\n\n// NOTE: the types here need to be synchronized with the ones in docs/types.ts, which are simpler so the documentation generator can handle them.\n\nexport interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, DOMProps {\n  /** The content to display as the label. */\n  label: ReactNode\n}\n\ntype NumberValue = number | RangeValue<number>;\ninterface NumberProps<T extends NumberValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.NumberFormatOptions\n}\n\nexport type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;\ntype RangeDateTime = RangeValue<DateTime>;\ntype DateTimeValue = DateTime | RangeDateTime;\ninterface DateProps<T extends DateTimeValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.DateTimeFormatOptions\n}\n\ninterface StringProps<T extends string> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: never\n}\n\ninterface StringListProps<T extends string[]> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.ListFormatOptions\n}\n\ninterface ReactElementProps<T extends ReactElement> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: never\n}\n\ntype LabeledValueProps<T> =\n  T extends NumberValue ? NumberProps<T> :\n  T extends DateTimeValue ? DateProps<T> :\n  T extends string[] ? StringListProps<T> :\n  T extends string ? StringProps<T> :\n  T extends ReactElement ? ReactElementProps<T> :\n  never;\n\ntype SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactElement;\nexport type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;\n\n/**\n * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.\n */\nexport const LabeledValue = React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {\n  let {\n    value,\n    formatOptions\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  useEffect(() => {\n    if (\n      domRef?.current &&\n      domRef.current.querySelectorAll('input, [contenteditable], textarea')\n        .length > 0\n    ) {\n      throw new Error('LabeledValue cannot contain an editable value.');\n    }\n  }, [domRef]);\n  \n\n  let children;\n  if (Array.isArray(value)) {\n    children = <FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start === 'number' && typeof value.end === 'number') {\n    children = <FormattedNumber value={value as NumberValue} formatOptions={formatOptions as Intl.NumberFormatOptions}  />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start !== 'number' && typeof value.end !== 'number') {\n    children = <FormattedDate value={value as DateTimeValue} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'number') {\n    children = <FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && ('calendar' in value || 'hour' in value) || (value instanceof Date)) {\n    children = <FormattedDate value={value} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'string') {\n    children = value;\n  }\n\n  if (React.isValidElement(value)) {\n    children = value;\n  }\n\n  return (\n    <Field {...props as any} wrapperProps={filterDOMProps(props as any)} ref={domRef} elementType=\"span\" wrapperClassName={classNames(labelStyles, 'spectrum-LabeledValue')}>\n      <span>{children}</span>\n    </Field>\n  );\n});\n\nfunction FormattedStringList<T extends string[]>(props: StringListProps<T>) {\n  let stringFormatter = useListFormatter(props.formatOptions);\n\n  return (\n    <>{stringFormatter.format(props.value)}</>\n  );\n}\n\nfunction FormattedNumber<T extends NumberValue>(props: NumberProps<T>) {\n  let numberFormatter = useNumberFormatter(props.formatOptions);\n  let value = props.value;\n\n  if (typeof value === 'object') {\n    return <>{numberFormatter.formatRange(value.start, value.end)}</>;\n  }\n\n  return <>{numberFormatter.format(value)}</>;\n}\n\nfunction FormattedDate<T extends DateTimeValue>(props: DateProps<T>) {\n  let {value, formatOptions} = props;\n  if (!formatOptions) {\n    formatOptions = getDefaultFormatOptions('start' in value ? value.start : value);\n  }\n\n  let dateFormatter = useDateFormatter(formatOptions);\n  let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();\n  let final: Date;\n\n  if ('start' in value && 'end' in value) {\n    let start = value.start;\n    let end = value.end;\n\n    start = convertDateTime(start, timeZone);\n    end = convertDateTime(end, timeZone);\n\n    return <>{dateFormatter.formatRange(start, end)}</>;\n  }\n\n  final = convertDateTime(value, timeZone);\n  return <>{dateFormatter.format(final)}</>;\n}\n\nfunction convertDateTime(value: DateTime, timeZone: any) {\n  if ('timeZone' in value) {\n    return value.toDate();\n  } else if ('calendar' in value) {\n    return value.toDate(timeZone);\n  } else if (!(value instanceof Date)) {\n    return convertValue(value).toDate(timeZone);\n  }\n\n  return value;\n}\n\nfunction getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {\n  if (value instanceof Date) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('timeZone' in value) {\n    return {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: value.timeZone, timeZoneName: 'short'};\n  } else if ('hour' in value && 'year' in value) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('hour' in value) {\n    return {timeStyle: 'short'};\n  } else {\n    return {dateStyle: 'long'};\n  }\n}\n\nfunction convertValue(value: Time) {\n  let date = today(getLocalTimeZone());\n\n  return toCalendarDateTime(date, value);\n}\n"],"names":[],"version":3,"file":"LabeledValue.main.js.map"}

package/dist/LabeledValue.mjs

@@ -1,10 +1,10 @@
-import "./vars.b904ab57.css";
+import "./vars.6c953d9a.css";
 import $fhlTD$fieldlabel_vars_cssmodulejs from "./fieldlabel_vars_css.mjs";
 import {getLocalTimeZone as $fhlTD$getLocalTimeZone, today as $fhlTD$today, toCalendarDateTime as $fhlTD$toCalendarDateTime} from "@internationalized/date";
 import {useDOMRef as $fhlTD$useDOMRef, classNames as $fhlTD$classNames} from "@react-spectrum/utils";
 import {Field as $fhlTD$Field} from "@react-spectrum/label";
 import {filterDOMProps as $fhlTD$filterDOMProps} from "@react-aria/utils";
-import $fhlTD$react from "react";
+import $fhlTD$react, {useEffect as $fhlTD$useEffect} from "react";
 import {useListFormatter as $fhlTD$useListFormatter, useNumberFormatter as $fhlTD$useNumberFormatter, useDateFormatter as $fhlTD$useDateFormatter} from "@react-aria/i18n";
 
 
@@ -28,9 +28,14 @@ function $parcel$interopDefault(a) {
 
 
 
-function $3e9971be431adb24$var$LabeledValue(props, ref) {
+const $3e9971be431adb24$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $fhlTD$react).forwardRef(function LabeledValue(props, ref) {
     let { value: value, formatOptions: formatOptions } = props;
     let domRef = (0, $fhlTD$useDOMRef)(ref);
+    (0, $fhlTD$useEffect)(()=>{
+        if ((domRef === null || domRef === void 0 ? void 0 : domRef.current) && domRef.current.querySelectorAll('input, [contenteditable], textarea').length > 0) throw new Error('LabeledValue cannot contain an editable value.');
+    }, [
+        domRef
+    ]);
     let children;
     if (Array.isArray(value)) children = /*#__PURE__*/ (0, $fhlTD$react).createElement($3e9971be431adb24$var$FormattedStringList, {
         value: value,
@@ -53,6 +58,7 @@ function $3e9971be431adb24$var$LabeledValue(props, ref) {
         formatOptions: formatOptions
     });
     if (typeof value === 'string') children = value;
+    if (/*#__PURE__*/ (0, $fhlTD$react).isValidElement(value)) children = value;
     return /*#__PURE__*/ (0, $fhlTD$react).createElement((0, $fhlTD$Field), {
         ...props,
         wrapperProps: (0, $fhlTD$filterDOMProps)(props),
@@ -60,7 +66,7 @@ function $3e9971be431adb24$var$LabeledValue(props, ref) {
         elementType: "span",
         wrapperClassName: (0, $fhlTD$classNames)((0, ($parcel$interopDefault($fhlTD$fieldlabel_vars_cssmodulejs))), 'spectrum-LabeledValue')
     }, /*#__PURE__*/ (0, $fhlTD$react).createElement("span", null, children));
-}
+});
 function $3e9971be431adb24$var$FormattedStringList(props) {
     let stringFormatter = (0, $fhlTD$useListFormatter)(props.formatOptions);
     return /*#__PURE__*/ (0, $fhlTD$react).createElement((0, $fhlTD$react).Fragment, null, stringFormatter.format(props.value));
@@ -122,9 +128,6 @@ function $3e9971be431adb24$var$convertValue(value) {
     let date = (0, $fhlTD$today)((0, $fhlTD$getLocalTimeZone)());
     return (0, $fhlTD$toCalendarDateTime)(date, value);
 }
-/**
- * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
- */ let $3e9971be431adb24$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $fhlTD$react).forwardRef($3e9971be431adb24$var$LabeledValue);
 
 
 export {$3e9971be431adb24$export$d1328f67a56fa517 as LabeledValue};

package/dist/LabeledValue.module.js

@@ -1,10 +1,10 @@
-import "./vars.b904ab57.css";
+import "./vars.6c953d9a.css";
 import $fhlTD$fieldlabel_vars_cssmodulejs from "./fieldlabel_vars_css.module.js";
 import {getLocalTimeZone as $fhlTD$getLocalTimeZone, today as $fhlTD$today, toCalendarDateTime as $fhlTD$toCalendarDateTime} from "@internationalized/date";
 import {useDOMRef as $fhlTD$useDOMRef, classNames as $fhlTD$classNames} from "@react-spectrum/utils";
 import {Field as $fhlTD$Field} from "@react-spectrum/label";
 import {filterDOMProps as $fhlTD$filterDOMProps} from "@react-aria/utils";
-import $fhlTD$react from "react";
+import $fhlTD$react, {useEffect as $fhlTD$useEffect} from "react";
 import {useListFormatter as $fhlTD$useListFormatter, useNumberFormatter as $fhlTD$useNumberFormatter, useDateFormatter as $fhlTD$useDateFormatter} from "@react-aria/i18n";
 
 
@@ -28,9 +28,14 @@ function $parcel$interopDefault(a) {
 
 
 
-function $3e9971be431adb24$var$LabeledValue(props, ref) {
+const $3e9971be431adb24$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $fhlTD$react).forwardRef(function LabeledValue(props, ref) {
     let { value: value, formatOptions: formatOptions } = props;
     let domRef = (0, $fhlTD$useDOMRef)(ref);
+    (0, $fhlTD$useEffect)(()=>{
+        if ((domRef === null || domRef === void 0 ? void 0 : domRef.current) && domRef.current.querySelectorAll('input, [contenteditable], textarea').length > 0) throw new Error('LabeledValue cannot contain an editable value.');
+    }, [
+        domRef
+    ]);
     let children;
     if (Array.isArray(value)) children = /*#__PURE__*/ (0, $fhlTD$react).createElement($3e9971be431adb24$var$FormattedStringList, {
         value: value,
@@ -53,6 +58,7 @@ function $3e9971be431adb24$var$LabeledValue(props, ref) {
         formatOptions: formatOptions
     });
     if (typeof value === 'string') children = value;
+    if (/*#__PURE__*/ (0, $fhlTD$react).isValidElement(value)) children = value;
     return /*#__PURE__*/ (0, $fhlTD$react).createElement((0, $fhlTD$Field), {
         ...props,
         wrapperProps: (0, $fhlTD$filterDOMProps)(props),
@@ -60,7 +66,7 @@ function $3e9971be431adb24$var$LabeledValue(props, ref) {
         elementType: "span",
         wrapperClassName: (0, $fhlTD$classNames)((0, ($parcel$interopDefault($fhlTD$fieldlabel_vars_cssmodulejs))), 'spectrum-LabeledValue')
     }, /*#__PURE__*/ (0, $fhlTD$react).createElement("span", null, children));
-}
+});
 function $3e9971be431adb24$var$FormattedStringList(props) {
     let stringFormatter = (0, $fhlTD$useListFormatter)(props.formatOptions);
     return /*#__PURE__*/ (0, $fhlTD$react).createElement((0, $fhlTD$react).Fragment, null, stringFormatter.format(props.value));
@@ -122,9 +128,6 @@ function $3e9971be431adb24$var$convertValue(value) {
     let date = (0, $fhlTD$today)((0, $fhlTD$getLocalTimeZone)());
     return (0, $fhlTD$toCalendarDateTime)(date, value);
 }
-/**
- * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
- */ let $3e9971be431adb24$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $fhlTD$react).forwardRef($3e9971be431adb24$var$LabeledValue);
 
 
 export {$3e9971be431adb24$export$d1328f67a56fa517 as LabeledValue};

package/dist/LabeledValue.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CalendarDate, CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, ZonedDateTime} from '@internationalized/date';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {filterDOMProps} from '@react-aria/utils';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport React, {ReactNode} from 'react';\nimport {useDateFormatter, useListFormatter, useNumberFormatter} from '@react-aria/i18n';\n\n// NOTE: the types here need to be synchronized with the ones in docs/types.ts, which are simpler so the documentation generator can handle them.\n\nexport interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, DOMProps {\n  /** The content to display as the label. */\n  label: ReactNode\n}\n\ntype NumberValue = number | RangeValue<number>;\ninterface NumberProps<T extends NumberValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.NumberFormatOptions\n}\n\nexport type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;\ntype RangeDateTime = RangeValue<DateTime>;\ntype DateTimeValue = DateTime | RangeDateTime;\ninterface DateProps<T extends DateTimeValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.DateTimeFormatOptions\n}\n\ninterface StringProps<T extends string> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: never\n}\n\ninterface StringListProps<T extends string[]> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.ListFormatOptions\n}\n\ntype LabeledValueProps<T> =\n  T extends NumberValue ? NumberProps<T> :\n  T extends DateTimeValue ? DateProps<T> :\n  T extends string[] ? StringListProps<T> :\n  T extends string ? StringProps<T> :\n  never;\n\ntype SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime>;\nexport type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;\n\nfunction LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {\n  let {\n    value,\n    formatOptions\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let children;\n  if (Array.isArray(value)) {\n    children = <FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start === 'number' && typeof value.end === 'number') {\n    children = <FormattedNumber value={value as NumberValue} formatOptions={formatOptions as Intl.NumberFormatOptions}  />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start !== 'number' && typeof value.end !== 'number') {\n    children = <FormattedDate value={value as DateTimeValue} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'number') {\n    children = <FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && ('calendar' in value || 'hour' in value) || (value instanceof Date)) {\n    children = <FormattedDate value={value} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'string') {\n    children = value;\n  }\n\n  return (\n    <Field {...props as any} wrapperProps={filterDOMProps(props as any)} ref={domRef} elementType=\"span\" wrapperClassName={classNames(labelStyles, 'spectrum-LabeledValue')}>\n      <span>{children}</span>\n    </Field>\n  );\n}\n\nfunction FormattedStringList<T extends string[]>(props: StringListProps<T>) {\n  let stringFormatter = useListFormatter(props.formatOptions);\n\n  return (\n    <>{stringFormatter.format(props.value)}</>\n  );\n}\n\nfunction FormattedNumber<T extends NumberValue>(props: NumberProps<T>) {\n  let numberFormatter = useNumberFormatter(props.formatOptions);\n  let value = props.value;\n\n  if (typeof value === 'object') {\n    return <>{numberFormatter.formatRange(value.start, value.end)}</>;\n  }\n\n  return <>{numberFormatter.format(value)}</>;\n}\n\nfunction FormattedDate<T extends DateTimeValue>(props: DateProps<T>) {\n  let {value, formatOptions} = props;\n  if (!formatOptions) {\n    formatOptions = getDefaultFormatOptions('start' in value ? value.start : value);\n  }\n\n  let dateFormatter = useDateFormatter(formatOptions);\n  let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();\n  let final: Date;\n\n  if ('start' in value && 'end' in value) {\n    let start = value.start;\n    let end = value.end;\n\n    start = convertDateTime(start, timeZone);\n    end = convertDateTime(end, timeZone);\n\n    return <>{dateFormatter.formatRange(start, end)}</>;\n  }\n\n  final = convertDateTime(value, timeZone);\n  return <>{dateFormatter.format(final)}</>;\n}\n\nfunction convertDateTime(value: DateTime, timeZone: any) {\n  if ('timeZone' in value) {\n    return value.toDate();\n  } else if ('calendar' in value) {\n    return value.toDate(timeZone);\n  } else if (!(value instanceof Date)) {\n    return convertValue(value).toDate(timeZone);\n  }\n\n  return value;\n}\n\nfunction getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {\n  if (value instanceof Date) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('timeZone' in value) {\n    return {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: value.timeZone, timeZoneName: 'short'};\n  } else if ('hour' in value && 'year' in value) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('hour' in value) {\n    return {timeStyle: 'short'};\n  } else {\n    return {dateStyle: 'long'};\n  }\n}\n\nfunction convertValue(value: Time) {\n  let date = today(getLocalTimeZone());\n\n  return toCalendarDateTime(date, value);\n}\n\n/**\n * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.\n */\nlet _LabeledValue = React.forwardRef(LabeledValue);\nexport {_LabeledValue as LabeledValue};\n"],"names":[],"version":3,"file":"LabeledValue.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CalendarDate, CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, ZonedDateTime} from '@internationalized/date';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {filterDOMProps} from '@react-aria/utils';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport React, {ReactElement, ReactNode, useEffect} from 'react';\nimport {useDateFormatter, useListFormatter, useNumberFormatter} from '@react-aria/i18n';\n\n// NOTE: the types here need to be synchronized with the ones in docs/types.ts, which are simpler so the documentation generator can handle them.\n\nexport interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, DOMProps {\n  /** The content to display as the label. */\n  label: ReactNode\n}\n\ntype NumberValue = number | RangeValue<number>;\ninterface NumberProps<T extends NumberValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.NumberFormatOptions\n}\n\nexport type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;\ntype RangeDateTime = RangeValue<DateTime>;\ntype DateTimeValue = DateTime | RangeDateTime;\ninterface DateProps<T extends DateTimeValue> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.DateTimeFormatOptions\n}\n\ninterface StringProps<T extends string> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: never\n}\n\ninterface StringListProps<T extends string[]> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: Intl.ListFormatOptions\n}\n\ninterface ReactElementProps<T extends ReactElement> {\n  /** The value to display. */\n  value: T,\n  /** Formatting options for the value. */\n  formatOptions?: never\n}\n\ntype LabeledValueProps<T> =\n  T extends NumberValue ? NumberProps<T> :\n  T extends DateTimeValue ? DateProps<T> :\n  T extends string[] ? StringListProps<T> :\n  T extends string ? StringProps<T> :\n  T extends ReactElement ? ReactElementProps<T> :\n  never;\n\ntype SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactElement;\nexport type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;\n\n/**\n * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.\n */\nexport const LabeledValue = React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {\n  let {\n    value,\n    formatOptions\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  useEffect(() => {\n    if (\n      domRef?.current &&\n      domRef.current.querySelectorAll('input, [contenteditable], textarea')\n        .length > 0\n    ) {\n      throw new Error('LabeledValue cannot contain an editable value.');\n    }\n  }, [domRef]);\n  \n\n  let children;\n  if (Array.isArray(value)) {\n    children = <FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start === 'number' && typeof value.end === 'number') {\n    children = <FormattedNumber value={value as NumberValue} formatOptions={formatOptions as Intl.NumberFormatOptions}  />;\n  }\n\n  if (typeof value === 'object' && 'start' in value && typeof value.start !== 'number' && typeof value.end !== 'number') {\n    children = <FormattedDate value={value as DateTimeValue} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'number') {\n    children = <FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />;\n  }\n\n  if (typeof value === 'object' && ('calendar' in value || 'hour' in value) || (value instanceof Date)) {\n    children = <FormattedDate value={value} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;\n  }\n\n  if (typeof value === 'string') {\n    children = value;\n  }\n\n  if (React.isValidElement(value)) {\n    children = value;\n  }\n\n  return (\n    <Field {...props as any} wrapperProps={filterDOMProps(props as any)} ref={domRef} elementType=\"span\" wrapperClassName={classNames(labelStyles, 'spectrum-LabeledValue')}>\n      <span>{children}</span>\n    </Field>\n  );\n});\n\nfunction FormattedStringList<T extends string[]>(props: StringListProps<T>) {\n  let stringFormatter = useListFormatter(props.formatOptions);\n\n  return (\n    <>{stringFormatter.format(props.value)}</>\n  );\n}\n\nfunction FormattedNumber<T extends NumberValue>(props: NumberProps<T>) {\n  let numberFormatter = useNumberFormatter(props.formatOptions);\n  let value = props.value;\n\n  if (typeof value === 'object') {\n    return <>{numberFormatter.formatRange(value.start, value.end)}</>;\n  }\n\n  return <>{numberFormatter.format(value)}</>;\n}\n\nfunction FormattedDate<T extends DateTimeValue>(props: DateProps<T>) {\n  let {value, formatOptions} = props;\n  if (!formatOptions) {\n    formatOptions = getDefaultFormatOptions('start' in value ? value.start : value);\n  }\n\n  let dateFormatter = useDateFormatter(formatOptions);\n  let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();\n  let final: Date;\n\n  if ('start' in value && 'end' in value) {\n    let start = value.start;\n    let end = value.end;\n\n    start = convertDateTime(start, timeZone);\n    end = convertDateTime(end, timeZone);\n\n    return <>{dateFormatter.formatRange(start, end)}</>;\n  }\n\n  final = convertDateTime(value, timeZone);\n  return <>{dateFormatter.format(final)}</>;\n}\n\nfunction convertDateTime(value: DateTime, timeZone: any) {\n  if ('timeZone' in value) {\n    return value.toDate();\n  } else if ('calendar' in value) {\n    return value.toDate(timeZone);\n  } else if (!(value instanceof Date)) {\n    return convertValue(value).toDate(timeZone);\n  }\n\n  return value;\n}\n\nfunction getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {\n  if (value instanceof Date) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('timeZone' in value) {\n    return {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: value.timeZone, timeZoneName: 'short'};\n  } else if ('hour' in value && 'year' in value) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('hour' in value) {\n    return {timeStyle: 'short'};\n  } else {\n    return {dateStyle: 'long'};\n  }\n}\n\nfunction convertValue(value: Time) {\n  let date = today(getLocalTimeZone());\n\n  return toCalendarDateTime(date, value);\n}\n"],"names":[],"version":3,"file":"LabeledValue.module.js.map"}

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
 import { DOMProps, RangeValue, SpectrumLabelableProps, StyleProps, DOMRefValue } from "@react-types/shared";
-import React, { ReactNode } from "react";
+import React, { ReactElement, ReactNode } from "react";
 interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, DOMProps {
     /** The content to display as the label. */
     label: ReactNode;
@@ -33,12 +33,18 @@ interface StringListProps<T extends string[]> {
     /** Formatting options for the value. */
     formatOptions?: Intl.ListFormatOptions;
 }
-type LabeledValueProps<T> = T extends NumberValue ? NumberProps<T> : T extends DateTimeValue ? DateProps<T> : T extends string[] ? StringListProps<T> : T extends string ? StringProps<T> : never;
-type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime>;
+interface ReactElementProps<T extends ReactElement> {
+    /** The value to display. */
+    value: T;
+    /** Formatting options for the value. */
+    formatOptions?: never;
+}
+type LabeledValueProps<T> = T extends NumberValue ? NumberProps<T> : T extends DateTimeValue ? DateProps<T> : T extends string[] ? StringListProps<T> : T extends string ? StringProps<T> : T extends ReactElement ? ReactElementProps<T> : never;
+type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactElement;
 export type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;
 /**
  * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
  */
-export let LabeledValue: React.ForwardRefExoticComponent<SpectrumLabeledValueProps<SpectrumLabeledValueTypes> & React.RefAttributes<DOMRefValue<HTMLElement>>>;
+export const LabeledValue: React.ForwardRefExoticComponent<SpectrumLabeledValueProps<SpectrumLabeledValueTypes> & React.RefAttributes<DOMRefValue<HTMLElement>>>;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AAuBA,+BAAuC,SAAQ,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,sBAAsB,EAAE,oBAAoB,GAAG,YAAY,CAAC,EAAE,QAAQ;IAC9I,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAA;CACjB;AAED,mBAAmB,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC;AAC/C,sBAAsB,CAAC,SAAS,WAAW;IACzC,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,mBAAmB,CAAA;CACzC;AAED,gBAAuB,IAAI,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAAC;AACrF,qBAAqB,WAAW,QAAQ,CAAC,CAAC;AAC1C,qBAAqB,QAAQ,GAAG,aAAa,CAAC;AAC9C,oBAAoB,CAAC,SAAS,aAAa;IACzC,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,qBAAqB,CAAA;CAC3C;AAED,sBAAsB,CAAC,SAAS,MAAM;IACpC,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAA;CACtB;AAED,0BAA0B,CAAC,SAAS,MAAM,EAAE;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,iBAAiB,CAAA;CACvC;AAED,uBAAuB,CAAC,IACtB,CAAC,SAAS,WAAW,GAAG,YAAY,CAAC,CAAC,GACtC,CAAC,SAAS,aAAa,GAAG,UAAU,CAAC,CAAC,GACtC,CAAC,SAAS,MAAM,EAAE,GAAG,gBAAgB,CAAC,CAAC,GACvC,CAAC,SAAS,MAAM,GAAG,YAAY,CAAC,CAAC,GACjC,KAAK,CAAC;AAER,iCAAiC,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,WAAW,MAAM,CAAC,GAAG,WAAW,QAAQ,CAAC,CAAC;AACxK,sCAAsC,CAAC,IAAI,kBAAkB,CAAC,CAAC,GAAG,qBAAqB,CAAC;AAoHxF;;GAEG;AACH,OAAA,IAAI,mJAA8C,CAAC","sources":["packages/@react-spectrum/labeledvalue/src/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx","packages/@react-spectrum/labeledvalue/src/packages/@react-spectrum/labeledvalue/src/index.ts","packages/@react-spectrum/labeledvalue/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport type {SpectrumLabeledValueProps} from './LabeledValue';\nexport {LabeledValue} from './LabeledValue';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AAuBA,+BAAuC,SAAQ,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,sBAAsB,EAAE,oBAAoB,GAAG,YAAY,CAAC,EAAE,QAAQ;IAC9I,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAA;CACjB;AAED,mBAAmB,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC;AAC/C,sBAAsB,CAAC,SAAS,WAAW;IACzC,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,mBAAmB,CAAA;CACzC;AAED,gBAAuB,IAAI,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAAC;AACrF,qBAAqB,WAAW,QAAQ,CAAC,CAAC;AAC1C,qBAAqB,QAAQ,GAAG,aAAa,CAAC;AAC9C,oBAAoB,CAAC,SAAS,aAAa;IACzC,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,qBAAqB,CAAA;CAC3C;AAED,sBAAsB,CAAC,SAAS,MAAM;IACpC,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAA;CACtB;AAED,0BAA0B,CAAC,SAAS,MAAM,EAAE;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,iBAAiB,CAAA;CACvC;AAED,4BAA4B,CAAC,SAAS,YAAY;IAChD,4BAA4B;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAA;CACtB;AAED,uBAAuB,CAAC,IACtB,CAAC,SAAS,WAAW,GAAG,YAAY,CAAC,CAAC,GACtC,CAAC,SAAS,aAAa,GAAG,UAAU,CAAC,CAAC,GACtC,CAAC,SAAS,MAAM,EAAE,GAAG,gBAAgB,CAAC,CAAC,GACvC,CAAC,SAAS,MAAM,GAAG,YAAY,CAAC,CAAC,GACjC,CAAC,SAAS,YAAY,GAAG,kBAAkB,CAAC,CAAC,GAC7C,KAAK,CAAC;AAER,iCAAiC,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,WAAW,MAAM,CAAC,GAAG,WAAW,QAAQ,CAAC,GAAG,YAAY,CAAC;AACvL,sCAAsC,CAAC,IAAI,kBAAkB,CAAC,CAAC,GAAG,qBAAqB,CAAC;AAExF;;GAEG;AACH,OAAO,MAAM,mJAoDX,CAAC","sources":["packages/@react-spectrum/labeledvalue/src/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx","packages/@react-spectrum/labeledvalue/src/packages/@react-spectrum/labeledvalue/src/index.ts","packages/@react-spectrum/labeledvalue/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport type {SpectrumLabeledValueProps} from './LabeledValue';\nexport {LabeledValue} from './LabeledValue';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/{vars.b904ab57.css → vars.6c953d9a.css}

@@ -152,9 +152,9 @@
 }
 
 .jIQVGq_spectrum-Field:where(.jIQVGq_spectrum-Field--positionSide) .jIQVGq_spectrum-Field-wrapper {
+  min-width: 0;
   width: var(--spectrum-field-default-width);
   flex: 1;
-  min-width: 0;
   height: 100%;
 }
 
@@ -214,8 +214,8 @@
 }
 
 .jIQVGq_spectrum-Form.jIQVGq_spectrum-Form--positionSide .jIQVGq_spectrum-Field-field {
-  min-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
   width: auto;
+  min-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
 }
 
 .jIQVGq_spectrum-Form.jIQVGq_spectrum-Form--positionTop {
@@ -268,4 +268,4 @@
 :is(.jIQVGq_spectrum-FieldLabel, .jIQVGq_spectrum-Form-itemLabel).jIQVGq_is-disabled {
   color: var(--spectrum-fieldlabel-text-color-disabled, var(--spectrum-alias-text-color-disabled));
 }
-/*# sourceMappingURL=vars.b904ab57.css.map */
+/*# sourceMappingURL=vars.6c953d9a.css.map */

package/dist/{vars.b904ab57.css.map → vars.6c953d9a.css.map}

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;;;;;;AAsBA;;;;;;AAMA;;;;;;;AAOA;;;;;AAUA;;;;;AAIE;;;;;;AAMA;;;;;;;;;;AAUE;;;;;AAMA;;;;AAIA;;;;AAOF;;;;;AAKE;;;;;;;AAaE;;;;AAMF;;;;;AAKA;;;;;AAOA;;;;AAaF;;;;;;;;AAOE;;;;;AAME;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAGE;;;;AAMJ;;;;AAIA;;;;;AAOF;;;;;;;AASE;;;;;AASF;;;;AAGE;;;;;;AAOF;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAkBF;;;;AAIE","sources":["packages/@adobe/spectrum-css-temp/components/fieldlabel/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.b904ab57.css.map"}
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;;;;;;AAsBA;;;;;;AAMA;;;;;;;AAOA;;;;;AAUA;;;;;AAIE;;;;;;AAMA;;;;;;;;;;AAUE;;;;;AAMA;;;;AAIA;;;;AAOF;;;;;AAKE;;;;;;;AAaE;;;;AAMF;;;;;AAKA;;;;;AAOA;;;;AAaF;;;;;;;;AAOE;;;;;AAME;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAGE;;;;AAMJ;;;;AAIA;;;;;AAOF;;;;;;;AASE;;;;;AASF;;;;AAGE;;;;;;AAOF;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAkBF;;;;AAIE","sources":["packages/@adobe/spectrum-css-temp/components/fieldlabel/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.6c953d9a.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/labeledvalue",
-  "version": "3.1.18",
+  "version": "3.2.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,12 +36,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.6.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/utils": "^3.26.0",
-    "@react-spectrum/label": "^3.16.10",
-    "@react-spectrum/utils": "^3.12.0",
-    "@react-types/shared": "^3.26.0",
+    "@internationalized/date": "^3.7.0",
+    "@react-aria/i18n": "^3.12.6",
+    "@react-aria/utils": "^3.28.0",
+    "@react-spectrum/label": "^3.16.12",
+    "@react-spectrum/utils": "^3.12.2",
+    "@react-types/shared": "^3.28.0",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -49,10 +49,11 @@
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

package/src/LabeledValue.tsx

@@ -16,7 +16,7 @@ import type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} f
 import {Field} from '@react-spectrum/label';
 import {filterDOMProps} from '@react-aria/utils';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
-import React, {ReactNode} from 'react';
+import React, {ReactElement, ReactNode, useEffect} from 'react';
 import {useDateFormatter, useListFormatter, useNumberFormatter} from '@react-aria/i18n';
 
 // NOTE: the types here need to be synchronized with the ones in docs/types.ts, which are simpler so the documentation generator can handle them.
@@ -58,23 +58,45 @@ interface StringListProps<T extends string[]> {
   formatOptions?: Intl.ListFormatOptions
 }
 
+interface ReactElementProps<T extends ReactElement> {
+  /** The value to display. */
+  value: T,
+  /** Formatting options for the value. */
+  formatOptions?: never
+}
+
 type LabeledValueProps<T> =
   T extends NumberValue ? NumberProps<T> :
   T extends DateTimeValue ? DateProps<T> :
   T extends string[] ? StringListProps<T> :
   T extends string ? StringProps<T> :
+  T extends ReactElement ? ReactElementProps<T> :
   never;
 
-type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime>;
+type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactElement;
 export type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;
 
-function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {
+/**
+ * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
+ */
+export const LabeledValue = React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {
   let {
     value,
     formatOptions
   } = props;
   let domRef = useDOMRef(ref);
 
+  useEffect(() => {
+    if (
+      domRef?.current &&
+      domRef.current.querySelectorAll('input, [contenteditable], textarea')
+        .length > 0
+    ) {
+      throw new Error('LabeledValue cannot contain an editable value.');
+    }
+  }, [domRef]);
+  
+
   let children;
   if (Array.isArray(value)) {
     children = <FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />;
@@ -100,12 +122,16 @@ function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabele
     children = value;
   }
 
+  if (React.isValidElement(value)) {
+    children = value;
+  }
+
   return (
     <Field {...props as any} wrapperProps={filterDOMProps(props as any)} ref={domRef} elementType="span" wrapperClassName={classNames(labelStyles, 'spectrum-LabeledValue')}>
       <span>{children}</span>
     </Field>
   );
-}
+});
 
 function FormattedStringList<T extends string[]>(props: StringListProps<T>) {
   let stringFormatter = useListFormatter(props.formatOptions);
@@ -181,9 +207,3 @@ function convertValue(value: Time) {
 
   return toCalendarDateTime(date, value);
 }
-
-/**
- * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
- */
-let _LabeledValue = React.forwardRef(LabeledValue);
-export {_LabeledValue as LabeledValue};