From 8692a0285488d6a60fdde62024ff2d4cd4790074 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=A1clav=20Gr=C3=B6hling?= Date: Fri, 30 Aug 2024 11:49:46 +0200 Subject: [PATCH] chore: upgrade deps --- package.json | 9 +- src/App.res | 8 +- .../ButtonMenu/ButtonMenu.module.css | 9 +- src/components/ButtonMenu/ButtonMenu.res | 24 +- src/pages/PlaceSetting/TapsSetting.module.css | 2 +- src/styles/reset.css | 5 +- yarn.lock | 600 +++++++++++++++++- 7 files changed, 628 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 6daaf00..90cdc0b 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "dependencies": { "@firebase-web-authn/browser": "^10.0.0", - "@oddbird/popover-polyfill": "^0.2.3", + "@oddbird/popover-polyfill": "^0.4.4", "@rescript/core": "^1.5.2", "@rescript/react": "^0.13.0", "@sentry/react": "^7.106.0", "@sentry/vite-plugin": "^2.14.3", "dialog-polyfill": "^0.5.6", - "firebase": "^10.1.0", + "firebase": "^10.13.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-intl": "^6.6.8", @@ -23,6 +23,7 @@ "@firebase-web-authn/extension": "^10.0.0", "@firebase/rules-unit-testing": "^3.0.1", "@jihchi/vite-plugin-rescript": "^6.0.0", + "@oddbird/css-anchor-positioning": "^0.1.1", "@storybook/addon-essentials": "^7.6.17", "@storybook/addon-interactions": "^7.6.17", "@storybook/addon-links": "^7.6.17", @@ -44,9 +45,9 @@ "rescript-vitest": "^1.3.0", "source-map-explorer": "^2.5.3", "storybook": "^7.6.17", - "vite": "^5.4.0", + "vite": "^5.4.2", "vite-plugin-ejs": "^1.7.0", - "vite-plugin-pwa": "^0.20.1", + "vite-plugin-pwa": "^0.20.2", "vitest": "^2.0.5" }, "private": true, diff --git a/src/App.res b/src/App.res index b4667ae..21f3cc0 100644 --- a/src/App.res +++ b/src/App.res @@ -1,6 +1,12 @@ %%raw(`import './styles/index.css'`) %%raw(`import '@oddbird/popover-polyfill'`) -%%raw(`import '@oddbird/popover-polyfill/dist/popover.css'`) + +type anchorPositioningPolyfillFn = unit => promise + +@module("@oddbird/css-anchor-positioning/fn") +external polyfillAnchorPositioning: anchorPositioningPolyfillFn = "default" + +polyfillAnchorPositioning()->ignore @react.component let make = () => { diff --git a/src/components/ButtonMenu/ButtonMenu.module.css b/src/components/ButtonMenu/ButtonMenu.module.css index 4b0f754..28709cb 100644 --- a/src/components/ButtonMenu/ButtonMenu.module.css +++ b/src/components/ButtonMenu/ButtonMenu.module.css @@ -1,11 +1,12 @@ .popover.popover.popover { background-color: var(--surface-2); border: var(--border-size-1) solid var(--surface-4); - top: anchor(bottom); - right: anchor(right); - padding: 0; - padding-block: 0.5rem; box-shadow: var(--shadow-3); + inset: unset; + padding-block: 0.5rem; + position-try-options: flip-block, flip-inline, flip-block flip-inline; + right: anchor(right); + top: anchor(bottom); } .popover li > :where(a, button) { color: var(--text-1); diff --git a/src/components/ButtonMenu/ButtonMenu.res b/src/components/ButtonMenu/ButtonMenu.res index fdc5c55..a240b1a 100644 --- a/src/components/ButtonMenu/ButtonMenu.res +++ b/src/components/ButtonMenu/ButtonMenu.res @@ -9,27 +9,37 @@ type menuItem = { @genType @react.component let make = (~children, ~className=?, ~menuItems, ~title=?) => { - let popoverId = React.useId() - let anchorId = React.useId() + let nodeId = React.useId()->String.slice(~start=1, ~end=-1) + let popoverId = `popover-${nodeId}` + let anchorId = `anchor-${nodeId}` + let anchorName = `--button-menu-${nodeId}` <> {React.cloneElement( - , + , { "popovertarget": popoverId, "popovertargetaction": "toggle", }, )} {React.cloneElement( -
+
ReactDOM.Style.unsafeAddProp("position-anchor", anchorName)}>