jattac.libs.web.overflow-menu 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Nyingi Maina
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,178 @@
+# React Overflow Menu
+
+[![npm version](https://badge.fury.io/js/jattac.libs.web.overflow-menu.svg)](https://badge.fury.io/js/jattac.libs.web.overflow-menu)
+
+A customizable, animated, and lightweight React overflow menu component built with TypeScript and Framer Motion.
+
+This component provides a clean, modern, and accessible overflow menu suitable for any React application, with a focus on great user experience through satisfying micro-interactions.
+
+## Features
+
+- **Smooth Animations**: Built with Framer Motion for fluid, physics-based animations.
+- **Staggered Item Display**: Menu items animate in with a subtle "waterfall" effect.
+- **Highly Customizable**: Easily change the trigger icon, menu item content, and functionality.
+- **Themable**: Uses CSS variables to allow for deep customization that can match any corporate branding.
+- **Portal Support**: Optionally render the menu in a React Portal to avoid CSS stacking context issues.
+- **Lightweight**: Simple and focused on providing a great overflow menu experience without unnecessary bloat.
+
+## Installation
+
+Install the package and its peer dependencies using npm:
+
+```bash
+npm install jattac.libs.web.overflow-menu react react-dom framer-motion
+```
+
+## Getting Started
+
+Here's a basic example to get you up and running quickly.
+
+```jsx
+import React from 'react';
+import OverflowMenu, { IOverflowMenuItem } from 'jattac.libs.web.overflow-menu';
+
+const App = () => {
+  const menuItems: IOverflowMenuItem[] = [
+    {
+      content: 'Edit Profile',
+      onClick: () => alert('Editing Profile!'),
+    },
+    {
+      content: 'View Settings',
+      onClick: () => alert('Viewing Settings!'),
+    },
+    {
+      content: 'Log Out',
+      onClick: () => alert('Logging Out!'),
+    },
+  ];
+
+  return (
+    <div style={{ position: 'relative', display: 'flex', justifyContent: 'flex-end', padding: '2rem' }}>
+      <OverflowMenu items={menuItems} />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## API and Props
+
+The `OverflowMenu` component accepts the following props:
+
+| Prop        | Type                  | Required | Default | Description                                                                                                |
+|-------------|-----------------------|----------|---------|------------------------------------------------------------------------------------------------------------|
+| `items`     | `IOverflowMenuItem[]` | Yes      | -       | An array of objects that define the menu items.                                                            |
+| `icon`      | `ReactNode`           | No       | `'⋮'`     | A custom trigger icon to open the menu.                                                                    |
+| `className` | `string`              | No       | `''`      | A CSS class to apply to the trigger button for custom styling.                                             |
+| `portal`    | `HTMLElement`         | No       | `null`  | A DOM element to render the menu into. Use this to prevent z-index issues with parent containers.        |
+
+### The `IOverflowMenuItem` Interface
+
+Each item in the `items` array must conform to this interface:
+
+```typescript
+interface IOverflowMenuItem {
+  content: React.ReactNode; // The content to display for the item.
+  onClick?: () => void;     // Function to call when the item is clicked.
+}
+```
+
+---
+
+## Advanced Usage
+
+### Custom Trigger Icon
+
+You can provide any `ReactNode` as the trigger icon. This is great for using a custom SVG or an icon from a library like `react-icons`.
+
+```jsx
+import { BsThreeDotsVertical } from 'react-icons/bs';
+
+// ...
+<OverflowMenu items={menuItems} icon={<BsThreeDotsVertical size={24} />} />
+```
+
+### Complex Item Content
+
+The `content` property of a menu item can be any valid `ReactNode`. This allows you to create rich menu items with icons, styled text, and more.
+
+```jsx
+import { FiEdit, FiLogOut } from 'react-icons/fi';
+
+const richMenuItems: IOverflowMenuItem[] = [
+  {
+    content: (
+      <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <FiEdit /> Edit Profile
+      </span>
+    ),
+    onClick: () => alert('Editing Profile!'),
+  },
+  {
+    content: (
+      <span style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'red' }}>
+        <FiLogOut /> Log Out
+      </span>
+    ),
+    onClick: () => alert('Logging Out!'),
+  },
+];
+
+// ...
+<OverflowMenu items={richMenuItems} />
+```
+
+---
+
+## Theming and Customization
+
+The component can be easily themed by overriding the default CSS variables. The variables are scoped to the `.menuWrapper` class, which is the root of the component.
+
+Here are the available variables and their default values:
+
+```css
+.your-custom-wrapper-class {
+  --ofm-text-color: #024b59;
+  --ofm-text-hover-color: #016a80;
+  --ofm-bg: rgba(255, 255, 255, 0.75);
+  --ofm-bg-blur: 12px;
+  --ofm-border-radius: 12px;
+  --ofm-item-border-radius: 8px;
+  --ofm-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --ofm-border: 1px solid rgba(2, 75, 89, 0.15);
+  --ofm-item-hover-bg: rgba(2, 75, 89, 0.05);
+  --ofm-item-active-bg: rgba(2, 75, 89, 0.1);
+}
+```
+
+**Example: Creating a Dark Theme**
+
+To apply a dark theme, create a CSS class that overrides these variables and apply it to a parent element.
+
+*Your CSS file:*
+```css
+.dark-theme {
+  --ofm-text-color: #e0e0e0;
+  --ofm-text-hover-color: #ffffff;
+  --ofm-bg: rgba(40, 40, 40, 0.8);
+  --ofm-border: 1px solid rgba(255, 255, 255, 0.1);
+  --ofm-item-hover-bg: rgba(255, 255, 255, 0.1);
+  --ofm-item-active-bg: rgba(255, 255, 255, 0.15);
+}
+```
+
+*Your JSX file:*
+```jsx
+import './your-styles.css';
+
+// ...
+<div className="dark-theme">
+  <OverflowMenu items={menuItems} />
+</div>
+```
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

package/dist/Data/IOverflowMenuItem.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export default interface IOverflowMenuItem {
+    content: ReactNode;
+    onClick?: () => void;
+}

package/dist/UI/OverflowMenu.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+import IOverflowMenuItem from "../Data/IOverflowMenuItem";
+interface IProps {
+    icon?: ReactNode;
+    portal?: HTMLElement;
+    className?: string;
+    items: IOverflowMenuItem[];
+}
+declare const OverflowMenu: React.FC<IProps>;
+export default OverflowMenu;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import OverflowMenu from './UI/OverflowMenu';
+import IOverflowMenuItem from './Data/IOverflowMenuItem';
+export { IOverflowMenuItem };
+export default OverflowMenu;

package/dist/index.js

@@ -0,0 +1,161 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var framerMotion = require('framer-motion');
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".OverflowMenu-module_menuWrapper__psD7a {\n  --ofm-text-color: #024b59;\n  --ofm-text-hover-color: #016a80;\n  --ofm-bg: rgba(255, 255, 255, 0.75);\n  --ofm-bg-blur: 12px;\n  --ofm-border-radius: 12px;\n  --ofm-item-border-radius: 8px;\n  --ofm-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n  --ofm-border: 1px solid rgba(2, 75, 89, 0.15);\n  --ofm-item-hover-bg: rgba(2, 75, 89, 0.05);\n  --ofm-item-active-bg: rgba(2, 75, 89, 0.1);\n\n  position: relative;\n  display: inline-block;\n  z-index: 0;\n}\n\n.OverflowMenu-module_trigger__imdPK {\n  background: transparent;\n  border: none;\n  font-size: 1.6rem;\n  cursor: pointer;\n  color: var(--ofm-text-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s ease;\n}\n\n.OverflowMenu-module_trigger__imdPK:hover,\n.OverflowMenu-module_trigger__imdPK:focus {\n  color: var(--ofm-text-hover-color);\n  outline: none;\n}\n\n/* Light frosted glass menu */\n.OverflowMenu-module_menu__n8uKD {\n  background: var(--ofm-bg);\n  backdrop-filter: blur(var(--ofm-bg-blur));\n  -webkit-backdrop-filter: blur(var(--ofm-bg-blur));\n  border-radius: var(--ofm-border-radius);\n  box-shadow: var(--ofm-shadow);\n  padding: 0.5rem 0.25rem;\n  min-width: 180px;\n  display: flex;\n  flex-direction: column;\n  gap: 0.35rem;\n  border: var(--ofm-border);\n  position: absolute;\n  right: 0;\n  top: 100%;\n  margin-top: 0.5rem;\n  z-index: 9999;\n  color: var(--ofm-text-color);\n  font-weight: 500;\n  font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Menu buttons */\n.OverflowMenu-module_menu__n8uKD button {\n  background: transparent;\n  border: none;\n  padding: 0.6rem 1rem;\n  border-radius: var(--ofm-item-border-radius);\n  text-align: left;\n  color: var(--ofm-text-color);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: background 0.25s ease, transform 0.12s ease;\n  user-select: none;\n}\n\n/* Hover highlight with subtle teal shade */\n.OverflowMenu-module_menu__n8uKD button:hover,\n.OverflowMenu-module_menu__n8uKD button:focus {\n  background: var(--ofm-item-hover-bg);\n  outline: none;\n  transform: scale(1.03);\n}\n\n/* Optional: subtle active click effect */\n.OverflowMenu-module_menu__n8uKD button:active {\n  transform: scale(0.98);\n  background: var(--ofm-item-active-bg);\n}";
+var styles = {"trigger":"OverflowMenu-module_trigger__imdPK","menu":"OverflowMenu-module_menu__n8uKD"};
+styleInject(css_248z);
+
+const menuVariants = {
+    open: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 40,
+            staggerChildren: 0.07,
+        },
+    },
+    closed: {
+        opacity: 0,
+        y: -10,
+        transition: {
+            duration: 0.2,
+        },
+    },
+};
+const itemVariants = {
+    open: {
+        opacity: 1,
+        y: 0,
+        transition: { type: "spring", stiffness: 300, damping: 24 },
+    },
+    closed: {
+        opacity: 0,
+        y: 10,
+        transition: { duration: 0.2 },
+    },
+};
+const OverflowMenu = ({ icon = "⋮", portal, className, items, }) => {
+    const [open, setOpen] = React.useState(false);
+    const triggerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const [menuPos, setMenuPos] = React.useState({
+        top: 0,
+        left: 0,
+    });
+    // Handle closing menu on outside click
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (open &&
+                triggerRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                menuRef.current &&
+                !menuRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [open]);
+    // Handle Escape key to close
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const handleEsc = (event) => {
+            if (event.key === 'Escape') {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEsc);
+        return () => document.removeEventListener('keydown', handleEsc);
+    }, [open]);
+    // Handle positioning and focus management
+    React.useLayoutEffect(() => {
+        var _a, _b;
+        if (open) {
+            if (!triggerRef.current || !menuRef.current)
+                return;
+            // Position menu
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            const menuHeight = menuRef.current.offsetHeight;
+            const viewportHeight = window.innerHeight;
+            let newTop = triggerRect.bottom + window.scrollY + 4; // Default to opening downwards
+            // Flip upwards if not enough space below
+            if (triggerRect.bottom + menuHeight > viewportHeight) {
+                newTop = triggerRect.top + window.scrollY - menuHeight - 4;
+            }
+            setMenuPos({
+                top: newTop,
+                left: triggerRect.right + window.scrollX - 160, // Keep existing left logic
+            });
+            // Focus first item
+            const firstItem = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="menuitem"]');
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }
+        else {
+            // Return focus to trigger on close
+            (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [open]);
+    const handleMenuKeyDown = (e) => {
+        var _a, _b;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const items = Array.from((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="menuitem"]'));
+            const activeIndex = items.findIndex((item) => item === document.activeElement);
+            let nextIndex = -1;
+            if (e.key === 'ArrowDown') {
+                nextIndex = (activeIndex + 1) % items.length;
+            }
+            else if (e.key === 'ArrowUp') {
+                nextIndex = (activeIndex - 1 + items.length) % items.length;
+            }
+            (_b = items[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    const menuContent = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(framerMotion.motion.div, { ref: menuRef, role: "menu", className: styles.menu, style: { position: "absolute", top: menuPos.top, left: menuPos.left }, variants: menuVariants, initial: "closed", animate: "open", exit: "closed", onKeyDown: handleMenuKeyDown }, items.map((item, index) => (React.createElement(framerMotion.motion.button, { key: index, role: "menuitem", onClick: () => {
+            if (item.onClick)
+                item.onClick();
+            setOpen(false);
+        }, variants: itemVariants }, item.content)))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { ref: triggerRef, className: `${styles.trigger} ${className}`, onClick: () => setOpen(!open), "aria-haspopup": "true", "aria-expanded": open },
+            React.createElement(framerMotion.motion.div, { animate: { rotate: open ? 90 : 0 }, transition: { type: "spring", stiffness: 400, damping: 40 } }, icon)),
+        portal ? ReactDOM.createPortal(menuContent, portal) : menuContent));
+};
+
+exports.default = OverflowMenu;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/UI/OverflowMenu.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null],"names":["useState","useRef","useEffect","useLayoutEffect","AnimatePresence","motion"],"mappings":"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","x_google_ignoreList":[0]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "jattac.libs.web.overflow-menu",
+  "version": "0.0.1",
+  "description": "A customizable and lightweight React overflow menu component with a modern design.",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c -w",
+    "lint": "eslint \"./{src,app}/**/*.{ts,tsx}\"",
+    "size": "size-limit",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "menu",
+    "overflow-menu",
+    "component"
+  ],
+  "author": "Nyingi Maina",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "framer-motion": ">=11.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@size-limit/preset-small-lib": "^10.0.1",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "framer-motion": "^12.23.16",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.2.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^10.0.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  }
+}