@deque/cauldron-react 6.0.0 → 6.1.0-canary.c2d49bda

package/lib/__tests__/setupTests.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'jest-axe/extend-expect';

package/lib/cauldron.css

@@ -56,6 +56,8 @@ a.Button--thin {
 
 .Icon svg {
   display: block;
+  height: var(--icon-size);
+  width: var(--icon-size);
 }
 
 /* Icon--down is the default orientation */

package/lib/index.js

@@ -1345,7 +1345,8 @@ SideBarItem.defaultProps = {
  */
 var AriaIsolate = /** @class */ (function () {
     function AriaIsolate(el) {
-        if (!(el instanceof HTMLElement)) {
+        // eslint-disable-next-line ssr-friendly/no-dom-globals-in-constructor
+        if (typeof HTMLElement === 'undefined' || !(el instanceof HTMLElement)) {
             throw new Error('AriaIsolate must be instantiated with a valid HTML element');
         }
         this.element = el;
@@ -1735,7 +1736,9 @@ function Tooltip(_a) {
             }), ref: setTooltipElement, role: "tooltip", style: styles.popper }, attributes.popper, props),
             variant !== 'big' && (React__default["default"].createElement("div", { className: "TooltipArrow", ref: setArrowElement, style: styles.arrow })),
             children), (portal && 'current' in portal ? portal.current : portal) ||
-            document.body)
+            (
+            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+            document === null || document === void 0 ? void 0 : document.body))
         : null));
 }
 Tooltip.displayName = 'Tooltip';
