diff --git a/src/accordion/__tests__/accordion-stateless.scenario.js b/src/accordion/__tests__/accordion-stateless.scenario.js
new file mode 100644
index 0000000000..4fc4fd45c4
--- /dev/null
+++ b/src/accordion/__tests__/accordion-stateless.scenario.js
@@ -0,0 +1,36 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+import {StatelessAccordion, Panel} from '../index.js';
+
+export default function Scenario() {
+ const [expanded, setExpanded] = React.useState(['P1', 'P2']);
+ return (
+ {
+ console.log(key, '----');
+ console.log(expanded);
+ setExpanded(expanded);
+ }}
+ >
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+ Quisque luctus eu sem et pharetra.
+
+
+ Proin egestas dui sed semper iaculis.
+
+
+ );
+}
diff --git a/src/accordion/__tests__/accordion.stories.js b/src/accordion/__tests__/accordion.stories.js
index 56ea2b876f..0e0b38cab0 100644
--- a/src/accordion/__tests__/accordion.stories.js
+++ b/src/accordion/__tests__/accordion.stories.js
@@ -11,10 +11,12 @@ import AccordionControlled from './accordion-controlled.scenario.js';
import AccordionDisabled from './accordion-disabled.scenario.js';
import AccordionExpanded from './accordion-expanded.scenario.js';
import AccordionPanelOverride from './accordion-panel-override.scenario.js';
+import AccordionStateless from './accordion-stateless.scenario.js';
import AccordionDefault from './accordion.scenario.js';
export const Controlled = () => ;
export const Disabled = () => ;
export const Expanded = () => ;
export const PanelOverride = () => ;
+export const StatelessAccordion = () => ;
export const Accordion = () => ;
diff --git a/src/accordion/panel.js b/src/accordion/panel.js
index 1d1acd9b94..a6ac112c66 100644
--- a/src/accordion/panel.js
+++ b/src/accordion/panel.js
@@ -55,29 +55,35 @@ const Panel = ({
},
[localState],
);
- const handleClick = React.useCallback((e: Event) => {
- if (disabled) {
- return;
- }
- typeof onChange === 'function' && onChange({expanded: !expanded});
- typeof onClick === 'function' && onClick(e);
- }, []);
- const handleKeyDown = React.useCallback((e: KeyboardEvent) => {
- if (disabled) {
- return;
- }
+ const handleClick = React.useCallback(
+ (e: Event) => {
+ if (disabled) {
+ return;
+ }
+ typeof onChange === 'function' && onChange({expanded: !expanded});
+ typeof onClick === 'function' && onClick(e);
+ },
+ [expanded, disabled, onChange, onClick],
+ );
+ const handleKeyDown = React.useCallback(
+ (e: KeyboardEvent) => {
+ if (disabled) {
+ return;
+ }
- const ENTER = 13;
- const SPACE = 32;
+ const ENTER = 13;
+ const SPACE = 32;
- if (e.keyCode === ENTER || e.keyCode === SPACE) {
- typeof onChange === 'function' && onChange({expanded: !expanded});
- if (e.keyCode === SPACE) {
- e.preventDefault(); // prevent jumping scroll when using Space
+ if (e.keyCode === ENTER || e.keyCode === SPACE) {
+ typeof onChange === 'function' && onChange({expanded: !expanded});
+ if (e.keyCode === SPACE) {
+ e.preventDefault(); // prevent jumping scroll when using Space
+ }
}
- }
- typeof onKeyDown === 'function' && onKeyDown(e);
- }, []);
+ typeof onKeyDown === 'function' && onKeyDown(e);
+ },
+ [expanded, disabled, onChange, onKeyDown],
+ );
// eslint-disable-next-line flowtype/no-weak-types
const _animateRef = React.useRef(null);
diff --git a/vrt/__image_snapshots__/accordion--stateless-accordion__dark-snap.png b/vrt/__image_snapshots__/accordion--stateless-accordion__dark-snap.png
new file mode 100644
index 0000000000..38bac25859
Binary files /dev/null and b/vrt/__image_snapshots__/accordion--stateless-accordion__dark-snap.png differ
diff --git a/vrt/__image_snapshots__/accordion--stateless-accordion__desktop-snap.png b/vrt/__image_snapshots__/accordion--stateless-accordion__desktop-snap.png
new file mode 100644
index 0000000000..4a03df4a92
Binary files /dev/null and b/vrt/__image_snapshots__/accordion--stateless-accordion__desktop-snap.png differ
diff --git a/vrt/__image_snapshots__/accordion--stateless-accordion__mobile-snap.png b/vrt/__image_snapshots__/accordion--stateless-accordion__mobile-snap.png
new file mode 100644
index 0000000000..1bd0356052
Binary files /dev/null and b/vrt/__image_snapshots__/accordion--stateless-accordion__mobile-snap.png differ