@deque/cauldron-react 6.18.5 → 6.19.0-canary.4d3cd93f

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

@@ -14,6 +14,7 @@ export interface SelectProps extends Omit<React.HTMLProps<HTMLSelectElement>, 'c
     children?: React.ReactElement<HTMLOptionElement | HTMLOptGroupElement>[];
     value?: any;
     defaultValue?: any;
+    description?: React.ReactNode;
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;

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

@@ -1,6 +1,7 @@
 import React, { ChangeEvent } 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;
@@ -24,6 +25,7 @@ export default class TextField extends React.Component<TextFieldProps, TextField
     };
     private inputId;
     private errorId;
+    private descriptionId;
     private input;
     constructor(props: TextFieldProps);
     render(): React.JSX.Element;

package/lib/index.js

@@ -2258,7 +2258,7 @@ var randomId = function () {
 };
 
 var Select = React__default["default"].forwardRef(function (_a, ref) {
-    var options = _a.options, children = _a.children, disabled = _a.disabled, label = _a.label, id = _a.id, required = _a.required, _b = _a.requiredText, requiredText = _b === void 0 ? 'Required' : _b, error = _a.error, value = _a.value, ariaDescribedby = _a["aria-describedby"], defaultValue = _a.defaultValue, onChange = _a.onChange, rest = tslib.__rest(_a, ["options", "children", "disabled", "label", "id", "required", "requiredText", "error", "value", 'aria-describedby', "defaultValue", "onChange"]);
+    var options = _a.options, children = _a.children, disabled = _a.disabled, label = _a.label, id = _a.id, required = _a.required, _b = _a.requiredText, requiredText = _b === void 0 ? 'Required' : _b, error = _a.error, value = _a.value, ariaDescribedby = _a["aria-describedby"], defaultValue = _a.defaultValue, description = _a.description, onChange = _a.onChange, rest = tslib.__rest(_a, ["options", "children", "disabled", "label", "id", "required", "requiredText", "error", "value", 'aria-describedby', "defaultValue", "description", "onChange"]);
     if (options && children) {
         console.error('The Select component only takes the options props or child option elements, not both.');
     }
@@ -2282,6 +2282,7 @@ var Select = React__default["default"].forwardRef(function (_a, ref) {
     }, [value]);
     var selectId = id || randomId();
     var errorId = randomId();
+    var descriptionId = randomId();
     var dynamicProps = {};
     if (isControlled) {
         dynamicProps.value = currentValue;
@@ -2289,8 +2290,12 @@ var Select = React__default["default"].forwardRef(function (_a, ref) {
     else if (typeof defaultValue !== 'undefined') {
         dynamicProps.defaultValue = defaultValue;
     }
+    dynamicProps['aria-describedby'] = ariaDescribedby;
+    if (description) {
+        dynamicProps['aria-describedby'] = addIdRef(dynamicProps['aria-describedby'], descriptionId);
+    }
     if (error) {
-        dynamicProps['aria-describedby'] = addIdRef(ariaDescribedby, errorId);
+        dynamicProps['aria-describedby'] = addIdRef(dynamicProps['aria-describedby'], errorId);
     }
     // In order to support controlled selects, we
     // have to attach an `onChange` to the select.
@@ -2302,6 +2307,10 @@ var Select = React__default["default"].forwardRef(function (_a, ref) {
             }) },
             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", { id: descriptionId, className: "Field__description" }, description)),
+        error && (React__default["default"].createElement("div", { id: errorId, className: "Field__error" },
+            React__default["default"].createElement(Icon, { type: "caution" }),
+            error)),
         React__default["default"].createElement("div", { className: classNames__default["default"]('Field__select--wrapper', {
                 'Field__select--disabled': disabled,
                 'Field--has-error': !!error
@@ -2311,8 +2320,7 @@ var Select = React__default["default"].forwardRef(function (_a, ref) {
                     return (React__default["default"].createElement("option", { className: "Field__option", key: option.key, value: option.value, disabled: option.disabled }, option.label || option.value));
                 })
                 : children),
-            React__default["default"].createElement("div", { className: "arrow-down" })),
-        error && (React__default["default"].createElement("div", { id: errorId, className: "Error" }, error))));
+            React__default["default"].createElement("div", { className: "arrow-down" }))));
     /* eslint-disable jsx-a11y/no-onchange */
 });
 Select.displayName = 'Select';
@@ -2593,6 +2601,7 @@ var TextField = /** @class */ (function (_super) {
         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
@@ -2606,19 +2615,22 @@ var TextField = /** @class */ (function (_super) {
         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; 
+        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", "onChange", "defaultValue", "error", "requiredText", "multiline", 'aria-describedby', "children", "className"]);
+        _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(ariaDescribedby, this.errorId)
-                : ariaDescribedby
+                ? addIdRef(describedby, this.errorId)
+                : describedby
         };
         return (React__default["default"].createElement("div", { className: "Field" },
             React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
@@ -2627,6 +2639,10 @@ var TextField = /** @class */ (function (_super) {
                 }), 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,
@@ -2634,8 +2650,7 @@ var TextField = /** @class */ (function (_super) {
                 }), 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)),
-            error && (React__default["default"].createElement("div", { className: "Error", id: this.errorId }, error))));
+                } }, other, inputProps))));
     };
     TextField.prototype.onChange = function (e) {
         var _a, _b;

package/package.json

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