@trackunit/react-components 0.1.36 → 0.1.39

package/index.css

@@ -258,7 +258,8 @@
 
   &__wrapper {
     @apply flex  
-      gap-2;
+      gap-2
+      items-center;
   }
 
   &--checked {
@@ -309,7 +310,6 @@
     @apply bg-white;
   }
 
-
   &__label-container {
     @apply gap-y-1
       grid;

package/index.js

@@ -7,7 +7,7 @@ import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { format, formatDistance } from 'date-fns';
-import { useFloating, offset, shift, flip, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, offset, flip, shift, size, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
@@ -955,7 +955,20 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
     const { x, y, reference, floating, strategy, context } = useFloating({
         open,
         onOpenChange: setOpen,
-        middleware: [offset(8), shift(), flip({ crossAxis: true, fallbackPlacements: ["top", "bottom", "left", "right"] })],
+        middleware: [
+            offset(8),
+            flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            shift(),
+            size({
+                padding: 8,
+                apply({ availableWidth, availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth}px`,
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+        ],
         placement,
         whileElementsMounted: autoUpdate,
     });
@@ -972,6 +985,7 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
                             position: strategy,
                             top: y !== null && y !== void 0 ? y : 0,
                             left: x !== null && x !== void 0 ? x : 0,
+                            display: "flex",
                         } }, getFloatingProps(), { children: render({
                             close: () => {
                                 setOpen(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.36",
+  "version": "0.1.39",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -8,7 +8,7 @@
     "@trackunit/tailwind-styled-components": "0.0.51",
     "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.53",
-    "@trackunit/react-core-contexts-test": "0.1.22",
+    "@trackunit/react-core-contexts-test": "0.1.23",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "uuid": "8.3.2",