@deque/cauldron-react 3.0.1-canary.58741b89 → 3.0.1-canary.8cb8a98e

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import * as Polymorphic from '../../utils/polymorphic-type';
 import { IconType } from '../Icon';
 import { TooltipProps } from '../Tooltip';
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonOwnProps {
     icon: IconType;
     label: string;
     tooltipPlacement?: TooltipProps['placement'];
@@ -9,5 +9,12 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     tooltipPortal?: TooltipProps['portal'];
     variant?: 'primary' | 'secondary' | 'error';
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare 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;
 export default IconButton;

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

@@ -5,7 +5,7 @@ declare const Panel: {
     ({ className, title, actions, children }: {
         className?: string | undefined;
         title?: string | undefined;
-        actions?: React.ForwardRefExoticComponent<import("../IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement>>[] | undefined;
+        actions?: import("../../utils/polymorphic-type").ForwardRefComponent<"button", import("../IconButton").IconButtonOwnProps>[] | undefined;
         children: React.ReactNode;
     }): JSX.Element;
     displayName: string;

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

@@ -9,6 +9,7 @@ interface StepWithChildren extends BaseStepProps {
 }
 interface StepWithTooltip extends BaseStepProps {
     tooltip: React.ReactNode;
+    tooltipText: string;
 }
 declare type StepProps = StepWithChildren | StepWithTooltip;
 export declare const Step: {
@@ -17,6 +18,7 @@ export declare const Step: {
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         tooltip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tooltipText: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
     };
 };

package/lib/components/Table/TableCell.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-interface TableCellProps {
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     children: React.ReactNode;
     className?: string;
 }

package/lib/components/Table/TableHeader.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ThHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-interface TableHeaderProps {
+interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     children: React.ReactNode;
     className?: string;
 }

package/lib/components/Tabs/Tabs.d.ts

@@ -6,9 +6,13 @@ declare type TabsProps = {
     initialActiveIndex?: number;
     thin?: boolean;
     className?: string;
+    onChange?: ({ activeTabIndex, target }: {
+        activeTabIndex: number;
+        target: HTMLLIElement | null;
+    }) => void;
 } & Cauldron.LabelProps;
 declare const Tabs: {
-    ({ children, thin, initialActiveIndex, className, ...labelProp }: TabsProps): JSX.Element;
+    ({ children, thin, initialActiveIndex, className, onChange, ...labelProp }: TabsProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

package/lib/index.js

@@ -1617,21 +1617,45 @@ var TooltipContent = function (_a) {
     return (React__default.createElement("div", tslib.__assign({ className: classNames('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 icon = _a.icon, label = _a.label, _b = _a.tooltipPlacement, tooltipPlacement = _b === void 0 ? 'auto' : _b, tooltipVariant = _a.tooltipVariant, tooltipPortal = _a.tooltipPortal, className = _a.className, _c = _a.variant, variant = _c === void 0 ? 'secondary' : _c, disabled = _a.disabled, other = tslib.__rest(_a, ["icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "className", "variant", "disabled"]);
-    var buttonRef = React.useRef();
-    React.useImperativeHandle(ref, function () { return buttonRef.current; });
+    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, other = tslib.__rest(_a, ["as", "icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "className", "variant", "disabled", "tabIndex"]);
+    var internalRef = React.useRef();
+    React.useImperativeHandle(ref, function () { return internalRef.current; });
+    // Configure additional properties based on the type of the Component
+    // for accessibility
+    var accessibilityProps = {};
+    if (Component === 'button') {
+        accessibilityProps.type = 'button';
+    }
+    else {
+        // We don't need to set an anchor's role, since it would be redundant
+        if (Component !== 'a') {
+            accessibilityProps.role = other.href || other.to ? 'link' : 'button';
+        }
+        if (disabled) {
+            accessibilityProps['aria-disabled'] = disabled;
+        }
+    }
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("button", tslib.__assign({ type: 'button', className: classNames(className, {
+        React__default.createElement(Component, tslib.__assign({ className: classNames(className, {
                 IconButton: true,
                 'IconButton--primary': variant === 'primary',
                 'IconButton--secondary': variant === 'secondary',
                 'IconButton--error': variant === 'error'
-            }), ref: buttonRef, disabled: disabled }, other),
+            }), ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),
             React__default.createElement(Icon, { type: icon })),
-        !disabled && (React__default.createElement(Tooltip, { target: buttonRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
+        !disabled && (React__default.createElement(Tooltip, { target: internalRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
 });
 IconButton.propTypes = {
+    // @ts-expect-error
+    as: PropTypes.elementType,
     // @ts-expect-error
     icon: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
@@ -8024,8 +8048,9 @@ Tab.propTypes = {
 };
 
 var Tabs = function (_a) {
-    var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className"]);
+    var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className", "onChange"]);
     var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
+    var tabsRef = React.useRef(null);
     var focusedTabRef = React.useRef(null);
     var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
     var tabCount = tabs.length;
@@ -8090,10 +8115,13 @@ var Tabs = function (_a) {
     useDidUpdate(function () {
         var _a;
         (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (typeof onChange === 'function') {
+            onChange({ activeTabIndex: activeIndex, target: focusedTabRef.current });
+        }
     }, [activeIndex]);
     return (React__default.createElement("div", { className: classNames('Tabs', className, {
             'Tabs--thin': thin
-        }) },
+        }), ref: tabsRef },
         React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
 };
 Tabs.displayName = 'Tabs';
@@ -8162,7 +8190,7 @@ var Step = function (props) {
             // list items, therefore it is safe to clobber
             // it with the contents of the tooltip in the
             // tab stop's accessible name.
-            association: "aria-labelledby" },
+            association: "aria-labelledby", "aria-label": isTooltip(props) ? props.tooltipText : undefined },
             React__default.createElement("div", { className: "Stepper__step-indicator" }))) : (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("div", { className: "Stepper__step-indicator" }),
             'children' in props && (React__default.createElement("div", { className: "Stepper__step-label" }, props.children)))))));
@@ -8171,6 +8199,7 @@ Step.displayName = 'Step';
 Step.propTypes = {
     children: PropTypes.node,
     tooltip: PropTypes.node,
+    tooltipText: PropTypes.string,
     className: PropTypes.string
 };
 var Stepper = function (_a) {

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

@@ -0,0 +1,40 @@
+/**
+ * Based on @radix-ui/polymorphic:
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/polymorphic/src/polymorphic.ts
+ */
+import * as React from 'react';
+declare type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+declare type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+declare type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
+declare 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "3.0.1-canary.58741b89",
+  "version": "3.0.1-canary.8cb8a98e",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"