@dtdot/lego 0.18.0 → 0.18.3

package/build/components/ActionMenu/ActionMenu.component.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { ColourVariant } from '../../theme/theme.types';
+import { IActionMenuItem } from './_ActionMenu.types';
 export interface ActionMenuProps {
+    items: IActionMenuItem[];
     variant?: ColourVariant;
 }
-declare const ActionMenu: ({ variant }: ActionMenuProps) => JSX.Element;
+declare const ActionMenu: ({ items, variant }: ActionMenuProps) => JSX.Element;
 export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.component.js

@@ -1,13 +1,52 @@
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
 import styled from 'styled-components';
+import { usePopper } from 'react-popper';
 import Button from '../Button/Button.component';
+import ActionMenuPanel from './_ActionMenuPanel.component';
 const StyledIcon = styled(FontAwesomeIcon) `
   font-size: 18px;
 `;
-const ActionMenu = ({ variant }) => {
-    return (React.createElement(Button, { variant: variant },
-        React.createElement(StyledIcon, { icon: faEllipsisV })));
+const offsetFn = () => [70, 4];
+const ActionMenu = ({ items, variant }) => {
+    const [shown, setShown] = useState(false);
+    const [referenceElement, setReferenceElement] = useState();
+    const [popperElement, setPopperElement] = useState();
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: offsetFn,
+                },
+            },
+        ],
+    });
+    const handleGlobalClick = useCallback((event) => {
+        if (!popperElement?.contains(event.target)) {
+            setShown(false);
+        }
+    }, [setShown, popperElement]);
+    useEffect(() => {
+        document.addEventListener('mouseup', handleGlobalClick);
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalClick);
+        };
+    }, [handleGlobalClick, popperElement]);
+    const augmentedItems = items.map((item) => ({
+        ...item,
+        onClick: () => {
+            setShown(false);
+            item.onClick();
+        },
+    }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { variant: variant, ref: setReferenceElement, onClick: () => setShown(true) },
+            React.createElement(StyledIcon, { icon: faEllipsisV })),
+        shown &&
+            ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper },
+                React.createElement(ActionMenuPanel, { items: augmentedItems })), document.querySelector('body'))));
 };
 export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.stories.js

@@ -1,15 +1,47 @@
 import React from 'react';
 import { ActionMenu } from '../..';
 /* eslint-disable @typescript-eslint/no-empty-function */
-export const Standard = () => React.createElement(ActionMenu, null);
+const items = [
+    {
+        label: 'Angry Lama',
+        onClick: () => {
+            console.log('Item 1 clicked');
+        },
+    },
+    {
+        label: 'Frightened Frog',
+        onClick: () => {
+            console.log('Item 2 clicked');
+        },
+    },
+    {
+        label: 'Hungry Bear',
+        onClick: () => {
+            console.log('Item 3 clicked');
+        },
+    },
+    {
+        label: 'Crazy Koala',
+        onClick: () => {
+            console.log('Item 4 clicked');
+        },
+    },
+    {
+        label: 'Dizzy Snake',
+        onClick: () => {
+            console.log('Item 5 clicked');
+        },
+    },
+];
+export const Standard = () => React.createElement(ActionMenu, { items: items, variant: 'tertiary' });
 export const Variants = () => (React.createElement(React.Fragment, null,
-    React.createElement(ActionMenu, { variant: 'primary' }),
+    React.createElement(ActionMenu, { items: items, variant: 'primary' }),
     React.createElement("br", null),
     React.createElement("br", null),
-    React.createElement(ActionMenu, { variant: 'secondary' }),
+    React.createElement(ActionMenu, { items: items, variant: 'secondary' }),
     React.createElement("br", null),
     React.createElement("br", null),
-    React.createElement(ActionMenu, { variant: 'tertiary' })));
+    React.createElement(ActionMenu, { items: items, variant: 'tertiary' })));
 export default {
     title: 'Components/ActionMenu',
     component: ActionMenu,

package/build/components/ActionMenu/_ActionMenu.types.d.ts

@@ -0,0 +1,4 @@
+export interface IActionMenuItem {
+    label: string;
+    onClick: () => void;
+}

package/build/components/ActionMenu/_ActionMenu.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/ActionMenu/_ActionMenuItem.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ActionMenuItemProps {
+    label: string;
+    onClick: () => void;
+}
+declare const ActionMenuItem: ({ label, onClick }: ActionMenuItemProps) => JSX.Element;
+export default ActionMenuItem;

package/build/components/ActionMenu/_ActionMenuItem.component.js

@@ -0,0 +1,18 @@
+import { motion } from 'framer-motion';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+const ActionMenuItemOuter = styled(motion.div) `
+  padding: 12px 16px;
+  cursor: pointer;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+`;
+const ActionMenuItem = ({ label, onClick }) => {
+    const theme = useTheme();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionMenuItemOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: onClick }, label)));
+};
+export default ActionMenuItem;

