@deque/cauldron-react 6.27.0-canary.7fd2f1e5 → 6.27.0-canary.a988b4ae

package/lib/components/Dialog/DialogContext.d.ts

@@ -6,6 +6,7 @@ interface DialogContextValue {
     onClose: () => void;
     forceAction: boolean;
     closeButtonText: string;
+    scrollable: boolean;
 }
 declare const DialogContext: React.Context<DialogContextValue | null>;
 declare function useDialogContext(): DialogContextValue;

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

@@ -12,6 +12,7 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     };
     closeButtonText?: string;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
+    scrollable?: boolean;
 }
 declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
 export default Dialog;

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { DialogProps } from '../Dialog';
 interface ModalProps extends Omit<DialogProps, 'forceAction'> {
     variant?: 'info';
+    scrollable?: boolean;
 }
-declare const Modal: ({ children, className, variant, ...other }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ children, className, variant, scrollable, ...other }: ModalProps) => React.JSX.Element;
 declare const ModalHeader: {
     ({ children, className, ...other }: import("../Dialog").DialogHeaderProps): React.JSX.Element;
     displayName: string;

package/lib/index.js

@@ -1532,9 +1532,9 @@ var isEscape = function (event) {
     return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
 };
 var Dialog = React.forwardRef(function (_a, ref) {
-    var dialogRefProp = _a.dialogRef, _b = _a.forceAction, forceAction = _b === void 0 ? false : _b, className = _a.className, children = _a.children, _c = _a.closeButtonText, closeButtonText = _c === void 0 ? 'Close' : _c, heading = _a.heading, _d = _a.show, show = _d === void 0 ? false : _d, portal = _a.portal, _e = _a.onClose, onClose = _e === void 0 ? function () { return null; } : _e, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show", "portal", "onClose"]);
+    var dialogRefProp = _a.dialogRef, _b = _a.forceAction, forceAction = _b === void 0 ? false : _b, className = _a.className, children = _a.children, _c = _a.closeButtonText, closeButtonText = _c === void 0 ? 'Close' : _c, heading = _a.heading, _d = _a.show, show = _d === void 0 ? false : _d, portal = _a.portal, _e = _a.scrollable, scrollable = _e === void 0 ? false : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { return null; } : _f, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show", "portal", "scrollable", "onClose"]);
     var dialogRef = useSharedRef(dialogRefProp || ref);
-    var _f = tslib.__read(nextId.useId(1, 'dialog-title-'), 1), headingId = _f[0];
+    var _g = tslib.__read(nextId.useId(1, 'dialog-title-'), 1), headingId = _g[0];
     var headingRef = React.useRef(null);
     var isolatorRef = React.useRef();
     var headingLevel = typeof heading === 'object' && 'level' in heading && heading.level
@@ -1605,14 +1605,16 @@ var Dialog = React.forwardRef(function (_a, ref) {
         headingLevel: headingLevel,
         onClose: handleClose,
         forceAction: forceAction,
-        closeButtonText: closeButtonText
+        closeButtonText: closeButtonText,
+        scrollable: scrollable
     }); }, [
         headingId,
         headingRef,
         headingLevel,
         handleClose,
         forceAction,
-        closeButtonText
+        closeButtonText,
+        scrollable
     ]);
     if (!show || !isBrowser()) {
         return null;
@@ -1642,11 +1644,12 @@ var Dialog = React.forwardRef(function (_a, ref) {
 Dialog.displayName = 'Dialog';
 var DialogContent = function (_a) {
     var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
+    var context = React.useContext(DialogContext);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__content', className, {
             'text--align-left': align === 'left',
             'text--align-center': align === 'center',
             'text--align-right': align === 'right'
-        }) }, other), children));
+        }), tabIndex: (context === null || context === void 0 ? void 0 : context.scrollable) ? -1 : undefined }, other), children));
 };
 DialogContent.displayName = 'DialogContent';
 var DialogFooter = function (_a) {
@@ -1700,10 +1703,11 @@ var AlertContent = DialogContent;
 var AlertActions = DialogFooter;
 
 var Modal = function (_a) {
-    var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
+    var children = _a.children, className = _a.className, variant = _a.variant, scrollable = _a.scrollable, other = tslib.__rest(_a, ["children", "className", "variant", "scrollable"]);
     return (React__default["default"].createElement(Dialog, tslib.__assign({ className: classNames__default["default"]('Modal', className, {
-            'Modal--info': variant === 'info'
-        }) }, other, { forceAction: false }), children));
+            'Modal--info': variant === 'info',
+            'Modal--scrollable': scrollable
+        }) }, other, { scrollable: scrollable, forceAction: false }), children));
 };
 var ModalHeader = DialogHeader;
 var ModalHeading = DialogHeading;
@@ -4602,16 +4606,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;
@@ -4622,6 +4616,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 })); }),
@@ -4654,7 +4658,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.7fd2f1e5",
+  "version": "6.27.0-canary.a988b4ae",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",