@deque/cauldron-react 6.2.1-canary.6af58613 → 6.2.1-canary.6d2d22b3

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

@@ -7,6 +7,7 @@ interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
     onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
     hideLabel?: boolean;
     isForm?: boolean;
+    trailingChildren?: React.ReactNode;
 }
 declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default SearchField;

package/lib/index.js

@@ -1601,6 +1601,43 @@ var Button = React.forwardRef(function (_a, ref) {
 });
 Button.displayName = 'Button';
 
+/**
+ * Returns a unique set of id refs from the provided string
+ * @param ids - string of id refs
+ */
+function idRefs(ids) {
+    if (!ids || !ids.trim()) {
+        return new Set();
+    }
+    return new Set(ids.trim().split(/\s+/));
+}
+/**
+ * Returns an updated id ref string with the provided id value added
+ * @param ids - string of id refs
+ * @param id - id to add
+ */
+function addIdRef(ids, id) {
+    return tslib.__spreadArray([], tslib.__read(idRefs(ids).add(id)), false).join(' ');
+}
+/**
+ * Returns an updated id ref string with the provided id value removed
+ * @param ids - string of id refs
+ * @param id - id to remove
+ */
+function removeIdRef(_ids, id) {
+    var ids = idRefs(_ids);
+    ids.delete(id);
+    return tslib.__spreadArray([], tslib.__read(ids), false).join(' ');
+}
+/**
+ * Returns if an id ref string contains the provided id value
+ * @param ids - string of id refs
+ * @param id - id to check if it exists in the provided idRef string
+ */
+function hasIdRef(ids, id) {
+    return idRefs(ids).has(id);
+}
+
 var TIP_HIDE_DELAY = 100;
 // fires a custom "cauldron:tooltip:show" / "cauldron:tooltip:hide" event
 // to allow projects using cauldron to hook into when a tooltip is shown/hidden
