@deque/cauldron-react 6.3.2-canary.fd124360 → 6.4.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconType, iconTypes } from './types';
+import { type IconType, iconTypes } from './types';
 export { IconType, iconTypes };
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;

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

@@ -2,14 +2,25 @@ import React from 'react';
 import { IconType } from '../Icon';
 import { TooltipProps } from '../Tooltip';
 import { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
-export interface IconButtonProps extends PolymorphicProps<React.HTMLAttributes<HTMLButtonElement>, 'button'> {
+export interface IconButtonProps extends PolymorphicProps<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'button' | 'a'> {
     icon: IconType;
     label: React.ReactNode;
+    tooltipProps?: Omit<TooltipProps, 'children' | 'target'>;
+    disabled?: boolean;
+    /**
+     * @deprecated use `tooltipProps.placement` instead
+     */
     tooltipPlacement?: TooltipProps['placement'];
+    /**
+     * @deprecated use `tooltipProps.variant` instead
+     */
     tooltipVariant?: TooltipProps['variant'];
+    /**
+     * @deprecated use `tooltipProps.portal` instead
+     */
     tooltipPortal?: TooltipProps['portal'];
     variant?: 'primary' | 'secondary' | 'error';
     large?: boolean;
 }
-declare const IconButton: PolymorphicComponent<IconButtonProps, "button">;
+declare const IconButton: PolymorphicComponent<IconButtonProps, "button" | "a">;
 export default IconButton;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import AriaIsolate from '../../utils/aria-isolate';
-export interface ToastProps {
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
     type: 'confirmation' | 'caution' | 'error' | 'action-needed' | 'info';
     onDismiss: () => void;
     dismissText?: string;

package/lib/index.js

@@ -1797,25 +1797,38 @@ var TooltipContent = function (_a) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TooltipContent', className) }, other)));
 };
 
+var isButton = function (component) { return component === 'button'; };
+var looksLikeLink = function (props) {
+    return 'to' in props || 'href' in props;
+};
 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 _b = _a.as, Component = _b === void 0 ? 'button' : _b, icon = _a.icon, label = _a.label, tooltipPlacement = _a.tooltipPlacement, tooltipVariant = _a.tooltipVariant, tooltipPortal = _a.tooltipPortal, _c = _a.tooltipProps, tooltipPropsProp = _c === void 0 ? {} : _c, 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", "tooltipProps", "className", "variant", "disabled", "tabIndex", "large"]);
     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') {
+    if (isButton(Component)) {
         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';
+            accessibilityProps.role = looksLikeLink(other) ? 'link' : 'button';
         }
         if (disabled) {
             accessibilityProps['aria-disabled'] = disabled;
         }
     }
+    if (process.env.NODE_ENV !== 'production') {
+        if (!!tooltipPlacement || !!tooltipVariant || !!tooltipPortal) {
+            React__default["default"].useEffect(function () {
+                console.warn('[IconButton] The following props are deprecated: tooltipPlacement, tooltipVariant, tooltipPortal. ' +
+                    'See https://cauldron.dequelabs.com/components/IconButton for recommended replacement.');
+            }, []);
+        }
+    }
+    var tooltipProps = tslib.__assign({ placement: tooltipPlacement || 'auto', variant: tooltipVariant, portal: tooltipPortal, association: 'aria-labelledby', hideElementOnHidden: true }, tooltipPropsProp);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Component, tslib.__assign({ className: classNames__default["default"](className, {
                 IconButton: true,
@@ -1823,10 +1836,12 @@ var IconButton = React.forwardRef(function (_a, ref) {
                 'IconButton--secondary': variant === 'secondary',
                 'IconButton--error': variant === 'error',
                 'IconButton--large': large
-            }), ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),
+            }), 
+            // @ts-expect-error the concrete type is unknown, so HTMLElement is expected
+            ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),
             React__default["default"].createElement(Icon, { type: icon }),
             disabled && React__default["default"].createElement(Offscreen, null, label)),
