@gobolt/genesis 0.4.4 → 0.4.5

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -1,13 +1,17 @@
 import { default as React } from 'react';
+import { OverflowMenuItemProps } from '../OverflowMenuItem';
 export interface OverflowMenuProps {
-    children: React.ReactNode;
+    items?: OverflowMenuItemProps[];
+    children?: React.ReactNode;
     trigger: React.ReactNode;
     isOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     placement?: "bottom" | "top" | "left" | "right";
+    alignment?: "left" | "right";
     offset?: number;
     className?: string;
     style?: React.CSSProperties;
+    onItemClick?: (item: OverflowMenuItemProps) => void;
 }
 declare const OverflowMenu: React.FC<OverflowMenuProps>;
 export default OverflowMenu;

package/dist/components/OverflowMenuItem/OverflowMenuItem.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface OverflowMenuItemProps {
+    id?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+declare const OverflowMenuItem: ({ children, onClick }: OverflowMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export default OverflowMenuItem;

package/dist/components/OverflowMenuItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './OverflowMenuItem';
+export type { OverflowMenuItemProps } from './OverflowMenuItem';

package/dist/components/OverflowMenuItem/styles.d.ts

@@ -0,0 +1,6 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledOverflowMenuItemProperties {
+    theme?: GenesisTheme;
+}
+export declare const OverflowMenuItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOverflowMenuItemProperties>> & string;
+export {};

package/dist/components/index.d.ts

@@ -41,6 +41,8 @@ export { default as Notification } from './Notification';
 export type { NotificationProps } from './Notification';
 export { default as OverflowMenu } from './OverflowMenu';
 export type { OverflowMenuProps } from './OverflowMenu';
+export { default as OverflowMenuItem } from './OverflowMenuItem';
+export type { OverflowMenuItemProps } from './OverflowMenuItem';
 export { default as Popover } from './Popover';
 export type { PopoverProps } from './Popover';
 export { default as Progress } from './Progress';

package/dist/index.cjs

@@ -80499,15 +80499,34 @@ const OverflowMenuContainer = styled.div`
   contain: layout style paint;
   isolation: isolate;
 `;
+const OverflowMenuItem$1 = styled.div`
+  padding: 8px 12px;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.colors.surface.default?.backgroundColor || "#ffffff"};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.surface.hover?.backgroundColor || "#F4F4F4"};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.surface.active?.backgroundColor || "#E0E0E0"};
+  }
+`;
+const OverflowMenuItem = ({ children: children2, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(OverflowMenuItem$1, { onClick, children: children2 });
+};
 const OverflowMenu = ({
+  items,
   children: children2,
   trigger,
   isOpen: controlledIsOpen,
   onOpenChange,
   placement = "bottom",
+  alignment = "left",
   offset: offset2 = 8,
   className,
-  style: style2
+  style: style2,
+  onItemClick
 }) => {
   const [internalIsOpen, setInternalIsOpen] = React.useState(false);
   const [isAnimating, setIsAnimating] = React.useState(false);
@@ -80515,21 +80534,27 @@ const OverflowMenu = ({
   const menuRef = React.useRef(null);
   const { theme } = useGenesis();
   const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
-  const handleOpenChange = (open) => {
-    if (onOpenChange) {
-      onOpenChange(open);
-    } else {
-      setInternalIsOpen(open);
-    }
-  };
+  const handleOpenChange = React.useCallback(
+    (open) => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      } else {
+        setInternalIsOpen(open);
+      }
+    },
+    [onOpenChange]
+  );
   const handleTriggerClick = () => {
     handleOpenChange(!isOpen);
   };
-  const handleClickOutside = (event) => {
-    if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
-      handleOpenChange(false);
-    }
-  };
+  const handleClickOutside = React.useCallback(
+    (event) => {
+      if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
+        handleOpenChange(false);
+      }
+    },
+    [handleOpenChange]
+  );
   React.useEffect(() => {
     if (isOpen) {
       const timer2 = setTimeout(() => {
@@ -80544,8 +80569,8 @@ const OverflowMenu = ({
       setIsAnimating(false);
       document.removeEventListener("mousedown", handleClickOutside);
     }
-  }, [isOpen]);
-  const getMenuStyle = () => {
+  }, [isOpen, handleClickOutside]);
+  const getMenuStyle = React.useMemo(() => {
     const baseStyle = {
       position: "absolute",
       zIndex: 1e3,
@@ -80556,37 +80581,68 @@ const OverflowMenu = ({
         return {
           ...baseStyle,
           top: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "top": {
         return {
           ...baseStyle,
           bottom: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "left": {
         return {
           ...baseStyle,
           top: 0,
-          right: `calc(100% + ${offset2}px)`
+          right: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       case "right": {
         return {
           ...baseStyle,
           top: 0,
-          left: `calc(100% + ${offset2}px)`
+          left: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       default: {
         return baseStyle;
       }
     }
-  };
+  }, [placement, alignment, offset2, style2]);
+  const handleItemClick = React.useCallback(
+    (item) => {
+      onItemClick?.(item);
+      handleOpenChange(false);
+    },
+    [onItemClick, handleOpenChange]
+  );
+  if (items && items.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        OverflowMenuContainer,
+        {
+          ref: menuRef,
+          theme,
+          className,
+          style: getMenuStyle,
+          $isAnimating: isAnimating,
+          $placement: placement,
+          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            OverflowMenuItem,
+            {
+              ...item,
+              onClick: () => handleItemClick(item)
+            },
+            item.id
+          ))
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -80595,7 +80651,7 @@ const OverflowMenu = ({
         ref: menuRef,
         theme,
         className,
-        style: getMenuStyle(),
+        style: getMenuStyle,
         $isAnimating: isAnimating,
         $placement: placement,
         children: children2
@@ -85075,6 +85131,7 @@ exports.LineChart = LineChart;
 exports.Message = Message;
 exports.Notification = Notification;
 exports.OverflowMenu = OverflowMenu;
+exports.OverflowMenuItem = OverflowMenuItem;
 exports.Popover = Popover;
 exports.Progress = Progress;
 exports.RadioGroup = RadioGroup;

package/dist/index.js

@@ -80481,15 +80481,34 @@ const OverflowMenuContainer = styled.div`
   contain: layout style paint;
   isolation: isolate;
 `;
+const OverflowMenuItem$1 = styled.div`
+  padding: 8px 12px;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.colors.surface.default?.backgroundColor || "#ffffff"};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.surface.hover?.backgroundColor || "#F4F4F4"};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.surface.active?.backgroundColor || "#E0E0E0"};
+  }
+`;
+const OverflowMenuItem = ({ children: children2, onClick }) => {
+  return /* @__PURE__ */ jsx(OverflowMenuItem$1, { onClick, children: children2 });
+};
 const OverflowMenu = ({
+  items,
   children: children2,
   trigger,
   isOpen: controlledIsOpen,
   onOpenChange,
   placement = "bottom",
+  alignment = "left",
   offset: offset2 = 8,
   className,
-  style: style2
+  style: style2,
+  onItemClick
 }) => {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -80497,21 +80516,27 @@ const OverflowMenu = ({
   const menuRef = useRef(null);
   const { theme } = useGenesis();
   const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
-  const handleOpenChange = (open) => {
-    if (onOpenChange) {
-      onOpenChange(open);
-    } else {
-      setInternalIsOpen(open);
-    }
-  };
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      } else {
+        setInternalIsOpen(open);
+      }
+    },
+    [onOpenChange]
+  );
   const handleTriggerClick = () => {
     handleOpenChange(!isOpen);
   };
-  const handleClickOutside = (event) => {
-    if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
-      handleOpenChange(false);
-    }
-  };
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
+        handleOpenChange(false);
+      }
+    },
+    [handleOpenChange]
+  );
   useEffect(() => {
     if (isOpen) {
       const timer2 = setTimeout(() => {
@@ -80526,8 +80551,8 @@ const OverflowMenu = ({
       setIsAnimating(false);
       document.removeEventListener("mousedown", handleClickOutside);
     }
-  }, [isOpen]);
-  const getMenuStyle = () => {
+  }, [isOpen, handleClickOutside]);
+  const getMenuStyle = useMemo$1(() => {
     const baseStyle = {
       position: "absolute",
       zIndex: 1e3,
@@ -80538,37 +80563,68 @@ const OverflowMenu = ({
         return {
           ...baseStyle,
           top: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "top": {
         return {
           ...baseStyle,
           bottom: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "left": {
         return {
           ...baseStyle,
           top: 0,
-          right: `calc(100% + ${offset2}px)`
+          right: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       case "right": {
         return {
           ...baseStyle,
           top: 0,
-          left: `calc(100% + ${offset2}px)`
+          left: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       default: {
         return baseStyle;
       }
     }
-  };
+  }, [placement, alignment, offset2, style2]);
+  const handleItemClick = useCallback(
+    (item) => {
+      onItemClick?.(item);
+      handleOpenChange(false);
+    },
+    [onItemClick, handleOpenChange]
+  );
+  if (items && items.length > 0) {
+    return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { children: [
+      /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+      isOpen && /* @__PURE__ */ jsx(
+        OverflowMenuContainer,
+        {
+          ref: menuRef,
+          theme,
+          className,
+          style: getMenuStyle,
+          $isAnimating: isAnimating,
+          $placement: placement,
+          children: items.map((item) => /* @__PURE__ */ jsx(
+            OverflowMenuItem,
+            {
+              ...item,
+              onClick: () => handleItemClick(item)
+            },
+            item.id
+          ))
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { children: [
     /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
     isOpen && /* @__PURE__ */ jsx(
@@ -80577,7 +80633,7 @@ const OverflowMenu = ({
         ref: menuRef,
         theme,
         className,
-        style: getMenuStyle(),
+        style: getMenuStyle,
         $isAnimating: isAnimating,
         $placement: placement,
         children: children2
@@ -85058,6 +85114,7 @@ export {
   Message,
   Notification,
   OverflowMenu,
+  OverflowMenuItem,
   Popover,
   Progress,
   RadioGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",