@deque/cauldron-react 4.0.0-canary.78d6a743 → 4.0.0-canary.9538a958

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

@@ -2,6 +2,7 @@ import React, { InputHTMLAttributes, Ref } from 'react';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     label: React.ReactNode;
+    labelDescription?: string;
     error?: React.ReactNode;
     customIcon?: React.ReactNode;
     checkboxRef?: Ref<HTMLInputElement>;

package/lib/index.js

@@ -2381,7 +2381,7 @@ RadioGroup.propTypes = {
 RadioGroup.displayName = 'RadioGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
-    var id = _a.id, label = _a.label, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, other = tslib.__rest(_a, ["id", "label", "error", "checkboxRef", "className", "onChange", 'aria-describedby', "disabled", "checked"]);
+    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", 'aria-describedby', "disabled", "checked"]);
     var _d = tslib.__read(React.useState(checked), 2), isChecked = _d[0], setIsChecked = _d[1];
     var _e = tslib.__read(React.useState(false), 2), focused = _e[0], setFocused = _e[1];
     var checkRef = React.useRef(null);
@@ -2392,10 +2392,19 @@ var Checkbox = React.forwardRef(function (_a, ref) {
     if (typeof refProp === 'function') {
         refProp(checkRef.current);
     }
-    var errorId = React.useMemo(function () { return nextId__default(); }, []);
-    var ariaDescribedbyId = error
-        ? tokenList(errorId, ariaDescribedby)
-        : ariaDescribedby;
+    var _f = React.useMemo(function () {
+        return {
+            labelDescriptionId: nextId__default(),
+            errorId: nextId__default()
+        };
+    }, []), errorId = _f.errorId, labelDescriptionId = _f.labelDescriptionId;
+    var ariaDescribedbyId = ariaDescribedby;
+    if (error) {
+        ariaDescribedbyId = tokenList(errorId, ariaDescribedbyId);
+    }
+    if (labelDescription) {
+        ariaDescribedbyId = tokenList(labelDescriptionId, ariaDescribedbyId);
+    }
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: classNames('Checkbox is--flex-row', className) },
             React__default.createElement("input", tslib.__assign({ id: id, ref: typeof refProp === 'function' || !refProp ? checkRef : refProp, type: "checkbox", checked: isChecked, disabled: disabled, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); }, "aria-describedby": ariaDescribedbyId, onChange: function (e) {
@@ -2419,8 +2428,9 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                     else {
                         (_b = checkRef.current) === null || _b === void 0 ? void 0 : _b.click();
                     }
-                } })),
-        error && (React__default.createElement("div", { id: errorId, className: "Error" }, error))));
+                } }),
+            labelDescription && (React__default.createElement("span", { id: labelDescriptionId, className: "Field__labelDescription" }, labelDescription)),
+            error && (React__default.createElement("div", { id: errorId, className: "Error" }, error)))));
 });
 Checkbox.displayName = 'Checkbox';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.0.0-canary.78d6a743",
+  "version": "4.0.0-canary.9538a958",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"