@react-aria/textfield - npm Package Compare versions

Comparing version 3.0.0-nightly-d87cc4422-250109 to 3.0.0-nightly-da4ef7644-250826

dist/types.d.ts

 import { AriaTextFieldProps } from "@react-types/textfield";
+import { DOMAttributes, ValidationResult, RefObject as _RefObject1 } from "@react-types/shared";
 import { HTMLAttributes, JSX, LabelHTMLAttributes, RefObject } from "react";
-import { DOMAttributes, ValidationResult, RefObject as _RefObject1 } from "@react-types/shared";
 /**
@@ -52,2 +52,6 @@ * A map of HTML element names and their interface types.
     autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    /**
+     * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
+     */
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 }
@@ -54,0 +58,0 @@ /**

dist/useTextField.main.js

@@ -0,6 +1,6 @@
+var $4Z7CR$reactariautils = require("@react-aria/utils");
 var $4Z7CR$react = require("react");
-var $4Z7CR$reactariautils = require("@react-aria/utils");
 var $4Z7CR$reactstatelyutils = require("@react-stately/utils");
 var $4Z7CR$reactarialabel = require("@react-aria/label");
-var $4Z7CR$reactariafocus = require("@react-aria/focus");
+var $4Z7CR$reactariainteractions = require("@react-aria/interactions");
 var $4Z7CR$reactariaform = require("@react-aria/form");
@@ -10,2 +10,6 @@ var $4Z7CR$reactstatelyform = require("@react-stately/form");
 
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
 function $parcel$export(e, n, v, s) {
@@ -36,3 +40,3 @@ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
     let [value, setValue] = (0, $4Z7CR$reactstatelyutils.useControlledState)(props.value, props.defaultValue || '', props.onChange);
-    let { focusableProps: focusableProps } = (0, $4Z7CR$reactariafocus.useFocusable)(props, ref);
+    let { focusableProps: focusableProps } = (0, $4Z7CR$reactariainteractions.useFocusable)(props, ref);
     let validationState = (0, $4Z7CR$reactstatelyform.useFormValidationState)({
@@ -55,3 +59,5 @@ ...props,
     };
-    (0, $4Z7CR$reactariautils.useFormReset)(ref, value, setValue);
+    let [initialValue] = (0, $4Z7CR$react.useState)(value);
+    var _props_defaultValue;
+    (0, $4Z7CR$reactariautils.useFormReset)(ref, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : initialValue, setValue);
     (0, $4Z7CR$reactariaform.useFormValidation)(props, validationState, ref);
@@ -89,2 +95,3 @@ (0, $4Z7CR$react.useEffect)(()=>{
             'aria-haspopup': props['aria-haspopup'],
+            'aria-controls': props['aria-controls'],
             value: value,
@@ -97,4 +104,8 @@ onChange: (e)=>setValue(e.target.value),
             name: props.name,
+            form: props.form,
             placeholder: props.placeholder,
             inputMode: props.inputMode,
+            autoCorrect: props.autoCorrect,
+            spellCheck: props.spellCheck,
+            [parseInt((0, ($parcel$interopDefault($4Z7CR$react))).version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: props.enterKeyHint,
             // Clipboard events
@@ -101,0 +112,0 @@ onCopy: props.onCopy,

dist/useTextField.module.js

@@ -1,6 +0,6 @@
-import {useEffect as $ig234$useEffect} from "react";
 import {filterDOMProps as $ig234$filterDOMProps, useFormReset as $ig234$useFormReset, getOwnerWindow as $ig234$getOwnerWindow, mergeProps as $ig234$mergeProps} from "@react-aria/utils";
+import $ig234$react, {useState as $ig234$useState, useEffect as $ig234$useEffect} from "react";
 import {useControlledState as $ig234$useControlledState} from "@react-stately/utils";
 import {useField as $ig234$useField} from "@react-aria/label";
-import {useFocusable as $ig234$useFocusable} from "@react-aria/focus";
+import {useFocusable as $ig234$useFocusable} from "@react-aria/interactions";
 import {useFormValidation as $ig234$useFormValidation} from "@react-aria/form";
@@ -47,3 +47,5 @@ import {useFormValidationState as $ig234$useFormValidationState} from "@react-stately/form";
     };
-    (0, $ig234$useFormReset)(ref, value, setValue);
+    let [initialValue] = (0, $ig234$useState)(value);
+    var _props_defaultValue;
+    (0, $ig234$useFormReset)(ref, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : initialValue, setValue);
     (0, $ig234$useFormValidation)(props, validationState, ref);
@@ -81,2 +83,3 @@ (0, $ig234$useEffect)(()=>{
             'aria-haspopup': props['aria-haspopup'],
+            'aria-controls': props['aria-controls'],
             value: value,
@@ -89,4 +92,8 @@ onChange: (e)=>setValue(e.target.value),
             name: props.name,
+            form: props.form,
             placeholder: props.placeholder,
             inputMode: props.inputMode,
+            autoCorrect: props.autoCorrect,
+            spellCheck: props.spellCheck,
+            [parseInt((0, $ig234$react).version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: props.enterKeyHint,
             // Clipboard events
@@ -93,0 +100,0 @@ onCopy: props.onCopy,

package.json

 {
   "name": "@react-aria/textfield",
-  "version": "3.0.0-nightly-d87cc4422-250109",
+  "version": "3.0.0-nightly-da4ef7644-250826",
   "description": "Spectrum UI components in React",
@@ -9,3 +9,7 @@ "license": "Apache-2.0",
   "exports": {
-    "types": "./dist/types.d.ts",
+    "source": "./src/index.ts",
+    "types": [
+      "./dist/types.d.ts",
+      "./src/index.ts"
+    ],
     "import": "./dist/import.mjs",
@@ -26,14 +30,15 @@ "require": "./dist/main.js"
   "dependencies": {
-    "@react-aria/focus": "3.0.0-nightly-d87cc4422-250109",
-    "@react-aria/form": "3.0.0-nightly-d87cc4422-250109",
-    "@react-aria/label": "3.0.0-nightly-d87cc4422-250109",
-    "@react-aria/utils": "3.0.0-nightly-d87cc4422-250109",
-    "@react-stately/form": "3.0.0-nightly-d87cc4422-250109",
-    "@react-stately/utils": "3.0.0-nightly-d87cc4422-250109",
-    "@react-types/shared": "3.0.0-nightly-d87cc4422-250109",
-    "@react-types/textfield": "3.0.0-nightly-d87cc4422-250109",
+    "@react-aria/form": "3.0.0-nightly-da4ef7644-250826",
+    "@react-aria/interactions": "3.0.0-nightly-da4ef7644-250826",
+    "@react-aria/label": "3.0.0-nightly-da4ef7644-250826",
+    "@react-aria/utils": "3.0.0-nightly-da4ef7644-250826",
+    "@react-stately/form": "3.0.0-nightly-da4ef7644-250826",
+    "@react-stately/utils": "3.0.0-nightly-da4ef7644-250826",
+    "@react-types/shared": "3.0.0-nightly-da4ef7644-250826",
+    "@react-types/textfield": "3.0.0-nightly-da4ef7644-250826",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
@@ -40,0 +45,0 @@ "publishConfig": {

src/useTextField.ts

@@ -14,3 +14,5 @@ /*
 import {AriaTextFieldProps} from '@react-types/textfield';
-import {
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
+import {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';
+import React, {
   ChangeEvent,
@@ -21,9 +23,8 @@ HTMLAttributes,
   RefObject,
-  useEffect
+  useEffect,
+  useState
 } from 'react';
-import {DOMAttributes, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';
 import {useControlledState} from '@react-stately/utils';
 import {useField} from '@react-aria/label';
-import {useFocusable} from '@react-aria/focus';
+import {useFocusable} from '@react-aria/interactions';
 import {useFormValidation} from '@react-aria/form';
@@ -86,3 +87,7 @@ import {useFormValidationState} from '@react-stately/form';
    */
