@deque/cauldron-react 3.0.1-canary.10f975c9 → 3.0.1-canary.343d9e04

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

@@ -7,10 +7,11 @@ interface PanelProps extends HTMLAttributes<HTMLElement> {
         text: ReactElement<any>;
         level: number | undefined;
     };
+    collapsed?: boolean;
     className?: string;
 }
 declare const Panel: {
-    ({ children, className, heading, ...other }: PanelProps): JSX.Element;
+    ({ children, collapsed, className, heading, ...other }: PanelProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

package/lib/components/Tabs/Tabs.d.ts

@@ -5,6 +5,7 @@ declare type TabsProps = {
     children: React.ReactNode;
     initialActiveIndex?: number;
     thin?: boolean;
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     onChange?: ({ activeTabIndex, target }: {
         activeTabIndex: number;
@@ -12,7 +13,7 @@ declare type TabsProps = {
     }) => void;
 } & Cauldron.LabelProps;
 declare const Tabs: {
-    ({ children, thin, initialActiveIndex, className, onChange, ...labelProp }: TabsProps): JSX.Element;
+    ({ children, thin, orientation, initialActiveIndex, className, onChange, ...labelProp }: TabsProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
@@ -20,6 +21,7 @@ declare const Tabs: {
         'aria-labelledby': PropTypes.Requireable<string>;
         initialActiveIndex: PropTypes.Requireable<number>;
         thin: PropTypes.Requireable<boolean>;
+        orientation: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
     };
 };

package/lib/index.js

@@ -259,11 +259,11 @@ var Icon = React.forwardRef(function (_a, ref) {
     var _b;
     var label = _a.label, className = _a.className, type = _a.type, other = tslib.__rest(_a, ["label", "className", "type"]);
     var isMounted = React.useRef(true);
-    var _c = type.match(/(.*)-(right|left|up|down)$/) || [
+    var _c = tslib.__read(type.match(/(.*)-(right|left|up|down)$/) || [
         '',
         type
-    ], name = _c[1], direction = _c[2];
-    var _d = React.useState(null), IconSVG = _d[0], setIcon = _d[1];
+    ], 3), name = _c[1], direction = _c[2];
+    var _d = tslib.__read(React.useState(null), 2), IconSVG = _d[0], setIcon = _d[1];
     React.useEffect(function () {
         isMounted.current = true;
         // NOTE: we don't want to pollute test output with
@@ -479,9 +479,9 @@ var TopBar = /** @class */ (function (_super) {
                         args[_i] = arguments[_i];
                     }
                     // @ts-ignore we're just spreading the original args
-                    _this.onKeyDown.apply(_this, args);
+                    _this.onKeyDown.apply(_this, tslib.__spread(args));
                     if (child.props.onKeyDown) {
-                        (_a = child.props).onKeyDown.apply(_a, args);
+                        (_a = child.props).onKeyDown.apply(_a, tslib.__spread(args));
                     }
                 },
                 tabIndex: 0,
@@ -517,7 +517,7 @@ var TopBar = /** @class */ (function (_super) {
     };
     TopBar.prototype.onKeyDown = function (e) {
         var key = keyname(e.which);
-        var menuItems = tslib.__spreadArrays(this.menuItems);
+        var menuItems = tslib.__spread(this.menuItems);
         // account for hidden side bar trigger (hamburger)
         if (this.state.wide && this.props.hasTrigger) {
             menuItems.shift();
@@ -669,7 +669,7 @@ var ClickOutsideListener = /** @class */ (function (_super) {
     return ClickOutsideListener;
 }(React__default.Component));
 
-var _a = [38, 40, 9, 13, 32, 27], up = _a[0], down = _a[1], tab = _a[2], enter = _a[3], space = _a[4], esc = _a[5];
+var _a = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a[0], down = _a[1], tab = _a[2], enter = _a[3], space = _a[4], esc = _a[5];
 var OptionsMenuList = /** @class */ (function (_super) {
     tslib.__extends(OptionsMenuList, _super);
     function OptionsMenuList(props) {
@@ -797,7 +797,7 @@ var OptionsMenuList = /** @class */ (function (_super) {
     return OptionsMenuList;
 }(React__default.Component));
 
-var down$1 = [40][0];
+var _a$1 = tslib.__read([40], 1), down$1 = _a$1[0];
 var OptionsMenu = /** @class */ (function (_super) {
     tslib.__extends(OptionsMenu, _super);
     function OptionsMenu(props) {
@@ -999,8 +999,8 @@ var NavBar = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, _c = _a.navTriggerLabel, navTriggerLabel = _c === void 0 ? 'MAIN MENU' : _c, propId = _a.propId;
     var navRef = React.useRef(null);
     var triggerRef = React.useRef(null);
-    var _d = React.useState(false), showDropdown = _d[0], setShowDropdown = _d[1];
-    var menuId = ([propId] || nextId.useId(1, 'navbar'))[0];
+    var _d = tslib.__read(React.useState(false), 2), showDropdown = _d[0], setShowDropdown = _d[1];
+    var _e = tslib.__read([propId] || nextId.useId(1, 'navbar'), 1), menuId = _e[0];
     var showNavItems = !collapsed || (collapsed && showDropdown);
     var handleOutSideEvent = function (e) {
         var _a;
@@ -1136,9 +1136,9 @@ var SideBar = /** @class */ (function (_super) {
     SideBar.prototype.animate = function () {
         var _this = this;
         var show = this.props.show;
-        var _a = show
+        var _a = tslib.__read(show
             ? ['SideBar--show', 'SideBar--show SideBar--active']
-            : ['SideBar--show', ''], first = _a[0], second = _a[1];
+            : ['SideBar--show', ''], 2), first = _a[0], second = _a[1];
         this.setState({ animateClass: first });
         // css3 animations require transition classes to be added on separate tics
         setTimeout(function () {
@@ -1472,14 +1472,14 @@ var fireCustomEvent = function (show, button) {
 function Tooltip(_a) {
     var _this = this;
     var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, _e = _a.show, showProp = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, className = _a.className, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "hideElementOnHidden", "className"]);
-    var id = (propId ? [propId] : nextId.useId(1, 'tooltip'))[0];
+    var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
     var hovering = React.useRef(false);
-    var _g = React.useState(initialPlacement), placement = _g[0], setPlacement = _g[1];
-    var _h = React.useState(!!showProp), showTooltip = _h[0], setShowTooltip = _h[1];
-    var _j = React.useState(null), targetElement = _j[0], setTargetElement = _j[1];
-    var _k = React.useState(null), tooltipElement = _k[0], setTooltipElement = _k[1];
-    var _l = React.useState(null), arrowElement = _l[0], setArrowElement = _l[1];
-    var _m = reactPopper.usePopper(targetElement, tooltipElement, {
+    var _h = tslib.__read(React.useState(initialPlacement), 2), placement = _h[0], setPlacement = _h[1];
+    var _j = tslib.__read(React.useState(!!showProp), 2), showTooltip = _j[0], setShowTooltip = _j[1];
+    var _k = tslib.__read(React.useState(null), 2), targetElement = _k[0], setTargetElement = _k[1];
+    var _l = tslib.__read(React.useState(null), 2), tooltipElement = _l[0], setTooltipElement = _l[1];
+    var _m = tslib.__read(React.useState(null), 2), arrowElement = _m[0], setArrowElement = _m[1];
+    var _o = reactPopper.usePopper(targetElement, tooltipElement, {
         placement: initialPlacement,
         modifiers: [
             { name: 'preventOverflow', options: { padding: 8 } },
@@ -1487,7 +1487,7 @@ function Tooltip(_a) {
             { name: 'offset', options: { offset: [0, 8] } },
             { name: 'arrow', options: { padding: 5, element: arrowElement } }
         ]
-    }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
+    }), styles = _o.styles, attributes = _o.attributes, update = _o.update;
     var show = function () { return tslib.__awaiter(_this, void 0, void 0, function () {
         return tslib.__generator(this, function (_a) {
             switch (_a.label) {
@@ -1740,19 +1740,29 @@ var Pointout = /** @class */ (function (_super) {
             }
         };
         _this.handleOffscreenFocusIn = function (_a) {
+            var e_1, _b;
             var target = _a.target;
-            var _b = _this, offscreenRef = _b.offscreenRef, visibleRef = _b.visibleRef, getFocusableElements = _b.getFocusableElements;
+            var _c = _this, offscreenRef = _c.offscreenRef, visibleRef = _c.visibleRef, getFocusableElements = _c.getFocusableElements;
             var offscreenFocusable = getFocusableElements(offscreenRef);
             var visibleFocusable = getFocusableElements(visibleRef);
             var elementIndex = offscreenFocusable.findIndex(function (element) { return element === target; });
             if (elementIndex === -1 || !visibleFocusable[elementIndex]) {
                 return;
             }
-            // Tag focusable elements
-            for (var _i = 0, visibleFocusable_1 = visibleFocusable; _i < visibleFocusable_1.length; _i++) {
-                var element = visibleFocusable_1[_i];
-                element.setAttribute('data-focusable', 'true');
-                element.setAttribute('tabindex', '-1');
+            try {
+                // Tag focusable elements
+                for (var visibleFocusable_1 = tslib.__values(visibleFocusable), visibleFocusable_1_1 = visibleFocusable_1.next(); !visibleFocusable_1_1.done; visibleFocusable_1_1 = visibleFocusable_1.next()) {
+                    var element = visibleFocusable_1_1.value;
+                    element.setAttribute('data-focusable', 'true');
+                    element.setAttribute('tabindex', '-1');
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (visibleFocusable_1_1 && !visibleFocusable_1_1.done && (_b = visibleFocusable_1["return"])) _b.call(visibleFocusable_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
             visibleFocusable[elementIndex].classList.add('Pointout--focus-active');
         };
@@ -1785,7 +1795,7 @@ var Pointout = /** @class */ (function (_super) {
                 top -= rect.top - portalNode.scrollTop;
                 left -= rect.left - portalNode.scrollLeft;
             }
-            var arrowBoxSide = arrowPosition.split('-')[0];
+            var _e = tslib.__read(arrowPosition.split('-'), 1), arrowBoxSide = _e[0];
             var style;
             switch (arrowBoxSide) {
                 case 'right':
@@ -2237,7 +2247,7 @@ var Select = React__default.forwardRef(function (_a, ref) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     var onChangeEvent = onChange !== null && onChange !== void 0 ? onChange : (function () { });
     var isControlled = typeof value !== 'undefined';
-    var _c = React.useState(value || defaultValue || ''), currentValue = _c[0], setCurrentValue = _c[1];
+    var _c = tslib.__read(React.useState(value || defaultValue || ''), 2), currentValue = _c[0], setCurrentValue = _c[1];
     var handleChange = function (e) {
         onChangeEvent(e);
         if (isControlled) {
@@ -2294,8 +2304,8 @@ var RadioGroup = function (_a) {
     _b = _a.onChange, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onChange = _b === void 0 ? function () { } : _b, className = _a.className, other = tslib.__rest(_a, ["name", "radios", "defaultValue", "value", "onChange", "className"]);
-    var _c = React.useState(value || defaultValue || null), currentValue = _c[0], setCurrentValue = _c[1];
-    var _d = React.useState(null), focusIndex = _d[0], setFocusIndex = _d[1];
+    var _c = tslib.__read(React.useState(value || defaultValue || null), 2), currentValue = _c[0], setCurrentValue = _c[1];
+    var _d = tslib.__read(React.useState(null), 2), focusIndex = _d[0], setFocusIndex = _d[1];
     var inputs = React.useRef([]);
     var handleChange = function (value) { return setCurrentValue(value); };
     var onRadioFocus = function (index) { return setFocusIndex(index); };
@@ -2364,8 +2374,8 @@ RadioGroup.displayName = 'RadioGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
     var id = _a.id, label = _a.label, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, other = tslib.__rest(_a, ["id", "label", "error", "checkboxRef", "className", "onChange", 'aria-describedby', "disabled", "checked"]);
-    var _d = React.useState(checked), isChecked = _d[0], setIsChecked = _d[1];
-    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var _d = tslib.__read(React.useState(checked), 2), isChecked = _d[0], setIsChecked = _d[1];
+    var _e = tslib.__read(React.useState(false), 2), focused = _e[0], setFocused = _e[1];
     var checkRef = React.useRef(null);
     React.useEffect(function () {
         setIsChecked(checked);
@@ -8092,8 +8102,8 @@ var useDidUpdate = function (effect, dependencies) {
 };
 
 var Tabs = function (_a) {
-    var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className", "onChange"]);
-    var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
+    var children = _a.children, thin = _a.thin, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.initialActiveIndex, initialActiveIndex = _c === void 0 ? 0 : _c, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "orientation", "initialActiveIndex", "className", "onChange"]);
+    var _d = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var tabsRef = React.useRef(null);
     var focusedTabRef = React.useRef(null);
     var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
@@ -8104,34 +8114,48 @@ var Tabs = function (_a) {
     var handleKeyDown = function (event) {
         var key = event.key;
         var newIndex = activeIndex;
+        var forward;
+        var backward;
+        if (orientation === 'horizontal') {
+            forward = 'ArrowRight';
+            backward = 'ArrowLeft';
+        }
+        else {
+            forward = 'ArrowDown';
+            backward = 'ArrowUp';
+        }
         switch (key) {
-            case 'ArrowLeft': {
+            case backward: {
                 newIndex = activeIndex - 1;
                 // circularity
                 if (newIndex === -1) {
                     newIndex = tabCount - 1;
                 }
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
-            case 'ArrowRight': {
+            case forward: {
                 newIndex = activeIndex + 1;
                 // circularity
                 if (newIndex === tabCount) {
                     newIndex = 0;
                 }
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
             case 'Home': {
                 newIndex = 0;
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
             case 'End': {
                 event.preventDefault();
                 newIndex = tabCount - 1;
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
         }
@@ -8141,7 +8165,7 @@ var Tabs = function (_a) {
         var _b;
         var _c = child.props, target = _c.target, propId = _c.id, other = tslib.__rest(_c, ["target", "id"]);
         var selected = index === activeIndex;
-        var id = (propId ? [propId] : nextId.useId(1, 'tab'))[0];
+        var _d = tslib.__read(propId ? [propId] : nextId.useId(1, 'tab'), 1), id = _d[0];
         React.useEffect(function () {
             var _a;
             (_a = target.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', id);
@@ -8164,7 +8188,9 @@ var Tabs = function (_a) {
         }
     }, [activeIndex]);
     return (React__default.createElement("div", { className: classNames('Tabs', className, {
-            'Tabs--thin': thin
+            'Tabs--thin': thin,
+            'Tabs--vertical': orientation === 'vertical',
+            'Tabs--horizontal': orientation === 'horizontal'
         }), ref: tabsRef },
         React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
 };
@@ -8175,12 +8201,13 @@ Tabs.propTypes = {
     'aria-labelledby': PropTypes.string,
     initialActiveIndex: PropTypes.number,
     thin: PropTypes.bool,
+    orientation: PropTypes.string,
     className: PropTypes.string
 };
 
 var TabPanel = React.forwardRef(function (_a, ref) {
     var children = _a.children, propId = _a.id, className = _a.className, other = tslib.__rest(_a, ["children", "id", "className"]);
-    var id = (propId ? [propId] : nextId.useId(1, 'tabpanel'))[0];
+    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'tabpanel'), 1), id = _b[0];
     return (React__default.createElement("div", tslib.__assign({ role: "tabpanel", className: classNames('TabPanel', className), id: id, ref: ref }, other), children));
 });
 TabPanel.displayName = 'TabPanel';
@@ -8257,12 +8284,15 @@ Stepper.propTypes = {
 };
 
 var Panel = function (_a) {
-    var children = _a.children, className = _a.className, heading = _a.heading, other = tslib.__rest(_a, ["children", "className", "heading"]);
+    var _b;
+    var children = _a.children, collapsed = _a.collapsed, className = _a.className, heading = _a.heading, other = tslib.__rest(_a, ["children", "collapsed", "className", "heading"]);
     var Heading = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
         ? heading.level
         : 2);
     var headingId = typeof heading === 'object' && 'id' in heading ? heading.id : randomId();
-    return (React__default.createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames('Panel', className) }, other),
+    return (React__default.createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames('Panel', className, (_b = {},
+            _b['Panel--collapsed'] = collapsed,
+            _b)) }, other),
         React__default.createElement(Heading, { id: headingId, className: "Panel__Heading" }, typeof heading === 'object' && 'text' in heading
             ? heading.text
             : heading),
@@ -8337,9 +8367,9 @@ var Pagination = React__default.forwardRef(function (_a, ref) {
     var isFirstPage = currentPage === 1;
     return (React__default.createElement("div", tslib.__assign({ ref: ref, className: classNames('Pagination', className) }, other),
         React__default.createElement("ul", null,
-            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { tooltip: firstPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: firstPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-double-left" }))) : (React__default.createElement(IconButton, { icon: "chevron-double-left", tooltipPlacement: tooltipPlacement, label: firstPageLabel, onClick: onFirstPageClick }))),
-            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { tooltip: previousPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: previousPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-left" }))) : (React__default.createElement(IconButton, { icon: "chevron-left", tooltipPlacement: tooltipPlacement, label: previousPageLabel, onClick: onPreviousPageClick }))),
             React__default.createElement("li", null,
                 React__default.createElement("span", { role: "log", "aria-atomic": "true" }, statusLabel || (React__default.createElement("span", null,
@@ -8350,9 +8380,9 @@ var Pagination = React__default.forwardRef(function (_a, ref) {
                     React__default.createElement("strong", null, itemEnd),
                     " of ",
                     React__default.createElement("strong", null, totalItems))))),
-            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { tooltip: nextPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: nextPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-right" }))) : (React__default.createElement(IconButton, { icon: "chevron-right", tooltipPlacement: tooltipPlacement, label: nextPageLabel, onClick: onNextPageClick }))),
-            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { tooltip: lastPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: lastPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-double-right" }))) : (React__default.createElement(IconButton, { icon: "chevron-double-right", tooltipPlacement: tooltipPlacement, label: lastPageLabel, onClick: onLastPageClick }))))));
 });
 Pagination.displayName = 'Pagination';
@@ -8390,7 +8420,7 @@ var DARK_THEME_CLASS = 'cauldron--theme-dark';
 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 _d = React.useState(initialTheme), theme = _d[0], setTheme = _d[1];
+    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';
     };
@@ -8403,12 +8433,22 @@ var ThemeProvider = function (_a) {
     }, [context, theme]);
     // Use a MutationObserver to track changes to the classes outside of the context of React
     var handleMutation = function (mutationList) {
-        for (var _i = 0, mutationList_1 = mutationList; _i < mutationList_1.length; _i++) {
-            var mutation = mutationList_1[_i];
-            if (mutation.type === 'attributes' &&
-                mutation.attributeName === 'class') {
-                setTheme(getThemeFromContext());
+        var e_1, _a;
+        try {
+            for (var mutationList_1 = tslib.__values(mutationList), mutationList_1_1 = mutationList_1.next(); !mutationList_1_1.done; mutationList_1_1 = mutationList_1.next()) {
+                var mutation = mutationList_1_1.value;
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'class') {
+                    setTheme(getThemeFromContext());
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (mutationList_1_1 && !mutationList_1_1.done && (_a = mutationList_1["return"])) _a.call(mutationList_1);
             }
+            finally { if (e_1) throw e_1.error; }
         }
     };
     React.useEffect(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "3.0.1-canary.10f975c9",
+  "version": "3.0.1-canary.343d9e04",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"