-        !disabled && (React__default["default"].createElement(Tooltip, { target: internalRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
+        !disabled && (React__default["default"].createElement(Tooltip, tslib.__assign({ target: internalRef }, tooltipProps), label))));
 });
 IconButton.displayName = 'IconButton';
 
@@ -1932,11 +1947,11 @@ var Toast = /** @class */ (function (_super) {
         var _a = this.props, type = _a.type, children = _a.children; 
         // prevent `onDismiss` from being passed-through to DOM
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.onDismiss; var dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, dismissible = _a.dismissible, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible"]);
+        _a.onDismiss; var dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, dismissible = _a.dismissible, className = _a.className, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible", "className"]);
         var scrim = type === 'action-needed' && show ? (React__default["default"].createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
         var defaultProps = {
             tabIndex: -1,
-            className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible })
+            className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible }, className)
         };
         if (!focus) {
             defaultProps.role = 'alert';
@@ -2267,7 +2282,7 @@ var RadioCardGroup = function (_a) {
 RadioCardGroup.displayName = 'RadioCardGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
-    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, 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", "onFocus", "onBlur", '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, onFocus = _a.onFocus, onBlur = _a.onBlur, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c; _a.children; var other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", "onFocus", "onBlur", 'aria-describedby', "disabled", "checked", "children"]);
     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);
@@ -2368,7 +2383,7 @@ var TextField = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         _a.onChange; 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.defaultValue; var _b = _a.error, error = _b === void 0 ? null : _b, requiredText = _a.requiredText, multiline = _a.multiline, ariaDescribedby = _a["aria-describedby"], className = _a.className, other = tslib.__rest(_a, ["label", "fieldRef", "value", "onChange", "defaultValue", "error", "requiredText", "multiline", 'aria-describedby', "className"]);
+        _a.defaultValue; var _b = _a.error, error = _b === void 0 ? null : _b, requiredText = _a.requiredText, multiline = _a.multiline, ariaDescribedby = _a["aria-describedby"]; _a.children; var className = _a.className, other = tslib.__rest(_a, ["label", "fieldRef", "value", "onChange", "defaultValue", "error", "requiredText", "multiline", 'aria-describedby', "children", "className"]);
         // typescript can't infer the type so it's complaining about
         // textarea and input props being incompatible
         // we should probably fix this
@@ -2875,9 +2890,9 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
         }) }, other),
         React__default["default"].createElement("ul", null,
             React__default["default"].createElement("li", null,
-                React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipPlacement: tooltipPlacement, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick })),
+                React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipProps: { placement: tooltipPlacement }, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick })),
             React__default["default"].createElement("li", null,
-                React__default["default"].createElement(IconButton, { icon: "chevron-left", tooltipPlacement: tooltipPlacement, label: previousPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onPreviousPageClick })),
+                React__default["default"].createElement(IconButton, { icon: "chevron-left", tooltipProps: { placement: tooltipPlacement }, label: previousPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onPreviousPageClick })),
             React__default["default"].createElement("li", null,
                 React__default["default"].createElement("span", { role: "log", "aria-atomic": "true", "aria-live": "polite" }, statusLabel || (React__default["default"].createElement("span", null,
                     "Showing ",
@@ -2888,9 +2903,9 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
                     " of ",
                     React__default["default"].createElement("strong", null, totalItems))))),
             React__default["default"].createElement("li", null,
-                React__default["default"].createElement(IconButton, { icon: "chevron-right", tooltipPlacement: tooltipPlacement, label: nextPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onNextPageClick })),
+                React__default["default"].createElement(IconButton, { icon: "chevron-right", tooltipProps: { placement: tooltipPlacement }, label: nextPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onNextPageClick })),
             React__default["default"].createElement("li", null,
-                React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipPlacement: tooltipPlacement, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick })))));
+                React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipProps: { placement: tooltipPlacement }, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick })))));
 });
 Pagination.displayName = 'Pagination';
 

package/package.json

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