-  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
+  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters',
+  /**
+   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
+   */
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
 }
@@ -144,3 +149,4 @@
 
-  useFormReset(ref, value, setValue);
+  let [initialValue] = useState(value);
+  useFormReset(ref, props.defaultValue ?? initialValue, setValue);
   useFormValidation(props, validationState, ref);
@@ -181,2 +187,3 @@
         'aria-haspopup': props['aria-haspopup'],
+        'aria-controls': props['aria-controls'],
         value,
@@ -189,4 +196,8 @@ onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),
         name: props.name,
+        form: props.form,
         placeholder: props.placeholder,
         inputMode: props.inputMode,
+        autoCorrect: props.autoCorrect,
+        spellCheck: props.spellCheck,
+        [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: props.enterKeyHint,
 
@@ -193,0 +204,0 @@ // Clipboard events

No alert changes

Improved metrics

Total package byte prevSize

118916

4.19%

Lines of code

1230

3.27%

Worsened metrics

Dependency count

11

10%

Dependency changes

• + Added

  @react-aria/interactions@3.0.0-nightly-da4ef7644-250826

• + Added

  @react-aria/form@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-aria/interactions@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-aria/label@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-aria/ssr@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-aria/utils@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-stately/flags@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-stately/form@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-stately/utils@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-types/shared@3.0.0-nightly-da4ef7644-250826
  (transitive)

• + Added

  @react-types/textfield@3.0.0-nightly-da4ef7644-250826
  (transitive)

• - Removed

  @react-aria/focus@3.0.0-nightly-d87cc4422-250109

• - Removed

  @react-aria/focus@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-aria/form@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-aria/interactions@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-aria/label@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-aria/ssr@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-aria/utils@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-stately/form@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-stately/utils@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-types/shared@3.0.0-nightly-d87cc4422-250109
  (transitive)

• - Removed

  @react-types/textfield@3.0.0-nightly-d87cc4422-250109
  (transitive)

• Updated

  @react-aria/form@3.0.0-nightly-da4ef7644-250826

• Updated

  @react-aria/label@3.0.0-nightly-da4ef7644-250826

• Updated

  @react-aria/utils@3.0.0-nightly-da4ef7644-250826

• Updated

  @react-stately/form@3.0.0-nightly-da4ef7644-250826

• Updated

  @react-stately/utils@3.0.0-nightly-da4ef7644-250826

• Updated

  @react-types/shared@3.0.0-nightly-da4ef7644-250826

• Updated

  @react-types/textfield@3.0.0-nightly-da4ef7644-250826