@@ -1756,7 +1759,7 @@ var TooltipContent = function (_a) {
  */
 // eslint-disable-next-line react/display-name
 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, other = tslib.__rest(_a, ["as", "icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "className", "variant", "disabled", "tabIndex"]);
+    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 internalRef = React.useRef();
     React.useImperativeHandle(ref, function () { return internalRef.current; });
     // Configure additional properties based on the type of the Component
@@ -1779,7 +1782,8 @@ var IconButton = React.forwardRef(function (_a, ref) {
                 IconButton: true,
                 'IconButton--primary': variant === 'primary',
                 'IconButton--secondary': variant === 'secondary',
-                'IconButton--error': variant === 'error'
+                'IconButton--error': variant === 'error',
+                'IconButton--large': large
             }), 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)),
@@ -2751,7 +2755,7 @@ var Step = function (props) {
         liProps = other;
     }
     return (React__default["default"].createElement("li", tslib.__assign({ className: classNames__default["default"]('Stepper__step', "Stepper__step--".concat(status), className), "aria-current": status === 'current' ? 'step' : 'false' }, liProps),
-        React__default["default"].createElement("div", { className: "Stepper__step-line" }),
+        React__default["default"].createElement("div", { className: classNames__default["default"]('Stepper__step-line', "Stepper__step--".concat(status, "-line")) }),
         React__default["default"].createElement("div", { className: "Stepper__step-content" }, isTooltip ? (React__default["default"].createElement(TooltipTabstop, { placement: "bottom", tooltip: tooltip, 
             // the pseudo content (ex: "1") is conveyed
             // by the list item's position in the set of
@@ -2759,9 +2763,9 @@ var Step = function (props) {
             // it with the contents of the tooltip in the
             // tab stop's accessible name.
             association: "aria-labelledby", "aria-label": tooltipText },
-            React__default["default"].createElement("div", { className: "Stepper__step-indicator" }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: "Stepper__step-indicator" }),
-            children ? (React__default["default"].createElement("div", { className: "Stepper__step-label" }, children)) : null)))));
+            React__default["default"].createElement("div", { className: classNames__default["default"]('Stepper__step-indicator', "Stepper__step--".concat(status, "-indicator")) }, status === 'complete' && React__default["default"].createElement(Icon, { type: 'check' })))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { className: classNames__default["default"]('Stepper__step-indicator', "Stepper__step--".concat(status, "-indicator")) }, status === 'complete' && React__default["default"].createElement(Icon, { type: 'check' })),
+            children ? (React__default["default"].createElement("div", { className: classNames__default["default"]('Stepper__step-label', "Stepper__step--".concat(status, "-label")) }, children)) : null)))));
 };
 Step.displayName = 'Step';
 var Stepper = function (_a) {
@@ -3548,8 +3552,12 @@ var Combobox = React.forwardRef(function (_a, ref) {
         }
     }, [open]);
     React.useEffect(function () {
+        var _a = tslib.__read(Array.from(matchingOptions.entries()).find(function (_a) {
+            var _b = tslib.__read(_a, 2), selected = _b[1].selected;
+            return selected;
+        }) || [], 2), element = _a[0], option = _a[1];
         if (autocomplete === 'manual') {
-            setActiveDescendant(null);
+            setActiveDescendant(!element ? null : tslib.__assign({ element: element }, option));
         }
         else if (autocomplete === 'automatic' &&
             matchingOptions.size &&
@@ -3588,7 +3596,9 @@ var Combobox = React.forwardRef(function (_a, ref) {
     var handleComboboxOptionClick = React.useCallback(function () {
         var _a;
         // maintain focus on the input
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (inputRef.current !== document.activeElement) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }, []);
     var handleBlur = React.useCallback(function (event) {
         var _a;
@@ -3606,8 +3616,11 @@ var Combobox = React.forwardRef(function (_a, ref) {
         var enterKeypress = event.key === Enter;
         var escKeypress = event.key === Escape;
         var arrowKeypress = ['ArrowDown', 'ArrowUp'].includes(event.key);
-        if ([Home, End].includes(event.key)) {
-            // prevent the page from scrolling and allow start/end option activation
+        if (
+        // prevent the page from scrolling and allow start/end option activation
+        [Home, End].includes(event.key) ||
+            // prevent combobox from submitting any forms when the listbox is expanded
+            (enterKeypress && open)) {
             event.preventDefault();
         }
         if (escKeypress) {
@@ -3707,10 +3720,13 @@ var Combobox = React.forwardRef(function (_a, ref) {
             onClick: handleInputClick },
             React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: value, role: "combobox", "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: value, formValue: formValue, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValue: setFormValue }, portal
-            ? reactDom.createPortal(comboboxListbox, portal instanceof HTMLElement
+        React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: value, formValue: formValue, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValue: setFormValue }, portal && typeof document !== 'undefined'
+            ? reactDom.createPortal(comboboxListbox, 
+            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+            portal instanceof HTMLElement
                 ? portal
                 : portal.current ||
+                    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
                     /* istanbul ignore next: default fallback value */ document.body)
             : comboboxListbox),
         hasError && (React__default["default"].createElement("div", { className: "Error", id: errorId }, error))));
@@ -3858,10 +3874,25 @@ var Popover = React.forwardRef(function (_a, ref) {
                 }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, additionalProps, props),
                 React__default["default"].createElement("div", { className: "Popover__popoverArrow", ref: setArrowElement, style: styles.arrow }),
                 React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
-                variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) || document.body);
+                variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) ||
+        // Dependent on "isBrowser" check above:
+        // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+        document.body);
 });
 Popover.displayName = 'Popover';
 
+function Timeline(_a) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default["default"].createElement("ol", tslib.__assign({ className: classNames__default["default"]('Timeline', className) }, props), children));
+}
+
+function TimelineItem(_a) {
+    var className = _a.className, children = _a.children, icon = _a.icon, props = tslib.__rest(_a, ["className", "children", "icon"]);
+    return (React__default["default"].createElement("li", tslib.__assign({ className: classNames__default["default"]('TimelineItem', className) }, props),
+        React__default["default"].createElement("span", { className: "TimelineItem__separator" }, icon),
+        React__default["default"].createElement("div", { className: "TimelineItem__details" }, children)));
+}
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -3871,17 +3902,21 @@ var ThemeContext = React.createContext({
     }
 });
 var ThemeProvider = function (_a) {
-    var children = _a.children, _b = _a.context, context = _b === void 0 ? document.body : _b, _c = _a.initialTheme, initialTheme = _c === void 0 ? 'light' : _c;
+    var children = _a.children, 
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    _b = _a.context, 
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    context = _b === void 0 ? document === null || document === void 0 ? void 0 : document.body : _b, _c = _a.initialTheme, initialTheme = _c === void 0 ? 'light' : _c;
     var _d = tslib.__read(React.useState(initialTheme), 2), theme = _d[0], setTheme = _d[1];
     var getThemeFromContext = function () {
-        return context.classList.contains(DARK_THEME_CLASS) ? 'dark' : 'light';
+        return (context === null || context === void 0 ? void 0 : context.classList.contains(DARK_THEME_CLASS)) ? 'dark' : 'light';
     };
     var toggleTheme = function () {
         return setTheme(getThemeFromContext() === 'dark' ? 'light' : 'dark');
     };
     React.useEffect(function () {
-        context.classList.toggle(LIGHT_THEME_CLASS, theme === 'light');
-        context.classList.toggle(DARK_THEME_CLASS, theme === 'dark');
+        context === null || context === void 0 ? void 0 : context.classList.toggle(LIGHT_THEME_CLASS, theme === 'light');
+        context === null || context === void 0 ? void 0 : context.classList.toggle(DARK_THEME_CLASS, theme === 'dark');
     }, [context, theme]);
     // Use a MutationObserver to track changes to the classes outside of the context of React
     var handleMutation = function (mutationList) {
@@ -3904,6 +3939,9 @@ var ThemeProvider = function (_a) {
         }
     };
     React.useEffect(function () {
+        if (!context) {
+            return;
+        }
         var observer = new MutationObserver(handleMutation);
         observer.observe(context, {
             childList: false,
@@ -4014,6 +4052,8 @@ exports.TagLabel = TagLabel;
 exports.TextField = TextField;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
+exports.Timeline = Timeline;
+exports.TimelineItem = TimelineItem;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;

package/lib/src/axe.d.ts

@@ -0,0 +1,3 @@
+import { JestAxe } from 'jest-axe';
+declare const axe: JestAxe;
+export default axe;

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

@@ -0,0 +1 @@
+export {};

package/lib/{components → src/components}/Combobox/Combobox.d.ts

@@ -28,5 +28,5 @@ interface ComboboxProps extends React.InputHTMLAttributes<Omit<HTMLInputElement,
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
 export default Combobox;

package/lib/src/components/Combobox/Combobox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/{components → src/components}/IconButton/index.d.ts

@@ -15,6 +15,7 @@ export interface IconButtonOwnProps {
     tooltipVariant?: TooltipProps['variant'];
     tooltipPortal?: TooltipProps['portal'];
     variant?: 'primary' | 'secondary' | 'error';
+    large?: boolean;
 }
 type PolymorphicIconButton = Polymorphic.ForwardRefComponent<'button', IconButtonOwnProps>;
 /**

package/lib/src/components/Timeline/Timeline.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TimelineProps extends React.HTMLAttributes<HTMLOListElement> {
+    className?: string;
+}
+export default function Timeline({ className, children, ...props }: TimelineProps): JSX.Element;
+export {};

package/lib/src/components/Timeline/TimelineItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TimelineItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    icon?: React.ReactElement;
+}
+export default function TimelineItem({ className, children, icon, ...props }: TimelineItemProps): JSX.Element;
+export {};

package/lib/src/components/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Timeline';
+export { default as TimelineItem } from './TimelineItem';

package/lib/src/components/Timeline/timeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/{index.d.ts → src/index.d.ts}

@@ -53,6 +53,7 @@ export { default as Notice } from './components/Notice';
 export { default as Listbox, ListboxOption, ListboxGroup } from './components/Listbox';
 export { default as Combobox, ComboboxOption, ComboboxGroup } from './components/Combobox';
 export { default as Popover } from './components/Popover';
+export { default as Timeline, TimelineItem } from './components/Timeline';
 /**
  * Helpers / Utils
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.0.0",
+  "version": "6.1.0-canary.c2d49bda",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -43,11 +43,17 @@
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-typescript": "^11.1.2",
     "@svgr/rollup": "^6.1.2",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "11.1.2",
     "@types/classnames": "^2.2.10",
+    "@types/enzyme-adapter-react-16": "^1.0.9",
+    "@types/jest": "^24.7.1",
+    "@types/jest-axe": "^3.5.4",
     "@types/node": "^17.0.42",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "@types/react-syntax-highlighter": "^15.5.2",
+    "@types/sinon": "^10",
     "autoprefixer": "^9.7.6",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-export-extensions": "^6.22.0",
@@ -85,21 +91,22 @@
     "functions": 85,
     "lines": 85,
     "exclude": [
-      "dist",
+      "lib",
       "coverage",
       "test/**/*.js"
     ]
   },
   "jest": {
     "setupFilesAfterEnv": [
-      "<rootDir>__tests__/setupTests.js"
+      "<rootDir>__tests__/setupTests.ts"
     ],
     "testMatch": [
       "**/__tests__/src/**/*.js",
-      "**/__tests__/demo/**/*.js"
+      "**/__tests__/demo/**/*.js",
+      "**/src/components/**/*.test.tsx"
     ],
     "collectCoverageFrom": [
-      "**/src/**/*.{ts,tsx}"
+      "src/**/*.{ts,tsx}"
     ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/__tests__/styleMock.js",