design-zystem 1.0.241 → 1.0.243

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;
@@ -64,6 +64,7 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     fullHeight?: boolean;
     width?: string;
     wrap?: string;
+    backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -805,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;
@@ -64,6 +64,7 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     fullHeight?: boolean;
     width?: string;
     wrap?: string;
+    backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -805,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

@@ -411,15 +411,18 @@ var shouldForwardPropRow = (prop) => ![
   "fullWidth",
   "fullwidth",
   "margin",
-  "width"
+  "width",
+  "wrap",
+  "backgroundColor"
 ].includes(prop);
 var StyledRow = import_styled_components4.default.div.withConfig({
   shouldForwardProp: shouldForwardPropRow
 })`
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: ${(props) => props.wrap || "nowrap"};
   width: ${(props) => props.width || "100%"};
   max-height: 100%;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
   margin: ${(props) => props.margin || "0"};
   height: ${(props) => props.fullHeight ? `100%` : "auto"};
   gap: ${(props) => props.gap ? `${props.gap}px` : "0"};
@@ -4507,31 +4510,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;
@@ -4553,33 +4574,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

@@ -317,15 +317,18 @@ var shouldForwardPropRow = (prop) => ![
   "fullWidth",
   "fullwidth",
   "margin",
-  "width"
+  "width",
+  "wrap",
+  "backgroundColor"
 ].includes(prop);
 var StyledRow = styled4.div.withConfig({
   shouldForwardProp: shouldForwardPropRow
 })`
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: ${(props) => props.wrap || "nowrap"};
   width: ${(props) => props.width || "100%"};
   max-height: 100%;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
   margin: ${(props) => props.margin || "0"};
   height: ${(props) => props.fullHeight ? `100%` : "auto"};
   gap: ${(props) => props.gap ? `${props.gap}px` : "0"};
@@ -4393,7 +4396,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";
@@ -4428,31 +4436,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;
@@ -4474,33 +4500,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.241",
+  "version": "1.0.243",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",