design-zystem 1.0.242 → 1.0.244

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, CSSProperties, MouseEventHandler, MouseEvent, ChangeEvent, FocusEvent, KeyboardEvent, ImgHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties, MouseEventHandler, MouseEvent, ChangeEvent, FocusEvent, KeyboardEvent, ImgHTMLAttributes, RefObject } from 'react';
 
 interface PageContainerProps extends HTMLAttributes<HTMLDivElement> {
     justifyContent?: string;
@@ -806,8 +806,10 @@ interface PopoverItem {
 interface PopoverProps {
     items?: PopoverItem[];
     children?: ReactNode;
+    anchorRef?: RefObject<HTMLElement>;
+    offsetY?: number;
 }
-declare const Popover: ({ items, children }: PopoverProps) => react_jsx_runtime.JSX.Element;
+declare const Popover: ({ items, children, anchorRef, offsetY, }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
 interface MetricCardProps {
     icon: string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, CSSProperties, MouseEventHandler, MouseEvent, ChangeEvent, FocusEvent, KeyboardEvent, ImgHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties, MouseEventHandler, MouseEvent, ChangeEvent, FocusEvent, KeyboardEvent, ImgHTMLAttributes, RefObject } from 'react';
 
 interface PageContainerProps extends HTMLAttributes<HTMLDivElement> {
     justifyContent?: string;
@@ -806,8 +806,10 @@ interface PopoverItem {
 interface PopoverProps {
     items?: PopoverItem[];
     children?: ReactNode;
+    anchorRef?: RefObject<HTMLElement>;
+    offsetY?: number;
 }
-declare const Popover: ({ items, children }: PopoverProps) => react_jsx_runtime.JSX.Element;
+declare const Popover: ({ items, children, anchorRef, offsetY, }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
 interface MetricCardProps {
     icon: string;

package/dist/index.js

@@ -852,6 +852,7 @@ var StyledButton = import_styled_components9.default.button.withConfig({
   font-family: 'Open Sans', sans-serif;
 
   width: ${(props) => props.width || "fit-content"};
+  min-width: fit-content;
 
   ${(p) => {
   const base = getColor(p.variant, colors.blue_700);
@@ -4510,31 +4511,49 @@ var PopoverItem = import_styled_components41.default.div`
     background: #f5f5f5;
   }
 `;
-var Popover = ({ items = [], children }) => {
+var Popover = ({
+  items = [],
+  children,
+  anchorRef,
+  offsetY = 8
+}) => {
   const [open, setOpen] = (0, import_react24.useState)(false);
   const ref = (0, import_react24.useRef)(null);
   const menuRef = (0, import_react24.useRef)(null);
-  const [menuPosition, setMenuPosition] = (0, import_react24.useState)({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = (0, import_react24.useState)({
+    mode: "default",
+    top: 0,
+    left: 0
+  });
   const updatePosition = (0, import_react24.useCallback)(() => {
     var _a;
-    if (!ref.current) {
-      return;
+    if (!ref.current) return;
+    if (anchorRef == null ? void 0 : anchorRef.current) {
+      const anchorRect = anchorRef.current.getBoundingClientRect();
+      setMenuPosition({
+        mode: "anchor",
+        bottom: window.innerHeight - anchorRect.top + offsetY,
+        left: anchorRect.left,
+        width: anchorRect.width
+      });
+    } else {
+      const rect = ref.current.getBoundingClientRect();
+      const estimatedMenuHeight = items.length * 42 + 8;
+      const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
+      const viewportPadding = 8;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const shouldOpenAbove = spaceBelow < menuHeight + 6;
+      const top = shouldOpenAbove ? rect.top - menuHeight - 6 : rect.bottom + 6;
+      setMenuPosition({
+        mode: "default",
+        top: Math.max(
+          viewportPadding,
+          Math.min(top, window.innerHeight - menuHeight - viewportPadding)
+        ),
+        left: rect.right
+      });
     }
-    const rect = ref.current.getBoundingClientRect();
-    const estimatedMenuHeight = items.length * 42 + 8;
-    const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
-    const viewportPadding = 8;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const shouldOpenAbove = spaceBelow < menuHeight + 6;
-    const top = shouldOpenAbove ? rect.top - menuHeight - 6 : rect.bottom + 6;
-    setMenuPosition({
-      top: Math.max(
-        viewportPadding,
-        Math.min(top, window.innerHeight - menuHeight - viewportPadding)
-      ),
-      left: rect.right
-    });
-  }, [items.length]);
+  }, [items.length, anchorRef, offsetY]);
   (0, import_react24.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
@@ -4556,33 +4575,34 @@ var Popover = ({ items = [], children }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, updatePosition]);
+  const menuStyle = menuPosition.mode === "anchor" ? {
+    top: "auto",
+    bottom: menuPosition.bottom,
+    left: menuPosition.left,
+    width: menuPosition.width,
+    transform: "none"
+  } : {
+    top: menuPosition.top,
+    bottom: "auto",
+    left: menuPosition.left,
+    transform: "translateX(-100%)"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PopoverWrapper, { ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverTrigger, { onClick: () => setOpen((o) => !o), children }),
     open && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        PopoverMenu,
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverMenu, { ref: menuRef, style: menuStyle, children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        PopoverItem,
         {
-          ref: menuRef,
-          style: {
-            top: menuPosition.top,
-            left: menuPosition.left,
-            transform: "translateX(-100%)"
+          isLast: idx === items.length - 1,
+          onClick: () => {
+            setOpen(false);
+            item.action();
           },
-          children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            PopoverItem,
-            {
-              isLast: idx === items.length - 1,
-              onClick: () => {
-                setOpen(false);
-                item.action();
-              },
-              onMouseDown: (e) => e.preventDefault(),
-              children: item.label
-            },
-            typeof item.label === "string" ? item.label : idx
-          ))
-        }
-      ),
+          onMouseDown: (e) => e.preventDefault(),
+          children: item.label
+        },
+        typeof item.label === "string" ? item.label : idx
+      )) }),
       document.body
     )
   ] });

package/dist/index.mjs

@@ -758,6 +758,7 @@ var StyledButton = styled9.button.withConfig({
   font-family: 'Open Sans', sans-serif;
 
   width: ${(props) => props.width || "fit-content"};
+  min-width: fit-content;
 
   ${(p) => {
   const base = getColor(p.variant, colors.blue_700);
@@ -4396,7 +4397,12 @@ var IconTabs = ({
 };
 
 // src/Components/Popover/Popover.tsx
-import { useState as useState15, useRef as useRef12, useEffect as useEffect13, useCallback as useCallback4 } from "react";
+import {
+  useState as useState15,
+  useRef as useRef12,
+  useEffect as useEffect13,
+  useCallback as useCallback4
+} from "react";
 import { createPortal } from "react-dom";
 import styled41 from "styled-components";
 import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -4431,31 +4437,49 @@ var PopoverItem = styled41.div`
     background: #f5f5f5;
   }
 `;
-var Popover = ({ items = [], children }) => {
+var Popover = ({
+  items = [],
+  children,
+  anchorRef,
+  offsetY = 8
+}) => {
   const [open, setOpen] = useState15(false);
   const ref = useRef12(null);
   const menuRef = useRef12(null);
-  const [menuPosition, setMenuPosition] = useState15({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState15({
+    mode: "default",
+    top: 0,
+    left: 0
+  });
   const updatePosition = useCallback4(() => {
     var _a;
-    if (!ref.current) {
-      return;
+    if (!ref.current) return;
+    if (anchorRef == null ? void 0 : anchorRef.current) {
+      const anchorRect = anchorRef.current.getBoundingClientRect();
+      setMenuPosition({
+        mode: "anchor",
+        bottom: window.innerHeight - anchorRect.top + offsetY,
+        left: anchorRect.left,
+        width: anchorRect.width
+      });
+    } else {
+      const rect = ref.current.getBoundingClientRect();
+      const estimatedMenuHeight = items.length * 42 + 8;
+      const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
+      const viewportPadding = 8;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const shouldOpenAbove = spaceBelow < menuHeight + 6;
+      const top = shouldOpenAbove ? rect.top - menuHeight - 6 : rect.bottom + 6;
+      setMenuPosition({
+        mode: "default",
+        top: Math.max(
+          viewportPadding,
+          Math.min(top, window.innerHeight - menuHeight - viewportPadding)
+        ),
+        left: rect.right
+      });
     }
-    const rect = ref.current.getBoundingClientRect();
-    const estimatedMenuHeight = items.length * 42 + 8;
-    const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
-    const viewportPadding = 8;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const shouldOpenAbove = spaceBelow < menuHeight + 6;
-    const top = shouldOpenAbove ? rect.top - menuHeight - 6 : rect.bottom + 6;
-    setMenuPosition({
-      top: Math.max(
-        viewportPadding,
-        Math.min(top, window.innerHeight - menuHeight - viewportPadding)
-      ),
-      left: rect.right
-    });
-  }, [items.length]);
+  }, [items.length, anchorRef, offsetY]);
   useEffect13(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
@@ -4477,33 +4501,34 @@ var Popover = ({ items = [], children }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, updatePosition]);
+  const menuStyle = menuPosition.mode === "anchor" ? {
+    top: "auto",
+    bottom: menuPosition.bottom,
+    left: menuPosition.left,
+    width: menuPosition.width,
+    transform: "none"
+  } : {
+    top: menuPosition.top,
+    bottom: "auto",
+    left: menuPosition.left,
+    transform: "translateX(-100%)"
+  };
   return /* @__PURE__ */ jsxs24(PopoverWrapper, { ref, children: [
     /* @__PURE__ */ jsx49(PopoverTrigger, { onClick: () => setOpen((o) => !o), children }),
     open && createPortal(
-      /* @__PURE__ */ jsx49(
-        PopoverMenu,
+      /* @__PURE__ */ jsx49(PopoverMenu, { ref: menuRef, style: menuStyle, children: items.map((item, idx) => /* @__PURE__ */ jsx49(
+        PopoverItem,
         {
-          ref: menuRef,
-          style: {
-            top: menuPosition.top,
-            left: menuPosition.left,
-            transform: "translateX(-100%)"
+          isLast: idx === items.length - 1,
+          onClick: () => {
+            setOpen(false);
+            item.action();
           },
-          children: items.map((item, idx) => /* @__PURE__ */ jsx49(
-            PopoverItem,
-            {
-              isLast: idx === items.length - 1,
-              onClick: () => {
-                setOpen(false);
-                item.action();
-              },
-              onMouseDown: (e) => e.preventDefault(),
-              children: item.label
-            },
-            typeof item.label === "string" ? item.label : idx
-          ))
-        }
-      ),
+          onMouseDown: (e) => e.preventDefault(),
+          children: item.label
+        },
+        typeof item.label === "string" ? item.label : idx
+      )) }),
       document.body
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.242",
+  "version": "1.0.244",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",