@deque/cauldron-react 6.2.1 → 6.3.0-canary.39049805

package/lib/components/Breadcrumb/BreadcrumbLink.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-interface BreadcrumbLinkProps extends Omit<React.LinkHTMLAttributes<HTMLLinkElement>, 'as'> {
-    as?: React.ElementType;
-}
-declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLElement>>;
+import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+type BreadcrumbLinkProps = PolymorphicProps<React.LinkHTMLAttributes<HTMLLinkElement>>;
+declare const BreadcrumbLink: PolymorphicComponent<BreadcrumbLinkProps>;
 export default BreadcrumbLink;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-interface Props extends React.HTMLAttributes<HTMLElement> {
+import type { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicComponent';
+interface FieldWrapProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
     children: React.ReactNode;
-    as?: React.ElementType | string;
 }
-declare const FieldWrap: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+declare const FieldWrap: PolymorphicComponent<FieldWrapProps>;
 export default FieldWrap;

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

@@ -1,14 +1,8 @@
-/**
- * Unfortunately, eslint does not recognize the Polymorphic component has propTypes set
- *
- * We might be able to remove this if we upgrade eslint and associated plugins
- * See: https://github.com/dequelabs/cauldron/issues/451
- */
 import React from 'react';
-import * as Polymorphic from '../../utils/polymorphic-type';
 import { IconType } from '../Icon';
 import { TooltipProps } from '../Tooltip';
-export interface IconButtonOwnProps {
+import { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+export interface IconButtonProps extends PolymorphicProps<React.HTMLAttributes<HTMLButtonElement>, 'button'> {
     icon: IconType;
     label: React.ReactNode;
     tooltipPlacement?: TooltipProps['placement'];
@@ -17,12 +11,5 @@ export interface IconButtonOwnProps {
     variant?: 'primary' | 'secondary' | 'error';
     large?: boolean;
 }
-type PolymorphicIconButton = Polymorphic.ForwardRefComponent<'button', IconButtonOwnProps>;
-/**
- * Unfortunately, eslint does not recognize that this Polymorphic component has a displayName set
- *
- * We might be able to remove this if we upgrade eslint and associated plugins
- * See: https://github.com/dequelabs/cauldron/issues/451
- */
-declare const IconButton: PolymorphicIconButton;
+declare const IconButton: PolymorphicComponent<IconButtonProps, "button">;
 export default IconButton;

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

@@ -4,8 +4,5 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     variant?: 'button' | 'button-secondary';
     thin?: boolean;
 }
-declare const Link: {
-    ({ children, linkRef, className, variant, thin, ...other }: LinkProps): React.JSX.Element;
-    displayName: string;
-};
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/lib/components/Listbox/Listbox.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ListboxOption } from './ListboxContext';
 import type { ListboxValue } from './ListboxOption';
-interface ListboxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
-    as?: React.ElementType | string;
+import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+interface ListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>> {
     value?: ListboxValue;
     navigation?: 'cycle' | 'bound';
     onSelectionChange?: <T extends HTMLElement = HTMLElement>({ value }: {
@@ -12,5 +12,5 @@ interface ListboxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect
     }) => void;
     onActiveChange?: (option: ListboxOption) => void;
 }
-declare const Listbox: React.ForwardRefExoticComponent<ListboxProps & React.RefAttributes<HTMLElement>>;
+declare const Listbox: PolymorphicComponent<ListboxProps>;
 export default Listbox;

package/lib/components/Listbox/ListboxGroup.d.ts

@@ -1,9 +1,9 @@
 import { ContentNode } from '../../types';
 import React from 'react';
-interface ListboxGroupProps extends React.HTMLAttributes<HTMLElement> {
-    as?: React.ElementType | string;
+import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+interface ListboxGroupProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
     groupLabelProps?: React.HTMLAttributes<HTMLLIElement>;
     label: ContentNode;
 }
-declare const ListboxGroup: React.ForwardRefExoticComponent<ListboxGroupProps & React.RefAttributes<HTMLElement>>;
+declare const ListboxGroup: PolymorphicComponent<ListboxGroupProps>;
 export default ListboxGroup;

package/lib/components/Listbox/ListboxOption.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
+import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
 export type ListboxValue = Readonly<string | number | undefined>;
-interface ListboxOptionsProps extends React.HTMLAttributes<HTMLElement> {
-    as?: React.ElementType | string;
+interface ListboxOptionProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
     value?: ListboxValue;
     disabled?: boolean;
     activeClass?: string;
 }
-declare const ListboxOption: React.ForwardRefExoticComponent<ListboxOptionsProps & React.RefAttributes<HTMLElement>>;
+declare const ListboxOption: PolymorphicComponent<ListboxOptionProps>;
 export default ListboxOption;

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

@@ -0,0 +1,13 @@
+import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import type { ContentNode } from '../../types';
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label: ContentNode;
+    value?: string;
+    defaultValue?: string;
+    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/components/TextEllipsis/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type TooltipProps } from '../Tooltip';
+import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+interface TextEllipsisProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
+    children: string;
+    maxLines?: number;
+    refProp?: string;
+    tooltipProps?: Omit<TooltipProps, 'target' | 'association'>;
+}
+declare const TextEllipsis: PolymorphicComponent<TextEllipsisProps>;
+export default TextEllipsis;

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

