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

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

@@ -1756,7 +1756,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 +1779,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 +2752,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 +2760,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 +3549,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 +3593,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 +3613,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) {
@@ -3862,6 +3872,18 @@ var Popover = React.forwardRef(function (_a, ref) {
 });
 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({
@@ -4014,6 +4036,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/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.66285037",
   "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",