@deque/cauldron-react 6.26.0 → 6.27.0-canary.06fc1451

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

@@ -1,8 +1,17 @@
 import React, { type ButtonHTMLAttributes, type Ref } from 'react';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import type { TagSize } from '../Tag';
+interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     buttonRef?: Ref<HTMLButtonElement>;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'danger' | 'danger-secondary' | 'link' | 'tag' | 'badge';
     thin?: boolean;
 }
+interface ButtonTagProps extends ButtonBaseProps {
+    variant: 'tag';
+    size?: TagSize;
+}
+interface ButtonNonTagProps extends ButtonBaseProps {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'danger' | 'danger-secondary' | 'link' | 'badge';
+    size?: never;
+}
+export type ButtonProps = ButtonTagProps | ButtonNonTagProps;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

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

@@ -3,7 +3,7 @@ import { ContentNode } from '../../types';
 import Button from '../Button';
 import Tooltip from '../Tooltip';
 type ButtonProps = React.ComponentProps<typeof Button>;
-export interface CopyButtonProps extends Omit<ButtonProps, 'onCopy' | 'onClick'> {
+export interface CopyButtonProps extends Omit<ButtonProps, 'onCopy' | 'onClick' | 'size'> {
     value: string;
     variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary' | 'tertiary'>;
     children?: ContentNode;

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

@@ -7,18 +7,6 @@ export interface IconButtonProps extends PolymorphicProps<React.HTMLAttributes<H
     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' | 'tertiary' | 'error';
     large?: boolean;
 }

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

@@ -4,6 +4,7 @@ type ProgressBarProps = {
     progress: number;
     progressMax?: number;
     progressMin?: number;
+    thin?: boolean;
 } & Cauldron.LabelProps & React.HTMLAttributes<HTMLDivElement>;
 declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
 export default ProgressBar;

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

@@ -9,7 +9,7 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     className?: string;
     radios: RadioItem[];
     defaultValue?: string;
-    value?: any;
+    value?: string;
     inline?: boolean;
     onChange?: (radio: RadioItem, input: HTMLElement) => void;
 }

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