@@ -5,7 +5,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     target: React.RefObject<HTMLElement> | HTMLElement;
     variant?: 'text' | 'info' | 'big';
-    association?: 'aria-labelledby' | 'aria-describedby';
+    association?: 'aria-labelledby' | 'aria-describedby' | 'none';
     show?: boolean | undefined;
     placement?: Placement;
     portal?: React.RefObject<HTMLElement> | HTMLElement;

package/lib/components/internal/TextFieldWrapper/index.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export interface TextFieldWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+declare const TextFieldWrapper: React.ForwardRefExoticComponent<TextFieldWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default TextFieldWrapper;

package/lib/index.d.ts

@@ -30,6 +30,7 @@ export { default as Checkbox } from './components/Checkbox';
 export { default as Tooltip, TooltipHead, TooltipContent } from './components/Tooltip';
 export { default as TooltipTabstop } from './components/TooltipTabstop';
 export { default as TextField } from './components/TextField';
+export { default as SearchField } from './components/SearchField';
 export { default as ClickOutsideListener } from './components/ClickOutsideListener';
 export { default as ExpandCollapsePanel, PanelTrigger } from './components/ExpandCollapsePanel';
 export { default as Sidebar, SideBarItem } from './components/SideBar';
@@ -54,6 +55,7 @@ export { default as Listbox, ListboxOption, ListboxGroup } from './components/Li
 export { default as Combobox, ComboboxOption, ComboboxGroup } from './components/Combobox';
 export { default as Popover } from './components/Popover';
 export { default as Timeline, TimelineItem } from './components/Timeline';
