@react-spectrum/labeledvalue 3.1.19 → 3.2.1

package/dist/LabeledValue.main.js

@@ -37,6 +37,11 @@ $parcel$export(module.exports, "LabeledValue", () => $2a7417c2df2197f7$export$d1
 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 @@ const $2a7417c2df2197f7$export$d1328f67a56fa517 = /*#__PURE__*/ (0, ($parcel$int
         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),

package/dist/LabeledValue.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA+DM,MAAM,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,aAAkD,KAAmC,EAAE,GAAwB;IACnK,IAAI,SACF,KAAK,iBACL,aAAa,EACd,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI;IACJ,IAAI,MAAM,OAAO,CAAC,QAChB,yBAAW,0DAAC;QAAoB,OAAO;QAAO,eAAe;;IAG/D,IAAI,OAAO,UAAU,YAAY,WAAW,SAAS,OAAO,MAAM,KAAK,KAAK,YAAY,OAAO,MAAM,GAAG,KAAK,UAC3G,yBAAW,0DAAC;QAAgB,OAAO;QAAsB,eAAe;;IAG1E,IAAI,OAAO,UAAU,YAAY,WAAW,SAAS,OAAO,MAAM,KAAK,KAAK,YAAY,OAAO,MAAM,GAAG,KAAK,UAC3G,yBAAW,0DAAC;QAAc,OAAO;QAAwB,eAAe;;IAG1E,IAAI,OAAO,UAAU,UACnB,yBAAW,0DAAC;QAAgB,OAAO;QAAO,eAAe;;IAG3D,IAAI,OAAO,UAAU,YAAa,CAAA,cAAc,SAAS,UAAU,KAAI,KAAO,iBAAiB,MAC7F,yBAAW,0DAAC;QAAc,OAAO;QAAO,eAAe;;IAGzD,IAAI,OAAO,UAAU,UACnB,WAAW;IAGb,qBACE,0DAAC,CAAA,GAAA,+BAAI;QAAG,GAAG,KAAK;QAAS,cAAc,CAAA,GAAA,oCAAa,EAAE;QAAe,KAAK;QAAQ,aAAY;QAAO,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;qBAC7I,0DAAC,cAAM;AAGb;AAEA,SAAS,0CAAwC,KAAyB;IACxE,IAAI,kBAAkB,CAAA,GAAA,qCAAe,EAAE,MAAM,aAAa;IAE1D,qBACE,sHAAG,gBAAgB,MAAM,CAAC,MAAM,KAAK;AAEzC;AAEA,SAAS,sCAAuC,KAAqB;IACnE,IAAI,kBAAkB,CAAA,GAAA,uCAAiB,EAAE,MAAM,aAAa;IAC5D,IAAI,QAAQ,MAAM,KAAK;IAEvB,IAAI,OAAO,UAAU,UACnB,qBAAO,sHAAG,gBAAgB,WAAW,CAAC,MAAM,KAAK,EAAE,MAAM,GAAG;IAG9D,qBAAO,sHAAG,gBAAgB,MAAM,CAAC;AACnC;AAEA,SAAS,oCAAuC,KAAmB;IACjE,IAAI,SAAC,KAAK,iBAAE,aAAa,EAAC,GAAG;IAC7B,IAAI,CAAC,eACH,gBAAgB,8CAAwB,WAAW,QAAQ,MAAM,KAAK,GAAG;IAG3E,IAAI,gBAAgB,CAAA,GAAA,qCAAe,EAAE;IACrC,IAAI,WAAW,cAAc,eAAe,GAAG,QAAQ,IAAI,CAAA,GAAA,6CAAe;IAC1E,IAAI;IAEJ,IAAI,WAAW,SAAS,SAAS,OAAO;QACtC,IAAI,QAAQ,MAAM,KAAK;QACvB,IAAI,MAAM,MAAM,GAAG;QAEnB,QAAQ,sCAAgB,OAAO;QAC/B,MAAM,sCAAgB,KAAK;QAE3B,qBAAO,sHAAG,cAAc,WAAW,CAAC,OAAO;IAC7C;IAEA,QAAQ,sCAAgB,OAAO;IAC/B,qBAAO,sHAAG,cAAc,MAAM,CAAC;AACjC;AAEA,SAAS,sCAAgB,KAAe,EAAE,QAAa;IACrD,IAAI,cAAc,OAChB,OAAO,MAAM,MAAM;SACd,IAAI,cAAc,OACvB,OAAO,MAAM,MAAM,CAAC;SACf,IAAI,CAAE,CAAA,iBAAiB,IAAG,GAC/B,OAAO,mCAAa,OAAO,MAAM,CAAC;IAGpC,OAAO;AACT;AAEA,SAAS,8CAAwB,KAAe;IAC9C,IAAI,iBAAiB,MACnB,OAAO;QAAC,WAAW;QAAQ,WAAW;IAAO;SACxC,IAAI,cAAc,OACvB,OAAO;QAAC,MAAM;QAAW,OAAO;QAAQ,KAAK;QAAW,MAAM;QAAW,QAAQ;QAAW,UAAU,MAAM,QAAQ;QAAE,cAAc;IAAO;SACtI,IAAI,UAAU,SAAS,UAAU,OACtC,OAAO;QAAC,WAAW;QAAQ,WAAW;IAAO;SACxC,IAAI,UAAU,OACnB,OAAO;QAAC,WAAW;IAAO;SAE1B,OAAO;QAAC,WAAW;IAAM;AAE7B;AAEA,SAAS,mCAAa,KAAW;IAC/B,IAAI,OAAO,CAAA,GAAA,kCAAI,EAAE,CAAA,GAAA,6CAAe;IAEhC,OAAO,CAAA,GAAA,+CAAiB,EAAE,MAAM;AAClC","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\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  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"],"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

@@ -4,7 +4,7 @@ import {getLocalTimeZone as $fhlTD$getLocalTimeZone, today as $fhlTD$today, toCa
 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";
 
 
@@ -31,6 +31,11 @@ function $parcel$interopDefault(a) {
 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 @@ const $3e9971be431adb24$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $fhlTD$react
         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),

package/dist/LabeledValue.module.js

@@ -4,7 +4,7 @@ import {getLocalTimeZone as $fhlTD$getLocalTimeZone, today as $fhlTD$today, toCa
 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";
 
 
@@ -31,6 +31,11 @@ function $parcel$interopDefault(a) {
 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 @@ const $3e9971be431adb24$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $fhlTD$react
         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),

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\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  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"],"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,8 +33,14 @@ 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.

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;AAExF;;GAEG;AACH,OAAO,MAAM,mJAqCX,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/labeledvalue",
-  "version": "3.1.19",
+  "version": "3.2.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -37,11 +37,11 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.7.0",
-    "@react-aria/i18n": "^3.12.5",
-    "@react-aria/utils": "^3.27.0",
-    "@react-spectrum/label": "^3.16.11",
-    "@react-spectrum/utils": "^3.12.1",
-    "@react-types/shared": "^3.27.0",
+    "@react-aria/i18n": "^3.12.7",
+    "@react-aria/utils": "^3.28.1",
+    "@react-spectrum/label": "^3.16.13",
+    "@react-spectrum/utils": "^3.12.3",
+    "@react-types/shared": "^3.28.0",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -55,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
+  "gitHead": "9c4ebbc0c1972cc880febc29de995ca58caa3ba4"
 }

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,14 +58,22 @@ 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;
 
 /**
@@ -78,6 +86,17 @@ export const LabeledValue = React.forwardRef(function LabeledValue<T extends Spe
   } = 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} />;
@@ -103,6 +122,10 @@ export const LabeledValue = React.forwardRef(function LabeledValue<T extends Spe
     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>