@blakesteve/roster 5.11.0 → 5.12.0

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

@@ -11,28 +11,29 @@ import { useReducedMotion as nt } from "../../../internal/motion.js";
 import { lockPage as ot } from "../../../internal/page-inert.js";
 import { sheetDragOutcome as at, sheetReleaseVelocity as it, exceedsSheetTapSlop as ct } from "./sheet-drag.js";
 import { titleSignature as ut } from "./sheet-title.js";
-const 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", mt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", ht = [
+import { useKeyFocus as lt } from "../../../internal/key-focus.js";
+const dt = { close: "Close" }, ft = "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", pt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", mt = "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", 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 gt(r) {
+function yt(r) {
   return r ? "current" in r ? r.current : r : null;
 }
-function yt({ target: r }) {
+function bt({ 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 = gt(u.current);
+      const p = yt(u.current);
       p?.isConnected && p.focus();
     });
   }), []), null;
 }
-function bt() {
+function vt() {
   return /* @__PURE__ */ n(
     "svg",
     {
@@ -48,7 +49,7 @@ function bt() {
     }
   );
 }
-const St = ({
+const Mt = ({
   isOpen: r,
   onClose: u,
   onAfterClose: f,
@@ -66,7 +67,8 @@ const St = ({
   className: T,
   children: _
 }) => {
-  const q = rt(lt, Y), { ref: R, inDarkScope: $ } = st(), D = nt();
+  lt();
+  const q = rt(dt, Y), { ref: R, inDarkScope: $ } = st(), D = nt();
   s.useLayoutEffect(() => {
     if (r)
       return ot(R.current);
@@ -91,7 +93,7 @@ const St = ({
     const t = window.visualViewport;
     if (!t) return;
     const e = () => {
-      const o = document.activeElement, c = !!o && !!i.current?.contains(o) && o.matches(ht);
+      const o = document.activeElement, c = !!o && !!i.current?.contains(o) && o.matches(gt);
       A(c ? Math.round(t.height) : null);
     };
     return t.addEventListener("resize", e), document.addEventListener("focusin", e), document.addEventListener("focusout", e), () => {
@@ -113,7 +115,7 @@ const St = ({
   s.useEffect(() => {
     !r && a.current && (a.current = null, i.current && delete i.current.dataset.dragging), r && !a.current && b(0);
   }, [r]);
-  const U = (t) => {
+  const K = (t) => {
     a.current || (y.current = !1, !(!E || !r) && (t.pointerType === "mouse" && (t.button !== 0 || !I.current?.contains(t.target)) || (a.current = {
       pointerId: t.pointerId,
       x0: t.clientX,
@@ -122,7 +124,7 @@ const St = ({
       phase: "pending",
       samples: [{ t: t.timeStamp, y: t.clientY }]
     })));
-  }, V = (t) => {
+  }, U = (t) => {
     const e = a.current;
     if (!e || t.pointerId !== e.pointerId) return;
     const o = t.clientX - e.x0, c = t.clientY - e.y0;
@@ -140,7 +142,7 @@ const St = ({
       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)));
-  }, X = (t) => {
+  }, V = (t) => {
     const e = a.current;
     if (!e || t.pointerId !== e.pointerId) return;
     if (e.phase !== "dragging") {
@@ -150,10 +152,10 @@ const St = ({
     e.samples.push({ t: t.timeStamp, y: t.clientY });
     const o = t.clientY - e.y0, c = i.current?.getBoundingClientRect().height ?? 0;
     j(at(o, c, it(e.samples)));
-  }, G = (t) => {
+  }, X = (t) => {
     const e = a.current;
     !e || t.pointerId !== e.pointerId || (e.phase === "dragging" ? j("stay") : a.current = null);
-  }, K = (t) => {
+  }, G = (t) => {
     !y.current || t.detail === 0 || (y.current = !1, t.preventDefault(), t.stopPropagation());
   }, Q = {
     "--rst-sheet-max-width": typeof v == "number" ? `${v}px` : v,
@@ -180,7 +182,7 @@ const St = ({
               "data-testid": "sheet-backdrop",
               className: d(
                 "rst:fixed rst:inset-0 rst:bg-[var(--roster-backdrop,var(--roster-sheet-backdrop))]",
-                D ? mt : pt
+                D ? ht : mt
               )
             }
           ),
@@ -202,7 +204,7 @@ const St = ({
                 "rst:[--roster-ring-offset:var(--roster-popover-bg)]",
                 "rst:pb-[env(safe-area-inset-bottom)]",
                 "rst:translate-y-[var(--rst-sheet-drag,0px)]",
-                D ? ft : dt,
+                D ? pt : ft,
                 "rst:data-dragging:transition-none",
                 T
               ),
@@ -212,11 +214,11 @@ const St = ({
                   {
                     "data-testid": "sheet-drag-zone",
                     className: d("rst:shrink-0", E && "rst:touch-none"),
-                    onPointerDown: U,
-                    onPointerMove: V,
-                    onPointerUp: X,
-                    onPointerCancel: G,
-                    onClickCapture: K,
+                    onPointerDown: K,
+                    onPointerMove: U,
+                    onPointerUp: V,
+                    onPointerCancel: X,
+                    onClickCapture: G,
                     children: [
                       /* @__PURE__ */ n(
                         "div",
@@ -272,7 +274,7 @@ const St = ({
                             onClick: u,
                             "aria-label": q.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(bt, {})
+                            children: /* @__PURE__ */ n(vt, {})
                           }
                         )
                       ] })
@@ -292,7 +294,7 @@ const St = ({
                     children: _
                   }
                 ),
-                /* @__PURE__ */ n(yt, { target: B })
+                /* @__PURE__ */ n(bt, { target: B })
               ]
             }
           ) }) })
@@ -302,5 +304,5 @@ const St = ({
   ] });
 };
 export {
-  St as Sheet
+  Mt as Sheet
 };

package/dist/internal/key-focus.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");function f(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const i=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,i.get?i:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const y=f(l),d=new Set(["Tab","Enter"," ","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageUp","PageDown"]),o="data-key-focus";let u=0,r=!1,n=null;const s=()=>{for(const e of document.querySelectorAll(`[${o}]`))e.removeAttribute(o)};function m(e){e.ctrlKey||e.metaKey||e.altKey&&e.key!=="Tab"||d.has(e.key)&&(r=!0)}function p(e){n=[e.clientX,e.clientY],r=!1,s()}function b(e){const t=!n||n[0]!==e.clientX||n[1]!==e.clientY;n=[e.clientX,e.clientY],t&&(r=!1)}function g(e){r&&e.target instanceof Element&&e.target.setAttribute(o,"")}function w(e){e.target instanceof Element&&e.target.removeAttribute(o)}const a=[["keydown",m],["pointerdown",p],["pointermove",b],["focusin",g],["focusout",w]];function E(){if(u+=1,!(u>1))for(const[e,t]of a)document.addEventListener(e,t,{capture:!0,passive:!0})}function A(){if(u-=1,!(u>0)){for(const[e,t]of a)document.removeEventListener(e,t,{capture:!0});r=!1,n=null,s()}}function O(){y.useEffect(()=>(E(),A),[])}exports.KEY_FOCUS=o;exports.useKeyFocus=O;

package/dist/internal/key-focus.d.ts

@@ -0,0 +1,7 @@
+export declare const KEY_FOCUS = "data-key-focus";
+/**
+ * Keeps the keyboard-mode listeners installed while the calling component is
+ * mounted. Every component that moves focus by script, or opens something
+ * that does, calls it.
+ */
+export declare function useKeyFocus(): void;

package/dist/internal/key-focus.js

@@ -0,0 +1,60 @@
+"use client";
+import * as s from "react";
+const f = /* @__PURE__ */ new Set([
+  "Tab",
+  "Enter",
+  " ",
+  "Escape",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]), r = "data-key-focus";
+let c = 0, o = !1, e = null;
+const i = () => {
+  for (const t of document.querySelectorAll(`[${r}]`)) t.removeAttribute(r);
+};
+function l(t) {
+  t.ctrlKey || t.metaKey || t.altKey && t.key !== "Tab" || f.has(t.key) && (o = !0);
+}
+function a(t) {
+  e = [t.clientX, t.clientY], o = !1, i();
+}
+function m(t) {
+  const n = !e || e[0] !== t.clientX || e[1] !== t.clientY;
+  e = [t.clientX, t.clientY], n && (o = !1);
+}
+function y(t) {
+  o && t.target instanceof Element && t.target.setAttribute(r, "");
+}
+function p(t) {
+  t.target instanceof Element && t.target.removeAttribute(r);
+}
+const u = [
+  ["keydown", l],
+  ["pointerdown", a],
+  ["pointermove", m],
+  ["focusin", y],
+  ["focusout", p]
+];
+function d() {
+  if (c += 1, !(c > 1))
+    for (const [t, n] of u) document.addEventListener(t, n, { capture: !0, passive: !0 });
+}
+function w() {
+  if (c -= 1, !(c > 0)) {
+    for (const [t, n] of u) document.removeEventListener(t, n, { capture: !0 });
+    o = !1, e = null, i();
+  }
+}
+function E() {
+  s.useEffect(() => (d(), w), []);
+}
+export {
+  r as KEY_FOCUS,
+  E as useKeyFocus
+};

package/dist/internal/popup.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function c(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const o=c(s);function a(){const t=o.useRef(null),[e,r]=o.useState(!1);return o.useLayoutEffect(()=>{r(!!t.current?.closest(".dark"))},[]),{ref:t,inDarkScope:e}}const u=["rst:font-ui","rst:z-50 rst:rounded-md rst:py-1 rst:elevation-anchored rst:ring rst:focus:outline-hidden","rst:bg-[var(--roster-popover-bg)] rst:text-[var(--roster-popover-text)] rst:ring-[var(--roster-popover-border)]","rst:[--anchor-gap:4px]"].join(" ");function P(t,e){return t||e==="slate"}const p="rst:w-(--button-width)",i="rst:w-(--input-width)",l="bottom start";exports.POPUP_ANCHOR=l;exports.POPUP_PANEL=u;exports.POPUP_WIDTH_OF_BUTTON=p;exports.POPUP_WIDTH_OF_INPUT=i;exports.popupInDarkPalette=P;exports.useDarkScope=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function a(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const o=a(c);function s(t){const e=t?.closest(".dark");return!!e&&!e.contains(document.body)}function u(){const t=o.useRef(null),[e,r]=o.useState(!1);return o.useLayoutEffect(()=>{r(s(t.current))},[]),{ref:t,inDarkScope:e}}const P=["rst:font-ui","rst:z-50 rst:rounded-md rst:py-1 rst:elevation-anchored rst:ring rst:focus:outline-hidden","rst:bg-[var(--roster-popover-bg)] rst:text-[var(--roster-popover-text)] rst:ring-[var(--roster-popover-border)]","rst:[--anchor-gap:4px]"].join(" ");function i(t,e){return t||e==="slate"}const p="rst:w-(--button-width)",l="rst:w-(--input-width)",O="bottom start";exports.POPUP_ANCHOR=O;exports.POPUP_PANEL=P;exports.POPUP_WIDTH_OF_BUTTON=p;exports.POPUP_WIDTH_OF_INPUT=l;exports.carriesDark=s;exports.popupInDarkPalette=i;exports.useDarkScope=u;

package/dist/internal/popup.d.ts

@@ -29,13 +29,27 @@ import * as React from "react";
  * `@custom-variant dark (&:where(.dark, .dark *))` matches, so this reproduces
  * the cascade rather than second-guessing it. Applying the class to the panel
  * covers the panel itself through the `&:where(.dark, …)` half, and its
- * options through `.dark *`. Idempotent when `.dark` is already on the root.
+ * options through `.dark *`.
+ *
+ * **Only when the portal leaves the scope.** When `.dark` is on `<html>` or
+ * `<body>`, the panel is already inside it and needs nothing. The class isn't
+ * harmless there either: it carries Roster's own `.dark` token block, which
+ * declares the default palette on the panel itself, over whatever the page set
+ * above it. A consumer's `--roster-*` set inline on `<html>`, or under
+ * `html.dark`, stopped at every panel, which drew Roster's grays under the
+ * consumer's trigger.
  *
  * Read once, on mount. A theme TOGGLE does not need this at all: it flips
  * `.dark` on `<html>`, and the portal is already a descendant of `<html>`. The
  * only case this covers is a scoped `.dark`, which is part of a page's
  * structure rather than something that changes at runtime.
  */
+/**
+ * Whether a panel portaled out from beside `el` must carry `.dark` itself:
+ * `el` is in a `.dark` scope, and the scope doesn't contain `<body>`, where
+ * the portal lands. See `useDarkScope` for why carrying it otherwise is wrong.
+ */
+export declare function carriesDark(el: Element | null | undefined): boolean;
 export declare function useDarkScope<T extends HTMLElement>(): {
     ref: React.RefObject<T | null>;
     inDarkScope: boolean;

package/dist/internal/popup.js

@@ -1,12 +1,16 @@
 "use client";
-import * as e from "react";
-function s() {
-  const t = e.useRef(null), [r, o] = e.useState(!1);
-  return e.useLayoutEffect(() => {
-    o(!!t.current?.closest(".dark"));
+import * as o from "react";
+function s(t) {
+  const r = t?.closest(".dark");
+  return !!r && !r.contains(document.body);
+}
+function n() {
+  const t = o.useRef(null), [r, e] = o.useState(!1);
+  return o.useLayoutEffect(() => {
+    e(s(t.current));
   }, []), { ref: t, inDarkScope: r };
 }
-const n = [
+const c = [
   /* `font-ui` on the panel, not on each row. Put on the rows it is missed by
      anything else in the panel — the empty message rendered in the host's
      prose face while the options beside it did not. */
@@ -18,12 +22,13 @@ const n = [
 function a(t, r) {
   return t || r === "slate";
 }
-const c = "rst:w-(--button-width)", u = "rst:w-(--input-width)", p = "bottom start";
+const u = "rst:w-(--button-width)", p = "rst:w-(--input-width)", i = "bottom start";
 export {
-  p as POPUP_ANCHOR,
-  n as POPUP_PANEL,
-  c as POPUP_WIDTH_OF_BUTTON,
-  u as POPUP_WIDTH_OF_INPUT,
+  i as POPUP_ANCHOR,
+  c as POPUP_PANEL,
+  u as POPUP_WIDTH_OF_BUTTON,
+  p as POPUP_WIDTH_OF_INPUT,
+  s as carriesDark,
   a as popupInDarkPalette,
-  s as useDarkScope
+  n as useDarkScope
 };

package/dist/meta.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.11.0",
-  "tests": 2361,
-  "testFiles": 579
+  "version": "5.12.0",
+  "tests": 2399,
+  "testFiles": 594
 }