@deque/cauldron-react 6.3.0 → 6.3.1-canary.131d0134

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/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/TextEllipsis/index.d.ts

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

package/lib/index.js

@@ -1797,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();
@@ -2436,7 +2429,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, trailingChildren = _a.trailingChildren, otherProps = tslib.__rest(_a, ["label", "defaultValue", "onChange", "hideLabel", "placeholder", "isForm", "id", "value", "trailingChildren"]);
+    var className = _a.className, 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, inputProps = tslib.__rest(_a, ["className", "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];
@@ -2458,11 +2451,11 @@ var SearchField = React.forwardRef(function (_a, ref) {
     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(TextFieldWrapper, { className: classNames__default["default"](className, {
+                'TextFieldWrapper--disabled': inputProps.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 }, inputProps, { type: "search" })),
             trailingChildren)));
 });
 SearchField.displayName = 'SearchField';
@@ -3560,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))),

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.3.0",
+  "version": "6.3.1-canary.131d0134",
   "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 };