@lumx/react 3.1.2 → 3.1.3-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.1.2",
-        "@lumx/icons": "^3.1.2",
+        "@lumx/core": "^3.1.3-alpha.0",
+        "@lumx/icons": "^3.1.3-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.1.2"
+    "version": "3.1.3-alpha.0"
 }

package/src/components/expansion-panel/ExpansionPanel.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { Button, Dropdown, ExpansionPanel, List, ListItem, Placement, Size } from '@lumx/react';
+
+export default { title: 'LumX components/expansion-panel/ExpansionPanel' };
+
+export const ExpansionPanelInADropdown = () => {
+    const anchorDropdownButton = React.useRef(null);
+
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+    const closeDropdown = () => setIsDropdownOpen(false);
+
+    const [isExpansionPanelOpen, setIsExpansionPanelOpen] = React.useState(false);
+
+    const toggleExpansionPanel = (shouldOpen: boolean, evt: React.MouseEvent) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        setIsExpansionPanelOpen(shouldOpen);
+    };
+
+    const onItemSelected = (item: string) => () => {
+        console.log('selected item', item);
+        closeDropdown();
+    };
+
+    return (
+        <>
+            <Button ref={anchorDropdownButton} onClick={toggleDropdown}>
+                Open dropdown
+            </Button>
+            <Dropdown
+                closeOnClickAway
+                closeOnEscape
+                isOpen={isDropdownOpen}
+                onClose={closeDropdown}
+                placement={Placement.BOTTOM_START}
+                anchorRef={anchorDropdownButton}
+            >
+                <List>
+                    <ListItem onItemSelected={onItemSelected('paris')} size={Size.tiny}>
+                        Paris
+                    </ListItem>
+                    <ExpansionPanel
+                        label="Lorem ipsum"
+                        isOpen={isExpansionPanelOpen}
+                        onToggleOpen={(shouldOpen, event) => toggleExpansionPanel(shouldOpen, event)}
+                        toggleButtonProps={{ label: 'Toggle' }}
+                    >
+                        <header>
+                            <ListItem size={Size.tiny}>United States</ListItem>
+                        </header>
+                        <ListItem onItemSelected={onItemSelected('georgetown')} size={Size.tiny}>
+                            Georgetown
+                        </ListItem>
+
+                        <ListItem onItemSelected={onItemSelected('newyork')} size={Size.tiny}>
+                            New York
+                        </ListItem>
+                    </ExpansionPanel>
+                </List>
+            </Dropdown>
+        </>
+    );
+};

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -94,7 +94,7 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
             await userEvent.click(query.toggleButton() as any);
             expect(onOpen).toHaveBeenCalled();
             expect(onClose).not.toHaveBeenCalled();
-            expect(onToggleOpen).toHaveBeenCalledWith(true);
+            expect(onToggleOpen).toHaveBeenCalledWith(true, expect.anything());
         });
 
         it('should close on click', async () => {
@@ -107,7 +107,7 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
             await userEvent.click(query.header() as any);
             expect(onOpen).not.toHaveBeenCalled();
             expect(onClose).toHaveBeenCalled();
-            expect(onToggleOpen).toHaveBeenCalledWith(false);
+            expect(onToggleOpen).toHaveBeenCalledWith(false, expect.anything());
         });
     });
 

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -9,7 +9,7 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Callback, Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 
@@ -26,14 +26,14 @@ export interface ExpansionPanelProps extends GenericProps, HasTheme {
     /** Label text (overwritten if a `<header>` is provided in the children). */
     label?: string;
     /** On open callback. */
-    onOpen?: Callback;
+    onOpen?: (event: React.MouseEvent) => void;
     /** On close callback. */
-    onClose?: Callback;
+    onClose?: (event: React.MouseEvent) => void;
     /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
     toggleButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** On toggle open or close callback. */
-    onToggleOpen?(shouldOpen: boolean): void;
+    onToggleOpen?(shouldOpen: boolean, event: React.MouseEvent): void;
 }
 
 /**
@@ -93,16 +93,16 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
         <span className={`${CLASSNAME}__label`}>{label}</span>
     );
 
-    const toggleOpen = () => {
+    const toggleOpen = (event: React.MouseEvent) => {
         const shouldOpen = !isOpen;
         if (isFunction(onOpen) && shouldOpen) {
-            onOpen();
+            onOpen(event);
         }
         if (isFunction(onClose) && !shouldOpen) {
-            onClose();
+            onClose(event);
         }
         if (isFunction(onToggleOpen)) {
-            onToggleOpen(shouldOpen);
+            onToggleOpen(shouldOpen, event);
         }
     };