@deque/cauldron-react 7.6.0-canary.f3f1b3ab → 7.6.0-canary.f4013a2a

package/lib/components/TextField/index.d.ts

@@ -1,34 +1,16 @@
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     label: React.ReactNode;
     description?: React.ReactNode;
     error?: React.ReactNode;
     defaultValue?: string;
     onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * @deprecated Use the forwarded `ref` instead. Will be removed in the next major version.
+     */
     fieldRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
     requiredText?: string;
     multiline?: boolean;
 }
-interface TextFieldState {
-    value: string | number | string[] | undefined;
-}
-export default class TextField extends React.Component<TextFieldProps, TextFieldState> {
-    static displayName: string;
-    static defaultProps: {
-        error: null;
-        required: boolean;
-        defaultValue: null;
-        onChange: () => void;
-        fieldRef: () => void;
-        requiredText: string;
-        multiline: boolean;
-    };
-    private inputId;
-    private errorId;
-    private descriptionId;
-    private input;
-    constructor(props: TextFieldProps);
-    render(): React.JSX.Element;
-    onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void;
-}
-export {};
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export default TextField;

package/lib/index.js

@@ -2749,89 +2749,53 @@ function TooltipTabstop(_a) {
 }
 TooltipTabstop.displayName = 'TooltipTabstop';
 
