@deque/cauldron-react 6.18.5-canary.a83a6624 → 6.18.5-canary.d6a6e97d

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/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';

package/package.json

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