@blakesteve/roster 5.19.0 → 5.19.1

package/README.md

@@ -1502,6 +1502,23 @@ and checks it's visible (Playwright's `toBeVisible`, say) finds it open. In
 read as hidden; `Sheet`'s was too, and is fixed the same way. Nothing on
 screen moves, and a click outside the panel still closes it.
 
+**One opened as another leaves.** A `Dialog` or `Sheet` opened while another
+is still leaving holds the page from its first frame, so the other one's focus
+restore can't move focus out onto the page. An opener in the toast host is the
+exception: the host stays live, so one opened from a toast still gives focus
+back to it as it leaves, out of whatever opened in its place. In 5.19.0 and
+before, a `Sheet` that mounted already
+open, as one whose code loads on its first open does, never held the part of
+the page it was written in. That part stayed live behind it, and a sheet or
+dialog leaving at the same time restored focus onto it as its leave ended. A
+`Sheet` now opens a render later, before anything is painted, as `Dialog`
+already did, so on that first open it also slides in rather than appearing in
+place. Nothing to change in your code.
+
+Such a sheet may also have no opener to give focus back to: Headless UI keeps
+the record of what was pressed only once its code has loaded, after the press
+that opened the sheet. Remember the press and pass it as `returnFocus`.
+
 **Full screen.** `layout="fullscreen"` makes a bare dialog over the whole
 viewport, for a photo viewer or a full-screen card: no box, no padding, and no
 header or close button of Roster's. Everything inside is yours, a close
@@ -2909,6 +2926,46 @@ output is hidden there), and no `meta.json` is written. A test that passed only
 on its retry is named in the output too, and `meta.json` records how many there
 were, as `passedOnRetry`.
 
+## Discord notices
+
+`.github/workflows/discord.yml` posts to Roster's channel on Blake's Discord,
+through the webhook in the `DISCORD_WEBHOOK_URL` repository secret. It's a
+separate workflow, so nothing it does can fail or delay CI or a deploy. Without
+the secret, as in a fork, it skips cleanly and posts nothing.
+
+| Event | Posts when | Which copy of the file runs |
+| --- | --- | --- |
+| Storybook deployed, or its deploy failed | `deployment_status`, environment `Production`, state `success`, `failure` or `error` | The one in the deployed commit |
+| A release | `release: published` | The one in the tagged commit |
+| CI red | `workflow_run` on `CI`, `failure`, on `main`, from a push | The one on `main` |
+
+A deploy here is Storybook, at `https://roster-tan.vercel.app`, so the post
+says Storybook was deployed. The package itself ships on `npm publish`, which
+isn't a GitHub event, so nothing posts it; the GitHub release made beside it
+does. Previews and pull requests don't post, and neither does a fork's: CI on a
+pull request isn't a push. Nor does a CI run that ends canceled, which is how a
+job stopped at its own time limit ends it. The Storybook job's steps have their
+own limits, so a stalled step there fails and posts, but Unit Tests and Build
+have only the job's, so a hung step in either is silent.
+
+Each post has the version, the commit and a link. With `DETAILS: "on"`, a
+deploy lists the PRs merged since the last good deploy (not the `release/`
+PRs), a release carries its notes without the authors and links, and red CI
+names each failed job and its failed step, such as "Storybook Tests: Run
+Storybook tests with real input". All of that text is escaped, so a title can't
+ping anyone or draw a link.
+
+`src/discord-workflow.test.ts` runs the job's real condition and its real
+script, with stand-ins for `curl` and `gh`, in the `unit` project. To send each
+message as a test, from `main`:
+
+```bash
+gh workflow run discord.yml --repo blakesteve/roster -f message=deploy
+```
+
+The other three are `deploy-failed`, `release` and `ci-failed`. A `ci-failed`
+test names the steps of CI's latest failed push to `main`.
+
 ## Contributing
 
 Pull requests are welcome. Please:

