@react-spectrum/textfield 3.9.2 → 3.10.0

package/dist/import.mjs

@@ -0,0 +1,295 @@
+import "./main.css";
+import {useLayoutEffect as $evhxb$useLayoutEffect, chain as $evhxb$chain, mergeProps as $evhxb$mergeProps} from "@react-aria/utils";
+import $evhxb$react, {useRef as $evhxb$useRef, useCallback as $evhxb$useCallback, useImperativeHandle as $evhxb$useImperativeHandle, cloneElement as $evhxb$cloneElement, forwardRef as $evhxb$forwardRef} from "react";
+import {useControlledState as $evhxb$useControlledState} from "@react-stately/utils";
+import {useProviderProps as $evhxb$useProviderProps} from "@react-spectrum/provider";
+import {useTextField as $evhxb$useTextField} from "@react-aria/textfield";
+import $evhxb$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
+import $evhxb$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
+import {createFocusableRef as $evhxb$createFocusableRef, classNames as $evhxb$classNames} from "@react-spectrum/utils";
+import {Field as $evhxb$Field} from "@react-spectrum/label";
+import {useFocusRing as $evhxb$useFocusRing} from "@react-aria/focus";
+import {useHover as $evhxb$useHover} from "@react-aria/interactions";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+/*
+ * Copyright 2020 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.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2020 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.
+ */ 
+
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+var $c14528ddc146317f$exports = {};
+
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-input", () => $c14528ddc146317f$export$1ac009feb2b0bd0c, (v) => $c14528ddc146317f$export$1ac009feb2b0bd0c = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield", () => $c14528ddc146317f$export$2c8a10299d8b3418, (v) => $c14528ddc146317f$export$2c8a10299d8b3418 = v);
+$parcel$export($c14528ddc146317f$exports, "focus-ring", () => $c14528ddc146317f$export$f39a09f249340e2a, (v) => $c14528ddc146317f$export$f39a09f249340e2a = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--quiet", () => $c14528ddc146317f$export$bffd5e3d61a81737, (v) => $c14528ddc146317f$export$bffd5e3d61a81737 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--multiline", () => $c14528ddc146317f$export$9699f1c538a448a0, (v) => $c14528ddc146317f$export$9699f1c538a448a0 = v);
+$parcel$export($c14528ddc146317f$exports, "is-placeholder", () => $c14528ddc146317f$export$e5b2f5233e4e5194, (v) => $c14528ddc146317f$export$e5b2f5233e4e5194 = v);
+$parcel$export($c14528ddc146317f$exports, "is-hovered", () => $c14528ddc146317f$export$b8813cd5d7824ce7, (v) => $c14528ddc146317f$export$b8813cd5d7824ce7 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--valid", () => $c14528ddc146317f$export$c2abbc3f970170b7, (v) => $c14528ddc146317f$export$c2abbc3f970170b7 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--invalid", () => $c14528ddc146317f$export$58e50b10d30123df, (v) => $c14528ddc146317f$export$58e50b10d30123df = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--loadable", () => $c14528ddc146317f$export$14fd30fea6f1348c, (v) => $c14528ddc146317f$export$14fd30fea6f1348c = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-wrapper", () => $c14528ddc146317f$export$dd1165e0e6012973, (v) => $c14528ddc146317f$export$dd1165e0e6012973 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-wrapper--quiet", () => $c14528ddc146317f$export$9fcb3d6af94a9d12, (v) => $c14528ddc146317f$export$9fcb3d6af94a9d12 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-validationIcon", () => $c14528ddc146317f$export$cf0ead5b44db0da3, (v) => $c14528ddc146317f$export$cf0ead5b44db0da3 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-icon", () => $c14528ddc146317f$export$222d1ccd1870be1d, (v) => $c14528ddc146317f$export$222d1ccd1870be1d = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-inputIcon", () => $c14528ddc146317f$export$c1cdcaa5fe76a871, (v) => $c14528ddc146317f$export$c1cdcaa5fe76a871 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-circleLoader", () => $c14528ddc146317f$export$82a249fb4d6127, (v) => $c14528ddc146317f$export$82a249fb4d6127 = v);
+$parcel$export($c14528ddc146317f$exports, "is-focused", () => $c14528ddc146317f$export$e7dc768d35940237, (v) => $c14528ddc146317f$export$e7dc768d35940237 = v);
+$parcel$export($c14528ddc146317f$exports, "is-disabled", () => $c14528ddc146317f$export$d35bc1e505d1ebbf, (v) => $c14528ddc146317f$export$d35bc1e505d1ebbf = v);
+var $c14528ddc146317f$export$1ac009feb2b0bd0c;
+var $c14528ddc146317f$export$2c8a10299d8b3418;
+var $c14528ddc146317f$export$f39a09f249340e2a;
+var $c14528ddc146317f$export$bffd5e3d61a81737;
+var $c14528ddc146317f$export$9699f1c538a448a0;
+var $c14528ddc146317f$export$e5b2f5233e4e5194;
+var $c14528ddc146317f$export$b8813cd5d7824ce7;
+var $c14528ddc146317f$export$c2abbc3f970170b7;
+var $c14528ddc146317f$export$58e50b10d30123df;
+var $c14528ddc146317f$export$14fd30fea6f1348c;
+var $c14528ddc146317f$export$dd1165e0e6012973;
+var $c14528ddc146317f$export$9fcb3d6af94a9d12;
+var $c14528ddc146317f$export$cf0ead5b44db0da3;
+var $c14528ddc146317f$export$222d1ccd1870be1d;
+var $c14528ddc146317f$export$c1cdcaa5fe76a871;
+var $c14528ddc146317f$export$82a249fb4d6127;
+var $c14528ddc146317f$export$e7dc768d35940237;
+var $c14528ddc146317f$export$d35bc1e505d1ebbf;
+$c14528ddc146317f$export$1ac009feb2b0bd0c = "spectrum-Textfield-input_73bc77";
+$c14528ddc146317f$export$2c8a10299d8b3418 = "spectrum-Textfield_73bc77";
+$c14528ddc146317f$export$f39a09f249340e2a = "focus-ring_73bc77";
+$c14528ddc146317f$export$bffd5e3d61a81737 = "spectrum-Textfield--quiet_73bc77";
+$c14528ddc146317f$export$9699f1c538a448a0 = "spectrum-Textfield--multiline_73bc77";
+$c14528ddc146317f$export$e5b2f5233e4e5194 = "is-placeholder_73bc77";
+$c14528ddc146317f$export$b8813cd5d7824ce7 = "is-hovered_73bc77";
+$c14528ddc146317f$export$c2abbc3f970170b7 = "spectrum-Textfield--valid_73bc77";
+$c14528ddc146317f$export$58e50b10d30123df = "spectrum-Textfield--invalid_73bc77";
+$c14528ddc146317f$export$14fd30fea6f1348c = "spectrum-Textfield--loadable_73bc77";
+$c14528ddc146317f$export$dd1165e0e6012973 = "spectrum-Textfield-wrapper_73bc77";
+$c14528ddc146317f$export$9fcb3d6af94a9d12 = "spectrum-Textfield-wrapper--quiet_73bc77";
+$c14528ddc146317f$export$cf0ead5b44db0da3 = "spectrum-Textfield-validationIcon_73bc77";
+$c14528ddc146317f$export$222d1ccd1870be1d = "spectrum-Textfield-icon_73bc77";
+$c14528ddc146317f$export$c1cdcaa5fe76a871 = "spectrum-Textfield-inputIcon_73bc77";
+$c14528ddc146317f$export$82a249fb4d6127 = "spectrum-Textfield-circleLoader_73bc77";
+$c14528ddc146317f$export$e7dc768d35940237 = "is-focused_73bc77";
+$c14528ddc146317f$export$d35bc1e505d1ebbf = "is-disabled_73bc77";
+
+
+
+
+function $599adb75312e6492$var$TextFieldBase(props, ref) {
+    let { validationState: validationState , icon: icon , isQuiet: isQuiet = false , isDisabled: isDisabled , multiLine: multiLine , autoFocus: autoFocus , inputClassName: inputClassName , wrapperChildren: wrapperChildren , labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps , inputRef: userInputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName , disableFocusRing: disableFocusRing  } = props;
+    let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $evhxb$useHover)({
+        isDisabled: isDisabled
+    });
+    let domRef = (0, $evhxb$useRef)(null);
+    let defaultInputRef = (0, $evhxb$useRef)(null);
+    let inputRef = userInputRef || defaultInputRef;
+    // Expose imperative interface for ref
+    (0, $evhxb$useImperativeHandle)(ref, ()=>({
+            ...(0, $evhxb$createFocusableRef)(domRef, inputRef),
+            select () {
+                if (inputRef.current) inputRef.current.select();
+            },
+            getInputElement () {
+                return inputRef.current;
+            }
+        }));
+    let ElementType = multiLine ? "textarea" : "input";
+    let isInvalid = validationState === "invalid" && !isDisabled;
+    if (icon) {
+        let UNSAFE_className = (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), icon.props && icon.props.UNSAFE_className, "spectrum-Textfield-icon");
+        icon = /*#__PURE__*/ (0, $evhxb$cloneElement)(icon, {
+            UNSAFE_className: UNSAFE_className,
+            size: "S"
+        });
+    }
+    let validationIcon = isInvalid ? /*#__PURE__*/ (0, $evhxb$react).createElement((0, $evhxb$spectrumiconsuiAlertMedium), null) : /*#__PURE__*/ (0, $evhxb$react).createElement((0, $evhxb$spectrumiconsuiCheckmarkMedium), null);
+    let validation = /*#__PURE__*/ (0, $evhxb$cloneElement)(validationIcon, {
+        UNSAFE_className: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield-validationIcon", validationIconClassName)
+    });
+    let { focusProps: focusProps , isFocusVisible: isFocusVisible  } = (0, $evhxb$useFocusRing)({
+        isTextInput: true,
+        autoFocus: autoFocus
+    });
+    let textField = /*#__PURE__*/ (0, $evhxb$react).createElement("div", {
+        className: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield", {
+            "spectrum-Textfield--invalid": isInvalid,
+            "spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
+            "spectrum-Textfield--loadable": loadingIndicator,
+            "spectrum-Textfield--quiet": isQuiet,
+            "spectrum-Textfield--multiline": multiLine,
+            "focus-ring": !disableFocusRing && isFocusVisible
+        })
+    }, /*#__PURE__*/ (0, $evhxb$react).createElement(ElementType, {
+        ...(0, $evhxb$mergeProps)(inputProps, hoverProps, focusProps),
+        ref: inputRef,
+        rows: multiLine ? 1 : undefined,
+        className: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield-input", {
+            "spectrum-Textfield-inputIcon": icon,
+            "is-hovered": isHovered
+        }, inputClassName)
+    }), icon, validationState && !isLoading && !isDisabled ? validation : null, isLoading && loadingIndicator, wrapperChildren);
+    return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $evhxb$Field), {
+        ...props,
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        wrapperClassName: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield-wrapper", {
+            "spectrum-Textfield-wrapper--quiet": isQuiet
+        }),
+        showErrorIcon: false,
+        ref: domRef
+    }, textField);
+}
+const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $evhxb$forwardRef)($599adb75312e6492$var$TextFieldBase);
+
+
+
+
+
+function $cc187bf91f8eea73$var$TextArea(props, ref) {
+    props = (0, $evhxb$useProviderProps)(props);
+    let { isDisabled: isDisabled = false , isQuiet: isQuiet = false , isReadOnly: isReadOnly = false , isRequired: isRequired = false , onChange: onChange , ...otherProps } = props;
+    // not in stately because this is so we know when to re-measure, which is a spectrum design
+    let [inputValue, setInputValue] = (0, $evhxb$useControlledState)(props.value, props.defaultValue, ()=>{});
+    let inputRef = (0, $evhxb$useRef)(null);
+    let onHeightChange = (0, $evhxb$useCallback)(()=>{
+        // Quiet textareas always grow based on their text content.
+        // Standard textareas also grow by default, unless an explicit height is set.
+        if ((isQuiet || !props.height) && inputRef.current) {
+            let input = inputRef.current;
+            let prevAlignment = input.style.alignSelf;
+            let prevOverflow = input.style.overflow;
+            // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
+            // The measure/applied height is also incorrect/reset if we turn on and off
+            // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
+            let isFirefox = "MozAppearance" in input.style;
+            if (!isFirefox) input.style.overflow = "hidden";
+            input.style.alignSelf = "start";
+            input.style.height = "auto";
+            // offsetHeight - clientHeight accounts for the border/padding.
+            input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+            input.style.overflow = prevOverflow;
+            input.style.alignSelf = prevAlignment;
+        }
+    }, [
+        isQuiet,
+        inputRef,
+        props.height
+    ]);
+    (0, $evhxb$useLayoutEffect)(()=>{
+        if (inputRef.current) onHeightChange();
+    }, [
+        onHeightChange,
+        inputValue,
+        inputRef
+    ]);
+    if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text");
+    let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $evhxb$useTextField)({
+        ...props,
+        onChange: (0, $evhxb$chain)(onChange, setInputValue),
+        inputElementType: "textarea"
+    }, inputRef);
+    return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
+        ...otherProps,
+        ref: ref,
+        inputRef: inputRef,
+        labelProps: labelProps,
+        inputProps: inputProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        multiLine: true,
+        isDisabled: isDisabled,
+        isQuiet: isQuiet,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired
+    });
+}
+/**
+ * TextAreas are multiline text inputs, useful for cases where users have
+ * a sizable amount of text to enter. They allow for all customizations that
+ * are available to text fields.
+ */ let $cc187bf91f8eea73$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $evhxb$react).forwardRef($cc187bf91f8eea73$var$TextArea);
+
+
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+function $265457f9427aa380$var$TextField(props, ref) {
+    props = (0, $evhxb$useProviderProps)(props);
+    let inputRef = (0, $evhxb$useRef)(null);
+    let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $evhxb$useTextField)(props, inputRef);
+    if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text");
+    return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
+        ...props,
+        labelProps: labelProps,
+        inputProps: inputProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        ref: ref,
+        inputRef: inputRef
+    });
+}
+/**
+ * TextFields are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */ const $265457f9427aa380$export$2c73285ae9390cec = /*#__PURE__*/ (0, $evhxb$forwardRef)($265457f9427aa380$var$TextField);
+
+
+
+
+
+export {$cc187bf91f8eea73$export$f5c9f3c2c4054eec as TextArea, $265457f9427aa380$export$2c73285ae9390cec as TextField, $599adb75312e6492$export$d22444a338b6e3c2 as TextFieldBase};
+//# sourceMappingURL=module.js.map

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/textfield",
-  "version": "3.9.2",
+  "version": "3.10.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -31,17 +36,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.10.1",
-    "@react-aria/i18n": "^3.6.3",
-    "@react-aria/interactions": "^3.13.1",
-    "@react-aria/textfield": "^3.8.1",
-    "@react-aria/utils": "^3.14.2",
-    "@react-spectrum/label": "^3.10.1",
-    "@react-spectrum/utils": "^3.8.1",
-    "@react-stately/utils": "^3.5.2",
-    "@react-types/shared": "^3.16.0",
-    "@react-types/textfield": "^3.6.2",
-    "@spectrum-icons/ui": "^3.4.2",
+    "@react-aria/focus": "^3.11.0",
+    "@react-aria/i18n": "^3.7.0",
+    "@react-aria/interactions": "^3.14.0",
+    "@react-aria/textfield": "^3.9.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-spectrum/label": "^3.11.0",
+    "@react-spectrum/utils": "^3.9.0",
+    "@react-stately/utils": "^3.6.0",
+    "@react-types/shared": "^3.17.0",
+    "@react-types/textfield": "^3.7.0",
+    "@spectrum-icons/ui": "^3.5.0",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {
@@ -55,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "79f62e8fbf64e8359fb603f3a1cc41a2808389e2"
+  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
 }