+export { default as TextEllipsis } from './components/TextEllipsis';
 /**
  * Helpers / Utils
  */

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
@@ -1622,6 +1659,7 @@ function Tooltip(_a) {
     var _j = tslib.__read(React.useState(null), 2), targetElement = _j[0], setTargetElement = _j[1];
     var _k = tslib.__read(React.useState(null), 2), tooltipElement = _k[0], setTooltipElement = _k[1];
     var _l = tslib.__read(React.useState(null), 2), arrowElement = _l[0], setArrowElement = _l[1];
+    var hasAriaAssociation = association !== 'none';
     var _m = reactPopper.usePopper(targetElement, tooltipElement, {
         placement: initialPlacement,
         modifiers: [
@@ -1723,11 +1761,19 @@ 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(' '));
+        if (hasAriaAssociation) {
+            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 && hasAriaAssociation) {
+                var idRefs = targetElement.getAttribute(association);
+                targetElement.setAttribute(association, removeIdRef(idRefs, 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',
@@ -1751,13 +1797,6 @@ var TooltipContent = function (_a) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TooltipContent', className) }, other)));
 };
 
-/**
- * Unfortunately, eslint does not recognize that this Polymorphic component has a displayName set
- *
- * We might be able to remove this if we upgrade eslint and associated plugins
- * See: https://github.com/dequelabs/cauldron/issues/451
- */
-// eslint-disable-next-line react/display-name
 var IconButton = React.forwardRef(function (_a, ref) {
     var _b = _a.as, Component = _b === void 0 ? 'button' : _b, icon = _a.icon, label = _a.label, _c = _a.tooltipPlacement, tooltipPlacement = _c === void 0 ? 'auto' : _c, tooltipVariant = _a.tooltipVariant, tooltipPortal = _a.tooltipPortal, className = _a.className, _d = _a.variant, variant = _d === void 0 ? 'secondary' : _d, disabled = _a.disabled, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, large = _a.large, other = tslib.__rest(_a, ["as", "icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "className", "variant", "disabled", "tabIndex", "large"]);
     var internalRef = React.useRef();
@@ -1968,15 +2007,15 @@ var Toast = /** @class */ (function (_super) {
     return Toast;
 }(React__default["default"].Component));
 
-var Link = function (_a) {
+var Link = React.forwardRef(function (_a, ref) {
     var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, thin = _a.thin, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant", "thin"]);
-    return (React__default["default"].createElement("a", tslib.__assign({ ref: linkRef, className: classNames__default["default"](className, {
+    return (React__default["default"].createElement("a", tslib.__assign({ ref: ref || linkRef, className: classNames__default["default"](className, {
             Link: !variant,
             'Button--primary': variant === 'button',
             'Button--secondary': variant === 'button-secondary',
             'Button--thin': thin
         }) }, other), children));
-};
+});
 Link.displayName = 'Link';
 
 var Loader = React__default["default"].forwardRef(function (_a, ref) {
@@ -1998,19 +2037,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 +2070,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 +2286,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 +2375,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" },
@@ -2396,6 +2422,44 @@ var TextField = /** @class */ (function (_super) {
     return TextField;
 }(React__default["default"].Component));
 
+var TextFieldWrapper = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, otherProps = tslib.__rest(_a, ["className", "children"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TextFieldWrapper', className) }, otherProps, { ref: ref }), children));
+});
+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, 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];
+    var inputId = React.useRef(id).current;
+    var handleChange = function (e) {
+        var newValue = e.target.value;
+        if (typeof onChange === 'function') {
+            onChange(newValue, e);
+        }
+        if (isControlled) {
+            return;
+        }
+        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)),
+        React__default["default"].createElement(TextFieldWrapper, { className: classNames__default["default"]({
+                '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" })),
+            trailingChildren)));
+});
+SearchField.displayName = 'SearchField';
+
 SyntaxHighlighter__default["default"].registerLanguage('javascript', js__default["default"]);
 SyntaxHighlighter__default["default"].registerLanguage('css', css__default["default"]);
 SyntaxHighlighter__default["default"].registerLanguage('html', xml__default["default"]);
@@ -3489,7 +3553,9 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
     }
     return (React__default["default"].createElement(ListboxOption, tslib.__assign({ as: "li", className: classNames__default["default"]('ComboboxOption', className, {
             'ComboboxOption--disabled': disabled
-        }), activeClass: "ComboboxOption--active", ref: comboboxOptionRef, disabled: disabled, id: id, value: propValue }, props),
+        }), activeClass: "ComboboxOption--active", 
+        // @ts-expect-error use HTMLElement even though the underlying element is an li element
+        ref: comboboxOptionRef, disabled: disabled, id: id, value: propValue }, props),
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(ComboboxMatch, null, children),
             description && (React__default["default"].createElement("div", { className: "ComboboxOption__description" }, description))),
@@ -3702,7 +3768,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 }),
@@ -3712,9 +3778,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
             }), id: "".concat(id, "-label"), htmlFor: "".concat(id, "-input") },
             React__default["default"].createElement("span", null, label),
             isRequired && (React__default["default"].createElement("span", { className: "Field__required-text" }, requiredText))),
-        React__default["default"].createElement("div", { className: classNames__default["default"]('Combobox__input', {
-                'Combobox__input--error': hasError
-            }), 
+        React__default["default"].createElement(TextFieldWrapper, { className: classNames__default["default"]({ 'TextFieldWrapper--error': hasError }), 
             // We're handling click here to open the listbox when the wrapping element is clicked,
             // there's already keyboard handlers to open the listbox on the input element
             onClick: handleInputClick },
@@ -3893,6 +3957,51 @@ function TimelineItem(_a) {
         React__default["default"].createElement("div", { className: "TimelineItem__details" }, children)));
 }
 
+var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, maxLines = _a.maxLines, as = _a.as, tooltipProps = _a.tooltipProps, props = tslib.__rest(_a, ["className", "children", "maxLines", "as", "tooltipProps"]);
+    var Element = 'div';
+    var sharedRef = useSharedRef(ref);
+    var _b = tslib.__read(React.useState(false), 2), showTooltip = _b[0], setShowTooltip = _b[1];
+    if (as) {
+        Element = as;
+    }
+    else if (showTooltip) {
+        props = Object.assign({
+            role: 'button',
+            'aria-disabled': true,
+            tabIndex: 0
+        }, props);
+    }
+    if (typeof maxLines === 'number') {
+        props.style = tslib.__assign({ WebkitLineClamp: maxLines || 2 }, props.style);
+    }
+    React.useEffect(function () {
+        var listener = function () {
+            requestAnimationFrame(function () {
+                var overflowElement = sharedRef.current;
+                if (!overflowElement) {
+                    return;
+                }
+                var hasOverflow = typeof maxLines === 'number'
+                    ? overflowElement.clientHeight < overflowElement.scrollHeight
+                    : overflowElement.clientWidth < overflowElement.scrollWidth;
+                setShowTooltip(hasOverflow);
+            });
+        };
+        var observer = new ResizeObserver(listener);
+        observer.observe(sharedRef.current);
+        return function () {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Element, tslib.__assign({ className: classNames__default["default"]('TextEllipsis', className, {
+                'TextEllipsis--multiline': !!maxLines
+            }), ref: sharedRef }, props), children),
+        showTooltip && (React__default["default"].createElement(Tooltip, tslib.__assign({ target: sharedRef, association: "none" }, tooltipProps), children))));
+});
+TextEllipsis.displayName = 'TextEllipsis';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4029,6 +4138,7 @@ exports.ProgressBar = ProgressBar;
 exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;
 exports.Scrim = Scrim;
+exports.SearchField = SearchField;
 exports.Select = Select;
 exports.SideBar = SideBar;
 exports.SideBarItem = SideBarItem;
@@ -4049,6 +4159,7 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TagButton = TagButton;
 exports.TagLabel = TagLabel;
+exports.TextEllipsis = TextEllipsis;
 exports.TextField = TextField;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;

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/lib/utils/polymorphicComponent.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+export type PolymorphicProps<Props = {}, ElementType extends React.ElementType = React.ElementType> = Props & {
+    as?: ElementType;
+};
+export type PolymorphicComponentProps<Props = {}, ElementType extends React.ElementType = React.ElementType> = Merge<ElementType extends keyof JSX.IntrinsicElements ? React.PropsWithRef<JSX.IntrinsicElements[ElementType]> : ElementType extends React.ElementType ? React.ComponentPropsWithRef<ElementType> : never, PolymorphicProps<Props, ElementType>>;
+export type PolymorphicComponent<Props = {}, ElementType extends React.ElementType = React.ElementType> = Merge<React.ForwardRefExoticComponent<Props>, {
+    <T extends React.ElementType = ElementType>(props: PolymorphicComponentProps<Props, T>): React.ReactElement | null;
+}>;
+export {};

package/package.json

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

package/lib/utils/polymorphic-type/index.d.ts

@@ -1,40 +0,0 @@
-/**
- * Based on @radix-ui/polymorphic:
- * https://github.com/radix-ui/primitives/blob/main/packages/react/polymorphic/src/polymorphic.ts
- */
-import * as React from 'react';
-type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
-/**
- * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
- */
-type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
-/**
- * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
- */
-type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
-type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
-    as?: E;
-}>>;
-interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}
-/**
- * Extends original type to ensure built in React types play nice
- * with polymorphic components still e.g. `React.ElementRef` etc.
- */
-> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
-    /**
-     * When `as` prop is passed, use this overload.
-     * Merges original own props (without DOM props) and the inferred props
-     * from `as` element with the own props taking precendence.
-     *
-     * We explicitly avoid `React.ElementType` and manually narrow the prop types
-     * so that events are typed when using JSX.IntrinsicElements.
-     */
-    <As = IntrinsicElementString>(props: As extends '' ? {
-        as: keyof JSX.IntrinsicElements;
-    } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
-        as: As;
-    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
-        as: As;
-    }> : never): React.ReactElement | null;
-}
-export { ForwardRefComponent, OwnProps, IntrinsicElement, Merge };

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;