@react-aria/label 3.1.3 → 3.2.3

package/dist/main.js

@@ -1,45 +1,94 @@
-var {
-  useId,
-  useLabels
-} = require("@react-aria/utils");
-
-/**
- * Provides the accessibility implementation for labels and their associated elements.
- * Labels provide context for user inputs.
- * @param props - The props for labels and fields.
- */
-function useLabel(props) {
-  let {
-    id,
-    label,
-    'aria-labelledby': ariaLabelledby,
-    'aria-label': ariaLabel,
-    labelElementType = 'label'
-  } = props;
-  id = useId(id);
-  let labelId = useId();
-  let labelProps = {};
-
-  if (label) {
-    ariaLabelledby = ariaLabelledby ? ariaLabelledby + " " + labelId : labelId;
-    labelProps = {
-      id: labelId,
-      htmlFor: labelElementType === 'label' ? id : undefined
-    };
-  } else if (!ariaLabelledby && !ariaLabel) {
-    console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');
-  }
-
-  let fieldProps = useLabels({
-    id,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby
+var $9eIVv$reactariautils = require("@react-aria/utils");
+
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
   });
-  return {
-    labelProps,
-    fieldProps
-  };
+
+  return dest;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $591153d67f42b03f$exports = {};
+
+$parcel$export($591153d67f42b03f$exports, "useField", () => $591153d67f42b03f$export$294aa081a6c6f55d);
+var $065184908ba2f35b$exports = {};
+
+$parcel$export($065184908ba2f35b$exports, "useLabel", () => $065184908ba2f35b$export$8467354a121f1b9f);
+
+function $065184908ba2f35b$export$8467354a121f1b9f(props) {
+    let { id: id , label: label , 'aria-labelledby': ariaLabelledby , 'aria-label': ariaLabel , labelElementType: labelElementType = 'label'  } = props;
+    id = $9eIVv$reactariautils.useId(id);
+    let labelId = $9eIVv$reactariautils.useId();
+    let labelProps = {
+    };
+    if (label) {
+        ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;
+        labelProps = {
+            id: labelId,
+            htmlFor: labelElementType === 'label' ? id : undefined
+        };
+    } else if (!ariaLabelledby && !ariaLabel) console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');
+    let fieldProps = $9eIVv$reactariautils.useLabels({
+        id: id,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby
+    });
+    return {
+        labelProps: labelProps,
+        fieldProps: fieldProps
+    };
+}
+
+
+
+function $591153d67f42b03f$export$294aa081a6c6f55d(props) {
+    let { description: description , errorMessage: errorMessage , validationState: validationState  } = props;
+    let { labelProps: labelProps , fieldProps: fieldProps  } = $065184908ba2f35b$export$8467354a121f1b9f(props);
+    let descriptionId = $9eIVv$reactariautils.useSlotId([
+        Boolean(description),
+        Boolean(errorMessage),
+        validationState
+    ]);
+    let errorMessageId = $9eIVv$reactariautils.useSlotId([
+        Boolean(description),
+        Boolean(errorMessage),
+        validationState
+    ]);
+    fieldProps = $9eIVv$reactariautils.mergeProps(fieldProps, {
+        'aria-describedby': [
+            descriptionId,
+            // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+            errorMessageId,
+            props['aria-describedby']
+        ].filter(Boolean).join(' ') || undefined
+    });
+    return {
+        labelProps: labelProps,
+        fieldProps: fieldProps,
+        descriptionProps: {
+            id: descriptionId
+        },
+        errorMessageProps: {
+            id: errorMessageId
+        }
+    };
 }
 
-exports.useLabel = useLabel;
+
+
+$parcel$exportWildcard(module.exports, $591153d67f42b03f$exports);
+$parcel$exportWildcard(module.exports, $065184908ba2f35b$exports);
+
+
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;AA+BA;;;;;AAKO,SAASA,QAAT,CAAkBC,KAAlB,EAAoD;AACzD,MAAI;AACFC,IAAAA,EADE;AAEFC,IAAAA,KAFE;AAGF,uBAAmBC,cAHjB;AAIF,kBAAcC,SAJZ;AAKFC,IAAAA,gBAAgB,GAAG;AALjB,MAMAL,KANJ;AAQAC,EAAAA,EAAE,GAAGK,KAAK,CAACL,EAAD,CAAV;AACA,MAAIM,OAAO,GAAGD,KAAK,EAAnB;AACA,MAAIE,UAAU,GAAG,EAAjB;;AACA,MAAIN,KAAJ,EAAW;AACTC,IAAAA,cAAc,GAAGA,cAAc,GAAMA,cAAN,SAAwBI,OAAxB,GAAoCA,OAAnE;AACAC,IAAAA,UAAU,GAAG;AACXP,MAAAA,EAAE,EAAEM,OADO;AAEXE,MAAAA,OAAO,EAAEJ,gBAAgB,KAAK,OAArB,GAA+BJ,EAA/B,GAAoCS;AAFlC,KAAb;AAID,GAND,MAMO,IAAI,CAACP,cAAD,IAAmB,CAACC,SAAxB,EAAmC;AACxCO,IAAAA,OAAO,CAACC,IAAR,CAAa,sHAAb;AACD;;AAED,MAAIC,UAAU,GAAGC,SAAS,CAAC;AACzBb,IAAAA,EADyB;AAEzB,kBAAcG,SAFW;AAGzB,uBAAmBD;AAHM,GAAD,CAA1B;AAMA,SAAO;AACLK,IAAAA,UADK;AAELK,IAAAA;AAFK,GAAP;AAID","sources":["./packages/@react-aria/label/src/useLabel.ts"],"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 {AriaLabelingProps, DOMProps, LabelableProps} from '@react-types/shared';\nimport {ElementType, HTMLAttributes, LabelHTMLAttributes} from 'react';\nimport {useId, useLabels} from '@react-aria/utils';\n\ninterface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {\n  /**\n   * The HTML element used to render the label, e.g. 'label', or 'span'.\n   * @default 'label'\n   */\n  labelElementType?: ElementType\n}\n\ninterface LabelAria {\n  /** Props to apply to the label container element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props to apply to the field container element being labeled. */\n  fieldProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n * @param props - The props for labels and fields.\n */\nexport function useLabel(props: LabelAriaProps): LabelAria {\n  let {\n    id,\n    label,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    labelElementType = 'label'\n  } = props;\n\n  id = useId(id);\n  let labelId = useId();\n  let labelProps = {};\n  if (label) {\n    ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;\n    labelProps = {\n      id: labelId,\n      htmlFor: labelElementType === 'label' ? id : undefined\n    };\n  } else if (!ariaLabelledby && !ariaLabel) {\n    console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');\n  }\n\n  let fieldProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  });\n\n  return {\n    labelProps,\n    fieldProps\n  };\n}\n"],"names":["useLabel","props","id","label","ariaLabelledby","ariaLabel","labelElementType","useId","labelId","labelProps","htmlFor","undefined","console","warn","fieldProps","useLabels"],"version":3,"file":"main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;SEoCgB,yCAAQ,CAAC,KAAqB,EAAa,CAAC;IAC1D,GAAG,CAAC,CAAC,KACH,EAAE,UACF,KAAK,GACL,CAAiB,kBAAE,cAAc,GACjC,CAAY,aAAE,SAAS,qBACvB,gBAAgB,GAAG,CAAO,QAC5B,CAAC,GAAG,KAAK;IAET,EAAE,GAAG,2BAAK,CAAC,EAAE;IACb,GAAG,CAAC,OAAO,GAAG,2BAAK;IACnB,GAAG,CAAC,UAAU,GAAG,CAAC;IAAA,CAAC;IACnB,EAAE,EAAE,KAAK,EAAE,CAAC;QACV,cAAc,GAAG,cAAc,MAAM,cAAc,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO;QAC1E,UAAU,GAAG,CAAC;YACZ,EAAE,EAAE,OAAO;YACX,OAAO,EAAE,gBAAgB,KAAK,CAAO,SAAG,EAAE,GAAG,SAAS;QACxD,CAAC;IACH,CAAC,MAAM,EAAE,GAAG,cAAc,KAAK,SAAS,EACtC,OAAO,CAAC,IAAI,CAAC,CAAsH;IAGrI,GAAG,CAAC,UAAU,GAAG,+BAAS,CAAC,CAAC;YAC1B,EAAE;QACF,CAAY,aAAE,SAAS;QACvB,CAAiB,kBAAE,cAAc;IACnC,CAAC;IAED,MAAM,CAAC,CAAC;oBACN,UAAU;oBACV,UAAU;IACZ,CAAC;AACH,CAAC;;;;SDrCe,yCAAQ,CAAC,KAAqB,EAAa,CAAC;IAC1D,GAAG,CAAC,CAAC,cAAA,WAAW,iBAAE,YAAY,oBAAE,eAAe,EAAA,CAAC,GAAG,KAAK;IACxD,GAAG,CAAC,CAAC,aAAA,UAAU,eAAE,UAAU,EAAA,CAAC,GAAG,yCAAQ,CAAC,KAAK;IAE7C,GAAG,CAAC,aAAa,GAAG,+BAAS,CAAC,CAAC;QAAA,OAAO,CAAC,WAAW;QAAG,OAAO,CAAC,YAAY;QAAG,eAAe;IAAA,CAAC;IAC5F,GAAG,CAAC,cAAc,GAAG,+BAAS,CAAC,CAAC;QAAA,OAAO,CAAC,WAAW;QAAG,OAAO,CAAC,YAAY;QAAG,eAAe;IAAA,CAAC;IAE7F,UAAU,GAAG,gCAAU,CAAC,UAAU,EAAE,CAAC;QACnC,CAAkB,mBAAE,CAAC;YACnB,aAAa;YACb,EAA0L,AAA1L,wLAA0L;YAC1L,cAAc;YACd,KAAK,CAAC,CAAkB;QAC1B,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAG,OAAK,SAAS;IAC1C,CAAC;IAED,MAAM,CAAC,CAAC;oBACN,UAAU;oBACV,UAAU;QACV,gBAAgB,EAAE,CAAC;YACjB,EAAE,EAAE,aAAa;QACnB,CAAC;QACD,iBAAiB,EAAE,CAAC;YAClB,EAAE,EAAE,cAAc;QACpB,CAAC;IACH,CAAC;AACH,CAAC","sources":["packages/@react-aria/label/src/index.ts","packages/@react-aria/label/src/useField.ts","packages/@react-aria/label/src/useLabel.ts"],"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\nexport * from './useField';\nexport * from './useLabel';\n","/*\n * Copyright 2021 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 {HelpTextProps, Validation} from '@react-types/shared';\nimport {HTMLAttributes} from 'react';\nimport {LabelAria, LabelAriaProps, useLabel} from './useLabel';\nimport {mergeProps, useSlotId} from '@react-aria/utils';\n\ninterface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation, 'isRequired'> {}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: HTMLAttributes<HTMLElement>,\n  /** Props for the error message element, if any. */\n  errorMessageProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display a description or error message.\n * @param props - Props for the Field.\n */\nexport function useField(props: AriaFieldProps): FieldAria {\n  let {description, errorMessage, validationState} = props;\n  let {labelProps, fieldProps} = useLabel(props);\n\n  let descriptionId = useSlotId([Boolean(description), Boolean(errorMessage), validationState]);\n  let errorMessageId = useSlotId([Boolean(description), Boolean(errorMessage), validationState]);\n\n  fieldProps = mergeProps(fieldProps, {\n    'aria-describedby': [\n      descriptionId,\n      // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268\n      errorMessageId,\n      props['aria-describedby']\n    ].filter(Boolean).join(' ') || undefined\n  });\n\n  return {\n    labelProps,\n    fieldProps,\n    descriptionProps: {\n      id: descriptionId\n    },\n    errorMessageProps: {\n      id: errorMessageId\n    }\n  };\n}\n","/*\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 {AriaLabelingProps, DOMProps, LabelableProps} from '@react-types/shared';\nimport {ElementType, LabelHTMLAttributes} from 'react';\nimport {useId, useLabels} from '@react-aria/utils';\n\nexport interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {\n  /**\n   * The HTML element used to render the label, e.g. 'label', or 'span'.\n   * @default 'label'\n   */\n  labelElementType?: ElementType\n}\n\nexport interface LabelAria {\n  /** Props to apply to the label container element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props to apply to the field container element being labeled. */\n  fieldProps: AriaLabelingProps & DOMProps\n}\n\n/**\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n * @param props - The props for labels and fields.\n */\nexport function useLabel(props: LabelAriaProps): LabelAria {\n  let {\n    id,\n    label,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    labelElementType = 'label'\n  } = props;\n\n  id = useId(id);\n  let labelId = useId();\n  let labelProps = {};\n  if (label) {\n    ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;\n    labelProps = {\n      id: labelId,\n      htmlFor: labelElementType === 'label' ? id : undefined\n    };\n  } else if (!ariaLabelledby && !ariaLabel) {\n    console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');\n  }\n\n  let fieldProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  });\n\n  return {\n    labelProps,\n    fieldProps\n  };\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,40 +1,77 @@
-import { useId, useLabels } from "@react-aria/utils";
-
-/**
- * Provides the accessibility implementation for labels and their associated elements.
- * Labels provide context for user inputs.
- * @param props - The props for labels and fields.
- */
-export function useLabel(props) {
-  let {
-    id,
-    label,
-    'aria-labelledby': ariaLabelledby,
-    'aria-label': ariaLabel,
-    labelElementType = 'label'
-  } = props;
-  id = useId(id);
-  let labelId = useId();
-  let labelProps = {};
-
-  if (label) {
-    ariaLabelledby = ariaLabelledby ? ariaLabelledby + " " + labelId : labelId;
-    labelProps = {
-      id: labelId,
-      htmlFor: labelElementType === 'label' ? id : undefined
+import {useSlotId as $crOtA$useSlotId, mergeProps as $crOtA$mergeProps, useId as $crOtA$useId, useLabels as $crOtA$useLabels} from "@react-aria/utils";
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $8f1f06f2efd295ee$exports = {};
+
+$parcel$export($8f1f06f2efd295ee$exports, "useField", () => $8f1f06f2efd295ee$export$294aa081a6c6f55d);
+var $6f8f5e0de5a77844$exports = {};
+
+$parcel$export($6f8f5e0de5a77844$exports, "useLabel", () => $6f8f5e0de5a77844$export$8467354a121f1b9f);
+
+function $6f8f5e0de5a77844$export$8467354a121f1b9f(props) {
+    let { id: id , label: label , 'aria-labelledby': ariaLabelledby , 'aria-label': ariaLabel , labelElementType: labelElementType = 'label'  } = props;
+    id = $crOtA$useId(id);
+    let labelId = $crOtA$useId();
+    let labelProps = {
+    };
+    if (label) {
+        ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;
+        labelProps = {
+            id: labelId,
+            htmlFor: labelElementType === 'label' ? id : undefined
+        };
+    } else if (!ariaLabelledby && !ariaLabel) console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');
+    let fieldProps = $crOtA$useLabels({
+        id: id,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby
+    });
+    return {
+        labelProps: labelProps,
+        fieldProps: fieldProps
+    };
+}
+
+
+
+function $8f1f06f2efd295ee$export$294aa081a6c6f55d(props) {
+    let { description: description , errorMessage: errorMessage , validationState: validationState  } = props;
+    let { labelProps: labelProps , fieldProps: fieldProps  } = $6f8f5e0de5a77844$export$8467354a121f1b9f(props);
+    let descriptionId = $crOtA$useSlotId([
+        Boolean(description),
+        Boolean(errorMessage),
+        validationState
+    ]);
+    let errorMessageId = $crOtA$useSlotId([
+        Boolean(description),
+        Boolean(errorMessage),
+        validationState
+    ]);
+    fieldProps = $crOtA$mergeProps(fieldProps, {
+        'aria-describedby': [
+            descriptionId,
+            // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+            errorMessageId,
+            props['aria-describedby']
+        ].filter(Boolean).join(' ') || undefined
+    });
+    return {
+        labelProps: labelProps,
+        fieldProps: fieldProps,
+        descriptionProps: {
+            id: descriptionId
+        },
+        errorMessageProps: {
+            id: errorMessageId
+        }
     };
-  } else if (!ariaLabelledby && !ariaLabel) {
-    console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');
-  }
-
-  let fieldProps = useLabels({
-    id,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby
-  });
-  return {
-    labelProps,
-    fieldProps
-  };
 }
+
+
+
+
+
+export {$8f1f06f2efd295ee$export$294aa081a6c6f55d as useField, $6f8f5e0de5a77844$export$8467354a121f1b9f as useLabel};
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":";;AA+BA;;;;;OAKO,SAASA,QAAT,CAAkBC,KAAlB,EAAoD;AACzD,MAAI;AACFC,IAAAA,EADE;AAEFC,IAAAA,KAFE;AAGF,uBAAmBC,cAHjB;AAIF,kBAAcC,SAJZ;AAKFC,IAAAA,gBAAgB,GAAG;AALjB,MAMAL,KANJ;AAQAC,EAAAA,EAAE,GAAGK,KAAK,CAACL,EAAD,CAAV;AACA,MAAIM,OAAO,GAAGD,KAAK,EAAnB;AACA,MAAIE,UAAU,GAAG,EAAjB;;AACA,MAAIN,KAAJ,EAAW;AACTC,IAAAA,cAAc,GAAGA,cAAc,GAAMA,cAAN,SAAwBI,OAAxB,GAAoCA,OAAnE;AACAC,IAAAA,UAAU,GAAG;AACXP,MAAAA,EAAE,EAAEM,OADO;AAEXE,MAAAA,OAAO,EAAEJ,gBAAgB,KAAK,OAArB,GAA+BJ,EAA/B,GAAoCS;AAFlC,KAAb;AAID,GAND,MAMO,IAAI,CAACP,cAAD,IAAmB,CAACC,SAAxB,EAAmC;AACxCO,IAAAA,OAAO,CAACC,IAAR,CAAa,sHAAb;AACD;;AAED,MAAIC,UAAU,GAAGC,SAAS,CAAC;AACzBb,IAAAA,EADyB;AAEzB,kBAAcG,SAFW;AAGzB,uBAAmBD;AAHM,GAAD,CAA1B;AAMA,SAAO;AACLK,IAAAA,UADK;AAELK,IAAAA;AAFK,GAAP;AAID","sources":["./packages/@react-aria/label/src/useLabel.ts"],"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 {AriaLabelingProps, DOMProps, LabelableProps} from '@react-types/shared';\nimport {ElementType, HTMLAttributes, LabelHTMLAttributes} from 'react';\nimport {useId, useLabels} from '@react-aria/utils';\n\ninterface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {\n  /**\n   * The HTML element used to render the label, e.g. 'label', or 'span'.\n   * @default 'label'\n   */\n  labelElementType?: ElementType\n}\n\ninterface LabelAria {\n  /** Props to apply to the label container element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props to apply to the field container element being labeled. */\n  fieldProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n * @param props - The props for labels and fields.\n */\nexport function useLabel(props: LabelAriaProps): LabelAria {\n  let {\n    id,\n    label,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    labelElementType = 'label'\n  } = props;\n\n  id = useId(id);\n  let labelId = useId();\n  let labelProps = {};\n  if (label) {\n    ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;\n    labelProps = {\n      id: labelId,\n      htmlFor: labelElementType === 'label' ? id : undefined\n    };\n  } else if (!ariaLabelledby && !ariaLabel) {\n    console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');\n  }\n\n  let fieldProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  });\n\n  return {\n    labelProps,\n    fieldProps\n  };\n}\n"],"names":["useLabel","props","id","label","ariaLabelledby","ariaLabel","labelElementType","useId","labelId","labelProps","htmlFor","undefined","console","warn","fieldProps","useLabels"],"version":3,"file":"module.js.map"}
+{"mappings":";;;;;;;;;;;;SEoCgB,yCAAQ,CAAC,KAAqB,EAAa,CAAC;IAC1D,GAAG,CAAC,CAAC,KACH,EAAE,UACF,KAAK,GACL,CAAiB,kBAAE,cAAc,GACjC,CAAY,aAAE,SAAS,qBACvB,gBAAgB,GAAG,CAAO,QAC5B,CAAC,GAAG,KAAK;IAET,EAAE,GAAG,YAAK,CAAC,EAAE;IACb,GAAG,CAAC,OAAO,GAAG,YAAK;IACnB,GAAG,CAAC,UAAU,GAAG,CAAC;IAAA,CAAC;IACnB,EAAE,EAAE,KAAK,EAAE,CAAC;QACV,cAAc,GAAG,cAAc,MAAM,cAAc,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO;QAC1E,UAAU,GAAG,CAAC;YACZ,EAAE,EAAE,OAAO;YACX,OAAO,EAAE,gBAAgB,KAAK,CAAO,SAAG,EAAE,GAAG,SAAS;QACxD,CAAC;IACH,CAAC,MAAM,EAAE,GAAG,cAAc,KAAK,SAAS,EACtC,OAAO,CAAC,IAAI,CAAC,CAAsH;IAGrI,GAAG,CAAC,UAAU,GAAG,gBAAS,CAAC,CAAC;YAC1B,EAAE;QACF,CAAY,aAAE,SAAS;QACvB,CAAiB,kBAAE,cAAc;IACnC,CAAC;IAED,MAAM,CAAC,CAAC;oBACN,UAAU;oBACV,UAAU;IACZ,CAAC;AACH,CAAC;;;;SDrCe,yCAAQ,CAAC,KAAqB,EAAa,CAAC;IAC1D,GAAG,CAAC,CAAC,cAAA,WAAW,iBAAE,YAAY,oBAAE,eAAe,EAAA,CAAC,GAAG,KAAK;IACxD,GAAG,CAAC,CAAC,aAAA,UAAU,eAAE,UAAU,EAAA,CAAC,GAAG,yCAAQ,CAAC,KAAK;IAE7C,GAAG,CAAC,aAAa,GAAG,gBAAS,CAAC,CAAC;QAAA,OAAO,CAAC,WAAW;QAAG,OAAO,CAAC,YAAY;QAAG,eAAe;IAAA,CAAC;IAC5F,GAAG,CAAC,cAAc,GAAG,gBAAS,CAAC,CAAC;QAAA,OAAO,CAAC,WAAW;QAAG,OAAO,CAAC,YAAY;QAAG,eAAe;IAAA,CAAC;IAE7F,UAAU,GAAG,iBAAU,CAAC,UAAU,EAAE,CAAC;QACnC,CAAkB,mBAAE,CAAC;YACnB,aAAa;YACb,EAA0L,AAA1L,wLAA0L;YAC1L,cAAc;YACd,KAAK,CAAC,CAAkB;QAC1B,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAG,OAAK,SAAS;IAC1C,CAAC;IAED,MAAM,CAAC,CAAC;oBACN,UAAU;oBACV,UAAU;QACV,gBAAgB,EAAE,CAAC;YACjB,EAAE,EAAE,aAAa;QACnB,CAAC;QACD,iBAAiB,EAAE,CAAC;YAClB,EAAE,EAAE,cAAc;QACpB,CAAC;IACH,CAAC;AACH,CAAC","sources":["packages/@react-aria/label/src/index.ts","packages/@react-aria/label/src/useField.ts","packages/@react-aria/label/src/useLabel.ts"],"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\nexport * from './useField';\nexport * from './useLabel';\n","/*\n * Copyright 2021 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 {HelpTextProps, Validation} from '@react-types/shared';\nimport {HTMLAttributes} from 'react';\nimport {LabelAria, LabelAriaProps, useLabel} from './useLabel';\nimport {mergeProps, useSlotId} from '@react-aria/utils';\n\ninterface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation, 'isRequired'> {}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: HTMLAttributes<HTMLElement>,\n  /** Props for the error message element, if any. */\n  errorMessageProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display a description or error message.\n * @param props - Props for the Field.\n */\nexport function useField(props: AriaFieldProps): FieldAria {\n  let {description, errorMessage, validationState} = props;\n  let {labelProps, fieldProps} = useLabel(props);\n\n  let descriptionId = useSlotId([Boolean(description), Boolean(errorMessage), validationState]);\n  let errorMessageId = useSlotId([Boolean(description), Boolean(errorMessage), validationState]);\n\n  fieldProps = mergeProps(fieldProps, {\n    'aria-describedby': [\n      descriptionId,\n      // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268\n      errorMessageId,\n      props['aria-describedby']\n    ].filter(Boolean).join(' ') || undefined\n  });\n\n  return {\n    labelProps,\n    fieldProps,\n    descriptionProps: {\n      id: descriptionId\n    },\n    errorMessageProps: {\n      id: errorMessageId\n    }\n  };\n}\n","/*\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 {AriaLabelingProps, DOMProps, LabelableProps} from '@react-types/shared';\nimport {ElementType, LabelHTMLAttributes} from 'react';\nimport {useId, useLabels} from '@react-aria/utils';\n\nexport interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {\n  /**\n   * The HTML element used to render the label, e.g. 'label', or 'span'.\n   * @default 'label'\n   */\n  labelElementType?: ElementType\n}\n\nexport interface LabelAria {\n  /** Props to apply to the label container element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props to apply to the field container element being labeled. */\n  fieldProps: AriaLabelingProps & DOMProps\n}\n\n/**\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n * @param props - The props for labels and fields.\n */\nexport function useLabel(props: LabelAriaProps): LabelAria {\n  let {\n    id,\n    label,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    labelElementType = 'label'\n  } = props;\n\n  id = useId(id);\n  let labelId = useId();\n  let labelProps = {};\n  if (label) {\n    ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;\n    labelProps = {\n      id: labelId,\n      htmlFor: labelElementType === 'label' ? id : undefined\n    };\n  } else if (!ariaLabelledby && !ariaLabel) {\n    console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');\n  }\n\n  let fieldProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  });\n\n  return {\n    labelProps,\n    fieldProps\n  };\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,17 +1,17 @@
-import { AriaLabelingProps, DOMProps, LabelableProps } from "@react-types/shared";
-import { ElementType, HTMLAttributes, LabelHTMLAttributes } from "react";
-interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
+import { AriaLabelingProps, DOMProps, LabelableProps, HelpTextProps, Validation } from "@react-types/shared";
+import { ElementType, LabelHTMLAttributes, HTMLAttributes } from "react";
+export interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
     /**
      * The HTML element used to render the label, e.g. 'label', or 'span'.
      * @default 'label'
      */
     labelElementType?: ElementType;
 }
-interface LabelAria {
+export interface LabelAria {
     /** Props to apply to the label container element. */
     labelProps: LabelHTMLAttributes<HTMLLabelElement>;
     /** Props to apply to the field container element being labeled. */
-    fieldProps: HTMLAttributes<HTMLElement>;
+    fieldProps: AriaLabelingProps & DOMProps;
 }
 /**
  * Provides the accessibility implementation for labels and their associated elements.
@@ -19,5 +19,19 @@ interface LabelAria {
  * @param props - The props for labels and fields.
  */
 export function useLabel(props: LabelAriaProps): LabelAria;
+interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation, 'isRequired'> {
+}
+export interface FieldAria extends LabelAria {
+    /** Props for the description element, if any. */
+    descriptionProps: HTMLAttributes<HTMLElement>;
+    /** Props for the error message element, if any. */
+    errorMessageProps: HTMLAttributes<HTMLElement>;
+}
+/**
+ * Provides the accessibility implementation for input fields.
+ * Fields accept user input, gain context from their label, and may display a description or error message.
+ * @param props - Props for the Field.
+ */
+export function useField(props: AriaFieldProps): FieldAria;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"A;A;AAgBA,wBAAyB,SAAQ,cAAc,EAAE,QAAQ,EAAE,iBAAiB;IAC1E;A;A;OAGG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAA;CAC/B;AAED;IACE,qDAAqD;IACrD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mEAAmE;IACnE,UAAU,EAAE,eAAe,WAAW,CAAC,CAAA;CACxC;AAED;A;A;A;GAIG;AACH,yBAAyB,KAAK,EAAE,cAAc,GAAG,SAAS,CAgCzD","sources":["./packages/@react-aria/label/src/packages/@react-aria/label/src/useLabel.ts","./packages/@react-aria/label/src/packages/@react-aria/label/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;AAgBA,+BAAgC,SAAQ,cAAc,EAAE,QAAQ,EAAE,iBAAiB;IACjF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAA;CAC/B;AAED;IACE,qDAAqD;IACrD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mEAAmE;IACnE,UAAU,EAAE,iBAAiB,GAAG,QAAQ,CAAA;CACzC;AAED;;;;GAIG;AACH,yBAAyB,KAAK,EAAE,cAAc,GAAG,SAAS,CAgCzD;ACnDD,wBAAyB,SAAQ,cAAc,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC;CAAG;AAEjG,0BAA2B,SAAQ,SAAS;IAC1C,iDAAiD;IACjD,gBAAgB,EAAE,eAAe,WAAW,CAAC,CAAC;IAC9C,mDAAmD;IACnD,iBAAiB,EAAE,eAAe,WAAW,CAAC,CAAA;CAC/C;AAED;;;;GAIG;AACH,yBAAyB,KAAK,EAAE,cAAc,GAAG,SAAS,CA0BzD","sources":["packages/@react-aria/label/src/packages/@react-aria/label/src/useLabel.ts","packages/@react-aria/label/src/packages/@react-aria/label/src/useField.ts","packages/@react-aria/label/src/packages/@react-aria/label/src/index.ts","packages/@react-aria/label/src/index.ts"],"sourcesContent":[null,null,null,"/*\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\nexport * from './useField';\nexport * from './useLabel';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/label",
-  "version": "3.1.3",
+  "version": "3.2.3",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/utils": "^3.8.2",
-    "@react-types/label": "^3.4.1",
-    "@react-types/shared": "^3.8.0"
+    "@react-aria/utils": "^3.11.2",
+    "@react-types/label": "^3.5.2",
+    "@react-types/shared": "^3.11.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1"
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9204e1b8cb61dac767e91087fb16203611dc67c5"
+  "gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
 }

package/src/index.ts

@@ -10,4 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
+export * from './useField';
 export * from './useLabel';

package/src/useField.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {HelpTextProps, Validation} from '@react-types/shared';
+import {HTMLAttributes} from 'react';
+import {LabelAria, LabelAriaProps, useLabel} from './useLabel';
+import {mergeProps, useSlotId} from '@react-aria/utils';
+
+interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation, 'isRequired'> {}
+
+export interface FieldAria extends LabelAria {
+  /** Props for the description element, if any. */
+  descriptionProps: HTMLAttributes<HTMLElement>,
+  /** Props for the error message element, if any. */
+  errorMessageProps: HTMLAttributes<HTMLElement>
+}
+
+/**
+ * Provides the accessibility implementation for input fields.
+ * Fields accept user input, gain context from their label, and may display a description or error message.
+ * @param props - Props for the Field.
+ */
+export function useField(props: AriaFieldProps): FieldAria {
+  let {description, errorMessage, validationState} = props;
+  let {labelProps, fieldProps} = useLabel(props);
+
+  let descriptionId = useSlotId([Boolean(description), Boolean(errorMessage), validationState]);
+  let errorMessageId = useSlotId([Boolean(description), Boolean(errorMessage), validationState]);
+
+  fieldProps = mergeProps(fieldProps, {
+    'aria-describedby': [
+      descriptionId,
+      // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+      errorMessageId,
+      props['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined
+  });
+
+  return {
+    labelProps,
+    fieldProps,
+    descriptionProps: {
+      id: descriptionId
+    },
+    errorMessageProps: {
+      id: errorMessageId
+    }
+  };
+}

package/src/useLabel.ts

@@ -11,10 +11,10 @@
  */
 
 import {AriaLabelingProps, DOMProps, LabelableProps} from '@react-types/shared';
-import {ElementType, HTMLAttributes, LabelHTMLAttributes} from 'react';
+import {ElementType, LabelHTMLAttributes} from 'react';
 import {useId, useLabels} from '@react-aria/utils';
 
-interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
+export interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
   /**
    * The HTML element used to render the label, e.g. 'label', or 'span'.
    * @default 'label'
@@ -22,11 +22,11 @@ interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
   labelElementType?: ElementType
 }
 
-interface LabelAria {
+export interface LabelAria {
   /** Props to apply to the label container element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props to apply to the field container element being labeled. */
-  fieldProps: HTMLAttributes<HTMLElement>
+  fieldProps: AriaLabelingProps & DOMProps
 }
 
 /**