diff --git a/package.json b/package.json index 3977542b7..dc797331a 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "@react-spring/web": "^10.0.3", "@svgr/cli": "^8.1.0", "@tanstack/react-query": "^5.90.5", - "@umami/react-zen": "^0.203.0", + "@umami/react-zen": "^0.200.0", "@umami/redis-client": "^0.29.0", "bcryptjs": "^3.0.2", "chalk": "^5.6.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad7d5d4e6..493437aa6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,8 +45,8 @@ importers: specifier: ^5.90.5 version: 5.90.5(react@19.2.0) '@umami/react-zen': - specifier: ^0.203.0 - version: 0.203.0(@babel/core@7.28.3)(@types/react@19.2.2)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.2.0)) + specifier: ^0.200.0 + version: 0.200.0(@babel/core@7.28.3)(@types/react@19.2.2)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.2.0)) '@umami/redis-client': specifier: ^0.29.0 version: 0.29.0 @@ -2921,8 +2921,8 @@ packages: resolution: {integrity: sha512-ptkmIf2iDkNUjdeu2bQqhFPV1m6qTnFFjg7PPDjxKWaMaP0Z6I9l30Jr3g5QqbZGdw8YdYvLp+XnqnWWZOg/NA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@umami/react-zen@0.203.0': - resolution: {integrity: sha512-lgGUapA0zDbLu63GINaEPndIsT8ry85vE316AWU/EEH3qYDBNscetcBfZFr+DTD/c5eLKy9OxmMwIpbs7k+/UA==} + '@umami/react-zen@0.200.0': + resolution: {integrity: sha512-En5H5XpssItNPPSxb+xwGyMUalmqeoWCzMInGi/MJau/kkcJ2V0mSrgZ8RVRryl8cBg8fpktK7JaCTNULweUFA==} '@umami/redis-client@0.29.0': resolution: {integrity: sha512-Jaqh++jskqDB7ny75pfC02OvKp1JTS4asGDsFrRL3qy8sxL3PAl9+/mybCJe4/6vWrXDJKqpgkSfUDJq2bFjyw==} @@ -10670,7 +10670,7 @@ snapshots: '@typescript-eslint/types': 8.46.1 eslint-visitor-keys: 4.2.1 - '@umami/react-zen@0.203.0(@babel/core@7.28.3)(@types/react@19.2.2)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.2.0))': + '@umami/react-zen@0.200.0(@babel/core@7.28.3)(@types/react@19.2.2)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.2.0))': dependencies: '@fontsource/jetbrains-mono': 5.2.8 '@internationalized/date': 3.10.0 diff --git a/src/app/(main)/MobileNav.tsx b/src/app/(main)/MobileNav.tsx index d9ddad895..5fea9f823 100644 --- a/src/app/(main)/MobileNav.tsx +++ b/src/app/(main)/MobileNav.tsx @@ -5,7 +5,7 @@ import Link from 'next/link'; import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav'; import { Logo } from '@/components/svg'; import { NavButton } from '@/components/input/NavButton'; -import { MobileMenuButton } from '@/components/input/MobileMenuButton'; +import { MobileMenu } from '@/components/common/MobileMenu'; export function MobileNav() { const { formatMessage, labels } = useMessages(); @@ -33,8 +33,8 @@ export function MobileNav() { ]; return ( - - + + {({ close }) => { return ( <> @@ -54,7 +54,7 @@ export function MobileNav() { ); }} - + } style={{ width: 'auto' }}> umami diff --git a/src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx b/src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx index ec4c2aafd..08503334f 100644 --- a/src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx +++ b/src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx @@ -1,6 +1,6 @@ -import { Dialog, Modal } from '@umami/react-zen'; +import { Dialog, Modal, useBreakpoint } from '@umami/react-zen'; import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView'; -import { useNavigation, useMobile } from '@/components/hooks'; +import { useNavigation } from '@/components/hooks'; export function ExpandedViewModal({ websiteId, @@ -14,7 +14,8 @@ export function ExpandedViewModal({ query: { view }, updateParams, } = useNavigation(); - const { isMobile } = useMobile(); + const breakpoint = useBreakpoint(); + const isMobile = ['xs', 'sm', 'md'].includes(breakpoint); const handleClose = (close: () => void) => { router.push(updateParams({ view: undefined })); diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx index 2e0822045..f8d4c5f44 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx @@ -2,7 +2,7 @@ import { Grid, Column, Row } from '@umami/react-zen'; import { useMessages, useNavigation } from '@/components/hooks'; import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable'; import { WebsiteExpandedMenu } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedMenu'; -import { MobileMenuButton } from '@/components/input/MobileMenuButton'; +import { MobileMenu } from '@/components/common/MobileMenu'; export function WebsiteExpandedView({ websiteId, @@ -21,11 +21,11 @@ export function WebsiteExpandedView({ return ( - + {({ close }) => { return ; }} - + { const { formatMessage, labels } = useMessages(); return ( - } label={formatMessage(labels.share)} width="800px"> - {({ close }) => { - return ; - }} - + + + + + {({ close }) => { + return ; + }} + + + ); }; diff --git a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx index 0fb6d5652..d63b1ad3f 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx @@ -161,7 +161,7 @@ export function WebsiteNav({ .find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id; return ( - + - + diff --git a/src/components/common/DataGrid.tsx b/src/components/common/DataGrid.tsx index 4d09135f0..5359eb280 100644 --- a/src/components/common/DataGrid.tsx +++ b/src/components/common/DataGrid.tsx @@ -6,9 +6,9 @@ import { cloneElement, isValidElement, } from 'react'; -import { SearchField, Row, Column } from '@umami/react-zen'; +import { SearchField, Row, Column, useBreakpoint } from '@umami/react-zen'; import { UseQueryResult } from '@tanstack/react-query'; -import { useMessages, useMobile, useNavigation } from '@/components/hooks'; +import { useMessages, useNavigation } from '@/components/hooks'; import { Pager } from '@/components/common/Pager'; import { LoadingPanel } from '@/components/common/LoadingPanel'; import { PageResult } from '@/lib/types'; @@ -42,8 +42,8 @@ export function DataGrid({ const { router, updateParams, query: queryParams } = useNavigation(); const [search, setSearch] = useState(queryParams?.search || data?.search || ''); const showPager = allowPaging && data && data.count > data.pageSize; - const { isMobile } = useMobile(); - const displayMode = isMobile ? 'cards' : undefined; + const breakpoint = useBreakpoint(); + const displayMode = ['xs', 'sm', 'md', 'lg'].includes(breakpoint) ? 'cards' : undefined; const handleSearch = (value: string) => { if (value !== search) { diff --git a/src/components/input/MobileMenuButton.tsx b/src/components/common/MobileMenu.tsx similarity index 87% rename from src/components/input/MobileMenuButton.tsx rename to src/components/common/MobileMenu.tsx index bd32272dd..1fb0831a9 100644 --- a/src/components/input/MobileMenuButton.tsx +++ b/src/components/common/MobileMenu.tsx @@ -1,7 +1,7 @@ import { Dialog, DialogTrigger, Button, Icon, Modal, DialogProps } from '@umami/react-zen'; import { Menu } from '@/components/icons'; -export function MobileMenuButton(props: DialogProps) { +export function MobileMenu(props: DialogProps) { return ( + {children} diff --git a/src/components/input/FilterEditForm.tsx b/src/components/input/FilterEditForm.tsx index c69c69e5c..7bc7915e8 100644 --- a/src/components/input/FilterEditForm.tsx +++ b/src/components/input/FilterEditForm.tsx @@ -1,7 +1,7 @@ -import { useFilters, useMessages, useMobile, useNavigation } from '@/components/hooks'; +import { useFilters, useMessages, useNavigation } from '@/components/hooks'; import { FieldFilters } from '@/components/input/FieldFilters'; import { SegmentFilters } from '@/components/input/SegmentFilters'; -import { Button, Column, Row, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen'; +import { Button, Column, Row, Tab, TabList, TabPanel, Tabs, useBreakpoint } from '@umami/react-zen'; import { useState } from 'react'; export interface FilterEditFormProps { @@ -20,7 +20,8 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP const [currentFilters, setCurrentFilters] = useState(filters); const [currentSegment, setCurrentSegment] = useState(segment); const [currentCohort, setCurrentCohort] = useState(cohort); - const { isMobile } = useMobile(); + const breakpoint = useBreakpoint(); + const isMobile = ['xs', 'sm', 'md'].includes(breakpoint); const excludeFilters = pathname.includes('/pixels') || pathname.includes('/links'); const handleReset = () => { diff --git a/src/components/input/NavButton.tsx b/src/components/input/NavButton.tsx index e1f7129d7..e0f7508af 100644 --- a/src/components/input/NavButton.tsx +++ b/src/components/input/NavButton.tsx @@ -12,14 +12,9 @@ import { Column, Pressable, IconLabel, + useBreakpoint, } from '@umami/react-zen'; -import { - useConfig, - useLoginQuery, - useMessages, - useMobile, - useNavigation, -} from '@/components/hooks'; +import { useConfig, useLoginQuery, useMessages, useNavigation } from '@/components/hooks'; import { BookText, ChevronRight, @@ -45,10 +40,11 @@ export function NavButton({ showText = true }: TeamsButtonProps) { const { cloudMode } = useConfig(); const { formatMessage, labels } = useMessages(); const { teamId } = useNavigation(); - const { isMobile } = useMobile(); + const breakpoint = useBreakpoint(); const team = user?.teams?.find(({ id }) => id === teamId); const selectedKeys = new Set([teamId || 'user']); const label = teamId ? team?.name : user.username; + const isMobile = ['xs', 'sm', 'md'].includes(breakpoint); const getUrl = (url: string) => { return cloudMode ? `${process.env.cloudUrl}${url}` : url; diff --git a/src/components/input/WebsiteFilterButton.tsx b/src/components/input/WebsiteFilterButton.tsx index 25f81af41..040ad9545 100644 --- a/src/components/input/WebsiteFilterButton.tsx +++ b/src/components/input/WebsiteFilterButton.tsx @@ -1,18 +1,22 @@ +import { Button, Icon, DialogTrigger, Dialog, Text, Modal, useBreakpoint } from '@umami/react-zen'; import { ListFilter } from '@/components/icons'; import { FilterEditForm } from '@/components/input/FilterEditForm'; -import { DialogButton } from '@/components/input/DialogButton'; import { useMessages, useNavigation } from '@/components/hooks'; import { filtersArrayToObject } from '@/lib/params'; export function WebsiteFilterButton({ websiteId, + showText = true, }: { websiteId: string; position?: 'bottom' | 'top' | 'left' | 'right'; alignment?: 'end' | 'center' | 'start'; + showText?: boolean; }) { const { formatMessage, labels } = useMessages(); const { updateParams, router } = useNavigation(); + const breakpoint = useBreakpoint(); + const isMobile = ['xs', 'sm', 'md'].includes(breakpoint); const handleChange = ({ filters, segment, cohort }: any) => { const params = filtersArrayToObject(filters); @@ -23,10 +27,20 @@ export function WebsiteFilterButton({ }; return ( - } label={formatMessage(labels.filter)} variant="outline"> - {({ close }) => { - return ; - }} - + + + + + {({ close }) => { + return ; + }} + + + ); } diff --git a/src/components/metrics/DatePickerForm.tsx b/src/components/metrics/DatePickerForm.tsx index 8094e30a7..f10603168 100644 --- a/src/components/metrics/DatePickerForm.tsx +++ b/src/components/metrics/DatePickerForm.tsx @@ -47,7 +47,7 @@ export function DatePickerForm({ )} {selected.includes(FILTER_RANGE) && ( - + +