From dd53ccb9624e719d019a8fe29fcd66415c1b1528 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Wed, 20 Aug 2025 15:57:34 +0300 Subject: deps: Upgrade expo & nextjs to react 19 (#1565) * Attempt to upgrade expo 53 * Attempt upgrade nextjs * Fix a bunch of peer deps * upgrade some docs deps * fix typecheck * update the shadcn calendar component * more fixes * more fixes * revert ollama upgrade * update react version to use carets * remove react-select from landing * fix the typescript error caused by customFetch * upgrade the new grid user setting to nextjs 15 * mobile: enable react canary to support react 19.1 * upgrade react native menu * fix navigation context error --- apps/browser-extension/package.json | 8 +- apps/landing/package.json | 9 +- apps/mobile/app.config.js | 4 + apps/mobile/app/_layout.tsx | 79 +++---- apps/mobile/app/sharing.tsx | 12 +- apps/mobile/components/ui/Input.tsx | 61 +++--- apps/mobile/package.json | 58 +++--- apps/web/app/admin/layout.tsx | 3 +- .../@modal/(.)preview/[bookmarkId]/page.tsx | 9 +- apps/web/app/dashboard/feeds/[feedId]/page.tsx | 7 +- apps/web/app/dashboard/lists/[listId]/page.tsx | 13 +- .../app/dashboard/preview/[bookmarkId]/page.tsx | 7 +- apps/web/app/dashboard/tags/[tagId]/page.tsx | 13 +- apps/web/app/public/lists/[listId]/page.tsx | 14 +- apps/web/app/settings/layout.tsx | 2 +- .../components/dashboard/bookmarks/EditorCard.tsx | 4 +- .../components/dashboard/search/SearchInput.tsx | 2 +- apps/web/components/shared/sidebar/TSidebarItem.ts | 2 +- apps/web/components/theme-provider.tsx | 2 +- apps/web/components/ui/calendar.tsx | 230 +++++++++++++++++---- .../components/ui/markdown/markdown-readonly.tsx | 1 - .../web/lib/userLocalSettings/userLocalSettings.ts | 14 +- apps/web/next-env.d.ts | 2 +- apps/web/package.json | 20 +- apps/web/server/api/client.ts | 2 +- 25 files changed, 360 insertions(+), 218 deletions(-) (limited to 'apps') diff --git a/apps/browser-extension/package.json b/apps/browser-extension/package.json index 4f8befd1..88e55285 100644 --- a/apps/browser-extension/package.json +++ b/apps/browser-extension/package.json @@ -30,8 +30,8 @@ "clsx": "^2.1.0", "cmdk": "^1.1.1", "lucide-react": "^0.501.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.1.0", + "react-dom": "^19.1.0", "react-router-dom": "^6.22.0", "superjson": "^2.2.1", "tailwind-merge": "^2.2.1", @@ -44,8 +44,8 @@ "@karakeep/tailwind-config": "workspace:^0.1.0", "@karakeep/tsconfig": "workspace:^0.1.0", "@types/chrome": "^0.0.260", - "@types/react": "^18.3.12", - "@types/react-dom": "^18.3.1", + "@types/react": "^19.1.6", + "@types/react-dom": "^19.1.6", "@vitejs/plugin-react-swc": "^3.11.0", "autoprefixer": "^10.4.17", "postcss": "^8.4.35", diff --git a/apps/landing/package.json b/apps/landing/package.json index e6db4d83..b8329356 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -20,10 +20,9 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "lucide-react": "^0.501.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.1.0", + "react-dom": "^19.1.0", "react-router": "^7.7.1", - "react-select": "^5.8.0", "sharp": "^0.33.3", "tailwind-merge": "^2.2.1", "tailwindcss-animate": "^1.0.7" @@ -33,8 +32,8 @@ "@karakeep/tailwind-config": "workspace:^0.1.0", "@karakeep/tsconfig": "workspace:^0.1.0", "@tailwindcss/typography": "^0.5.10", - "@types/react": "^18.3.12", - "@types/react-dom": "^18.3.1", + "@types/react": "^19.1.6", + "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.7.0", "autoprefixer": "^10.4.17", "postcss": "^8.4.35", diff --git a/apps/mobile/app.config.js b/apps/mobile/app.config.js index 7e8ab546..1b60c74f 100644 --- a/apps/mobile/app.config.js +++ b/apps/mobile/app.config.js @@ -9,6 +9,9 @@ export default { light: "./assets/icon.png", tinted: "./assets/icon-tinted.png", }, + experiments: { + reactCanary: true, + }, userInterfaceStyle: "automatic", assetBundlePatterns: ["**/*"], ios: { @@ -89,6 +92,7 @@ export default { }, }, ], + "expo-web-browser", ], extra: { router: { diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx index e1751f1e..ca3da0cb 100644 --- a/apps/mobile/app/_layout.tsx +++ b/apps/mobile/app/_layout.tsx @@ -32,42 +32,47 @@ export default function RootLayout() { }, [settings.theme]); return ( - - - - - - - - - - - - - + <> + { + return ( + + + {props.children} + + + ); + }} + contentClassName={cn( + "w-full flex-1 bg-gray-100 text-foreground dark:bg-background", + colorScheme == "dark" ? "dark" : "light", + )} + screenOptions={{ + headerTitle: "", + headerTransparent: true, + }} + > + + + + + + + ); } diff --git a/apps/mobile/app/sharing.tsx b/apps/mobile/app/sharing.tsx index 941b4c83..506b5100 100644 --- a/apps/mobile/app/sharing.tsx +++ b/apps/mobile/app/sharing.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { ActivityIndicator, Pressable, Text, View } from "react-native"; import { useRouter } from "expo-router"; import { useShareIntentContext } from "expo-share-intent"; @@ -83,7 +83,7 @@ export default function Sharing() { const router = useRouter(); const [mode, setMode] = useState({ type: "idle" }); - let autoCloseTimeoutId: NodeJS.Timeout | null = null; + const autoCloseTimeoutId = useRef(null); let comp; switch (mode.type) { @@ -102,8 +102,8 @@ export default function Sharing() { label="Manage" onPress={() => { router.replace(`/dashboard/bookmarks/${mode.bookmarkId}/info`); - if (autoCloseTimeoutId) { - clearTimeout(autoCloseTimeoutId); + if (autoCloseTimeoutId.current) { + clearTimeout(autoCloseTimeoutId.current); } }} /> @@ -126,11 +126,11 @@ export default function Sharing() { return; } - autoCloseTimeoutId = setTimeout(() => { + autoCloseTimeoutId.current = setTimeout(() => { router.replace("dashboard"); }, 2000); - return () => clearTimeout(autoCloseTimeoutId!); + return () => clearTimeout(autoCloseTimeoutId.current!); }, [mode.type]); return ( diff --git a/apps/mobile/components/ui/Input.tsx b/apps/mobile/components/ui/Input.tsx index dc84f54f..2bd5e190 100644 --- a/apps/mobile/components/ui/Input.tsx +++ b/apps/mobile/components/ui/Input.tsx @@ -1,47 +1,46 @@ +import type { TextInputProps } from "react-native"; import { forwardRef } from "react"; import { ActivityIndicator, Text, TextInput, View } from "react-native"; import { cn } from "@/lib/utils"; import { TailwindResolver } from "../TailwindResolver"; -export interface InputProps - extends React.ComponentPropsWithoutRef { +export interface InputProps extends TextInputProps { label?: string; labelClasses?: string; inputClasses?: string; + loading?: boolean; } -const Input = forwardRef< - React.ElementRef, - InputProps & { loading?: boolean } ->( +export const Input = forwardRef( ( { className, label, labelClasses, inputClasses, loading, ...props }, ref, - ) => ( - - {label && {label}} - ( - + ) => { + return ( + + {label && ( + {label} )} - /> - {loading && ( - - )} - - ), + ( + + )} + /> + {loading && ( + + )} + + ); + }, ); -Input.displayName = "Input"; - -export { Input }; diff --git a/apps/mobile/package.json b/apps/mobile/package.json index 80e4ffcb..0ed5668c 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -19,55 +19,55 @@ "@karakeep/shared-react": "workspace:^0.1.0", "@karakeep/trpc": "workspace:^0.1.0", "@react-native-async-storage/async-storage": "1.23.1", - "@react-native-menu/menu": "^1.1.6", + "@react-native-menu/menu": "^1.2.4", "@tanstack/react-query": "^5.80.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", - "expo": "~52.0.46", - "expo-build-properties": "^0.13.3", - "expo-checkbox": "^4.0.1", - "expo-clipboard": "^7.0.1", - "expo-constants": "~17.0.8", - "expo-dev-client": "^5.0.20", + "expo": "~53.0.11", + "expo-build-properties": "^0.14.6", + "expo-checkbox": "^4.1.4", + "expo-clipboard": "^7.1.4", + "expo-constants": "~17.1.6", + "expo-dev-client": "^5.2.0", "expo-file-system": "~18.0.12", - "expo-haptics": "^14.0.1", - "expo-image": "^2.0.7", - "expo-image-picker": "^16.0.6", - "expo-linking": "~7.0.5", - "expo-navigation-bar": "^4.0.9", - "expo-router": "~4.0.21", - "expo-secure-store": "^14.0.1", - "expo-share-intent": "3.2.3", + "expo-haptics": "^14.1.4", + "expo-image": "^2.2.0", + "expo-image-picker": "^16.1.4", + "expo-linking": "~7.1.5", + "expo-navigation-bar": "^4.2.5", + "expo-router": "~5.0.7", + "expo-secure-store": "^14.2.3", + "expo-share-intent": "^4.0.0", "expo-sharing": "~13.0.1", - "expo-status-bar": "~2.0.1", - "expo-system-ui": "^4.0.9", - "expo-web-browser": "^14.0.2", - "lucide-react-native": "^0.354.0", + "expo-status-bar": "~2.2.3", + "expo-system-ui": "^5.0.8", + "expo-web-browser": "^14.1.6", + "lucide-react-native": "^0.513.0", "nativewind": "^4.1.23", - "react": "^18.3.1", - "react-native": "0.76.9", + "react": "^19.1.0", + "react-native": "0.79.3", "react-native-awesome-slider": "^2.5.3", "react-native-blob-util": "^0.21.2", - "react-native-gesture-handler": "~2.20.2", + "react-native-gesture-handler": "~2.24.0", "react-native-image-viewing": "^0.2.2", "react-native-markdown-display": "^7.0.2", "react-native-pdf": "^6.7.7", - "react-native-reanimated": "^3.16.2", - "react-native-safe-area-context": "4.12.0", - "react-native-screens": "~4.4.0", - "react-native-svg": "^15.8.0", - "react-native-webview": "^13.12.5", + "react-native-reanimated": "^3.17.5", + "react-native-safe-area-context": "5.4.0", + "react-native-screens": "~4.11.1", + "react-native-svg": "^15.11.2", + "react-native-webview": "^13.13.5", "tailwind-merge": "^2.2.1", "use-debounce": "^10.0.0", "zod": "^3.24.2", - "zustand": "^4.5.1" + "zustand": "^5.0.5" }, "devDependencies": { "@babel/core": "~7.26.0", "@karakeep/prettier-config": "workspace:^0.1.0", "@karakeep/tailwind-config": "workspace:^0.1.0", "@karakeep/tsconfig": "workspace:^0.1.0", - "@types/react": "^18.3.12", + "@types/react": "^19.1.6", "ajv": "latest", "prettier": "^3.4.2", "tailwindcss": "^3.4.1", diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx index 62a6932a..4b589712 100644 --- a/apps/web/app/admin/layout.tsx +++ b/apps/web/app/admin/layout.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { redirect } from "next/navigation"; import { AdminNotices } from "@/components/admin/AdminNotices"; import MobileSidebar from "@/components/shared/sidebar/MobileSidebar"; @@ -11,7 +12,7 @@ const adminSidebarItems = ( t: TFunction, ): { name: string; - icon: JSX.Element; + icon: React.ReactElement; path: string; }[] => [ { diff --git a/apps/web/app/dashboard/@modal/(.)preview/[bookmarkId]/page.tsx b/apps/web/app/dashboard/@modal/(.)preview/[bookmarkId]/page.tsx index 432e7a6c..77d84ec5 100644 --- a/apps/web/app/dashboard/@modal/(.)preview/[bookmarkId]/page.tsx +++ b/apps/web/app/dashboard/@modal/(.)preview/[bookmarkId]/page.tsx @@ -1,15 +1,14 @@ "use client"; -import { useState } from "react"; +import { use, useState } from "react"; import { useRouter } from "next/navigation"; import BookmarkPreview from "@/components/dashboard/preview/BookmarkPreview"; import { Dialog, DialogContent } from "@/components/ui/dialog"; -export default function BookmarkPreviewPage({ - params, -}: { - params: { bookmarkId: string }; +export default function BookmarkPreviewPage(props: { + params: Promise<{ bookmarkId: string }>; }) { + const params = use(props.params); const router = useRouter(); const [open, setOpen] = useState(true); diff --git a/apps/web/app/dashboard/feeds/[feedId]/page.tsx b/apps/web/app/dashboard/feeds/[feedId]/page.tsx index ed5f9e40..a73f0f32 100644 --- a/apps/web/app/dashboard/feeds/[feedId]/page.tsx +++ b/apps/web/app/dashboard/feeds/[feedId]/page.tsx @@ -3,11 +3,10 @@ import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks"; import { api } from "@/server/api/client"; import { TRPCError } from "@trpc/server"; -export default async function FeedPage({ - params, -}: { - params: { feedId: string }; +export default async function FeedPage(props: { + params: Promise<{ feedId: string }>; }) { + const params = await props.params; let feed; try { feed = await api.feeds.get({ feedId: params.feedId }); diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx index de0f5054..4714a71c 100644 --- a/apps/web/app/dashboard/lists/[listId]/page.tsx +++ b/apps/web/app/dashboard/lists/[listId]/page.tsx @@ -6,15 +6,14 @@ import { TRPCError } from "@trpc/server"; import { BookmarkListContextProvider } from "@karakeep/shared-react/hooks/bookmark-list-context"; -export default async function ListPage({ - params, - searchParams, -}: { - params: { listId: string }; - searchParams?: { +export default async function ListPage(props: { + params: Promise<{ listId: string }>; + searchParams?: Promise<{ includeArchived?: string; - }; + }>; }) { + const searchParams = await props.searchParams; + const params = await props.params; const userSettings = await api.users.settings(); let list; try { diff --git a/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx b/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx index 236f5447..ea509207 100644 --- a/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx +++ b/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx @@ -3,11 +3,10 @@ import BookmarkPreview from "@/components/dashboard/preview/BookmarkPreview"; import { api } from "@/server/api/client"; import { TRPCError } from "@trpc/server"; -export default async function BookmarkPreviewPage({ - params, -}: { - params: { bookmarkId: string }; +export default async function BookmarkPreviewPage(props: { + params: Promise<{ bookmarkId: string }>; }) { + const params = await props.params; let bookmark; try { bookmark = await api.bookmarks.getBookmark({ diff --git a/apps/web/app/dashboard/tags/[tagId]/page.tsx b/apps/web/app/dashboard/tags/[tagId]/page.tsx index b33a351a..7971da1e 100644 --- a/apps/web/app/dashboard/tags/[tagId]/page.tsx +++ b/apps/web/app/dashboard/tags/[tagId]/page.tsx @@ -7,15 +7,14 @@ import { api } from "@/server/api/client"; import { TRPCError } from "@trpc/server"; import { MoreHorizontal } from "lucide-react"; -export default async function TagPage({ - params, - searchParams, -}: { - params: { tagId: string }; - searchParams?: { +export default async function TagPage(props: { + params: Promise<{ tagId: string }>; + searchParams?: Promise<{ includeArchived?: string; - }; + }>; }) { + const searchParams = await props.searchParams; + const params = await props.params; let tag; try { tag = await api.tags.get({ tagId: params.tagId }); diff --git a/apps/web/app/public/lists/[listId]/page.tsx b/apps/web/app/public/lists/[listId]/page.tsx index 4a4ce414..17e6b947 100644 --- a/apps/web/app/public/lists/[listId]/page.tsx +++ b/apps/web/app/public/lists/[listId]/page.tsx @@ -6,11 +6,10 @@ import PublicListHeader from "@/components/public/lists/PublicListHeader"; import { api } from "@/server/api/client"; import { TRPCError } from "@trpc/server"; -export async function generateMetadata({ - params, -}: { - params: { listId: string }; +export async function generateMetadata(props: { + params: Promise<{ listId: string }>; }): Promise { + const params = await props.params; try { const resp = await api.publicBookmarks.getPublicListMetadata({ listId: params.listId, @@ -38,11 +37,10 @@ export async function generateMetadata({ }; } -export default async function PublicListPage({ - params, -}: { - params: { listId: string }; +export default async function PublicListPage(props: { + params: Promise<{ listId: string }>; }) { + const params = await props.params; try { const { list, bookmarks, nextCursor } = await api.publicBookmarks.getPublicBookmarksInList({ diff --git a/apps/web/app/settings/layout.tsx b/apps/web/app/settings/layout.tsx index 94a5c4d7..982ac61a 100644 --- a/apps/web/app/settings/layout.tsx +++ b/apps/web/app/settings/layout.tsx @@ -25,7 +25,7 @@ const settingsSidebarItems = ( t: TFunction, ): { name: string; - icon: JSX.Element; + icon: React.ReactElement; path: string; }[] => { return [ diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx index a5966845..7ac1cade 100644 --- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx +++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx @@ -24,7 +24,9 @@ import { BookmarkTypes } from "@karakeep/shared/types/bookmarks"; import { useUploadAsset } from "../UploadDropzone"; -function useFocusOnKeyPress(inputRef: React.RefObject) { +function useFocusOnKeyPress( + inputRef: React.RefObject, +) { useEffect(() => { function handleKeyPress(e: KeyboardEvent) { if (!inputRef.current) { diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx index 0de7694a..dad995e1 100644 --- a/apps/web/components/dashboard/search/SearchInput.tsx +++ b/apps/web/components/dashboard/search/SearchInput.tsx @@ -35,7 +35,7 @@ import QueryExplainerTooltip from "./QueryExplainerTooltip"; const MAX_DISPLAY_SUGGESTIONS = 5; function useFocusSearchOnKeyPress( - inputRef: React.RefObject, + inputRef: React.RefObject, value: string, setValue: (value: string) => void, setPopoverOpen: React.Dispatch>, diff --git a/apps/web/components/shared/sidebar/TSidebarItem.ts b/apps/web/components/shared/sidebar/TSidebarItem.ts index 84cd58f5..a1ea4c97 100644 --- a/apps/web/components/shared/sidebar/TSidebarItem.ts +++ b/apps/web/components/shared/sidebar/TSidebarItem.ts @@ -1,5 +1,5 @@ export interface TSidebarItem { name: string; - icon: JSX.Element; + icon: React.ReactElement; path: string; } diff --git a/apps/web/components/theme-provider.tsx b/apps/web/components/theme-provider.tsx index 737e1356..1ab9a49d 100644 --- a/apps/web/components/theme-provider.tsx +++ b/apps/web/components/theme-provider.tsx @@ -1,6 +1,6 @@ "use client"; -import type { ThemeProviderProps } from "next-themes/dist/types"; +import type { ThemeProviderProps } from "next-themes"; import * as React from "react"; import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"; diff --git a/apps/web/components/ui/calendar.tsx b/apps/web/components/ui/calendar.tsx index 99a082f6..e2a13e9e 100644 --- a/apps/web/components/ui/calendar.tsx +++ b/apps/web/components/ui/calendar.tsx @@ -1,69 +1,209 @@ "use client"; import * as React from "react"; -import { buttonVariants } from "@/components/ui/button"; +import { Button, buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; -import { ChevronLeft, ChevronRight } from "lucide-react"; -import { DayPicker } from "react-day-picker"; - -export type CalendarProps = React.ComponentProps; +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, +} from "lucide-react"; +import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"; function Calendar({ className, classNames, showOutsideDays = true, + captionLayout = "label", + buttonVariant = "ghost", + formatters, + components, ...props -}: CalendarProps) { +}: React.ComponentProps & { + buttonVariant?: React.ComponentProps["variant"]; +}) { + const defaultClassNames = getDefaultClassNames(); + return ( svg]:rotate-180`, + String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, + className, + )} + captionLayout={captionLayout} + formatters={{ + formatMonthDropdown: (date) => + date.toLocaleString("default", { month: "short" }), + ...formatters, + }} classNames={{ - months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", - month: "space-y-4", - caption: "flex justify-center pt-1 relative items-center", - caption_label: "text-sm font-medium", - nav: "space-x-1 flex items-center", - nav_button: cn( - buttonVariants({ variant: "outline" }), - "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100", - ), - nav_button_previous: "absolute left-1", - nav_button_next: "absolute right-1", - table: "w-full border-collapse space-y-1", - head_row: "flex", - head_cell: - "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", - row: "flex w-full mt-2", - cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", + root: cn("w-fit", defaultClassNames.root), + months: cn( + "relative flex flex-col gap-4 md:flex-row", + defaultClassNames.months, + ), + month: cn("flex w-full flex-col gap-4", defaultClassNames.month), + nav: cn( + "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", + defaultClassNames.nav, + ), + button_previous: cn( + buttonVariants({ variant: buttonVariant }), + "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", + defaultClassNames.button_previous, + ), + button_next: cn( + buttonVariants({ variant: buttonVariant }), + "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", + defaultClassNames.button_next, + ), + month_caption: cn( + "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]", + defaultClassNames.month_caption, + ), + dropdowns: cn( + "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium", + defaultClassNames.dropdowns, + ), + dropdown_root: cn( + "has-focus:border-ring shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border border-input", + defaultClassNames.dropdown_root, + ), + dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown), + caption_label: cn( + "select-none font-medium", + captionLayout === "label" + ? "text-sm" + : "flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", + defaultClassNames.caption_label, + ), + table: "w-full border-collapse", + weekdays: cn("flex", defaultClassNames.weekdays), + weekday: cn( + "flex-1 select-none rounded-md text-[0.8rem] font-normal text-muted-foreground", + defaultClassNames.weekday, + ), + week: cn("mt-2 flex w-full", defaultClassNames.week), + week_number_header: cn( + "w-[--cell-size] select-none", + defaultClassNames.week_number_header, + ), + week_number: cn( + "select-none text-[0.8rem] text-muted-foreground", + defaultClassNames.week_number, + ), day: cn( - buttonVariants({ variant: "ghost" }), - "h-9 w-9 p-0 font-normal aria-selected:opacity-100", - ), - day_range_end: "day-range-end", - day_selected: - "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", - day_today: "bg-accent text-accent-foreground", - day_outside: - "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", - day_disabled: "text-muted-foreground opacity-50", - day_range_middle: - "aria-selected:bg-accent aria-selected:text-accent-foreground", - day_hidden: "invisible", + "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", + defaultClassNames.day, + ), + range_start: cn( + "rounded-l-md bg-accent", + defaultClassNames.range_start, + ), + range_middle: cn("rounded-none", defaultClassNames.range_middle), + range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end), + today: cn( + "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", + defaultClassNames.today, + ), + outside: cn( + "text-muted-foreground aria-selected:text-muted-foreground", + defaultClassNames.outside, + ), + disabled: cn( + "text-muted-foreground opacity-50", + defaultClassNames.disabled, + ), + hidden: cn("invisible", defaultClassNames.hidden), ...classNames, }} components={{ - IconLeft: ({ className, ...props }) => ( - - ), - IconRight: ({ className, ...props }) => ( - - ), + Root: ({ className, rootRef, ...props }) => { + return ( +
+ ); + }, + Chevron: ({ className, orientation, ...props }) => { + if (orientation === "left") { + return ( + + ); + } + + if (orientation === "right") { + return ( + + ); + } + + return ( + + ); + }, + DayButton: CalendarDayButton, + WeekNumber: ({ children, ...props }) => { + return ( + +
+ {children} +
+ + ); + }, + ...components, }} {...props} /> ); } -Calendar.displayName = "Calendar"; -export { Calendar }; +function CalendarDayButton({ + className, + day, + modifiers, + ...props +}: React.ComponentProps) { + const defaultClassNames = getDefaultClassNames(); + + const ref = React.useRef(null); + React.useEffect(() => { + if (modifiers.focused) ref.current?.focus(); + }, [modifiers.focused]); + + return ( +