@zendeskgarden/react-accordions 9.0.0-next.6 → 9.0.0-next.7

package/dist/index.cjs.js

@@ -70,7 +70,7 @@ const sizeStyles$2 = props => {
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -82,7 +82,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -94,7 +94,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -106,7 +106,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -118,7 +118,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -142,7 +142,7 @@ const colorStyles$3 = props => {
 };
 const StyledIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -157,7 +157,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -169,7 +169,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -181,7 +181,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -223,7 +223,7 @@ const sizeStyles = props => {
 };
 const StyledPanel = styled__default.default.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -236,7 +236,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -245,24 +245,7 @@ StyledSection.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'accordions.header';
-const StyledHeader = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledHeader",
-  componentId: "sc-2c6rbr-0"
-})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => reactTheming.focusStyles({
-  theme: props.theme,
-  inset: true,
-  condition: props.isFocused,
-  selector: '&:focus-within'
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledHeader.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'accordions.button';
+const COMPONENT_ID$9 = 'accordions.button';
 const colorStyles$1 = props => {
   const showColor = props.isCollapsible || !props.isExpanded;
   let color = reactTheming.getColorV8('foreground', 600 , props.theme);
@@ -272,20 +255,36 @@ const colorStyles$1 = props => {
   return styled.css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
 };
 const StyledButton = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
-})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$1, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$1, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+const COMPONENT_ID$8 = 'accordions.header';
+const StyledHeader = styled__default.default.div.attrs({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.7'
+}).withConfig({
+  displayName: "StyledHeader",
+  componentId: "sc-2c6rbr-0"
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => reactTheming.focusStyles({
+  theme: props.theme,
+  inset: true,
+  selector: `&:has(${StyledButton}:focus-visible)`
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+StyledHeader.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -316,7 +315,7 @@ _ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -328,7 +327,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -340,7 +339,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -352,7 +351,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -364,7 +363,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -376,7 +375,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -395,7 +394,7 @@ const StyledItemIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -492,8 +491,6 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
 const HeaderComponent = React.forwardRef((props, ref) => {
   const {
     onClick,
-    onFocus,
-    onBlur,
     onMouseOver,
     onMouseOut,
     role,
@@ -509,7 +506,6 @@ const HeaderComponent = React.forwardRef((props, ref) => {
     expandedSections
   } = useAccordionContext();
   const sectionValue = useSectionContext();
-  const [isFocused, setIsFocused] = React.useState(false);
   const [isHovered, setIsHovered] = React.useState(false);
   const isExpanded = expandedSections.includes(sectionValue);
   const {
@@ -520,16 +516,6 @@ const HeaderComponent = React.forwardRef((props, ref) => {
     type: 'button',
     value: sectionValue
   });
-  const onHeaderFocus = e => {
-    e.persist();
-    setTimeout(() => {
-      const isAccordionButton = e.target.getAttribute('data-garden-id') === COMPONENT_ID$8;
-      const isFocusVisible = e.target.getAttribute('data-garden-focus-visible');
-      if (isAccordionButton && isFocusVisible) {
-        setIsFocused(true);
-      }
-    }, 0);
-  };
   const value = React.useMemo(() => ({
     isHovered,
     otherTriggerProps
@@ -538,15 +524,12 @@ const HeaderComponent = React.forwardRef((props, ref) => {
     value: value
   }, React__namespace.default.createElement(StyledHeader, _extends$3({
     isCollapsible: isCollapsible,
-    isExpanded: isExpanded,
-    isFocused: isFocused
+    isExpanded: isExpanded
   }, getHeaderProps({
     ref,
     'aria-level': ariaLevel,
     role: role === undefined || role === null ? role : 'heading',
     onClick: containerUtilities.composeEventHandlers(onClick, onTriggerClick),
-    onFocus: containerUtilities.composeEventHandlers(onFocus, onHeaderFocus),
-    onBlur: containerUtilities.composeEventHandlers(onBlur, () => setIsFocused(false)),
     onMouseOver: containerUtilities.composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false)),
     ...other

package/dist/index.esm.js

@@ -45,7 +45,7 @@ const sizeStyles$2 = props => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -57,7 +57,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -69,7 +69,7 @@ StyledLine.defaultProps = {
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -81,7 +81,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -93,7 +93,7 @@ StyledInnerContent.defaultProps = {
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -117,7 +117,7 @@ const colorStyles$3 = props => {
 };
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -132,7 +132,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -144,7 +144,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': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -156,7 +156,7 @@ StyledLabelText.defaultProps = {
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -198,7 +198,7 @@ const sizeStyles = props => {
 };
 const StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -211,7 +211,7 @@ StyledPanel.defaultProps = {
 const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -220,24 +220,7 @@ StyledSection.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'accordions.header';
-const StyledHeader = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledHeader",
-  componentId: "sc-2c6rbr-0"
-})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => focusStyles({
-  theme: props.theme,
-  inset: true,
-  condition: props.isFocused,
-  selector: '&:focus-within'
-}), props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'accordions.button';
+const COMPONENT_ID$9 = 'accordions.button';
 const colorStyles$1 = props => {
   const showColor = props.isCollapsible || !props.isExpanded;
   let color = getColorV8('foreground', 600 , props.theme);
@@ -247,20 +230,36 @@ const colorStyles$1 = props => {
   return css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
 };
 const StyledButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
-})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$1, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$1, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
+const COMPONENT_ID$8 = 'accordions.header';
+const StyledHeader = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.7'
+}).withConfig({
+  displayName: "StyledHeader",
+  componentId: "sc-2c6rbr-0"
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => focusStyles({
+  theme: props.theme,
+  inset: true,
+  selector: `&:has(${StyledButton}:focus-visible)`
+}), props => retrieveComponentStyles(COMPONENT_ID$8, props));
+StyledHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -291,7 +290,7 @@ _ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -303,7 +302,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -315,7 +314,7 @@ StyledTimeline.defaultProps = {
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -327,7 +326,7 @@ StyledSeparator.defaultProps = {
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -339,7 +338,7 @@ StyledTimelineContent.defaultProps = {
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -351,7 +350,7 @@ StyledOppositeContent.defaultProps = {
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -370,7 +369,7 @@ const StyledItemIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -467,8 +466,6 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
 const HeaderComponent = forwardRef((props, ref) => {
   const {
     onClick,
-    onFocus,
-    onBlur,
     onMouseOver,
     onMouseOut,
     role,
@@ -484,7 +481,6 @@ const HeaderComponent = forwardRef((props, ref) => {
     expandedSections
   } = useAccordionContext();
   const sectionValue = useSectionContext();
-  const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const isExpanded = expandedSections.includes(sectionValue);
   const {
@@ -495,16 +491,6 @@ const HeaderComponent = forwardRef((props, ref) => {
     type: 'button',
     value: sectionValue
   });
-  const onHeaderFocus = e => {
-    e.persist();
-    setTimeout(() => {
-      const isAccordionButton = e.target.getAttribute('data-garden-id') === COMPONENT_ID$8;
-      const isFocusVisible = e.target.getAttribute('data-garden-focus-visible');
-      if (isAccordionButton && isFocusVisible) {
-        setIsFocused(true);
-      }
-    }, 0);
-  };
   const value = useMemo(() => ({
     isHovered,
     otherTriggerProps
@@ -513,15 +499,12 @@ const HeaderComponent = forwardRef((props, ref) => {
     value: value
   }, React__default.createElement(StyledHeader, _extends$3({
     isCollapsible: isCollapsible,
-    isExpanded: isExpanded,
-    isFocused: isFocused
+    isExpanded: isExpanded
   }, getHeaderProps({
     ref,
     'aria-level': ariaLevel,
     role: role === undefined || role === null ? role : 'heading',
     onClick: composeEventHandlers(onClick, onTriggerClick),
-    onFocus: composeEventHandlers(onFocus, onHeaderFocus),
-    onBlur: composeEventHandlers(onBlur, () => setIsFocused(false)),
     onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false)),
     ...other

package/dist/typings/styled/accordion/StyledHeader.d.ts

@@ -5,7 +5,6 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 interface IStyledHeader {
-    isFocused?: boolean;
     isExpanded?: boolean;
     isCollapsible?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-accordions",
-  "version": "9.0.0-next.6",
+  "version": "9.0.0-next.7",
   "description": "Components related to accordions in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -27,13 +27,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^9.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.6",
+    "@zendeskgarden/react-theming": "^9.0.0-next.7",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
+  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
 }