package/dist/components/organisms/Sheet/Sheet.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),O=require("react"),tt=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),b=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),et=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),f=require("../../../lib/utils.cjs"),rt=require("../../../lib/labels.cjs"),st=require("../../../internal/popup.cjs"),nt=require("../../../internal/motion.cjs"),ot=require("../../../internal/page-inert.cjs"),at=require("../../../internal/leave-watchdog.cjs"),S=require("./sheet-drag.cjs"),it=require("./sheet-title.cjs"),ct=require("../../../internal/key-focus.cjs");function ut(r){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const u in r)if(u!=="default"){const l=Object.getOwnPropertyDescriptor(r,u);Object.defineProperty(c,u,l.get?l:{enumerable:!0,get:()=>r[u]})}}return c.default=r,Object.freeze(c)}const n=ut(O),lt={close:"Close"},dt="rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full",ft="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",pt="rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0",ht="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",z={slide:200,fade:150},gt=["input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])","textarea","select","[contenteditable]:not([contenteditable=false])"].join(",");function mt(r){return r?"current"in r?r.current:r:null}function yt({target:r}){const c=n.useRef(r),u=n.useRef(!1);return n.useEffect(()=>{c.current=r}),n.useEffect(()=>(u.current=!1,()=>{u.current=!0,queueMicrotask(()=>{if(!u.current)return;const l=mt(c.current);l?.isConnected&&l.focus()})}),[]),null}function bt(){return s.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:s.jsx("path",{d:"M5 5l10 10M15 5L5 15"})})}const xt=({isOpen:r,onClose:c,onAfterClose:u,title:l,hideTitle:B=!1,description:D,actions:N,maxWidth:x=560,initialFocus:v,returnFocus:Y,busy:p=!1,dragToDismiss:j=!0,contentKey:h,labels:V,className:K,children:U})=>{ct.useKeyFocus();const X=rt.withLabels(lt,V),{ref:R,inDarkScope:$}=st.useDarkScope(),E=nt.useReducedMotion(),q=n.useRef(null),i=n.useRef(null),C=at.useLeaveWatchdog(q,i,r,E?z.fade:z.slide,u);n.useLayoutEffect(()=>{if(r)return ot.lockPage(R.current)},[r,R]);const I=n.useRef(null),w=n.useRef(null),k=n.useRef(null),L=n.useRef(null),P=n.useId(),g=it.titleSignature(l),M=n.useRef({signature:g,contentKey:h,open:r,busy:p});n.useEffect(()=>{const t=M.current;if(M.current={signature:g,contentKey:h,open:r,busy:p},!t.open||!r)return;const e=t.contentKey!==h,o=t.signature!==g&&!t.busy;!e&&!o||(w.current?.focus(),L.current&&(L.current.scrollTop=0))},[g,h,r,p]),n.useEffect(()=>{if(!r)return;const t=requestAnimationFrame(()=>{const e=i.current,o=document.activeElement;!e||o&&e.contains(o)||(v?.current??k.current)?.focus()});return()=>cancelAnimationFrame(t)},[r,v]);const[A,F]=n.useState(null);n.useEffect(()=>{if(!r)return;const t=window.visualViewport;if(!t)return;const e=()=>{const o=document.activeElement,d=!!o&&!!i.current?.contains(o)&&o.matches(gt);F(d?Math.round(t.height):null)};return t.addEventListener("resize",e),document.addEventListener("focusin",e),document.addEventListener("focusout",e),()=>{t.removeEventListener("resize",e),document.removeEventListener("focusin",e),document.removeEventListener("focusout",e),F(null)}},[r]);const a=n.useRef(null),m=n.useRef(!1),_=n.useRef(r);n.useEffect(()=>{_.current=r},[r]);const y=t=>{i.current?.style.setProperty("--rst-sheet-drag",`${t}px`)},T=t=>{const e=i.current;a.current=null,e&&(delete e.dataset.dragging,t==="close"?(c(),requestAnimationFrame(()=>{_.current&&!a.current&&y(0)})):y(0))};n.useEffect(()=>{!r&&a.current&&(a.current=null,i.current&&delete i.current.dataset.dragging),r&&!a.current&&y(0)},[r]);const G=t=>{a.current||(m.current=!1,!(!j||!r)&&(t.pointerType==="mouse"&&(t.button!==0||!I.current?.contains(t.target))||(a.current={pointerId:t.pointerId,x0:t.clientX,y0:t.clientY,dy:0,phase:"pending",samples:[{t:t.timeStamp,y:t.clientY}]})))},W=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;const o=t.clientX-e.x0,d=t.clientY-e.y0;if(e.phase==="pending"){if(!S.exceedsSheetTapSlop(o,d))return;if(Math.abs(o)>Math.abs(d)){e.phase="ignored";return}e.phase="dragging",m.current=!0;try{t.currentTarget.setPointerCapture(t.pointerId)}catch{}i.current&&(i.current.dataset.dragging="")}e.phase==="dragging"&&(e.dy=d,e.samples.push({t:t.timeStamp,y:t.clientY}),e.samples.length>32&&e.samples.shift(),y(Math.max(0,d)))},H=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;if(e.phase!=="dragging"){a.current=null;return}e.samples.push({t:t.timeStamp,y:t.clientY});const o=t.clientY-e.y0,d=i.current?.getBoundingClientRect().height??0;T(S.sheetDragOutcome(o,d,S.sheetReleaseVelocity(e.samples)))},J=t=>{const e=a.current;!e||t.pointerId!==e.pointerId||(e.phase==="dragging"?T("stay"):a.current=null)},Q=t=>{!m.current||t.detail===0||(m.current=!1,t.preventDefault(),t.stopPropagation())},Z={"--rst-sheet-max-width":typeof x=="number"?`${x}px`:x,...A!==null&&{"--rst-sheet-keyboard-cap":`${A}px`}};return s.jsxs(s.Fragment,{children:[s.jsx("span",{ref:R,hidden:!0}),s.jsxs(b.Dialog,{ref:q,open:r,as:"div",onClose:c,initialFocus:v??k,className:f.cn("rst:font-ui rst:fixed rst:inset-0 rst:z-50 rst:focus:outline-hidden",$&&"dark"),children:[s.jsx(b.DialogBackdrop,{transition:!0,"data-testid":"sheet-backdrop",className:f.cn("rst:fixed rst:inset-0 rst:bg-[var(--roster-backdrop,var(--roster-sheet-backdrop))]",E?ht:pt)}),s.jsx("div",{className:"rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center",children:s.jsx(et.TransitionChild,{afterLeave:C.afterLeave,children:s.jsxs(b.DialogPanel,{ref:i,style:Z,"data-testid":"sheet-panel",className:f.cn("rst:relative rst:flex rst:max-h-[min(92dvh,var(--rst-sheet-keyboard-cap,92dvh))] rst:w-full rst:flex-col","rst:md:max-w-(--rst-sheet-max-width)","rst:rounded-t-2xl rst:border rst:border-b-0 rst:elevation-overlay","rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]","rst:[--roster-ring-offset:var(--roster-popover-bg)]","rst:pb-[env(safe-area-inset-bottom)]","rst:translate-y-[var(--rst-sheet-drag,0px)]",E?ft:dt,"rst:data-dragging:transition-none",K),children:[s.jsxs("div",{"data-testid":"sheet-drag-zone",className:f.cn("rst:shrink-0",j&&"rst:touch-none"),onPointerDown:G,onPointerMove:W,onPointerUp:H,onPointerCancel:J,onClickCapture:Q,children:[s.jsx("div",{ref:I,"aria-hidden":"true","data-testid":"sheet-handle",className:f.cn("rst:flex rst:h-11 rst:items-start rst:justify-center rst:pt-2",j&&"rst:cursor-grab rst:active:cursor-grabbing"),children:s.jsx("span",{className:"rst:h-1 rst:w-10 rst:rounded-full rst:bg-current rst:opacity-30"})}),s.jsxs("div",{className:"rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4",children:[s.jsxs("div",{className:"rst:min-w-0 rst:flex-1 rst:pt-2",children:[s.jsx(b.DialogTitle,{as:"h2",id:P,ref:w,tabIndex:-1,className:f.cn("rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",B&&"rst:sr-only"),children:l}),D&&s.jsx(tt.Description,{as:"p",className:"rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",children:D})]}),N&&s.jsx("div",{className:"rst:flex rst:h-11 rst:shrink-0 rst:items-center rst:gap-1",children:N}),s.jsx("button",{ref:k,type:"button",onClick:c,"aria-label":X.close,className:"rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:s.jsx(bt,{})})]})]}),s.jsx("div",{ref:L,role:"region","aria-labelledby":P,tabIndex:0,"data-testid":"sheet-content","aria-busy":p||void 0,className:"rst:min-h-0 rst:flex-1 rst:overflow-y-auto rst:overscroll-contain rst:px-5 rst:pb-4 rst:focus:outline-hidden rst:ring-inset rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:U}),s.jsx(yt,{target:Y})]})})})]},C.key)]})};exports.Sheet=xt;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),re=require("react"),se=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),x=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),ne=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),p=require("../../../lib/utils.cjs"),oe=require("../../../lib/labels.cjs"),ie=require("../../../internal/popup.cjs"),ae=require("../../../internal/motion.cjs"),ce=require("../../../internal/page-inert.cjs"),ue=require("../../../internal/leave-watchdog.cjs"),D=require("./sheet-drag.cjs"),le=require("./sheet-title.cjs"),de=require("../../../internal/key-focus.cjs");function fe(o){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const l in o)if(l!=="default"){const d=Object.getOwnPropertyDescriptor(o,l);Object.defineProperty(u,l,d.get?d:{enumerable:!0,get:()=>o[l]})}}return u.default=o,Object.freeze(u)}const r=fe(re),pe={close:"Close"},he="rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full",ge="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",me="rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0",ye="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",z={slide:200,fade:150},be=["input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])","textarea","select","[contenteditable]:not([contenteditable=false])"].join(",");function xe(o){return o?"current"in o?o.current:o:null}function ve({target:o}){const u=r.useRef(o),l=r.useRef(!1);return r.useEffect(()=>{u.current=o}),r.useEffect(()=>(l.current=!1,()=>{l.current=!0,queueMicrotask(()=>{if(!l.current)return;const d=xe(u.current);d?.isConnected&&d.focus()})}),[]),null}function je(){return s.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:s.jsx("path",{d:"M5 5l10 10M15 5L5 15"})})}const Ee=({isOpen:o,onClose:u,onAfterClose:l,title:d,hideTitle:B=!1,description:N,actions:q,maxWidth:v=560,initialFocus:j,returnFocus:Y,busy:h=!1,dragToDismiss:E=!0,contentKey:g,labels:V,className:K,children:U})=>{de.useKeyFocus();const X=oe.withLabels(pe,V),{ref:R,inDarkScope:$}=ie.useDarkScope(),k=ae.useReducedMotion(),[G,W]=r.useState(!1);r.useLayoutEffect(()=>{W(!0)},[]);const n=o&&G,C=r.useRef(null),c=r.useRef(null),I=ue.useLeaveWatchdog(C,c,n,k?z.fade:z.slide,l);r.useLayoutEffect(()=>{if(n)return ce.lockPage(R.current)},[n,R]);const w=r.useRef(null),P=r.useRef(null),L=r.useRef(null),S=r.useRef(null),M=r.useId(),m=le.titleSignature(d),O=r.useRef({signature:m,contentKey:g,open:n,busy:h});r.useEffect(()=>{const e=O.current;if(O.current={signature:m,contentKey:g,open:n,busy:h},!e.open||!n)return;const t=e.contentKey!==g,i=e.signature!==m&&!e.busy;!t&&!i||(P.current?.focus(),S.current&&(S.current.scrollTop=0))},[m,g,n,h]),r.useEffect(()=>{if(!n)return;const e=requestAnimationFrame(()=>{const t=c.current,i=document.activeElement;!t||i&&t.contains(i)||(j?.current??L.current)?.focus()});return()=>cancelAnimationFrame(e)},[n,j]);const[A,F]=r.useState(null);r.useEffect(()=>{if(!n)return;const e=window.visualViewport;if(!e)return;const t=()=>{const i=document.activeElement,f=!!i&&!!c.current?.contains(i)&&i.matches(be);F(f?Math.round(e.height):null)};return e.addEventListener("resize",t),document.addEventListener("focusin",t),document.addEventListener("focusout",t),()=>{e.removeEventListener("resize",t),document.removeEventListener("focusin",t),document.removeEventListener("focusout",t),F(null)}},[n]);const a=r.useRef(null),y=r.useRef(!1),_=r.useRef(n);r.useEffect(()=>{_.current=n},[n]);const b=e=>{c.current?.style.setProperty("--rst-sheet-drag",`${e}px`)},T=e=>{const t=c.current;a.current=null,t&&(delete t.dataset.dragging,e==="close"?(u(),requestAnimationFrame(()=>{_.current&&!a.current&&b(0)})):b(0))};r.useEffect(()=>{!n&&a.current&&(a.current=null,c.current&&delete c.current.dataset.dragging),n&&!a.current&&b(0)},[n]);const H=e=>{a.current||(y.current=!1,!(!E||!n)&&(e.pointerType==="mouse"&&(e.button!==0||!w.current?.contains(e.target))||(a.current={pointerId:e.pointerId,x0:e.clientX,y0:e.clientY,dy:0,phase:"pending",samples:[{t:e.timeStamp,y:e.clientY}]})))},J=e=>{const t=a.current;if(!t||e.pointerId!==t.pointerId)return;const i=e.clientX-t.x0,f=e.clientY-t.y0;if(t.phase==="pending"){if(!D.exceedsSheetTapSlop(i,f))return;if(Math.abs(i)>Math.abs(f)){t.phase="ignored";return}t.phase="dragging",y.current=!0;try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}c.current&&(c.current.dataset.dragging="")}t.phase==="dragging"&&(t.dy=f,t.samples.push({t:e.timeStamp,y:e.clientY}),t.samples.length>32&&t.samples.shift(),b(Math.max(0,f)))},Q=e=>{const t=a.current;if(!t||e.pointerId!==t.pointerId)return;if(t.phase!=="dragging"){a.current=null;return}t.samples.push({t:e.timeStamp,y:e.clientY});const i=e.clientY-t.y0,f=c.current?.getBoundingClientRect().height??0;T(D.sheetDragOutcome(i,f,D.sheetReleaseVelocity(t.samples)))},Z=e=>{const t=a.current;!t||e.pointerId!==t.pointerId||(t.phase==="dragging"?T("stay"):a.current=null)},ee=e=>{!y.current||e.detail===0||(y.current=!1,e.preventDefault(),e.stopPropagation())},te={"--rst-sheet-max-width":typeof v=="number"?`${v}px`:v,...A!==null&&{"--rst-sheet-keyboard-cap":`${A}px`}};return s.jsxs(s.Fragment,{children:[s.jsx("span",{ref:R,hidden:!0}),s.jsxs(x.Dialog,{ref:C,open:n,as:"div",onClose:u,initialFocus:j??L,className:p.cn("rst:font-ui rst:fixed rst:inset-0 rst:z-50 rst:focus:outline-hidden",$&&"dark"),children:[s.jsx(x.DialogBackdrop,{transition:!0,"data-testid":"sheet-backdrop",className:p.cn("rst:fixed rst:inset-0 rst:bg-[var(--roster-backdrop,var(--roster-sheet-backdrop))]",k?ye:me)}),s.jsx("div",{className:"rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center",children:s.jsx(ne.TransitionChild,{afterLeave:I.afterLeave,children:s.jsxs(x.DialogPanel,{ref:c,style:te,"data-testid":"sheet-panel",className:p.cn("rst:relative rst:flex rst:max-h-[min(92dvh,var(--rst-sheet-keyboard-cap,92dvh))] rst:w-full rst:flex-col","rst:md:max-w-(--rst-sheet-max-width)","rst:rounded-t-2xl rst:border rst:border-b-0 rst:elevation-overlay","rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]","rst:[--roster-ring-offset:var(--roster-popover-bg)]","rst:pb-[env(safe-area-inset-bottom)]","rst:translate-y-[var(--rst-sheet-drag,0px)]",k?ge:he,"rst:data-dragging:transition-none",K),children:[s.jsxs("div",{"data-testid":"sheet-drag-zone",className:p.cn("rst:shrink-0",E&&"rst:touch-none"),onPointerDown:H,onPointerMove:J,onPointerUp:Q,onPointerCancel:Z,onClickCapture:ee,children:[s.jsx("div",{ref:w,"aria-hidden":"true","data-testid":"sheet-handle",className:p.cn("rst:flex rst:h-11 rst:items-start rst:justify-center rst:pt-2",E&&"rst:cursor-grab rst:active:cursor-grabbing"),children:s.jsx("span",{className:"rst:h-1 rst:w-10 rst:rounded-full rst:bg-current rst:opacity-30"})}),s.jsxs("div",{className:"rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4",children:[s.jsxs("div",{className:"rst:min-w-0 rst:flex-1 rst:pt-2",children:[s.jsx(x.DialogTitle,{as:"h2",id:M,ref:P,tabIndex:-1,className:p.cn("rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",B&&"rst:sr-only"),children:d}),N&&s.jsx(se.Description,{as:"p",className:"rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",children:N})]}),q&&s.jsx("div",{className:"rst:flex rst:h-11 rst:shrink-0 rst:items-center rst:gap-1",children:q}),s.jsx("button",{ref:L,type:"button",onClick:u,"aria-label":X.close,className:"rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:s.jsx(je,{})})]})]}),s.jsx("div",{ref:S,role:"region","aria-labelledby":M,tabIndex:0,"data-testid":"sheet-content","aria-busy":h||void 0,className:"rst:min-h-0 rst:flex-1 rst:overflow-y-auto rst:overscroll-contain rst:px-5 rst:pb-4 rst:focus:outline-hidden rst:ring-inset rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:U}),s.jsx(ve,{target:Y})]})})})]},I.key)]})};exports.Sheet=Ee;

package/dist/components/organisms/Sheet/Sheet.d.ts

@@ -46,7 +46,10 @@ export interface SheetProps {
      * Where focus goes on close, over whatever opened the sheet.
      *
      * A sheet opened on page load from a deep link has no opener, so without
-     * this focus falls to `<body>`.
+     * this focus falls to `<body>`. A sheet whose code loads on its first open
+     * can have none either: Headless UI, which keeps the record of what was
+     * pressed, starts keeping it only once its code has loaded, after the press
+     * that opened the sheet. Remember the press yourself and pass it here.
      */
     returnFocus?: React.RefObject<HTMLElement | null> | HTMLElement | null;
     /** Sets `aria-busy` on the content region while its content loads. */

package/dist/components/organisms/Sheet/Sheet.js

@@ -1,40 +1,40 @@
 "use client";
-import { jsxs as l, Fragment as Z, jsx as n } from "react/jsx-runtime";
-import * as s from "react";
-import { Description as O } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Dialog as tt, DialogBackdrop as et, DialogPanel as rt, DialogTitle as st } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
-import { TransitionChild as nt } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-import { cn as d } from "../../../lib/utils.js";
-import { withLabels as ot } from "../../../lib/labels.js";
-import { useDarkScope as at } from "../../../internal/popup.js";
-import { useReducedMotion as it } from "../../../internal/motion.js";
-import { lockPage as ct } from "../../../internal/page-inert.js";
-import { useLeaveWatchdog as ut } from "../../../internal/leave-watchdog.js";
-import { sheetDragOutcome as lt, sheetReleaseVelocity as dt, exceedsSheetTapSlop as ft } from "./sheet-drag.js";
-import { titleSignature as pt } from "./sheet-title.js";
-import { useKeyFocus as mt } from "../../../internal/key-focus.js";
-const ht = { close: "Close" }, gt = "rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full", yt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", bt = "rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0", vt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", Y = { slide: 200, fade: 150 }, xt = [
+import { jsxs as d, Fragment as et, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
+import { Description as rt } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Dialog as st, DialogBackdrop as nt, DialogPanel as ot, DialogTitle as at } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
+import { TransitionChild as it } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { cn as f } from "../../../lib/utils.js";
+import { withLabels as ct } from "../../../lib/labels.js";
+import { useDarkScope as ut } from "../../../internal/popup.js";
+import { useReducedMotion as lt } from "../../../internal/motion.js";
+import { lockPage as dt } from "../../../internal/page-inert.js";
+import { useLeaveWatchdog as ft } from "../../../internal/leave-watchdog.js";
+import { sheetDragOutcome as pt, sheetReleaseVelocity as mt, exceedsSheetTapSlop as ht } from "./sheet-drag.js";
+import { titleSignature as gt } from "./sheet-title.js";
+import { useKeyFocus as yt } from "../../../internal/key-focus.js";
+const bt = { close: "Close" }, vt = "rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full", xt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", Et = "rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0", Rt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", Y = { slide: 200, fade: 150 }, kt = [
   "input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])",
   "textarea",
   "select",
   "[contenteditable]:not([contenteditable=false])"
 ].join(",");
-function Et(r) {
-  return r ? "current" in r ? r.current : r : null;
+function Lt(c) {
+  return c ? "current" in c ? c.current : c : null;
 }
-function Rt({ target: r }) {
-  const u = s.useRef(r), f = s.useRef(!1);
-  return s.useEffect(() => {
-    u.current = r;
-  }), s.useEffect(() => (f.current = !1, () => {
-    f.current = !0, queueMicrotask(() => {
-      if (!f.current) return;
-      const p = Et(u.current);
-      p?.isConnected && p.focus();
+function Ct({ target: c }) {
+  const l = r.useRef(c), p = r.useRef(!1);
+  return r.useEffect(() => {
+    l.current = c;
+  }), r.useEffect(() => (p.current = !1, () => {
+    p.current = !0, queueMicrotask(() => {
+      if (!p.current) return;
+      const m = Lt(l.current);
+      m?.isConnected && m.focus();
     });
   }), []), null;
 }
-function kt() {
+function Nt() {
   return /* @__PURE__ */ n(
     "svg",
     {
@@ -50,74 +50,78 @@ function kt() {
     }
   );
 }
-const Bt = ({
-  isOpen: r,
-  onClose: u,
-  onAfterClose: f,
-  title: p,
+const _t = ({
+  isOpen: c,
+  onClose: l,
+  onAfterClose: p,
+  title: m,
   hideTitle: _ = !1,
-  description: N,
+  description: S,
   actions: D,
-  maxWidth: v = 560,
-  initialFocus: x,
+  maxWidth: x = 560,
+  initialFocus: E,
   returnFocus: T,
-  busy: m = !1,
-  dragToDismiss: E = !0,
-  contentKey: h,
+  busy: h = !1,
+  dragToDismiss: R = !0,
+  contentKey: g,
   labels: q,
   className: V,
   children: $
 }) => {
-  mt();
-  const K = ot(ht, q), { ref: R, inDarkScope: U } = at(), k = it(), I = s.useRef(null), i = s.useRef(null), S = ut(I, i, r, k ? Y.fade : Y.slide, f);
-  s.useLayoutEffect(() => {
-    if (r)
-      return ct(R.current);
-  }, [r, R]);
-  const w = s.useRef(null), P = s.useRef(null), L = s.useRef(null), C = s.useRef(null), M = s.useId(), g = pt(p), A = s.useRef({ signature: g, contentKey: h, open: r, busy: m });
-  s.useEffect(() => {
-    const t = A.current;
-    if (A.current = { signature: g, contentKey: h, open: r, busy: m }, !t.open || !r) return;
-    const e = t.contentKey !== h, o = t.signature !== g && !t.busy;
-    !e && !o || (P.current?.focus(), C.current && (C.current.scrollTop = 0));
-  }, [g, h, r, m]), s.useEffect(() => {
-    if (!r) return;
+  yt();
+  const K = ct(bt, q), { ref: k, inDarkScope: U } = ut(), L = lt(), [X, G] = r.useState(!1);
+  r.useLayoutEffect(() => {
+    G(!0);
+  }, []);
+  const s = c && X, I = r.useRef(null), i = r.useRef(null), w = ft(I, i, s, L ? Y.fade : Y.slide, p);
+  r.useLayoutEffect(() => {
+    if (s)
+      return dt(k.current);
+  }, [s, k]);
+  const M = r.useRef(null), P = r.useRef(null), C = r.useRef(null), N = r.useRef(null), A = r.useId(), y = gt(m), F = r.useRef({ signature: y, contentKey: g, open: s, busy: h });
+  r.useEffect(() => {
+    const t = F.current;
+    if (F.current = { signature: y, contentKey: g, open: s, busy: h }, !t.open || !s) return;
+    const e = t.contentKey !== g, o = t.signature !== y && !t.busy;
+    !e && !o || (P.current?.focus(), N.current && (N.current.scrollTop = 0));
+  }, [y, g, s, h]), r.useEffect(() => {
+    if (!s) return;
     const t = requestAnimationFrame(() => {
       const e = i.current, o = document.activeElement;
-      !e || o && e.contains(o) || (x?.current ?? L.current)?.focus();
+      !e || o && e.contains(o) || (E?.current ?? C.current)?.focus();
     });
     return () => cancelAnimationFrame(t);
-  }, [r, x]);
-  const [F, j] = s.useState(null);
-  s.useEffect(() => {
-    if (!r) return;
+  }, [s, E]);
+  const [O, j] = r.useState(null);
+  r.useEffect(() => {
+    if (!s) return;
     const t = window.visualViewport;
     if (!t) return;
     const e = () => {
-      const o = document.activeElement, c = !!o && !!i.current?.contains(o) && o.matches(xt);
-      j(c ? Math.round(t.height) : null);
+      const o = document.activeElement, u = !!o && !!i.current?.contains(o) && o.matches(kt);
+      j(u ? Math.round(t.height) : null);
     };
     return t.addEventListener("resize", e), document.addEventListener("focusin", e), document.addEventListener("focusout", e), () => {
       t.removeEventListener("resize", e), document.removeEventListener("focusin", e), document.removeEventListener("focusout", e), j(null);
     };
-  }, [r]);
-  const a = s.useRef(null), y = s.useRef(!1), z = s.useRef(r);
-  s.useEffect(() => {
-    z.current = r;
-  }, [r]);
-  const b = (t) => {
+  }, [s]);
+  const a = r.useRef(null), b = r.useRef(!1), z = r.useRef(s);
+  r.useEffect(() => {
+    z.current = s;
+  }, [s]);
+  const v = (t) => {
     i.current?.style.setProperty("--rst-sheet-drag", `${t}px`);
   }, B = (t) => {
     const e = i.current;
-    a.current = null, e && (delete e.dataset.dragging, t === "close" ? (u(), requestAnimationFrame(() => {
-      z.current && !a.current && b(0);
-    })) : b(0));
+    a.current = null, e && (delete e.dataset.dragging, t === "close" ? (l(), requestAnimationFrame(() => {
+      z.current && !a.current && v(0);
+    })) : v(0));
   };
-  s.useEffect(() => {
-    !r && a.current && (a.current = null, i.current && delete i.current.dataset.dragging), r && !a.current && b(0);
-  }, [r]);
-  const X = (t) => {
-    a.current || (y.current = !1, !(!E || !r) && (t.pointerType === "mouse" && (t.button !== 0 || !w.current?.contains(t.target)) || (a.current = {
+  r.useEffect(() => {
+    !s && a.current && (a.current = null, i.current && delete i.current.dataset.dragging), s && !a.current && v(0);
+  }, [s]);
+  const Q = (t) => {
+    a.current || (b.current = !1, !(!R || !s) && (t.pointerType === "mouse" && (t.button !== 0 || !M.current?.contains(t.target)) || (a.current = {
       pointerId: t.pointerId,
       x0: t.clientX,
       y0: t.clientY,
@@ -125,25 +129,25 @@ const Bt = ({
       phase: "pending",
       samples: [{ t: t.timeStamp, y: t.clientY }]
     })));
-  }, G = (t) => {
+  }, H = (t) => {
     const e = a.current;
     if (!e || t.pointerId !== e.pointerId) return;
-    const o = t.clientX - e.x0, c = t.clientY - e.y0;
+    const o = t.clientX - e.x0, u = t.clientY - e.y0;
     if (e.phase === "pending") {
-      if (!ft(o, c)) return;
-      if (Math.abs(o) > Math.abs(c)) {
+      if (!ht(o, u)) return;
+      if (Math.abs(o) > Math.abs(u)) {
         e.phase = "ignored";
         return;
       }
-      e.phase = "dragging", y.current = !0;
+      e.phase = "dragging", b.current = !0;
       try {
         t.currentTarget.setPointerCapture(t.pointerId);
       } catch {
       }
       i.current && (i.current.dataset.dragging = "");
     }
-    e.phase === "dragging" && (e.dy = c, e.samples.push({ t: t.timeStamp, y: t.clientY }), e.samples.length > 32 && e.samples.shift(), b(Math.max(0, c)));
-  }, Q = (t) => {
+    e.phase === "dragging" && (e.dy = u, e.samples.push({ t: t.timeStamp, y: t.clientY }), e.samples.length > 32 && e.samples.shift(), v(Math.max(0, u)));
+  }, J = (t) => {
     const e = a.current;
     if (!e || t.pointerId !== e.pointerId) return;
     if (e.phase !== "dragging") {
@@ -151,50 +155,50 @@ const Bt = ({
       return;
     }
     e.samples.push({ t: t.timeStamp, y: t.clientY });
-    const o = t.clientY - e.y0, c = i.current?.getBoundingClientRect().height ?? 0;
-    B(lt(o, c, dt(e.samples)));
-  }, H = (t) => {
+    const o = t.clientY - e.y0, u = i.current?.getBoundingClientRect().height ?? 0;
+    B(pt(o, u, mt(e.samples)));
+  }, W = (t) => {
     const e = a.current;
     !e || t.pointerId !== e.pointerId || (e.phase === "dragging" ? B("stay") : a.current = null);
-  }, J = (t) => {
-    !y.current || t.detail === 0 || (y.current = !1, t.preventDefault(), t.stopPropagation());
-  }, W = {
-    "--rst-sheet-max-width": typeof v == "number" ? `${v}px` : v,
-    ...F !== null && { "--rst-sheet-keyboard-cap": `${F}px` }
+  }, Z = (t) => {
+    !b.current || t.detail === 0 || (b.current = !1, t.preventDefault(), t.stopPropagation());
+  }, tt = {
+    "--rst-sheet-max-width": typeof x == "number" ? `${x}px` : x,
+    ...O !== null && { "--rst-sheet-keyboard-cap": `${O}px` }
   };
-  return /* @__PURE__ */ l(Z, { children: [
-    /* @__PURE__ */ n("span", { ref: R, hidden: !0 }),
-    /* @__PURE__ */ l(
-      tt,
+  return /* @__PURE__ */ d(et, { children: [
+    /* @__PURE__ */ n("span", { ref: k, hidden: !0 }),
+    /* @__PURE__ */ d(
+      st,
       {
         ref: I,
-        open: r,
+        open: s,
         as: "div",
-        onClose: u,
-        initialFocus: x ?? L,
-        className: d(
+        onClose: l,
+        initialFocus: E ?? C,
+        className: f(
           "rst:font-ui rst:fixed rst:inset-0 rst:z-50 rst:focus:outline-hidden",
           U && "dark"
         ),
         children: [
           /* @__PURE__ */ n(
-            et,
+            nt,
             {
               transition: !0,
               "data-testid": "sheet-backdrop",
-              className: d(
+              className: f(
                 "rst:fixed rst:inset-0 rst:bg-[var(--roster-backdrop,var(--roster-sheet-backdrop))]",
-                k ? vt : bt
+                L ? Rt : Et
               )
             }
           ),
-          /* @__PURE__ */ n("div", { className: "rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center", children: /* @__PURE__ */ n(nt, { afterLeave: S.afterLeave, children: /* @__PURE__ */ l(
-            rt,
+          /* @__PURE__ */ n("div", { className: "rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center", children: /* @__PURE__ */ n(it, { afterLeave: w.afterLeave, children: /* @__PURE__ */ d(
+            ot,
             {
               ref: i,
-              style: W,
+              style: tt,
               "data-testid": "sheet-panel",
-              className: d(
+              className: f(
                 /* 92dvh, or the visual viewport while the keyboard is up,
                    whichever is shorter. */
                 "rst:relative rst:flex rst:max-h-[min(92dvh,var(--rst-sheet-keyboard-cap,92dvh))] rst:w-full rst:flex-col",
@@ -206,62 +210,62 @@ const Bt = ({
                 "rst:[--roster-ring-offset:var(--roster-popover-bg)]",
                 "rst:pb-[env(safe-area-inset-bottom)]",
                 "rst:translate-y-[var(--rst-sheet-drag,0px)]",
-                k ? yt : gt,
+                L ? xt : vt,
                 "rst:data-dragging:transition-none",
                 V
               ),
               children: [
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ d(
                   "div",
                   {
                     "data-testid": "sheet-drag-zone",
-                    className: d("rst:shrink-0", E && "rst:touch-none"),
-                    onPointerDown: X,
-                    onPointerMove: G,
-                    onPointerUp: Q,
-                    onPointerCancel: H,
-                    onClickCapture: J,
+                    className: f("rst:shrink-0", R && "rst:touch-none"),
+                    onPointerDown: Q,
+                    onPointerMove: H,
+                    onPointerUp: J,
+                    onPointerCancel: W,
+                    onClickCapture: Z,
                     children: [
                       /* @__PURE__ */ n(
                         "div",
                         {
-                          ref: w,
+                          ref: M,
                           "aria-hidden": "true",
                           "data-testid": "sheet-handle",
-                          className: d(
+                          className: f(
                             /* The grip sits near the top edge, where a sheet's grabber
                                is expected, inside a 44px strip. The header below pulls
                                up over the strip's lower part, so a touch there drags
                                too (the header is a drag zone) and a mouse drags from
                                the 32px above it, the full width of the sheet. */
                             "rst:flex rst:h-11 rst:items-start rst:justify-center rst:pt-2",
-                            E && "rst:cursor-grab rst:active:cursor-grabbing"
+                            R && "rst:cursor-grab rst:active:cursor-grabbing"
                           ),
                           children: /* @__PURE__ */ n("span", { className: "rst:h-1 rst:w-10 rst:rounded-full rst:bg-current rst:opacity-30" })
                         }
                       ),
-                      /* @__PURE__ */ l("div", { className: "rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4", children: [
-                        /* @__PURE__ */ l("div", { className: "rst:min-w-0 rst:flex-1 rst:pt-2", children: [
+                      /* @__PURE__ */ d("div", { className: "rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4", children: [
+                        /* @__PURE__ */ d("div", { className: "rst:min-w-0 rst:flex-1 rst:pt-2", children: [
                           /* @__PURE__ */ n(
-                            st,
+                            at,
                             {
                               as: "h2",
-                              id: M,
+                              id: A,
                               ref: P,
                               tabIndex: -1,
-                              className: d(
+                              className: f(
                                 "rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",
                                 _ && "rst:sr-only"
                               ),
-                              children: p
+                              children: m
                             }
                           ),
-                          N && /* @__PURE__ */ n(
-                            O,
+                          S && /* @__PURE__ */ n(
+                            rt,
                             {
                               as: "p",
                               className: "rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",
-                              children: N
+                              children: S
                             }
                           )
                         ] }),
@@ -271,12 +275,12 @@ const Bt = ({
                         /* @__PURE__ */ n(
                           "button",
                           {
-                            ref: L,
+                            ref: C,
                             type: "button",
-                            onClick: u,
+                            onClick: l,
                             "aria-label": K.close,
                             className: "rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",
-                            children: /* @__PURE__ */ n(kt, {})
+                            children: /* @__PURE__ */ n(Nt, {})
                           }
                         )
                       ] })
@@ -286,26 +290,26 @@ const Bt = ({
                 /* @__PURE__ */ n(
                   "div",
                   {
-                    ref: C,
+                    ref: N,
                     role: "region",
-                    "aria-labelledby": M,
+                    "aria-labelledby": A,
                     tabIndex: 0,
                     "data-testid": "sheet-content",
-                    "aria-busy": m || void 0,
+                    "aria-busy": h || void 0,
                     className: "rst:min-h-0 rst:flex-1 rst:overflow-y-auto rst:overscroll-contain rst:px-5 rst:pb-4 rst:focus:outline-hidden rst:ring-inset rst:focus-visible:ring-2 rst:focus-visible:ring-ring",
                     children: $
                   }
                 ),
-                /* @__PURE__ */ n(Rt, { target: T })
+                /* @__PURE__ */ n(Ct, { target: T })
               ]
             }
           ) }) })
         ]
       },
-      S.key
+      w.key
     )
   ] });
 };
 export {
-  Bt as Sheet
+  _t as Sheet
 };

package/dist/meta.json

@@ -1,6 +1,6 @@
 {
-  "version": "5.19.0",
-  "tests": 2745,
-  "testFiles": 221,
+  "version": "5.19.1",
+  "tests": 2886,
+  "testFiles": 223,
   "passedOnRetry": 0
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blakesteve/roster",
-  "version": "5.19.0",
+  "version": "5.19.1",
   "description": "A production-grade atomic component library: accessible, theme-aware, and documented in Storybook. React 19, TypeScript, Tailwind CSS v4.",
   "keywords": [
     "react",