fix(accordion): fix callbacks to update when inputs change

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 (
+    <StatelessAccordion
+      expanded={expanded}
+      accordion={false}
+      onChange={({key, expanded}) => {
+        console.log(key, '----');
+        console.log(expanded);
+        setExpanded(expanded);
+      }}
+    >
+      <Panel key="P1" title="Panel 1">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </Panel>
+      <Panel key="P2" title="Panel 2">
+        Quisque luctus eu sem et pharetra.
+      </Panel>
+      <Panel key="P3" title="Panel 3">
+        Proin egestas dui sed semper iaculis.
+      </Panel>
+    </StatelessAccordion>
+  );
+}

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 = () => <AccordionControlled />;
 export const Disabled = () => <AccordionDisabled />;
 export const Expanded = () => <AccordionExpanded />;
 export const PanelOverride = () => <AccordionPanelOverride />;
+export const StatelessAccordion = () => <AccordionStateless />;
 export const Accordion = () => <AccordionDefault />;

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<any>(null);