@react-aria/label 3.1.1 → 3.2.1

package/dist/main.js

@@ -1,6 +1,8 @@
 var {
   useId,
-  useLabels
+  useLabels,
+  mergeProps,
+  useSlotId
 } = require("@react-aria/utils");
 
 /**
@@ -42,4 +44,39 @@ function useLabel(props) {
 }
 
 exports.useLabel = useLabel;
+
+/**
+ * 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.
+ */
+function useField(props) {
+  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
+    }
+  };
+}
+
+exports.useField = useField;
 //# 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":";;;;;;;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;;;;AC1CD;;;;;AAKO,SAASE,QAAT,CAAkBf,KAAlB,EAAoD;AACzD,MAAI;AAACgB,IAAAA,WAAD;AAAcC,IAAAA,YAAd;AAA4BC,IAAAA;AAA5B,MAA+ClB,KAAnD;AACA,MAAI;AAACQ,IAAAA,UAAD;AAAaK,IAAAA;AAAb,MAA2B,SAASb,KAAT,CAA/B;AAEA,MAAImB,aAAa,GAAGC,SAAS,CAAC,CAACC,OAAO,CAACL,WAAD,CAAR,EAAuBK,OAAO,CAACJ,YAAD,CAA9B,EAA8CC,eAA9C,CAAD,CAA7B;AACA,MAAII,cAAc,GAAGF,SAAS,CAAC,CAACC,OAAO,CAACL,WAAD,CAAR,EAAuBK,OAAO,CAACJ,YAAD,CAA9B,EAA8CC,eAA9C,CAAD,CAA9B;AAEAL,EAAAA,UAAU,GAAGU,UAAU,CAACV,UAAD,EAAa;AAClC,wBAAoB,CAClBM,aADkB,EAElB;AACAG,IAAAA,cAHkB,EAIlBtB,KAAK,CAAC,kBAAD,CAJa,EAKlBwB,MALkB,CAKXH,OALW,EAKFI,IALE,CAKG,GALH,KAKWf;AANG,GAAb,CAAvB;AASA,SAAO;AACLF,IAAAA,UADK;AAELK,IAAAA,UAFK;AAGLa,IAAAA,gBAAgB,EAAE;AAChBzB,MAAAA,EAAE,EAAEkB;AADY,KAHb;AAMLQ,IAAAA,iBAAiB,EAAE;AACjB1B,MAAAA,EAAE,EAAEqB;AADa;AANd,GAAP;AAUD","sources":["./packages/@react-aria/label/src/useLabel.ts","./packages/@react-aria/label/src/useField.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, 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","/*\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"],"names":["useLabel","props","id","label","ariaLabelledby","ariaLabel","labelElementType","useId","labelId","labelProps","htmlFor","undefined","console","warn","fieldProps","useLabels","useField","description","errorMessage","validationState","descriptionId","useSlotId","Boolean","errorMessageId","mergeProps","filter","join","descriptionProps","errorMessageProps"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,4 +1,4 @@
-import { useId, useLabels } from "@react-aria/utils";
+import { useId, useLabels, mergeProps, useSlotId } from "@react-aria/utils";
 
 /**
  * Provides the accessibility implementation for labels and their associated elements.
@@ -37,4 +37,37 @@ export function useLabel(props) {
     fieldProps
   };
 }
+
+/**
+ * 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) {
+  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
+    }
+  };
+}
 //# 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":";;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;;AC1CD;;;;;OAKO,SAASE,QAAT,CAAkBf,KAAlB,EAAoD;AACzD,MAAI;AAACgB,IAAAA,WAAD;AAAcC,IAAAA,YAAd;AAA4BC,IAAAA;AAA5B,MAA+ClB,KAAnD;AACA,MAAI;AAACQ,IAAAA,UAAD;AAAaK,IAAAA;AAAb,MAA2B,SAASb,KAAT,CAA/B;AAEA,MAAImB,aAAa,GAAGC,SAAS,CAAC,CAACC,OAAO,CAACL,WAAD,CAAR,EAAuBK,OAAO,CAACJ,YAAD,CAA9B,EAA8CC,eAA9C,CAAD,CAA7B;AACA,MAAII,cAAc,GAAGF,SAAS,CAAC,CAACC,OAAO,CAACL,WAAD,CAAR,EAAuBK,OAAO,CAACJ,YAAD,CAA9B,EAA8CC,eAA9C,CAAD,CAA9B;AAEAL,EAAAA,UAAU,GAAGU,UAAU,CAACV,UAAD,EAAa;AAClC,wBAAoB,CAClBM,aADkB,EAElB;AACAG,IAAAA,cAHkB,EAIlBtB,KAAK,CAAC,kBAAD,CAJa,EAKlBwB,MALkB,CAKXH,OALW,EAKFI,IALE,CAKG,GALH,KAKWf;AANG,GAAb,CAAvB;AASA,SAAO;AACLF,IAAAA,UADK;AAELK,IAAAA,UAFK;AAGLa,IAAAA,gBAAgB,EAAE;AAChBzB,MAAAA,EAAE,EAAEkB;AADY,KAHb;AAMLQ,IAAAA,iBAAiB,EAAE;AACjB1B,MAAAA,EAAE,EAAEqB;AADa;AANd,GAAP;AAUD","sources":["./packages/@react-aria/label/src/useLabel.ts","./packages/@react-aria/label/src/useField.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, 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","/*\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"],"names":["useLabel","props","id","label","ariaLabelledby","ariaLabel","labelElementType","useId","labelId","labelProps","htmlFor","undefined","console","warn","fieldProps","useLabels","useField","description","errorMessage","validationState","descriptionId","useSlotId","Boolean","errorMessageId","mergeProps","filter","join","descriptionProps","errorMessageProps"],"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":"A;A;AAgBA,+BAAgC,SAAQ,cAAc,EAAE,QAAQ,EAAE,iBAAiB;IACjF;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,iBAAiB,GAAG,QAAQ,CAAA;CACzC;AAED;A;A;A;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;A;A;A;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"],"sourcesContent":[null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/label",
-  "version": "3.1.1",
+  "version": "3.2.1",
   "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.3.0",
-    "@react-types/label": "^3.2.1",
-    "@react-types/shared": "^3.2.1"
+    "@react-aria/utils": "^3.10.0",
+    "@react-types/label": "^3.5.0",
+    "@react-types/shared": "^3.10.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1"
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0778f71a3c13e1e24388a23b6d525e3b9f5b98f1"
+  "gitHead": "896eabe5521a0349a675c4773ed7629addd4b8c4"
 }

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
 }
 
 /**