@oprt/react 0.2.0 → 0.3.0

package/README.md

@@ -35,7 +35,8 @@ import "@oprt/tokens";
 import "./globals.css";
 ```
 
-Load the tokens from JavaScript or a `<link>`, not with an `@import` inside the Tailwind
+Load the tokens from
+JavaScript or a `<link>`, not with an `@import` inside the Tailwind
 stylesheet: the Tailwind CLI inlines an imported file without rewriting its font URLs, and the
 bundled fonts would not load. Inside Tailwind Typography's `prose`, wrap components in an element
 with the `not-prose` class.

package/dist/ActionStatus/ActionStatus.js

@@ -8,6 +8,7 @@ import { Badge } from "../Badge/Badge.js";
 import { Button } from "../Button/Button.js";
 import { useActionFocus } from "../_internal/useActionFocus.js";
 import { devValidate } from "../_internal/devValidate.js";
+import { useHoldBackNewText } from "../_internal/liveRegion.js";
 import { ActionStatusManifest } from "./ActionStatus.manifest.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var statusStyles = cva(
@@ -34,6 +35,8 @@ function ActionStatusLine({
   requestId,
   children
 }) {
+  const spoken = [`${label}, ${state}.`, requestId && `Request: ${requestId}.`, message].filter(Boolean).join(" ");
+  const holdBack = useHoldBackNewText(true);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -42,13 +45,21 @@ function ActionStatusLine({
       "aria-atomic": "true",
       className: "flex min-w-0 flex-col gap-1u",
       children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere font-medium uppercase tracking-oprt-caps", children: label }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: variants[state], indicator: "dot", children: state }) }),
-        requestId && /* @__PURE__ */ jsxs("span", { className: "min-w-0 oprt-wrap-anywhere font-mono", children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: holdBack ? null : spoken }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "min-w-0 oprt-wrap-anywhere font-medium uppercase tracking-oprt-caps",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Badge, { variant: variants[state], indicator: "dot", children: state }) }),
+        requestId && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "min-w-0 oprt-wrap-anywhere font-mono", children: [
           "Request: ",
           requestId
         ] }),
-        message && /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere", children: message }),
+        message && /* @__PURE__ */ jsx("p", { "aria-hidden": "true", className: "m-0 min-w-0 oprt-wrap-anywhere", children: message }),
         children
       ]
     }

package/dist/Alert/Alert.js

@@ -7,6 +7,7 @@ import { forwardRef } from "react";
 import clsx from "clsx";
 import { AlertManifest } from "./Alert.manifest.js";
 import { devValidate } from "../_internal/devValidate.js";
+import { useHoldBackNewText } from "../_internal/liveRegion.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ICONS = {
   info: Info,
@@ -48,6 +49,7 @@ var Alert = forwardRef((allProps, ref) => {
     ...props
   } = allProps;
   const role = variant === "error" || variant === "warning" ? "alert" : "status";
+  const holdBack = useHoldBackNewText(role === "status");
   const Icon = ICONS[variant];
   const hasBody = children != null && typeof children !== "boolean" && children !== "";
   if (process.env.NODE_ENV !== "production") {
@@ -55,19 +57,26 @@ var Alert = forwardRef((allProps, ref) => {
   }
   return /* @__PURE__ */ jsxs("div", { ref, role, className: clsx(containerStyles({ variant }), className), ...props, children: [
     /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: clsx("shrink-0", accentStyles({ variant })), children: /* @__PURE__ */ jsx(Icon, { size: 16 }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1u oprt-wrap-anywhere", children: [
-      title && /* @__PURE__ */ jsx(
-        "p",
-        {
-          className: clsx(
-            "m-0 text-oprt-sm uppercase tracking-oprt-sm",
-            accentStyles({ variant })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 flex-col gap-1u oprt-wrap-anywhere",
+        ...holdBack ? { "aria-hidden": true } : {},
+        children: [
+          title && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: clsx(
+                "m-0 text-oprt-sm uppercase tracking-oprt-sm",
+                accentStyles({ variant })
+              ),
+              children: title
+            }
           ),
-          children: title
-        }
-      ),
-      hasBody && /* @__PURE__ */ jsx("div", { className: "text-oprt-base normal-case text-oprt-text", children })
-    ] }),
+          hasBody && /* @__PURE__ */ jsx("div", { className: "text-oprt-base normal-case text-oprt-text", children })
+        ]
+      }
+    ),
     dismissible && /* @__PURE__ */ jsx(
       "button",
       {

package/dist/AttachmentPreview/AttachmentPreview.js

@@ -77,18 +77,21 @@ var AttachmentPreview = forwardRef(
               /* @__PURE__ */ jsx("span", { className: "oprt-wrap-anywhere", children: attachment.mediaType })
             ] })
           ] }),
-          preview.kind === "image" && (imageError ? /* @__PURE__ */ jsx("p", { role: "status", className: "m-0 text-oprt-error", children: imageError }) : /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: preview.src,
-              alt: preview.alt,
-              onError: () => setImageState(
-                (current) => current.key === imageKey ? { key: imageKey, failed: true } : current
-              ),
-              className: clsx(PREVIEW_HEIGHT, "max-w-full self-start object-contain")
-            },
-            imageKey
-          )),
+          preview.kind === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { role: "status", className: imageError ? "m-0 text-oprt-error" : "sr-only", children: imageError }),
+            !imageError && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: preview.src,
+                alt: preview.alt,
+                onError: () => setImageState(
+                  (current) => current.key === imageKey ? { key: imageKey, failed: true } : current
+                ),
+                className: clsx(PREVIEW_HEIGHT, "max-w-full self-start object-contain")
+              },
+              imageKey
+            )
+          ] }),
           preview.kind === "text" && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "pre",

package/dist/Chart/Chart.js

@@ -874,7 +874,15 @@ var Chart = forwardRef((allProps, ref) => {
                   onBlur: () => setInspectionFocused(false)
                 }
               ),
-              empty ? /* @__PURE__ */ jsx("p", { className: "m-0 py-6u text-oprt-base text-oprt-text-dim", role: "status", children: empty }) : /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  role: "status",
+                  className: empty ? "m-0 py-6u text-oprt-base text-oprt-text-dim" : "sr-only",
+                  children: empty
+                }
+              ),
+              empty ? null : /* @__PURE__ */ jsxs(
                 "svg",
                 {
                   role: "img",

package/dist/EventTimeline/EventTimeline.js

@@ -172,7 +172,15 @@ var EventTimeline = forwardRef(
         "aria-label": label,
         className: clsx(timelineStyles(), className),
         children: [
-          !validRange ? /* @__PURE__ */ jsx("p", { role: "status", className: "m-0 text-oprt-base text-oprt-text-dim", children: "Choose a valid time range with start before end." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              role: "status",
+              className: !validRange ? "m-0 text-oprt-base text-oprt-text-dim" : "sr-only",
+              children: !validRange ? "Choose a valid time range with start before end." : ""
+            }
+          ),
+          !validRange ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-1u font-mono text-oprt-base text-oprt-text-dim", children: [
               /* @__PURE__ */ jsx("time", { dateTime: new Date(start).toISOString(), children: utc(start) }),
               /* @__PURE__ */ jsx("time", { dateTime: new Date(end).toISOString(), children: utc(end) })

package/dist/Popover/Popover.js

@@ -69,11 +69,12 @@ var Popover = forwardRef(
     const dialog = useRef(null);
     const lastDialog = useRef(null);
     const wasOpen = useRef(false);
-    const focusFrame = useRef();
+    const focusFrame = useRef(void 0);
     const focusScrollClose = useRef(false);
     const current = useRef({ isOpen, onCloseAutoFocus, returnFocusRef });
     current.current = { isOpen, onCloseAutoFocus, returnFocusRef };
-    const childRef = parseInt(version, 10) < 19 ? children.ref : children.props.ref;
+    const triggerChild = children;
+    const childRef = parseInt(version, 10) < 19 ? triggerChild.ref : triggerChild.props.ref;
     const rememberTrigger = useCallback((node) => {
       trigger.current = node;
       if (node) lastTrigger.current = node;
@@ -209,10 +210,10 @@ var Popover = forwardRef(
         document.removeEventListener("pointercancel", cancel, true);
       };
     }, [isOpen, requestOpen]);
-    const triggerElement = cloneElement(children, {
+    const triggerElement = cloneElement(triggerChild, {
       ref: setTrigger,
-      disabled: disabled || children.props.disabled,
-      "aria-disabled": disabled || children.props["aria-disabled"],
+      disabled: disabled || triggerChild.props.disabled,
+      "aria-disabled": disabled || triggerChild.props["aria-disabled"],
       "aria-controls": isOpen ? id : void 0
     });
     const pressable = /* @__PURE__ */ jsx(Pressable, { isDisabled: disabled, children: triggerElement });

package/dist/Tabs/useTabsIndicator.js

@@ -6,7 +6,7 @@ import { createResizeObserver } from "../_internal/useElementWidth.js";
 import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
 function useTabsIndicator(list, vertical) {
   const [geometry, setGeometry] = useState();
-  const selectedId = useRef();
+  const selectedId = useRef(void 0);
   useIsomorphicLayoutEffect(() => {
     const node = list.current;
     if (!node) return;

package/dist/Toast/Toast.js

@@ -165,7 +165,7 @@ var Toast = forwardRef((allProps, ref) => {
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 select-text flex-col gap-1u oprt-wrap-anywhere", children: [
           /* @__PURE__ */ jsx(RadixToast.Title, { className: titleStyles({ variant: severity }), children: title }),
           description && /* @__PURE__ */ jsxs(RadixToast.Description, { className: "m-0 text-oprt-base normal-case text-oprt-text", children: [
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: ". " }),
+            /* @__PURE__ */ jsx("span", { "data-radix-toast-announce-exclude": "", "data-radix-toast-announce-alt": ". " }),
             description
           ] })
         ] }),

package/dist/_internal/hydration.js

@@ -35,11 +35,11 @@ function warnProbeMissing(origin) {
 function useHydrationRoot(...forwardedIds) {
   const probe = useId();
   const hydrated = useSyncExternalStore(subscribeNoop, getClientSnapshot, getServerSnapshot);
-  const hydratingMount = useRef();
+  const hydratingMount = useRef(void 0);
   if (hydratingMount.current === void 0) hydratingMount.current = !hydrated;
   const [disagrees, setDisagrees] = useState(false);
   const clientOnly = useRef(hydrated);
-  const origin = useRef();
+  const origin = useRef(void 0);
   if (process.env.NODE_ENV !== "production" && origin.current === void 0) {
     origin.current = callerOfHook();
   }

package/dist/_internal/liveRegion.js

@@ -0,0 +1,27 @@
+"use client";
+
+// src/_internal/liveRegion.ts
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+var neverChanges = () => () => {
+};
+var LIVE_REGION_LEAD_MS = 100;
+function useHoldBackNewText(enabled) {
+  const hydrating = useSyncExternalStore(
+    neverChanges,
+    () => false,
+    () => true
+  );
+  const lateArrival = useRef(null);
+  if (lateArrival.current === null) lateArrival.current = !hydrating;
+  const [held, setHeld] = useState(Boolean(lateArrival.current));
+  useEffect(() => {
+    if (!held) return;
+    const timer = window.setTimeout(() => setHeld(false), LIVE_REGION_LEAD_MS);
+    return () => window.clearTimeout(timer);
+  }, [held]);
+  return enabled && held;
+}
+export {
+  LIVE_REGION_LEAD_MS,
+  useHoldBackNewText
+};

package/dist/_internal/motion.js

@@ -25,8 +25,8 @@ function useMotion(mode = "auto", component) {
   const [ready, setReady] = useState(false);
   const [keyboard, setKeyboard] = useState(false);
   const pointer = useRef(false);
-  const frame = useRef();
-  const contactCleanup = useRef();
+  const frame = useRef(void 0);
+  const contactCleanup = useRef(void 0);
   const clearContact = useCallback(() => {
     contactCleanup.current?.();
     contactCleanup.current = void 0;