chore: upgrade deps

czabaj · Aug 30, 2024 · 8692a02 · 8692a02
1 parent bad4cdc
commit 8692a02
Show file tree

Hide file tree

Showing 7 changed files with 628 additions and 29 deletions.
diff --git 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
@@ -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<unit>
+
+@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
@@ -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
@@ -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(
-      <button ?className id=anchorId ?title type_="button"> {children} </button>,
+      <button
+        ?className
+        id=anchorId
+        style={ReactDOM.Style.make()->ReactDOM.Style.unsafeAddProp("anchor-name", anchorName)}
+        ?title
+        type_="button">
+        {children}
+      </button>,
       {
         "popovertarget": popoverId,
         "popovertargetaction": "toggle",
       },
     )}
     {React.cloneElement(
-      <div className={classes.popover} id={popoverId}>
+      <div
+        className={classes.popover}
+        id={popoverId}
+        style={ReactDOM.Style.make()->ReactDOM.Style.unsafeAddProp("position-anchor", anchorName)}>
         <nav>
           <ul>
             {menuItems
             ->Array.mapWithIndex((item, idx) =>
               <li key={idx->Int.toString}>
                 <button
-                  disabled={item.disabled->Option.getOr(false)}
-                  onClick=item.onClick
-                  type_="button">
+                  disabled={item.disabled->Option.getOr(false)} onClick=item.onClick type_="button">
                   {React.string(item.label)}
                 </button>
               </li>

diff --git a/src/pages/PlaceSetting/TapsSetting.module.css b/src/pages/PlaceSetting/TapsSetting.module.css
@@ -11,7 +11,7 @@
   border-block-start: var(--border-size-2) solid var(--surface-1);
 }
 
-.list > li > div {
+.list > li > div:first-child {
   order: 1;
   margin-inline-end: auto;
 }

diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -40,8 +40,11 @@ dialog:modal {
 
 dl,
 dl dd,
-p {
+p,
+[popover] {
   margin: 0;
+  padding: 0;
+  border: 0;
 }
 
 fieldset:where(.reset) {