@deque/cauldron-react 6.1.0 → 6.2.0

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';
@@ -2339,7 +2342,7 @@ var TextField = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         _a.onChange; 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.defaultValue; var _b = _a.error, error = _b === void 0 ? null : _b, requiredText = _a.requiredText, multiline = _a.multiline, ariaDescribedby = _a["aria-describedby"], other = tslib.__rest(_a, ["label", "fieldRef", "value", "onChange", "defaultValue", "error", "requiredText", "multiline", 'aria-describedby']);
+        _a.defaultValue; var _b = _a.error, error = _b === void 0 ? null : _b, requiredText = _a.requiredText, multiline = _a.multiline, ariaDescribedby = _a["aria-describedby"], className = _a.className, other = tslib.__rest(_a, ["label", "fieldRef", "value", "onChange", "defaultValue", "error", "requiredText", "multiline", 'aria-describedby', "className"]);
         // typescript can't infer the type so it's complaining about
         // textarea and input props being incompatible
         // we should probably fix this
@@ -2356,7 +2359,7 @@ var TextField = /** @class */ (function (_super) {
                 }), htmlFor: this.inputId },
                 React__default["default"].createElement("span", null, label),
                 isRequired && (React__default["default"].createElement("span", { className: "Field__required-text" }, requiredText))),
-            React__default["default"].createElement(Field, tslib.__assign({ className: classNames__default["default"]({
+            React__default["default"].createElement(Field, tslib.__assign({ className: classNames__default["default"](className, {
                     'Field__text-input': !multiline,
                     Field__textarea: multiline,
                     'Field--has-error': error
@@ -2369,7 +2372,7 @@ var TextField = /** @class */ (function (_super) {
     TextField.prototype.onChange = function (e) {
         var _a, _b;
         if (this.props.onChange) {
-            this.props.onChange(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '', e);
+            this.props.onChange(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || /* istanbul ignore next: default value */ '', e);
         }
         if (typeof this.props.value !== 'undefined') {
             return;
@@ -3694,7 +3697,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
     var noMatchingOptions = !!(value === null || value === void 0 ? void 0 : value.length) && !matchingOptions.size && (React__default["default"].createElement(NoMatchingOptions, null));
     var comboboxListbox = (React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
             'Combobox__listbox--open': open
-        }), role: "listbox", "aria-labelledby": "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: selectedValue, onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant": undefined },
+        }), role: noMatchingOptions ? 'presentation' : 'listbox', "aria-labelledby": noMatchingOptions ? undefined : "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: selectedValue, onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant": undefined },
         comboboxOptions,
         noMatchingOptions));
     var errorId = "".concat(id, "-error");
@@ -3717,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))));
@@ -3868,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({
@@ -3881,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) {
@@ -3914,6 +3939,9 @@ var ThemeProvider = function (_a) {
         }
     };
     React.useEffect(function () {
+        if (!context) {
+            return;
+        }
         var observer = new MutationObserver(handleMutation);
         observer.observe(context, {
             childList: false,
@@ -4024,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/components/Checkbox/Checkbox.test.d.ts

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

package/lib/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/Tag/index.test.d.ts

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

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

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

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

@@ -4,7 +4,7 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     error?: React.ReactNode;
     defaultValue?: string;
     onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    fieldRef: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+    fieldRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
     requiredText?: string;
     multiline?: boolean;
 }

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/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/lib/src/utils/setRef.d.ts

@@ -1 +1 @@
-export default function setRef<T>(ref: React.Ref<T>, element: T): void;
+export default function setRef<T>(ref: React.Ref<T> | undefined, element: T): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -44,10 +44,11 @@
     "@rollup/plugin-typescript": "^11.1.2",
     "@svgr/rollup": "^6.1.2",
     "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "11.1.2",
+    "@testing-library/react": "^12",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.10",
     "@types/enzyme-adapter-react-16": "^1.0.9",
-    "@types/jest": "^24.7.1",
+    "@types/jest": "^29.5.11",
     "@types/jest-axe": "^3.5.4",
     "@types/node": "^17.0.42",
     "@types/react": "^18.0.12",
@@ -60,8 +61,9 @@
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "jest": "^24.7.1",
+    "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "nyc": "^15.0.1",
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1",
@@ -70,6 +72,7 @@
     "react-dom": "^16.13.1",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
+    "ts-node": "^10.9.2",
     "typescript": "~5.0.0"
   },
   "repository": {
@@ -95,24 +98,5 @@
       "coverage",
       "test/**/*.js"
     ]
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>__tests__/setupTests.ts"
-    ],
-    "testMatch": [
-      "**/__tests__/src/**/*.js",
-      "**/__tests__/demo/**/*.js",
-      "**/src/components/**/*.test.tsx"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{ts,tsx}"
-    ],
-    "moduleNameMapper": {
-      "\\.(css|less)$": "<rootDir>/__tests__/styleMock.js",
-      "react-syntax-highlighter/dist/esm/light": "<rootDir>/__tests__/reactSyntaxHighlighterMock.js",
-      "react-syntax-highlighter/dist/esm/languages/hljs/(.*)": "<rootDir>/__tests__/hljsMock.js",
-      "\\.svg$": "<rootDir>/__tests__/svgMock.js"
-    }
   }
 }