@zendeskgarden/react-accordions 8.59.0 → 8.60.0

package/dist/index.cjs.js

@@ -77,7 +77,7 @@ const sizeStyles$1 = props => {
 };
 const StyledContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -89,7 +89,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -101,7 +101,7 @@ StyledLine.defaultProps = {
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -113,7 +113,7 @@ StyledStep.defaultProps = {
 const COMPONENT_ID$h = 'accordions.step_inner_content';
 const StyledInnerContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -125,7 +125,7 @@ StyledInnerContent.defaultProps = {
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled__default["default"].ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -149,7 +149,7 @@ const colorStyles$2 = props => {
 };
 const StyledIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -164,7 +164,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -176,7 +176,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$d = 'accordions.step_label_text';
 const StyledLabelText = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -188,7 +188,7 @@ StyledLabelText.defaultProps = {
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -218,7 +218,7 @@ const paddingStyles = props => {
 };
 const StyledPanel = styled__default["default"].section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -231,7 +231,7 @@ StyledPanel.defaultProps = {
 const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -243,7 +243,7 @@ StyledSection.defaultProps = {
 const COMPONENT_ID$9 = 'accordions.header';
 const StyledHeader = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -263,7 +263,7 @@ const colorStyles$1 = props => {
 };
 const StyledButton = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -275,7 +275,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -307,7 +307,7 @@ _ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -319,7 +319,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled__default["default"].ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -331,7 +331,7 @@ StyledTimeline.defaultProps = {
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -343,7 +343,7 @@ StyledSeparator.defaultProps = {
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -355,7 +355,7 @@ StyledTimelineContent.defaultProps = {
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -367,7 +367,7 @@ StyledOppositeContent.defaultProps = {
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -386,7 +386,7 @@ const StyledItemIcon = styled__default["default"](_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -597,22 +597,29 @@ const PanelComponent = React.forwardRef((props, ref) => {
   const panelRef = React.useRef();
   const index = useSectionContext();
   const isExpanded = expandedSections.includes(index);
-  const updateMaxHeight = React.useCallback(debounce__default["default"](() => {
-    if (panelRef.current) {
-      const child = panelRef.current.children[0];
-      child.style.maxHeight = `${child.scrollHeight}px`;
-    }
-  }, 100), [panelRef]);
-  React__default["default"].useEffect(() => {
+  const theme = React.useContext(styled.ThemeContext);
+  const environment = reactTheming.useDocument(theme);
+  React.useEffect(() => {
     if (!isAnimated) {
       return undefined;
     }
-    addEventListener('resize', updateMaxHeight);
-    updateMaxHeight();
-    return () => {
-      removeEventListener('resize', updateMaxHeight);
-    };
-  }, [isAnimated, isExpanded, updateMaxHeight, props.children]);
+    if (environment) {
+      const updateMaxHeight = debounce__default["default"](() => {
+        if (panelRef.current) {
+          const child = panelRef.current.children[0];
+          child.style.maxHeight = `${child.scrollHeight}px`;
+        }
+      }, 100);
+      const win = environment.defaultView || window;
+      win.addEventListener('resize', updateMaxHeight);
+      updateMaxHeight();
+      return () => {
+        updateMaxHeight.cancel();
+        win.removeEventListener('resize', updateMaxHeight);
+      };
+    }
+    return undefined;
+  }, [isAnimated, panelRef, environment, props.children]);
   return React__default["default"].createElement(StyledPanel, getPanelProps({
     role: null,
     ref: mergeRefs__default["default"]([panelRef, ref]),
@@ -788,22 +795,26 @@ const ContentComponent$1 = React.forwardRef((props, ref) => {
     currentStepIndex
   } = useStepContext();
   const isActive = currentStepIndex === activeIndex;
-  const updateMaxHeight = React.useCallback(debounce__default["default"](() => {
-    if (contentRef.current) {
-      const child = contentRef.current.children[0];
-      child.style.maxHeight = `${child.scrollHeight}px`;
-    }
-  }, 100), [contentRef]);
+  const theme = React.useContext(styled.ThemeContext);
+  const environment = reactTheming.useDocument(theme);
   React.useEffect(() => {
-    if (isActive && isHorizontal === false) {
-      addEventListener('resize', updateMaxHeight);
+    if (environment && isActive && isHorizontal === false) {
+      const win = environment.defaultView || window;
+      const updateMaxHeight = debounce__default["default"](() => {
+        if (contentRef.current) {
+          const child = contentRef.current.children[0];
+          child.style.maxHeight = `${child.scrollHeight}px`;
+        }
+      }, 100);
+      win.addEventListener('resize', updateMaxHeight);
       updateMaxHeight();
       return () => {
-        removeEventListener('resize', updateMaxHeight);
+        updateMaxHeight.cancel();
+        win.removeEventListener('resize', updateMaxHeight);
       };
     }
     return undefined;
-  }, [isActive, isHorizontal, props.children, updateMaxHeight]);
+  }, [isActive, isHorizontal, contentRef, environment]);
   return isHorizontal === false ? React__default["default"].createElement(StyledContent, _extends$3({
     ref: mergeRefs__default["default"]([contentRef, ref]),
     isActive: isActive

package/dist/index.esm.js

@@ -6,10 +6,10 @@
  */
 
 import * as React from 'react';
-import React__default, { cloneElement, Children, createContext, useContext, forwardRef, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import React__default, { cloneElement, Children, createContext, useContext, forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { useAccordion } from '@zendeskgarden/container-accordion';
-import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import styled, { css, ThemeContext } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight, useDocument } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import debounce from 'lodash.debounce';
@@ -47,7 +47,7 @@ const sizeStyles$1 = props => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -59,7 +59,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -71,7 +71,7 @@ StyledLine.defaultProps = {
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -83,7 +83,7 @@ StyledStep.defaultProps = {
 const COMPONENT_ID$h = 'accordions.step_inner_content';
 const StyledInnerContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -95,7 +95,7 @@ StyledInnerContent.defaultProps = {
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -119,7 +119,7 @@ const colorStyles$2 = props => {
 };
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -134,7 +134,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -146,7 +146,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$d = 'accordions.step_label_text';
 const StyledLabelText = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -158,7 +158,7 @@ StyledLabelText.defaultProps = {
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -188,7 +188,7 @@ const paddingStyles = props => {
 };
 const StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -201,7 +201,7 @@ StyledPanel.defaultProps = {
 const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -213,7 +213,7 @@ StyledSection.defaultProps = {
 const COMPONENT_ID$9 = 'accordions.header';
 const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -233,7 +233,7 @@ const colorStyles$1 = props => {
 };
 const StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -245,7 +245,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -277,7 +277,7 @@ _ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -289,7 +289,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -301,7 +301,7 @@ StyledTimeline.defaultProps = {
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -313,7 +313,7 @@ StyledSeparator.defaultProps = {
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -325,7 +325,7 @@ StyledTimelineContent.defaultProps = {
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -337,7 +337,7 @@ StyledOppositeContent.defaultProps = {
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -356,7 +356,7 @@ const StyledItemIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.59.0'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -567,22 +567,29 @@ const PanelComponent = forwardRef((props, ref) => {
   const panelRef = useRef();
   const index = useSectionContext();
   const isExpanded = expandedSections.includes(index);
-  const updateMaxHeight = useCallback(debounce(() => {
-    if (panelRef.current) {
-      const child = panelRef.current.children[0];
-      child.style.maxHeight = `${child.scrollHeight}px`;
-    }
-  }, 100), [panelRef]);
-  React__default.useEffect(() => {
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  useEffect(() => {
     if (!isAnimated) {
       return undefined;
     }
-    addEventListener('resize', updateMaxHeight);
-    updateMaxHeight();
-    return () => {
-      removeEventListener('resize', updateMaxHeight);
-    };
-  }, [isAnimated, isExpanded, updateMaxHeight, props.children]);
+    if (environment) {
+      const updateMaxHeight = debounce(() => {
+        if (panelRef.current) {
+          const child = panelRef.current.children[0];
+          child.style.maxHeight = `${child.scrollHeight}px`;
+        }
+      }, 100);
+      const win = environment.defaultView || window;
+      win.addEventListener('resize', updateMaxHeight);
+      updateMaxHeight();
+      return () => {
+        updateMaxHeight.cancel();
+        win.removeEventListener('resize', updateMaxHeight);
+      };
+    }
+    return undefined;
+  }, [isAnimated, panelRef, environment, props.children]);
   return React__default.createElement(StyledPanel, getPanelProps({
     role: null,
     ref: mergeRefs([panelRef, ref]),
@@ -758,22 +765,26 @@ const ContentComponent$1 = forwardRef((props, ref) => {
     currentStepIndex
   } = useStepContext();
   const isActive = currentStepIndex === activeIndex;
-  const updateMaxHeight = useCallback(debounce(() => {
-    if (contentRef.current) {
-      const child = contentRef.current.children[0];
-      child.style.maxHeight = `${child.scrollHeight}px`;
-    }
-  }, 100), [contentRef]);
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
   useEffect(() => {
-    if (isActive && isHorizontal === false) {
-      addEventListener('resize', updateMaxHeight);
+    if (environment && isActive && isHorizontal === false) {
+      const win = environment.defaultView || window;
+      const updateMaxHeight = debounce(() => {
+        if (contentRef.current) {
+          const child = contentRef.current.children[0];
+          child.style.maxHeight = `${child.scrollHeight}px`;
+        }
+      }, 100);
+      win.addEventListener('resize', updateMaxHeight);
       updateMaxHeight();
       return () => {
-        removeEventListener('resize', updateMaxHeight);
+        updateMaxHeight.cancel();
+        win.removeEventListener('resize', updateMaxHeight);
       };
     }
     return undefined;
-  }, [isActive, isHorizontal, props.children, updateMaxHeight]);
+  }, [isActive, isHorizontal, contentRef, environment]);
   return isHorizontal === false ? React__default.createElement(StyledContent, _extends$3({
     ref: mergeRefs([contentRef, ref]),
     isActive: isActive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-accordions",
-  "version": "8.59.0",
+  "version": "8.60.0",
   "description": "Components related to accordions in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.7",
-    "@zendeskgarden/react-theming": "^8.59.0",
+    "@zendeskgarden/react-theming": "^8.60.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "14c3ad1b3abb0f76ffc8512c89d167ecb6f024fa"
+  "gitHead": "8adf13e61f58a64a0ba06794c0362f665e846fe9"
 }