@deque/cauldron-react 6.1.0-canary.e8a7f45e → 6.1.0-canary.f877edfd

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';
@@ -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/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/package.json

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