package/build/components/ActionMenu/_ActionMenuPanel.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IActionMenuItem } from './_ActionMenu.types';
+export interface ActionMenuPanelProps {
+    items: IActionMenuItem[];
+}
+declare const ActionMenuPanel: ({ items }: ActionMenuPanelProps) => JSX.Element;
+export default ActionMenuPanel;

package/build/components/ActionMenu/_ActionMenuPanel.component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import ActionMenuItem from './_ActionMenuItem.component';
+const ActionMenuPanelOuter = styled.div `
+  background-color: ${(props) => props.theme.colours.tertiary.main};
+  min-width: 160px;
+`;
+const ActionMenuPanel = ({ items }) => (React.createElement(ActionMenuPanelOuter, null, items.map((item) => (React.createElement(ActionMenuItem, { key: item.label, label: item.label, onClick: item.onClick })))));
+export default ActionMenuPanel;

package/build/components/Button/Button.component.d.ts

@@ -7,5 +7,5 @@ export interface ButtonProps {
     type?: 'submit';
     onClick?: () => void;
 }
-declare const Button: ({ children, loading, variant, type, onClick }: ButtonProps) => JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<unknown>>;
 export default Button;

package/build/components/Button/Button.component.js

@@ -53,8 +53,9 @@ const ButtonSpinner = styled.div `
     animation-iteration-count: infinite;
   }
 `;
-const Button = ({ children, loading, variant = 'primary', type, onClick }) => {
+const Button = React.forwardRef(function Button(props, ref) {
+    const { children, loading, variant = 'primary', type, onClick } = props;
     const { width, height, alignSelf, marginTop } = useContext(ButtonContext);
-    return (React.createElement(StyledButton, { width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick }, loading ? React.createElement(ButtonSpinner, { variant: variant }) : children));
-};
+    return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick }, loading ? React.createElement(ButtonSpinner, { variant: variant }) : children));
+});
 export default Button;

package/build/components/Checklist/Checklist.component.js

@@ -36,10 +36,10 @@ const Checklist = ({ items, value, onChange }) => {
         .sort((a, b) => checkedOrder.indexOf(a.id) - checkedOrder.indexOf(b.id));
     const unCheckedItems = items.filter((item) => !value.includes(item.id));
     return (React.createElement(LayoutGroup, null,
-        unCheckedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id, transition: { duration: 0.2 } },
+        unCheckedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id },
             React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked) })))),
         checkedItems.length ? React.createElement(ListDivider, null) : null,
-        checkedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id, transition: { duration: 0.2 } },
+        checkedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id },
             React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked) }))))));
 };
 export default Checklist;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.18.0",
+  "version": "0.18.3",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -45,7 +45,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook-addon-styled-component-theme": "^1.3.0",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
@@ -57,9 +57,11 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.13",
+    "@popperjs/core": "^2.11.4",
     "framer-motion": "^6.2.8",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.5.0",
+    "react-popper": "^2.2.5",
     "react-use-measure": "^2.1.1",
     "spark-md5": "^3.0.2",
     "uuid": "^8.3.2"