@@ -4,7 +4,9 @@ type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableHeaderProps extends Omit<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, 'align'> {
     sortDirection?: SortDirection;
     onSort?: () => void;
+    /** @deprecated No longer used. Sort state is communicated via aria-sort. */
     sortAscendingAnnouncement?: string;
+    /** @deprecated No longer used. Sort state is communicated via aria-sort. */
     sortDescendingAnnouncement?: string;
     align?: ColumnAlignment;
     variant?: 'header' | 'cell';

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

@@ -1,8 +1,9 @@
 import React from 'react';
+export type TagSize = 'default' | 'small';
 interface TagProps {
     children: React.ReactNode;
     className?: string;
-    size?: 'default' | 'small';
+    size?: TagSize;
 }
 export declare const TagLabel: {
     ({ children, className, ...other }: TagProps): React.JSX.Element;

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

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { type ButtonHTMLAttributes } from 'react';
 import { IconType } from '../Icon';
 import { ContentNode } from '../../types';
-interface TagButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+import { type TagSize } from '../Tag';
+interface TagButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
     label: ContentNode;
     value: ContentNode;
     icon: IconType;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    size?: TagSize;
 }
 declare const TagButton: React.ForwardRefExoticComponent<TagButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default TagButton;

package/lib/index.d.ts

@@ -37,7 +37,7 @@ export { default as Sidebar, SideBarItem } from './components/SideBar';
 export { default as Code } from './components/Code';
 export { default as LoaderOverlay } from './components/LoaderOverlay';
 export { default as Line } from './components/Line';
-export { default as Tag, TagLabel } from './components/Tag';
+export { default as Tag, TagLabel, type TagSize } from './components/Tag';
 export { default as Badge, BadgeLabel } from './components/Badge';
 export { default as ImpactBadge } from './components/ImpactBadge';
 export { default as TagButton } from './components/TagButton';

package/lib/index.js

@@ -1768,7 +1768,7 @@ var SkipLink = /** @class */ (function (_super) {
 }(React__default["default"].Component));
 
 var Button = React.forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, thin = _a.thin, children = _a.children, className = _a.className, buttonRef = _a.buttonRef, other = tslib.__rest(_a, ["variant", "thin", "children", "className", "buttonRef"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, thin = _a.thin, size = _a.size, children = _a.children, className = _a.className, buttonRef = _a.buttonRef, other = tslib.__rest(_a, ["variant", "thin", "size", "children", "className", "buttonRef"]);
     return (React__default["default"].createElement("button", tslib.__assign({ type: "button", className: classNames__default["default"](className, {
             'Button--primary': variant === 'primary',
             'Button--secondary': variant === 'secondary',
@@ -1779,6 +1779,7 @@ var Button = React.forwardRef(function (_a, ref) {
             Link: variant === 'link',
             Tag: variant === 'tag',
             'Button--tag': variant === 'tag',
+            'Tag--small': variant === 'tag' && size === 'small',
             'Button--thin': thin,
             'Button--badge': variant === 'badge'
         }), ref: ref || buttonRef }, other), children));
@@ -2118,7 +2119,7 @@ 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, 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 _b = _a.as, Component = _b === void 0 ? 'button' : _b, icon = _a.icon, label = _a.label, _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", "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
@@ -2136,15 +2137,7 @@ var IconButton = React.forwardRef(function (_a, ref) {
             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);
+    var tooltipProps = tslib.__assign({ placement: 'auto', 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,
@@ -2444,7 +2437,9 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
     var _d = tslib.__read(React.useState(value || defaultValue || null), 2), currentValue = _d[0], setCurrentValue = _d[1];
     var _e = tslib.__read(React.useState(null), 2), focusIndex = _e[0], setFocusIndex = _e[1];
     var inputs = React.useRef([]);
-    var handleChange = function (value) { return setCurrentValue(value); };
+    var handleChange = function (value) {
+        return setCurrentValue(value !== null && value !== void 0 ? value : null);
+    };
     var onRadioFocus = function (index) { return setFocusIndex(index); };
     var onRadioBlur = function () { return setFocusIndex(null); };
     var onRadioClick = function (index) {
@@ -2469,10 +2464,9 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
         return (React__default["default"].createElement("div", { className: "Radio__wrap", key: id },
             React__default["default"].createElement("div", { className: classNames__default["default"]('Radio is--flex-row', className) },
                 React__default["default"].createElement("input", tslib.__assign({ type: "radio", name: name, value: radioValue, id: id, ref: function (input) {
-                        if (!input) {
-                            return;
+                        if (input) {
+                            inputs.current[index] = input;
                         }
-                        inputs.current.push(input);
                     }, onFocus: function () { return onRadioFocus(index); }, onBlur: function () { return onRadioBlur(); }, onChange: function () {
                         var _a;
                         handleChange(radioValue);
@@ -2489,10 +2483,6 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
                     'Field__labelDescription--disabled': disabled
                 }) }, labelDescription))));
     });
-    // reset the input refs array
-    // refs get clobbered every re-render anyway and this supports "dynamic" radios
-    // (changing the number of radio buttons for example)
-    inputs.current = [];
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"](className, { 'Radio--inline': inline }), role: "radiogroup", ref: ref }, other), radioButtons));
 });
 RadioGroup.displayName = 'RadioGroup';
@@ -3045,8 +3035,8 @@ var ImpactBadge = React.forwardRef(function (_a, ref) {
 ImpactBadge.displayName = 'ImpactBadge';
 
 var TagButton = React__default["default"].forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, rest = tslib.__rest(_a, ["label", "value", "icon", "className"]);
-    return (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", className: classNames__default["default"]('TagButton', className), ref: ref }, rest),
+    var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, size = _a.size, rest = tslib.__rest(_a, ["label", "value", "icon", "className", "size"]);
+    return (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", className: classNames__default["default"]('TagButton', className), size: size, ref: ref }, rest),
         React__default["default"].createElement(TagLabel, null, label),
         value,
         React__default["default"].createElement(Icon, { className: "TagButton__icon", type: icon })));
@@ -3189,23 +3179,25 @@ var TableHead = React.forwardRef(function (_a, ref) {
 TableHead.displayName = 'TableHead';
 
 var TableHeader = React.forwardRef(function (_a, ref) {
-    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, align = _a.align, _d = _a.variant, variant = _d === void 0 ? 'header' : _d, style = _a.style, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement", "align", "variant", "style"]);
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _sortAscendingAnnouncement = _a.sortAscendingAnnouncement, _sortDescendingAnnouncement = _a.sortDescendingAnnouncement, align = _a.align, _b = _a.variant, variant = _b === void 0 ? 'header' : _b, style = _a.style, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement", "align", "variant", "style"]);
     var tableHeaderRef = useSharedRef(ref);
-    var _e = useTable(), layout = _e.layout, columns = _e.columns;
+    var _c = useTable(), layout = _c.layout, columns = _c.columns;
     var tableGridStyles = useTableGridStyles({
         elementRef: tableHeaderRef,
         align: align,
         columns: columns,
         layout: layout
     });
-    // When the sort direction changes, we want to announce the change in a live region
-    // because changes to the sort value is not widely supported yet
-    // see: https://a11ysupport.io/tech/aria/aria-sort_attribute
-    var announcement = sortDirection === 'ascending'
-        ? sortAscendingAnnouncement
-        : sortDirection === 'descending'
-            ? sortDescendingAnnouncement
-            : '';
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production')
+            return;
+        if (_sortAscendingAnnouncement !== undefined ||
+            _sortDescendingAnnouncement !== undefined) {
+            console.warn('[TableHeader] The following props are deprecated and no longer used: sortAscendingAnnouncement, sortDescendingAnnouncement. ' +
+                'Sort state is communicated via aria-sort. ' +
+                'See https://cauldron.dequelabs.com/components/Table for more information.');
+        }
+    }, [_sortAscendingAnnouncement, _sortDescendingAnnouncement]);
     return (React__default["default"].createElement("th", tslib.__assign({ ref: tableHeaderRef, "aria-sort": sortDirection, className: classNames__default["default"](variant === 'cell'
             ? ['TableCell', 'TableHeader--cell-variant']
             : 'TableHeader', className, {
@@ -3213,9 +3205,7 @@ var TableHeader = React.forwardRef(function (_a, ref) {
             'TableHeader--sort-descending': sortDirection === 'descending'
         }), style: tslib.__assign(tslib.__assign({}, tableGridStyles), style) }, other), !!onSort && !!sortDirection ? (React__default["default"].createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
         children,
-        React__default["default"].createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default["default"].createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default["default"].createElement(Icon, { type: "table-sort-ascending" })) : (React__default["default"].createElement(Icon, { type: "table-sort-descending" }))),
-        React__default["default"].createElement(Offscreen, null,
-            React__default["default"].createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
+        React__default["default"].createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default["default"].createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default["default"].createElement(Icon, { type: "table-sort-ascending" })) : (React__default["default"].createElement(Icon, { type: "table-sort-descending" }))))) : (children)));
 });
 TableHeader.displayName = 'TableHeader';
 
@@ -3419,9 +3409,9 @@ var Stepper = function (_a) {
 Stepper.displayName = 'Stepper';
 
 var ProgressBar = React.forwardRef(function (_a, ref) {
-    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.progressMax, progressMax = _c === void 0 ? 100 : _c, _d = _a.progressMin, progressMin = _d === void 0 ? 0 : _d, props = tslib.__rest(_a, ["progress", "progressMax", "progressMin"]);
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.progressMax, progressMax = _c === void 0 ? 100 : _c, _d = _a.progressMin, progressMin = _d === void 0 ? 0 : _d, thin = _a.thin, props = tslib.__rest(_a, ["progress", "progressMax", "progressMin", "thin"]);
     var className = props.className, otherProps = tslib.__rest(props, ["className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('ProgressBar', className), role: "progressbar", "aria-valuemin": progressMin, "aria-valuemax": progressMax, "aria-valuenow": progress, ref: ref }, otherProps),
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('ProgressBar', { 'ProgressBar--thin': thin }, className), role: "progressbar", "aria-valuemin": progressMin, "aria-valuemax": progressMax, "aria-valuenow": progress, ref: ref }, otherProps),
         React__default["default"].createElement("div", { className: "ProgressBar--fill", style: { width: "".concat(Math.min((progress / progressMax) * 100, 100), "%") } })));
 });
 ProgressBar.displayName = 'ProgressBar';

package/package.json

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