From 2a0326683dafa078aee872c752d8a6f795f7e017 Mon Sep 17 00:00:00 2001 From: folinhilo Date: Sat, 18 Jul 2026 15:03:04 +0800 Subject: [PATCH] mm --- package.json | 2 +- packages/ui-react/package.json | 3 +- .../ui-react/src/componnets/Menu/Menu.tsx | 50 +++++++++++++++++ .../src/componnets/Menu/MenuContext.ts | 19 +++++++ .../src/componnets/Popover/Popover.tsx | 20 +++++++ .../src/componnets/Popover/PopoverTrigger.tsx | 3 ++ .../ui-react/src/utils/useFloatingList.ts | 0 pnpm-lock.yaml | 54 +++++++++++++++++++ 8 files changed, 149 insertions(+), 2 deletions(-) create mode 100644 packages/ui-react/src/componnets/Menu/MenuContext.ts create mode 100644 packages/ui-react/src/utils/useFloatingList.ts diff --git a/package.json b/package.json index c304568..f287f03 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,5 @@ "engines": { "node": ">=20" }, - "packageManager": "pnpm@11.5.2+sha512.71c631e382066efc25625d5cf029075de07b61b37f6e27350fbd84b1bda5864c8c1967adc280776b45c30a715c0359a3be08fef42d5bb09e2b99029979692916" + "packageManager": "pnpm@11.13.1+sha512.b2fc7683b8a6525414e7d13e1ba28caaddde96bf66ec540bfaeb7e702b81f3e0be4d1f295edf7f9fe0396740a8dce4509c582ddf79891f4543fea32d37645f25" } diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index dcad19e..475236b 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -27,7 +27,8 @@ "build": "pnpm gen-index && vite build && pnpm gen-dts" }, "dependencies": { - "@dg/css": "workspace:*" + "@dg/css": "workspace:*", + "@floating-ui/react": "^0.27.20" }, "devDependencies": { "@types/node": "^25.6.0", diff --git a/packages/ui-react/src/componnets/Menu/Menu.tsx b/packages/ui-react/src/componnets/Menu/Menu.tsx index e69de29..107b274 100644 --- a/packages/ui-react/src/componnets/Menu/Menu.tsx +++ b/packages/ui-react/src/componnets/Menu/Menu.tsx @@ -0,0 +1,50 @@ +import { + autoUpdate, + flip, + useClick, + useDismiss, + useFloating, + useInteractions, + useListNavigation, + useRole, + useTypeahead, + type Placement, +} from "@floating-ui/react"; +import { useRef, useState } from "react"; +import type { CommonProps } from "../../utils/CommonProps"; + +export type MenuProps = CommonProps; + +export const Menu = (props: MenuProps) => { + const { children } = props; + + const [isOpen, setIsOpen] = useState(false); + const [activeIndex, setActiveIndex] = useState(null); + const [hasFocusInside, setHasFocusInside] = useState(false); + + const { refs, floatingStyles, context } = useFloating({ + placement: "bottom-start", + open: isOpen, + onOpenChange: setIsOpen, + whileElementsMounted: autoUpdate, + middleware: [flip()], + }); + + const elementsRef = useRef([]); + + const listNav = useListNavigation(context, { + listRef: elementsRef, + activeIndex, + onNavigate: setActiveIndex, + }); + + const click = useClick(context); + const dismiss = useDismiss(context); + const role = useRole(context, { role: "listbox" }); + + const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions( + [listNav, click, dismiss, role], + ); + + return; +}; diff --git a/packages/ui-react/src/componnets/Menu/MenuContext.ts b/packages/ui-react/src/componnets/Menu/MenuContext.ts new file mode 100644 index 0000000..6acbe69 --- /dev/null +++ b/packages/ui-react/src/componnets/Menu/MenuContext.ts @@ -0,0 +1,19 @@ +import { createContext } from "react"; + +export type MenuContextValue = { + getItemProps: ( + userProps?: React.HTMLProps, + ) => Record; + activeIndex: number | null; + setActiveIndex: React.Dispatch>; + setHasFocusInside: React.Dispatch>; + isOpen: boolean; +}; + +export const MenuContext = createContext({ + getItemProps: () => ({}), + activeIndex: null, + setActiveIndex: () => {}, + setHasFocusInside: () => {}, + isOpen: false, +}); diff --git a/packages/ui-react/src/componnets/Popover/Popover.tsx b/packages/ui-react/src/componnets/Popover/Popover.tsx index e69de29..62d2081 100644 --- a/packages/ui-react/src/componnets/Popover/Popover.tsx +++ b/packages/ui-react/src/componnets/Popover/Popover.tsx @@ -0,0 +1,20 @@ +import { + autoUpdate, + flip, + useClick, + useDismiss, + useFloating, + useInteractions, + useListNavigation, + useRole, + useTypeahead, + type Placement, +} from "@floating-ui/react"; +import { useRef, useState } from "react"; +import type { CommonProps } from "../../utils/CommonProps"; + +export type PopvoverProps = CommonProps & { + placement?: Placement; +}; + +export const Popover = (props: PopvoverProps) => {}; diff --git a/packages/ui-react/src/componnets/Popover/PopoverTrigger.tsx b/packages/ui-react/src/componnets/Popover/PopoverTrigger.tsx index e69de29..37ab37d 100644 --- a/packages/ui-react/src/componnets/Popover/PopoverTrigger.tsx +++ b/packages/ui-react/src/componnets/Popover/PopoverTrigger.tsx @@ -0,0 +1,3 @@ +export type PopoverTriggerProps = {}; + +export const PopoverTrigger = () => {}; diff --git a/packages/ui-react/src/utils/useFloatingList.ts b/packages/ui-react/src/utils/useFloatingList.ts new file mode 100644 index 0000000..e69de29 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a34f38..7327339 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ importers: '@dg/css': specifier: workspace:* version: link:../css + '@floating-ui/react': + specifier: ^0.27.20 + version: 0.27.20(react-dom@19.2.6(react@19.2.6))(react@19.2.6) react: specifier: ^19 version: 19.2.6 @@ -320,18 +323,39 @@ packages: '@floating-ui/core@1.7.5': resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==} + '@floating-ui/core@1.8.0': + resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==} + '@floating-ui/dom@1.7.6': resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==} + '@floating-ui/dom@1.8.0': + resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==} + '@floating-ui/react-dom@2.1.8': resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' + '@floating-ui/react-dom@2.1.9': + resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + + '@floating-ui/react@0.27.20': + resolution: {integrity: sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==} + peerDependencies: + react: '>=17.0.0' + react-dom: '>=17.0.0' + '@floating-ui/utils@0.2.11': resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==} + '@floating-ui/utils@0.2.12': + resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==} + '@humanfs/core@0.19.2': resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==} engines: {node: '>=18.18.0'} @@ -1269,6 +1293,9 @@ packages: resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==} engines: {node: '>=12'} + tabbable@6.5.0: + resolution: {integrity: sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==} + tailwind-merge@3.6.0: resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==} @@ -1620,19 +1647,44 @@ snapshots: dependencies: '@floating-ui/utils': 0.2.11 + '@floating-ui/core@1.8.0': + dependencies: + '@floating-ui/utils': 0.2.12 + '@floating-ui/dom@1.7.6': dependencies: '@floating-ui/core': 1.7.5 '@floating-ui/utils': 0.2.11 + '@floating-ui/dom@1.8.0': + dependencies: + '@floating-ui/core': 1.8.0 + '@floating-ui/utils': 0.2.12 + '@floating-ui/react-dom@2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)': dependencies: '@floating-ui/dom': 1.7.6 react: 19.2.6 react-dom: 19.2.6(react@19.2.6) + '@floating-ui/react-dom@2.1.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6)': + dependencies: + '@floating-ui/dom': 1.8.0 + react: 19.2.6 + react-dom: 19.2.6(react@19.2.6) + + '@floating-ui/react@0.27.20(react-dom@19.2.6(react@19.2.6))(react@19.2.6)': + dependencies: + '@floating-ui/react-dom': 2.1.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + '@floating-ui/utils': 0.2.12 + react: 19.2.6 + react-dom: 19.2.6(react@19.2.6) + tabbable: 6.5.0 + '@floating-ui/utils@0.2.11': {} + '@floating-ui/utils@0.2.12': {} + '@humanfs/core@0.19.2': dependencies: '@humanfs/types': 0.15.0 @@ -2450,6 +2502,8 @@ snapshots: dependencies: ansi-regex: 6.2.2 + tabbable@6.5.0: {} + tailwind-merge@3.6.0: {} tailwind-variants@3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.0):