@trackunit/react-components 0.1.36 → 0.1.40

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);
@@ -1779,10 +1793,10 @@ const Pagination = ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, ca
     if (loading) {
         return (jsx(Root$3, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
     }
-    return (jsxs(Root$3, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(Text$1, { children: getTranslatedPage() }), jsx(PageInput, { type: "number", min: 1, 
+    return (jsxs(Root$3, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(Text$1, { children: getTranslatedPage() }), jsx(PageInput, { type: "number", min: 1, 
                         // max={amountOfPages}
                         value: pageInputValue, onFocus: handleOnFocus, onBlur: handleOnBlur, onChange: handleOnChange, onKeyPress: handleOnKeyPress, "data-testid": "page-input" }), jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount) }))] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
-                    ? false
+                    ? !canNextPage || false
                     : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] })));
 };
 const Root$3 = tw.div `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.36",
+  "version": "0.1.40",
   "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",