Prototype

docs/src/Module.doc.js

@@ -67,20 +67,69 @@ card(
   <Example
     name="Example"
     defaultCode={`
-function ModuleExample1() {
+function ModuleExample5() {
+  const [extExpandedId, setExtExpandedId] = React.useState(null);
+
   return (
     <Box maxWidth={800} padding={2} column={12}>
+      <Box display="flex" paddingY={2}>
+        <Box paddingX={2}>
+          <Button
+            accessibilityExpanded
+            accessibilityControls={extExpandedId}
+            size="sm"
+            text={extExpandedId === 0 ? 'collapse 1' : 'expand 1'}
+            onClick={() =>
+              setExtExpandedId(extExpandedId === 0 ? '-1' : 0)
+            }
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            accessibilityExpanded
+            accessibilityControls={extExpandedId}
+            size="sm"
+            text={extExpandedId === 1 ? 'collapse 2' : 'expand 2'}
+            onClick={() =>
+              setExtExpandedId(extExpandedId === 1 ? '-1' : 1)
+            }
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            accessibilityExpanded
+            accessibilityControls={extExpandedId}
+            size="sm"
+            text={extExpandedId === 2 ? 'collapse 3' : 'expand 3'}
+            onClick={() =>
+              setExtExpandedId(extExpandedId === 2 ? '-1' : 2)
+            }
+          />
+        </Box>
+      </Box>
       <Module.Expandable
-        id="ModuleExample1"
+        id="ModuleExample5"
         accessibilityExpandLabel="Expand the module"
         accessibilityCollapseLabel="Collapse the module"
+        expandedIdx={extExpandedId}
         items={[
           {
-            title: 'Title',
-            summary: ['summary1', 'summary2', 'summary3'],
+            title: 'Title1',
+            summary: ['summary1'],
             children: <Text size="md">Children1</Text>,
-          }]}>
-      </Module.Expandable>
+          },
+          {
+            title: 'Title2',
+            summary: ['summary2'],
+            children: <Text size="md">Children2</Text>,
+          },
+          {
+            title: 'Title3',
+            summary: ['summary3'],
+            children: <Text size="md">Children3</Text>,
+          },
+        ]}
+      />
     </Box>
   );
 }

packages/gestalt/src/ModuleExpandable.js

@@ -1,5 +1,5 @@
 // @flow strict
-import React, { useState, type Node } from 'react';
+import React, { useState, useEffect, type Node } from 'react';
 import Box from './Box.js';
 import Divider from './Divider.js';
 import ModuleExpandableBase from './ModuleExpandableBase.js';
@@ -9,8 +9,7 @@ type Props = {|
   id: string,
   accessibilityExpandLabel: string,
   accessibilityCollapseLabel: string,
-  expandedId?: ?string,
-  setExpandedId?: (?string) => void,
+  expandedIdx?: ?number,
   items: $ReadOnlyArray<{|
     title: string,
     icon?: $Keys<typeof icons>,
@@ -25,13 +24,18 @@ export default function ModuleExpandable({
   id,
   accessibilityExpandLabel,
   accessibilityCollapseLabel,
-  expandedId,
-  setExpandedId,
+  expandedIdx,
   items,
 }: Props): Node {
-  const [localExpandedId, setLocalExpandedId] = useState(null);
-  const expId = expandedId || localExpandedId;
-  const setExpId = setExpandedId || setLocalExpandedId;
+  const [localExpandedId, setLocalExpandedId] = useState(
+    expandedIdx ? `${id}-${expandedIdx}` : null
+  );
+
+  useEffect(() => {
+    setLocalExpandedId(
+      expandedIdx || expandedIdx === 0 ? `${id}-${expandedIdx}` : null
+    );
+  }, [id, expandedIdx, setLocalExpandedId]);
 
   return (
     <Box rounding={2} borderStyle="shadow">
@@ -48,12 +52,12 @@ export default function ModuleExpandable({
                 icon={icon}
                 iconAccessibilityLabel={iconAccessibilityLabel}
                 summary={summary}
-                isCollapsed={expId !== `${id}-${index}`}
+                isCollapsed={localExpandedId !== `${id}-${index}`}
                 type={type}
                 accessibilityExpandLabel={accessibilityExpandLabel}
                 accessibilityCollapseLabel={accessibilityCollapseLabel}
                 onModuleClicked={(isExpanded) => {
-                  setExpId(isExpanded ? null : `${id}-${index}`);
+                  setLocalExpandedId(isExpanded ? null : `${id}-${index}`);
                 }}
               >
                 {children}

packages/gestalt/src/contexts/OnNavigationContext.js

@@ -0,0 +1,55 @@
+// @flow strict
+import React, {
+  useContext,
+  createContext,
+  type Context,
+  type Element,
+  type Node,
+} from 'react';
+import PropTypes from 'prop-types';
+
+type EventHandlerType = ({|
+  +event: SyntheticEvent<>,
+|}) => void;
+export type onNavigationContextDataType = {|
+  [string]: Node | EventHandlerType,
+|};
+export type onNavigationType = ({|
+  href: string,
+  onNavigationContextData?: onNavigationContextDataType,
+  event: SyntheticMouseEvent<> | SyntheticKeyboardEvent<>,
+|}) => void;
+type OnNavigationContextType = {| onNavigation: onNavigationType |};
+
+type Props = {|
+  children: Node,
+  onNavigation?: onNavigationType,
+  onNavigationContextData?: onNavigationContextDataType,
+|};
+
+const OnNavigationContext: Context<OnNavigationContextType | void> = createContext<OnNavigationContextType | void>();
+const OnNavigationContextProvider = OnNavigationContext.Provider;
+
+function OnNavigationProvider({
+  onNavigation,
+  children,
+}: Props): Element<typeof OnNavigationContextProvider> {
+  return (
+    <OnNavigationContextProvider
+      value={onNavigation ? { onNavigation } : undefined}
+    >
+      {children}
+    </OnNavigationContextProvider>
+  );
+}
+
+function useOnNavigation(): OnNavigationContextType | void {
+  return useContext(OnNavigationContext);
+}
+
+export { OnNavigationProvider, useOnNavigation };
+
+OnNavigationProvider.propTypes = {
+  children: PropTypes.node,
+  onNavigation: PropTypes.func,
+};