-var TextField = /** @class */ (function (_super) {
-    tslib.__extends(TextField, _super);
-    function TextField(props) {
-        var _this = _super.call(this, props) || this;
-        _this.inputId = _this.props.id || randomId();
-        _this.errorId = randomId();
-        _this.descriptionId = randomId();
-        _this.state = {
-            value: typeof _this.props.value !== 'undefined'
-                ? _this.props.value
-                : _this.props.defaultValue || ''
-        };
-        _this.onChange = _this.onChange.bind(_this);
-        return _this;
-    }
-    TextField.prototype.render = function () {
-        var _this = this;
-        var isRequired = !!this.props.required;
-        // disabling `no-unused-vars` to prevent specific
-        // props from being passed through to the input
-        var _a = this.props, label = _a.label, fieldRef = _a.fieldRef, value = _a.value, description = _a.description; 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.onChange; 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.defaultValue; var _b = _a.error, error = _b === void 0 ? null : _b, requiredText = _a.requiredText, multiline = _a.multiline, ariaDescribedby = _a["aria-describedby"]; _a.children; var className = _a.className, other = tslib.__rest(_a, ["label", "fieldRef", "value", "description", "onChange", "defaultValue", "error", "requiredText", "multiline", 'aria-describedby', "children", "className"]);
-        // typescript can't infer the type so it's complaining about
-        // textarea and input props being incompatible
-        // we should probably fix this
-        var Field = multiline ? 'textarea' : 'input';
-        var describedby = description
-            ? addIdRef(ariaDescribedby, this.descriptionId)
-            : ariaDescribedby;
-        var inputProps = {
-            'aria-describedby': error
-                ? addIdRef(describedby, this.errorId)
-                : describedby
-        };
-        return (React__default["default"].createElement("div", { className: "Field" },
-            React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
-                    'Field__label--is-required': isRequired,
-                    'Field__label--has-error': error
-                }), htmlFor: this.inputId },
-                React__default["default"].createElement("span", null, label),
-                isRequired && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
-            description && (React__default["default"].createElement("div", { className: "Field__description", id: this.descriptionId }, description)),
-            error && (React__default["default"].createElement("div", { className: "Field__error", id: this.errorId },
-                React__default["default"].createElement(Icon, { type: "caution" }),
-                error)),
-            React__default["default"].createElement(Field, tslib.__assign({ className: classNames__default["default"](className, {
-                    'Field__text-input': !multiline,
-                    Field__textarea: multiline,
-                    'Field--has-error': error
-                }), id: this.inputId, value: typeof value !== 'undefined' ? value : this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
-                    _this.input = input;
-                    setRef(fieldRef, input);
-                } }, other, inputProps))));
-    };
-    TextField.prototype.onChange = function (e) {
-        var _a, _b;
-        if (this.props.onChange) {
-            this.props.onChange(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || /* istanbul ignore next: default value */ '', e);
-        }
-        if (typeof this.props.value !== 'undefined') {
+var TextField = React.forwardRef(function (_a, ref) {
+    var id = _a.id, label = _a.label, fieldRef = _a.fieldRef, value = _a.value, description = _a.description, onChange = _a.onChange, defaultValue = _a.defaultValue, _b = _a.error, error = _b === void 0 ? null : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.requiredText, requiredText = _d === void 0 ? 'Required' : _d, _e = _a.multiline, multiline = _e === void 0 ? false : _e, ariaDescribedby = _a["aria-describedby"]; 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.children; var className = _a.className, other = tslib.__rest(_a, ["id", "label", "fieldRef", "value", "description", "onChange", "defaultValue", "error", "required", "requiredText", "multiline", 'aria-describedby', "children", "className"]);
+    var _f = tslib.__read(nextId.useId(3, 'textfield'), 3), generatedInputId = _f[0], errorId = _f[1], descriptionId = _f[2];
+    var inputId = id || generatedInputId;
+    var isControlled = typeof value !== 'undefined';
+    var _g = tslib.__read(React.useState(isControlled ? value : defaultValue || ''), 2), uncontrolledValue = _g[0], setUncontrolledValue = _g[1];
+    var setFieldRef = React.useCallback(function (field) {
+        setRef(ref, field);
+        setRef(fieldRef, field);
+    }, [ref, fieldRef]);
+    var handleChange = function (e) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
+        if (isControlled) {
             return;
         }
-        this.setState({
-            value: (_b = this.input) === null || _b === void 0 ? void 0 : _b.value
-        });
+        setUncontrolledValue(e.target.value);
     };
-    TextField.displayName = 'TextField';
-    TextField.defaultProps = {
-        error: null,
-        required: false,
-        defaultValue: null,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onChange: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        fieldRef: function () { },
-        requiredText: 'Required',
-        multiline: false
+    // typescript can't infer the type so it's complaining about
+    // textarea and input props being incompatible
+    // we should probably fix this
+    var Field = multiline ? 'textarea' : 'input';
+    var describedby = description
+        ? addIdRef(ariaDescribedby, descriptionId)
+        : ariaDescribedby;
+    var inputProps = {
+        'aria-describedby': error ? addIdRef(describedby, errorId) : describedby
     };
-    return TextField;
-}(React__default["default"].Component));
+    return (React__default["default"].createElement("div", { className: "Field" },
+        React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
+                'Field__label--is-required': required,
+                'Field__label--has-error': error
+            }), htmlFor: inputId },
+            React__default["default"].createElement("span", null, label),
+            required && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
+        description && (React__default["default"].createElement("div", { className: "Field__description", id: descriptionId }, description)),
+        error && (React__default["default"].createElement("div", { className: "Field__error", id: errorId },
+            React__default["default"].createElement(Icon, { type: "caution" }),
+            error)),
+        React__default["default"].createElement(Field, tslib.__assign({ className: classNames__default["default"](className, {
+                'Field__text-input': !multiline,
+                Field__textarea: multiline,
+                'Field--has-error': error
+            }), id: inputId, value: isControlled ? value : uncontrolledValue, onChange: handleChange, "aria-invalid": !!error, required: required, ref: setFieldRef }, other, inputProps))));
+});
+TextField.displayName = 'TextField';
 
 var TextFieldWrapper = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, otherProps = tslib.__rest(_a, ["className", "children"]);
@@ -3768,7 +3732,7 @@ var Notice = React.forwardRef(function (_a, ref) {
             _b["Notice--".concat(type)] = type,
             _b["Notice--condensed"] = variant === 'condensed',
             _b)), ref: ref }, otherProps),
-        React__default["default"].createElement(Icon, { type: icon || iconTypeMap[type] }),
+        React__default["default"].createElement(Icon, { className: "Notice__icon", type: icon || iconTypeMap[type] }),
         React__default["default"].createElement("div", { className: "Notice__title" }, title),
         children && React__default["default"].createElement("div", { className: "Notice__content" }, children)));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.6.0-canary.f3f1b3ab",
+  "version": "7.6.0-canary.f4013a2a",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",