@@ -1723,11 +1760,17 @@ function Tooltip(_a) {
     }, [tooltipElement, show, hide]);
     // Keep the target's id in sync
     React.useEffect(function () {
-        var attrText = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
-        if (!(attrText === null || attrText === void 0 ? void 0 : attrText.includes(id || ''))) {
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute(association, [id, attrText].filter(Boolean).join(' '));
+        var idRefs = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
+        if (!hasIdRef(idRefs, id)) {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute(association, addIdRef(idRefs, id));
         }
-    }, [targetElement, id]);
+        return function () {
+            if (targetElement) {
+                var idRefs_1 = targetElement.getAttribute(association);
+                targetElement.setAttribute(association, removeIdRef(idRefs_1, id));
+            }
+        };
+    }, [targetElement, id, association]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
         ? reactDom.createPortal(React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
                 TooltipInfo: variant === 'info',
@@ -1998,19 +2041,6 @@ var randomId = function () {
     return "x_".concat(i++, "_").concat(num);
 };
 
-/**
- * Adds an id to a token list attribute if its not already present in the list
- */
-var tokenList = function (id, currentVal) {
-    if (currentVal === void 0) { currentVal = ''; }
-    var values = currentVal.split(' ');
-    if (values.includes(id)) {
-        return currentVal;
-    }
-    values.push(id);
-    return values.join(' ').trim();
-};
-
 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"]);
     if (options && children) {
@@ -2044,7 +2074,7 @@ var Select = React__default["default"].forwardRef(function (_a, ref) {
         dynamicProps.defaultValue = defaultValue;
     }
     if (error) {
-        dynamicProps['aria-describedby'] = tokenList(errorId, ariaDescribedby);
+        dynamicProps['aria-describedby'] = addIdRef(ariaDescribedby, errorId);
     }
     // In order to support controlled selects, we
     // have to attach an `onChange` to the select.
@@ -2260,10 +2290,10 @@ var Checkbox = React.forwardRef(function (_a, ref) {
     }, []), errorId = _f.errorId, labelDescriptionId = _f.labelDescriptionId;
     var ariaDescribedbyId = ariaDescribedby;
     if (error) {
-        ariaDescribedbyId = tokenList(errorId, ariaDescribedbyId);
+        ariaDescribedbyId = addIdRef(ariaDescribedbyId, errorId);
     }
     if (labelDescription) {
-        ariaDescribedbyId = tokenList(labelDescriptionId, ariaDescribedbyId);
+        ariaDescribedbyId = addIdRef(ariaDescribedbyId, labelDescriptionId);
     }
     return (React__default["default"].createElement("div", { className: "Checkbox__wrap" },
         React__default["default"].createElement("div", { className: classNames__default["default"]('Checkbox is--flex-row', className) },
@@ -2349,7 +2379,7 @@ var TextField = /** @class */ (function (_super) {
         var Field = multiline ? 'textarea' : 'input';
         var inputProps = {
             'aria-describedby': error
-                ? tokenList(this.errorId, ariaDescribedby)
+                ? addIdRef(ariaDescribedby, this.errorId)
                 : ariaDescribedby
         };
         return (React__default["default"].createElement("div", { className: "Field" },
@@ -2403,7 +2433,7 @@ var TextFieldWrapper = React.forwardRef(function (_a, ref) {
 TextFieldWrapper.displayName = 'TextFieldWrapper';
 
 var SearchField = React.forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, onChange = _a.onChange, _c = _a.hideLabel, hideLabel = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Search...' : _d, _e = _a.isForm, isForm = _e === void 0 ? true : _e, propId = _a.id, propValue = _a.value, otherProps = tslib.__rest(_a, ["label", "defaultValue", "onChange", "hideLabel", "placeholder", "isForm", "id", "value"]);
+    var label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, onChange = _a.onChange, _c = _a.hideLabel, hideLabel = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Search...' : _d, _e = _a.isForm, isForm = _e === void 0 ? true : _e, propId = _a.id, propValue = _a.value, trailingChildren = _a.trailingChildren, otherProps = tslib.__rest(_a, ["label", "defaultValue", "onChange", "hideLabel", "placeholder", "isForm", "id", "value", "trailingChildren"]);
     var isControlled = typeof propValue !== 'undefined';
     var _f = tslib.__read(React.useState(isControlled ? propValue : defaultValue), 2), value = _f[0], setValue = _f[1];
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'search-field'), 1), id = _g[0];
@@ -2419,6 +2449,9 @@ var SearchField = React.forwardRef(function (_a, ref) {
         setValue(newValue);
     };
     var Field = isForm ? 'form' : 'div';
+    if (typeof trailingChildren === 'string') {
+        trailingChildren = React__default["default"].createElement("span", null, trailingChildren);
+    }
     return (React__default["default"].createElement(Field, { role: isForm ? 'search' : undefined, className: "SearchField", "aria-labelledby": isForm ? "".concat(inputId, "-label") : undefined },
         hideLabel ? (React__default["default"].createElement(Offscreen, null,
             React__default["default"].createElement("label", { htmlFor: inputId, id: "".concat(inputId, "-label") }, label))) : (React__default["default"].createElement("label", { className: "Field__label", htmlFor: inputId, id: "".concat(inputId, "-label") }, label)),
@@ -2426,7 +2459,8 @@ var SearchField = React.forwardRef(function (_a, ref) {
                 'TextFieldWrapper--disabled': otherProps.disabled
             }) },
             React__default["default"].createElement(Icon, { type: "magnifying-glass", className: "SearchField__search-icon" }),
-            React__default["default"].createElement("input", tslib.__assign({ id: inputId, value: value, onChange: handleChange, placeholder: placeholder, ref: ref }, otherProps, { className: classNames__default["default"](otherProps.className, 'Field__text-input'), type: "search" })))));
+            React__default["default"].createElement("input", tslib.__assign({ id: inputId, value: value, onChange: handleChange, placeholder: placeholder, ref: ref }, otherProps, { className: classNames__default["default"](otherProps.className, 'Field__text-input'), type: "search" })),
+            trailingChildren)));
 });
 SearchField.displayName = 'SearchField';
 
@@ -3736,7 +3770,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
         noMatchingOptions));
     var errorId = "".concat(id, "-error");
     var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': error
-            ? tokenList(errorId, ariaDescribedby)
+            ? addIdRef(ariaDescribedby, errorId)
             : ariaDescribedby });
     return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', className), ref: comboboxRef },
         name && React__default["default"].createElement("input", { type: "hidden", name: name, value: formValue }),

package/lib/utils/idRefs.d.ts

@@ -0,0 +1,25 @@
+type IdRefs = string | null | undefined;
+/**
+ * Returns a unique set of id refs from the provided string
+ * @param ids - string of id refs
+ */
+export default function idRefs(ids: IdRefs): Set<string>;
+/**
+ * Returns an updated id ref string with the provided id value added
+ * @param ids - string of id refs
+ * @param id - id to add
+ */
+export declare function addIdRef(ids: IdRefs, id: string): string;
+/**
+ * Returns an updated id ref string with the provided id value removed
+ * @param ids - string of id refs
+ * @param id - id to remove
+ */
+export declare function removeIdRef(_ids: IdRefs, id: string): string;
+/**
+ * Returns if an id ref string contains the provided id value
+ * @param ids - string of id refs
+ * @param id - id to check if it exists in the provided idRef string
+ */
+export declare function hasIdRef(ids: IdRefs, id: string): boolean;
+export {};

package/package.json

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

package/lib/utils/remove-ids/index.d.ts

@@ -1,2 +0,0 @@
-declare function recursivelyRemoveIds(element: React.ReactNode): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | null | undefined;
-export default recursivelyRemoveIds;

package/lib/utils/token-list/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Adds an id to a token list attribute if its not already present in the list
- */
-declare const tokenList: (id: string, currentVal?: string) => string;
-export default tokenList;