@deque/cauldron-react 6.27.0-canary.058d302b → 6.27.0-canary.0f500709

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/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/index.js

@@ -2119,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
@@ -2137,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,
@@ -3187,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, {
@@ -3211,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';
 
@@ -4610,16 +4602,6 @@ var Combobox = React.forwardRef(function (_a, ref) {
                 : ComboboxNoResults;
     }, [renderNoResults]);
     var noMatchingOptions = !!inputValue && !matchingOptions.size && (React__default["default"].createElement(NoMatchingOptions, null));
-    var comboboxListbox = (
-    // eslint-disable-next-line
-    // @ts-expect-error
-    // multiselect & value props are passed to Listbox, but TS is unable to infer that
-    // it's a correct mapping from Combobox's multiselect & value props
-    React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
-            'Combobox__listbox--open': open
-        }), role: noMatchingOptions ? 'presentation' : 'listbox', "aria-labelledby": noMatchingOptions ? undefined : "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: multiselect ? selectedValues : selectedValues[0], onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: noMatchingOptions ? undefined : -1, "aria-activedescendant": undefined, multiselect: multiselect, disabled: disabled },
-        comboboxOptions,
-        noMatchingOptions));
     var errorId = "".concat(id, "-error");
     var descriptionId = "".concat(id, "-description");
     var describedby = ariaDescribedby;
@@ -4630,6 +4612,16 @@ var Combobox = React.forwardRef(function (_a, ref) {
         describedby = addIdRef(describedby, errorId);
     }
     var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': describedby });
+    var comboboxListbox = (
+    // eslint-disable-next-line
+    // @ts-expect-error
+    // multiselect & value props are passed to Listbox, but TS is unable to infer that
+    // it's a correct mapping from Combobox's multiselect & value props
+    React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
+            'Combobox__listbox--open': open
+        }), role: noMatchingOptions ? 'presentation' : 'listbox', "aria-labelledby": noMatchingOptions ? undefined : "".concat(id, "-label"), "aria-describedby": describedby, id: "".concat(id, "-listbox"), value: multiselect ? selectedValues : selectedValues[0], onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: noMatchingOptions ? undefined : -1, "aria-activedescendant": undefined, multiselect: multiselect, disabled: disabled },
+        comboboxOptions,
+        noMatchingOptions));
     return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', { 'Combobox--multiselect': multiselect }, className), ref: comboboxRef },
         name &&
             formValues.map(function (formValue, index) { return (React__default["default"].createElement("input", { type: "hidden", key: index, name: name, value: formValue })); }),
@@ -4662,7 +4654,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
                     };
                     return (React__default["default"].createElement(ComboboxPill, { ref: refCallback, key: value, value: value, removeOptionLabel: removeOptionLabels[index], disabled: disabled, onClick: handleClick, onKeyDown: handlePillKeyDown }));
                 }),
-            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: inputValue, role: "combobox", disabled: disabled, "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, inputProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
+            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: inputValue, role: "combobox", disabled: disabled, "aria-invalid": error ? true : undefined, "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, inputProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
             React__default["default"].createElement("span", { className: "Combobox__arrow" })),
         React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: inputValue, formValues: formValues, selectedValues: selectedValues, removeOptionLabels: removeOptionLabels, setRemoveOptionLabels: setRemoveOptionLabels, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValues: setFormValues }, portal && typeof document !== 'undefined'
             ? reactDom.createPortal(comboboxListbox, 

package/package.json

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